diff options
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkButton.vue | 23 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkNumber.vue | 7 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkRolePreview.vue | 2 |
3 files changed, 28 insertions, 4 deletions
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue index d37f7f39f8..53453be2c1 100644 --- a/packages/frontend/src/components/MkButton.vue +++ b/packages/frontend/src/components/MkButton.vue @@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only <button v-if="!link" ref="el" class="_button" - :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]" + :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.accent]: accent, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]" :type="type" :name="name" :value="value" @@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only </button> <MkA v-else class="_button" - :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]" + :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.accent]: accent, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]" :to="to ?? '#'" :behavior="linkBehavior" @mousedown="onMousedown" @@ -48,6 +48,7 @@ const props = defineProps<{ linkBehavior?: null | 'window' | 'browser'; autofocus?: boolean; wait?: boolean; + accent?: boolean; danger?: boolean; full?: boolean; small?: boolean; @@ -234,6 +235,24 @@ function onMousedown(evt: MouseEvent): void { } } + &.accent { + font-weight: bold; + color: var(--MI_THEME-accent); + + &.primary { + color: #fff; + background: var(--MI_THEME-accent); + + &:not(:disabled):hover { + background: hsl(from var(--MI_THEME-accent) h s calc(l + 10)); + } + + &:not(:disabled):active { + background: hsl(from var(--MI_THEME-accent) h s calc(l - 10)); + } + } + } + &.danger { font-weight: bold; color: var(--MI_THEME-error); diff --git a/packages/frontend/src/components/MkNumber.vue b/packages/frontend/src/components/MkNumber.vue index a278205b61..7c2393bf5c 100644 --- a/packages/frontend/src/components/MkNumber.vue +++ b/packages/frontend/src/components/MkNumber.vue @@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { reactive, watch } from 'vue'; import number from '@/filters/number.js'; +import { prefer } from '@/preferences'; const props = defineProps<{ value: number; @@ -36,7 +37,11 @@ watch(() => props.value, (to, from) => { } } - window.requestAnimationFrame(step); + if (prefer.s.animation) { + window.requestAnimationFrame(step); + } else { + tweened.number = to; + } }, { immediate: true, }); diff --git a/packages/frontend/src/components/MkRolePreview.vue b/packages/frontend/src/components/MkRolePreview.vue index 3f14c5b5e0..15149b3f0c 100644 --- a/packages/frontend/src/components/MkRolePreview.vue +++ b/packages/frontend/src/components/MkRolePreview.vue @@ -41,7 +41,7 @@ import { i18n } from '@/i18n.js'; const props = withDefaults(defineProps<{ role: Misskey.entities.Role; forModeration: boolean; - detailed: boolean; + detailed?: boolean; }>(), { detailed: true, }); |