feat(UI): initial BaseSelect integration

antares-sql · May 8, 2022 · 22622df · 22622df
1 parent 745d551
commit 22622df
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 35 deletions.
diff --git a/src/renderer/components/WorkspaceAddConnectionPanel.vue b/src/renderer/components/WorkspaceAddConnectionPanel.vue
@@ -50,19 +50,13 @@
                            <label class="form-label cut-text">{{ $t('word.client') }}</label>
                         </div>
                         <div class="column col-8 col-sm-12">
-                           <select
-                              id="connection-client"
+                           <BaseSelect
                               v-model="connection.client"
+                              :options="clients"
+                              option-track-by="slug"
+                              option-label="name"
                               class="form-select"
-                           >
-                              <option
-                                 v-for="client in clients"
-                                 :key="client.slug"
-                                 :value="client.slug"
-                              >
-                                 {{ client.name }}
-                              </option>
-                           </select>
+                           />
                         </div>
                      </div>
                      <div v-if="connection.client === 'pg'" class="form-group columns">
@@ -404,12 +398,14 @@ import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseUploadInput from '@/components/BaseUploadInput';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceAddConnectionPanel',
    components: {
       ModalAskCredentials,
-      BaseUploadInput
+      BaseUploadInput,
+      BaseSelect
    },
    setup () {
       const { addConnection } = useConnectionsStore();

diff --git a/src/renderer/components/WorkspaceEditConnectionPanel.vue b/src/renderer/components/WorkspaceEditConnectionPanel.vue
@@ -50,15 +50,13 @@
                            <label class="form-label cut-text">{{ $t('word.client') }}</label>
                         </div>
                         <div class="column col-8 col-sm-12">
-                           <select v-model="localConnection.client" class="form-select">
-                              <option
-                                 v-for="client in clients"
-                                 :key="client.slug"
-                                 :value="client.slug"
-                              >
-                                 {{ client.name }}
-                              </option>
-                           </select>
+                           <BaseSelect
+                              v-model="localConnection.client"
+                              :options="clients"
+                              option-track-by="slug"
+                              option-label="name"
+                              class="form-select"
+                           />
                         </div>
                      </div>
                      <div v-if="connection.client === 'pg'" class="form-group columns">
@@ -401,12 +399,14 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import Connection from '@/ipc-api/Connection';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseUploadInput from '@/components/BaseUploadInput';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceEditConnectionPanel',
    components: {
       ModalAskCredentials,
-      BaseUploadInput
+      BaseUploadInput,
+      BaseSelect
    },
    props: {
       connection: Object

diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
@@ -87,7 +87,6 @@ option:checked {
   }
 }
 
-
 .workspace-query-results {
   overflow: auto;
   white-space: nowrap;
@@ -209,17 +208,17 @@ option:checked {
       }
     }
   }
-  
-  .modal-overlay{
-    background: rgba( 255, 255, 255, 0.1);
-    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+
+  .modal-overlay {
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
   }
 }
 
-#wrapper:not(.no-blur){
-  .modal-overlay{
-    backdrop-filter: blur( 4px );
-    -webkit-backdrop-filter: blur( 4px );
+#wrapper:not(.no-blur) {
+  .modal-overlay {
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
   }
 }
 
@@ -297,6 +296,35 @@ option:checked {
     font-size: 0.7rem;
     padding: 1px 0.4rem 0;
   }
+
+  &.select {
+    &.select-open {
+      border-color: $primary-color !important;
+      @include control-shadow();
+    }
+
+    .select__list-wrapper {
+      border: 1px solid transparent;
+      border-radius: $border-radius;
+      box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
+    }
+
+    .select__list {
+      margin: 0;
+      li {
+        margin: 0;
+        padding: 0.3rem 0.8rem;
+      }
+    }
+
+    .select__option--selected {
+      background: rgba($primary-color, 0.25);
+    }
+
+    .select__option--highlight {
+      background: $primary-color;
+    }
+  }
 }
 
 .form-input[type="file"] {

diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
@@ -121,6 +121,15 @@
     border-color: $primary-color;
   }
 
+  .form-select {
+    .select {
+      &__list-wrapper {
+        border-color: $bg-color-gray;
+        background-color: $bg-color-light-dark;
+      }
+    }
+  }
+
   .form-input[readonly] {
     background-color: $bg-color-dark;
     cursor: default;
@@ -232,17 +241,15 @@
       }
     }
   }
-  
+
   .connection-panel {
     .panel {
       background: rgba($bg-color-light-dark, 50%);
     }
   }
 
   .bg-checkered {
-    background-image:
-      linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
-      linear-gradient(to right, black 50%, white 50%),
+    background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)), linear-gradient(to right, black 50%, white 50%),
       linear-gradient(to bottom, black 50%, white 50%);
     background-blend-mode: normal, difference, normal;
     background-size: 2em 2em;

diff --git a/src/renderer/scss/themes/light-theme.scss b/src/renderer/scss/themes/light-theme.scss
@@ -18,6 +18,19 @@
     background: #ababab;
   }
 
+  .form-select {
+    .select {
+      &__list-wrapper {
+        border: #bcc3ce;
+        background-color: $body-bg;
+      }
+
+      &__option--highlight {
+        color: $light-color;
+      }
+    }
+  }
+
   .menu {
     .menu-item a {
       &:hover {