fix(titlebar): align buttons to the right

Also add same top and right margin to titlebar. Signed-off-by: Jonas <jonas@freesources.org>
nextcloud · Sep 13, 2023 · 27f662b · 27f662b
1 parent 3fb74b0
commit 27f662b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 28 deletions.
diff --git a/cypress/e2e/pages.spec.js b/cypress/e2e/pages.spec.js
@@ -272,8 +272,7 @@ describe('Page', function() {
 	describe.only('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', '670px')
-			cy.get('#titleform').invoke('outerWidth').should('eq', 670)
+			cy.get('#titleform').should('have.css', 'max-width', '100%')
 			cy.get('#read-only-editor').invoke('outerWidth').should('eq', 670)
 
 			// Set full width mode
@@ -282,12 +281,11 @@ describe('Page', function() {
 			cy.contains('li.action', 'Full width')
 				.click()
 			cy.get('#titleform').should('have.css', 'max-width', 'none')
-			cy.get('#titleform').invoke('outerWidth').should('be.greaterThan', 700)
 			cy.get('#read-only-editor').invoke('outerWidth').should('be.greaterThan', 700)
 
 			// Reload to check persistence with browser storage
 			cy.reload()
-			cy.get('#titleform').invoke('outerWidth').should('be.greaterThan', 700)
+			cy.get('#titleform').should('have.css', 'max-width', '100%')
 			cy.get('#read-only-editor').invoke('outerWidth').should('be.greaterThan', 700)
 
 			// Unset full width mode

diff --git a/src/components/Collective.vue b/src/components/Collective.vue
@@ -202,7 +202,7 @@ export default {
 .page-title {
 	position: sticky;
 	top: 0;
-	padding: 8px 0px 2px 8px;
+	padding: 8px 8px 2px 8px;
 	display: flex;
 	align-items: center;
 	background-color: var(--color-main-background);

diff --git a/src/components/Page.vue b/src/components/Page.vue
@@ -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}`"
@@ -308,6 +310,10 @@ export default {
 	form {
 		flex: auto;
 	}
+
+	.titlebar-buttons {
+		display: flex;
+	}
 }
 </style>
 

diff --git a/src/css/editor.scss b/src/css/editor.scss
@@ -7,6 +7,11 @@
 	max-width: var(--text-editor-max-width);
 	margin: auto;
 
+	&.page-title {
+		max-width: 100%;
+		margin: 0 0 0 max(0px, calc(50% - (var(--text-editor-max-width) / 2)));
+	}
+
 	// Editor document status bar
 	.document-status {
 		max-width: var(--text-editor-max-width);