fix: show arrow down icon on the right side of the select boxes

josdejong · Nov 15, 2021 · c0375b1 · c0375b1
1 parent ef2a4cf
commit c0375b1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/src/lib/components/modals/Modal.scss b/src/lib/components/modals/Modal.scss
@@ -12,6 +12,7 @@
   --clearSelectTop: 2px;
   --clearSelectBottom: 2px;
   --itemIsActiveBG: #3883fa; // theme-color
+  --indicatorTop: 8px;
 
   font-family: $font-family;
   font-size: $font-size;

diff --git a/src/lib/components/modals/TransformWizard.scss b/src/lib/components/modals/TransformWizard.scss
@@ -19,17 +19,17 @@ table.transform-wizard {
         flex-direction: row;
         margin-bottom: $padding-half;
 
-        :global(.selectContainer.filter-field) {
+        :global(.selectContainer.filter-path) {
           flex: 4;
           margin-right: $padding-half;
         }
 
         :global(.selectContainer.filter-relation) {
-          flex: 1;
+          flex: 1.5;
           margin-right: $padding-half;
         }
 
-        :global(.selectContainer.sort-field) {
+        :global(.selectContainer.sort-path) {
           flex: 3;
           margin-right: $padding-half;
         }
@@ -38,7 +38,7 @@ table.transform-wizard {
           flex: 1;
         }
 
-        :global(.selectContainer.projection-fields) {
+        :global(.selectContainer.projection-paths) {
           flex: 1;
         }
 

diff --git a/src/lib/components/modals/TransformWizard.svelte b/src/lib/components/modals/TransformWizard.svelte
@@ -83,9 +83,15 @@
     <th>Filter</th>
     <td>
       <div class="horizontal">
-        <Select containerClasses="filter-field" items={fieldOptions} bind:value={filterPath} />
+        <Select
+          containerClasses="filter-path"
+          showIndicator
+          items={fieldOptions}
+          bind:value={filterPath}
+        />
         <Select
           containerClasses="filter-relation"
+          showIndicator
           items={filterRelationOptions}
           bind:value={filterRelation}
         />
@@ -97,9 +103,15 @@
     <th>Sort</th>
     <td>
       <div class="horizontal">
-        <Select containerClasses="sort-field" items={fieldOptions} bind:value={sortPath} />
+        <Select
+          containerClasses="sort-path"
+          showIndicator
+          items={fieldOptions}
+          bind:value={sortPath}
+        />
         <Select
           containerClasses="sort-direction"
+          showIndicator
           items={sortDirectionOptions}
           bind:value={sortDirection}
         />
@@ -111,9 +123,10 @@
     <td>
       <div class="horizontal">
         <Select
-          containerClasses="projection-fields"
-          items={projectionOptions}
+          containerClasses="projection-paths"
           isMulti
+          showIndicator
+          items={projectionOptions}
           bind:value={projectionPaths}
         />
       </div>

diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -60,7 +60,7 @@ export const TRANSFORM_MODAL_OPTIONS = {
   ...SIMPLE_MODAL_OPTIONS,
   styleWindow: {
     ...SIMPLE_MODAL_OPTIONS.styleWindow,
-    width: '600px'
+    width: '700px'
   },
   styleContent: {
     overflow: 'auto', // TODO: would be more neat if the header is fixed instead of scrolls along