sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
syuilo
2021-10-08 22:03:06 +09:00
parent 8b1999dc5b
commit 748a451e23
15 changed files with 93 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/client/ui/_common_/header.vue
View File

@@ -1,10 +1,5 @@
<template>
<div class="fdidabkb" :class="{ slim: titleOnly || narrow }" :style="`--height:${height};`" :key="key">
<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
<div class="buttons left" v-if="backButton">
<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
</div>
</transition>
<div class="fdidabkb" :class="{ slim: narrow, thin }" :key="key">
<template v-if="info">
<div class="titleContainer" @click="showTabsPopup">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -34,7 +29,6 @@
<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>
<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="closeButton" class="_button button" @click.stop="$emit('close')" @touchstart="preventDrag" v-tooltip="$ts.close"><i class="fas fa-times"></i></button>
</div>
</div>
</template>
@@ -52,20 +46,9 @@ export default defineComponent({
menu: {
required: false
},
backButton: {
type: Boolean,
thin: {
required: false,
default: false,
},
closeButton: {
type: Boolean,
required: false,
default: false,
},
titleOnly: {
type: Boolean,
required: false,
default: false,
default: false
},
},
@@ -99,11 +82,9 @@ export default defineComponent({
},
mounted() {
this.height = this.$el.parentElement.offsetHeight + 'px';
this.narrow = this.titleOnly || this.$el.parentElement.offsetWidth < 500;
this.narrow = this.$el.offsetWidth < 500;
new ResizeObserver((entries, observer) => {
this.height = this.$el.parentElement.offsetHeight + 'px';
this.narrow = this.titleOnly || this.$el.parentElement.offsetWidth < 500;
this.narrow = this.$el.offsetWidth < 500;
}).observe(this.$el);
},
@@ -161,8 +142,13 @@ export default defineComponent({
<style lang="scss" scoped>
.fdidabkb {
--height: 60px;
display: flex;
&.thin {
--height: 50px;
}
&.slim {
text-align: center;
@@ -220,6 +206,7 @@ export default defineComponent({
text-align: left;
font-weight: bold;
flex-shrink: 0;
margin-left: 24px;
> .avatar {
$size: 32px;

2
src/client/ui/chat/index.vue
View File

@@ -74,7 +74,7 @@
<main class="main" @contextmenu.stop="onContextmenu">
<header class="header">
<XHeader class="header" :info="pageInfo" :menu="menu" :center="false" :back-button="true" @back="back()" @click="onHeaderClick"/>
<XHeader class="header" :info="pageInfo" :menu="menu" :center="false" @click="onHeaderClick"/>
</header>
<router-view v-slot="{ Component }">
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">

2
src/client/ui/chat/side.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="mrajymqm _narrow_" v-if="component">
<header class="header" @contextmenu.prevent.stop="onContextmenu">
<XHeader class="title" :info="pageInfo" :center="false" :back-button="history.length > 0" @back="back()" :close-button="true" @close="close()"/>
<XHeader class="title" :info="pageInfo" :center="false"/>
</header>
<component :is="component" v-bind="props" :ref="changePage" class="body _flat_"/>
</div>

5
src/client/ui/deck/main-column.vue
View File

@@ -1,9 +1,12 @@
<template>
<XColumn v-if="deckStore.state.alwaysShowMainColumn || $route.name !== 'index'" :column="column" :is-stacked="isStacked">
<template #header>
<XHeader :info="pageInfo" :back-button="true" @back="back()"/>
<template v-if="pageInfo">
{{ pageInfo.title }}
</template>
</template>
<XHeader :info="pageInfo"/>
<router-view v-slot="{ Component }" class="_flat_">
<transition>
<keep-alive :include="['timeline']">

2
src/client/ui/default.header.vue
View File

@@ -29,7 +29,7 @@
<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
</button>
<div class="post" @click="post">
<MkButton class="button" primary full>
<MkButton class="button" primary full rounded>
<i class="fas fa-pencil-alt fa-fw"></i>
</MkButton>
</div>

3
src/client/ui/default.side.vue
View File

@@ -4,9 +4,10 @@
<header class="header" @contextmenu.prevent.stop="onContextmenu">
<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
<XHeader class="title" :info="pageInfo" :back-button="false"/>
<span class="title">{{ pageInfo.title }}</span>
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
</header>
<XHeader class="pageHeader" :info="pageInfo"/>
<component :is="component" v-bind="props" :ref="changePage"/>
</div>
</div>

11
src/client/ui/default.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="mk-app" :class="{ wallpaper, isMobile }">
<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--headerHeight:` + headerHeight + 'px'">
<XHeaderMenu v-if="showMenuOnTop"/>
<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
@@ -14,7 +14,7 @@
<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
<header class="header" @click="onHeaderClick">
<XHeader :info="pageInfo" :back-button="true" @back="back()"/>
<XHeader :info="pageInfo" v-get-size="(w, h) => headerHeight = h" :thin="true"/>
</header>
<div class="content" :class="{ _flat_: !fullView }">
<router-view v-slot="{ Component }">
@@ -88,6 +88,7 @@ export default defineComponent({
data() {
return {
pageInfo: null,
headerHeight: 0,
menuDef: menuDef,
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
@@ -257,7 +258,6 @@ export default defineComponent({
}
.mk-app {
$header-height: 50px;
$ui-font-size: 1em;
$widgets-hide-threshold: 1200px;
$nav-icon-only-width: 78px; // TODO: どこかに集約したい
@@ -330,7 +330,6 @@ export default defineComponent({
position: sticky;
z-index: 1000;
top: var(--globalHeaderHeight, 0px);
height: $header-height;
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--header);
@@ -338,11 +337,11 @@ export default defineComponent({
}
> .content {
--stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height});
--stickyTop: calc(var(--globalHeaderHeight, 0px) + var(--headerHeight));
}
@media (max-width: 850px) {
padding-top: $header-height;
padding-top: var(--headerHeight);
> .header {
position: fixed;

22
src/client/ui/universal.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="mk-app" :class="{ wallpaper }">
<div class="mk-app" :class="{ wallpaper }" :style="`--headerHeight:` + headerHeight + 'px'">
<XSidebar ref="nav" class="sidebar"/>
<div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
<header class="header" ref="header" @click="onHeaderClick" :style="{ background: pageInfo?.bg }">
<XHeader :info="pageInfo" :back-button="true" @back="back()"/>
<XHeader v-if="!pageInfo?.hide" :info="pageInfo" v-get-size="(w, h) => headerHeight = h"/>
</header>
<main ref="main">
<div class="content">
@@ -86,6 +86,7 @@ export default defineComponent({
data() {
return {
pageInfo: null,
headerHeight: 0,
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
menuDef: menuDef,
navHidden: false,
@@ -243,7 +244,6 @@ export default defineComponent({
}
.mk-app {
$header-height: 58px; // TODO: どこかに集約したい
$ui-font-size: 1em; // TODO: どこかに集約したい
$widgets-hide-threshold: 1090px;
@@ -263,19 +263,14 @@ export default defineComponent({
> .contents {
width: 100%;
min-width: 0;
--stickyTop: #{$header-height};
padding-top: $header-height;
--stickyTop: var(--headerHeight);
padding-top: var(--headerHeight);
background: var(--panel);
> .header {
position: fixed;
z-index: 1000;
top: 0;
height: $header-height;
width: 100%;
line-height: $header-height;
text-align: center;
font-weight: bold;
//background-color: var(--panel);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
@@ -287,13 +282,6 @@ export default defineComponent({
> main {
min-width: 0;
> .content {
> * {
// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
}
}
> .spacer {
height: 82px;