misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' of https://github.com/misskey-dev/misskey into storybook

Browse source
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-03-31 15:54:18 +09:00
commit bf9846a269
No known key found for this signature in database
GPG key ID: 3E87B98A3F6BAB99
40 changed files with 490 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

83
packages/frontend/src/pages/channel-editor.vue
View file

@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700">
<div class="_gaps_m">
<div v-if="channel" class="_gaps_m">
<MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template>
</MkInput>
@ -11,13 +11,37 @@
<template #label>{{ i18n.ts.description }}</template>
</MkTextarea>
<div class="banner">
<div>
<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ti ti-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
<div v-else-if="bannerUrl">
<img :src="bannerUrl" style="width: 100%;"/>
<MkButton @click="removeBannerImage()"><i class="ti ti-trash"></i> {{ i18n.ts._channel.removeBanner }}</MkButton>
</div>
</div>
<MkFolder :default-open="true">
<template #label>{{ i18n.ts.pinnedNotes }}</template>
<div class="_gaps">
<MkButton primary rounded @click="addPinnedNote()"><i class="ti ti-plus"></i></MkButton>
<Sortable
v-model="pinnedNotes"
item-key="id"
:handle="'.' + $style.pinnedNoteHandle"
:animation="150"
>
<template #item="{element,index}">
<div :class="$style.pinnedNote">
<button class="_button" :class="$style.pinnedNoteHandle"><i class="ti ti-menu"></i></button>
{{ element.id }}
<button class="_button" :class="$style.pinnedNoteRemove" @click="removePinnedNote(index)"><i class="ti ti-x"></i></button>
</div>
</template>
</Sortable>
</div>
</MkFolder>
<div>
<MkButton primary @click="save()"><i class="ti ti-device-floppy"></i> {{ channelId ? i18n.ts.save : i18n.ts.create }}</MkButton>
</div>
@ -27,7 +51,7 @@
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue';
import { computed, ref, watch, defineAsyncComponent } from 'vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
@ -36,6 +60,9 @@ import * as os from '@/os';
import { useRouter } from '@/router';
import { definePageMetadata } from '@/scripts/page-metadata';
import { i18n } from '@/i18n';
import MkFolder from '@/components/MkFolder.vue';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const router = useRouter();
@ -48,6 +75,7 @@ let name = $ref(null);
let description = $ref(null);
let bannerUrl = $ref<string | null>(null);
let bannerId = $ref<string | null>(null);
const pinnedNotes = ref([]);
watch(() => bannerId, async () => {
if (bannerId == null) {
@ -70,15 +98,36 @@ async function fetchChannel() {
description = channel.description;
bannerId = channel.bannerId;
bannerUrl = channel.bannerUrl;
pinnedNotes.value = channel.pinnedNoteIds.map(id => ({
id,
}));
}
fetchChannel();
async function addPinnedNote() {
const { canceled, result: value } = await os.inputText({
title: i18n.ts.noteIdOrUrl,
});
if (canceled) return;
const note = await os.apiWithDialog('notes/show', {
noteId: value.includes('/') ? value.split('/').pop() : value,
});
pinnedNotes.value = [{
id: note.id,
}, ...pinnedNotes.value];
}
function removePinnedNote(index: number) {
pinnedNotes.value.splice(index, 1);
}
function save() {
const params = {
name: name,
description: description,
bannerId: bannerId,
pinnedNoteIds: pinnedNotes.value.map(x => x.id),
};
if (props.channelId) {
@ -117,6 +166,32 @@ definePageMetadata(computed(() => props.channelId ? {
}));
</script>
<style lang="scss" scoped>
<style lang="scss" module>
.pinnedNote {
position: relative;
display: block;
line-height: 2.85rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: var(--navFg);
}
.pinnedNoteRemove {
position: absolute;
z-index: 10000;
width: 32px;
height: 32px;
color: #ff2a2a;
right: 8px;
opacity: 0.8;
}
.pinnedNoteHandle {
cursor: move;
width: 32px;
height: 32px;
margin: 0 8px;
opacity: 0.5;
}
</style>

35
packages/frontend/src/pages/channel.vue
View file

@ -16,6 +16,16 @@
<Mfm :text="channel.description" :is-note="false" :i="$i"/>
</div>
</div>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" as-like class="button" rounded primary @click="unfavorite()"><i class="ti ti-star"></i></MkButton>
<MkButton v-else v-tooltip="i18n.ts.favorite" as-like class="button" rounded @click="favorite()"><i class="ti ti-star"></i></MkButton>
<MkFoldableSection>
<template #header><i class="ti ti-pin ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedNotes }}</template>
<div v-if="channel.pinnedNotes.length > 0" class="_gaps">
<MkNote v-for="note in channel.pinnedNotes" :key="note.id" class="_panel" :note="note"/>
</div>
</MkFoldableSection>
</div>
<div v-if="channel && tab === 'timeline'" class="_gaps">
<!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる -->
@ -54,6 +64,8 @@ import MkNotes from '@/components/MkNotes.vue';
import { url } from '@/config';
import MkButton from '@/components/MkButton.vue';
import { defaultStore } from '@/store';
import MkNote from '@/components/MkNote.vue';
import MkFoldableSection from '@/components/MkFoldableSection.vue';
const router = useRouter();
@ -63,6 +75,7 @@ const props = defineProps<{
let tab = $ref('timeline');
let channel = $ref(null);
let favorited = $ref(false);
const featuredPagination = $computed(() => ({
endpoint: 'notes/featured' as const,
limit: 10,
@ -76,6 +89,7 @@ watch(() => props.channelId, async () => {
channel = await os.api('channels/show', {
channelId: props.channelId,
});
favorited = channel.isFavorited;
}, { immediate: true });
function edit() {
@ -90,6 +104,27 @@ function openPostForm() {
});
}
function favorite() {
os.apiWithDialog('channels/favorite', {
channelId: channel.id,
}).then(() => {
favorited = true;
});
}
async function unfavorite() {
const confirm = await os.confirm({
type: 'warning',
text: i18n.ts.unfavoriteConfirm,
});
if (confirm.canceled) return;
os.apiWithDialog('channels/unfavorite', {
channelId: channel.id,
}).then(() => {
favorited = false;
});
}
const headerActions = $computed(() => {
if (channel && channel.userId) {
const share = {

25
packages/frontend/src/pages/channels.vue
View file

@ -2,17 +2,22 @@
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700">
<div v-if="tab === 'featured'" class="grwlizim featured">
<div v-if="tab === 'featured'">
<MkPagination v-slot="{items}" :pagination="featuredPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
</MkPagination>
</div>
<div v-else-if="tab === 'following'" class="grwlizim following">
<div v-else-if="tab === 'favorites'">
<MkPagination v-slot="{items}" :pagination="favoritesPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
</MkPagination>
</div>
<div v-else-if="tab === 'following'">
<MkPagination v-slot="{items}" :pagination="followingPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
</MkPagination>
</div>
<div v-else-if="tab === 'owned'" class="grwlizim owned">
<div v-else-if="tab === 'owned'">
<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="ownedPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
@ -39,13 +44,17 @@ const featuredPagination = {
endpoint: 'channels/featured' as const,
noPaging: true,
};
const favoritesPagination = {
endpoint: 'channels/my-favorites' as const,
limit: 100,
};
const followingPagination = {
endpoint: 'channels/followed' as const,
limit: 5,
limit: 10,
};
const ownedPagination = {
endpoint: 'channels/owned' as const,
limit: 5,
limit: 10,
};
function create() {
@ -62,10 +71,14 @@ const headerTabs = $computed(() => [{
key: 'featured',
title: i18n.ts._channel.featured,
icon: 'ti ti-comet',
}, {
key: 'favorites',
title: i18n.ts.favorites,
icon: 'ti ti-star',
}, {
key: 'following',
title: i18n.ts._channel.following,
icon: 'ti ti-heart',
icon: 'ti ti-eye',
}, {
key: 'owned',
title: i18n.ts._channel.owned,

2
packages/frontend/src/pages/clip.vue
View file

@ -57,7 +57,7 @@ watch(() => props.clipId, async () => {
immediate: true,
});
provide('currentClipPage', $$(clip));
provide('currentClip', $$(clip));
function favorite() {
os.apiWithDialog('clips/favorite', {

4
packages/frontend/src/pages/favorites.vue
View file

@ -12,7 +12,7 @@
<template #default="{ items }">
<MkDateSeparatedList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false">
<XNote :key="item.id" :note="item.note" :class="$style.note"/>
<MkNote :key="item.id" :note="item.note" :class="$style.note"/>
</MkDateSeparatedList>
</template>
</MkPagination>
@ -22,7 +22,7 @@
<script lang="ts" setup>
import MkPagination from '@/components/MkPagination.vue';
import XNote from '@/components/MkNote.vue';
import MkNote from '@/components/MkNote.vue';
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';

4
packages/frontend/src/pages/note.vue
View file

@ -13,7 +13,7 @@
<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="ti ti-chevron-up"></i></MkButton>
<div class="note _margin _gaps_s">
<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
<XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
<MkNoteDetailed :key="note.id" v-model:note="note" class="note"/>
</div>
<div v-if="clips && clips.length > 0" class="clips _margin">
<div class="title">{{ i18n.ts.clip }}</div>
@ -41,7 +41,7 @@
<script lang="ts" setup>
import { computed, watch } from 'vue';
import * as misskey from 'misskey-js';
import XNoteDetailed from '@/components/MkNoteDetailed.vue';
import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
import MkNotes from '@/components/MkNotes.vue';
import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
import MkButton from '@/components/MkButton.vue';

8
packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
View file

@ -10,8 +10,8 @@
</MkInput>
<MkSwitch v-model="props.modelValue.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
<XNote v-if="note && !props.modelValue.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
<XNoteDetailed v-if="note && props.modelValue.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
<MkNote v-if="note && !props.modelValue.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
<MkNoteDetailed v-if="note && props.modelValue.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
</section>
</XContainer>
</template>
@ -22,8 +22,8 @@ import { watch } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkInput from '@/components/MkInput.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import XNote from '@/components/MkNote.vue';
import XNoteDetailed from '@/components/MkNoteDetailed.vue';
import MkNote from '@/components/MkNote.vue';
import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
import * as os from '@/os';
const props = defineProps<{

2
packages/frontend/src/pages/timeline.vue
View file

@ -83,7 +83,7 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
}
async function chooseChannel(ev: MouseEvent): Promise<void> {
const channels = await os.api('channels/followed', {
const channels = await os.api('channels/my-favorites', {
limit: 100,
});
const items = channels.map(channel => ({

4
packages/frontend/src/pages/user/home.vue
View file

@ -93,7 +93,7 @@
<div class="contents _gaps">
<div v-if="user.pinnedNotes.length > 0" class="_gaps">
<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
<MkNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
</div>
<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
<template v-if="narrow">
@ -115,7 +115,7 @@
import { defineAsyncComponent, computed, onMounted, onUnmounted } from 'vue';
import calcAge from 's-age';
import * as misskey from 'misskey-js';
import XNote from '@/components/MkNote.vue';
import MkNote from '@/components/MkNote.vue';
import MkFollowButton from '@/components/MkFollowButton.vue';
import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
import MkOmit from '@/components/MkOmit.vue';

8
packages/frontend/src/pages/welcome.entrance.b.vue
View file

@ -38,12 +38,12 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { toUnicode } from 'punycode/';
import XTimeline from './welcome.timeline.vue';
import XSigninDialog from '@/components/MkSigninDialog.vue';
import XSignupDialog from '@/components/MkSignupDialog.vue';
import MkButton from '@/components/MkButton.vue';
import XNote from '@/components/MkNote.vue';
import MkNote from '@/components/MkNote.vue';
import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
import XTimeline from './welcome.timeline.vue';
import { host, instanceName } from '@/config';
import * as os from '@/os';
import number from '@/filters/number';
@ -51,7 +51,7 @@ import number from '@/filters/number';
export default defineComponent({
components: {
MkButton,
XNote,
MkNote,
XTimeline,
MkFeaturedPhotos,
},
@ -118,7 +118,7 @@ export default defineComponent({
text: this.$ts.help,
icon: 'ti ti-question-circle',
action: () => {
window.open(`https://misskey-hub.net/help.md`, '_blank');
window.open('https://misskey-hub.net/help.md', '_blank');
},
}], ev.currentTarget ?? ev.target);
},

4
packages/frontend/src/pages/welcome.entrance.c.vue
View file

@ -61,7 +61,7 @@ import { toUnicode } from 'punycode/';
import XSigninDialog from '@/components/MkSigninDialog.vue';
import XSignupDialog from '@/components/MkSignupDialog.vue';
import MkButton from '@/components/MkButton.vue';
import XNote from '@/components/MkNote.vue';
import MkNote from '@/components/MkNote.vue';
import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
import XTimeline from './welcome.timeline.vue';
import { host, instanceName } from '@/config';
@ -71,7 +71,7 @@ import number from '@/filters/number';
export default defineComponent({
components: {
MkButton,
XNote,
MkNote,
MkFeaturedPhotos,
XTimeline,
},