nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

feat(stage-ui): better hue slider

Browse Source
This commit is contained in:
Neko Ayaka
2025-03-13 14:58:06 +08:00
parent 576502be25
commit f80ce1d6ec
8 changed files with 45 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-web/src/pages/settings/themes/index.vue
+6 -4
View File
@@ -365,11 +365,11 @@ function isColorSelected(hexColor: string): boolean {
<style>
.primary-color-bar {
@apply w-full h-full flex-1 flex items-center justify-center;
--at-apply: w-full h-full flex-1 flex items-center justify-center;
}
.theme-hue-slider {
@apply rounded-lg appearance-none;
--at-apply: rounded-lg appearance-none;
background: linear-gradient(
to right,
oklch(85% 0.2 0),
@@ -383,11 +383,13 @@ function isColorSelected(hexColor: string): boolean {
}
.theme-hue-slider::-webkit-slider-thumb {
@apply w-2 h-12 appearance-none rounded-md bg-neutral-500/80 dark:bg-neutral-400/80 cursor-pointer shadow-md border-2 border-white hover:bg-neutral-500 dark:hover:bg-neutral-400 transition-colors duration-200;
--at-apply: w-2 h-12 appearance-none rounded-md bg-neutral-500/80 dark: bg-neutral-400/80 cursor-pointer shadow-md
border-2 border-white hover: bg-neutral-500 dark: hover: bg-neutral-400 transition-colors duration-200;
}
.theme-hue-slider::-moz-range-thumb {
@apply w-2 h-12 bg-neutral-500/80 rounded-md dark:bg-neutral-400/80 cursor-pointer shadow-md border-2 border-white border-box hover:bg-neutral-500 dark:hover:bg-neutral-400 transition-colors duration-200;
--at-apply: w-2 h-12 bg-neutral-500/80 rounded-md dark: bg-neutral-400/80 cursor-pointer shadow-md border-2
border-white border-box hover: bg-neutral-500 dark: hover: bg-neutral-400 transition-colors duration-200;
}
.transparency-grid {
packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
+4 -1
View File
@@ -7,7 +7,10 @@ const modelValue = ref('test')
</script>
<template>
<Story :layout="{ type: 'grid', width: 500 }">
<Story
title="Radio Card (detail)"
:layout="{ type: 'grid', width: 500 }"
>
<Variant id="default" title="Default">
<RadioCardDetail
id="test"
packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue
+4 -1
View File
@@ -7,7 +7,10 @@ const modelValue = ref('test')
</script>
<template>
<Story :layout="{ type: 'grid', width: 500 }">
<Story
title="Radio Card (simple)"
:layout="{ type: 'grid', width: 500 }"
>
<Variant id="default" title="Default">
<RadioCardSimple
id="test"
packages/stage-ui/src/components/Menu/IconItem.story.vue
+1
View File
@@ -5,6 +5,7 @@ import IconItem from './IconItem.vue'
<template>
<Story
title="Menu Icon Item"
:layout="{ type: 'grid', width: 500 }"
>
<template #controls>
packages/stage-ui/src/components/Menu/IconStatusItem.story.vue
+1
View File
@@ -5,6 +5,7 @@ import IconStatusItem from './IconStatusItem.vue'
<template>
<Story
title="Menu Icon Item (with Status)"
:layout="{ type: 'grid', width: 500 }"
>
<template #controls>
packages/stage-ui/src/stores/settings.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { useDevicesList, useLocalStorage } from '@vueuse/core'
import { defineStore } from 'pinia'
import { computed, onMounted, ref, watch } from 'vue'
export const DEFAULT_THEME_COLORS_HUE = 354.31
export const DEFAULT_THEME_COLORS_HUE = 178.17
export const useSettings = defineStore('settings', () => {
const selectedAudioDevice = ref<MediaDeviceInfo>()
packages/stage-ui/stories/ThemeColorsHueControl.vue
+5 -3
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
const DEFAULT_THEME_COLORS_HUE = 354.31
const DEFAULT_THEME_COLORS_HUE = 178.17
const themeColorsHue = ref(DEFAULT_THEME_COLORS_HUE)
@@ -21,7 +21,7 @@ watch(themeColorsHue, () => {
</script>
<template>
<div px-4 py-2>
<div px-4 py-2 flex="~ col">
<input
v-model="themeColorsHue"
type="range"
@@ -32,7 +32,9 @@ watch(themeColorsHue, () => {
>
<button
class="mt-2 rounded-md bg-neutral-100 px-2 py-1 text-xs transition-colors dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700"
class="mt-2 rounded-md px-2 py-1 text-xs transition-colors"
bg="neutral-200 dark:neutral-800 hover:neutral-200 dark:hover:neutral-700"
text="neutral-700 dark:neutral-300"
@click="resetToDefault"
>
Reset to Default
packages/stage-ui/stories/main.css
+23 -2
View File
@@ -41,11 +41,12 @@ html.htw-dark {
}
.primary-color-bar {
@apply w-full h-full flex-1 flex items-center justify-center;
--at-apply: w-full h-full flex-1 flex items-center justify-center;
}
.theme-hue-slider {
@apply flex-1 w-full h-2 rounded-full appearance-none;
outline: none;
--at-apply: rounded-lg appearance-none h-10;
background: linear-gradient(
to right,
oklch(85% 0.2 0),
@@ -57,3 +58,23 @@ html.htw-dark {
oklch(85% 0.2 360)
);
}
.theme-hue-slider::-webkit-slider-thumb {
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
hover: bg-neutral-800 transition-colors duration-200;
}
.htw-dark .theme-hue-slider::-webkit-slider-thumb {
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-200 cursor-pointer shadow-md border-2 border-white
hover: bg-neutral-300 transition-colors duration-200;
}
.theme-hue-slider::-moz-range-thumb {
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-lg border-2 border-neutral-500
hover: bg-neutral-800 transition-colors duration-200;
}
.htw-dark .theme-hue-slider::-moz-range-thumb {
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-md border-2 border-white
hover: bg-neutral-300 transition-colors duration-200;
}