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

cypress/e2e/pages.spec.js

@@ -269,6 +269,35 @@ describe('Page', function() {
 		})
 	})
 
+	describe('Full width view', function() {
+		it('Allows to toggle persistent full-width view', function() {
+			cy.visit('/apps/collectives/Our%20Garden/Day%202')
+			cy.get('#titleform').should('have.css', 'max-width', '100%')
+			cy.get('#read-only-editor').invoke('outerWidth').should('eq', 670)
+
+			// Set full width mode
+			cy.get('#titleform .action-item__menutoggle')
+				.click()
+			cy.contains('li.action', 'Full width')
+				.click()
+			cy.get('#titleform').should('have.css', 'max-width', 'none')
+			cy.get('#read-only-editor').invoke('outerWidth').should('be.greaterThan', 700)
+
+			// Reload to check persistence with browser storage
+			cy.reload()
+			cy.get('#titleform').should('have.css', 'max-width', 'none')
+			cy.get('#read-only-editor').invoke('outerWidth').should('be.greaterThan', 700)
+
+			// Unset full width mode
+			cy.get('#titleform .action-item__menutoggle')
+				.click()
+			cy.contains('li.action', 'Full width')
+				.click()
+			cy.get('#titleform').should('have.css', 'max-width', '100%')
+			cy.get('#read-only-editor').invoke('outerWidth').should('eq', 670)
+		})
+	})
+
 	describe('Using the search providers to search for a page', function() {
 		it('Search for page title', function() {
 			cy.get('.unified-search a').click()

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",

src/components/Collective.vue

@@ -202,9 +202,7 @@ export default {
 .page-title {
 	position: sticky;
 	top: 0;
-	padding: 8px 0px 2px 8px;
-	margin: auto;
-	max-width: 670px;
+	padding: 8px 8px 2px 8px;
 	display: flex;
 	align-items: center;
 	background-color: var(--color-main-background);

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 }">
@@ -77,29 +77,31 @@
 					@blur="renamePage()">
 			</form>
 
-			<!-- Edit button if editable -->
-			<EditButton v-if="currentCollectiveCanEdit"
-				:mobile="isMobile"
-				class="edit-button" />
-
-			<!-- Actions menu -->
-			<PageActionMenu :show-files-link="!isPublic"
-				:page-id="currentPage.id"
-				:parent-id="currentPage.parentId"
-				:timestamp="currentPage.timestamp"
-				:last-user-id="currentPage.lastUserId"
-				:last-user-display-name="currentPage.lastUserDisplayName"
-				:is-landing-page="isLandingPage"
-				:is-template="isTemplatePage" />
-
-			<!-- Sidebar toggle -->
-			<NcActions v-if="!showing('sidebar') && !isMobile">
-				<NcActionButton icon="icon-menu-sidebar"
-					:aria-label="t('collectives', 'Open page sidebar')"
-					aria-controls="app-sidebar-vue"
-					:close-after-click="true"
-					@click="toggle('sidebar')" />
-			</NcActions>
+			<div class="titlebar-buttons">
+				<!-- Edit button if editable -->
+				<EditButton v-if="currentCollectiveCanEdit"
+					:mobile="isMobile"
+					class="edit-button" />
+
+				<!-- Actions menu -->
+				<PageActionMenu :show-files-link="!isPublic"
+					:page-id="currentPage.id"
+					:parent-id="currentPage.parentId"
+					:timestamp="currentPage.timestamp"
+					:last-user-id="currentPage.lastUserId"
+					:last-user-display-name="currentPage.lastUserDisplayName"
+					:is-landing-page="isLandingPage"
+					:is-template="isTemplatePage" />
+
+				<!-- Sidebar toggle -->
+				<NcActions v-if="!showing('sidebar') && !isMobile">
+					<NcActionButton icon="icon-menu-sidebar"
+						:aria-label="t('collectives', 'Open page sidebar')"
+						aria-controls="app-sidebar-vue"
+						:close-after-click="true"
+						@click="toggle('sidebar')" />
+				</NcActions>
+			</div>
 		</h1>
 		<LandingPageWidgets v-if="isLandingPage" />
 		<TextEditor :key="`text-editor-${currentPage.id}`"
@@ -121,7 +123,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 +162,7 @@ export default {
 			'currentCollectiveCanEdit',
 			'isIndexPage',
 			'isPublic',
+			'isFullWidthView',
 			'isTemplatePage',
 			'isLandingPage',
 			'loading',
@@ -233,6 +236,7 @@ export default {
 	},
 
 	mounted() {
+		this.dispatchInitFullWidthPageids()
 		document.title = this.documentTitle
 		this.initTitleEntry()
 	},
@@ -248,6 +252,7 @@ export default {
 		...mapActions({
 			dispatchGetPages: GET_PAGES,
 			dispatchRenamePage: RENAME_PAGE,
+			dispatchInitFullWidthPageids: INIT_FULL_WIDTH_PAGEIDS,
 		}),
 
 		initTitleEntry() {
@@ -305,10 +310,16 @@ export default {
 	form {
 		flex: auto;
 	}
+
+	.titlebar-buttons {
+		display: flex;
+	}
 }
 </style>
 
 <style lang="scss">
+@import '../css/editor';
+
 @media print {
 	/* Don't print emoticon button (if page doesn't have an emoji set) */
 	.edit-button, .action-item, .emoji-picker-emoticon {

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;
 }

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>

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