This commit is contained in:
syuilo 2021-10-09 12:33:08 +09:00
parent b3779875d0
commit 27c056cbbf
38 changed files with 753 additions and 625 deletions

View file

@ -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 {

View file

@ -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);
} }

View file

@ -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: {

View file

@ -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: {

View file

@ -1,4 +1,6 @@
<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">
@ -13,6 +15,7 @@
</section> </section>
</MkPagination> </MkPagination>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -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,

View file

@ -89,7 +89,7 @@ export default defineComponent({
}, },
top() { top() {
scroll(this.$el, 0); scroll(this.$el, { top: 0 });
}, },
async timetravel() { async timetravel() {

View file

@ -1,7 +1,10 @@
<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">
@ -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',
} }
}, },

View file

@ -1,4 +1,7 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="lznhrdub _root"> <div class="lznhrdub _root">
<div> <div>
<div class="_isolated"> <div class="_isolated">
@ -69,6 +72,7 @@
</template> </template>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -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',

View file

@ -1,9 +1,12 @@
<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">
@ -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,

View file

@ -1,7 +1,10 @@
<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">
@ -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,
}, },
}; };
}, },

View file

@ -1,4 +1,6 @@
<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="">
@ -91,6 +93,7 @@
</div> </div>
</MkPagination> </MkPagination>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -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',

View file

@ -1,6 +1,7 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="uqshojas"> <div class="uqshojas">
<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
<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">
<MkAd v-if="ad.url" :specify="ad"/> <MkAd v-if="ad.url" :specify="ad"/>
@ -39,6 +40,7 @@
</div> </div>
</section> </section>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -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: [],
} }
}, },

View file

@ -1,6 +1,8 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="ztgjmzrw"> <div class="ztgjmzrw">
<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
<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">
<MkInput v-model="announcement.title"> <MkInput v-model="announcement.title">
@ -20,6 +22,7 @@
</div> </div>
</section> </section>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -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: [],
} }
}, },

View file

@ -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,

View file

@ -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%;
} }
} }

View file

@ -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);

View file

@ -1,7 +1,10 @@
<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">
@ -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',

View file

@ -1,7 +1,10 @@
<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">
@ -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',

View file

@ -1,4 +1,7 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="yweeujhr _root" v-size="{ max: [400] }"> <div class="yweeujhr _root" 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>
@ -34,6 +37,7 @@
</div> </div>
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -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: [],

View file

@ -284,7 +284,7 @@ const Component = defineComponent({
}, },
scrollToBottom() { scrollToBottom() {
scroll(this.$el, this.$el.offsetHeight); scroll(this.$el, { top: this.$el.offsetHeight });
}, },
onIndicatorClick() { onIndicatorClick() {

View file

@ -1,4 +1,6 @@
<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>
@ -9,6 +11,7 @@
</MkA> </MkA>
</MkPagination> </MkPagination>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -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

View file

@ -1,4 +1,6 @@
<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">
@ -30,6 +32,7 @@
</div> </div>
</transition> </transition>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -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: [],
}; };

View file

@ -1,7 +1,10 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="clupoqwt" v-size="{ min: [800] }"> <div class="clupoqwt" v-size="{ min: [800] }">
<XNotifications class="notifications" @before="before" @after="after" page/> <XNotifications class="notifications" @before="before" @after="after" page/>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -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',

View file

@ -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: {

View file

@ -1,9 +1,12 @@
<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">
@ -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',

View file

@ -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,

View file

@ -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,

View file

@ -1,5 +1,7 @@
<template> <template>
<div class="cmuxhskf" v-hotkey.global="keymap" v-size="{ min: [800] }"> <div 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/>
@ -15,6 +17,7 @@
/> />
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -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) {

View file

@ -89,7 +89,7 @@ export default defineComponent({
}, },
top() { top() {
scroll(this.$el, 0); scroll(this.$el, { top: 0 });
}, },
settings() { settings() {

View file

@ -1,4 +1,6 @@
<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"/>
@ -187,6 +189,7 @@
<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,

View file

@ -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) {

View file

@ -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 importAsyncComponentWrapperref XSide, // NOTE: dynamic importAsyncComponentWrapperref
XHeader,
XHeaderClock, XHeaderClock,
}, },

View file

@ -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() {

View file

@ -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
}, },

View file

@ -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) => {

View file

@ -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 {

View file

@ -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 importAsyncComponentWrapperref XSide, // NOTE: dynamic importAsyncComponentWrapperref
}, },
@ -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;

View file

@ -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() {