Update styling for switches and select boxes

6 files changed, 92 insertions, 61 deletions

diff --git a/src/vue/Components/Form/SelectField.vue b/src/vue/Components/Form/SelectField.vue
index 16e2f4e..d2cb25d 100644
--- a/src/vue/Components/Form/SelectField.vue
+++ b/src/vue/Components/Form/SelectField.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="select-field" :class="{disabled:disabled}">
-        <select @change="handleChange" v-on="listeners" v-bind="$attrs" :disabled="disabled">
+    <div class="input-select" :class="{disabled:disabled}">
+        <select @change="handleChange" v-on="listeners" v-bind="$attrs" :id="id" :disabled="disabled">
             <option v-for="option in optionList"
                     :key="option.id"
                     :value="option.id"
@@ -32,6 +32,10 @@
             disabled : {
                 type   : Boolean,
                 default: false
+            },
+            id       : {
+                type   : String,
+                default: ''
             }
         },
 
@@ -47,10 +51,10 @@
                         options.push({id, label: config, disabled: false, description: null});
                     } else {
                         let option = {
-                            id         : config.hasOwnProperty('id') ? config.id:id,
+                            id         : config.hasOwnProperty('id') ? config.id : id,
                             label      : config.label,
-                            disabled   : config.hasOwnProperty('disabled') ? config.disabled === true:false,
-                            description: config.hasOwnProperty('description') ? config.description:null
+                            disabled   : config.hasOwnProperty('disabled') ? config.disabled === true : false,
+                            description: config.hasOwnProperty('description') ? config.description : null
                         };
 
                         options.push(option);
@@ -87,7 +91,7 @@
 </script>
 
 <style lang="scss">
-.select-field {
+.input-select {
     cursor           : pointer;
     background-color : var(--element-hover-bg-color);
     border-radius    : var(--button-border-radius);
@@ -102,6 +106,9 @@
         position         : relative;
         width            : 100%;
         z-index          : 1;
+        overflow         : hidden;
+        text-overflow    : ellipsis;
+        color            : var(--element-fg-color);
     }
 
     &.disabled {
diff --git a/src/vue/Components/Form/SliderField.vue b/src/vue/Components/Form/SliderField.vue
index 098ff66..729c113 100644
--- a/src/vue/Components/Form/SliderField.vue
+++ b/src/vue/Components/Form/SliderField.vue
@@ -7,7 +7,7 @@
                :id="id"
                :name="name"
                v-model="model"
-               v-on="listeners"/>
+               v-on="listeners" />
     </span>
 </template>
 
@@ -42,11 +42,11 @@
 
         computed: {
             getClassNames() {
-                return 'input-slider ' + (this.value ? 'on':'off');
+                return 'input-slider ' + (this.value ? 'on' : 'off');
             },
             getTitle() {
                 if(this.title.length === 0) {
-                    return LocalisationService.translate(this.value ? 'InputSliderOn':'InputSliderOff');
+                    return LocalisationService.translate(this.value ? 'InputSliderOn' : 'InputSliderOff');
                 }
 
                 return LocalisationService.translate(this.title);
@@ -90,39 +90,46 @@
     display     : inline-flex;
     align-items : center;
     width       : 1.75em;
-    height      : 1em;
+    height      : 1.1em;
+    min-width   : 1.75em;
     cursor      : pointer;
+    flex-shrink : 0;
+    flex-grow   : 0;
 
     .input-slider-bar {
         margin           : 0;
-        background-color : var(--element-hover-bg-color);
-        border-radius    : var(--button-border-radius-large);
-        border           : 2px solid var(--element-hover-bg-color);
+        background-color : var(--slider-bg-color);
+        border-radius    : var(--slider-border-radius);
+        border           : 1px solid var(--slider-br-color);
         width            : 100%;
         display          : inline-block;
         height           : 100%;
     }
 
     .input-slider-button {
-        background-color : var(--element-fg-color);
-        border-radius    : var(--button-border-radius-large);
+        background-color : var(--slider-fg-color);
+        border-radius    : var(--slider-border-radius);
+        border           : 1px solid var(--slider-br-color);
         position         : absolute;
         top              : 2px;
         left             : 2px;
-        height           : calc(1em - 4px);
-        width            : calc(1em - 4px);
+        height           : calc(1.1em - 4px);
+        width            : calc(1.1em - 4px);
         transition       : left .15s ease-in-out;
         box-sizing       : border-box;
+        overflow         : hidden;
     }
 
     &.on {
         .input-slider-bar {
-            background-color : var(--element-active-fg-color);
-            border           : 2px solid var(--element-active-fg-color);
+            background-color : var(--slider-active-bg-color);
+            border-color     : var(--slider-active-br-color);
         }
 
         .input-slider-button {
-            left : calc(100% - 1em + 2px);
+            left             : calc(100% - 1.1em + 2px);
+            background-color : var(--slider-active-fg-color);
+            border-color     : var(--slider-active-br-color);
         }
     }
 
diff --git a/src/vue/Components/Options/Setting/HelpText.vue b/src/vue/Components/Options/Setting/HelpText.vue
index 52c58cf..d538a5e 100644
--- a/src/vue/Components/Options/Setting/HelpText.vue
+++ b/src/vue/Components/Options/Setting/HelpText.vue
@@ -52,7 +52,7 @@
     position         : relative;
     background-color : var(--button-bg-color);
     color            : var(--button-fg-color);
-    transition       : var(--button-transition), z-index 0s ease-in-out 1s;
+    transition       : var(--button-transition), z-index 0s ease-in-out .25s;
     z-index          : 1;
 
     &.open,
diff --git a/src/vue/Components/Theming/CustomColorSet.vue b/src/vue/Components/Theming/CustomColorSet.vue
index 8d0dbe8..0586f72 100644
--- a/src/vue/Components/Theming/CustomColorSet.vue
+++ b/src/vue/Components/Theming/CustomColorSet.vue
@@ -16,12 +16,16 @@
         props: {
             name  : String,
             type  : String,
-            colors: Object
+            colors: Object,
+            second: {
+                type: String,
+                default: 'hover'
+            }
         },
 
         data() {
             let keyBase  = `${this.name}-${this.type}`,
-                keyHover = `${this.name}-hover-${this.type}`;
+                keyHover = `${this.name}-${this.second}-${this.type}`;
 
             return {
                 defaultBase : this.colors[keyBase],
@@ -35,12 +39,18 @@
 
         computed: {
             label() {
+                if(this.type === 'br') return 'BorderColorLabel';
+
                 return this.type === 'bg' ? 'BackgroundColorLabel':'ForegroundColorLabel';
             },
             baseTitle() {
+                if(this.type === 'br') return 'BorderColorBaseTitle';
+
                 return this.type === 'bg' ? 'BackgroundColorBaseTitle':'ForegroundColorBaseTitle';
             },
             hoverTitle() {
+                if(this.type === 'br') return 'BorderColorHoverTitle';
+
                 return this.type === 'bg' ? 'BackgroundColorHoverTitle':'ForegroundColorHoverTitle';
             },
             baseDisabled() {
diff --git a/src/vue/Components/Theming/CustomTheme.vue b/src/vue/Components/Theming/CustomTheme.vue
index f06b9e3..766d0f0 100644
--- a/src/vue/Components/Theming/CustomTheme.vue
+++ b/src/vue/Components/Theming/CustomTheme.vue
@@ -14,6 +14,10 @@
         <custom-color-set name="button" type="bg" :colors="colors" v-on:update="update"/>
         <custom-color-inherit name="button" type="fg" :colors="colors" v-on:update="update"/>
         <custom-color-set name="button" type="fg" :colors="colors" v-on:update="update"/>
+        <translate tag="h4" say="CustomSliderElement"/>
+        <custom-color-set name="slider" type="bg" second="active" :colors="colors" v-on:update="update"/>
+        <custom-color-set name="slider" type="fg" second="active" :colors="colors" v-on:update="update"/>
+        <custom-color-set name="slider" type="br" second="active" :colors="colors" v-on:update="update"/>
         <translate tag="h4" say="CustomToasts"/>
         <custom-color-toast name="info" label="ToastInfoColors" :colors="colors" v-on:update="update"/>
         <custom-color-toast name="success" label="ToastSuccessColors" :colors="colors" v-on:update="update"/>
diff --git a/src/vue/Components/Tools/Generate.vue b/src/vue/Components/Tools/Generate.vue
index 61e6aef..3de13d6 100644
--- a/src/vue/Components/Tools/Generate.vue
+++ b/src/vue/Components/Tools/Generate.vue
@@ -6,24 +6,24 @@
             </div>
             <div class="options">
                 <div class="option" @click="generatePassword">
-                    <icon icon="redo" font="solid" :spin="generating"/>
+                    <icon icon="redo" font="solid" :spin="generating" />
                 </div>
-                <icon icon="clipboard" @click="copy()" draggable="true" @dragstart="drag($event)"/>
+                <icon icon="clipboard" @click="copy()" draggable="true" @dragstart="drag($event)" />
                 <!--                <icon icon="paste" font="solid"/>-->
             </div>
         </div>
         <div class="generate-password-options">
-            <div class="option">
-                <slider-field id="generate-add-numbers" v-model=" numbers"/>
-                <translate tag="label" for="generate-add-numbers" say="LabelGenerateAddNumbers"/>
+            <div class="option numbers">
+                <slider-field id="generate-add-numbers" v-model=" numbers" />
+                <translate tag="label" for="generate-add-numbers" say="LabelGenerateAddNumbers" />
             </div>
-            <div class="option">
-                <slider-field id="generate-add-special" v-model="special"/>
-                <translate tag="label" for="generate-add-special" say="LabelGenerateAddSpecial"/>
+            <div class="option special">
+                <slider-field id="generate-add-special" v-model="special" />
+                <translate tag="label" for="generate-add-special" say="LabelGenerateAddSpecial" />
             </div>
-            <div class="option">
-                <translate tag="label" for="generate-add-strength" say="LabelGenerateStrength"/>
-                <select-field id="generate-add-strength" v-model="strength" :options="strengthOptions"/>
+            <div class="option strength">
+                <translate tag="label" for="generate-add-strength" say="LabelGenerateStrength" />
+                <select-field id="generate-add-strength" v-model="strength" :options="strengthOptions" />
             </div>
         </div>
     </div>
@@ -31,14 +31,14 @@
 
 <script>
     import LocalisationService from '@js/Services/LocalisationService';
-    import Icon from '@vue/Components/Icon';
-    import ToastService from '@js/Services/ToastService';
-    import ErrorManager from '@js/Manager/ErrorManager';
-    import SliderField from '@vue/Components/Form/SliderField';
-    import Translate from '@vue/Components/Translate';
-    import SelectField from '@vue/Components/Form/SelectField';
-    import MessageService from '@js/Services/MessageService';
-    import SettingsService from "@js/Services/SettingsService";
+    import Icon                from '@vue/Components/Icon';
+    import ToastService        from '@js/Services/ToastService';
+    import ErrorManager        from '@js/Manager/ErrorManager';
+    import SliderField         from '@vue/Components/Form/SliderField';
+    import Translate           from '@vue/Components/Translate';
+    import SelectField         from '@vue/Components/Form/SelectField';
+    import MessageService      from '@js/Services/MessageService';
+    import SettingsService     from '@js/Services/SettingsService';
 
     export default {
         components: {SelectField, Translate, SliderField, Icon},
@@ -101,7 +101,7 @@
             copy() {
                 let data  = this.password,
                     label = LocalisationService.translate('PropertyPassword');
-                    MessageService.send({type: 'clipboard.write', payload: {type: 'password', value: data}}).catch(ErrorManager.catch);
+                MessageService.send({type: 'clipboard.write', payload: {type: 'password', value: data}}).catch(ErrorManager.catch);
 
                 ToastService
                     .success(['PasswordPropertyCopied', label])
@@ -187,35 +187,38 @@
     }
 
     .generate-password-options {
-        display        : grid;
-        margin         : .75rem .5rem 0;
-        grid-auto-flow : column;
+        display             : grid;
+        margin              : .75rem .5rem 0;
+        grid-template-areas : "numbers special" "strength strength";
+        grid-row-gap        : .5rem;
 
         .option {
             display     : flex;
             align-items : center;
+            gap         : .25rem;
 
             label {
-                cursor : pointer;
+                cursor    : pointer;
+                flex-grow : 1;
             }
 
             .input-slider {
-                margin-right : .25rem;
+                font-size : 14px;
             }
 
-            #generate-add-strength {
-                padding       : 0;
-                border        : 0;
-                background    : var(--button-bg-color);
-                color         : var(--button-fg-color);
-                border-radius : var(--button-border-radius);
-                width         : 5rem;
-                margin-left   : .25rem;
-
-                &:hover,
-                &:active {
-                    background : var(--button-hover-bg-color);
-                    color      : var(--button-hover-fg-color);
+            &.numbers {
+                grid-area : numbers;
+            }
+
+            &.special {
+                grid-area : special;
+            }
+
+            &.strength {
+                grid-area : strength;
+
+                .input-select {
+                    flex-grow : 1;
                 }
             }
         }