OpenSource/Sharkey
OpenSource/Sharkey
1
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey.git synced 2024-12-13 17:30:45 +01:00
Code Issues Projects Releases Packages Wiki Activity

refactor clinet

Browse source
This commit is contained in:
syuilo 2021-10-24 04:03:07 +09:00
parent 4d1c723496
commit 4f04421cb3
33 changed files with 745 additions and 843 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/client/components/global/header.vue
View file

@ -2,8 +2,8 @@
<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el"> <div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
<template v-if="info"> <template v-if="info">
<div class="titleContainer" @click="showTabsPopup" v-if="!hideTitle"> <div class="titleContainer" @click="showTabsPopup" v-if="!hideTitle">
<i v-if="info.icon" class="icon" :class="info.icon"></i> <MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/> <i v-else-if="info.icon" class="icon" :class="info.icon"></i>
<div class="title"> <div class="title">
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/> <MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
@ -162,11 +162,6 @@ export default defineComponent({
onUnmounted(() => { onUnmounted(() => {
ro.disconnect(); ro.disconnect();
}); });
setTimeout(() => {
const currentStickyTop = getComputedStyle(el.value.parentElement).getPropertyValue('--stickyTop') || '0px';
el.value.style.setProperty('--stickyTop', currentStickyTop);
el.value.parentElement.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${el.value.offsetHeight}px)`);
}, 100); // レンダリング順序の関係で親のstickyTopの設定が少し遅れることがあるため
} }
}); });

74
src/client/components/global/sticky-container.vue Normal file
View file

@ -0,0 +1,74 @@
<template>
<div ref="rootEl">
<slot name="header"></slot>
<div ref="bodyEl">
<slot></slot>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
export default defineComponent({
props: {
autoSticky: {
type: Boolean,
required: false,
default: false,
},
},
setup(props, context) {
const rootEl = ref<HTMLElement>(null);
const bodyEl = ref<HTMLElement>(null);
const calc = () => {
const currentStickyTop = getComputedStyle(rootEl.value).getPropertyValue('--stickyTop') || '0px';
const header = rootEl.value.children[0];
if (header === bodyEl.value) {
bodyEl.value.style.setProperty('--stickyTop', currentStickyTop);
} else {
bodyEl.value.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
if (props.autoSticky) {
header.style.setProperty('--stickyTop', currentStickyTop);
header.style.position = 'sticky';
header.style.top = 'var(--stickyTop)';
header.style.zIndex = '1';
}
}
};
onMounted(() => {
calc();
const observer = new MutationObserver(() => {
setTimeout(() => {
calc();
}, 100);
});
observer.observe(rootEl.value, {
attributes: false,
childList: true,
subtree: false,
});
onUnmounted(() => {
observer.disconnect();
});
});
return {
rootEl,
bodyEl,
};
},
});
</script>
<style lang="scss" module>
</style>

2
src/client/components/index.ts
View file

@ -15,6 +15,7 @@ import error from './global/error.vue';
import ad from './global/ad.vue'; import ad from './global/ad.vue';
import header from './global/header.vue'; import header from './global/header.vue';
import spacer from './global/spacer.vue'; import spacer from './global/spacer.vue';
import stickyContainer from './global/sticky-container.vue';
export default function(app: App) { export default function(app: App) {
app.component('I18n', i18n); app.component('I18n', i18n);
@ -32,4 +33,5 @@ export default function(app: App) {
app.component('MkAd', ad); app.component('MkAd', ad);
app.component('MkHeader', header); app.component('MkHeader', header);
app.component('MkSpacer', spacer); app.component('MkSpacer', spacer);
app.component('MkStickyContainer', stickyContainer);
} }

3
src/client/components/modal-page-window.vue
View file

@ -11,9 +11,12 @@
<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"> <div class="body">
<MkStickyContainer>
<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
<keep-alive> <keep-alive>
<component :is="component" v-bind="props" :ref="changePage"/> <component :is="component" v-bind="props" :ref="changePage"/>
</keep-alive> </keep-alive>
</MkStickyContainer>
</div> </div>
</div> </div>
</MkModal> </MkModal>

3
src/client/components/page-window.vue
View file

@ -17,7 +17,10 @@
<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button> <button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
</template> </template>
<div class="yrolvcoq"> <div class="yrolvcoq">
<MkStickyContainer>
<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
<component :is="component" v-bind="props" :ref="changePage"/> <component :is="component" v-bind="props" :ref="changePage"/>
</MkStickyContainer>
</div> </div>
</XWindow> </XWindow>
</template> </template>

8
src/client/pages/admin/ads.vue
View file

@ -1,6 +1,4 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="uqshojas"> <div class="uqshojas">
<section class="_card _gap ads" v-for="ad in ads"> <section class="_card _gap ads" v-for="ad in ads">
<div class="_content ad"> <div class="_content ad">
@ -40,7 +38,6 @@
</div> </div>
</section> </section>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -68,11 +65,6 @@ export default defineComponent({
title: this.$ts.ads, title: this.$ts.ads,
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: [{ actions: [{
asFullButton: true, asFullButton: true,
icon: 'fas fa-plus', icon: 'fas fa-plus',

9
src/client/pages/admin/announcements.vue
View file

@ -1,7 +1,4 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="ztgjmzrw"> <div class="ztgjmzrw">
<section class="_card _gap announcements" v-for="announcement in announcements"> <section class="_card _gap announcements" v-for="announcement in announcements">
<div class="_content announcement"> <div class="_content announcement">
@ -22,7 +19,6 @@
</div> </div>
</section> </section>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -48,11 +44,6 @@ export default defineComponent({
title: this.$ts.announcements, title: this.$ts.announcements,
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: [{ actions: [{
asFullButton: true, asFullButton: true,
icon: 'fas fa-plus', icon: 'fas fa-plus',

9
src/client/pages/admin/emojis.vue
View file

@ -1,7 +1,5 @@
<template> <template>
<div class="ogwlenmc"> <div class="ogwlenmc">
<MkHeader :info="header"/>
<div class="local" v-if="tab === 'local'"> <div class="local" v-if="tab === 'local'">
<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>
@ -71,12 +69,7 @@ export default defineComponent({
data() { data() {
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.customEmojis,
icon: 'fas fa-laugh',
bg: 'var(--bg)',
},
header: computed(() => ({
title: this.$ts.customEmojis, title: this.$ts.customEmojis,
icon: 'fas fa-laugh', icon: 'fas fa-laugh',
bg: 'var(--bg)', bg: 'var(--bg)',

14
src/client/pages/admin/index.vue
View file

@ -13,7 +13,10 @@
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu> <MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
</div> </div>
<div class="main"> <div class="main">
<MkStickyContainer>
<template #header><MkHeader v-if="childInfo && !childInfo.hideHeader" :info="childInfo"/></template>
<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/> <component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
</MkStickyContainer>
</div> </div>
</div> </div>
</template> </template>
@ -41,6 +44,10 @@ export default defineComponent({
MkInfo, MkInfo,
}, },
provide: {
shouldOmitHeaderTitle: false,
},
props: { props: {
initialPage: { initialPage: {
type: String, type: String,
@ -50,17 +57,19 @@ export default defineComponent({
setup(props, context) { setup(props, context) {
const indexInfo = { const indexInfo = {
title: i18n.locale.instance, title: i18n.locale.controlPanel,
icon: 'fas fa-cog', icon: 'fas fa-cog',
bg: 'var(--bg)', bg: 'var(--bg)',
hideHeader: true,
}; };
const INFO = ref(indexInfo); const INFO = ref(indexInfo);
const childInfo = ref(null);
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) => { const onInfo = (viewInfo) => {
INFO.value = viewInfo; childInfo.value = viewInfo;
}; };
const pageProps = ref({}); const pageProps = ref({});
@ -315,6 +324,7 @@ export default defineComponent({
view, view,
el, el,
onInfo, onInfo,
childInfo,
pageProps, pageProps,
component, component,
invite, invite,

8
src/client/pages/admin/overview.vue
View file

@ -1,7 +1,4 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="edbbcaef" v-size="{ max: [740] }"> <div class="edbbcaef" v-size="{ max: [740] }">
<div v-if="stats" class="cfcdecdf" style="margin: var(--margin)"> <div v-if="stats" class="cfcdecdf" style="margin: var(--margin)">
<div class="number _panel"> <div class="number _panel">
@ -66,7 +63,6 @@
</div> </div>
</MkFolder> </MkFolder>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -107,10 +103,6 @@ export default defineComponent({
icon: 'fas fa-tachometer-alt', icon: 'fas fa-tachometer-alt',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
header: {
title: this.$ts.dashboard,
icon: 'fas fa-tachometer-alt',
},
version, version,
vueVersion, vueVersion,
url, url,

9
src/client/pages/admin/users.vue
View file

@ -1,7 +1,5 @@
<template> <template>
<div class="lknzcolw"> <div class="lknzcolw">
<MkHeader :info="header"/>
<div class="users"> <div class="users">
<div class="inputs"> <div class="inputs">
<MkSelect v-model="sort" style="flex: 1;"> <MkSelect v-model="sort" style="flex: 1;">
@ -90,11 +88,6 @@ 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)',
},
header: {
title: this.$ts.users,
icon: 'fas fa-users',
bg: 'var(--bg)',
actions: [{ actions: [{
icon: 'fas fa-search', icon: 'fas fa-search',
text: this.$ts.search, text: this.$ts.search,
@ -109,7 +102,7 @@ export default defineComponent({
icon: 'fas fa-search', icon: 'fas fa-search',
text: this.$ts.lookup, text: this.$ts.lookup,
handler: this.lookupUser handler: this.lookupUser
}] }],
}, },
sort: '+createdAt', sort: '+createdAt',
state: 'all', state: 'all',

8
src/client/pages/announcements.vue
View file

@ -1,6 +1,4 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="_section"> <div class="_section">
<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content"> <MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
<section class="_card announcement _gap" v-for="(announcement, i) in items" :key="announcement.id"> <section class="_card announcement _gap" v-for="(announcement, i) in items" :key="announcement.id">
@ -15,7 +13,6 @@
</section> </section>
</MkPagination> </MkPagination>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -38,11 +35,6 @@ 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,

8
src/client/pages/emojis.vue
View file

@ -1,10 +1,7 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div :class="$style.root"> <div :class="$style.root">
<XCategory v-if="tab === 'category'"/> <XCategory v-if="tab === 'category'"/>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -25,11 +22,6 @@ 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',
} }
}, },

11
src/client/pages/explore.vue
View file

@ -1,7 +1,5 @@
<template> <template>
<div> <div>
<MkHeader :info="header"/>
<MkSpacer :content-max="1200"> <MkSpacer :content-max="1200">
<div class="lznhrdub"> <div class="lznhrdub">
<div v-if="tab === 'local'"> <div v-if="tab === 'local'">
@ -110,13 +108,7 @@ export default defineComponent({
data() { data() {
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.explore,
icon: 'fas fa-hashtag',
bg: 'var(--bg)',
},
tab: 'local',
header: computed(() => ({
title: this.$ts.explore, title: this.$ts.explore,
icon: 'fas fa-hashtag', icon: 'fas fa-hashtag',
bg: 'var(--bg)', bg: 'var(--bg)',
@ -134,6 +126,7 @@ export default defineComponent({
onClick: () => { this.tab = 'search'; }, onClick: () => { this.tab = 'search'; },
},] },]
})), })),
tab: 'local',
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',

8
src/client/pages/favorites.vue
View file

@ -1,12 +1,9 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="jmelgwjh"> <div class="jmelgwjh">
<div class="body"> <div class="body">
<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/> <XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -28,11 +25,6 @@ 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,

8
src/client/pages/featured.vue
View file

@ -1,10 +1,7 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="_section"> <div class="_section">
<XNotes class="_content" ref="notes" :pagination="pagination" @before="before" @after="after"/> <XNotes class="_content" ref="notes" :pagination="pagination" @before="before" @after="after"/>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -25,11 +22,6 @@ export default defineComponent({
icon: 'fas fa-fire-alt', icon: 'fas fa-fire-alt',
bg: 'var(--bg)', 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,

8
src/client/pages/federation.vue
View file

@ -1,6 +1,4 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="taeiyria"> <div class="taeiyria">
<div class="query"> <div class="query">
<MkInput v-model="host" :debounce="true" class=""> <MkInput v-model="host" :debounce="true" class="">
@ -93,7 +91,6 @@
</div> </div>
</MkPagination> </MkPagination>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -122,11 +119,6 @@ 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',

8
src/client/pages/mentions.vue
View file

@ -1,10 +1,7 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="_section"> <div class="_section">
<XNotes class="_content" :pagination="pagination" @before="before()" @after="after()"/> <XNotes class="_content" :pagination="pagination" @before="before()" @after="after()"/>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -25,11 +22,6 @@ export default defineComponent({
icon: 'fas fa-at', icon: 'fas fa-at',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
header: {
title: this.$ts.mentions,
icon: 'fas fa-at',
bg: 'var(--bg)',
},
pagination: { pagination: {
endpoint: 'notes/mentions', endpoint: 'notes/mentions',
limit: 10, limit: 10,

8
src/client/pages/messages.vue
View file

@ -1,10 +1,7 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div> <div>
<XNotes :pagination="pagination" @before="before()" @after="after()"/> <XNotes :pagination="pagination" @before="before()" @after="after()"/>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -25,11 +22,6 @@ export default defineComponent({
icon: 'fas fa-envelope', icon: 'fas fa-envelope',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
header: {
title: this.$ts.directNotes,
icon: 'fas fa-envelope',
bg: 'var(--bg)',
},
pagination: { pagination: {
endpoint: 'notes/mentions', endpoint: 'notes/mentions',
limit: 10, limit: 10,

9
src/client/pages/messaging/index.vue
View file

@ -1,7 +1,4 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<div class="yweeujhr" v-size="{ max: [400] }"> <div class="yweeujhr" v-size="{ max: [400] }">
<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton> <MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
@ -39,7 +36,6 @@
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
</div> </div>
</MkSpacer> </MkSpacer>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -62,11 +58,6 @@ 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: [],

10
src/client/pages/my-lists/index.vue
View file

@ -1,6 +1,4 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="qkcjvfiv"> <div class="qkcjvfiv">
<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton> <MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
@ -11,7 +9,6 @@
</MkA> </MkA>
</MkPagination> </MkPagination>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -35,15 +32,10 @@ export default defineComponent({
title: this.$ts.manageLists, title: this.$ts.manageLists,
icon: 'fas fa-list-ul', icon: 'fas fa-list-ul',
bg: 'var(--bg)', 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
} },
}, },
pagination: { pagination: {
endpoint: 'users/lists/list', endpoint: 'users/lists/list',

7
src/client/pages/my-lists/list.vue
View file

@ -1,6 +1,4 @@
<template> <template>
<div>
<MkHeader v-if="header" :info="header"/>
<div class="mk-list-page"> <div class="mk-list-page">
<transition name="zoom" mode="out-in"> <transition name="zoom" mode="out-in">
<div v-if="list" class="_section"> <div v-if="list" class="_section">
@ -32,7 +30,6 @@
</div> </div>
</transition> </transition>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -53,10 +50,6 @@ 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: [],
}; };

14
src/client/pages/notifications.vue
View file

@ -1,12 +1,9 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<div class="clupoqwt"> <div class="clupoqwt">
<XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/> <XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
</div> </div>
</MkSpacer> </MkSpacer>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -24,14 +21,7 @@ export default defineComponent({
data() { data() {
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.notifications,
icon: 'fas fa-bell',
bg: 'var(--bg)',
},
tab: 'all',
includeTypes: null,
header: computed(() => ({
title: this.$ts.notifications, title: this.$ts.notifications,
icon: 'fas fa-bell', icon: 'fas fa-bell',
bg: 'var(--bg)', bg: 'var(--bg)',
@ -57,6 +47,8 @@ export default defineComponent({
onClick: () => { this.tab = 'unread'; }, onClick: () => { this.tab = 'unread'; },
},] },]
})), })),
tab: 'all',
includeTypes: null,
}; };
}, },

22
src/client/pages/page-editor/page-editor.vue
View file

@ -1,8 +1,5 @@
<template> <template>
<div> <div>
<MkHeader :info="header"/>
<div class="_root">
<div class="jqqmcavi" style="margin: 16px;"> <div class="jqqmcavi" style="margin: 16px;">
<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton> <MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
<MkButton inline @click="save" primary class="button" v-if="!readonly"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> <MkButton inline @click="save" primary class="button" v-if="!readonly"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
@ -79,7 +76,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -131,21 +127,6 @@ export default defineComponent({
data() { data() {
return { return {
[symbols.PAGE_INFO]: computed(() => { [symbols.PAGE_INFO]: computed(() => {
let title = this.$ts._pages.newPage;
if (this.initPageId) {
title = this.$ts._pages.editPage;
}
else if (this.initPageName && this.initUser) {
title = this.$ts._pages.readPage;
}
return {
title: title,
icon: 'fas fa-pencil-alt',
bg: 'var(--bg)',
};
}),
tab: 'settings',
header: computed(() => {
let title = this.$ts._pages.newPage; let title = this.$ts._pages.newPage;
if (this.initPageId) { if (this.initPageId) {
title = this.$ts._pages.editPage; title = this.$ts._pages.editPage;
@ -177,9 +158,10 @@ export default defineComponent({
title: this.$ts.script, title: this.$ts.script,
icon: 'fas fa-code', icon: 'fas fa-code',
onClick: () => { this.tab = 'script'; }, onClick: () => { this.tab = 'script'; },
}] }],
}; };
}), }),
tab: 'settings',
author: this.$i, author: this.$i,
readonly: false, readonly: false,
page: null, page: null,

8
src/client/pages/page.vue
View file

@ -1,8 +1,5 @@
<template> <template>
<div> <div>
<MkHeader :info="header"/>
<div class="_root">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div v-if="page" class="xcukqgmh" :key="page.id" v-size="{ max: [450] }"> <div v-if="page" class="xcukqgmh" :key="page.id" v-size="{ max: [450] }">
<div class="_block main"> <div class="_block main">
@ -60,7 +57,6 @@
<MkLoading v-else/> <MkLoading v-else/>
</transition> </transition>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -101,10 +97,6 @@ export default defineComponent({
[symbols.PAGE_INFO]: computed(() => this.page ? { [symbols.PAGE_INFO]: computed(() => this.page ? {
title: computed(() => this.page.title || this.page.name), title: computed(() => this.page.title || this.page.name),
avatar: this.page.user, avatar: this.page.user,
} : null),
header: computed(() => this.page ? {
title: computed(() => this.page.title || this.page.name),
avatar: this.page.user,
path: `/@${this.page.user.username}/pages/${this.page.name}`, path: `/@${this.page.user.username}/pages/${this.page.name}`,
share: { share: {
title: this.page.title || this.page.name, title: this.page.title || this.page.name,

9
src/client/pages/pages.vue
View file

@ -1,7 +1,4 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<MkSpacer> <MkSpacer>
<!-- TODO: MkHeaderに統合 --> <!-- TODO: MkHeaderに統合 -->
<MkTab v-model="tab" v-if="$i"> <MkTab v-model="tab" v-if="$i">
@ -31,7 +28,6 @@
</div> </div>
</div> </div>
</MkSpacer> </MkSpacer>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -52,11 +48,6 @@ export default defineComponent({
title: this.$ts.pages, title: this.$ts.pages,
icon: 'fas fa-sticky-note', icon: 'fas fa-sticky-note',
bg: 'var(--bg)', 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,

7
src/client/pages/search.vue
View file

@ -1,12 +1,9 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="_section"> <div class="_section">
<div class="_content"> <div class="_content">
<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/> <XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -26,10 +23,6 @@ export default defineComponent({
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',
limit: 10, limit: 10,

1
src/client/pages/settings/index.vue
View file

@ -41,6 +41,7 @@ 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)',
hideHeader: true,
}; };
const INFO = ref(indexInfo); const INFO = ref(indexInfo);
const page = ref(props.initialPage); const page = ref(props.initialPage);

12
src/client/pages/timeline.vue
View file

@ -1,7 +1,5 @@
<template> <template>
<div v-hotkey.global="keymap"> <div class="cmuxhskf" v-size="{ min: [800] }" v-hotkey.global="keymap">
<MkHeader :info="header"/>
<div class="cmuxhskf" v-size="{ min: [800] }">
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/> <XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
@ -17,7 +15,6 @@
/> />
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -46,11 +43,6 @@ 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,
@ -92,7 +84,7 @@ export default defineComponent({
icon: 'fas fa-globe', icon: 'fas fa-globe',
iconOnly: true, iconOnly: true,
onClick: () => { this.src = 'global'; this.saveSrc(); }, onClick: () => { this.src = 'global'; this.saveSrc(); },
}] }],
})), })),
}; };
}, },

13
src/client/pages/user/index.vue
View file

@ -1,6 +1,4 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div class="ftskorzw wide" v-if="user && narrow === false"> <div class="ftskorzw wide" v-if="user && narrow === false">
<MkRemoteCaution v-if="user.host != null" :href="user.url"/> <MkRemoteCaution v-if="user.host != null" :href="user.url"/>
@ -192,7 +190,6 @@
<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">
@ -250,14 +247,6 @@ export default defineComponent({
return { return {
[symbols.PAGE_INFO]: computed(() => this.user ? { [symbols.PAGE_INFO]: computed(() => this.user ? {
icon: 'fas fa-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,
@ -292,7 +281,7 @@ export default defineComponent({
title: this.$ts.gallery, title: this.$ts.gallery,
icon: 'fas fa-icons', icon: 'fas fa-icons',
onClick: () => { this.$router.push('/@' + getAcct(this.user) + '/gallery'); }, onClick: () => { this.$router.push('/@' + getAcct(this.user) + '/gallery'); },
}] }],
} : null), } : null),
user: null, user: null,
error: null, error: null,

3
src/client/ui/deck/main-column.vue
View file

@ -7,6 +7,8 @@
</template> </template>
</template> </template>
<MkStickyContainer>
<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition> <transition>
<keep-alive :include="['timeline']"> <keep-alive :include="['timeline']">
@ -14,6 +16,7 @@
</keep-alive> </keep-alive>
</transition> </transition>
</router-view> </router-view>
</MkStickyContainer>
</XColumn> </XColumn>
</template> </template>

3
src/client/ui/default.vue
View file

@ -14,6 +14,8 @@
<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }"> <main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
<div class="content"> <div class="content">
<MkStickyContainer>
<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
<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">
<keep-alive :include="['timeline']"> <keep-alive :include="['timeline']">
@ -21,6 +23,7 @@
</keep-alive> </keep-alive>
</transition> </transition>
</router-view> </router-view>
</MkStickyContainer>
</div> </div>
</main> </main>

3
src/client/ui/universal.vue
View file

@ -5,6 +5,8 @@
<div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }"> <div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
<main ref="main"> <main ref="main">
<div class="content"> <div class="content">
<MkStickyContainer>
<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
<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">
<keep-alive :include="['timeline']"> <keep-alive :include="['timeline']">
@ -12,6 +14,7 @@
</keep-alive> </keep-alive>
</transition> </transition>
</router-view> </router-view>
</MkStickyContainer>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
</main> </main>