pleroma-fe

commit: 7c947115e26a91e6ad64d71697848a14ea8d459b
parent 311d93594392c504d6690b5240474e1448a997b5
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 12 Nov 2024 21:05:56 +0200

make active tab to jut out slightly to indicate that it's active (inspired by winMe)

Diffstat:
M
src/components/opacity_input/opacity_input.vue
4
++--
A
src/components/roundness_input/roundness_input.vue
51
+++++++++++++++++++++++++++++++++++++++++++++++++++
M
src/components/tab_switcher/tab_switcher.scss
8
+++++++-

3 files changed, 60 insertions(+), 3 deletions(-)
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
@@ -8,7 +8,7 @@
       class="label"
       :class="{ faint: !present || disabled }"
     >
-      {{ $t('settings.style.common.opacity') }}
+      {{ label  }}
     </label>
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
@@ -39,7 +39,7 @@ export default {
     Checkbox
   },
   props: [
-    'name', 'modelValue', 'fallback', 'disabled'
+    'name', 'label', 'modelValue', 'fallback', 'disabled'
   ],
   emits: ['update:modelValue'],
   computed: {
diff --git a/src/components/roundness_input/roundness_input.vue b/src/components/roundness_input/roundness_input.vue
@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="roundness-control style-control"
+    :class="{ disabled: !present || disabled }"
+  >
+    <label
+      :for="name"
+      class="label"
+      :class="{ faint: !present || disabled }"
+    >
+      {{ label }}
+    </label>
+    <Checkbox
+      v-if="typeof fallback !== 'undefined'"
+      :model-value="present"
+      :disabled="disabled"
+      class="opt"
+      @update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
+    />
+    <input
+      :id="name"
+      class="input input-number"
+      type="number"
+      :value="modelValue || fallback"
+      :disabled="!present || disabled"
+      :class="{ disabled: !present || disabled }"
+      max="999"
+      min="0"
+      step="1"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+  </div>
+</template>
+
+<script>
+import Checkbox from '../checkbox/checkbox.vue'
+export default {
+  components: {
+    Checkbox
+  },
+  props: [
+    'name', 'label', 'modelValue', 'fallback', 'disabled'
+  ],
+  emits: ['update:modelValue'],
+  computed: {
+    present () {
+      return typeof this.modelValue !== 'undefined'
+    }
+  }
+}
+</script>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
@@ -119,7 +119,7 @@
       .tab {
         flex: 1;
         box-sizing: content-box;
-        min-width: 10em;
+        max-width: 9em;
         min-width: 1px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
@@ -128,6 +128,11 @@
         margin-right: -200px;
         margin-left: 1em;
 
+        &:not(.active) {
+          margin-top: 0;
+          margin-left: 1.5em;
+        }
+
         @media all and (max-width: 800px) {
           padding-left: 0.25em;
           padding-right: calc(0.25em + 200px);
@@ -181,6 +186,7 @@
 
     &:not(.active) {
       z-index: 4;
+      margin-top: 0.25em;
 
       &:hover {
         z-index: 6;