diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
| commit | 9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch) | |
| tree | ce5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/MkSuperMenu.vue | |
| parent | wip: retention for dashboard (diff) | |
| download | misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.gz misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.bz2 misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.zip | |
rename: client -> frontend
Diffstat (limited to 'packages/client/src/components/MkSuperMenu.vue')
| -rw-r--r-- | packages/client/src/components/MkSuperMenu.vue | 161 |
1 files changed, 0 insertions, 161 deletions
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue deleted file mode 100644 index e79794aea4..0000000000 --- a/packages/client/src/components/MkSuperMenu.vue +++ /dev/null @@ -1,161 +0,0 @@ -<template> -<div class="rrevdjwu" :class="{ grid }"> - <div v-for="group in def" class="group"> - <div v-if="group.title" class="title">{{ group.title }}</div> - - <div class="items"> - <template v-for="(item, i) in group.items"> - <a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }"> - <i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i> - <span class="text">{{ item.text }}</span> - </a> - <button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)"> - <i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i> - <span class="text">{{ item.text }}</span> - </button> - <MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }"> - <i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i> - <span class="text">{{ item.text }}</span> - </MkA> - </template> - </div> - </div> -</div> -</template> - -<script lang="ts"> -import { defineComponent, ref, unref } from 'vue'; - -export default defineComponent({ - props: { - def: { - type: Array, - required: true, - }, - grid: { - type: Boolean, - required: false, - default: false, - }, - }, -}); -</script> - -<style lang="scss" scoped> -.rrevdjwu { - > .group { - & + .group { - margin-top: 16px; - padding-top: 16px; - border-top: solid 0.5px var(--divider); - } - - > .title { - opacity: 0.7; - margin: 0 0 8px 0; - font-size: 0.9em; - } - - > .items { - > .item { - display: flex; - align-items: center; - width: 100%; - box-sizing: border-box; - padding: 10px 16px 10px 8px; - border-radius: 9px; - font-size: 0.9em; - - &:hover { - text-decoration: none; - background: var(--panelHighlight); - } - - &.active { - color: var(--accent); - background: var(--accentedBg); - } - - &.danger { - color: var(--error); - } - - > .icon { - width: 32px; - margin-right: 2px; - flex-shrink: 0; - text-align: center; - opacity: 0.8; - } - - > .text { - white-space: normal; - padding-right: 12px; - flex-shrink: 1; - } - - } - } - } - - &.grid { - > .group { - & + .group { - padding-top: 0; - border-top: none; - } - - margin-left: 0; - margin-right: 0; - - > .title { - font-size: 1em; - opacity: 0.7; - margin: 0 0 8px 16px; - } - - > .items { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); - grid-gap: 16px; - padding: 0 16px; - - > .item { - flex-direction: column; - text-align: center; - padding: 0; - - &:hover { - text-decoration: none; - background: none; - color: var(--accent); - - > .icon { - background: var(--accentedBg); - } - } - - > .icon { - display: grid; - place-content: center; - margin-right: 0; - margin-bottom: 6px; - font-size: 1.5em; - width: 54px; - height: 54px; - aspect-ratio: 1; - background: var(--panel); - border-radius: 100%; - } - - > .text { - padding-right: 0; - width: 100%; - font-size: 0.8em; - } - } - } - } - } -} -</style> |