Assitant improved

debian/changelog

@@ -1,4 +1,4 @@
-hedera-web (1.405.95) stable; urgency=low
+hedera-web (1.405.96) stable; urgency=low
 
   * Initial Release.
 

forms/ecomerce/checkout/checkout.js

@@ -41,8 +41,7 @@ Hedera.Checkout = new Class ({
 	},
 	
 	disableButtons: function(disable) {
-		this.$('confirm-delivery').disabled = disable;
-		this.$('confirm-pickup').disabled = disable;
+		this.$('assistant-bar').disabled = disable;
 	},
 
 	onConfirmClick: function() {

forms/ecomerce/checkout/style.css

@@ -6,13 +6,12 @@
 }
 .checkout .bar
 {
-	padding: .2em;
 	margin-bottom: 1em;
 }
 .checkout .form
 {
 	max-width: 40em;
-	padding: 4em;
+	padding: 4em 2em;
 }
 
 /* Step */

forms/ecomerce/checkout/ui.xml

@@ -71,11 +71,14 @@
 </div>
 <div id="form" class="checkout">
 	<div class="box bar">
-		<htk-assistant-bar assistant="assistant"/>
+		<htk-assistant-bar
+			id="assistant-bar"
+			assistant="assistant"/>
 	</div>
 	<div class="box">
 		<div class="form">
-		<htk-assistant id="assistant">
+		<htk-assistant id="assistant"
+			endFunc="onConfirmClick">
 			<htk-step
 				name="method"
 				validate-func="methodValidate">
@@ -86,12 +89,16 @@
 						param="method"
 						on-changed="onMethodChange"/>
 					<div>
-						<htk-radio radio-group="rg-method" value="AGENCY"/>
-						<label><t>Receive the order</t></label>
+						<label>
+							<htk-radio radio-group="rg-method" value="AGENCY"/>
+							<t>Receive the order</t>
+						</label>
 					</div>
 					<div>
-						<htk-radio radio-group="rg-method" value="PICKUP"/>
-						<label><t>PickupInStore</t></label>
+						<label>
+							<htk-radio radio-group="rg-method" value="PICKUP"/>
+							<t>PickupInStore</t>
+						</label>
 					</div>
 				</div>
 			</htk-step>
@@ -182,9 +189,6 @@
 						<t>Agency</t> 
 						<htk-text form="agency-combo" column="description"/>
 					</p>
-					<button id="confirm-delivery" class="thin" on-click="onConfirmClick">
-						<t>Confirm</t>
-					</button>
 					<div class="clear"/>
 				</div>
 			</htk-step>
@@ -200,9 +204,6 @@
 						<t>Warehouse</t> 
 						<htk-text form="warehouse-combo" column="description"/>
 					</p>
-					<button id="confirm-pickup" class="thin" on-click="onConfirmClick">
-						<t>Confirm</t>
-					</button>
 					<div class="clear"/>
 				</div>
 			</htk-step>

image/icon/light/go-next.svg

@@ -12,7 +12,7 @@
    sodipodi:docname="go-next.svg"
    height="16"
    id="svg7384"
-   inkscape:version="0.48.5 r10040"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
    version="1.1"
    width="16">
   <metadata
@@ -33,7 +33,7 @@
      bordercolor="#666666"
      borderopacity="1"
      inkscape:current-layer="layer12"
-     inkscape:cx="4.372549"
+     inkscape:cx="8"
      inkscape:cy="8"
      gridtolerance="10"
      inkscape:guide-bbox="true"
@@ -55,21 +55,21 @@
      inkscape:snap-nodes="true"
      inkscape:snap-others="false"
      inkscape:snap-to-guides="true"
-     inkscape:window-height="1014"
+     inkscape:window-height="1013"
      inkscape:window-maximized="1"
      inkscape:window-width="1920"
      inkscape:window-x="1920"
-     inkscape:window-y="27"
-     inkscape:zoom="51">
+     inkscape:window-y="30"
+     inkscape:zoom="51.0625">
     <inkscape:grid
        empspacing="2"
        enabled="true"
        id="grid4866"
-       originx="120px"
-       originy="530px"
+       originx="120"
+       originy="530"
        snapvisiblegridlinesonly="true"
-       spacingx="1px"
-       spacingy="1px"
+       spacingx="1"
+       spacingy="1"
        type="xygrid"
        visible="true" />
     <inkscape:grid
@@ -80,11 +80,11 @@
        enabled="true"
        id="grid5968"
        opacity="0.1254902"
-       originx="120px"
-       originy="530px"
+       originx="120"
+       originy="530"
        snapvisiblegridlinesonly="true"
-       spacingx="0.5px"
-       spacingy="0.5px"
+       spacingx="0.5"
+       spacingy="0.5"
        type="xygrid"
        visible="true" />
   </sodipodi:namedview>
@@ -146,6 +146,6 @@
        inkscape:connector-curvature="0"
        d="m 126.10829,749.02355 a 0.99672214,0.99672214 0 0 0 -0.49831,1.71294 l 4.26678,4.26679 -4.26678,4.26679 a 1.013034,1.013034 0 1 0 1.43264,1.43265 l 4.98311,-4.98312 0.68518,-0.71632 -0.68518,-0.71632 -4.98311,-4.98311 a 0.99672214,0.99672214 0 0 0 -0.93433,-0.2803 z"
        id="path8334"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#666666;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#666666;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:accumulate" />
   </g>
 </svg>

image/icon/light/go-previous.svg

@@ -12,7 +12,7 @@
    sodipodi:docname="go-previous.svg"
    height="16"
    id="svg7384"
-   inkscape:version="0.91 r13725"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
    version="1.1"
    width="16">
   <metadata
@@ -33,8 +33,8 @@
      bordercolor="#666666"
      borderopacity="1"
      inkscape:current-layer="layer12"
-     inkscape:cx="4.5742092"
-     inkscape:cy="7.9610706"
+     inkscape:cx="8"
+     inkscape:cy="8"
      gridtolerance="10"
      inkscape:guide-bbox="true"
      guidetolerance="10"
@@ -55,21 +55,21 @@
      inkscape:snap-nodes="true"
      inkscape:snap-others="false"
      inkscape:snap-to-guides="true"
-     inkscape:window-height="1014"
+     inkscape:window-height="1013"
      inkscape:window-maximized="1"
      inkscape:window-width="1920"
      inkscape:window-x="1920"
-     inkscape:window-y="27"
-     inkscape:zoom="51.375">
+     inkscape:window-y="30"
+     inkscape:zoom="51.0625">
     <inkscape:grid
        empspacing="2"
        enabled="true"
        id="grid4866"
-       originx="141px"
-       originy="530px"
+       originx="141"
+       originy="530"
        snapvisiblegridlinesonly="true"
-       spacingx="1px"
-       spacingy="1px"
+       spacingx="1"
+       spacingy="1"
        type="xygrid"
        visible="true" />
     <inkscape:grid
@@ -80,11 +80,11 @@
        enabled="true"
        id="grid5968"
        opacity="0.1254902"
-       originx="141px"
-       originy="530px"
+       originx="141"
+       originy="530"
        snapvisiblegridlinesonly="true"
-       spacingx="0.5px"
-       spacingy="0.5px"
+       spacingx="0.5"
+       spacingy="0.5"
        type="xygrid"
        visible="true" />
   </sodipodi:namedview>

js/htk/assistant-bar.js

@@ -18,36 +18,67 @@ module.exports = new Class({
 			get: function() {
 				return this._assistant;
 			}
+		},
+		disabled: {
+			type: Boolean,
+			set: function(x) {
+				this._disabled = x;
+				this._previousButton.disabled = x;
+				this._nextButton.disabled = x;
+				this._endButton.disabled = x;
+			},
+			get: function() {
+				return this._disabled;
+			}
 		}
 	},
 
 	_assistant: null,
 	_stepIndex: -1,
+	_disabled: false,
 	
 	render: function() {
 		var bar = this.createRoot('div');
 		bar.className = 'htk-assistant-bar';
 		
-		var previousButton = this.createElement('img');
-		previousButton.src = 'image/icon/light/go-previous.svg';
+		var previousButton = this.createElement('button');
 		previousButton.className = 'previous';
 		previousButton.title = _('Previous');
 		previousButton.addEventListener('click', this.movePrevious.bind(this));
 		bar.appendChild(previousButton);
 		
+		var img = this.createElement('img');
+		img.src = 'image/icon/light/go-previous.svg';
+		previousButton.appendChild(img);
+		
 		var steps = this.createElement('div');
+		steps.className = 'steps';
 		bar.appendChild(steps);
 		
-		var nextButton = this.createElement('img');
-		nextButton.src = 'image/icon/light/go-next.svg';
+		var nextButton = this.createElement('button');
 		nextButton.className = 'next';
 		nextButton.title = _('Next');
 		nextButton.addEventListener('click', this.moveNext.bind(this));
 		bar.appendChild(nextButton);
 		
+		var img = this.createElement('img');
+		img.src = 'image/icon/light/go-next.svg';
+		nextButton.appendChild(img);
+		
+		var endButton = this.createElement('button');
+		endButton.className = 'end';
+		endButton.title = _('Confirm');
+		endButton.addEventListener('click', this.end.bind(this));
+		bar.appendChild(endButton);
+		
+		var img = this.createElement('img');
+		img.src = 'image/icon/light/ok.svg';
+		endButton.appendChild(img);
+		
 		this._steps = steps;
 		this._previousButton = previousButton;
 		this._nextButton = nextButton;
+		this._endButton = endButton;
 	},
 
 	movePrevious: function() {
@@ -60,6 +91,11 @@ module.exports = new Class({
 			this._assistant.moveNext();
 	},
 	
+	end: function() {
+		if (this._assistant)
+			this._assistant.end();
+	},
+	
 	setStep: function(stepIndex) {
 		if (this._assistant)
 			this._assistant.setStep(stepIndex);
@@ -70,10 +106,9 @@ module.exports = new Class({
 		var steps = this._steps;
 
 		Vn.Node.removeChilds(steps);
-		steps.style.width = (stepCount * 1.7) + 'em';
 
 		for (var i = 0; i < stepCount; i++) {
-			var img = this.createElement('img');
+			var img = this.createElement('div');
 			img.src = 'image/step.svg';
 			img.addEventListener('click', this.setStep.bind(this, i));
 			steps.appendChild(img);
@@ -87,21 +122,26 @@ module.exports = new Class({
 		var stepCount = childs ? childs.length : 0;
 		var stepIndex = this._assistant ? this._assistant.step : -1;
 
-		if (this._stepIndex != -1)
+		if (this._stepIndex != -1) {
 			childs[this._stepIndex].src = 'image/step.svg';
+			childs[this._stepIndex].className = '';
+		}
 
 		if (stepIndex >= stepCount)
 			return;
 
 		this._stepIndex = stepIndex;
 		
-		if (stepIndex != -1)
+		if (stepIndex != -1) {
 			childs[stepIndex].src = 'image/step-cur.svg';
+			childs[this._stepIndex].className = 'selected';
+		}
 
-		var visibility = stepIndex <= 0 ? 'hidden' : 'visible';
+		var visibility = stepIndex > 0 ? 'visible' : 'hidden';
 		this._previousButton.style.visibility = visibility;
 
-		var visibility = stepIndex >= stepCount - 1 ? 'hidden' : 'visible';
-		this._nextButton.style.visibility = visibility;
+		var isEnd = stepIndex >= stepCount - 1;
+		this._nextButton.style.display = isEnd ? 'none' : 'block';
+		this._endButton.style.display = isEnd ? 'block' : 'none';
 	}
 });

js/htk/assistant.js

@@ -64,20 +64,20 @@ module.exports = new Class({
 		 */
 		stepFunc: {
 			type: Function,
-			set: function(x) {
-				this._stepFunc = x;
-				this.setStep(this._stepIndex);
-			},
-			get: function() {
-				return this._stepFunc;
-			}
+			value: null
+		},
+		/**
+		 * Function to call on every step change.
+		 */
+		endFunc: {
+			type: Function,
+			value: null
 		},
 	},
 
 	_stepNode: null,
 	_stepIndex: 0,
 	_stepName: null,
-	_stepFunc: null,
 	steps: {},
 
 	initialize: function(props) {
@@ -133,6 +133,9 @@ module.exports = new Class({
 		this.currentStep = step;
 		step.show();
 		this.signalEmit('step-change', stepIndex);
+		
+		if (this.stepFunc)
+			this.stepFunc(step);
 	},
 
 	/**
@@ -147,5 +150,13 @@ module.exports = new Class({
 	 */
 	moveNext: function() {
 		this.setStep(this._stepIndex + 1);
+	},
+
+	/**
+	 * Ends the assistant. If defined, the stepFunc will be called.
+	 */
+	end: function() {
+		if (this.endFunc)
+			this.endFunc();
 	}
 });

js/htk/locale/ca.yml

@@ -24,5 +24,6 @@ ImageAdded: Imatge afegida correctament
 Close: Tancar
 Previous: Anterior
 Next: Següent
+Confirm: Confirmar
 Search: Cercar
 Search...: Cercar...

js/htk/locale/en.yml

@@ -24,5 +24,6 @@ ImageAdded: Image added successfully
 Close: Close
 Previous: Previous
 Next: Next
+Confirm: Confirm
 Search: Search
 Search...: Search...

js/htk/locale/es.yml

@@ -24,5 +24,6 @@ ImageAdded: Imagen añadida correctamente
 Close: Cerrar
 Previous: Anterior
 Next: Siguiente
+Confirm: Confirmar
 Search: Buscar
 Search...: Buscar...

js/htk/locale/fr.yml

@@ -24,5 +24,6 @@ ImageAdded: Image ajoutée correctement
 Close: Croche
 Previous: Précédent
 Next: Suivant
+Confirm: Confirmer
 Search: Recherche
 Search...: Recherche...

js/htk/locale/mn.yml

@@ -1,28 +0,0 @@
-'True': 'True'
-'False': 'False'
-'Null': 'Null'
-ChangeDate: Change date
-Sort: Sort
-At: at
-Of: of
-OfThe: of the
-Remove: Remove
-Loading: Loading
-Loading...: Loading...
-ReallyDelete: Are you sure you want to delete the line?
-YouMustBeLoggedIn: You must be a registered user
-EmptyList: Empty list
-NoData: No data
-ErrorLoadingData: Error
-Error: Error
-Image: Image
-File: File
-FileName: File name
-UpdateImage: Add or update an image
-UploadFile: Upload file
-ImageAdded: Image added successfully
-Close: Close
-Previous: Previous
-Next: Next
-Search: хайх
-Search...: хайх...

js/htk/locale/pt.yml

@@ -24,5 +24,6 @@ ImageAdded: Imagen adicionada corretamente
 Close: Fechar
 Previous: Anterior
 Next: Seguinte
+Confirm: Confirmar
 Search: Procurar
 Search...: Procurar...

js/htk/style.css

@@ -519,45 +519,62 @@ td.cell-image .htk-image
 
 .htk-assistant-bar
 {
-	margin: 0.5em auto;
-	max-width: 30em;
 	position: relative;
+	padding: .8em;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	box-sizing: border-box;
+	width: 100%;
 }
-.htk-assistant-bar img
+.htk-assistant-bar > button
 {
+	border-radius: 50%;
+	padding: 0;
+	margin: 0;
+}
+.htk-assistant-bar > .end
+{
+	display: none;
+}
+.htk-assistant-bar > button > img
+{
+	display: block;
+	width: 1.8em;
+	padding: .5em;
+}
+.htk-assistant-bar > .steps
+{
+	display: flex;
+	align-items: center;
+}
+.htk-assistant-bar > .steps > div {
+	background-color: #AAA;
+	width: .5em;
+	height: .5em;
+	cursor: pointer;
+	border-radius: 50%;
+	margin: .5em;
+
+	transition-property: width, height;
+	transition-duration: 100ms;
+	transition-timing-function: ease-in-out;
+}
+.htk-assistant-bar > .steps > div.selected {
+	background-color: #666;
+	width: 1em;
+	height: 1em;
+}
+.htk-assistant-bar > .steps > div:hover {
+	opacity: .7;
+}
+.htk-assistant-bar > .steps > img
+{
+	width: 1.3em;
+	margin: 0 .2em;
 	cursor: pointer;
 }
-.htk-assistant-bar > img
-{
-	position: absolute;
-	width: 1.8em;
-	top: 0;
-	padding: 0.3em;
-	border-radius: 0.1em;
-}
-.htk-assistant-bar > img:hover
-{
-	background-color: rgba(1,1,1,0.1);
-}
-.htk-assistant-bar > img.previous
-{
-	left: 0;
-}
-.htk-assistant-bar > img.next
-{
-	right: 0;
-}
-.htk-assistant-bar > div
-{
-	margin: 0 auto;
-	padding-top: 0.2em;
-}
-.htk-assistant-bar > div > img
-{
-	padding: 0.3em 0.2em;
-	width: 1.3em;
-}
-.htk-assistant-bar > div > img:hover
+.htk-assistant-bar > .steps > img:hover
 {
 	opacity: .7;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hedera-web",
-  "version": "1.405.95",
+  "version": "1.405.96",
   "description": "Verdnatura web page",
   "license": "GPL-3.0",
   "repository": {