pleroma-fe

commit: f609aaba0c9a7c4d3c3d579a2a0021ecd5fc4028
parent 8a47069cee4bb85e7e1dc291e8d2e7aaf6fddf1d
Author: Henry Jameson <me@hjkos.com>
Date:   Wed, 21 Feb 2024 13:10:11 +0200

improve checkbox styles

Diffstat:
M
src/components/checkbox/checkbox.vue
5
++---
M
src/components/font_control/font_control.vue
2
+-
M
src/components/input.style.js
10
++++++++++
M
src/components/poll/poll.vue
4
++--
M
src/components/range_input/range_input.vue
2
+-
M
src/components/shadow_control/shadow_control.vue
2
+-
M
src/services/theme_data/theme2_to_theme3.js
10
+++++-----

7 files changed, 22 insertions(+), 13 deletions(-)
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
@@ -12,7 +12,7 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="input checkbox-indicator"
+      class="input -checkbox checkbox-indicator"
       :aria-hidden="true"
       @transitionend.capture="onTransitionEnd"
     />
@@ -82,8 +82,7 @@ export default {
     transition: color 200ms;
     width: 1.1em;
     height: 1.1em;
-    border-radius: $fallback--checkboxRadius;
-    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    border-radius: var(--roundness);
     box-shadow: var(--shadow);
     background-color: var(--background);
     vertical-align: top;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input opt exlcude-disabled visible-for-screenreader-only"
+      class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
diff --git a/src/components/input.style.js b/src/components/input.style.js
@@ -12,6 +12,10 @@ const hoverGlow = {
 export default {
   name: 'Input',
   selector: '.input',
+  variant: {
+    checkbox: '.-checkbox',
+    radio: '.-radio'
+  },
   states: {
     disabled: ':disabled',
     hover: ':hover:not(:disabled)',
@@ -22,6 +26,12 @@ export default {
   ],
   defaultRules: [
     {
+      variant: 'checkbox',
+      directives: {
+        roundness: 1
+      }
+    },
+    {
       directives: {
         background: '--fg, -5',
         roundness: 3,
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
@@ -43,7 +43,7 @@
           <input
             v-if="poll.multiple"
             type="checkbox"
-            class="input poll-checkbox"
+            class="input -checkbox poll-checkbox"
             :disabled="loading"
             :value="index"
           >
@@ -52,7 +52,7 @@
             type="radio"
             :disabled="loading"
             :value="index"
-            class="input"
+            class="input -radio"
           >
           <label class="option-vote">
             <RichContent
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input opt visible-for-screenreader-only"
+      class="input -checkbox opt visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
@@ -129,7 +129,7 @@
           v-model="selected.inset"
           :disabled="!present"
           name="inset"
-          class="input input-inset visible-for-screenreader-only"
+          class="input -checkbox input-inset visible-for-screenreader-only"
           type="checkbox"
         >
         <label
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
@@ -30,7 +30,7 @@ export const shadowsKeys = new Set([
 export const radiiKeys = new Set([
   'btn',
   'input',
-  // 'checkbox',
+  'checkbox',
   'panel',
   'avatar',
   'avatarAlt',
@@ -122,10 +122,10 @@ export const convertTheme2To3 = (data) => {
         case 'input':
           rule.component = 'Input'
           break
-        // TODO: missing feature?
-        // case 'checkbox':
-        //   rule.component = 'Input'
-        //   break
+        case 'checkbox':
+          rule.component = 'Input'
+          rule.variant = 'checkbox'
+          break
         case 'panel':
           rule.component = 'Panel'
           break