Add glowing effect to theme selector

WordPress · Sep 12, 2024 · 00d5d79 · 00d5d79
1 parent bc12637
commit 00d5d79
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 24 deletions.
diff --git a/frontend/src/components/VSelectField/VSelectField.vue b/frontend/src/components/VSelectField/VSelectField.vue
@@ -34,11 +34,14 @@ const props = withDefaults(
     labelText: string
     choices: Choice[]
     showSelected?: boolean
+    /** whether to show a glowing pink outline, indicating a new feature */
+    showNewHighlight?: boolean
   }>(),
   {
     modelValue: "",
     blankText: "",
     showSelected: true,
+    showHighlight: false,
   }
 )
 
@@ -71,32 +74,58 @@ const splitAttrs = computed(() => {
 </script>
 
 <template>
-  <div
-    class="relative m-0.5px box-content block w-fit rounded-sm border border-default text-sm focus-within:m-0 focus-within:border-1.5 focus-within:border-focus hover:border-hover focus-within:hover:border-focus"
-    :class="splitAttrs.classAttrs"
-  >
-    <div class="pointer-events-none absolute inset-y-0 start-2 my-auto h-fit">
-      <slot name="start" />
-    </div>
-    <div class="pointer-events-none absolute inset-y-0 end-2 my-auto h-fit">
-      <VIcon name="caret-down" />
-    </div>
-    <select
-      :id="fieldId"
-      v-model="selectValue"
-      class="flex h-[calc(theme(spacing.10)_-_2_*_theme(borderWidth.DEFAULT))] appearance-none truncate bg-tx pe-10"
+  <div class="relative">
+    <div
+      v-if="showNewHighlight"
+      class="new-highlight absolute -inset-1.5px animate-new-highlight rounded-[calc(0.125rem_+_1.5px)]"
+      aria-hidden="true"
+    ></div>
+    <div
+      class="relative m-0.5px box-content block w-fit rounded-sm border bg-curr-page text-sm focus-within:m-0 focus-within:border-1.5 focus-within:border-focus hover:border-hover focus-within:hover:border-focus"
       :class="[
-        showSelected ? 'w-full' : 'w-0 max-w-0',
-        hasStartContent ? 'ps-10' : 'ps-2',
+        splitAttrs.classAttrs,
+        showNewHighlight ? 'border-tx' : 'border-default',
       ]"
-      :name="fieldName"
-      v-bind="splitAttrs.nonClassAttrs"
-      :aria-label="labelText"
     >
-      <option v-if="blankText" disabled value="">{{ blankText }}</option>
-      <option v-for="choice in choices" :key="choice.key" :value="choice.key">
-        {{ choice.text }}
-      </option>
-    </select>
+      <div class="pointer-events-none absolute inset-y-0 start-2 my-auto h-fit">
+        <slot name="start" />
+      </div>
+      <div class="pointer-events-none absolute inset-y-0 end-2 my-auto h-fit">
+        <VIcon name="caret-down" />
+      </div>
+      <select
+        :id="fieldId"
+        v-model="selectValue"
+        class="flex h-[calc(theme(spacing.10)_-_2_*_theme(borderWidth.DEFAULT))] appearance-none truncate bg-tx pe-10"
+        :class="[
+          showSelected ? 'w-full' : 'w-0 max-w-0',
+          hasStartContent ? 'ps-10' : 'ps-2',
+        ]"
+        :name="fieldName"
+        v-bind="splitAttrs.nonClassAttrs"
+        :aria-label="labelText"
+      >
+        <option v-if="blankText" disabled value="">{{ blankText }}</option>
+        <option v-for="choice in choices" :key="choice.key" :value="choice.key">
+          {{ choice.text }}
+        </option>
+      </select>
+    </div>
   </div>
 </template>
+
+<style>
+@property --deg {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.new-highlight {
+  background: linear-gradient(
+    var(--deg),
+    var(--color-gray-new-highlight),
+    var(--color-new-highlight)
+  );
+}
+</style>
diff --git a/frontend/src/components/VThemeSelect/VThemeSelect.vue b/frontend/src/components/VThemeSelect/VThemeSelect.vue
@@ -35,6 +35,11 @@ const colorMode = computed({
   },
 })
 
+const isDarkModeSeen = computed(() => uiStore.isDarkModeSeen)
+const setIsDarkModeSeen = () => {
+  uiStore.setIsDarkModeSeen(true)
+}
+
 const darkMode = useDarkMode()
 
 /**
@@ -68,6 +73,8 @@ const choices: ComputedRef<Choice[]> = computed(() => {
     :blank-text="$t('theme.theme')"
     :label-text="$t('theme.theme')"
     :show-selected="false"
+    :show-new-highlight="!isDarkModeSeen"
+    @click="setIsDarkModeSeen"
   >
     <template #start>
       <VIcon :name="currentThemeIcon" />

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -399,6 +399,16 @@ export default {
           },
         },
       }),
+      keyframes: {
+        "new-highlight": {
+          "0%,100%": { "--deg": "0deg" },
+          "50%": { "--deg": "50deg" },
+          "99.99%": { "--deg": "360deg" },
+        },
+      },
+      animation: {
+        "new-highlight": "new-highlight 5s linear infinite",
+      },
     },
   },
   plugins: [