mirror of https://github.com/Fabio286/antares.git
feat(UI): initial BaseSelect integration
This commit is contained in:
parent
745d551cc9
commit
22622df2cf
|
@ -50,19 +50,13 @@
|
||||||
<label class="form-label cut-text">{{ $t('word.client') }}</label>
|
<label class="form-label cut-text">{{ $t('word.client') }}</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="column col-8 col-sm-12">
|
<div class="column col-8 col-sm-12">
|
||||||
<select
|
<BaseSelect
|
||||||
id="connection-client"
|
|
||||||
v-model="connection.client"
|
v-model="connection.client"
|
||||||
|
:options="clients"
|
||||||
|
option-track-by="slug"
|
||||||
|
option-label="name"
|
||||||
class="form-select"
|
class="form-select"
|
||||||
>
|
/>
|
||||||
<option
|
|
||||||
v-for="client in clients"
|
|
||||||
:key="client.slug"
|
|
||||||
:value="client.slug"
|
|
||||||
>
|
|
||||||
{{ client.name }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="connection.client === 'pg'" class="form-group columns">
|
<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 { useWorkspacesStore } from '@/stores/workspaces';
|
||||||
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
||||||
import BaseUploadInput from '@/components/BaseUploadInput';
|
import BaseUploadInput from '@/components/BaseUploadInput';
|
||||||
|
import BaseSelect from '@/components/BaseSelect.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'WorkspaceAddConnectionPanel',
|
name: 'WorkspaceAddConnectionPanel',
|
||||||
components: {
|
components: {
|
||||||
ModalAskCredentials,
|
ModalAskCredentials,
|
||||||
BaseUploadInput
|
BaseUploadInput,
|
||||||
|
BaseSelect
|
||||||
},
|
},
|
||||||
setup () {
|
setup () {
|
||||||
const { addConnection } = useConnectionsStore();
|
const { addConnection } = useConnectionsStore();
|
||||||
|
|
|
@ -50,15 +50,13 @@
|
||||||
<label class="form-label cut-text">{{ $t('word.client') }}</label>
|
<label class="form-label cut-text">{{ $t('word.client') }}</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="column col-8 col-sm-12">
|
<div class="column col-8 col-sm-12">
|
||||||
<select v-model="localConnection.client" class="form-select">
|
<BaseSelect
|
||||||
<option
|
v-model="localConnection.client"
|
||||||
v-for="client in clients"
|
:options="clients"
|
||||||
:key="client.slug"
|
option-track-by="slug"
|
||||||
:value="client.slug"
|
option-label="name"
|
||||||
>
|
class="form-select"
|
||||||
{{ client.name }}
|
/>
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="connection.client === 'pg'" class="form-group columns">
|
<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 Connection from '@/ipc-api/Connection';
|
||||||
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
||||||
import BaseUploadInput from '@/components/BaseUploadInput';
|
import BaseUploadInput from '@/components/BaseUploadInput';
|
||||||
|
import BaseSelect from '@/components/BaseSelect.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'WorkspaceEditConnectionPanel',
|
name: 'WorkspaceEditConnectionPanel',
|
||||||
components: {
|
components: {
|
||||||
ModalAskCredentials,
|
ModalAskCredentials,
|
||||||
BaseUploadInput
|
BaseUploadInput,
|
||||||
|
BaseSelect
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
connection: Object
|
connection: Object
|
||||||
|
|
|
@ -87,7 +87,6 @@ option:checked {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.workspace-query-results {
|
.workspace-query-results {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -209,17 +208,17 @@ option:checked {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-overlay{
|
.modal-overlay {
|
||||||
background: rgba( 255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#wrapper:not(.no-blur){
|
#wrapper:not(.no-blur) {
|
||||||
.modal-overlay{
|
.modal-overlay {
|
||||||
backdrop-filter: blur( 4px );
|
backdrop-filter: blur(4px);
|
||||||
-webkit-backdrop-filter: blur( 4px );
|
-webkit-backdrop-filter: blur(4px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -297,6 +296,35 @@ option:checked {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
padding: 1px 0.4rem 0;
|
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"] {
|
.form-input[type="file"] {
|
||||||
|
|
|
@ -121,6 +121,15 @@
|
||||||
border-color: $primary-color;
|
border-color: $primary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
.select {
|
||||||
|
&__list-wrapper {
|
||||||
|
border-color: $bg-color-gray;
|
||||||
|
background-color: $bg-color-light-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.form-input[readonly] {
|
.form-input[readonly] {
|
||||||
background-color: $bg-color-dark;
|
background-color: $bg-color-dark;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
@ -232,7 +241,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.connection-panel {
|
.connection-panel {
|
||||||
.panel {
|
.panel {
|
||||||
background: rgba($bg-color-light-dark, 50%);
|
background: rgba($bg-color-light-dark, 50%);
|
||||||
|
@ -240,9 +249,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-checkered {
|
.bg-checkered {
|
||||||
background-image:
|
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 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%);
|
linear-gradient(to bottom, black 50%, white 50%);
|
||||||
background-blend-mode: normal, difference, normal;
|
background-blend-mode: normal, difference, normal;
|
||||||
background-size: 2em 2em;
|
background-size: 2em 2em;
|
||||||
|
|
|
@ -18,6 +18,19 @@
|
||||||
background: #ababab;
|
background: #ababab;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
.select {
|
||||||
|
&__list-wrapper {
|
||||||
|
border: #bcc3ce;
|
||||||
|
background-color: $body-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__option--highlight {
|
||||||
|
color: $light-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
.menu-item a {
|
.menu-item a {
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
Loading…
Reference in New Issue