mirror of
https://github.com/paricafe/misskey.git
synced 2025-02-12 02:10:36 -06:00
frontend fixes
This commit is contained in:
parent
7bff7962a6
commit
588c821cbe
6 changed files with 46 additions and 46 deletions
packages/frontend/src/components
|
@ -4,46 +4,46 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header :class="$style.root">
|
<header :class="$style.root">
|
||||||
<div :class="$style.section">
|
<div :class="$style.section">
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
<div v-if="mock" :class="$style.name">
|
<div v-if="mock" :class="$style.name">
|
||||||
<MkUserName :user="note.user"/>
|
<MkUserName :user="note.user"/>
|
||||||
</div>
|
|
||||||
<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
|
|
||||||
<MkUserName :user="note.user"/>
|
|
||||||
</MkA>
|
|
||||||
<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
|
|
||||||
<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
|
|
||||||
<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.username"><MkAcct :user="note.user"/></div>
|
<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)" @click.stop>
|
||||||
</div>
|
<MkUserName :user="note.user"/>
|
||||||
<div :class="$style.section">
|
</MkA>
|
||||||
<div :class="$style.info">
|
<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
|
||||||
<span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span>
|
<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
|
||||||
<div v-if="mock">
|
<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
|
||||||
<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
|
|
||||||
/>
|
|
||||||
</MkA>
|
|
||||||
<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
|
|
||||||
<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
|
|
||||||
<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
|
|
||||||
<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
|
|
||||||
</span>
|
|
||||||
<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>
|
||||||
</div>
|
<div :class="$style.username"><MkAcct :user="note.user"/></div>
|
||||||
</header>
|
</div>
|
||||||
|
<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)" :style="{ textDecoration: 'none', userSelect: 'none' }" @mouseenter="setDetail(true)" @mouseleave="setDetail(false)">
|
||||||
|
<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]">
|
||||||
|
<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
|
||||||
|
<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
|
||||||
|
<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
|
||||||
|
</span>
|
||||||
|
<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 :class="$style.info"><MkInstanceTicker v-if="showTicker" :style="{ cursor: defaultStore.state.clickToShowInstanceTickerWindow ? 'pointer' : 'default' }" :host="note.user.host"/></div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -57,7 +57,7 @@ import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
|
||||||
|
|
||||||
const isDetail = ref(false);
|
const isDetail = ref(false);
|
||||||
const setDetail = (value) => {
|
const setDetail = (value) => {
|
||||||
isDetail.value = value;
|
isDetail.value = value;
|
||||||
};
|
};
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
|
|
|
@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div>
|
<div>
|
||||||
<p v-if="note.cw != null" :class="$style.cw">
|
<p v-if="note.cw != null" :class="$style.cw">
|
||||||
<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis" @click.stop/>
|
<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis" @click.stop/>
|
||||||
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop />
|
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop/>
|
||||||
</p>
|
</p>
|
||||||
<div v-show="note.cw == null || showContent">
|
<div v-show="note.cw == null || showContent">
|
||||||
<MkSubNoteContent :class="$style.text" :note="note"/>
|
<MkSubNoteContent :class="$style.text" :note="note"/>
|
||||||
|
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<template>
|
<template>
|
||||||
<div :class="{ [$style.done]: closed || isVoted }">
|
<div :class="{ [$style.done]: closed || isVoted }">
|
||||||
<ul :class="$style.choices">
|
<ul :class="$style.choices">
|
||||||
<li v-for="(choice, i) in poll.choices" :key="i" :class="$style.choice" @click="vote(i)">
|
<li v-for="(choice, i) in poll.choices" :key="i" :class="$style.choice" @click.stop="vote(i)">
|
||||||
<div :class="$style.bg" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
|
<div :class="$style.bg" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
|
||||||
<span :class="$style.fg">
|
<span :class="$style.fg">
|
||||||
<template v-if="choice.isVoted"><i class="ti ti-check" style="margin-right: 4px; color: var(--MI_THEME-accent);"></i></template>
|
<template v-if="choice.isVoted"><i class="ti ti-check" style="margin-right: 4px; color: var(--MI_THEME-accent);"></i></template>
|
||||||
|
|
|
@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
<details v-if="note.files && note.files.length > 0">
|
<details v-if="note.files && note.files.length > 0">
|
||||||
<summary>({{ i18n.tsx.withNFiles({ n: note.files.length }) }})</summary>
|
<summary>({{ i18n.tsx.withNFiles({ n: note.files.length }) }})</summary>
|
||||||
<MkMediaList :mediaList="note.files"/>
|
<MkMediaList :mediaList="note.files" @click.stop/>
|
||||||
</details>
|
</details>
|
||||||
<details v-if="note.poll">
|
<details v-if="note.poll">
|
||||||
<summary>{{ i18n.ts.poll }}</summary>
|
<summary>{{ i18n.ts.poll }}</summary>
|
||||||
|
@ -32,10 +32,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
|
import { shouldCollapsed } from '@@/js/collapsed.js';
|
||||||
import MkMediaList from '@/components/MkMediaList.vue';
|
import MkMediaList from '@/components/MkMediaList.vue';
|
||||||
import MkPoll from '@/components/MkPoll.vue';
|
import MkPoll from '@/components/MkPoll.vue';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
import { shouldCollapsed } from '@@/js/collapsed.js';
|
|
||||||
import { defaultStore } from '@/store.js';
|
import { defaultStore } from '@/store.js';
|
||||||
import { useRouter } from '@/router/supplier.js';
|
import { useRouter } from '@/router/supplier.js';
|
||||||
|
|
||||||
|
|
|
@ -98,11 +98,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
|
import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import MkNoteSimple from './MkNoteSimple.vue';
|
|
||||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
|
||||||
import { url as local } from '@@/js/config.js';
|
import { url as local } from '@@/js/config.js';
|
||||||
import { versatileLang } from '@@/js/intl-const.js';
|
import { versatileLang } from '@@/js/intl-const.js';
|
||||||
|
import MkNoteSimple from './MkNoteSimple.vue';
|
||||||
import type { summaly } from '@misskey-dev/summaly';
|
import type { summaly } from '@misskey-dev/summaly';
|
||||||
|
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import { deviceKind } from '@/scripts/device-kind.js';
|
import { deviceKind } from '@/scripts/device-kind.js';
|
||||||
|
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick">
|
<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click.stop="onClick">
|
||||||
<MkImgWithBlurhash :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
|
<MkImgWithBlurhash :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
|
||||||
<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
|
<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
|
||||||
<div v-if="user.isCat" :class="[$style.ears]">
|
<div v-if="user.isCat" :class="[$style.ears]">
|
||||||
|
|
Loading…
Add table
Reference in a new issue