diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2024-09-23 14:42:38 +0900 |
|---|---|---|
| committer | syuilo <4439005+syuilo@users.noreply.github.com> | 2024-09-23 14:42:38 +0900 |
| commit | 1ba09e1eee572fd1f040b7d0bde040dd98e35c15 (patch) | |
| tree | 074daa36f3884efd2a9da30efb458fbbfc58c409 /packages/frontend/src/components | |
| parent | fix(misskey-js): wrong hashtag channel param type (#14611) (diff) | |
| download | sharkey-1ba09e1eee572fd1f040b7d0bde040dd98e35c15.tar.gz sharkey-1ba09e1eee572fd1f040b7d0bde040dd98e35c15.tar.bz2 sharkey-1ba09e1eee572fd1f040b7d0bde040dd98e35c15.zip | |
enhance(frontend): improve forms usability
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkFolder.vue | 2 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkFormFooter.vue | 49 |
2 files changed, 51 insertions, 0 deletions
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue index fef174fc6f..6d7b8307b3 100644 --- a/packages/frontend/src/components/MkFolder.vue +++ b/packages/frontend/src/components/MkFolder.vue @@ -237,6 +237,8 @@ onMounted(() => { background: var(--acrylicBg); -webkit-backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px)); + background-size: auto auto; + background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--panel) 5px, var(--panel) 10px); border-radius: 0 0 6px 6px; } </style> diff --git a/packages/frontend/src/components/MkFormFooter.vue b/packages/frontend/src/components/MkFormFooter.vue new file mode 100644 index 0000000000..1e88d59d8e --- /dev/null +++ b/packages/frontend/src/components/MkFormFooter.vue @@ -0,0 +1,49 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div :class="$style.root"> + <div :class="$style.text">{{ i18n.tsx.thereAreNChanges({ n: form.modifiedCount.value }) }}</div> + <div style="margin-left: auto;" class="_buttons"> + <MkButton danger rounded @click="form.discard"><i class="ti ti-x"></i> {{ i18n.ts.discard }}</MkButton> + <MkButton primary rounded @click="form.save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton> + </div> +</div> +</template> + +<script lang="ts" setup> +import { } from 'vue'; +import MkButton from './MkButton.vue'; +import { i18n } from '@/i18n.js'; + +const props = defineProps<{ + form: { + modifiedCount: { + value: number; + }; + discard: () => void; + save: () => void; + }; +}>(); +</script> + +<style lang="scss" module> +.root { + display: flex; + align-items: center; +} + +.text { + color: var(--warn); + font-size: 90%; + animation: modified-blink 2s infinite; +} + +@keyframes modified-blink { + 0% { opacity: 1; } + 50% { opacity: 0.5; } + 100% { opacity: 1; } +} +</style> |