From 0265c85ba315c7a00d72c87de562335ba20ec4c9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 12 Apr 2021 00:05:13 +0900
Subject: [PATCH] full view
---
locales/ja-JP.yml | 2 ++
src/client/ui/default.vue | 32 +++++++++++++++++++++++++++++---
2 files changed, 31 insertions(+), 3 deletions(-)
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 4c0dd2bc24..5eb3d736f2 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -714,6 +714,8 @@ clear: "クリア"
markAllAsRead: "全て既読にする"
goBack: "戻る"
unlikeConfirm: "いいね解除しますか？"
+fullView: "フルビュー"
+quitFullView: "フルビュー解除"
_email:
_follow:
diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue
index 1e5b52de8b..51d4c783ae 100644
--- a/src/client/ui/default.vue
+++ b/src/client/ui/default.vue
@@ -1,6 +1,6 @@
<template>
<div class="mk-app" :class="{ wallpaper, isMobile }">
- <div class="columns">
+ <div class="columns" :class="{ fullView }">
<div class="sidebar" ref="sidebar" v-if="!isMobile">
<XSidebar/>
</div>
@@ -9,7 +9,7 @@
<header v-if="$store.state.titlebar" class="header" @click="onHeaderClick">
<XHeader :info="pageInfo"/>
</header>
- <div class="content _flat_">
+ <div class="content" :class="{ _flat_: !fullView }">
<router-view v-slot="{ Component }">
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<keep-alive :include="['timeline']">
@@ -53,7 +53,7 @@
<script lang="ts">
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 { instanceName } from '@client/config';
import { StickySidebar } from '@client/scripts/sticky-sidebar';
@@ -84,6 +84,7 @@ export default defineComponent({
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
widgetsShowing: false,
+ fullView: false,
wallpaper: localStorage.getItem('wallpaper') != null,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt,
};
@@ -173,6 +174,12 @@ export default defineComponent({
os.contextMenu([{
type: 'label',
text: path,
+ }, {
+ icon: this.fullView ? faCompress : faExpand,
+ text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
+ action: () => {
+ this.fullView = !this.fullView;
+ }
}, {
icon: faWindowMaximize,
text: this.$ts.openInWindow,
@@ -248,6 +255,25 @@ export default defineComponent({
max-width: 100%;
margin: 32px 0;
+ &.fullView {
+ margin: 0;
+
+ > .sidebar {
+ display: none;
+ }
+
+ > .widgets {
+ display: none;
+ }
+
+ > .main {
+ margin: 0;
+ border-radius: 0;
+ box-shadow: none;
+ width: 100%;
+ }
+ }
+
> .main {
width: 750px;
margin: 0 16px 0 0;