Avoid using json in attribute's values (#459)

* Avoid using json in attributes values BFF-628 * Move setting responsive steps to ready method BFF-628
vaadin · Feb 19, 2018 · 266946a · 266946a
1 parent efa978a
commit 266946a
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 30 deletions.
diff --git a/src/main/webapp/frontend/src/views/storefront/order-details-full.html b/src/main/webapp/frontend/src/views/storefront/order-details-full.html
@@ -1,7 +1,6 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
 <link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../../../bower_components/vaadin-icons/vaadin-icons.html">
-<link rel="import" href="../../../bower_components/iron-media-query/iron-media-query.html">
 <link rel="import" href="../../../bower_components/vaadin-button/src/vaadin-button.html">
 <link rel="import" href="../../../bower_components/vaadin-form-layout/src/vaadin-form-item.html">
 <link rel="import" href="../../../bower_components/vaadin-form-layout/src/vaadin-form-layout.html">
@@ -114,18 +113,16 @@
       }
     </style>
 
-    <iron-media-query query="(min-width: 600px)" query-matches="{{desktopView}}"></iron-media-query>
-
     <div class="scrollable main-row" id="main">
       <div class="meta-row">
         <order-status-badge status="[[item.state]]"></order-status-badge>
         <span class="dim">Order #[[item.id]]</span>
       </div>
 
-      <vaadin-form-layout responsive-steps="[[_computeResponsiveSteps(desktopView, 4, 1)]]">
+      <vaadin-form-layout id="form1">
         <vaadin-form-item>
           <label slot="label">Due</label>
-          <vaadin-form-layout responsive-steps='[{"columns": 1}, {"minWidth": "180px", "columns": 2}]'>
+          <vaadin-form-layout id="form2">
             <div class="date">
               <h3>[[item.dueDate.day]]</h3>
               <span class="dim">[[item.dueDate.weekday]]</span>
@@ -148,10 +145,10 @@ <h3>[[item.customer.phoneNumber]]</h3>
         </vaadin-form-item>
       </vaadin-form-layout>
 
-      <vaadin-form-layout responsive-steps="[[_computeResponsiveSteps(desktopView, 4, 1)]]">
+      <vaadin-form-layout id="form3">
         <div></div>
 
-        <vaadin-form-layout colspan="2" responsive-steps='[{"columns": 1, "labelsPosition": "top"}]'>
+        <vaadin-form-layout id="form4" colspan="2">
           <template is="dom-if" if="[[item.customer.details]]">
             <vaadin-form-item label-position="top">
               <label slot="label">Additional details</label>
@@ -233,23 +230,32 @@ <h3>[[item.customer.phoneNumber]]</h3>
         return {
           item: {
             type: Object
-          },
-          desktopView: Boolean
+          }
         };
       }
 
+      ready() {
+        super.ready();
+
+        this.$.form1.responsiveSteps = this.$.form3.responsiveSteps = [
+          {columns: 1, labelsPosition: 'top'},
+          {minWidth: '600px', columns: 4, labelsPosition: 'top'}
+        ];
+
+        this.$.form2.responsiveSteps = [
+          {columns: 1}, {minWidth: '180px', columns: 2}
+        ];
+
+        this.$.form4.responsiveSteps = [
+          {columns: 1, labelsPosition: 'top'}
+        ];
+      }
+
       _onCommentKeydown(event) {
         if (event.key === 'Enter') {
           this.$['send-comment'].click();
         }
       }
-
-      _computeResponsiveSteps(desktopView, desktopColumns, mobileColumns) {
-        return [{
-          columns: desktopView ? desktopColumns : mobileColumns,
-          labelsPosition: 'top'
-        }];
-      }
     }
 
     window.customElements.define(OrderDetailsFull.is, OrderDetailsFull);

diff --git a/src/main/webapp/frontend/src/views/storefront/order-editor.html b/src/main/webapp/frontend/src/views/storefront/order-editor.html
@@ -23,20 +23,16 @@
     <div class="scrollable flex1" id="main">
       <h2 id="title"></h2>
 
-      <vaadin-form-layout responsive-steps='[
-          {"columns": 1, "labelsPosition": "top"},
-          {"minWidth": "600px", "columns": 4, "labelsPosition": "top"}]'>
+      <vaadin-form-layout id="form1">
 
-        <vaadin-form-layout responsive-steps='[{"columns": 1, "labelsPosition": "top"}]'>
+        <vaadin-form-layout id="form2">
 
           <vaadin-combo-box label="Status" id="status">
           </vaadin-combo-box>
 
           <vaadin-form-item>
             <label slot="label">Due</label>
-            <vaadin-form-layout responsive-steps='[
-              {"columns": 1, "labelsPosition": "top"},
-              {"minWidth": "600px", "columns": 2, "labelsPosition": "top"}]'>
+            <vaadin-form-layout id="form3">
 
               <vaadin-date-picker  id="dueDate">
               </vaadin-date-picker>
@@ -53,9 +49,7 @@ <h2 id="title"></h2>
           </vaadin-combo-box>
         </vaadin-form-layout>
 
-        <vaadin-form-layout  colspan="3" responsive-steps='[
-          {"columns": 1, "labelsPosition": "top"},
-          {"minWidth": "600px", "columns": 3, "labelsPosition": "top"}]'>
+        <vaadin-form-layout id="form4" colspan="3">
 
           <vaadin-text-field id="customerName" label="Customer" colspan="2">
             <iron-icon slot="prefix" icon="vaadin:user"></iron-icon>
@@ -99,6 +93,29 @@ <h2 id="title"></h2>
         };
       }
 
+      ready() {
+        super.ready();
+
+        this.$.form1.responsiveSteps = [
+          {columns: 1, labelsPosition: 'top'},
+          {minWidth: '600px', columns: 4, labelsPosition: 'top'}
+        ];
+
+        this.$.form2.responsiveSteps = [
+          {columns: 1, labelsPosition: 'top'}
+        ];
+
+        this.$.form3.responsiveSteps = [
+          {columns: 1, labelsPosition: 'top'},
+          {minWidth: '600px', columns: 2, labelsPosition: 'top'}
+        ];
+
+        this.$.form4.responsiveSteps = [
+          {columns: 1, labelsPosition: 'top'},
+          {minWidth: '600px', columns: 3, labelsPosition: 'top'}
+        ];
+      }
+
       _onStatusChange() {
         const status = this.status ? this.status.toLowerCase() : this.status;
         this.$.status.$.input.setAttribute('status', status);

diff --git a/src/main/webapp/frontend/src/views/storefront/order-item-editor.html b/src/main/webapp/frontend/src/views/storefront/order-item-editor.html
@@ -33,9 +33,7 @@
 
     <iron-media-query query="(min-width: 600px)" query-matches="{{desktopView}}"></iron-media-query>
 
-    <vaadin-form-layout class="product" responsive-steps='[
-      {"columns": 10, "labelsPosition": "top"},
-      {"minWidth": "600px", "columns": 18, "labelsPosition": "top"}]'>
+    <vaadin-form-layout id="form1" class="product">
 
       <vaadin-combo-box id="products" colspan="8" index="[[index]]"></vaadin-combo-box>
 
@@ -45,7 +43,7 @@
 
       <amount-field class="self-start" id="amount" colspan="4" min="1" max="15" index="[[index]]" style="order: 1"></amount-field>
 
-      <div id="price" colspan="4" class="money" style="order: 1"></div>
+      <div id="price" colspan="4" class="money" style="order: 1">[[price]]</div>
 
       <vaadin-text-field id="comment" colspan$="[[_getConditional(desktopView, 12, 8)]]" placeholder="Details"
                          index="[[index]]" style="order: 3"></vaadin-text-field>
@@ -67,9 +65,19 @@
         };
       }
 
+      ready() {
+        super.ready();
+
+        this.$.form1.responsiveSteps = [
+          {columns: 10, labelsPosition: 'top'},
+          {minWidth: '600px', columns: 18, labelsPosition: 'top'}
+        ];
+      }
+
       _getConditional(desktopView, desktopColspan, mobileColspan) {
         return desktopView ? desktopColspan : mobileColspan;
       }
+
     }
 
     window.customElements.define(OrderItemEditor.is, OrderItemEditor);