This commit is contained in:
syuilo 2021-10-14 18:51:15 +09:00
parent 3dc70f9878
commit 955b3e313b
7 changed files with 89 additions and 66 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="fdidabkb" :class="{ slim: narrow, 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"> <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>
@ -37,7 +37,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'; import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject } from 'vue';
import * as tinycolor from 'tinycolor2'; 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';
@ -182,6 +182,7 @@ export default defineComponent({
showTabsPopup, showTabsPopup,
preventDrag, preventDrag,
onClick, onClick,
thin_: props.thin || inject('shouldHeaderThin', false)
}; };
}, },
}); });

View file

@ -44,7 +44,8 @@ export default defineComponent({
return { return {
navHook: (path) => { navHook: (path) => {
this.navigate(path); this.navigate(path);
} },
shouldHeaderThin: true,
}; };
}, },

View file

@ -46,7 +46,8 @@ export default defineComponent({
return { return {
navHook: (path) => { navHook: (path) => {
this.navigate(path); this.navigate(path);
} },
shouldHeaderThin: true,
}; };
}, },

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="gafaadew" :class="{ modal, _popup: modal }" <div class="gafaadew" :class="{ modal, _popup: modal }"
v-size="{ max: [500] }" v-size="{ max: [310, 500] }"
@dragover.stop="onDragover" @dragover.stop="onDragover"
@dragenter="onDragenter" @dragenter="onDragenter"
@dragleave="onDragleave" @dragleave="onDragleave"
@ -914,5 +914,17 @@ export default defineComponent({
} }
} }
} }
&.max-width_310px {
> .form {
> footer {
> button {
font-size: 14px;
width: 44px;
height: 44px;
}
}
}
}
} }
</style> </style>

View file

@ -1,4 +1,7 @@
<template> <template>
<div>
<MkHeader :info="header"/>
<div class="_root"> <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] }">
@ -57,6 +60,7 @@
<MkLoading v-else/> <MkLoading v-else/>
</transition> </transition>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -97,6 +101,10 @@ 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,

View file

@ -215,6 +215,10 @@ export default defineComponent({
} }
} }
> .post-form {
border-radius: var(--radius);
}
> .tl { > .tl {
background: var(--bg); background: var(--bg);
border-radius: var(--radius); border-radius: var(--radius);

View file

@ -37,6 +37,10 @@ import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownCo
import { deckStore } from './deck-store'; import { deckStore } from './deck-store';
export default defineComponent({ export default defineComponent({
provide: {
shouldHeaderThin: true
},
props: { props: {
column: { column: {
type: Object, type: Object,
@ -267,6 +271,7 @@ export default defineComponent({
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
contain: content; contain: content;
box-shadow: 0 0 8px 0 var(--shadow);
&.draghover { &.draghover {
box-shadow: 0 0 0 2px var(--focus); box-shadow: 0 0 0 2px var(--focus);
@ -320,15 +325,6 @@ export default defineComponent({
&.paged { &.paged {
background: var(--bg) !important; background: var(--bg) !important;
> header {
background: transparent;
box-shadow: none;
> button {
color: var(--fg);
}
}
} }
> header { > header {