mirror of
https://iceshrimp.dev/crimekillz/iceshrimp-161sh.git
synced 2024-11-22 04:03:49 +01:00
アイコンを四角で表示するオプション
This commit is contained in:
parent
e113c6aa2e
commit
0eff9614f2
@ -764,6 +764,7 @@ ratio: "比率"
|
|||||||
customCss: "カスタムCSS"
|
customCss: "カスタムCSS"
|
||||||
customCssWarn: "この設定は必ず知識のある方が行ってください。不適切な設定を行うとクライアントが正常に使用できなくなる恐れがあります。"
|
customCssWarn: "この設定は必ず知識のある方が行ってください。不適切な設定を行うとクライアントが正常に使用できなくなる恐れがあります。"
|
||||||
global: "グローバル"
|
global: "グローバル"
|
||||||
|
squareAvatars: "アイコンを四角形で表示"
|
||||||
|
|
||||||
_ad:
|
_ad:
|
||||||
back: "戻る"
|
back: "戻る"
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<span class="eiwwqkts _noSelect" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
|
<span class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
|
||||||
<img class="inner" :src="url" decoding="async"/>
|
<img class="inner" :src="url" decoding="async"/>
|
||||||
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
|
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
|
||||||
</span>
|
</span>
|
||||||
<MkA class="eiwwqkts _noSelect" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
|
<MkA class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
|
||||||
<img class="inner" :src="url" decoding="async"/>
|
<img class="inner" :src="url" decoding="async"/>
|
||||||
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
|
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
|
||||||
</MkA>
|
</MkA>
|
||||||
@ -81,28 +81,6 @@ export default defineComponent({
|
|||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
|
|
||||||
&.cat {
|
|
||||||
&:before, &:after {
|
|
||||||
background: #df548f;
|
|
||||||
border: solid 4px currentColor;
|
|
||||||
box-sizing: border-box;
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
height: 50%;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
border-radius: 0 75% 75%;
|
|
||||||
transform: rotate(37.5deg) skew(30deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
border-radius: 75% 0 75% 75%;
|
|
||||||
transform: rotate(-37.5deg) skew(-30deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .inner {
|
> .inner {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -125,5 +103,35 @@ export default defineComponent({
|
|||||||
width: 20%;
|
width: 20%;
|
||||||
height: 20%;
|
height: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.square {
|
||||||
|
border-radius: 20%;
|
||||||
|
|
||||||
|
> .inner {
|
||||||
|
border-radius: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cat {
|
||||||
|
&:before, &:after {
|
||||||
|
background: #df548f;
|
||||||
|
border: solid 4px currentColor;
|
||||||
|
box-sizing: border-box;
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
height: 50%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
border-radius: 0 75% 75%;
|
||||||
|
transform: rotate(37.5deg) skew(30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
border-radius: 75% 0 75% 75%;
|
||||||
|
transform: rotate(-37.5deg) skew(-30deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -37,6 +37,7 @@
|
|||||||
<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch>
|
<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch>
|
||||||
<FormSwitch v-model:value="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch>
|
<FormSwitch v-model:value="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch>
|
||||||
<FormSwitch v-model:value="disableShowingAnimatedImages">{{ $ts.disableShowingAnimatedImages }}</FormSwitch>
|
<FormSwitch v-model:value="disableShowingAnimatedImages">{{ $ts.disableShowingAnimatedImages }}</FormSwitch>
|
||||||
|
<FormSwitch v-model:value="squareAvatars">{{ $ts.squareAvatars }}</FormSwitch>
|
||||||
<FormSwitch v-model:value="useSystemFont">{{ $ts.useSystemFont }}</FormSwitch>
|
<FormSwitch v-model:value="useSystemFont">{{ $ts.useSystemFont }}</FormSwitch>
|
||||||
<FormSwitch v-model:value="useOsNativeEmojis">{{ $ts.useOsNativeEmojis }}
|
<FormSwitch v-model:value="useOsNativeEmojis">{{ $ts.useOsNativeEmojis }}
|
||||||
<div><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" :key="useOsNativeEmojis"/></div>
|
<div><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" :key="useOsNativeEmojis"/></div>
|
||||||
@ -145,6 +146,7 @@ export default defineComponent({
|
|||||||
instanceTicker: defaultStore.makeGetterSetter('instanceTicker'),
|
instanceTicker: defaultStore.makeGetterSetter('instanceTicker'),
|
||||||
enableInfiniteScroll: defaultStore.makeGetterSetter('enableInfiniteScroll'),
|
enableInfiniteScroll: defaultStore.makeGetterSetter('enableInfiniteScroll'),
|
||||||
useReactionPickerForContextMenu: defaultStore.makeGetterSetter('useReactionPickerForContextMenu'),
|
useReactionPickerForContextMenu: defaultStore.makeGetterSetter('useReactionPickerForContextMenu'),
|
||||||
|
squareAvatars: defaultStore.makeGetterSetter('squareAvatars'),
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
@ -176,6 +178,10 @@ export default defineComponent({
|
|||||||
this.reloadAsk();
|
this.reloadAsk();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
squareAvatars() {
|
||||||
|
this.reloadAsk();
|
||||||
|
},
|
||||||
|
|
||||||
showGapBetweenNotesInTimeline() {
|
showGapBetweenNotesInTimeline() {
|
||||||
this.reloadAsk();
|
this.reloadAsk();
|
||||||
},
|
},
|
||||||
|
@ -194,6 +194,10 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||||||
where: 'device',
|
where: 'device',
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
squareAvatars: {
|
||||||
|
where: 'device',
|
||||||
|
default: false
|
||||||
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// TODO: 他のタブと永続化されたstateを同期
|
// TODO: 他のタブと永続化されたstateを同期
|
||||||
|
Loading…
Reference in New Issue
Block a user