mirror of
https://github.com/paricafe/misskey.git
synced 2025-01-30 18:00:16 -06:00
frontend: tweak instance ticker
This commit is contained in:
fly_mc
parent
b75133590f
commit
785c837a07
9 changed files with 121 additions and 60 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -2838,3 +2838,4 @@ _selfXssPrevention:
|
|||
description3: "详情请看这里。{link}"
|
||||
insertNewNotes: "在当前位置插入新帖文"
|
||||
insertNewNotesDescription: "將新收到的帖文插入到正在浏览的位置。"
|
||||
clickToShowInstanceTickerWindow: "点击Instance ticker显示实例信息窗口"
|
||||
|
|
|
|||
|
|
@ -2837,3 +2837,4 @@ _selfXssPrevention:
|
|||
description3: "細節請看這裡。{link}"
|
||||
insertNewNotes: "在當前位置插入新貼文"
|
||||
insertNewNotesDescription: "將剛剛收到的貼文插入到正在瀏覽的位置。"
|
||||
clickToShowInstanceTickerWindow: "點擊Instance ticker顯示實例資訊視窗"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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!',
|
||||
|
|
|
|||
|
|
@ -563,6 +563,10 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||
where: 'device',
|
||||
default: false,
|
||||
},
|
||||
clickToShowInstanceTickerWindow: {
|
||||
where: 'device',
|
||||
default: false,
|
||||
},
|
||||
}));
|
||||
|
||||
// TODO: 他のタブと永続化されたstateを同期
|
||||
|
|
|
|||
Loading…
Reference in a new issue