Merge pull request #967 from nextcloud/fix/text_editor_max_width

fix(editor): Set CSS variable `--text-editor-max-width` per default
nextcloud · Oct 30, 2023 · ce6bf90 · ce6bf90
2 parents 35cd1a7 + 1fb0d05
commit ce6bf90
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 17 deletions.
diff --git a/src/components/Page.vue b/src/components/Page.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h1 id="titleform" class="page-title" :class="{'sheet-view': !isFullWidthView}">
+		<h1 id="titleform" class="page-title" :class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
 			<!-- Page emoji or icon -->
 			<div class="page-title-icon"
 				:class="{ 'mobile': isMobile }">

diff --git a/src/components/Page/Editor.vue b/src/components/Page/Editor.vue
@@ -11,7 +11,7 @@
 		:show-outline-outside="showOutline"
 		mime="text/markdown"
 		class="file-view active"
-		:class="{'sheet-view': !isFullWidthView}"
+		:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']"
 		@ready="ready"
 		@outline-toggled="toggleOutlineFromText"
 		@add-image-node="onAddImageNode"

diff --git a/src/components/Page/LandingPageWidgets.vue b/src/components/Page/LandingPageWidgets.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="landing-page-widgets"
-		:class="{'sheet-view': !isFullWidthView}">
+		:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
 		<MembersWidget v-if="!isPublic" />
 		<RecentPagesWidget />
 	</div>

diff --git a/src/components/Page/PageInfoBar.vue b/src/components/Page/PageInfoBar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="text-menubar"
-		:class="{'sheet-view': !isFullWidthView}">
+		:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
 		<div v-if="currentPage.lastUserId" class="infobar-item infobar-lastupdate">
 			<div class="item-text">
 				<LastUserBubble :last-user-id="currentPage.lastUserId"

diff --git a/src/components/Page/TextEditor.vue b/src/components/Page/TextEditor.vue
@@ -3,11 +3,11 @@
 		<WidgetHeading v-if="isLandingPage"
 			:title="t('collectives', 'Landing page')"
 			class="text-container-heading"
-			:class="{'sheet-view': !isFullWidthView}" />
+			:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']" />
 		<div v-show="showRichText"
 			id="text-container"
 			:key="'text-' + currentPage.id"
-			:class="{'sheet-view': !isFullWidthView}"
+			:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']"
 			:aria-label="t('collectives', 'Page content')">
 			<RichText :key="`reader-${currentPage.id}`"
 				:current-page="currentPage"

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" :class="{'sheet-view': !isFullWidthView}">
+		<h1 id="titleform" class="page-title" :class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
 			<input class="title"
 				:class="{ 'mobile': isMobile }"
 				type="text"
@@ -19,7 +19,8 @@
 				<NcActionButton icon="icon-menu-sidebar" :close-after-click="true" @click="closeVersions" />
 			</NcActions>
 		</h1>
-		<div id="text-container">
+		<div id="text-container"
+			:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
 			<RichText :key="`show-${currentPage.id}-${version.timestamp}`"
 				:current-page="currentPage"
 				:page-content="pageVersionContent" />

diff --git a/src/components/SkeletonLoading.vue b/src/components/SkeletonLoading.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="placeholder-main"
-		:class="placeholderClasses">
+		:class="[`placeholder-main-${type}`, isFullWidthView ? 'full-width-view' : 'sheet-view']">
 		<!-- Placeholder animation -->
 		<template v-for="(suffix, gradientIndex) in ['-regular', '-reverse']">
 			<svg :key="'gradient' + suffix" :class="'placeholder-gradient placeholder-gradient' + suffix">
@@ -83,14 +83,6 @@ export default {
 			'isFullWidthView',
 		]),
 
-		placeholderClasses() {
-			const classes = [`placeholder-main-${this.type}`]
-			if (!this.isFullWidthView) {
-				classes.push('sheet-view')
-			}
-			return classes
-		},
-
 		placeholderData() {
 			const data = []
 			for (let i = 0; i < this.count; i++) {

diff --git a/src/css/editor.scss b/src/css/editor.scss
@@ -1,5 +1,10 @@
 :root {
+	--text-editor-max-width: 670px !important;
+}
+
+.full-width-view {
 	--text-editor-max-width: false !important;
+	max-width: unset;
 }
 
 .sheet-view {