make icons look better (#461)

* Simplify the way of showing order-status-badge icon * Overide iron-icon styles for `vaadin:` icons to look better Jira: BFF-634 * Merge branch 'master' into fix/634-icons-are-uggly
vaadin · Feb 19, 2018 · 570bde9 · 570bde9
1 parent 266946a
commit 570bde9
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 23 deletions.
diff --git a/src/main/webapp/frontend/src/components/search-bar.html b/src/main/webapp/frontend/src/components/search-bar.html
@@ -90,15 +90,15 @@
 
     <div class="row">
       <vaadin-text-field id="field" class="field" placeholder="[[fieldPlaceholder]]" value="{{fieldValue}}" focused="{{_fieldFocused}}" on-value-changed="_filterChanged">
-        <iron-icon icon="[[fieldIcon]]" slot="prefix"></iron-icon>
+        <iron-icon icon$="[[fieldIcon]]" slot="prefix"></iron-icon>
       </vaadin-text-field>
       <vaadin-checkbox class="checkbox" checked="{{checkboxChecked}}" focused="{{_checkboxFocused}}" hidden$="[[!_desktopView]]">[[checkboxText]]</vaadin-checkbox>
       <vaadin-button id="clear" class="extra-filter" theme="tertiary">
         [[clearText]]
       </vaadin-button>
       <vaadin-button id="action" class="extra-action" theme="primary">
-        <iron-icon icon="[[buttonIcon]]"></iron-icon>
-        <span>[[buttonText]]</span>
+        <iron-icon icon$="[[buttonIcon]]" slot="prefix"></iron-icon>
+        [[buttonText]]
       </vaadin-button>
     </div>
 

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
@@ -212,10 +212,10 @@ <h3>[[item.customer.phoneNumber]]</h3>
 
       <div slot="info" class="total">Total [[item.totalPrice]]</div>
 
-      <vaadin-button slot="right" id="save" theme="primary success" class="edit-button" hidden="[[!review]]">Place Order ✓</vaadin-button>
-      <vaadin-button slot="right" id="edit" theme="primary" class="edit-button" hidden="[[review]]">
-        <span>Edit order</span>
-        <iron-icon icon="vaadin:edit"></iron-icon>
+      <vaadin-button slot="right" id="save" theme="primary success" hidden="[[!review]]">Place Order ✓</vaadin-button>
+      <vaadin-button slot="right" id="edit" theme="primary" hidden="[[review]]">
+        Edit order
+        <iron-icon icon="vaadin:edit" slot="suffix"></iron-icon>
       </vaadin-button>
     </buttons-bar>
   </template>

diff --git a/src/main/webapp/frontend/src/views/storefront/order-status-badge.html b/src/main/webapp/frontend/src/views/storefront/order-status-badge.html
@@ -34,6 +34,11 @@
         padding: 2px 8px;
       }
 
+      :host([status="delivered"]) #wrapper span,
+      :host(:not([status="delivered"])) #wrapper iron-icon {
+        display: none;
+      }
+
       :host([small]) #wrapper {
         padding: 0 5px;
       }
@@ -49,7 +54,11 @@
       }
     </style>
 
-    <div id="wrapper" inner-h-t-m-l="{{_getContent(status)}}"></div>
+    <div id="wrapper">
+      <span>[[status]]</span>
+      <iron-icon icon="vaadin:check"></iron-icon>
+    </div>
+
   </template>
 
   <script>
@@ -69,19 +78,9 @@
       }
 
       _onStatusChanged(current) {
-        const lowercase = current ? current.toLowerCase() : current;
-        if (lowercase != current) {
-          this.status = lowercase;
-        }
+        this.status = current && current.toLowerCase();
       }
 
-      _getContent(status) {
-        if (status === 'delivered') {
-          return '<iron-icon icon="vaadin:check"></iron-icon>';
-        }
-
-        return status;
-      }
     }
 
     window.customElements.define(OrderStatusBadge.is, OrderStatusBadge);

diff --git a/src/main/webapp/frontend/styles/shared-styles.html b/src/main/webapp/frontend/styles/shared-styles.html
@@ -102,6 +102,21 @@
   </template>
 </dom-module>
 
+<!-- Theme for icons inside text-field and buttons, 'vaadin:' icons have custom rules 
+  in lumo theme that make icons look wrong, by overriding width and height but not 
+  padding the look ok -->
+<dom-module id="bakery-text-buttons-theme-icons" theme-for="vaadin-text-field vaadin-button">
+  <template>
+    <style>
+      [part="input-field"] ::slotted(iron-icon[icon^="vaadin:"]) ,
+      :host ::slotted(iron-icon[icon^="vaadin:"]) {
+        width: var(--iron-icon-width, 24px);
+        height: var(--iron-icon-height, 24px);
+      }
+    </style>
+  </template>
+</dom-module>
+
 <!-- Theme for the vaadin-grid -->
 <dom-module id="bakery-grid-theme" theme-for="vaadin-grid">
   <template>
@@ -173,10 +188,6 @@
         box-sizing: border-box;
       }
 
-      iron-icon {
-        box-sizing: content-box;
-      }
-
       :host([hidden]),
       [hidden] {
         display: none !important;