diff --git a/src/renderer/components/WorkspaceAddConnectionPanel.vue b/src/renderer/components/WorkspaceAddConnectionPanel.vue index b91935b1..82fa805a 100644 --- a/src/renderer/components/WorkspaceAddConnectionPanel.vue +++ b/src/renderer/components/WorkspaceAddConnectionPanel.vue @@ -50,19 +50,13 @@
- + />
@@ -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 index fbb44c72..0e1bcecb 100644 --- a/src/renderer/components/WorkspaceEditConnectionPanel.vue +++ b/src/renderer/components/WorkspaceEditConnectionPanel.vue @@ -50,15 +50,13 @@
- +
@@ -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 index d0f0cff9..e5fb7691 100644 --- 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 index 81628c38..665fd0fc 100644 --- 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,7 +241,7 @@ } } } - + .connection-panel { .panel { background: rgba($bg-color-light-dark, 50%); @@ -240,9 +249,7 @@ } .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 index bc0fe5a6..d9aa8a34 100644 --- 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 {