Improve select field styling

Signed-off-by: Marius David Wieschollek <passwords.public@mdns.eu>

2 files changed, 82 insertions, 27 deletions

diff --git a/src/vue/Components/Form/SelectField.vue b/src/vue/Components/Form/SelectField.vue
index a66e15b..16e2f4e 100644
--- a/src/vue/Components/Form/SelectField.vue
+++ b/src/vue/Components/Form/SelectField.vue
@@ -1,13 +1,15 @@
 <template>
-    <select @change="handleChange" v-on="listeners">
-        <option v-for="option in optionList"
-                :key="option.id"
-                :value="option.id"
-                :disabled="option.disabled"
-                :selected="option.id === value"
-                :title="getTranslated(option.description)">{{getTranslated(option.label)}}
-        </option>
-    </select>
+    <div class="select-field" :class="{disabled:disabled}">
+        <select @change="handleChange" v-on="listeners" v-bind="$attrs" :disabled="disabled">
+            <option v-for="option in optionList"
+                    :key="option.id"
+                    :value="option.id"
+                    :disabled="option.disabled"
+                    :selected="option.id === value"
+                    :title="getTranslated(option.description)">{{ getTranslated(option.label) }}
+            </option>
+        </select>
+    </div>
 </template>
 
 <script>
@@ -26,6 +28,10 @@
             translate: {
                 type   : Boolean,
                 default: true
+            },
+            disabled : {
+                type   : Boolean,
+                default: false
             }
         },
 
@@ -81,9 +87,44 @@
 </script>
 
 <style lang="scss">
-select {
-    &[disabled] {
-        opacity: 0.5;
+.select-field {
+    cursor           : pointer;
+    background-color : var(--element-hover-bg-color);
+    border-radius    : var(--button-border-radius);
+    position         : relative;
+
+    select {
+        border           : 0;
+        cursor           : pointer;
+        appearance       : none;
+        background-color : rgba(0, 0, 0, 0);
+        padding          : .25rem 1.75rem .25rem .25rem;
+        position         : relative;
+        width            : 100%;
+        z-index          : 1;
+    }
+
+    &.disabled {
+        opacity : 0.5;
+        cursor  : not-allowed;
+
+        select {
+            cursor : not-allowed;
+        }
+    }
+
+    &:after {
+        font-family : var(--font-family-icon);
+        font-weight : var(--font-weight-icon);
+        content     : "\f078";
+        position    : absolute;
+        right       : .5rem;
+        top         : 0;
+        bottom      : 0;
+        display     : flex;
+        align-items : center;
+        z-index     : 0;
+        opacity     : 0.5;
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/vue/Components/Options/Accounts.vue b/src/vue/Components/Options/Accounts.vue
index 6d3d621..169cc83 100644
--- a/src/vue/Components/Options/Accounts.vue
+++ b/src/vue/Components/Options/Accounts.vue
@@ -2,11 +2,7 @@
     <div>
         <div class="account-options">
             <translate tag="label" for="master-account" say="SettingsAccountsMain"/>
-            <select id="master-account" v-model="defaultServer">
-                <option v-for="server in servers" :key="server.getId()" :value="server.getId()" :disabled="!server.getEnabled()">
-                    {{server.getLabel()}}
-                </option>
-            </select>
+            <select-field id="master-account" v-model="defaultServer" :options="serverOptions"/>
         </div>
         <account-list :servers="servers" v-on:change="loadData"/>
     </div>
@@ -20,9 +16,10 @@
     import AccountList from '@vue/Components/Accounts/AccountList';
     import SettingsService from '@js/Services/SettingsService';
     import ErrorManager from '@js/Manager/ErrorManager';
+    import SelectField from "@vue/Components/Form/SelectField";
 
     export default {
-        components: {AccountList, Foldout, Translate, Icon},
+        components: {SelectField, AccountList, Foldout, Translate, Icon},
         data() {
             return {
                 servers      : [],
@@ -30,6 +27,23 @@
             };
         },
 
+        computed: {
+            serverOptions() {
+                let options = [];
+                for(let server of this.servers) {
+                    options.push(
+                        {
+                            id      : server.getId(),
+                            disabled: !server.getEnabled(),
+                            label   : server.getLabel()
+                        }
+                    );
+                }
+
+                return options;
+            }
+        },
+
         created() {
             this.loadData();
         },
@@ -57,15 +71,15 @@
 </script>
 
 <style lang="scss">
-    .account-options,
-    .account-form fieldset {
-        display               : grid;
-        grid-template-columns : 2fr 1fr;
-        grid-row-gap          : 0.5rem;
-        padding               : 0.5rem 1rem;
+.account-options,
+.account-form fieldset {
+    display               : grid;
+    grid-template-columns : 2fr 1fr;
+    grid-row-gap          : 0.5rem;
+    padding               : 0.5rem 1rem;
 
-        label {
-            line-height : 2rem;
-        }
+    label {
+        line-height : 2rem;
     }
+}
 </style>
\ No newline at end of file