diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-05-23 10:46:42 +0900 |
|---|---|---|
| committer | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-05-23 10:46:42 +0900 |
| commit | 2bfbbbf16ac1f085efa897c98913297fe09eef61 (patch) | |
| tree | c88edb1ca495c3f48e92c2a14744a06c006f6a2f /packages/frontend/src/components/global/MkTip.vue | |
| parent | fix(backend): admin側のエンドポイントで作成した招待コード... (diff) | |
| download | misskey-2bfbbbf16ac1f085efa897c98913297fe09eef61.tar.gz misskey-2bfbbbf16ac1f085efa897c98913297fe09eef61.tar.bz2 misskey-2bfbbbf16ac1f085efa897c98913297fe09eef61.zip | |
enhance(frontend): improve tips
Diffstat (limited to 'packages/frontend/src/components/global/MkTip.vue')
| -rw-r--r-- | packages/frontend/src/components/global/MkTip.vue | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/packages/frontend/src/components/global/MkTip.vue b/packages/frontend/src/components/global/MkTip.vue new file mode 100644 index 0000000000..384511a0ed --- /dev/null +++ b/packages/frontend/src/components/global/MkTip.vue @@ -0,0 +1,48 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div v-if="!store.r.tips.value[props.k]" :class="[$style.root, { [$style.warn]: warn }]" class="_selectable _gaps_s"> + <div style="font-weight: bold;"><i class="ti ti-bulb"></i> {{ i18n.ts.tip }}:</div> + <div><slot></slot></div> + <MkButton primary rounded small @click="closeTip()"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton> +</div> +</template> + +<script lang="ts" setup> +import { i18n } from '@/i18n.js'; +import { store } from '@/store.js'; +import MkButton from '@/components/MkButton.vue'; + +const props = withDefaults(defineProps<{ + k: keyof (typeof store['s']['tips']); + warn?: boolean; +}>(), { + warn: false, +}); + +function closeTip() { + store.set('tips', { + ...store.r.tips.value, + [props.k]: true, + }); +} +</script> + +<style lang="scss" module> +.root { + padding: 12px 14px; + font-size: 90%; + background: var(--MI_THEME-infoBg); + color: var(--MI_THEME-infoFg); + border-radius: var(--MI-radius); + + &.warn { + background: var(--MI_THEME-infoWarnBg); + color: var(--MI_THEME-infoWarnFg); + } +} + +</style> |