Michcio/FoundKey-0x7f
1
1
Fork 0
forked from FoundKeyGang/FoundKey
Code Pull requests Releases Activity

client: replace blinking indicator with icon colouring

Browse source 
It was annoying, and turns out, also a CPU hog!

Changelog: Removed
This commit is contained in:
Chloe Kudryavtsev 2022-10-17 11:05:29 -04:00 • committed by Michcio
parent ed515cc24c
commit 010a65dd92
13 changed files with 19 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,14 +4,12 @@
<div class="main">
<template v-for="item in items">
<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }">
<i class="icon" :class="item.icon"></i>
<i class="icon" :class="[ item.icon, { indicated: item.indicated } ]"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button>
<MkA v-else :to="item.to" @click.passive="close()">
<i class="icon" :class="item.icon"></i>
<i class="icon" :class="[ item.icon, { indicated: item.indicated } ]"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</MkA>
</template>
</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() {
@ -146,20 +144,6 @@ function help(ev: MouseEvent) {
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,28 +14,24 @@
<span><MkEllipsis/></span>
</span>
<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close()">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<i v-if="item.icon" class="fa-fw" :class="[ item.icon, { indicated: item.indicate }]"></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()">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<i v-if="item.icon" class="fa-fw" :class="[ item.icon, { indicated: item.indicate }]"></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)">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<i v-if="item.icon" class="fa-fw" :class="[ item.icon, { indicated: item.indicate }]"></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">
@ -235,15 +231,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 {

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

@ -481,10 +481,8 @@ 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 {
color: var(--indicator);
}
@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',

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

@ -10,8 +10,7 @@
<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>
<i class="fa-fw" :class="[ menuDef[item].icon, { indicated: menuDef[item].indicated }]"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
</component>
</template>
<div class="divider"></div>
@ -19,8 +18,7 @@
<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>
<i class="fa fa-ellipsis-h fa-fw" :class="{ indicated: otherMenuItemIndicated }"></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>
@ -104,15 +102,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;

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

@ -10,8 +10,7 @@
<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>
<i class="fa-fw" :class="[ menuDef[item].icon, { indicated: menuDef[item].indicated }]"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
</component>
</template>
<div class="divider"></div>
@ -19,8 +18,7 @@
<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>
<i class="fa fa-ellipsis-h fa-fw" :class="{ indicated: otherMenuItemIndicated }"></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>
@ -137,15 +135,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

@ -8,8 +8,7 @@
<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 } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
<i class="fa-fw" :class="[ menuDef[item].icon, { indicated: menuDef[item].indicated }]"></i>
</component>
</template>
<div class="divider"></div>
@ -17,8 +16,7 @@
<i class="fas fa-door-open fa-fw"></i>
</MkA>
<button class="item _button" @click="more">
<i class="fas fa-ellipsis-h fa-fw"></i>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
<i class="fas fa-ellipsis-h fa-fw" :class="{ indicated: otherNavItemIndicated }"></i>
</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);

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

@ -15,8 +15,7 @@
<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>
<i class="fa-fw" :class="[ menuDef[item].icon, { indicated: menuDef[item].indicated }]"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
</component>
</template>
<div class="divider"></div>
@ -24,8 +23,7 @@
<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>
<i class="fas fa-ellipsis-h fa-fw" :class="{ indicated: otherNavItemIndicated }"></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 +212,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);

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

@ -18,9 +18,9 @@
<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 nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars" :class="{ indicated: menuIndicated }"></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" @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 notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell" :class="{ indicated: $i?.hasUnreadNotification }"></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>
@ -321,15 +321,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;
}