usbharu
/
misskey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

共通スタイルをくくりだす

This commit is contained in:
kakkokari-gtyih 2023-10-24 20:35:54 +09:00
parent aab487f17f
commit 7474ba62be
6 changed files with 42 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/frontend/src/components/MkLaunchPad.vue
View File

@ -7,17 +7,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal.close()" @closed="emit('closed')"> <MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"> <div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
<div class="main"> <div class="main">
<template v-for="item in items"> <template v-for="item in items" :key="item.text">
<button v-if="item.action" :key="item.text" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }"> <button v-if="item.action" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
<i class="icon" :class="item.icon"></i> <i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
<span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="indicatorWithValue"><span>{{ item.indicateValue }}</span></span> <span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span> <span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
</button> </button>
<MkA v-else :key="item.text" v-click-anime :to="item.to" class="item" @click.passive="close()"> <MkA v-else v-click-anime :to="item.to" class="item" @click.passive="close()">
<i class="icon" :class="item.icon"></i> <i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
<span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="indicatorWithValue"><span>{{ item.indicateValue }}</span></span> <span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span> <span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
</MkA> </MkA>
</template> </template>
@ -123,27 +123,11 @@ function close() {
position: absolute; position: absolute;
top: 32px; top: 32px;
left: 16px; left: 16px;
font-size: 8px;
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--indicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
justify-content: center;
border-radius: 99rem;
@media (max-width: 500px) { @media (max-width: 500px) {
top: 16px; top: 16px;
left: 8px; left: 8px;
} }
> span {
display: inline-block;
padding: 0 .25em;
line-height: 1.5em;
}
} }
> .indicator { > .indicator {

19
packages/frontend/src/style.scss
View File

@ -155,6 +155,25 @@ hr {
background: currentColor; background: currentColor;
} }
._indicateCounter {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--indicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
justify-content: center;
border-radius: 99rem;
> span {
display: inline-block;
padding: .125em .25em;
line-height: 1.5em;
font-size: 1em;
}
}
._noSelect { ._noSelect {
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;

28
packages/frontend/src/ui/_common_/navbar.vue
View File

@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
> >
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span> <i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator"> <span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span> <span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
<i v-else class="_indicatorCircle"></i> <i v-else class="_indicatorCircle"></i>
</span> </span>
</component> </component>
@ -133,24 +133,6 @@ function more(ev: MouseEvent) {
flex-direction: column; flex-direction: column;
} }
.itemIndicateValueIcon {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--navIndicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
line-height: 1.5em;
}
}
.root:not(.iconOnly) { .root:not(.iconOnly) {
.body { .body {
width: var(--nav-width); width: var(--nav-width);
@ -338,6 +320,7 @@ function more(ev: MouseEvent) {
animation: none; animation: none;
left: auto; left: auto;
right: 40px; right: 40px;
font-size: 10px;
} }
} }
@ -502,6 +485,13 @@ function more(ev: MouseEvent) {
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
animation: blink 1s infinite; animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
top: 4px;
left: 20px;
font-size: 10px;
}
} }
} }
</style> </style>

20
packages/frontend/src/ui/classic.sidebar.vue
View File

@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"> <component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span> <i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
<span v-if="navbarItemDef[item].indicated" class="indicator"> <span v-if="navbarItemDef[item].indicated" class="indicator">
<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span> <span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
<i v-else class="_indicatorCircle"></i> <i v-else class="_indicatorCircle"></i>
</span> </span>
</component> </component>
@ -227,24 +227,6 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
left: auto; left: auto;
right: 20px; right: 20px;
} }
& > .itemIndicateValueIcon {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--navIndicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
line-height: 1.5em;
}
}
} }
&:hover { &:hover {

22
packages/frontend/src/ui/deck.vue
View File

@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"> <button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
<i :class="$style.navButtonIcon" class="ti ti-bell"></i> <i :class="$style.navButtonIcon" class="ti ti-bell"></i>
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"> <span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" :class="$style.navButtonIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span> <span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
<i v-else class="_indicatorCircle"></i> <i v-else class="_indicatorCircle"></i>
</span> </span>
</button> </button>
@ -491,24 +491,10 @@ body {
color: var(--indicator); color: var(--indicator);
font-size: 16px; font-size: 16px;
animation: blink 1s infinite; animation: blink 1s infinite;
}
.navButtonIndicateValueIcon { &:has(.itemIndicateValueIcon) {
display: inline-flex; animation: none;
color: var(--fgOnAccent); font-size: 12px;
font-weight: 700;
background: var(--navIndicator);
height: 1em;
min-width: 1em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
font-size: .75em;
line-height: 1em;
} }
} }
</style> </style>

22
packages/frontend/src/ui/universal.vue
View File

@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"> <button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
<i :class="$style.navButtonIcon" class="ti ti-bell"></i> <i :class="$style.navButtonIcon" class="ti ti-bell"></i>
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"> <span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" :class="$style.navButtonIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span> <span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
<i v-else class="_indicatorCircle"></i> <i v-else class="_indicatorCircle"></i>
</span> </span>
</button> </button>
@ -450,24 +450,10 @@ $widgets-hide-threshold: 1090px;
color: var(--indicator); color: var(--indicator);
font-size: 16px; font-size: 16px;
animation: blink 1s infinite; animation: blink 1s infinite;
}
.navButtonIndicateValueIcon { &:has(.itemIndicateValueIcon) {
display: inline-flex; animation: none;
color: var(--fgOnAccent); font-size: 12px;
font-weight: 700;
background: var(--navIndicator);
height: 1em;
min-width: 1em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
font-size: .75em;
line-height: 1em;
} }
} }