nanka iroiro (#6847)
* wip * wip * wip * wip * Update ja-JP.yml * wip * wip * wip
This commit is contained in:
syuilo
GitHub
parent
50e917d232
commit
0044d83801
30 changed files with 558 additions and 183 deletions
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<XPostForm :channel="channel" class="post-form _content _panel _vMargin" fixed/>
|
||||
<XPostForm :channel="channel" class="post-form _content _panel _vMargin" fixed v-if="this.$store.getters.isSignedIn"/>
|
||||
|
||||
<XTimeline class="_content _vMargin" src="channel" :channel="channelId" @before="before" @after="after"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,30 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="_section" style="padding: 0;">
|
||||
<MkTab class="_content" v-model:value="tab" :items="[{ label: $t('_channel.featured'), value: 'featured', icon: faFireAlt }, { label: $t('_channel.following'), value: 'following', icon: faHeart }, { label: $t('_channel.owned'), value: 'owned', icon: faEdit }]"/>
|
||||
<div class="_section" style="padding: 0;" v-if="this.$store.getters.isSignedIn">
|
||||
<MkTab class="_content" v-model:value="tab">
|
||||
<option value="featured"><Fa :icon="faFireAlt"/> {{ $t('_channel.featured') }}</option>
|
||||
<option value="following"><Fa :icon="faHeart"/> {{ $t('_channel.following') }}</option>
|
||||
<option value="owned"><Fa :icon="faEdit"/> {{ $t('_channel.owned') }}</option>
|
||||
</MkTab>
|
||||
</div>
|
||||
|
||||
<div class="_section">
|
||||
<div class="_content grwlizim featured" v-if="tab === 'featured'">
|
||||
<MkPagination :pagination="featuredPagination" #default="{items}">
|
||||
<MkChannelPreview v-for="channel in items" class="uveselbe" :channel="channel" :key="channel.id"/>
|
||||
<MkChannelPreview v-for="channel in items" class="_vMargin" :channel="channel" :key="channel.id"/>
|
||||
</MkPagination>
|
||||
</div>
|
||||
|
||||
<div class="_content grwlizim following" v-if="tab === 'following'">
|
||||
<MkPagination :pagination="followingPagination" #default="{items}">
|
||||
<MkChannelPreview v-for="channel in items" class="uveselbe" :channel="channel" :key="channel.id"/>
|
||||
<MkChannelPreview v-for="channel in items" class="_vMargin" :channel="channel" :key="channel.id"/>
|
||||
</MkPagination>
|
||||
</div>
|
||||
|
||||
<div class="_content grwlizim owned" v-if="tab === 'owned'">
|
||||
<MkButton class="new" @click="create()"><Fa :icon="faPlus"/></MkButton>
|
||||
<MkPagination :pagination="ownedPagination" #default="{items}">
|
||||
<MkChannelPreview v-for="channel in items" class="uveselbe" :channel="channel" :key="channel.id"/>
|
||||
<MkChannelPreview v-for="channel in items" class="_vMargin" :channel="channel" :key="channel.id"/>
|
||||
</MkPagination>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,7 +48,11 @@ export default defineComponent({
|
|||
return {
|
||||
INFO: {
|
||||
title: this.$t('channel'),
|
||||
icon: faSatelliteDish
|
||||
icon: faSatelliteDish,
|
||||
action: {
|
||||
icon: faPlus,
|
||||
handler: this.create
|
||||
}
|
||||
},
|
||||
tab: 'featured',
|
||||
featuredPagination: {
|
||||
|
|
@ -69,23 +77,3 @@ export default defineComponent({
|
|||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grwlizim {
|
||||
padding: 16px 0;
|
||||
|
||||
&.my .uveselbe:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.uveselbe:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.uveselbe:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<div class="mk-instance-emojis">
|
||||
<div class="_section" style="padding: 0;">
|
||||
<MkTab v-model:value="tab" :items="[{ label: $t('local'), value: 'local' }, { label: $t('remote'), value: 'remote' }]"/>
|
||||
<MkTab v-model:value="tab">
|
||||
<option value="local">{{ $t('local') }}</option>
|
||||
<option value="remote">{{ $t('remote') }}</option>
|
||||
</MkTab>
|
||||
</div>
|
||||
|
||||
<div class="_section">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div v-if="meta">
|
||||
<section class="_section info">
|
||||
<div v-if="meta" class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faInfoCircle"/> {{ $t('basicInfo') }}</div>
|
||||
<div class="_content">
|
||||
<MkInput v-model:value="name">{{ $t('instanceName') }}</MkInput>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section info">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_content">
|
||||
<MkInput v-model:value="maxNoteTextLength" type="number" :save="() => save()"><template #icon><Fa :icon="faPencilAlt"/></template>{{ $t('maxNoteTextLength') }}</MkInput>
|
||||
</div>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section info">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faUser"/> {{ $t('registration') }}</div>
|
||||
<div class="_content">
|
||||
<MkSwitch v-model:value="enableRegistration" @update:value="save()">{{ $t('enableRegistration') }}</MkSwitch>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faShieldAlt"/> {{ $t('hcaptcha') }}</div>
|
||||
<div class="_content">
|
||||
<MkSwitch v-model:value="enableHcaptcha">{{ $t('enableHcaptcha') }}</MkSwitch>
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faShieldAlt"/> {{ $t('recaptcha') }}</div>
|
||||
<div class="_content">
|
||||
<MkSwitch v-model:value="enableRecaptcha" ref="enableRecaptcha">{{ $t('enableRecaptcha') }}</MkSwitch>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faEnvelope" /> {{ $t('emailConfig') }}</div>
|
||||
<div class="_content">
|
||||
<MkSwitch v-model:value="enableEmail" @update:value="save()">{{ $t('enableEmail') }}<template #desc>{{ $t('emailConfigInfo') }}</template></MkSwitch>
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faBolt"/> {{ $t('serviceworker') }}</div>
|
||||
<div class="_content">
|
||||
<MkSwitch v-model:value="enableServiceWorker">{{ $t('enableServiceworker') }}<template #desc>{{ $t('serviceworkerInfo') }}</template></MkSwitch>
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faThumbtack"/> {{ $t('pinnedUsers') }}</div>
|
||||
<div class="_content">
|
||||
<MkTextarea v-model:value="pinnedUsers">
|
||||
|
|
@ -125,7 +125,19 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faThumbtack"/> {{ $t('pinnedPages') }}</div>
|
||||
<div class="_content">
|
||||
<MkTextarea v-model:value="pinnedPages">
|
||||
<template #desc>{{ $t('pinnedPagesDescription') }}</template>
|
||||
</MkTextarea>
|
||||
</div>
|
||||
<div class="_footer">
|
||||
<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $t('save') }}</MkButton>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faCloud"/> {{ $t('files') }}</div>
|
||||
<div class="_content">
|
||||
<MkSwitch v-model:value="cacheRemoteFiles">{{ $t('cacheRemoteFiles') }}<template #desc>{{ $t('cacheRemoteFilesDescription') }}</template></MkSwitch>
|
||||
|
|
@ -138,7 +150,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faCloud"/> {{ $t('objectStorage') }}</div>
|
||||
<div class="_content">
|
||||
<MkSwitch v-model:value="useObjectStorage">{{ $t('useObjectStorage') }}</MkSwitch>
|
||||
|
|
@ -166,7 +178,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faGhost"/> {{ $t('proxyAccount') }}</div>
|
||||
<div class="_content">
|
||||
<MkInput :value="proxyAccount ? proxyAccount.username : null" disabled><template #prefix>@</template>{{ $t('proxyAccount') }}<template #desc>{{ $t('proxyAccountDescription') }}</template></MkInput>
|
||||
|
|
@ -174,7 +186,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faBan"/> {{ $t('blockedInstances') }}</div>
|
||||
<div class="_content">
|
||||
<MkTextarea v-model:value="blockedHosts">
|
||||
|
|
@ -186,7 +198,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faShareAlt"/> {{ $t('integration') }}</div>
|
||||
<div class="_content">
|
||||
<header><Fa :icon="faTwitter"/> Twitter</header>
|
||||
|
|
@ -220,7 +232,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_section">
|
||||
<section class="_card _vMargin">
|
||||
<div class="_title"><Fa :icon="faArchway" /> Summaly Proxy</div>
|
||||
<div class="_content">
|
||||
<MkInput v-model:value="summalyProxy">URL</MkInput>
|
||||
|
|
@ -260,6 +272,7 @@ export default defineComponent({
|
|||
title: this.$t('instance'),
|
||||
icon: faCog,
|
||||
},
|
||||
meta: null,
|
||||
url,
|
||||
proxyAccount: null,
|
||||
proxyAccountId: null,
|
||||
|
|
@ -269,6 +282,7 @@ export default defineComponent({
|
|||
remoteDriveCapacityMb: 0,
|
||||
blockedHosts: '',
|
||||
pinnedUsers: '',
|
||||
pinnedPages: '',
|
||||
maintainerName: null,
|
||||
maintainerEmail: null,
|
||||
name: null,
|
||||
|
|
@ -323,13 +337,9 @@ export default defineComponent({
|
|||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
meta() {
|
||||
return this.$store.state.instance.meta;
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.meta = await os.api('meta', { detail: true });
|
||||
|
||||
created() {
|
||||
this.name = this.meta.name;
|
||||
this.description = this.meta.description;
|
||||
this.tosUrl = this.meta.tosUrl;
|
||||
|
|
@ -356,6 +366,7 @@ export default defineComponent({
|
|||
this.remoteDriveCapacityMb = this.meta.driveCapacityPerRemoteUserMb;
|
||||
this.blockedHosts = this.meta.blockedHosts.join('\n');
|
||||
this.pinnedUsers = this.meta.pinnedUsers.join('\n');
|
||||
this.pinnedPages = this.meta.pinnedPages.join('\n');
|
||||
this.enableServiceWorker = this.meta.enableServiceWorker;
|
||||
this.swPublicKey = this.meta.swPublickey;
|
||||
this.swPrivateKey = this.meta.swPrivateKey;
|
||||
|
|
@ -506,6 +517,7 @@ export default defineComponent({
|
|||
remoteDriveCapacityMb: parseInt(this.remoteDriveCapacityMb, 10),
|
||||
blockedHosts: this.blockedHosts.split('\n') || [],
|
||||
pinnedUsers: this.pinnedUsers ? this.pinnedUsers.split('\n') : [],
|
||||
pinnedPages: this.pinnedPages ? this.pinnedPages.split('\n') : [],
|
||||
enableServiceWorker: this.enableServiceWorker,
|
||||
swPublicKey: this.swPublicKey,
|
||||
swPrivateKey: this.swPrivateKey,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div class="">
|
||||
<div class="_section" style="padding: 0;">
|
||||
<MkTab v-model:value="tab" :items="[{ label: $t('ownedGroups'), value: 'owned' }, { label: $t('joinedGroups'), value: 'joined' }, { label: $t('invites'), icon: faEnvelopeOpenText, value: 'invites' }]"/>
|
||||
<MkTab v-model:value="tab">
|
||||
<option value="owned">{{ $t('ownedGroups') }}</option>
|
||||
<option value="joined">{{ $t('joinedGroups') }}</option>
|
||||
<option value="invites"><Fa :icon="faEnvelopeOpenText"/> {{ $t('invites') }}</option>
|
||||
</MkTab>
|
||||
</div>
|
||||
|
||||
<div class="_section">
|
||||
|
|
|
|||
|
|
@ -1,21 +1,31 @@
|
|||
<template>
|
||||
<div class="fcuexfpr">
|
||||
<div v-if="note" class="note">
|
||||
<div class="_section">
|
||||
<XNotes v-if="showNext" class="_content" :pagination="next"/>
|
||||
<MkButton v-else-if="hasNext" class="load _content" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
|
||||
<div class="_section" v-if="showNext">
|
||||
<XNotes class="_content" :pagination="next"/>
|
||||
</div>
|
||||
|
||||
<div class="_section">
|
||||
<div class="_content">
|
||||
<div class="_section main">
|
||||
<MkButton v-if="!showNext && hasNext" class="load next _content" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
|
||||
<div class="_content _vMargin">
|
||||
<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_vMargin"/>
|
||||
<XNote v-model:note="note" :key="note.id" :detail="true" class="_vMargin"/>
|
||||
</div>
|
||||
<div class="_content clips _vMargin" v-if="clips && clips.length > 0">
|
||||
<div class="title">{{ $t('clip') }}</div>
|
||||
<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _vMargin">
|
||||
<b>{{ item.name }}</b>
|
||||
<div v-if="item.description" class="description">{{ item.description }}</div>
|
||||
<div class="user">
|
||||
<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/>
|
||||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
<MkButton v-if="!showPrev && hasPrev" class="load prev _content" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
|
||||
</div>
|
||||
|
||||
<div class="_section">
|
||||
<XNotes v-if="showPrev" class="_content" :pagination="prev"/>
|
||||
<MkButton v-else-if="hasPrev" class="load _content" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
|
||||
<div class="_section" v-if="showPrev">
|
||||
<XNotes class="_content" :pagination="prev"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -28,7 +38,6 @@
|
|||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
|
||||
import Progress from '@/scripts/loading';
|
||||
import XNote from '@/components/note.vue';
|
||||
import XNotes from '@/components/notes.vue';
|
||||
import MkRemoteCaution from '@/components/remote-caution.vue';
|
||||
|
|
@ -55,6 +64,7 @@ export default defineComponent({
|
|||
avatar: this.note.user,
|
||||
} : null),
|
||||
note: null,
|
||||
clips: null,
|
||||
hasPrev: false,
|
||||
hasNext: false,
|
||||
showPrev: false,
|
||||
|
|
@ -88,11 +98,13 @@ export default defineComponent({
|
|||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Progress.start();
|
||||
os.api('notes/show', {
|
||||
noteId: this.noteId
|
||||
}).then(note => {
|
||||
Promise.all([
|
||||
os.api('notes/clips', {
|
||||
noteId: note.id,
|
||||
}),
|
||||
os.api('users/notes', {
|
||||
userId: note.userId,
|
||||
untilId: note.id,
|
||||
|
|
@ -103,15 +115,14 @@ export default defineComponent({
|
|||
sinceId: note.id,
|
||||
limit: 1,
|
||||
}),
|
||||
]).then(([prev, next]) => {
|
||||
]).then(([clips, prev, next]) => {
|
||||
this.clips = clips;
|
||||
this.hasPrev = prev.length !== 0;
|
||||
this.hasNext = next.length !== 0;
|
||||
this.note = note;
|
||||
});
|
||||
}).catch(e => {
|
||||
this.error = e;
|
||||
}).finally(() => {
|
||||
Progress.done();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -121,10 +132,46 @@ export default defineComponent({
|
|||
<style lang="scss" scoped>
|
||||
.fcuexfpr {
|
||||
> .note {
|
||||
> ._section {
|
||||
> .main {
|
||||
> .load {
|
||||
min-width: 0;
|
||||
border-radius: 999px;
|
||||
|
||||
&.next {
|
||||
margin-bottom: var(--margin);
|
||||
}
|
||||
|
||||
&.prev {
|
||||
margin-top: var(--margin);
|
||||
}
|
||||
}
|
||||
|
||||
> .clips {
|
||||
> .title {
|
||||
font-weight: bold;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
> .item {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
|
||||
> .description {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
> .user {
|
||||
$height: 32px;
|
||||
padding-top: 16px;
|
||||
border-top: solid 1px var(--divider);
|
||||
line-height: $height;
|
||||
|
||||
> .avatar {
|
||||
width: $height;
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -277,7 +277,7 @@ export default defineComponent({
|
|||
type: 'success',
|
||||
text: this.$t('_pages.created')
|
||||
});
|
||||
this.$router.push(`/my/pages/edit/${this.pageId}`);
|
||||
this.$router.push(`/pages/edit/${this.pageId}`);
|
||||
}).catch(onError);
|
||||
}
|
||||
},
|
||||
|
|
@ -296,7 +296,7 @@ export default defineComponent({
|
|||
type: 'success',
|
||||
text: this.$t('_pages.deleted')
|
||||
});
|
||||
this.$router.push(`/my/pages`);
|
||||
this.$router.push(`/pages`);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="_content">
|
||||
<MkA :to="`./${page.name}/view-source`" class="link">{{ $t('_pages.viewSource') }}</MkA>
|
||||
<template v-if="$store.getters.isSignedIn && $store.state.i.id === page.userId">
|
||||
<MkA :to="`/my/pages/edit/${page.id}`" class="link">{{ $t('_pages.editThisPage') }}</MkA>
|
||||
<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $t('_pages.editThisPage') }}</MkA>
|
||||
<button v-if="$store.state.i.pinnedPageId === page.id" @click="pin(false)" class="link _textButton">{{ $t('unpin') }}</button>
|
||||
<button v-else @click="pin(true)" class="link _textButton">{{ $t('pin') }}</button>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<MkTab v-model:value="tab" :items="[{ label: $t('_pages.my'), value: 'my', icon: faEdit }, { label: $t('_pages.liked'), value: 'liked', icon: faHeart }]"/>
|
||||
<MkTab v-model:value="tab" v-if="this.$store.getters.isSignedIn">
|
||||
<option value="featured"><Fa :icon="faFireAlt"/> {{ $t('_pages.featured') }}</option>
|
||||
<option value="my"><Fa :icon="faEdit"/> {{ $t('_pages.my') }}</option>
|
||||
<option value="liked"><Fa :icon="faHeart"/> {{ $t('_pages.liked') }}</option>
|
||||
</MkTab>
|
||||
|
||||
<div class="_section">
|
||||
<div class="rknalgpo _content" v-if="tab === 'featured'">
|
||||
<MkPagination :pagination="featuredPagesPagination" #default="{items}">
|
||||
<MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
|
||||
</MkPagination>
|
||||
</div>
|
||||
|
||||
<div class="rknalgpo _content my" v-if="tab === 'my'">
|
||||
<MkButton class="new" @click="create()"><Fa :icon="faPlus"/></MkButton>
|
||||
<MkPagination :pagination="myPagesPagination" #default="{items}">
|
||||
|
|
@ -21,7 +31,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { faPlus, faEdit } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faPlus, faEdit, faFireAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faStickyNote, faHeart } from '@fortawesome/free-regular-svg-icons';
|
||||
import MkPagePreview from '@/components/page-preview.vue';
|
||||
import MkPagination from '@/components/ui/pagination.vue';
|
||||
|
|
@ -42,7 +52,11 @@ export default defineComponent({
|
|||
handler: this.create
|
||||
}
|
||||
},
|
||||
tab: 'my',
|
||||
tab: 'featured',
|
||||
featuredPagesPagination: {
|
||||
endpoint: 'pages/featured',
|
||||
noPaging: true,
|
||||
},
|
||||
myPagesPagination: {
|
||||
endpoint: 'i/pages',
|
||||
limit: 5,
|
||||
|
|
@ -51,12 +65,12 @@ export default defineComponent({
|
|||
endpoint: 'i/page-likes',
|
||||
limit: 5,
|
||||
},
|
||||
faStickyNote, faPlus, faEdit, faHeart
|
||||
faStickyNote, faPlus, faEdit, faHeart, faFireAlt
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
create() {
|
||||
this.$router.push(`/my/pages/new`);
|
||||
this.$router.push(`/pages/new`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<section class="rrfwjxfl _section">
|
||||
<MkTab v-model:value="tab" :items="[{ label: $t('mutedUsers'), value: 'mute' }, { label: $t('blockedUsers'), value: 'block' }]" style="margin-bottom: var(--margin);"/>
|
||||
<MkTab v-model:value="tab" style="margin-bottom: var(--margin);">
|
||||
<option value="mute">{{ $t('mutedUsers') }}</option>
|
||||
<option value="block">{{ $t('blockedUsers') }}</option>
|
||||
</MkTab>
|
||||
<div class="_content" v-if="tab === 'mute'">
|
||||
<MkPagination :pagination="mutingPagination" class="muting">
|
||||
<template #empty><MkInfo>{{ $t('noUsers') }}</MkInfo></template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<div class="_section">
|
||||
<div class="_card">
|
||||
<MkTab v-model:value="tab" :items="[{ label: $t('_wordMute.soft'), value: 'soft' }, { label: $t('_wordMute.hard'), value: 'hard' }]"/>
|
||||
<MkTab v-model:value="tab">
|
||||
<option value="soft">{{ $t('_wordMute.soft') }}</option>
|
||||
<option value="hard">{{ $t('_wordMute.hard') }}</option>
|
||||
</MkTab>
|
||||
<div class="_content">
|
||||
<div v-show="tab === 'soft'">
|
||||
<MkInfo>{{ $t('_wordMute.softDescription') }}</MkInfo>
|
||||
|
|
|
|||
141
src/client/pages/welcome.entrance.block.vue
Normal file
141
src/client/pages/welcome.entrance.block.vue
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div class="xyeqzsjl _panel">
|
||||
<header>
|
||||
<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
|
||||
<XHeader class="title" :info="pageInfo" :with-back="false"/>
|
||||
</header>
|
||||
<div>
|
||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
|
||||
import XWindow from '@/components/ui/window.vue';
|
||||
import XHeader from '@/ui/_common_/header.vue';
|
||||
import { popout } from '@/scripts/popout';
|
||||
import { resolve } from '@/router';
|
||||
import { url } from '@/config';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XWindow,
|
||||
XHeader,
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
navHook: (path) => {
|
||||
this.navigate(path);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
initialPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
pageInfo: null,
|
||||
path: this.initialPath,
|
||||
component: null,
|
||||
props: null,
|
||||
history: [],
|
||||
faChevronLeft,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
url(): string {
|
||||
return url + this.path;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
const { component, props } = resolve(this.initialPath);
|
||||
this.component = component;
|
||||
this.props = props;
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(page) {
|
||||
if (page == null) return;
|
||||
if (page.INFO) {
|
||||
this.pageInfo = page.INFO;
|
||||
}
|
||||
},
|
||||
|
||||
navigate(path, record = true) {
|
||||
if (record) this.history.push(this.path);
|
||||
this.path = path;
|
||||
const { component, props } = resolve(path);
|
||||
this.component = component;
|
||||
this.props = props;
|
||||
},
|
||||
|
||||
back() {
|
||||
this.navigate(this.history.pop(), false);
|
||||
},
|
||||
|
||||
expand() {
|
||||
this.$router.push(this.path);
|
||||
this.$refs.window.close();
|
||||
},
|
||||
|
||||
popout() {
|
||||
popout(this.path, this.$el);
|
||||
this.$refs.window.close();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.xyeqzsjl {
|
||||
--section-padding: 16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
contain: content;
|
||||
|
||||
> header {
|
||||
$height: 50px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: $height;
|
||||
line-height: $height;
|
||||
box-shadow: 0px 1px var(--divider);
|
||||
|
||||
> button {
|
||||
height: $height;
|
||||
width: $height;
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
line-height: $height;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +1,13 @@
|
|||
<template>
|
||||
<div class="rsqzvsbo">
|
||||
<div class="_section">
|
||||
<div class="_content _panel about" v-if="meta">
|
||||
<div class="body">
|
||||
<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
|
||||
<MkButton @click="signup()" style="display: inline-block; margin-right: 16px;" primary>{{ $t('signup') }}</MkButton>
|
||||
<MkButton @click="signin()" style="display: inline-block;">{{ $t('login') }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rsqzvsbo _section" v-if="meta">
|
||||
<div class="about">
|
||||
<h1>{{ instanceName }}</h1>
|
||||
<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
|
||||
<MkButton @click="signup()" style="display: inline-block; margin-right: 16px;" primary>{{ $t('signup') }}</MkButton>
|
||||
<MkButton @click="signin()" style="display: inline-block;">{{ $t('login') }}</MkButton>
|
||||
</div>
|
||||
<div class="_section">
|
||||
<div class="_content">
|
||||
<XNotes :pagination="featuredPagination"/>
|
||||
</div>
|
||||
<div class="blocks">
|
||||
<XBlock class="block" v-for="path in meta.pinnedPages" :initial-path="path" :key="path"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -24,33 +19,30 @@ import XSigninDialog from '@/components/signin-dialog.vue';
|
|||
import XSignupDialog from '@/components/signup-dialog.vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import XNotes from '@/components/notes.vue';
|
||||
import { host } from '@/config';
|
||||
import XBlock from './welcome.entrance.block.vue';
|
||||
import { host, instanceName } from '@/config';
|
||||
import * as os from '@/os';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
XNotes,
|
||||
XBlock,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
featuredPagination: {
|
||||
endpoint: 'notes/featured',
|
||||
limit: 10,
|
||||
noPaging: true,
|
||||
},
|
||||
host: toUnicode(host),
|
||||
instanceName,
|
||||
meta: null,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
meta() {
|
||||
return this.$store.state.instance.meta;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
os.api('meta', { detail: true }).then(meta => {
|
||||
this.meta = meta;
|
||||
});
|
||||
|
||||
os.api('stats').then(stats => {
|
||||
this.stats = stats;
|
||||
});
|
||||
|
|
@ -74,15 +66,42 @@ export default defineComponent({
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.rsqzvsbo {
|
||||
> ._section {
|
||||
> .about {
|
||||
> .body {
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
> .about {
|
||||
display: inline-block;
|
||||
padding: 24px;
|
||||
margin-bottom: var(--margin);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--radius);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
min-width: 300px;
|
||||
max-width: 800px;
|
||||
|
||||
&, * {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .blocks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
grid-gap: var(--margin);
|
||||
text-align: left;
|
||||
|
||||
> .block {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { defineComponent } from 'vue';
|
|||
import XSetup from './welcome.setup.vue';
|
||||
import XEntrance from './welcome.entrance.vue';
|
||||
import { instanceName } from '@/config';
|
||||
import * as os from '@/os';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -20,16 +21,17 @@ export default defineComponent({
|
|||
data() {
|
||||
return {
|
||||
INFO: {
|
||||
title: instanceName || 'Misskey',
|
||||
title: instanceName,
|
||||
icon: null
|
||||
},
|
||||
meta: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
meta() {
|
||||
return this.$store.state.instance.meta;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
os.api('meta', { detail: true }).then(meta => {
|
||||
this.meta = meta;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue