skeh/misskey
1
0
Fork 0
Code Issues2 Pull requests Releases Activity

[chatui] Minor sidebar improvements + cleanup

Browse source
This commit is contained in:
Derek 2024-03-17 18:55:52 -04:00
parent e3035ea18b
commit 832e49b29b
3 changed files with 19 additions and 76 deletions
packages/frontend/src
components
MkLaunchPad.vue
ui
chat.vue
chat
header-clock.vue

3
packages/frontend/src/components/MkLaunchPad.vue
View file

@ -36,6 +36,7 @@ import { deviceKind } from '@/scripts/device-kind.js';
const props = withDefaults(defineProps<{
src?: HTMLElement;
anchor?: { x: string; y: string; };
all?: boolean | null;
}>(), {
anchor: () => ({ x: 'right', y: 'center' }),
});
@ -52,7 +53,7 @@ const modal = shallowRef<InstanceType<typeof MkModal>>();
const menu = defaultStore.state.menu;
const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
const items = Object.keys(navbarItemDef).filter(k => props.all || !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
type: def.to ? 'link' : 'button',
text: def.title,
icon: def.icon,

31
packages/frontend/src/ui/chat.vue
View file

@ -25,7 +25,7 @@
</div>
</div>
<div v-if="favoriteChannels" class="container">
<div class="header">{{ i18n.ts.channel }} ({{ i18n.ts.favorites }})<button class="_button add" @click="moreChannels"><i class="ti ti-dots"></i></button></div>
<div class="header">{{ i18n.ts.channel }} ({{ i18n.ts.favorites }})<MkA to="/channels" class="_button add"><i class="ti ti-dots"></i></MkA></div>
<div class="body">
<MkA v-for="channel in favoriteChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ read: !channel.hasUnreadNote }" active-class="active" exact><i class="ti ti-device-tv icon"></i>{{ channel.name }}</MkA>
</div>
@ -37,7 +37,7 @@
</div>
</div>
<div v-if="antennas" class="container">
<div class="header">{{ i18n.ts.antennas }}<button class="_button add" @click="addAntenna"><i class="ti ti-plus"></i></button></div>
<div class="header">{{ i18n.ts.antennas }}<MkA to="/my/antennas/create" class="_button add"><i class="ti ti-plus"></i></MkA></div>
<div class="body">
<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/timeline/antenna/${ antenna.id }`" class="item" active-class="active" exact><i class="ti ti-antenna icon"></i>{{ antenna.name }}</MkA>
</div>
@ -49,10 +49,14 @@
<button class="_button menu" @click="showMenu">
<i class="ti ti-menu-2 icon"></i>
</button>
</div>
<div class="right">
<button v-tooltip="i18n.ts.search" class="_button item search" @click="search">
<i class="ti ti-search icon"></i>
<MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip="i18n.ts.controlPanel" class="item" to="/admin">
<i class="ti ti-dashboard icon"></i>
</MkA>
<button v-tooltip="i18n.ts.more" class="item _button" @click="more">
<i class="ti ti-grid-dots icon"></i>
</button>
<MkA v-tooltip="i18n.ts.settings" class="item" to="/settings"><i class="ti ti-settings icon"></i></MkA>
</div>
@ -95,11 +99,9 @@ import { provide, ref, shallowRef, toRefs, computed, onMounted, defineAsyncCompo
import { instanceName, url } from '@/config.js';
import XWidgets from './chat/widgets.vue';
import XCommon from './_common_/common.vue';
import XHeaderClock from './chat/header-clock.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { search } from '@/scripts/search.js';
import makeList from '@/scripts/new-list.js';
import copyToClipboard from '@/scripts/copy-to-clipboard.js';
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
@ -110,9 +112,11 @@ import { mainRouter } from '@/router/main.js';
import { defaultRoutes, page } from '@/router/definition.js';
import { useRouterFactory } from '@/router/supplier.js';
const XDrawerMenu = defineAsyncComponent(() => import('@/ui/_common_/navbar-for-mobile.vue'));
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
const XLaunchPad = defineAsyncComponent(() => import('@/components/MkLaunchPad.vue'));
const routes = [
{
@ -205,14 +209,6 @@ function getSidebarContent() {
});
}
function moreChannels() {
chatRouter.push('/channels');
}
function addAntenna() {
chatRouter.push('/my/antennas/create');
}
async function addList() {
const success = await makeList();
if (success) {
@ -228,6 +224,13 @@ function hideMenu() {
drawerMenuShowing.value = false;
}
function more(ev: MouseEvent) {
os.popup(XLaunchPad, {
src: ev.currentTarget ?? ev.target,
all: true,
}, {}, 'closed');
}
function post() {
os.post();
}

61
packages/frontend/src/ui/chat/header-clock.vue
View file

@ -1,61 +0,0 @@
<template>
<div class="acemodlh _monospace">
<div>
<span v-text="y"></span>/<span v-text="m"></span>/<span v-text="d"></span>
</div>
<div>
<span v-text="hh"></span>
<span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span>
<span v-text="mm"></span>
<span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span>
<span v-text="ss"></span>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
clock: null,
y: null,
m: null,
d: null,
hh: null,
mm: null,
ss: null,
showColon: true,
};
},
created() {
this.tick();
this.clock = setInterval(this.tick, 1000);
},
beforeUnmount() {
clearInterval(this.clock);
},
methods: {
tick() {
const now = new Date();
this.y = now.getFullYear().toString();
this.m = (now.getMonth() + 1).toString().padStart(2, '0');
this.d = now.getDate().toString().padStart(2, '0');
this.hh = now.getHours().toString().padStart(2, '0');
this.mm = now.getMinutes().toString().padStart(2, '0');
this.ss = now.getSeconds().toString().padStart(2, '0');
this.showColon = now.getSeconds() % 2 === 0;
}
}
});
</script>
<style lang="scss" scoped>
.acemodlh {
opacity: 0.7;
font-size: 0.85em;
line-height: 1em;
text-align: center;
}
</style>