feat(page): Add toggle for full width page view

Fixes: #242 Signed-off-by: Jonas <jonas@freesources.org>
nextcloud · Sep 12, 2023 · d870a84 · d870a84
1 parent c596f9e
commit d870a84
Show file tree

Hide file tree

Showing 18 changed files with 147 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@nextcloud/auth": "^2.1.0",
     "@nextcloud/axios": "^2.4.0",
+    "@nextcloud/browser-storage": "^0.2.0",
     "@nextcloud/dialogs": "^4.1.0",
     "@nextcloud/event-bus": "^3.1.0",
     "@nextcloud/files": "^3.0.0-beta.21",

diff --git a/src/components/Collective.vue b/src/components/Collective.vue
@@ -203,8 +203,6 @@ export default {
 	position: sticky;
 	top: 0;
 	padding: 8px 0px 2px 8px;
-	margin: auto;
-	max-width: 670px;
 	display: flex;
 	align-items: center;
 	background-color: var(--color-main-background);

diff --git a/src/components/Page.vue b/src/components/Page.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h1 id="titleform" class="page-title">
+		<h1 id="titleform" class="page-title" :class="{'sheet-view': !isFullWidthView}">
 			<!-- Page emoji or icon -->
 			<div class="page-title-icon"
 				:class="{ 'mobile': isMobile }">
@@ -121,7 +121,7 @@ import TextEditor from './Page/TextEditor.vue'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import pageMixin from '../mixins/pageMixin.js'
 import { showError } from '@nextcloud/dialogs'
-import { GET_PAGES, RENAME_PAGE } from '../store/actions.js'
+import { GET_PAGES, INIT_FULL_WIDTH_PAGEIDS, RENAME_PAGE } from '../store/actions.js'
 
 export default {
 	name: 'Page',
@@ -160,6 +160,7 @@ export default {
 			'currentCollectiveCanEdit',
 			'isIndexPage',
 			'isPublic',
+			'isFullWidthView',
 			'isTemplatePage',
 			'isLandingPage',
 			'loading',
@@ -233,6 +234,7 @@ export default {
 	},
 
 	mounted() {
+		this.dispatchInitFullWidthPageids()
 		document.title = this.documentTitle
 		this.initTitleEntry()
 	},
@@ -248,6 +250,7 @@ export default {
 		...mapActions({
 			dispatchGetPages: GET_PAGES,
 			dispatchRenamePage: RENAME_PAGE,
+			dispatchInitFullWidthPageids: INIT_FULL_WIDTH_PAGEIDS,
 		}),
 
 		initTitleEntry() {
@@ -309,6 +312,8 @@ export default {
 </style>
 
 <style lang="scss">
+@import '../css/editor.scss';
+
 @media print {
 	/* Don't print emoticon button (if page doesn't have an emoji set) */
 	.edit-button, .action-item, .emoji-picker-emoticon {

diff --git a/src/components/Page/Editor.vue b/src/components/Page/Editor.vue
@@ -11,6 +11,7 @@
 		:show-outline-outside="showOutline"
 		mime="text/markdown"
 		class="file-view active"
+		:class="{'sheet-view': !isFullWidthView}"
 		@ready="ready"
 		@outline-toggled="toggleOutlineFromText"
 		@add-image-node="onAddImageNode"
@@ -28,6 +29,7 @@ export default {
 		...mapGetters([
 			'currentPage',
 			'currentPageFilePath',
+			'isFullWidthView',
 			'shareTokenParam',
 			'showing',
 		]),
@@ -84,12 +86,6 @@ export default {
 	overflow: initial !important;
 }
 
-[data-text-el='editor-container'] .document-status {
-	max-width: 670px;
-	padding: 0 2px;
-	margin: auto;
-}
-
 [data-text-el='editor-container'] .editor--outline {
 	top: revert !important;
 }

diff --git a/src/components/Page/LandingPageWidgets.vue b/src/components/Page/LandingPageWidgets.vue
@@ -1,5 +1,6 @@
 <template>
-	<div class="landing-page-widgets">
+	<div class="landing-page-widgets"
+		:class="{'sheet-view': !isFullWidthView}">
 		<RecentPagesWidget />
 		<MembersWidget v-if="!isPublic" />
 	</div>
@@ -21,15 +22,14 @@ export default {
 	computed: {
 		...mapGetters([
 			'isPublic',
+			'isFullWidthView',
 		]),
 	},
 }
 </script>
 
 <style scoped>
 .landing-page-widgets {
-	margin: auto;
 	padding-left: 12px;
-	max-width: 670px;
 }
 </style>
diff --git a/src/components/Page/LandingPageWidgets/RecentPagesWidget.vue b/src/components/Page/LandingPageWidgets/RecentPagesWidget.vue
@@ -124,7 +124,6 @@ export default {
 		flex-direction: row;
 		gap: 12px;
 
-		max-width: 670px;
 		overflow-x: auto;
 		scroll-snap-type: x mandatory;
 		// Hide scrollbar

diff --git a/src/components/Page/PageActionMenu.vue b/src/components/Page/PageActionMenu.vue
@@ -19,6 +19,15 @@
 					<OpenInNewIcon :size="20" />
 				</template>
 			</NcActionButton>
+			<NcActionCheckbox v-if="!inPageList && !isMobile"
+				:checked="isFullWidthView"
+				@check="onCheckFullWidthView"
+				@uncheck="onUncheckFullWidthView">
+				<template #icon>
+					<DeleteIcon :size="20" />
+				</template>
+				{{ t('collectives', 'Full width') }}
+			</NcActionCheckbox>
 			<NcActionButton v-if="!inPageList"
 				:close-after-click="true"
 				@click.native="toggle('outline')">
@@ -33,7 +42,7 @@
 				:close-after-click="true">
 				{{ t('collectives', 'Show in Files') }}
 			</NcActionLink>
-			<NcActionButton v-if="currentCollectiveCanEdit && !isTemplate && !isLandingPage"
+			<NcActionButton v-if="inPageList && currentCollectiveCanEdit && !isTemplate && !isLandingPage"
 				:close-after-click="true"
 				@click.native="show('details')"
 				@click="gotoPageEmojiPicker">
@@ -52,7 +61,7 @@
 				</template>
 				{{ editTemplateString }}
 			</NcActionButton>
-			<NcActionButton v-if="currentCollectiveCanEdit && !isLandingPage"
+			<NcActionButton v-if="inPageList && currentCollectiveCanEdit && !isLandingPage"
 				:close-after-click="true"
 				@click="onOpenMoveModal">
 				<template #icon>
@@ -79,9 +88,10 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { generateUrl } from '@nextcloud/router'
-import { NcActions, NcActionButton, NcActionLink, NcActionSeparator } from '@nextcloud/vue'
+import { SET_FULL_WIDTH_VIEW } from '../../store/actions.js'
+import { NcActions, NcActionButton, NcActionCheckbox, NcActionLink, NcActionSeparator } from '@nextcloud/vue'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import CollectiveActions from '../Collective/CollectiveActions.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
@@ -101,6 +111,7 @@ export default {
 		MoveModal,
 		NcActions,
 		NcActionButton,
+		NcActionCheckbox,
 		NcActionLink,
 		NcActionSeparator,
 		DeleteIcon,
@@ -170,6 +181,7 @@ export default {
 			'currentCollective',
 			'currentCollectiveCanEdit',
 			'hasSubpages',
+			'isFullWidthView',
 			'loading',
 			'pagesTreeWalk',
 			'showing',
@@ -230,6 +242,18 @@ export default {
 	methods: {
 		...mapMutations(['show', 'toggle']),
 
+		...mapActions({
+			dispatchSetFullWidthView: SET_FULL_WIDTH_VIEW,
+		}),
+
+		onCheckFullWidthView() {
+			this.dispatchSetFullWidthView(true)
+		},
+
+		onUncheckFullWidthView() {
+			this.dispatchSetFullWidthView(false)
+		},
+
 		gotoPageEmojiPicker() {
 			if (this.pageUrl && (this.currentPage.id !== this.pageId)) {
 				this.$router.push(this.pageUrl)

diff --git a/src/components/Page/PageInfoBar.vue b/src/components/Page/PageInfoBar.vue
@@ -1,5 +1,6 @@
 <template>
-	<div class="text-menubar">
+	<div class="text-menubar"
+		:class="{'sheet-view': !isFullWidthView}">
 		<div v-if="currentPage.lastUserId" class="infobar-item infobar-lastupdate">
 			<div class="item-text">
 				<LastUserBubble :last-user-id="currentPage.lastUserId"
@@ -12,6 +13,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import LastUserBubble from '../LastUserBubble.vue'
 
 export default {
@@ -27,6 +29,12 @@ export default {
 			required: true,
 		},
 	},
+
+	computed: {
+		...mapGetters([
+			'isFullWidthView',
+		]),
+	},
 }
 </script>
 
@@ -41,8 +49,6 @@ export default {
 	height: 44px;
 	padding: 3px 8px 3px 14px;
 	display: flex;
-	max-width: 670px;
-	margin: auto;
 	flex-wrap: nowrap;
 	align-items: center;
 	overflow: hidden;

diff --git a/src/components/Page/RichText.vue b/src/components/Page/RichText.vue
@@ -251,11 +251,6 @@ export default {
 </style>
 
 <style lang="scss">
-:root {
-	// Required for read-only view where only RichTextReader and no Editor gets loaded
-	--text-editor-max-width: 670px;
-}
-
 @media print {
 
 	h1, h2, h3 {

diff --git a/src/components/Page/TextEditor.vue b/src/components/Page/TextEditor.vue
@@ -2,10 +2,12 @@
 	<div>
 		<WidgetHeading v-if="isLandingPage"
 			:title="t('collectives', 'Landing page')"
-			class="text-container-heading" />
+			class="text-container-heading"
+			:class="{'sheet-view': !isFullWidthView}" />
 		<div v-show="showRichText"
 			id="text-container"
 			:key="'text-' + currentPage.id"
+			:class="{'sheet-view': !isFullWidthView}"
 			:aria-label="t('collectives', 'Page content')">
 			<RichText :key="`reader-${currentPage.id}`"
 				:current-page="currentPage"
@@ -65,6 +67,7 @@ export default {
 			'isTemplatePage',
 			'isTextEdit',
 			'isPublic',
+			'isFullWidthView',
 			'loading',
 		]),
 
@@ -258,8 +261,6 @@ export default {
 
 <style lang="scss" scoped>
 .text-container-heading {
-	max-width: 670px;
-	margin: auto;
 	padding-left: 14px;
 }
 

diff --git a/src/components/Page/Version.vue b/src/components/Page/Version.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h1 id="titleform" class="page-title">
+		<h1 id="titleform" class="page-title" :class="{'sheet-view': !isFullWidthView}">
 			<input class="title"
 				:class="{ 'mobile': isMobile }"
 				type="text"
@@ -67,6 +67,7 @@ export default {
 	computed: {
 		...mapGetters([
 			'currentPage',
+			'isFullWidthView',
 			'version',
 			'title',
 		]),

diff --git a/src/components/PagePrint.vue b/src/components/PagePrint.vue
@@ -1,13 +1,13 @@
 <template>
 	<div id="text-container" :key="'text-' + page.id" class="page">
-		<h1 v-if="page.parentId === 0" id="page-title-collective" class="page-title page-title-collective">
+		<h1 v-if="page.parentId === 0" id="page-title-collective" class="page-title sheet-view page-title-collective">
 			{{ currentCollectiveTitle }}
 		</h1>
-		<h1 v-else class="page-title page-title-subpage">
+		<h1 v-else class="page-title sheet-view page-title-subpage">
 			{{ pageTitleString }}
 		</h1>
 		<RichTextReader v-if="pageContent"
-			class="editor__content"
+			class="editor__content sheet-view"
 			:content="pageContent" />
 	</div>
 </template>
@@ -89,14 +89,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../css/editor.scss';
 @import '~@nextcloud/text/dist/style.css';
 
 .page-title {
 	font-size: 30px;
 	line-height: 45px;
 	padding: 8px 2px 2px 8px;
-	margin: auto;
-	max-width: 670px;
 
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -115,8 +114,6 @@ export default {
 }
 
 .editor__content {
-	max-width: 670px;
-	margin: auto;
 	position: relative;
 }