OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2025-01-07 12:05:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

tweak style

Browse source
This commit is contained in:
kakkokari-gtyih 2024-05-21 19:34:12 +09:00
parent c0dced3b5c
commit 4e84285324
1 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
packages/frontend/src/components/MkVisibilityPicker.vue
View file

@ -12,29 +12,29 @@ SPDX-License-Identifier: AGPL-3.0-only
<button key="public" :disabled="isSilenced || isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'public' && !currentChannel }]" data-index="1" @click="choose('public')"> <button key="public" :disabled="isSilenced || isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'public' && !currentChannel }]" data-index="1" @click="choose('public')">
<div :class="$style.icon"><i class="ti ti-world"></i></div> <div :class="$style.icon"><i class="ti ti-world"></i></div>
<div :class="$style.body"> <div :class="$style.body">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</span> <div :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</div>
<span :class="$style.itemDescription">{{ i18n.ts._visibility.publicDescription }}</span> <div :class="$style.itemDescription">{{ i18n.ts._visibility.publicDescription }}</div>
</div> </div>
</button> </button>
<button key="home" :disabled="isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'home' && !currentChannel }]" data-index="2" @click="choose('home')"> <button key="home" :disabled="isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'home' && !currentChannel }]" data-index="2" @click="choose('home')">
<div :class="$style.icon"><i class="ti ti-home"></i></div> <div :class="$style.icon"><i class="ti ti-home"></i></div>
<div :class="$style.body"> <div :class="$style.body">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.home }}</span> <div :class="$style.itemTitle">{{ i18n.ts._visibility.home }}</div>
<span :class="$style.itemDescription">{{ i18n.ts._visibility.homeDescription }}</span> <div :class="$style.itemDescription">{{ i18n.ts._visibility.homeDescription }}</div>
</div> </div>
</button> </button>
<button key="followers" :disabled="isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' && !currentChannel }]" data-index="3" @click="choose('followers')"> <button key="followers" :disabled="isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' && !currentChannel }]" data-index="3" @click="choose('followers')">
<div :class="$style.icon"><i class="ti ti-lock"></i></div> <div :class="$style.icon"><i class="ti ti-lock"></i></div>
<div :class="$style.body"> <div :class="$style.body">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.followers }}</span> <div :class="$style.itemTitle">{{ i18n.ts._visibility.followers }}</div>
<span :class="$style.itemDescription">{{ i18n.ts._visibility.followersDescription }}</span> <div :class="$style.itemDescription">{{ i18n.ts._visibility.followersDescription }}</div>
</div> </div>
</button> </button>
<button key="specified" :disabled="localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' && !currentChannel }]" data-index="4" @click="choose('specified')"> <button key="specified" :disabled="localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' && !currentChannel }]" data-index="4" @click="choose('specified')">
<div :class="$style.icon"><i class="ti ti-mail"></i></div> <div :class="$style.icon"><i class="ti ti-mail"></i></div>
<div :class="$style.body"> <div :class="$style.body">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.specified }}</span> <div :class="$style.itemTitle">{{ i18n.ts._visibility.specified }}</div>
<span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span> <div :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</div>
</div> </div>
</button> </button>
<button <button
@ -49,11 +49,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-device-tv"></i> <i class="ti ti-device-tv"></i>
</div> </div>
<div :class="$style.body"> <div :class="$style.body">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.channel }}</span> <div :class="$style.itemTitle">{{ i18n.ts._visibility.channel }}</div>
<span :class="$style.itemDescription" class="_nowrap"> <div :class="$style.itemDescription">
<span v-if="currentChannelName">{{ i18n.tsx._visibility.channelSelected({ name: currentChannelName }) }}</span> {{ currentChannelName ? i18n.tsx._visibility.channelSelected({ name: currentChannelName }) : i18n.ts._visibility.channelDescription }}
<span v-else>{{ i18n.ts._visibility.channelDescription }}</span> </div>
</span>
</div> </div>
</button> </button>
</div> </div>
@ -219,6 +218,11 @@ fetchChannels();
.body { .body {
flex: 1 1 auto; flex: 1 1 auto;
min-width: 0;
}
.itemTitle,
.itemDescription {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -236,6 +240,10 @@ fetchChannels();
.channelButton { .channelButton {
position: relative; position: relative;
.itemDescription {
max-width: 200px;
}
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@ -248,4 +256,8 @@ fetchChannels();
pointer-events: none; pointer-events: none;
} }
} }
.root.asDrawer .channelButton .itemDescription {
max-width: 100%;
}
</style> </style>