natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

full view

This commit is contained in:
syuilo 2021-04-12 00:05:13 +09:00
parent 7ec0670748
commit 0265c85ba3
2 changed files with 31 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
locales/ja-JP.yml
View File

@ -714,6 +714,8 @@ clear: "クリア"
markAllAsRead: "全て既読にする" markAllAsRead: "全て既読にする"
goBack: "戻る" goBack: "戻る"
unlikeConfirm: "いいね解除しますか？" unlikeConfirm: "いいね解除しますか？"
fullView: "フルビュー"
quitFullView: "フルビュー解除"
_email: _email:
_follow: _follow:

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

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-app" :class="{ wallpaper, isMobile }"> <div class="mk-app" :class="{ wallpaper, isMobile }">
<div class="columns"> <div class="columns" :class="{ fullView }">
<div class="sidebar" ref="sidebar" v-if="!isMobile"> <div class="sidebar" ref="sidebar" v-if="!isMobile">
<XSidebar/> <XSidebar/>
</div> </div>
@ -9,7 +9,7 @@
<header v-if="$store.state.titlebar" class="header" @click="onHeaderClick"> <header v-if="$store.state.titlebar" class="header" @click="onHeaderClick">
<XHeader :info="pageInfo"/> <XHeader :info="pageInfo"/>
</header> </header>
<div class="content _flat_"> <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">
<keep-alive :include="['timeline']"> <keep-alive :include="['timeline']">
@ -53,7 +53,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue'; import { defineComponent, defineAsyncComponent } from 'vue';
import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faExpand, faPencilAlt, faCompress } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-regular-svg-icons'; import { faBell } from '@fortawesome/free-regular-svg-icons';
import { instanceName } from '@client/config'; import { instanceName } from '@client/config';
import { StickySidebar } from '@client/scripts/sticky-sidebar'; import { StickySidebar } from '@client/scripts/sticky-sidebar';
@ -84,6 +84,7 @@ export default defineComponent({
isMobile: window.innerWidth <= MOBILE_THRESHOLD, isMobile: window.innerWidth <= MOBILE_THRESHOLD,
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD, isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
widgetsShowing: false, widgetsShowing: false,
fullView: false,
wallpaper: localStorage.getItem('wallpaper') != null, wallpaper: localStorage.getItem('wallpaper') != null,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt,
}; };
@ -173,6 +174,12 @@ export default defineComponent({
os.contextMenu([{ os.contextMenu([{
type: 'label', type: 'label',
text: path, text: path,
}, {
icon: this.fullView ? faCompress : faExpand,
text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
action: () => {
this.fullView = !this.fullView;
}
}, { }, {
icon: faWindowMaximize, icon: faWindowMaximize,
text: this.$ts.openInWindow, text: this.$ts.openInWindow,
@ -248,6 +255,25 @@ export default defineComponent({
max-width: 100%; max-width: 100%;
margin: 32px 0; margin: 32px 0;
&.fullView {
margin: 0;
> .sidebar {
display: none;
}
> .widgets {
display: none;
}
> .main {
margin: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
}
}
> .main { > .main {
width: 750px; width: 750px;
margin: 0 16px 0 0; margin: 0 16px 0 0;