From 785c837a07e684b4f4acb65c36927041402fd970 Mon Sep 17 00:00:00 2001 From: fly_mc <me@flymc.cc> Date: Wed, 13 Nov 2024 23:53:03 +0800 Subject: [PATCH] frontend: tweak instance ticker --- locales/en-US.yml | 1 + locales/zh-CN.yml | 1 + locales/zh-TW.yml | 1 + .../src/components/MkInstanceTicker.vue | 62 ++++++++++------ packages/frontend/src/components/MkNote.vue | 1 - .../src/components/MkNoteDetailed.vue | 39 ++++++++--- .../frontend/src/components/MkNoteHeader.vue | 70 ++++++++++++------- packages/frontend/src/pages/settings/pari.vue | 2 + packages/frontend/src/store.ts | 4 ++ 9 files changed, 121 insertions(+), 60 deletions(-) diff --git a/locales/en-US.yml b/locales/en-US.yml index cfa64b0b8..ec336c2d7 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -2838,3 +2838,4 @@ _selfXssPrevention: description3: "For more information, please check here: {link}" insertNewNotes: "Insert new notes at current position" insertNewNotesDescription: "Insert new notes at the current position while scrolling timeline." +clickToShowInstanceTickerWindow: "Click instance ticker to show instance info" diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml index f0501d5ae..ebdedd8a0 100644 --- a/locales/zh-CN.yml +++ b/locales/zh-CN.yml @@ -2838,3 +2838,4 @@ _selfXssPrevention: description3: "详情请看这里。{link}" insertNewNotes: "在当前位置插入新帖文" insertNewNotesDescription: "將新收到的帖文插入到正在浏览的位置。" +clickToShowInstanceTickerWindow: "点击Instance ticker显示实例信息窗口" diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml index b7d2576bc..bac27c345 100644 --- a/locales/zh-TW.yml +++ b/locales/zh-TW.yml @@ -2837,3 +2837,4 @@ _selfXssPrevention: description3: "細節請看這裡。{link}" insertNewNotes: "在當前位置插入新貼文" insertNewNotesDescription: "將剛剛收到的貼文插入到正在瀏覽的位置。" +clickToShowInstanceTickerWindow: "點擊Instance ticker顯示實例資訊視窗" diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue index 5a2a36a91..7191358f8 100644 --- a/packages/frontend/src/components/MkInstanceTicker.vue +++ b/packages/frontend/src/components/MkInstanceTicker.vue @@ -1,10 +1,10 @@ <!-- -SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-FileCopyrightText: syuilo and other misskey contributors SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div :class="$style.root" :style="bg"> +<div :class="$style.root" :style="bg" @click.stop="defaultStore.state.clickToShowInstanceTickerWindow && showInstanceTickerWindow"> <img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/> <div :class="$style.name">{{ instance.name }}</div> </div> @@ -15,13 +15,16 @@ import { computed } from 'vue'; import { instanceName } from '@@/js/config.js'; import { instance as Instance } from '@/instance.js'; import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js'; +import { defaultStore } from '@/store.js'; +import * as os from '@/os.js'; const props = defineProps<{ instance?: { - faviconUrl?: string | null - name?: string | null - themeColor?: string | null + faviconUrl?: string + name: string + themeColor?: string } + host: string | null, }>(); // if no instance data is given, this is for the local instance @@ -30,26 +33,33 @@ const instance = props.instance ?? { themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content, }; -const faviconUrl = computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? '/favicon.ico'); +const faviconUrl = computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.faviconUrl, 'preview') ?? '/favicon.ico'); const themeColor = instance.themeColor ?? '#777777'; const bg = { - background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`, + //background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`, + background: `${themeColor}`, }; + +function showInstanceTickerWindow() { + if (props.host) { + os.pageWindow(`/instance-info/${props.host}`); + } else { + os.pageWindow('/about'); + } +} </script> <style lang="scss" module> -$height: 2ex; - .root { display: flex; align-items: center; - height: $height; - border-radius: 4px 0 0 4px; + height: 1.5ex; + border-radius: 1.0rem; + padding: 4px; overflow: clip; color: #fff; - margin: -.3em 0 0 0; text-shadow: /* .866 ≈ sin(60deg) */ 1px 0 1px #000, .866px .5px 1px #000, @@ -63,24 +73,34 @@ $height: 2ex; 0 -1px 1px #000, .5px -.866px 1px #000, .866px -.5px 1px #000; - mask-image: linear-gradient(90deg, - rgb(0,0,0), - rgb(0,0,0) calc(100% - 16px), - rgba(0,0,0,0) 100% - ); } .icon { - height: $height; + height: 2ex; flex-shrink: 0; } .name { - margin-left: 4px; + padding: 0.5ex; + margin: -0.5ex; + margin-left: calc(4px - 0.5ex); line-height: 1; - font-size: 0.9em; + font-size: 0.8em; font-weight: bold; white-space: nowrap; - overflow: visible; + overflow: hidden; + overflow-wrap: anywhere; + max-width: 300px; + text-overflow: ellipsis; + + &::-webkit-scrollbar { + display: none; + } +} + +@container (max-width: 400px) { + .name { + max-width: 55px; + } } </style> diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 7b4a75109..a9f4ffba7 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -70,7 +70,6 @@ SPDX-License-Identifier: AGPL-3.0-only <MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/> <div :class="$style.main"> <MkNoteHeader :note="appearNote" :mini="true" @click.stop/> - <MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/> </div> </div> <div :class="[{ [$style.noteClickToOpen]: defaultStore.state.noteClickToOpen }]" @click.stop="defaultStore.state.noteClickToOpen ? noteClickToOpen(appearNote.id) : undefined"> diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index c7d4e4c74..8ad128e54 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -53,14 +53,6 @@ SPDX-License-Identifier: AGPL-3.0-only <MkUserName :nowrap="false" :user="appearNote.user"/> </MkA> <span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span> - <div :class="$style.noteHeaderInfo"> - <span v-if="appearNote.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[appearNote.visibility]"> - <i v-if="appearNote.visibility === 'home'" class="ti ti-home"></i> - <i v-else-if="appearNote.visibility === 'followers'" class="ti ti-lock"></i> - <i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i> - </span> - <span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span> - </div> </div> <div :class="$style.noteHeaderUsernameAndBadgeRoles"> <div :class="$style.noteHeaderUsername"> @@ -70,7 +62,19 @@ SPDX-License-Identifier: AGPL-3.0-only <img v-for="(role, i) in appearNote.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.noteHeaderBadgeRole" :src="role.iconUrl!"/> </div> </div> - <MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/> + </div> + <div :class="$style.noteHeaderMetaInfo"> + <div :class="$style.noteHeaderInfo"> + <span v-if="appearNote.visibility !== 'public'" style="margin-right: 0.5em;" :title="i18n.ts._visibility[appearNote.visibility]"> + <i v-if="appearNote.visibility === 'home'" class="ti ti-home"></i> + <i v-else-if="appearNote.visibility === 'followers'" class="ti ti-lock"></i> + <i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i> + </span> + <span v-if="appearNote.localOnly" style="margin-right: 0.5em;" :title="i18n.ts._visibility['disableFederation']"> + <i class="ti ti-rocket-off"></i> + </span> + </div> + <MkInstanceTicker v-if="showTicker" :style="{ cursor: defaultStore.state.clickToShowInstanceTickerWindow ? 'pointer' : 'default' }" :instance="appearNote.user.instance" :host="note.user.host"/> </div> </header> <div :class="$style.noteContent"> @@ -823,7 +827,6 @@ onMounted(() => { } .noteHeaderName { - margin: 0 0 -.2em 0; font-weight: bold; line-height: 1.3; } @@ -848,9 +851,23 @@ onMounted(() => { .noteHeaderUsername { margin-bottom: 2px; - margin-right: 0.5em; line-height: 1.3; word-wrap: anywhere; + text-overflow: ellipsis; + white-space: nowrap; + + &::-webkit-scrollbar { + display: none; + } +} + +.noteHeaderMetaInfo { + display: flex; + flex-direction: column; + align-items: flex-end; + margin-left: auto; + min-width: fit-content; + flex-shrink: 0; } .noteHeaderBadgeRoles { diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue index a0fe23e5a..3556c75a8 100644 --- a/packages/frontend/src/components/MkNoteHeader.vue +++ b/packages/frontend/src/components/MkNoteHeader.vue @@ -20,17 +20,17 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div :class="$style.username"><MkAcct :user="note.user"/></div> </div> - <!--<div :class="$style.section">--> + <div :class="$style.section"> <div :class="$style.info"> <span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span> <div v-if="mock"> <MkTime :time="note.createdAt" colored/> </div> <MkA v-else :to="notePage(note)" @mouseenter="setDetail(true)" @mouseleave="setDetail(false)" :style="{ textDecoration: 'none', userSelect: 'none' }"> - <MkTime - :time="note.createdAt" - :mode="(defaultStore.state.showDetailTimeWhenHover && isDetail) ? 'detail' : undefined" - colored + <MkTime + :time="note.createdAt" + :mode="(defaultStore.state.showDetailTimeWhenHover && isDetail) ? 'detail' : undefined" + colored /> </MkA> <span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]"> @@ -41,10 +41,11 @@ SPDX-License-Identifier: AGPL-3.0-only <span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span> <span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span> </div> - <!--</div>--> + <div :class="$style.info"><MkInstanceTicker v-if="showTicker" :style="{ cursor: defaultStore.state.clickToShowInstanceTickerWindow ? 'pointer' : 'default' }" :instance="note.user.instance" :host="note.user.host"/></div> + </div> </header> </template> - + <script lang="ts" setup> import { inject, ref } from 'vue'; import * as Misskey from 'misskey-js'; @@ -52,16 +53,19 @@ import { i18n } from '@/i18n.js'; import { notePage } from '@/filters/note.js'; import { userPage } from '@/filters/user.js'; import { defaultStore } from '@/store.js'; +import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; const isDetail = ref(false); const setDetail = (value) => { isDetail.value = value; }; -defineProps<{ +const props = defineProps<{ note: Misskey.entities.Note; }>(); +const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && props.note.user.instance); + const mock = inject<boolean>('mock', false); </script> @@ -73,25 +77,29 @@ const mock = inject<boolean>('mock', false); } .section { - align-items: flex-start; - white-space: nowrap; - flex-direction: column; - overflow: hidden; + display: flex; + white-space: nowrap; + flex-direction: column; - &:last-child { - display: flex; - align-items: flex-end; - margin-left: auto; - margin-bottom: auto; - padding-left: 10px; - overflow: clip; - } + &:first-child { + flex: 1; + overflow: hidden; + min-width: 0; + } + + &:last-child { + display: flex; + flex-direction: column; + align-items: flex-end; + margin-left: auto; + overflow: visible; + } } .name { flex-shrink: 1; display: block; - margin: .3em .5em 0 0; + margin: 0 .5em 0 0; padding: 0; overflow: hidden; font-size: 1em; @@ -117,10 +125,9 @@ const mock = inject<boolean>('mock', false); .username { flex-shrink: 9999999; - margin: -.3em .5em .3em 0; + margin: 0; overflow: hidden; text-overflow: ellipsis; - font-size: 95%; opacity: 0.8; &::-webkit-scrollbar { @@ -129,10 +136,19 @@ const mock = inject<boolean>('mock', false); } .info { - flex-shrink: 0; - margin-left: auto; - font-size: 0.9em; - text-decoration: none; + display: flex; + align-items: center; + gap: 4px; + + &:first-child { + margin-top: 0; + font-size: 0.9em; + } + + &:not(:first-child) { + margin-top: 4px; + font-size: 0.9em; + } } .badgeRoles { diff --git a/packages/frontend/src/pages/settings/pari.vue b/packages/frontend/src/pages/settings/pari.vue index dca8ce80f..79f32f3fc 100644 --- a/packages/frontend/src/pages/settings/pari.vue +++ b/packages/frontend/src/pages/settings/pari.vue @@ -79,6 +79,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template #label>{{ i18n.ts.insertNewNotes }}</template> <template #caption>{{ i18n.ts.insertNewNotesDescription }}</template> </MkSwitch> + <MkSwitch v-model="clickToShowInstanceTickerWindow">{{ i18n.ts.clickToShowInstanceTickerWindow }}</MkSwitch> <MkSelect v-model="autoSpacingBehaviour"> <template #label>{{ i18n.ts.autoSpacing }}</template> <option :value="null">{{ i18n.ts.disabled }}</option> @@ -137,6 +138,7 @@ const disableReactionsViewer = computed(defaultStore.makeGetterSetter('disableRe const collapsedUnexpectedLangs = computed(defaultStore.makeGetterSetter('collapsedUnexpectedLangs')); const emojiAutoSpacing = computed(defaultStore.makeGetterSetter('emojiAutoSpacing')); const insertNewNotes = computed(defaultStore.makeGetterSetter('insertNewNotes')); +const clickToShowInstanceTickerWindow = computed(defaultStore.makeGetterSetter('clickToShowInstanceTickerWindow')); definePageMetadata(() => ({ title: 'Pari Plus!', diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 586bb1fa4..57a0b63a7 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -563,6 +563,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: false, }, + clickToShowInstanceTickerWindow: { + where: 'device', + default: false, + }, })); // TODO: 他のタブと永続化されたstateを同期