🚸 (#2345): adjust menubar position

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
nextcloud · May 26, 2022 · 99f40d3 · 99f40d3
1 parent 4df8202
commit 99f40d3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/css/style.scss b/css/style.scss
@@ -1,3 +1,7 @@
+:root {
+	--text-editor-max-width: 670px
+}
+
 .modal-container #editor-container {
   position: absolute;
 }

diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
@@ -80,7 +80,9 @@
 				:is-rich-editor="isRichEditor" />
 		</div>
 
-		<CollisionResolveDialog v-if="hasSyncCollission && !readOnly" @resolve-use-this-version="resolveUseThisVersion" @resolve-use-server-version="resolveUseServerVersion" />
+		<CollisionResolveDialog v-if="hasSyncCollission && !readOnly"
+			@resolve-use-this-version="resolveUseThisVersion"
+			@resolve-use-server-version="resolveUseServerVersion" />
 		<HelpModal v-if="displayHelp" @close="hideHelp" />
 	</div>
 </template>
@@ -92,6 +94,7 @@ import moment from '@nextcloud/moment'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import { EditorContent } from '@tiptap/vue-2'
 import { getVersion, receiveTransaction } from 'prosemirror-collab'
+import { Step } from 'prosemirror-transform'
 
 import {
 	EDITOR,
@@ -113,7 +116,6 @@ import markdownit from './../markdownit/index.js'
 import { Collaboration, Keymap, UserColor } from './../extensions/index.js'
 import isMobile from './../mixins/isMobile.js'
 import store from './../mixins/store.js'
-import { Step } from 'prosemirror-transform'
 import Lock from 'vue-material-design-icons/Lock'
 import MenuBar from './Menu/Bar.vue'
 import EditorDraggable from './EditorDraggable.vue'
@@ -731,7 +733,7 @@ export default {
 	}
 
 	.editor__content {
-		max-width: 670px;
+		max-width: var(--text-editor-max-width);
 		margin: auto;
 		position: relative;
 	}
@@ -774,6 +776,7 @@ export default {
 	}
 
 </style>
+
 <style lang="scss">
 	@import './../../css/style';
 

diff --git a/src/components/Menu/Bar.vue b/src/components/Menu/Bar.vue
@@ -34,7 +34,9 @@
 				v-bind="{ actionEntry }"
 				:key="`text-action--${actionEntry._key}`" />
 		</div>
-		<slot />
+		<div class="text-menubar__slot">
+			<slot />
+		</div>
 	</div>
 </template>
 
@@ -213,7 +215,13 @@ export default {
 		.text-menubar__entries {
 			display: flex;
 			flex-grow: 1;
-			margin-left: calc((100% - 660px) / 2);
+			margin-left: calc((100% - var(--text-editor-max-width)) / 2);
+		}
+
+		.text-menubar__slot {
+			// width: 100%;
+			justify-content: flex-end;
+			display: flex;
 		}
 
 		&.text-menubar--is-workspace {