tweak ui
This commit is contained in:
syuilo
parent
b3779875d0
commit
27c056cbbf
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="fdidabkb" :class="{ slim: narrow, thin }" :key="key">
|
<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }" @click="onClick">
|
||||||
<template v-if="info">
|
<template v-if="info">
|
||||||
<div class="titleContainer" @click="showTabsPopup">
|
<div class="titleContainer" @click="showTabsPopup">
|
||||||
<i v-if="info.icon" class="icon" :class="info.icon"></i>
|
<i v-if="info.icon" class="icon" :class="info.icon"></i>
|
||||||
|
|
@ -26,7 +26,10 @@
|
||||||
</template>
|
</template>
|
||||||
<div class="buttons right">
|
<div class="buttons right">
|
||||||
<template v-if="info && info.actions && !narrow">
|
<template v-if="info && info.actions && !narrow">
|
||||||
<button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
|
<template v-for="action in info.actions">
|
||||||
|
<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
|
||||||
|
<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
|
<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -35,10 +38,17 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
|
import * as tinycolor from 'tinycolor2';
|
||||||
import { popupMenu } from '@client/os';
|
import { popupMenu } from '@client/os';
|
||||||
import { url } from '@client/config';
|
import { url } from '@client/config';
|
||||||
|
import { scrollToTop } from '@client/scripts/scroll';
|
||||||
|
import MkButton from '@client/components/ui/button.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
MkButton
|
||||||
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
info: {
|
info: {
|
||||||
required: true
|
required: true
|
||||||
|
|
@ -54,9 +64,9 @@ export default defineComponent({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
bg: null,
|
||||||
narrow: false,
|
narrow: false,
|
||||||
height: 0,
|
height: 0,
|
||||||
key: 0,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -75,13 +85,12 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
|
||||||
info() {
|
|
||||||
this.key++;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
const rawBg = this.info?.bg || 'var(--bg)';
|
||||||
|
const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
||||||
|
bg.setAlpha(0.85);
|
||||||
|
this.bg = bg.toRgbString();
|
||||||
|
|
||||||
if (this.$el.parentElement == null) return;
|
if (this.$el.parentElement == null) return;
|
||||||
this.narrow = this.$el.parentElement.offsetWidth < 500;
|
this.narrow = this.$el.parentElement.offsetWidth < 500;
|
||||||
new ResizeObserver((entries, observer) => {
|
new ResizeObserver((entries, observer) => {
|
||||||
|
|
@ -136,6 +145,10 @@ export default defineComponent({
|
||||||
|
|
||||||
preventDrag(ev) {
|
preventDrag(ev) {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick(ev) {
|
||||||
|
scrollToTop(this.$el, { behavior: 'smooth' });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -145,7 +158,12 @@ export default defineComponent({
|
||||||
.fdidabkb {
|
.fdidabkb {
|
||||||
--height: 60px;
|
--height: 60px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: sticky;
|
||||||
|
top: var(--stickyTop, 0);
|
||||||
|
z-index: 1000;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||||
|
backdrop-filter: var(--blur, blur(15px));
|
||||||
|
|
||||||
&.thin {
|
&.thin {
|
||||||
--height: 50px;
|
--height: 50px;
|
||||||
|
|
@ -198,6 +216,12 @@ export default defineComponent({
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .fullButton {
|
||||||
|
& + .fullButton {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .titleContainer {
|
> .titleContainer {
|
||||||
|
|
@ -13,6 +13,7 @@ import i18n from './global/i18n';
|
||||||
import loading from './global/loading.vue';
|
import loading from './global/loading.vue';
|
||||||
import error from './global/error.vue';
|
import error from './global/error.vue';
|
||||||
import ad from './global/ad.vue';
|
import ad from './global/ad.vue';
|
||||||
|
import header from './global/header.vue';
|
||||||
|
|
||||||
export default function(app: App) {
|
export default function(app: App) {
|
||||||
app.component('I18n', i18n);
|
app.component('I18n', i18n);
|
||||||
|
|
@ -28,4 +29,5 @@ export default function(app: App) {
|
||||||
app.component('MkLoading', loading);
|
app.component('MkLoading', loading);
|
||||||
app.component('MkError', error);
|
app.component('MkError', error);
|
||||||
app.component('MkAd', ad);
|
app.component('MkAd', ad);
|
||||||
|
app.component('MkHeader', header);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@
|
||||||
<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
|
<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="body _flat_">
|
<div class="body _flat_">
|
||||||
<XHeader v-if="!pageInfo?.hide" :info="pageInfo"/>
|
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
|
|
@ -23,7 +22,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import MkModal from '@client/components/ui/modal.vue';
|
import MkModal from '@client/components/ui/modal.vue';
|
||||||
import XHeader from '@client/ui/_common_/header.vue';
|
|
||||||
import { popout } from '@client/scripts/popout';
|
import { popout } from '@client/scripts/popout';
|
||||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||||
import { resolve } from '@client/router';
|
import { resolve } from '@client/router';
|
||||||
|
|
@ -34,7 +32,6 @@ import * as os from '@client/os';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
MkModal,
|
MkModal,
|
||||||
XHeader,
|
|
||||||
},
|
},
|
||||||
|
|
||||||
inject: {
|
inject: {
|
||||||
|
|
|
||||||
|
|
@ -9,14 +9,14 @@
|
||||||
>
|
>
|
||||||
<template #header>
|
<template #header>
|
||||||
<template v-if="pageInfo">
|
<template v-if="pageInfo">
|
||||||
{{ pageInfo.title }}
|
<i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon" style="margin-right: 0.5em;"></i>
|
||||||
|
<span>{{ pageInfo.title }}</span>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<template #headerLeft>
|
<template #headerLeft>
|
||||||
<button v-if="history.length > 0" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
|
<button v-if="history.length > 0" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
|
||||||
</template>
|
</template>
|
||||||
<div class="yrolvcoq _flat_">
|
<div class="yrolvcoq _flat_">
|
||||||
<XHeader :info="pageInfo"/>
|
|
||||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||||
</div>
|
</div>
|
||||||
</XWindow>
|
</XWindow>
|
||||||
|
|
@ -25,7 +25,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import XWindow from '@client/components/ui/window.vue';
|
import XWindow from '@client/components/ui/window.vue';
|
||||||
import XHeader from '@client/ui/_common_/header.vue';
|
|
||||||
import { popout } from '@client/scripts/popout';
|
import { popout } from '@client/scripts/popout';
|
||||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||||
import { resolve } from '@client/router';
|
import { resolve } from '@client/router';
|
||||||
|
|
@ -35,7 +34,6 @@ import * as symbols from '@client/symbols';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
XWindow,
|
XWindow,
|
||||||
XHeader,
|
|
||||||
},
|
},
|
||||||
|
|
||||||
inject: {
|
inject: {
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="_section">
|
<div>
|
||||||
<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
|
<MkHeader :info="header"/>
|
||||||
<section class="_card announcement _gap" v-for="(announcement, i) in items" :key="announcement.id">
|
<div class="_section">
|
||||||
<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
|
<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
|
||||||
<div class="_content">
|
<section class="_card announcement _gap" v-for="(announcement, i) in items" :key="announcement.id">
|
||||||
<Mfm :text="announcement.text"/>
|
<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
|
||||||
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
|
<div class="_content">
|
||||||
</div>
|
<Mfm :text="announcement.text"/>
|
||||||
<div class="_footer" v-if="$i && !announcement.isRead">
|
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
|
||||||
<MkButton @click="read(items, announcement, i)" primary><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
|
</div>
|
||||||
</div>
|
<div class="_footer" v-if="$i && !announcement.isRead">
|
||||||
</section>
|
<MkButton @click="read(items, announcement, i)" primary><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
|
||||||
</MkPagination>
|
</div>
|
||||||
|
</section>
|
||||||
|
</MkPagination>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -35,6 +38,11 @@ export default defineComponent({
|
||||||
icon: 'fas fa-broadcast-tower',
|
icon: 'fas fa-broadcast-tower',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
},
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.announcements,
|
||||||
|
icon: 'fas fa-broadcast-tower',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
endpoint: 'announcements',
|
endpoint: 'announcements',
|
||||||
limit: 10,
|
limit: 10,
|
||||||
|
|
|
||||||
|
|
@ -89,7 +89,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
top() {
|
top() {
|
||||||
scroll(this.$el, 0);
|
scroll(this.$el, { top: 0 });
|
||||||
},
|
},
|
||||||
|
|
||||||
async timetravel() {
|
async timetravel() {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="$style.root">
|
<div>
|
||||||
<XCategory v-if="tab === 'category'"/>
|
<MkHeader :info="header"/>
|
||||||
|
<div :class="$style.root">
|
||||||
|
<XCategory v-if="tab === 'category'"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -22,6 +25,11 @@ export default defineComponent({
|
||||||
icon: 'fas fa-laugh',
|
icon: 'fas fa-laugh',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
})),
|
})),
|
||||||
|
header: computed(() => ({
|
||||||
|
title: this.$ts.customEmojis,
|
||||||
|
icon: 'fas fa-laugh',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
})),
|
||||||
tab: 'category',
|
tab: 'category',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,76 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="lznhrdub _root">
|
<div>
|
||||||
<div>
|
<MkHeader :info="header"/>
|
||||||
<div class="_isolated">
|
|
||||||
<MkInput v-model="query" :debounce="true" type="search">
|
|
||||||
<template #prefix><i class="fas fa-search"></i></template>
|
|
||||||
<template #label>{{ $ts.searchUser }}</template>
|
|
||||||
</MkInput>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
|
<div class="lznhrdub _root">
|
||||||
|
<div>
|
||||||
<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
|
<div class="_isolated">
|
||||||
<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
|
<MkInput v-model="query" :debounce="true" type="search">
|
||||||
<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
|
<template #prefix><i class="fas fa-search"></i></template>
|
||||||
</div>
|
<template #label>{{ $ts.searchUser }}</template>
|
||||||
|
</MkInput>
|
||||||
<template v-if="tag == null">
|
|
||||||
<MkFolder class="_gap" persist-key="explore-pinned-users">
|
|
||||||
<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
|
|
||||||
<XUserList :pagination="pinnedUsers"/>
|
|
||||||
</MkFolder>
|
|
||||||
<MkFolder class="_gap" persist-key="explore-popular-users">
|
|
||||||
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
|
|
||||||
<XUserList :pagination="popularUsers"/>
|
|
||||||
</MkFolder>
|
|
||||||
<MkFolder class="_gap" persist-key="explore-recently-updated-users">
|
|
||||||
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
|
|
||||||
<XUserList :pagination="recentlyUpdatedUsers"/>
|
|
||||||
</MkFolder>
|
|
||||||
<MkFolder class="_gap" persist-key="explore-recently-registered-users">
|
|
||||||
<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
|
|
||||||
<XUserList :pagination="recentlyRegisteredUsers"/>
|
|
||||||
</MkFolder>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
|
|
||||||
<header><span>{{ $ts.exploreFediverse }}</span></header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
|
|
||||||
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
|
|
||||||
|
|
||||||
<div class="vxjfqztj">
|
|
||||||
<MkA v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</MkA>
|
|
||||||
<MkA v-for="tag in tagsRemote" :to="`/explore/tags/${tag.tag}`" :key="'remote:' + tag.tag">{{ tag.tag }}</MkA>
|
|
||||||
</div>
|
</div>
|
||||||
</MkFolder>
|
|
||||||
|
|
||||||
<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
|
<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
|
||||||
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
|
|
||||||
<XUserList :pagination="tagUsers"/>
|
|
||||||
</MkFolder>
|
|
||||||
|
|
||||||
<template v-if="tag == null">
|
<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
|
||||||
<MkFolder class="_gap">
|
<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
|
||||||
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
|
<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
|
||||||
<XUserList :pagination="popularUsersF"/>
|
</div>
|
||||||
|
|
||||||
|
<template v-if="tag == null">
|
||||||
|
<MkFolder class="_gap" persist-key="explore-pinned-users">
|
||||||
|
<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
|
||||||
|
<XUserList :pagination="pinnedUsers"/>
|
||||||
|
</MkFolder>
|
||||||
|
<MkFolder class="_gap" persist-key="explore-popular-users">
|
||||||
|
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
|
||||||
|
<XUserList :pagination="popularUsers"/>
|
||||||
|
</MkFolder>
|
||||||
|
<MkFolder class="_gap" persist-key="explore-recently-updated-users">
|
||||||
|
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
|
||||||
|
<XUserList :pagination="recentlyUpdatedUsers"/>
|
||||||
|
</MkFolder>
|
||||||
|
<MkFolder class="_gap" persist-key="explore-recently-registered-users">
|
||||||
|
<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
|
||||||
|
<XUserList :pagination="recentlyRegisteredUsers"/>
|
||||||
|
</MkFolder>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
|
||||||
|
<header><span>{{ $ts.exploreFediverse }}</span></header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
|
||||||
|
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
|
||||||
|
|
||||||
|
<div class="vxjfqztj">
|
||||||
|
<MkA v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</MkA>
|
||||||
|
<MkA v-for="tag in tagsRemote" :to="`/explore/tags/${tag.tag}`" :key="'remote:' + tag.tag">{{ tag.tag }}</MkA>
|
||||||
|
</div>
|
||||||
</MkFolder>
|
</MkFolder>
|
||||||
<MkFolder class="_gap">
|
|
||||||
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
|
<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
|
||||||
<XUserList :pagination="recentlyUpdatedUsersF"/>
|
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
|
||||||
|
<XUserList :pagination="tagUsers"/>
|
||||||
</MkFolder>
|
</MkFolder>
|
||||||
<MkFolder class="_gap">
|
|
||||||
<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
|
<template v-if="tag == null">
|
||||||
<XUserList :pagination="recentlyRegisteredUsersF"/>
|
<MkFolder class="_gap">
|
||||||
</MkFolder>
|
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
|
||||||
</template>
|
<XUserList :pagination="popularUsersF"/>
|
||||||
|
</MkFolder>
|
||||||
|
<MkFolder class="_gap">
|
||||||
|
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
|
||||||
|
<XUserList :pagination="recentlyUpdatedUsersF"/>
|
||||||
|
</MkFolder>
|
||||||
|
<MkFolder class="_gap">
|
||||||
|
<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
|
||||||
|
<XUserList :pagination="recentlyRegisteredUsersF"/>
|
||||||
|
</MkFolder>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -100,6 +104,10 @@ export default defineComponent({
|
||||||
title: this.$ts.explore,
|
title: this.$ts.explore,
|
||||||
icon: 'fas fa-hashtag'
|
icon: 'fas fa-hashtag'
|
||||||
},
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.explore,
|
||||||
|
icon: 'fas fa-hashtag'
|
||||||
|
},
|
||||||
pinnedUsers: { endpoint: 'pinned-users' },
|
pinnedUsers: { endpoint: 'pinned-users' },
|
||||||
popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
|
popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
|
||||||
state: 'alive',
|
state: 'alive',
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="jmelgwjh">
|
<div>
|
||||||
<div class="body">
|
<MkHeader :info="header"/>
|
||||||
<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
|
<div class="jmelgwjh">
|
||||||
|
<div class="body">
|
||||||
|
<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -25,6 +28,11 @@ export default defineComponent({
|
||||||
icon: 'fas fa-star',
|
icon: 'fas fa-star',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
},
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.favorites,
|
||||||
|
icon: 'fas fa-star',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
endpoint: 'i/favorites',
|
endpoint: 'i/favorites',
|
||||||
limit: 10,
|
limit: 10,
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="_section">
|
<div>
|
||||||
<XNotes class="_content" ref="notes" :pagination="pagination" @before="before" @after="after"/>
|
<MkHeader :info="header"/>
|
||||||
|
<div class="_section">
|
||||||
|
<XNotes class="_content" ref="notes" :pagination="pagination" @before="before" @after="after"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -19,12 +22,18 @@ export default defineComponent({
|
||||||
return {
|
return {
|
||||||
[symbols.PAGE_INFO]: {
|
[symbols.PAGE_INFO]: {
|
||||||
title: this.$ts.featured,
|
title: this.$ts.featured,
|
||||||
icon: 'fas fa-fire-alt'
|
icon: 'fas fa-fire-alt',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.featured,
|
||||||
|
icon: 'fas fa-fire-alt',
|
||||||
|
bg: 'var(--bg)',
|
||||||
},
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
endpoint: 'notes/featured',
|
endpoint: 'notes/featured',
|
||||||
limit: 10,
|
limit: 10,
|
||||||
offsetMode: true
|
offsetMode: true,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,95 +1,98 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="taeiyria">
|
<div>
|
||||||
<div class="query">
|
<MkHeader :info="header"/>
|
||||||
<MkInput v-model="host" :debounce="true" class="">
|
<div class="taeiyria">
|
||||||
<template #prefix><i class="fas fa-search"></i></template>
|
<div class="query">
|
||||||
<template #label>{{ $ts.host }}</template>
|
<MkInput v-model="host" :debounce="true" class="">
|
||||||
</MkInput>
|
<template #prefix><i class="fas fa-search"></i></template>
|
||||||
<div class="_inputSplit">
|
<template #label>{{ $ts.host }}</template>
|
||||||
<MkSelect v-model="state">
|
</MkInput>
|
||||||
<template #label>{{ $ts.state }}</template>
|
<div class="_inputSplit">
|
||||||
<option value="all">{{ $ts.all }}</option>
|
<MkSelect v-model="state">
|
||||||
<option value="federating">{{ $ts.federating }}</option>
|
<template #label>{{ $ts.state }}</template>
|
||||||
<option value="subscribing">{{ $ts.subscribing }}</option>
|
<option value="all">{{ $ts.all }}</option>
|
||||||
<option value="publishing">{{ $ts.publishing }}</option>
|
<option value="federating">{{ $ts.federating }}</option>
|
||||||
<option value="suspended">{{ $ts.suspended }}</option>
|
<option value="subscribing">{{ $ts.subscribing }}</option>
|
||||||
<option value="blocked">{{ $ts.blocked }}</option>
|
<option value="publishing">{{ $ts.publishing }}</option>
|
||||||
<option value="notResponding">{{ $ts.notResponding }}</option>
|
<option value="suspended">{{ $ts.suspended }}</option>
|
||||||
</MkSelect>
|
<option value="blocked">{{ $ts.blocked }}</option>
|
||||||
<MkSelect v-model="sort">
|
<option value="notResponding">{{ $ts.notResponding }}</option>
|
||||||
<template #label>{{ $ts.sort }}</template>
|
</MkSelect>
|
||||||
<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
|
<MkSelect v-model="sort">
|
||||||
<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
|
<template #label>{{ $ts.sort }}</template>
|
||||||
<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
|
<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
|
||||||
<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
|
<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
|
||||||
<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
|
<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
|
||||||
<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
|
<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
|
||||||
<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
|
<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
|
||||||
<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
|
<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
|
||||||
<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
|
<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
|
||||||
<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
|
<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
|
||||||
<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
|
<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
|
||||||
<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
|
<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
|
||||||
<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
|
<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
|
||||||
<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
|
<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
|
||||||
<option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option>
|
<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
|
||||||
<option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option>
|
<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
|
||||||
<option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option>
|
<option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option>
|
||||||
<option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option>
|
<option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option>
|
||||||
</MkSelect>
|
<option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option>
|
||||||
|
<option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option>
|
||||||
|
</MkSelect>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
|
<MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
|
||||||
<div class="dqokceoi">
|
<div class="dqokceoi">
|
||||||
<MkA class="instance" v-for="instance in items" :key="instance.id" :to="`/instance-info/${instance.host}`">
|
<MkA class="instance" v-for="instance in items" :key="instance.id" :to="`/instance-info/${instance.host}`">
|
||||||
<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
|
<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<div class="cell">
|
<div class="cell">
|
||||||
<div class="key">{{ $ts.registeredAt }}</div>
|
<div class="key">{{ $ts.registeredAt }}</div>
|
||||||
<div class="value"><MkTime :time="instance.caughtAt"/></div>
|
<div class="value"><MkTime :time="instance.caughtAt"/></div>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<div class="key">{{ $ts.software }}</div>
|
||||||
|
<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<div class="key">{{ $ts.version }}</div>
|
||||||
|
<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<div class="key">{{ $ts.users }}</div>
|
||||||
|
<div class="value">{{ instance.usersCount }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<div class="key">{{ $ts.notes }}</div>
|
||||||
|
<div class="value">{{ instance.notesCount }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<div class="key">{{ $ts.sent }}</div>
|
||||||
|
<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<div class="key">{{ $ts.received }}</div>
|
||||||
|
<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cell">
|
<div class="footer">
|
||||||
<div class="key">{{ $ts.software }}</div>
|
<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
|
||||||
<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
|
<span class="pubSub">
|
||||||
|
<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
|
||||||
|
<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
|
||||||
|
<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
|
||||||
|
<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
|
||||||
|
</span>
|
||||||
|
<span class="right">
|
||||||
|
<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
|
||||||
|
<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="cell">
|
</MkA>
|
||||||
<div class="key">{{ $ts.version }}</div>
|
</div>
|
||||||
<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
|
</MkPagination>
|
||||||
</div>
|
</div>
|
||||||
<div class="cell">
|
|
||||||
<div class="key">{{ $ts.users }}</div>
|
|
||||||
<div class="value">{{ instance.usersCount }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="cell">
|
|
||||||
<div class="key">{{ $ts.notes }}</div>
|
|
||||||
<div class="value">{{ instance.notesCount }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="cell">
|
|
||||||
<div class="key">{{ $ts.sent }}</div>
|
|
||||||
<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="cell">
|
|
||||||
<div class="key">{{ $ts.received }}</div>
|
|
||||||
<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
|
|
||||||
<span class="pubSub">
|
|
||||||
<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
|
|
||||||
<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
|
|
||||||
<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
|
|
||||||
<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
|
|
||||||
</span>
|
|
||||||
<span class="right">
|
|
||||||
<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
|
|
||||||
<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</MkA>
|
|
||||||
</div>
|
|
||||||
</MkPagination>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -119,6 +122,11 @@ export default defineComponent({
|
||||||
icon: 'fas fa-globe',
|
icon: 'fas fa-globe',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
},
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.federation,
|
||||||
|
icon: 'fas fa-globe',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
},
|
||||||
host: '',
|
host: '',
|
||||||
state: 'federating',
|
state: 'federating',
|
||||||
sort: '+pubSub',
|
sort: '+pubSub',
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,45 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="uqshojas">
|
<div>
|
||||||
<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
|
<MkHeader :info="header"/>
|
||||||
<section class="_card _gap ads" v-for="ad in ads">
|
<div class="uqshojas">
|
||||||
<div class="_content ad">
|
<section class="_card _gap ads" v-for="ad in ads">
|
||||||
<MkAd v-if="ad.url" :specify="ad"/>
|
<div class="_content ad">
|
||||||
<MkInput v-model="ad.url" type="url">
|
<MkAd v-if="ad.url" :specify="ad"/>
|
||||||
<template #label>URL</template>
|
<MkInput v-model="ad.url" type="url">
|
||||||
</MkInput>
|
<template #label>URL</template>
|
||||||
<MkInput v-model="ad.imageUrl">
|
</MkInput>
|
||||||
<template #label>{{ $ts.imageUrl }}</template>
|
<MkInput v-model="ad.imageUrl">
|
||||||
</MkInput>
|
<template #label>{{ $ts.imageUrl }}</template>
|
||||||
<div style="margin: 32px 0;">
|
</MkInput>
|
||||||
<MkRadio v-model="ad.place" value="square">square</MkRadio>
|
<div style="margin: 32px 0;">
|
||||||
<MkRadio v-model="ad.place" value="horizontal">horizontal</MkRadio>
|
<MkRadio v-model="ad.place" value="square">square</MkRadio>
|
||||||
<MkRadio v-model="ad.place" value="horizontal-big">horizontal-big</MkRadio>
|
<MkRadio v-model="ad.place" value="horizontal">horizontal</MkRadio>
|
||||||
|
<MkRadio v-model="ad.place" value="horizontal-big">horizontal-big</MkRadio>
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
<div style="margin: 32px 0;">
|
||||||
|
{{ $ts.priority }}
|
||||||
|
<MkRadio v-model="ad.priority" value="high">{{ $ts.high }}</MkRadio>
|
||||||
|
<MkRadio v-model="ad.priority" value="middle">{{ $ts.middle }}</MkRadio>
|
||||||
|
<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
<MkInput v-model="ad.ratio" type="number">
|
||||||
|
<template #label>{{ $ts.ratio }}</template>
|
||||||
|
</MkInput>
|
||||||
|
<MkInput v-model="ad.expiresAt" type="date">
|
||||||
|
<template #label>{{ $ts.expiration }}</template>
|
||||||
|
</MkInput>
|
||||||
|
<MkTextarea v-model="ad.memo">
|
||||||
|
<template #label>{{ $ts.memo }}</template>
|
||||||
|
</MkTextarea>
|
||||||
|
<div class="buttons">
|
||||||
|
<MkButton class="button" inline @click="save(ad)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
||||||
|
<MkButton class="button" inline @click="remove(ad)" danger><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
</section>
|
||||||
<div style="margin: 32px 0;">
|
</div>
|
||||||
{{ $ts.priority }}
|
|
||||||
<MkRadio v-model="ad.priority" value="high">{{ $ts.high }}</MkRadio>
|
|
||||||
<MkRadio v-model="ad.priority" value="middle">{{ $ts.middle }}</MkRadio>
|
|
||||||
<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
<MkInput v-model="ad.ratio" type="number">
|
|
||||||
<template #label>{{ $ts.ratio }}</template>
|
|
||||||
</MkInput>
|
|
||||||
<MkInput v-model="ad.expiresAt" type="date">
|
|
||||||
<template #label>{{ $ts.expiration }}</template>
|
|
||||||
</MkInput>
|
|
||||||
<MkTextarea v-model="ad.memo">
|
|
||||||
<template #label>{{ $ts.memo }}</template>
|
|
||||||
</MkTextarea>
|
|
||||||
<div class="buttons">
|
|
||||||
<MkButton class="button" inline @click="save(ad)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
|
||||||
<MkButton class="button" inline @click="remove(ad)" danger><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -67,6 +69,17 @@ export default defineComponent({
|
||||||
icon: 'fas fa-audio-description',
|
icon: 'fas fa-audio-description',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
},
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.ads,
|
||||||
|
icon: 'fas fa-audio-description',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
actions: [{
|
||||||
|
asFullButton: true,
|
||||||
|
icon: 'fas fa-plus',
|
||||||
|
text: this.$ts.add,
|
||||||
|
handler: this.add,
|
||||||
|
}],
|
||||||
|
},
|
||||||
ads: [],
|
ads: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,27 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ztgjmzrw">
|
<div>
|
||||||
<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
|
<MkHeader :info="header"/>
|
||||||
<section class="_card _gap announcements" v-for="announcement in announcements">
|
|
||||||
<div class="_content announcement">
|
<div class="ztgjmzrw">
|
||||||
<MkInput v-model="announcement.title">
|
<section class="_card _gap announcements" v-for="announcement in announcements">
|
||||||
<template #label>{{ $ts.title }}</template>
|
<div class="_content announcement">
|
||||||
</MkInput>
|
<MkInput v-model="announcement.title">
|
||||||
<MkTextarea v-model="announcement.text">
|
<template #label>{{ $ts.title }}</template>
|
||||||
<template #label>{{ $ts.text }}</template>
|
</MkInput>
|
||||||
</MkTextarea>
|
<MkTextarea v-model="announcement.text">
|
||||||
<MkInput v-model="announcement.imageUrl">
|
<template #label>{{ $ts.text }}</template>
|
||||||
<template #label>{{ $ts.imageUrl }}</template>
|
</MkTextarea>
|
||||||
</MkInput>
|
<MkInput v-model="announcement.imageUrl">
|
||||||
<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
|
<template #label>{{ $ts.imageUrl }}</template>
|
||||||
<div class="buttons">
|
</MkInput>
|
||||||
<MkButton class="button" inline @click="save(announcement)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
|
||||||
<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
|
<div class="buttons">
|
||||||
|
<MkButton class="button" inline @click="save(announcement)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
||||||
|
<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -46,6 +49,17 @@ export default defineComponent({
|
||||||
icon: 'fas fa-broadcast-tower',
|
icon: 'fas fa-broadcast-tower',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
},
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.announcements,
|
||||||
|
icon: 'fas fa-broadcast-tower',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
actions: [{
|
||||||
|
asFullButton: true,
|
||||||
|
icon: 'fas fa-plus',
|
||||||
|
text: this.$ts.add,
|
||||||
|
handler: this.add,
|
||||||
|
}],
|
||||||
|
},
|
||||||
announcements: [],
|
announcements: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ogwlenmc">
|
<div class="ogwlenmc">
|
||||||
<MkTab v-model="tab">
|
<MkHeader :info="header"/>
|
||||||
<option value="local">{{ $ts.local }}</option>
|
|
||||||
<option value="remote">{{ $ts.remote }}</option>
|
|
||||||
</MkTab>
|
|
||||||
|
|
||||||
<div class="local" v-if="tab === 'local'">
|
<div class="local" v-if="tab === 'local'">
|
||||||
<MkButton primary @click="add" style="margin: var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.addEmoji }}</MkButton>
|
|
||||||
<MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);">
|
<MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);">
|
||||||
<template #prefix><i class="fas fa-search"></i></template>
|
<template #prefix><i class="fas fa-search"></i></template>
|
||||||
<template #label>{{ $ts.search }}</template>
|
<template #label>{{ $ts.search }}</template>
|
||||||
|
|
@ -79,11 +75,27 @@ export default defineComponent({
|
||||||
title: this.$ts.customEmojis,
|
title: this.$ts.customEmojis,
|
||||||
icon: 'fas fa-laugh',
|
icon: 'fas fa-laugh',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
action: {
|
|
||||||
icon: 'fas fa-plus',
|
|
||||||
handler: this.add
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
header: computed(() => ({
|
||||||
|
title: this.$ts.customEmojis,
|
||||||
|
icon: 'fas fa-laugh',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
actions: [{
|
||||||
|
asFullButton: true,
|
||||||
|
icon: 'fas fa-plus',
|
||||||
|
text: this.$ts.addEmoji,
|
||||||
|
handler: this.add,
|
||||||
|
}],
|
||||||
|
tabs: [{
|
||||||
|
active: this.tab === 'local',
|
||||||
|
title: this.$ts.local,
|
||||||
|
onClick: () => { this.tab = 'local'; },
|
||||||
|
}, {
|
||||||
|
active: this.tab === 'remote',
|
||||||
|
title: this.$ts.remote,
|
||||||
|
onClick: () => { this.tab = 'remote'; },
|
||||||
|
},]
|
||||||
|
})),
|
||||||
tab: 'local',
|
tab: 'local',
|
||||||
query: null,
|
query: null,
|
||||||
queryRemote: null,
|
queryRemote: null,
|
||||||
|
|
|
||||||
|
|
@ -79,7 +79,8 @@ export default defineComponent({
|
||||||
setup(props, context) {
|
setup(props, context) {
|
||||||
const indexInfo = {
|
const indexInfo = {
|
||||||
title: i18n.locale.instance,
|
title: i18n.locale.instance,
|
||||||
icon: 'fas fa-cog'
|
icon: 'fas fa-cog',
|
||||||
|
bg: 'var(--bg)',
|
||||||
};
|
};
|
||||||
const INFO = ref(indexInfo);
|
const INFO = ref(indexInfo);
|
||||||
const page = ref(props.initialPage);
|
const page = ref(props.initialPage);
|
||||||
|
|
@ -126,7 +127,7 @@ export default defineComponent({
|
||||||
pageProps.value = {};
|
pageProps.value = {};
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
scroll(el.value, 0);
|
scroll(el.value, { top: 0 });
|
||||||
});
|
});
|
||||||
}, { immediate: true });
|
}, { immediate: true });
|
||||||
|
|
||||||
|
|
@ -234,7 +235,6 @@ export default defineComponent({
|
||||||
> .main {
|
> .main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: auto;
|
|
||||||
--baseContentWidth: 100%;
|
--baseContentWidth: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="lknzcolw">
|
<div class="lknzcolw">
|
||||||
<div class="actions">
|
<MkHeader :info="header"/>
|
||||||
<MkButton inline primary @click="addUser()"><i class="fas fa-plus"></i> {{ $ts.addUser }}</MkButton>
|
|
||||||
<MkButton inline primary @click="lookupUser()"><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="users">
|
<div class="users">
|
||||||
<div class="inputs">
|
<div class="inputs">
|
||||||
|
|
@ -91,10 +88,26 @@ export default defineComponent({
|
||||||
title: this.$ts.users,
|
title: this.$ts.users,
|
||||||
icon: 'fas fa-users',
|
icon: 'fas fa-users',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
action: {
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.users,
|
||||||
|
icon: 'fas fa-users',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
actions: [{
|
||||||
icon: 'fas fa-search',
|
icon: 'fas fa-search',
|
||||||
|
text: this.$ts.search,
|
||||||
handler: this.searchUser
|
handler: this.searchUser
|
||||||
}
|
}, {
|
||||||
|
asFullButton: true,
|
||||||
|
icon: 'fas fa-plus',
|
||||||
|
text: this.$ts.addUser,
|
||||||
|
handler: this.addUser
|
||||||
|
}, {
|
||||||
|
asFullButton: true,
|
||||||
|
icon: 'fas fa-search',
|
||||||
|
text: this.$ts.lookup,
|
||||||
|
handler: this.lookupUser
|
||||||
|
}]
|
||||||
},
|
},
|
||||||
sort: '+createdAt',
|
sort: '+createdAt',
|
||||||
state: 'all',
|
state: 'all',
|
||||||
|
|
@ -173,10 +186,6 @@ export default defineComponent({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.lknzcolw {
|
.lknzcolw {
|
||||||
> .actions {
|
|
||||||
margin: var(--margin);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .users {
|
> .users {
|
||||||
margin: var(--margin);
|
margin: var(--margin);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="_section">
|
<div>
|
||||||
<XNotes class="_content" :pagination="pagination" @before="before()" @after="after()"/>
|
<MkHeader :info="header"/>
|
||||||
|
<div class="_section">
|
||||||
|
<XNotes class="_content" :pagination="pagination" @before="before()" @after="after()"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -19,7 +22,13 @@ export default defineComponent({
|
||||||
return {
|
return {
|
||||||
[symbols.PAGE_INFO]: {
|
[symbols.PAGE_INFO]: {
|
||||||
title: this.$ts.mentions,
|
title: this.$ts.mentions,
|
||||||
icon: 'fas fa-at'
|
icon: 'fas fa-at',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.mentions,
|
||||||
|
icon: 'fas fa-at',
|
||||||
|
bg: 'var(--bg)',
|
||||||
},
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
endpoint: 'notes/mentions',
|
endpoint: 'notes/mentions',
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<XNotes :pagination="pagination" @before="before()" @after="after()"/>
|
<MkHeader :info="header"/>
|
||||||
|
<div>
|
||||||
|
<XNotes :pagination="pagination" @before="before()" @after="after()"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -19,7 +22,13 @@ export default defineComponent({
|
||||||
return {
|
return {
|
||||||
[symbols.PAGE_INFO]: {
|
[symbols.PAGE_INFO]: {
|
||||||
title: this.$ts.directNotes,
|
title: this.$ts.directNotes,
|
||||||
icon: 'fas fa-envelope'
|
icon: 'fas fa-envelope',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.directNotes,
|
||||||
|
icon: 'fas fa-envelope',
|
||||||
|
bg: 'var(--bg)',
|
||||||
},
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
endpoint: 'notes/mentions',
|
endpoint: 'notes/mentions',
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,42 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="yweeujhr _root" v-size="{ max: [400] }">
|
<div>
|
||||||
<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
|
<MkHeader :info="header"/>
|
||||||
|
|
||||||
<div class="history" v-if="messages.length > 0">
|
<div class="yweeujhr _root" v-size="{ max: [400] }">
|
||||||
<MkA v-for="(message, i) in messages"
|
<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
|
||||||
class="message _block"
|
|
||||||
:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
|
<div class="history" v-if="messages.length > 0">
|
||||||
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
|
<MkA v-for="(message, i) in messages"
|
||||||
:data-index="i"
|
class="message _block"
|
||||||
:key="message.id"
|
:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
|
||||||
v-anim="i"
|
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
|
||||||
>
|
:data-index="i"
|
||||||
<div>
|
:key="message.id"
|
||||||
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
|
v-anim="i"
|
||||||
<header v-if="message.groupId">
|
>
|
||||||
<span class="name">{{ message.group.name }}</span>
|
<div>
|
||||||
<MkTime :time="message.createdAt" class="time"/>
|
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
|
||||||
</header>
|
<header v-if="message.groupId">
|
||||||
<header v-else>
|
<span class="name">{{ message.group.name }}</span>
|
||||||
<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
|
<MkTime :time="message.createdAt" class="time"/>
|
||||||
<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
|
</header>
|
||||||
<MkTime :time="message.createdAt" class="time"/>
|
<header v-else>
|
||||||
</header>
|
<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
|
||||||
<div class="body">
|
<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
|
||||||
<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
|
<MkTime :time="message.createdAt" class="time"/>
|
||||||
|
</header>
|
||||||
|
<div class="body">
|
||||||
|
<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</MkA>
|
||||||
</MkA>
|
</div>
|
||||||
|
<div class="_fullinfo" v-if="!fetching && messages.length == 0">
|
||||||
|
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
||||||
|
<div>{{ $ts.noHistory }}</div>
|
||||||
|
</div>
|
||||||
|
<MkLoading v-if="fetching"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="_fullinfo" v-if="!fetching && messages.length == 0">
|
|
||||||
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
|
||||||
<div>{{ $ts.noHistory }}</div>
|
|
||||||
</div>
|
|
||||||
<MkLoading v-if="fetching"/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -56,6 +60,11 @@ export default defineComponent({
|
||||||
icon: 'fas fa-comments',
|
icon: 'fas fa-comments',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
},
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.messaging,
|
||||||
|
icon: 'fas fa-comments',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
},
|
||||||
fetching: true,
|
fetching: true,
|
||||||
moreFetching: false,
|
moreFetching: false,
|
||||||
messages: [],
|
messages: [],
|
||||||
|
|
|
||||||
|
|
@ -284,7 +284,7 @@ const Component = defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
scrollToBottom() {
|
scrollToBottom() {
|
||||||
scroll(this.$el, this.$el.offsetHeight);
|
scroll(this.$el, { top: this.$el.offsetHeight });
|
||||||
},
|
},
|
||||||
|
|
||||||
onIndicatorClick() {
|
onIndicatorClick() {
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="qkcjvfiv">
|
<div>
|
||||||
<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
|
<MkHeader :info="header"/>
|
||||||
|
<div class="qkcjvfiv">
|
||||||
|
<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
|
||||||
|
|
||||||
<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
|
<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
|
||||||
<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
|
<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
|
||||||
<div class="name">{{ list.name }}</div>
|
<div class="name">{{ list.name }}</div>
|
||||||
<MkAvatars :user-ids="list.userIds"/>
|
<MkAvatars :user-ids="list.userIds"/>
|
||||||
</MkA>
|
</MkA>
|
||||||
</MkPagination>
|
</MkPagination>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -31,6 +34,12 @@ export default defineComponent({
|
||||||
[symbols.PAGE_INFO]: {
|
[symbols.PAGE_INFO]: {
|
||||||
title: this.$ts.manageLists,
|
title: this.$ts.manageLists,
|
||||||
icon: 'fas fa-list-ul',
|
icon: 'fas fa-list-ul',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.manageLists,
|
||||||
|
icon: 'fas fa-list-ul',
|
||||||
|
bg: 'var(--bg)',
|
||||||
action: {
|
action: {
|
||||||
icon: 'fas fa-plus',
|
icon: 'fas fa-plus',
|
||||||
handler: this.create
|
handler: this.create
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,37 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-list-page">
|
<div>
|
||||||
<transition name="zoom" mode="out-in">
|
<MkHeader v-if="header" :info="header"/>
|
||||||
<div v-if="list" class="_section">
|
<div class="mk-list-page">
|
||||||
<div class="_content">
|
<transition name="zoom" mode="out-in">
|
||||||
<MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
|
<div v-if="list" class="_section">
|
||||||
<MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
|
<div class="_content">
|
||||||
<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
|
<MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
|
||||||
|
<MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
|
||||||
|
<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</transition>
|
|
||||||
|
|
||||||
<transition name="zoom" mode="out-in">
|
<transition name="zoom" mode="out-in">
|
||||||
<div v-if="list" class="_section members _gap">
|
<div v-if="list" class="_section members _gap">
|
||||||
<div class="_title">{{ $ts.members }}</div>
|
<div class="_title">{{ $ts.members }}</div>
|
||||||
<div class="_content">
|
<div class="_content">
|
||||||
<div class="users">
|
<div class="users">
|
||||||
<div class="user _panel" v-for="user in users" :key="user.id">
|
<div class="user _panel" v-for="user in users" :key="user.id">
|
||||||
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
|
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<MkUserName :user="user" class="name"/>
|
<MkUserName :user="user" class="name"/>
|
||||||
<MkAcct :user="user" class="acct"/>
|
<MkAcct :user="user" class="acct"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
|
<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</transition>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -50,6 +53,10 @@ export default defineComponent({
|
||||||
title: this.list.name,
|
title: this.list.name,
|
||||||
icon: 'fas fa-list-ul',
|
icon: 'fas fa-list-ul',
|
||||||
} : null),
|
} : null),
|
||||||
|
header: computed(() => this.list ? {
|
||||||
|
title: this.list.name,
|
||||||
|
icon: 'fas fa-list-ul',
|
||||||
|
} : null),
|
||||||
list: null,
|
list: null,
|
||||||
users: [],
|
users: [],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="clupoqwt" v-size="{ min: [800] }">
|
<div>
|
||||||
<XNotifications class="notifications" @before="before" @after="after" page/>
|
<MkHeader :info="header"/>
|
||||||
|
<div class="clupoqwt" v-size="{ min: [800] }">
|
||||||
|
<XNotifications class="notifications" @before="before" @after="after" page/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -22,6 +25,11 @@ export default defineComponent({
|
||||||
title: this.$ts.notifications,
|
title: this.$ts.notifications,
|
||||||
icon: 'fas fa-bell',
|
icon: 'fas fa-bell',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.notifications,
|
||||||
|
icon: 'fas fa-bell',
|
||||||
|
bg: 'var(--bg)',
|
||||||
actions: [{
|
actions: [{
|
||||||
text: this.$ts.markAllAsRead,
|
text: this.$ts.markAllAsRead,
|
||||||
icon: 'fas fa-check',
|
icon: 'fas fa-check',
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
<MkHeader :info="header"/>
|
||||||
|
|
||||||
|
<!-- TODO: MkHeaderに統合 -->
|
||||||
<MkTab v-model="tab" v-if="$i">
|
<MkTab v-model="tab" v-if="$i">
|
||||||
<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
|
<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
|
||||||
<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
|
<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
|
||||||
|
|
@ -46,11 +49,17 @@ export default defineComponent({
|
||||||
[symbols.PAGE_INFO]: {
|
[symbols.PAGE_INFO]: {
|
||||||
title: this.$ts.pages,
|
title: this.$ts.pages,
|
||||||
icon: 'fas fa-sticky-note',
|
icon: 'fas fa-sticky-note',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
title: this.$ts.pages,
|
||||||
|
icon: 'fas fa-sticky-note',
|
||||||
|
bg: 'var(--bg)',
|
||||||
actions: [{
|
actions: [{
|
||||||
icon: 'fas fa-plus',
|
icon: 'fas fa-plus',
|
||||||
text: this.$ts.create,
|
text: this.$ts.create,
|
||||||
handler: this.create
|
handler: this.create,
|
||||||
}]
|
}],
|
||||||
},
|
},
|
||||||
tab: 'featured',
|
tab: 'featured',
|
||||||
featuredPagesPagination: {
|
featuredPagesPagination: {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="_section">
|
<div>
|
||||||
<div class="_content">
|
<MkHeader :info="header"/>
|
||||||
<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
|
<div class="_section">
|
||||||
|
<div class="_content">
|
||||||
|
<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -21,7 +24,11 @@ export default defineComponent({
|
||||||
return {
|
return {
|
||||||
[symbols.PAGE_INFO]: {
|
[symbols.PAGE_INFO]: {
|
||||||
title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
|
title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
|
||||||
icon: 'fas fa-search'
|
icon: 'fas fa-search',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
|
||||||
|
icon: 'fas fa-search',
|
||||||
},
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
endpoint: 'notes/search',
|
endpoint: 'notes/search',
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
|
<component :is="component" :key="page" v-bind="pageProps"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -74,16 +74,13 @@ export default defineComponent({
|
||||||
title: i18n.locale.settings,
|
title: i18n.locale.settings,
|
||||||
icon: 'fas fa-cog',
|
icon: 'fas fa-cog',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
hide: true,
|
|
||||||
};
|
};
|
||||||
const INFO = ref(indexInfo);
|
const INFO = ref(indexInfo);
|
||||||
const page = ref(props.initialPage);
|
const page = ref(props.initialPage);
|
||||||
const narrow = ref(false);
|
const narrow = ref(false);
|
||||||
const view = ref(null);
|
const view = ref(null);
|
||||||
const el = ref(null);
|
const el = ref(null);
|
||||||
const onInfo = (viewInfo) => {
|
|
||||||
INFO.value = viewInfo;
|
|
||||||
};
|
|
||||||
const pageProps = ref({});
|
const pageProps = ref({});
|
||||||
const component = computed(() => {
|
const component = computed(() => {
|
||||||
if (page.value == null) return null;
|
if (page.value == null) return null;
|
||||||
|
|
@ -146,7 +143,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
scroll(el.value, 0);
|
scroll(el.value, { top: 0 });
|
||||||
});
|
});
|
||||||
}, { immediate: true });
|
}, { immediate: true });
|
||||||
|
|
||||||
|
|
@ -176,7 +173,6 @@ export default defineComponent({
|
||||||
narrow,
|
narrow,
|
||||||
view,
|
view,
|
||||||
el,
|
el,
|
||||||
onInfo,
|
|
||||||
pageProps,
|
pageProps,
|
||||||
component,
|
component,
|
||||||
emailNotConfigured,
|
emailNotConfigured,
|
||||||
|
|
|
||||||
|
|
@ -78,7 +78,6 @@ export default defineComponent({
|
||||||
title: this.$ts.profile,
|
title: this.$ts.profile,
|
||||||
icon: 'fas fa-user',
|
icon: 'fas fa-user',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
hide: true,
|
|
||||||
},
|
},
|
||||||
host,
|
host,
|
||||||
langs,
|
langs,
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="cmuxhskf" v-hotkey.global="keymap" v-size="{ min: [800] }">
|
<div v-hotkey.global="keymap">
|
||||||
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
|
<MkHeader :info="header"/>
|
||||||
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
|
<div class="cmuxhskf" v-size="{ min: [800] }">
|
||||||
|
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
|
||||||
|
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
|
||||||
|
|
||||||
<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
|
<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
|
||||||
<div class="tl _block">
|
<div class="tl _block">
|
||||||
<XTimeline ref="tl" class="tl"
|
<XTimeline ref="tl" class="tl"
|
||||||
:key="src"
|
:key="src"
|
||||||
:src="src"
|
:src="src"
|
||||||
:sound="true"
|
:sound="true"
|
||||||
@before="before()"
|
@before="before()"
|
||||||
@after="after()"
|
@after="after()"
|
||||||
@queue="queueUpdated"
|
@queue="queueUpdated"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -43,6 +46,11 @@ export default defineComponent({
|
||||||
title: this.$ts.timeline,
|
title: this.$ts.timeline,
|
||||||
icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
|
icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
|
})),
|
||||||
|
header: computed(() => ({
|
||||||
|
title: this.$ts.timeline,
|
||||||
|
icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
|
||||||
|
bg: 'var(--bg)',
|
||||||
actions: [{
|
actions: [{
|
||||||
icon: 'fas fa-list-ul',
|
icon: 'fas fa-list-ul',
|
||||||
text: this.$ts.lists,
|
text: this.$ts.lists,
|
||||||
|
|
@ -129,7 +137,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
top() {
|
top() {
|
||||||
scroll(this.$el, 0);
|
scroll(this.$el, { top: 0 });
|
||||||
},
|
},
|
||||||
|
|
||||||
async chooseList(ev) {
|
async chooseList(ev) {
|
||||||
|
|
|
||||||
|
|
@ -89,7 +89,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
top() {
|
top() {
|
||||||
scroll(this.$el, 0);
|
scroll(this.$el, { top: 0 });
|
||||||
},
|
},
|
||||||
|
|
||||||
settings() {
|
settings() {
|
||||||
|
|
|
||||||
|
|
@ -1,98 +1,117 @@
|
||||||
<template>
|
<template>
|
||||||
<transition name="fade" mode="out-in">
|
<div>
|
||||||
<div class="ftskorzw wide" v-if="user && narrow === false">
|
<MkHeader :info="header"/>
|
||||||
<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
|
<transition name="fade" mode="out-in">
|
||||||
|
<div class="ftskorzw wide" v-if="user && narrow === false">
|
||||||
|
<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
|
||||||
|
|
||||||
<div class="banner-container" :style="style">
|
<div class="banner-container" :style="style">
|
||||||
<div class="banner" ref="banner" :style="style"></div>
|
<div class="banner" ref="banner" :style="style"></div>
|
||||||
</div>
|
|
||||||
<div class="contents">
|
|
||||||
<div class="side _forceContainerFull_">
|
|
||||||
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
|
|
||||||
<div class="name">
|
|
||||||
<MkUserName :user="user" :nowrap="false" class="name"/>
|
|
||||||
<MkAcct :user="user" :detail="true" class="acct"/>
|
|
||||||
</div>
|
|
||||||
<div class="followed" v-if="$i && $i.id != user.id && user.isFollowed"><span>{{ $ts.followsYou }}</span></div>
|
|
||||||
<div class="status">
|
|
||||||
<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
|
|
||||||
<b>{{ number(user.notesCount) }}</b>
|
|
||||||
<span>{{ $ts.notes }}</span>
|
|
||||||
</MkA>
|
|
||||||
<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
|
|
||||||
<b>{{ number(user.followingCount) }}</b>
|
|
||||||
<span>{{ $ts.following }}</span>
|
|
||||||
</MkA>
|
|
||||||
<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
|
|
||||||
<b>{{ number(user.followersCount) }}</b>
|
|
||||||
<span>{{ $ts.followers }}</span>
|
|
||||||
</MkA>
|
|
||||||
</div>
|
|
||||||
<div class="description">
|
|
||||||
<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
|
|
||||||
<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="fields system">
|
|
||||||
<dl class="field" v-if="user.location">
|
|
||||||
<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
|
|
||||||
<dd class="value">{{ user.location }}</dd>
|
|
||||||
</dl>
|
|
||||||
<dl class="field" v-if="user.birthday">
|
|
||||||
<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
|
|
||||||
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
|
|
||||||
</dl>
|
|
||||||
<dl class="field">
|
|
||||||
<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
|
|
||||||
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
<div class="fields" v-if="user.fields.length > 0">
|
|
||||||
<dl class="field" v-for="(field, i) in user.fields" :key="i">
|
|
||||||
<dt class="name">
|
|
||||||
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
|
|
||||||
</dt>
|
|
||||||
<dd class="value">
|
|
||||||
<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
<XActivity :user="user" :key="user.id" class="_gap"/>
|
|
||||||
<XPhotos :user="user" :key="user.id" class="_gap"/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="contents">
|
||||||
<div class="actions">
|
<div class="side _forceContainerFull_">
|
||||||
<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
|
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
|
||||||
<MkFollowButton v-if="!$i || $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
|
<div class="name">
|
||||||
|
<MkUserName :user="user" :nowrap="false" class="name"/>
|
||||||
|
<MkAcct :user="user" :detail="true" class="acct"/>
|
||||||
|
</div>
|
||||||
|
<div class="followed" v-if="$i && $i.id != user.id && user.isFollowed"><span>{{ $ts.followsYou }}</span></div>
|
||||||
|
<div class="status">
|
||||||
|
<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
|
||||||
|
<b>{{ number(user.notesCount) }}</b>
|
||||||
|
<span>{{ $ts.notes }}</span>
|
||||||
|
</MkA>
|
||||||
|
<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
|
||||||
|
<b>{{ number(user.followingCount) }}</b>
|
||||||
|
<span>{{ $ts.following }}</span>
|
||||||
|
</MkA>
|
||||||
|
<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
|
||||||
|
<b>{{ number(user.followersCount) }}</b>
|
||||||
|
<span>{{ $ts.followers }}</span>
|
||||||
|
</MkA>
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
|
||||||
|
<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="fields system">
|
||||||
|
<dl class="field" v-if="user.location">
|
||||||
|
<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
|
||||||
|
<dd class="value">{{ user.location }}</dd>
|
||||||
|
</dl>
|
||||||
|
<dl class="field" v-if="user.birthday">
|
||||||
|
<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
|
||||||
|
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
|
||||||
|
</dl>
|
||||||
|
<dl class="field">
|
||||||
|
<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
|
||||||
|
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
<div class="fields" v-if="user.fields.length > 0">
|
||||||
|
<dl class="field" v-for="(field, i) in user.fields" :key="i">
|
||||||
|
<dt class="name">
|
||||||
|
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
|
||||||
|
</dt>
|
||||||
|
<dd class="value">
|
||||||
|
<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
<XActivity :user="user" :key="user.id" class="_gap"/>
|
||||||
|
<XPhotos :user="user" :key="user.id" class="_gap"/>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="page === 'index'">
|
<div class="main">
|
||||||
<div v-if="user.pinnedNotes.length > 0" class="_gap">
|
<div class="actions">
|
||||||
<XNote v-for="note in user.pinnedNotes" class="note _gap" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
|
<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
|
||||||
|
<MkFollowButton v-if="!$i || $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="_gap">
|
<template v-if="page === 'index'">
|
||||||
<XUserTimeline :user="user"/>
|
<div v-if="user.pinnedNotes.length > 0" class="_gap">
|
||||||
</div>
|
<XNote v-for="note in user.pinnedNotes" class="note _gap" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
|
||||||
</template>
|
</div>
|
||||||
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_gap"/>
|
<div class="_gap">
|
||||||
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_gap"/>
|
<XUserTimeline :user="user"/>
|
||||||
<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
|
</div>
|
||||||
<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
|
</template>
|
||||||
|
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_gap"/>
|
||||||
|
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_gap"/>
|
||||||
|
<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
|
||||||
|
<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
|
||||||
<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
|
<!-- TODO -->
|
||||||
<!-- TODO -->
|
<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
|
||||||
<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
|
<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
|
||||||
<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
|
|
||||||
|
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
|
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
|
||||||
|
|
||||||
<div class="_block main" :key="user.id">
|
<div class="_block main" :key="user.id">
|
||||||
<div class="banner-container" :style="style">
|
<div class="banner-container" :style="style">
|
||||||
<div class="banner" ref="banner" :style="style"></div>
|
<div class="banner" ref="banner" :style="style"></div>
|
||||||
<div class="fade"></div>
|
<div class="fade"></div>
|
||||||
|
<div class="title">
|
||||||
|
<MkUserName class="name" :user="user" :nowrap="true"/>
|
||||||
|
<div class="bottom">
|
||||||
|
<span class="username"><MkAcct :user="user" :detail="true" /></span>
|
||||||
|
<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
|
||||||
|
<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
|
||||||
|
<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
|
||||||
|
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span>
|
||||||
|
<div class="actions" v-if="$i">
|
||||||
|
<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
|
||||||
|
<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<MkUserName class="name" :user="user" :nowrap="true"/>
|
<MkUserName :user="user" :nowrap="false" class="name"/>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<span class="username"><MkAcct :user="user" :detail="true" /></span>
|
<span class="username"><MkAcct :user="user" :detail="true" /></span>
|
||||||
<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
|
<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
|
||||||
|
|
@ -101,92 +120,76 @@
|
||||||
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
|
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span>
|
<div class="description">
|
||||||
<div class="actions" v-if="$i">
|
<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
|
||||||
<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
|
<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
|
||||||
<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="fields system">
|
||||||
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
|
<dl class="field" v-if="user.location">
|
||||||
<div class="title">
|
<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
|
||||||
<MkUserName :user="user" :nowrap="false" class="name"/>
|
<dd class="value">{{ user.location }}</dd>
|
||||||
<div class="bottom">
|
</dl>
|
||||||
<span class="username"><MkAcct :user="user" :detail="true" /></span>
|
<dl class="field" v-if="user.birthday">
|
||||||
<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
|
<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
|
||||||
<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
|
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
|
||||||
<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
|
</dl>
|
||||||
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
|
<dl class="field">
|
||||||
|
<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
|
||||||
|
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
<div class="fields" v-if="user.fields.length > 0">
|
||||||
|
<dl class="field" v-for="(field, i) in user.fields" :key="i">
|
||||||
|
<dt class="name">
|
||||||
|
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
|
||||||
|
</dt>
|
||||||
|
<dd class="value">
|
||||||
|
<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
<div class="status">
|
||||||
|
<MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
|
||||||
|
<b>{{ number(user.notesCount) }}</b>
|
||||||
|
<span>{{ $ts.notes }}</span>
|
||||||
|
</MkA>
|
||||||
|
<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
|
||||||
|
<b>{{ number(user.followingCount) }}</b>
|
||||||
|
<span>{{ $ts.following }}</span>
|
||||||
|
</MkA>
|
||||||
|
<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
|
||||||
|
<b>{{ number(user.followersCount) }}</b>
|
||||||
|
<span>{{ $ts.followers }}</span>
|
||||||
|
</MkA>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="description">
|
|
||||||
<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
|
|
||||||
<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="fields system">
|
|
||||||
<dl class="field" v-if="user.location">
|
|
||||||
<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
|
|
||||||
<dd class="value">{{ user.location }}</dd>
|
|
||||||
</dl>
|
|
||||||
<dl class="field" v-if="user.birthday">
|
|
||||||
<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
|
|
||||||
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
|
|
||||||
</dl>
|
|
||||||
<dl class="field">
|
|
||||||
<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
|
|
||||||
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
<div class="fields" v-if="user.fields.length > 0">
|
|
||||||
<dl class="field" v-for="(field, i) in user.fields" :key="i">
|
|
||||||
<dt class="name">
|
|
||||||
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
|
|
||||||
</dt>
|
|
||||||
<dd class="value">
|
|
||||||
<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
<div class="status">
|
|
||||||
<MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
|
|
||||||
<b>{{ number(user.notesCount) }}</b>
|
|
||||||
<span>{{ $ts.notes }}</span>
|
|
||||||
</MkA>
|
|
||||||
<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
|
|
||||||
<b>{{ number(user.followingCount) }}</b>
|
|
||||||
<span>{{ $ts.following }}</span>
|
|
||||||
</MkA>
|
|
||||||
<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
|
|
||||||
<b>{{ number(user.followersCount) }}</b>
|
|
||||||
<span>{{ $ts.followers }}</span>
|
|
||||||
</MkA>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contents">
|
<div class="contents">
|
||||||
<template v-if="page === 'index'">
|
<template v-if="page === 'index'">
|
||||||
<div>
|
<div>
|
||||||
<div v-if="user.pinnedNotes.length > 0" class="_gap">
|
<div v-if="user.pinnedNotes.length > 0" class="_gap">
|
||||||
<XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
|
<XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
|
||||||
|
</div>
|
||||||
|
<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
|
||||||
|
<XPhotos :user="user" :key="user.id"/>
|
||||||
|
<XActivity :user="user" :key="user.id"/>
|
||||||
</div>
|
</div>
|
||||||
<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
|
<div>
|
||||||
<XPhotos :user="user" :key="user.id"/>
|
<XUserTimeline :user="user"/>
|
||||||
<XActivity :user="user" :key="user.id"/>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<div>
|
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
|
||||||
<XUserTimeline :user="user"/>
|
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
|
||||||
</div>
|
<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
|
||||||
</template>
|
<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
|
||||||
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
|
<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
|
||||||
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
|
</div>
|
||||||
<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
|
|
||||||
<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
|
|
||||||
<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<MkError v-else-if="error" @retry="fetch()"/>
|
||||||
<MkError v-else-if="error" @retry="fetch()"/>
|
<MkLoading v-else/>
|
||||||
<MkLoading v-else/>
|
</transition>
|
||||||
</transition>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -242,6 +245,15 @@ export default defineComponent({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
[symbols.PAGE_INFO]: computed(() => this.user ? {
|
[symbols.PAGE_INFO]: computed(() => this.user ? {
|
||||||
|
icon: 'fas fa-user',
|
||||||
|
title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
|
||||||
|
path: `/@${this.user.username}`,
|
||||||
|
share: {
|
||||||
|
title: this.user.name,
|
||||||
|
},
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
} : null),
|
||||||
|
header: computed(() => this.user ? {
|
||||||
title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
|
title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
|
||||||
subtitle: `@${getAcct(this.user)}`,
|
subtitle: `@${getAcct(this.user)}`,
|
||||||
userName: this.user,
|
userName: this.user,
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
type ScrollBehavior = 'auto' | 'smooth' | 'instant';
|
||||||
|
|
||||||
export function getScrollContainer(el: Element | null): Element | null {
|
export function getScrollContainer(el: Element | null): Element | null {
|
||||||
if (el == null || el.tagName === 'BODY') return null;
|
if (el == null || el.tagName === 'BODY') return null;
|
||||||
const overflow = window.getComputedStyle(el).getPropertyValue('overflow');
|
const overflow = window.getComputedStyle(el).getPropertyValue('overflow');
|
||||||
|
|
@ -45,21 +47,25 @@ export function onScrollBottom(el: Element, cb) {
|
||||||
container.addEventListener('scroll', onScroll, { passive: true });
|
container.addEventListener('scroll', onScroll, { passive: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
export function scroll(el: Element, top: number) {
|
export function scroll(el: Element, options: {
|
||||||
|
top?: number;
|
||||||
|
left?: number;
|
||||||
|
behavior?: ScrollBehavior;
|
||||||
|
}) {
|
||||||
const container = getScrollContainer(el);
|
const container = getScrollContainer(el);
|
||||||
if (container == null) {
|
if (container == null) {
|
||||||
window.scroll({ top: top, behavior: 'instant' });
|
window.scroll(options);
|
||||||
} else {
|
} else {
|
||||||
container.scrollTop = top;
|
container.scroll(options);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function scrollToTop(el: Element) {
|
export function scrollToTop(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
|
||||||
scroll(el, 0);
|
scroll(el, { top: 0, ...options });
|
||||||
}
|
}
|
||||||
|
|
||||||
export function scrollToBottom(el: Element) {
|
export function scrollToBottom(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
|
||||||
scroll(el, 99999); // TODO: ちゃんと計算する
|
scroll(el, { top: 99999, ...options }); // TODO: ちゃんと計算する
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isBottom(el: Element, asobi = 0) {
|
export function isBottom(el: Element, asobi = 0) {
|
||||||
|
|
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
|
|
||||||
<main class="main" @contextmenu.stop="onContextmenu">
|
<main class="main" @contextmenu.stop="onContextmenu">
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<XHeader class="header" :info="pageInfo" :menu="menu" :center="false" @click="onHeaderClick"/>
|
<MkHeader class="header" :info="pageInfo" :menu="menu" :center="false" @click="onHeaderClick"/>
|
||||||
</header>
|
</header>
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
|
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
|
||||||
|
|
@ -101,7 +101,6 @@ import XSidebar from '@client/ui/_common_/sidebar.vue';
|
||||||
import XWidgets from './widgets.vue';
|
import XWidgets from './widgets.vue';
|
||||||
import XCommon from '../_common_/common.vue';
|
import XCommon from '../_common_/common.vue';
|
||||||
import XSide from './side.vue';
|
import XSide from './side.vue';
|
||||||
import XHeader from '../_common_/header.vue';
|
|
||||||
import XHeaderClock from './header-clock.vue';
|
import XHeaderClock from './header-clock.vue';
|
||||||
import * as os from '@client/os';
|
import * as os from '@client/os';
|
||||||
import { router } from '@client/router';
|
import { router } from '@client/router';
|
||||||
|
|
@ -117,7 +116,6 @@ export default defineComponent({
|
||||||
XSidebar,
|
XSidebar,
|
||||||
XWidgets,
|
XWidgets,
|
||||||
XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
|
XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
|
||||||
XHeader,
|
|
||||||
XHeaderClock,
|
XHeaderClock,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mrajymqm _narrow_" v-if="component">
|
<div class="mrajymqm _narrow_" v-if="component">
|
||||||
<header class="header" @contextmenu.prevent.stop="onContextmenu">
|
<header class="header" @contextmenu.prevent.stop="onContextmenu">
|
||||||
<XHeader class="title" :info="pageInfo" :center="false"/>
|
<MkHeader class="title" :info="pageInfo" :center="false"/>
|
||||||
</header>
|
</header>
|
||||||
<component :is="component" v-bind="props" :ref="changePage" class="body _flat_"/>
|
<component :is="component" v-bind="props" :ref="changePage" class="body _flat_"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -9,7 +9,6 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import XHeader from '../_common_/header.vue';
|
|
||||||
import * as os from '@client/os';
|
import * as os from '@client/os';
|
||||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||||
import { resolve } from '@client/router';
|
import { resolve } from '@client/router';
|
||||||
|
|
@ -18,7 +17,6 @@ import * as symbols from '@client/symbols';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
XHeader
|
|
||||||
},
|
},
|
||||||
|
|
||||||
provide() {
|
provide() {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<XHeader :info="pageInfo"/>
|
|
||||||
<router-view v-slot="{ Component }" class="_flat_">
|
<router-view v-slot="{ Component }" class="_flat_">
|
||||||
<transition>
|
<transition>
|
||||||
<keep-alive :include="['timeline']">
|
<keep-alive :include="['timeline']">
|
||||||
|
|
@ -21,7 +20,6 @@
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import XColumn from './column.vue';
|
import XColumn from './column.vue';
|
||||||
import XNotes from '@client/components/notes.vue';
|
import XNotes from '@client/components/notes.vue';
|
||||||
import XHeader from '@client/ui/_common_/header.vue';
|
|
||||||
import { deckStore } from '@client/ui/deck/deck-store';
|
import { deckStore } from '@client/ui/deck/deck-store';
|
||||||
import * as os from '@client/os';
|
import * as os from '@client/os';
|
||||||
import * as symbols from '@client/symbols';
|
import * as symbols from '@client/symbols';
|
||||||
|
|
@ -29,7 +27,6 @@ import * as symbols from '@client/symbols';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
XColumn,
|
XColumn,
|
||||||
XHeader,
|
|
||||||
XNotes
|
XNotes
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<span class="title">{{ pageInfo.title }}</span>
|
<span class="title">{{ pageInfo.title }}</span>
|
||||||
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
|
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
|
||||||
</header>
|
</header>
|
||||||
<XHeader class="pageHeader" :info="pageInfo"/>
|
<MkHeader class="pageHeader" :info="pageInfo"/>
|
||||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -15,7 +15,6 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import XHeader from './_common_/header.vue';
|
|
||||||
import * as os from '@client/os';
|
import * as os from '@client/os';
|
||||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||||
import { resolve } from '@client/router';
|
import { resolve } from '@client/router';
|
||||||
|
|
@ -23,10 +22,6 @@ import { url } from '@client/config';
|
||||||
import * as symbols from '@client/symbols';
|
import * as symbols from '@client/symbols';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
|
||||||
XHeader
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
provide() {
|
||||||
return {
|
return {
|
||||||
navHook: (path) => {
|
navHook: (path) => {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--headerHeight:` + headerHeight + 'px'">
|
<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
|
||||||
<XHeaderMenu v-if="showMenuOnTop"/>
|
<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
|
||||||
|
|
||||||
<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
|
<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
|
||||||
<template v-if="!isMobile">
|
<template v-if="!isMobile">
|
||||||
|
|
@ -13,9 +13,6 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
|
<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
|
||||||
<header class="header" @click="onHeaderClick">
|
|
||||||
<XHeader :info="pageInfo" v-get-size="(w, h) => headerHeight = h" :thin="true"/>
|
|
||||||
</header>
|
|
||||||
<div class="content" :class="{ _flat_: !fullView }">
|
<div class="content" :class="{ _flat_: !fullView }">
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
|
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
|
||||||
|
|
@ -67,7 +64,6 @@ import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
||||||
import XSidebar from './default.sidebar.vue';
|
import XSidebar from './default.sidebar.vue';
|
||||||
import XDrawerSidebar from '@client/ui/_common_/sidebar.vue';
|
import XDrawerSidebar from '@client/ui/_common_/sidebar.vue';
|
||||||
import XCommon from './_common_/common.vue';
|
import XCommon from './_common_/common.vue';
|
||||||
import XHeader from './_common_/header.vue';
|
|
||||||
import * as os from '@client/os';
|
import * as os from '@client/os';
|
||||||
import { menuDef } from '@client/menu';
|
import { menuDef } from '@client/menu';
|
||||||
import * as symbols from '@client/symbols';
|
import * as symbols from '@client/symbols';
|
||||||
|
|
@ -80,7 +76,6 @@ export default defineComponent({
|
||||||
XCommon,
|
XCommon,
|
||||||
XSidebar,
|
XSidebar,
|
||||||
XDrawerSidebar,
|
XDrawerSidebar,
|
||||||
XHeader,
|
|
||||||
XHeaderMenu: defineAsyncComponent(() => import('./default.header.vue')),
|
XHeaderMenu: defineAsyncComponent(() => import('./default.header.vue')),
|
||||||
XWidgets: defineAsyncComponent(() => import('./default.widgets.vue')),
|
XWidgets: defineAsyncComponent(() => import('./default.widgets.vue')),
|
||||||
},
|
},
|
||||||
|
|
@ -88,8 +83,8 @@ export default defineComponent({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pageInfo: null,
|
pageInfo: null,
|
||||||
headerHeight: 0,
|
|
||||||
menuDef: menuDef,
|
menuDef: menuDef,
|
||||||
|
globalHeaderHeight: 0,
|
||||||
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
|
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
|
||||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
||||||
widgetsShowing: false,
|
widgetsShowing: false,
|
||||||
|
|
@ -194,10 +189,6 @@ export default defineComponent({
|
||||||
if (window._scroll) window._scroll();
|
if (window._scroll) window._scroll();
|
||||||
},
|
},
|
||||||
|
|
||||||
onHeaderClick() {
|
|
||||||
window.scroll({ top: 0, behavior: 'smooth' });
|
|
||||||
},
|
|
||||||
|
|
||||||
onContextmenu(e) {
|
onContextmenu(e) {
|
||||||
const isLink = (el: HTMLElement) => {
|
const isLink = (el: HTMLElement) => {
|
||||||
if (el.tagName === 'A') return true;
|
if (el.tagName === 'A') return true;
|
||||||
|
|
@ -282,10 +273,6 @@ export default defineComponent({
|
||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
> .header {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -325,29 +312,6 @@ export default defineComponent({
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
--margin: 12px;
|
--margin: 12px;
|
||||||
|
|
||||||
> .header {
|
|
||||||
position: sticky;
|
|
||||||
z-index: 1000;
|
|
||||||
top: var(--globalHeaderHeight, 0px);
|
|
||||||
-webkit-backdrop-filter: var(--blur, blur(32px));
|
|
||||||
backdrop-filter: var(--blur, blur(32px));
|
|
||||||
background-color: var(--header);
|
|
||||||
border-bottom: solid 0.5px var(--divider);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .content {
|
|
||||||
--stickyTop: calc(var(--globalHeaderHeight, 0px) + var(--headerHeight));
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 850px) {
|
|
||||||
padding-top: var(--headerHeight);
|
|
||||||
|
|
||||||
> .header {
|
|
||||||
position: fixed;
|
|
||||||
width: calc(100% - #{$nav-icon-only-width});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> .widgets {
|
> .widgets {
|
||||||
|
|
@ -369,12 +333,11 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
&.withGlobalHeader {
|
&.withGlobalHeader {
|
||||||
--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
|
|
||||||
|
|
||||||
> .main {
|
> .main {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
border: solid 1px var(--divider);
|
border: solid 1px var(--divider);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
|
--stickyTop: var(--globalHeaderHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .widgets {
|
> .widgets {
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-app" :class="{ wallpaper }" :style="`--headerHeight:` + headerHeight + 'px'">
|
<div class="mk-app" :class="{ wallpaper }">
|
||||||
<XSidebar ref="nav" class="sidebar"/>
|
<XSidebar ref="nav" class="sidebar"/>
|
||||||
|
|
||||||
<div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
|
<div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
|
||||||
<header class="header" ref="header" @click="onHeaderClick" :style="{ background: pageInfo?.bg }">
|
|
||||||
<XHeader v-if="!pageInfo?.hide" :info="pageInfo" v-get-size="(w, h) => headerHeight = h"/>
|
|
||||||
</header>
|
|
||||||
<main ref="main">
|
<main ref="main">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
|
|
@ -58,7 +55,6 @@ import { instanceName } from '@client/config';
|
||||||
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
||||||
import XSidebar from '@client/ui/_common_/sidebar.vue';
|
import XSidebar from '@client/ui/_common_/sidebar.vue';
|
||||||
import XCommon from './_common_/common.vue';
|
import XCommon from './_common_/common.vue';
|
||||||
import XHeader from './_common_/header.vue';
|
|
||||||
import XSide from './default.side.vue';
|
import XSide from './default.side.vue';
|
||||||
import * as os from '@client/os';
|
import * as os from '@client/os';
|
||||||
import { menuDef } from '@client/menu';
|
import { menuDef } from '@client/menu';
|
||||||
|
|
@ -70,7 +66,6 @@ export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
XCommon,
|
XCommon,
|
||||||
XSidebar,
|
XSidebar,
|
||||||
XHeader,
|
|
||||||
XWidgets: defineAsyncComponent(() => import('./universal.widgets.vue')),
|
XWidgets: defineAsyncComponent(() => import('./universal.widgets.vue')),
|
||||||
XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
|
XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
|
||||||
},
|
},
|
||||||
|
|
@ -86,7 +81,6 @@ export default defineComponent({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pageInfo: null,
|
pageInfo: null,
|
||||||
headerHeight: 0,
|
|
||||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
||||||
menuDef: menuDef,
|
menuDef: menuDef,
|
||||||
navHidden: false,
|
navHidden: false,
|
||||||
|
|
@ -152,9 +146,6 @@ export default defineComponent({
|
||||||
adjustUI() {
|
adjustUI() {
|
||||||
const navWidth = this.$refs.nav.$el.offsetWidth;
|
const navWidth = this.$refs.nav.$el.offsetWidth;
|
||||||
this.navHidden = navWidth === 0;
|
this.navHidden = navWidth === 0;
|
||||||
if (this.$refs.contents == null) return;
|
|
||||||
const width = this.$refs.contents.offsetWidth;
|
|
||||||
if (this.$refs.header) this.$refs.header.style.width = `${width}px`;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
showNav() {
|
showNav() {
|
||||||
|
|
@ -184,10 +175,6 @@ export default defineComponent({
|
||||||
if (window._scroll) window._scroll();
|
if (window._scroll) window._scroll();
|
||||||
},
|
},
|
||||||
|
|
||||||
onHeaderClick() {
|
|
||||||
window.scroll({ top: 0, behavior: 'smooth' });
|
|
||||||
},
|
|
||||||
|
|
||||||
onContextmenu(e) {
|
onContextmenu(e) {
|
||||||
const isLink = (el: HTMLElement) => {
|
const isLink = (el: HTMLElement) => {
|
||||||
if (el.tagName === 'A') return true;
|
if (el.tagName === 'A') return true;
|
||||||
|
|
@ -263,22 +250,8 @@ export default defineComponent({
|
||||||
> .contents {
|
> .contents {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
--stickyTop: var(--headerHeight);
|
|
||||||
padding-top: var(--headerHeight);
|
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
|
|
||||||
> .header {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1000;
|
|
||||||
top: 0;
|
|
||||||
//background-color: var(--panel);
|
|
||||||
-webkit-backdrop-filter: var(--blur, blur(32px));
|
|
||||||
backdrop-filter: var(--blur, blur(32px));
|
|
||||||
background-color: var(--header);
|
|
||||||
border-bottom: solid 0.5px var(--divider);
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
> main {
|
> main {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="mk-app">
|
<div class="mk-app">
|
||||||
<div class="contents">
|
<div class="contents">
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<XHeader :info="pageInfo"/>
|
<MkHeader :info="pageInfo"/>
|
||||||
</header>
|
</header>
|
||||||
<main ref="main">
|
<main ref="main">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|
@ -24,14 +24,12 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, defineAsyncComponent } from 'vue';
|
import { defineComponent, defineAsyncComponent } from 'vue';
|
||||||
import { host } from '@client/config';
|
import { host } from '@client/config';
|
||||||
import XHeader from './_common_/header.vue';
|
|
||||||
import XCommon from './_common_/common.vue';
|
import XCommon from './_common_/common.vue';
|
||||||
import * as symbols from '@client/symbols';
|
import * as symbols from '@client/symbols';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
XCommon,
|
XCommon,
|
||||||
XHeader,
|
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue