1
0
Fork 1
mirror of https://example.com synced 2024-11-22 12:06:39 +09:00

feat: ability to emphasize "Follows you" sign (close #64)

This commit is contained in:
naskya 2023-08-19 11:01:31 +09:00
parent f8120abafc
commit 3f41e6cebb
Signed by: naskya
GPG key ID: 164DFF24E2D40139
7 changed files with 48 additions and 1 deletions

View file

@ -21,6 +21,8 @@
## 細かい変更点
- 「フォローされています」の表示を目立たせられるように
- デフォルトの表示は目立たないため
- 最大 15 件の投稿を固定できるように
- 5 件は少ないと思ったため
- 投稿ボタンを巨大にできるように

View file

@ -1146,6 +1146,7 @@ languageForTranslation: "Language used for post translation"
addRe: "Add \"re:\" at the beginning of comment in reply to a post with a content warning"
showBigPostButton: "Show a bigger post button in the posting form"
confirm: "Confirm"
emphasizeFollowed: "Highlight the \"Follows you\" sign on your follower info"
_sensitiveMediaDetection:
description: "Reduces the effort of server moderation through automatically recognizing

View file

@ -998,6 +998,7 @@ addRe: "閲覧注意の投稿への返信で、注釈の先頭に\"re:\"を追
detectPostLanguage: "投稿の言語を自動検出し、外国語の投稿に翻訳ボタンを表示する"
languageForTranslation: "投稿翻訳に使用する言語"
showBigPostButton: "投稿ボタンを巨大にする"
emphasizeFollowed: "フォロワーのアカウントに表示される「フォローされています」の表示を強調する"
_sensitiveMediaDetection:
description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"

View file

@ -10,6 +10,7 @@
<span
v-if="$i && $i.id != user.id && user.isFollowed"
class="followed"
:class="{ 'followed-emph': emphasizeFollowed }"
>{{ i18n.ts.followsYou }}</span
>
</div>
@ -92,12 +93,15 @@ import XShowMoreButton from "@/components/MkShowMoreButton.vue";
import MkNumber from "@/components/MkNumber.vue";
import { userPage } from "@/filters/user";
import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
const props = defineProps<{
user: misskey.entities.UserDetailed;
detailed?: boolean;
}>();
const emphasizeFollowed = defaultStore.state.emphasizeFollowed;
let isLong = $ref(
props.detailed &&
props.user.description &&
@ -142,6 +146,11 @@ let collapsed = $ref(isLong);
font-size: 0.7em;
border-radius: 6px;
}
> .followed-emph {
background: var(--accent);
font-size: 1em;
}
&.detailed::after {
content: "";
background-image: var(--blur, inherit);

View file

@ -198,6 +198,12 @@
<FormSwitch v-model="squareAvatars" class="_formBlock">{{
i18n.ts.squareAvatars
}}</FormSwitch>
<FormSwitch v-model="emphasizeFollowed" class="_formBlock"
>{{ i18n.ts.emphasizeFollowed
}}<span class="_beta">{{
i18n.ts.originalFeature
}}</span></FormSwitch
>
<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
i18n.ts.seperateRenoteQuote
}}</FormSwitch>
@ -428,13 +434,15 @@ const replaceChatButtonWithAccountButton = computed(
const replaceWidgetsButtonWithReloadButton = computed(
defaultStore.makeGetterSetter("replaceWidgetsButtonWithReloadButton"),
);
const addRe = computed(defaultStore.makeGetterSetter("addRe"));
const detectPostLanguage = computed(
defaultStore.makeGetterSetter("detectPostLanguage"),
);
const showBigPostButton = computed(
defaultStore.makeGetterSetter("showBigPostButton"),
);
const emphasizeFollowed = computed(
defaultStore.makeGetterSetter("emphasizeFollowed"),
);
watch(swipeOnDesktop, () => {
defaultStore.set("swipeOnMobile", true);

View file

@ -76,6 +76,9 @@
user.isFollowed
"
class="followed"
:class="{
'followed-emph': emphasizeFollowed,
}"
>{{ i18n.ts.followsYou }}</span
>
</div>
@ -142,6 +145,9 @@
user.isFollowed
"
class="followed"
:class="{
'followed-emph': emphasizeFollowed,
}"
>{{ i18n.ts.followsYou }}</span
>
<div v-if="$i?.isModerator || $i?.isAdmin">
@ -404,6 +410,7 @@ const XPhotos = defineAsyncComponent(() => import("./index.photos.vue"));
const XActivity = defineAsyncComponent(() => import("./index.activity.vue"));
const hideFollowButton = defaultStore.state.hideFollowButtons;
const emphasizeFollowed = defaultStore.state.emphasizeFollowed;
const emit = defineEmits(["refresh"]);
const props = withDefaults(
@ -552,6 +559,11 @@ onUnmounted(() => {
border-radius: 6px;
}
> .followed-emph {
background: var(--accent);
font-size: 1em;
}
> .title {
position: absolute;
bottom: 0;
@ -581,6 +593,11 @@ onUnmounted(() => {
font-size: 0.7em;
border-radius: 24px;
}
> .followed-emph {
background: var(--accent);
font-size: 1em;
}
}
> .bottom {
@ -690,6 +707,11 @@ onUnmounted(() => {
font-size: 0.7em;
border-radius: 24px;
}
> .followed-emph {
background: var(--accent);
font-size: 1em;
}
}
> .followedWindow {

View file

@ -370,6 +370,10 @@ export const defaultStore = markRaw(
where: "device",
default: false,
},
emphasizeFollowed: {
where: "deviceAccount",
default: true,
},
}),
);