full view
This commit is contained in:
		
							parent
							
								
									7ec0670748
								
							
						
					
					
						commit
						0265c85ba3
					
				
					 2 changed files with 31 additions and 3 deletions
				
			
		|  | @ -714,6 +714,8 @@ clear: "クリア" | ||||||
| markAllAsRead: "全て既読にする" | markAllAsRead: "全て既読にする" | ||||||
| goBack: "戻る" | goBack: "戻る" | ||||||
| unlikeConfirm: "いいね解除しますか?" | unlikeConfirm: "いいね解除しますか?" | ||||||
|  | fullView: "フルビュー" | ||||||
|  | quitFullView: "フルビュー解除" | ||||||
| 
 | 
 | ||||||
| _email: | _email: | ||||||
|   _follow: |   _follow: | ||||||
|  |  | ||||||
|  | @ -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; | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue