searchbar with icons #371

client/core/src/components/searchbar/searchbar.html

@@ -1,18 +1,22 @@
 <form ng-submit="$ctrl.onSubmit()">
     <vn-horizontal>
-        <vn-icon-button
-            icon="search"
-            ng-click="$ctrl.clearFilter(); $ctrl.onSubmit()"
-            style="cursor: pointer; padding-top: 23px">
-        </vn-icon-button>
-        <vn-textfield vn-one label="Search" model="$ctrl.searchString"></vn-textfield>
-        <vn-icon
-            pad-medium-top 
-            ng-if="$ctrl.panel"
-            ng-click="$ctrl.openPanel($event)"
-            icon="keyboard_arrow_down"
-            style="cursor: pointer; color: #aaa">
-        </vn-icon>
+        <vn-textfield vn-one label="Search" model="$ctrl.searchString">
+            <t-left-icons>
+                <vn-icon
+                    icon="search"
+                    ng-click="$ctrl.clearFilter(); $ctrl.onSubmit()"
+                    pointer>
+                </vn-icon>
+            </t-left-icons>
+            <t-right-icons>
+                <vn-icon
+                    ng-if="$ctrl.panel"
+                    ng-click="$ctrl.openPanel($event)"
+                    icon="keyboard_arrow_down"
+                    pointer>
+                </vn-icon>
+            </t-right-icons>
+        </vn-textfield>
     </vn-horizontal>
 </form>
 <vn-popover

client/core/src/components/textfield/style.scss

@@ -17,6 +17,7 @@ vn-textfield {
             padding-top: 4px;
         }
     }
+
     .leftIcons, .rightIcons, .suffix {
         display: flex;
         color: $secondary-font-color;
@@ -25,7 +26,17 @@ vn-textfield {
             font-size: 20px !important
         }
     }
+
+    t-left-icons {
+        padding-right: 0.5em
+    }
+
+    t-right-icons {
+        padding-left: 0.5em
+    }
+
     .infix {
+        position: relative;
         display: block;
         flex: auto;
         width: 100%;

e2e/helpers/selectors.js

@@ -18,7 +18,7 @@ export default {
     },
     clientsIndex: {
         searchClientInput: `${components.vnTextfield}`,
-        searchButton: `vn-searchbar vn-icon-button[icon="search"]`,
+        searchButton: `vn-searchbar vn-icon[icon="search"]`,
         searchResult: `vn-item-client a`,
         createClientButton: `${components.vnFloatButton}`
     },
@@ -161,7 +161,7 @@ export default {
         searchResultCloneButton: `vn-item-product .buttons > [icon="icon-clone"]`,
         acceptClonationAlertButton: `vn-item-index [vn-id="clone"] [response="ACCEPT"]`,
         searchItemInput: `${components.vnTextfield}`,
-        searchButton: `vn-searchbar vn-icon-button[icon="search"]`,
+        searchButton: `vn-searchbar vn-icon[icon="search"]`,
         closeItemSummaryPreview: 'vn-item-index [vn-id="preview"] button.close'
     },
     itemCreateView: {
@@ -278,7 +278,7 @@ export default {
         searchResultDate: `vn-ticket-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(4)`,
         searchResultAddress: `vn-ticket-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(6)`,
         searchTicketInput: `vn-ticket-index ${components.vnTextfield}`,
-        searchButton: `vn-ticket-index vn-searchbar vn-icon-button[icon="search"]`
+        searchButton: `vn-ticket-index vn-searchbar vn-icon[icon="search"]`
     },
     ticketNotes: {
         notesButton: `vn-menu-item a[ui-sref="ticket.card.observation"]`,
@@ -384,7 +384,7 @@ export default {
     claimsIndex: {
         searchClaimInput: `vn-claim-index ${components.vnTextfield}`,
         searchResult: `vn-claim-index vn-card > div > vn-table > div > vn-tbody > vn-tr`,
-        searchButton: `vn-claim-index vn-searchbar > form > vn-horizontal > vn-icon-button > vn-icon`
+        searchButton: `vn-claim-index vn-searchbar vn-icon[icon="search"]`
     },
     claimBasicData: {
         basicDataButton: `vn-menu-item a[ui-sref="claim.card.basicData"]`,