FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

client: replace indicator circles #207

Open
toast wants to merge 2 commits from indicator-circle-v2 into main
pull from: indicator-circle-v2
merge into: FoundKeyGang:main
Conversation 5 Commits 2 Files changed 14 +80 -142
14 changed files with 80 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/client/src/components/launch-pad.vue
View file

@ -3,30 +3,28 @@
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
<div class="main">
<template v-for="item in items">
<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }">
<button v-if="item.action" class="_button" :class="{ indicated: item.indicated }" @click="$event => { item.action($event); close(); }">
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
<span>{{ item.text }}</span>
</button>
<MkA v-else :to="item.to" @click.passive="close()">
<MkA v-else :to="item.to" :class="{ indicated: item.indicated }" @click.passive="close()">
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
<span>{{ item.text }}</span>
</MkA>
</template>
</div>
<div class="sub">
<button class="_button" @click="help">
<i class="fas fa-question-circle icon"></i>
<div class="text">{{ i18n.ts.help }}</div>
<span>{{ i18n.ts.help }}</span>
</button>
<MkA to="/about" @click.passive="close()">
<i class="fas fa-info-circle icon"></i>
<div class="text">{{ i18n.ts.instanceInfo }}</div>
<span>{{ i18n.ts.instanceInfo }}</span>
</MkA>
<MkA to="/about-foundkey" @click.passive="close()">
<img src="/static-assets/favicon.png" class="icon"/>
<div class="text">{{ i18n.ts.aboutMisskey }}</div>
<span>{{ i18n.ts.aboutMisskey }}</span>
</MkA>
</div>
</div>
@ -66,7 +64,7 @@ const items = Object.keys(menuDef).filter(k => !menu.includes(k)).map(k => menuD
icon: def.icon,
to: def.to,
action: def.action,
indicate: def.indicated,
indicated: def.indicated,
}));
function close() {
@ -141,25 +139,11 @@ function help(ev: MouseEvent) {
height: 24px;
}
> .text {
> span {
margin-top: 12px;
font-size: 0.8em;
line-height: 1.5em;
}
> .indicator {
position: absolute;
top: 32px;
left: 32px;
color: var(--indicator);
font-size: 8px;
animation: blink 1s infinite;
@media (max-width: 500px) {
top: 16px;
left: 16px;
}
}
}
}

21
packages/client/src/components/ui/menu.vue
View file

@ -14,29 +14,25 @@
<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
<span><MkEllipsis/></span>
</span>
<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close()">
<MkA v-else-if="item.type === 'link'" :class="{ indicated: item.indicate }" :to="item.to" :tabindex="i" class="_button item" @click.passive="close()">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span>{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</MkA>
<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close()">
<a v-else-if="item.type === 'a'" :class="{ indicated: item.indicate }" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close()">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<span>{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</a>
<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" :class="{ active: item.active, indicated: item.indicate }" :disabled="item.active" @click="clicked(item.action, $event)">
<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button>
<span v-else-if="item.type === 'switch'" :tabindex="i" class="item">
<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</FormSwitch>
</span>
<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active, indicated: item.indicate }" :disabled="item.active" @click="clicked(item.action, $event)">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span>{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button>
</template>
<span v-if="items2.length === 0" class="none item">
@ -236,15 +232,6 @@ function focusDown() {
width: 20px;
height: 20px;
}
> .indicator {
position: absolute;
top: 5px;
left: 13px;
color: var(--indicator);
font-size: 12px;
animation: blink 1s infinite;
}
}
> .divider {

12
packages/client/src/style.scss
View file

@ -481,10 +481,14 @@ hr {
transform: scale(0.9);
}
@keyframes blink {
0% { opacity: 1; transform: scale(1); }
30% { opacity: 1; transform: scale(1); }
90% { opacity: 0; transform: scale(0.5); }
.indicated {
i {
color: var(--indicator);
filter: saturate(2);
}
span {
font-weight: bold;
}
}
@keyframes tada {

1
packages/client/src/themes/_dark.json5
View file

@ -35,7 +35,6 @@
navFg: '@fg',
navHoverFg: ':lighten<17<@fg',
navActive: '@accent',
navIndicator: '@indicator',
link: '#44a4c1',
hashtag: '#ff9156',
mention: '@accent',

1
packages/client/src/themes/_light.json5
View file

@ -35,7 +35,6 @@
navFg: '@fg',
navHoverFg: ':darken<17<@fg',
navActive: '@accent',
navIndicator: '@indicator',
link: '#44a4c1',
hashtag: '#ff9156',
mention: '@accent',

1
packages/client/src/themes/d-astro.json5
View file

@ -41,7 +41,6 @@
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
panelBorder: '" solid 1px var(--divider)',
accentDarken: ':darken<10<@accent',
navIndicator: '@accent',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
buttonGradateA: '@accent',

1
packages/client/src/themes/d-pumpkin.json5
View file

@ -63,7 +63,6 @@
inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: '" solid 1px var(--divider)',
accentDarken: ':darken<10<@accent',
navIndicator: '@indicator',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
driveFolderBg: ':alpha<0.3<@accent',

1
packages/client/src/themes/l-vivid.json5
View file

@ -44,7 +44,6 @@
inputBorderHover: 'rgba(0, 0, 0, 0.2)',
panelBorder: '" solid 1px var(--divider)',
accentDarken: ':darken<10<@accent',
navIndicator: '@accent',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
driveFolderBg: ':alpha<0.3<@accent',

30
packages/client/src/ui/_common_/sidebar-for-mobile.vue
View file

@ -9,24 +9,27 @@
</MkA>
<template v-for="item in menu" :key="item">
<div v-if="item === '-'" class="divider"></div>
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }, { indicated: menuDef[item].indicated }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i>
<span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="iAmModerator" class="item" active-class="active" to="/admin">
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
<i class="fas fa-door-open fa-fw"></i>
<span class="text">{{ i18n.ts.controlPanel }}</span>
</MkA>
<button class="item _button" @click="more">
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
<button class="item _button" :class="{ indicated: otherMenuItemIndicated }" @click="more">
<i class="fa fa-ellipsis-h fa-fw"></i>
<span class="text">{{ i18n.ts.more }}</span>
</button>
<MkA class="item" active-class="active" to="/settings">
<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
<i class="fas fa-cog fa-fw"></i>
<span class="text">{{ i18n.ts.settings }}</span>
</MkA>
<button class="item _button post" data-cy-open-post-form @click="post">
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
<i class="fas fa-pencil-alt fa-fw"></i>
<span class="text">{{ i18n.ts.note }}</span>
</button>
</div>
</div>
@ -104,15 +107,6 @@ function more(): void {
vertical-align: middle;
}
> .indicator {
position: absolute;
top: 0;
left: 20px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
}
> .text {
position: relative;
font-size: 0.9em;

30
packages/client/src/ui/_common_/sidebar.vue
View file

@ -9,24 +9,27 @@
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }, { indicated: menuDef[item].indicated }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i>
<span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin">
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
<i class="fas fa-door-open fa-fw"></i>
<span class="text">{{ i18n.ts.controlPanel }}</span>
</MkA>
<button class="item _button" @click="more">
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
<button class="item _button" :class="{ indicated: otherMenuItemIndicated }" @click="more">
<i class="fa fa-ellipsis-h fa-fw"></i>
<span class="text">{{ i18n.ts.more }}</span>
</button>
<MkA class="item" active-class="active" to="/settings">
<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
<i class="fas fa-cog fa-fw"></i>
<span class="text">{{ i18n.ts.settings }}</span>
</MkA>
<button class="item _button post" data-cy-open-post-form @click="os.post">
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
<i class="fas fa-pencil-alt fa-fw"></i>
<span class="text">{{ i18n.ts.note }}</span>
</button>
</div>
</div>
@ -137,15 +140,6 @@ function more(ev: MouseEvent) {
vertical-align: middle;
}
> .indicator {
position: absolute;
top: 0;
left: 20px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
}
> .text {
position: relative;
font-size: 0.9em;

15
packages/client/src/ui/classic.header.vue
View file

@ -7,18 +7,16 @@
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-tooltip="i18n.ts[menuDef[item].title]" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-tooltip="i18n.ts[menuDef[item].title]" class="item _button" :class="[ item, { indicated: menuDef[item].indicated }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="iAmModerator" v-tooltip="i18n.ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-door-open fa-fw"></i>
</MkA>
<button class="item _button" @click="more">
<button class="item _button" :class="{ indicated: otherNavItemIndicated }" @click="more">
<i class="fas fa-ellipsis-h fa-fw"></i>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
</button>
</div>
<div class="right">
@ -129,15 +127,6 @@ function openAccountMenuWrapper(ev: MouseEvent): void {
vertical-align: middle;
}
> .indicator {
position: absolute;
top: 0;
left: 0;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
}
&:hover {
text-decoration: none;
color: var(--navHoverFg);

21
packages/client/src/ui/classic.sidebar.vue
View file

@ -14,18 +14,18 @@
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[ item, { indicated: menuDef[item].indicated } ]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i>
<span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="iAmModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
</MkA>
<button class="item _button" @click="more">
<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
<button class="item _button" @click="more" :class="{ indicated: otherNavItemIndicated }">
<i class="fas fa-ellipsis-h fa-fw"></i>
<span class="text">{{ i18n.ts.more }}</span>
</button>
<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
@ -214,15 +214,6 @@ function openAccountMenuWrapper(ev: MouseEvent): void {
vertical-align: middle;
}
> .indicator {
position: absolute;
top: 0;
left: 0;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
}
&:hover {
text-decoration: none;
color: var(--navHoverFg);

25
packages/client/src/ui/deck.vue
View file

@ -27,10 +27,18 @@
</template>
<div v-if="isMobile" class="buttons">
<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button home _button" @click="mainRouter.push('/')"><i class="fas fa-home"></i></button>
<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
<button class="button nav _button" :class="{ indicated: menuIndicated }" @click="drawerMenuShowing = true">
<i class="fas fa-bars"></i>
</button>
<button class="button home _button" @click="mainRouter.push('/')">
<i class="fas fa-home"></i>
</button>
<button class="button notifications _button" :class="{ indicated: $i?.hasUnreadNotification }" @click="mainRouter.push('/my/notifications')">
<i class="fas fa-bell"></i>
</button>
<button class="button post _button" @click="os.post()">
<i class="fas fa-pencil-alt"></i>
</button>
</div>
<transition :name="$store.state.animation ? 'menu-back' : ''">
@ -245,15 +253,6 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
background: var(--X2);
}
> .indicator {
position: absolute;
top: 0;
left: 0;
color: var(--indicator);
font-size: 16px;
animation: blink 1s infinite;
}
&:first-child {
margin-left: 0;
}

29
packages/client/src/ui/universal.vue
View file

@ -18,11 +18,21 @@
<button class="widgetButton _button" :class="{ show: true }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
<div v-if="isMobile" class="buttons">
<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="fas fa-home"></i></button>
<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
<button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
<button class="button nav _button" :class="{ indicated: menuIndicated }" @click="drawerMenuShowing = true">
<i class="fas fa-bars"></i>
</button>
<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')">
<i class="fas fa-home"></i>
</button>
<button class="button notifications _button" :class="{ indicated: $i?.hasUnreadNotification }" @click="mainRouter.push('/my/notifications')">
<i class="fas fa-bell"></i>
</button>
<button class="button widget _button" @click="widgetsShowing = true">
<i class="fas fa-layer-group"></i>
</button>
<button class="button post _button" @click="os.post()">
<i class="fas fa-pencil-alt"></i>
</button>
</div>
<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
@ -344,15 +354,6 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
background: var(--X2);
}
> .indicator {
position: absolute;
top: 0;
left: 0;
color: var(--indicator);
font-size: 16px;
animation: blink 1s infinite;
}
&:first-child {
margin-left: 0;
}