usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tweak

This commit is contained in:
kakkokari-gtyih 2024-05-21 19:13:57 +09:00
parent 65f63c0bab
commit c0dced3b5c
1 changed files with 51 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
packages/frontend/src/components/MkVisibilityPicker.vue
View File

@ -37,18 +37,23 @@ SPDX-License-Identifier: AGPL-3.0-only
<span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span> <span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span>
</div> </div>
</button> </button>
<button ref="channelsButton" class="_button" :class="[$style.item, { [$style.active]: currentChannel }]" data-index="5" @click="chooseChannel"> <button
<div :class="$style.channelWrapper" :style="[currentChannel ? {borderLeftColor: `${currentChannel.color}`} : {}]"> ref="channelsButton"
<div :class="$style.icon"> class="_button"
<i class="ti ti-device-tv"></i> :class="[$style.item, $style.channelButton, { [$style.active]: currentChannel }]"
</div> :style="currentChannel && currentChannel.color ? `--channel-color: ${currentChannel.color}` : undefined"
<div :class="$style.body"> data-index="5"
<span :class="$style.itemTitle">{{ i18n.ts._visibility.channel }}</span> @click="chooseChannel"
<span :class="$style.itemDescription"> >
<span v-if="currentChannelName">{{ i18n.t('_visibility.channelSelected', { name: currentChannelName }) }}</span> <div :class="$style.icon">
<span v-else>{{ i18n.ts._visibility.channelDescription }}</span> <i class="ti ti-device-tv"></i>
</span> </div>
</div> <div :class="$style.body">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.channel }}</span>
<span :class="$style.itemDescription" class="_nowrap">
<span v-if="currentChannelName">{{ i18n.tsx._visibility.channelSelected({ name: currentChannelName }) }}</span>
<span v-else>{{ i18n.ts._visibility.channelDescription }}</span>
</span>
</div> </div>
</button> </button>
</div> </div>
@ -58,6 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, shallowRef, ref, computed } from 'vue'; import { nextTick, shallowRef, ref, computed } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import type { MenuItem } from '@/types/menu.js';
import MkModal from '@/components/MkModal.vue'; import MkModal from '@/components/MkModal.vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
@ -72,7 +78,7 @@ const props = withDefaults(defineProps<{
localOnly: boolean; localOnly: boolean;
src?: HTMLElement; src?: HTMLElement;
isReplyVisibilitySpecified?: boolean; isReplyVisibilitySpecified?: boolean;
currentChannel?: Misskey.entities.Channel currentChannel?: Misskey.entities.Channel;
}>(), { }>(), {
}); });
@ -108,17 +114,30 @@ async function fetchChannels() {
async function chooseChannel() { async function chooseChannel() {
let selectedChannel: Misskey.entities.Channel | null = null; let selectedChannel: Misskey.entities.Channel | null = null;
await os.popupMenu( await os.popupMenu([
channels.value.map(it => ({ type: 'button', text: it.name, action: (_) => selectedChannel = it })), {
type: 'label',
text: i18n.ts.selectChannel,
},
...channels.value.map<MenuItem>(it => ({
type: 'button',
text: it.name,
active: it.id === currentChannel.value?.id,
action: (_) => {
selectedChannel = it;
currentChannel.value = it;
},
}))],
channelsButton.value, channelsButton.value,
); );
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (selectedChannel) { if (selectedChannel) {
emit('changeChannel', selectedChannel); emit('changeChannel', selectedChannel);
nextTick(() => {
if (modal.value) modal.value.close();
});
} }
await nextTick();
if (modal.value) modal.value.close();
} }
function choose(visibility: typeof Misskey.noteVisibilities[number]): void { function choose(visibility: typeof Misskey.noteVisibilities[number]): void {
@ -214,12 +233,19 @@ fetchChannels();
opacity: 0.6; opacity: 0.6;
} }
.channelWrapper { .channelButton {
display: flex; position: relative;
margin-left: -6px;
padding-left: 4px; &::before {
border-left-width: 2px; content: '';
border-left-style: solid; position: absolute;
border-left-color: transparent; top: 5px;
left: 0;
width: 4px;
height: calc(100% - 10px);
border-radius: 0 4px 4px 0;
background: var(--channel-color, transparent);
pointer-events: none;
}
} }
</style> </style>