feat: reorganize toolbar and use icon for saved indicator

Signed-off-by: Luka Trovic <luka@nextcloud.com>
nextcloud · Jul 6, 2022 · 051bb73 · 051bb73
1 parent 44eba0f
commit 051bb73
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 134 deletions.
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
@@ -54,7 +54,7 @@
 					:autohide="autohide"
 					:loaded.sync="menubarLoaded">
 					<div class="text-editor__session-list">
-						<div v-if="isMobile" v-tooltip="lastSavedStatusTooltip" :class="saveStatusClass" />
+						<ContentSave v-if="isMobile" v-tooltip="lastSavedStatusTooltip" :fill-color="savedColor" />
 						<div v-else
 							v-tooltip="lastSavedStatusTooltip"
 							class="save-status"
@@ -125,6 +125,7 @@ import { Collaboration, Keymap, UserColor } from './../extensions/index.js'
 import isMobile from './../mixins/isMobile.js'
 import store from './../mixins/store.js'
 import Lock from 'vue-material-design-icons/Lock'
+import ContentSave from 'vue-material-design-icons/ContentSave'
 import MenuBar from './Menu/MenuBar.vue'
 import EditorMidiaHandler from './EditorMediaHandler.vue'
 
@@ -142,6 +143,7 @@ export default {
 		GuestNameDialog: () => import(/* webpackChunkName: "editor-guest" */'./GuestNameDialog.vue'),
 		SessionList: () => import(/* webpackChunkName: "editor-collab" */'./SessionList.vue'),
 		Lock,
+		ContentSave,
 	},
 	directives: {
 		Tooltip,
@@ -267,6 +269,12 @@ export default {
 			}
 			return this.dirtyStateIndicator ? t('text', 'Saving …') : t('text', 'Saved')
 		},
+		savedColor() {
+			if (this.hasConnectionIssue) {
+				return 'var(--color-error)'
+			}
+			return this.dirtyStateIndicator ? 'var(--color-background-dark)' : 'var(--color-primary)'
+		},
 		lastSavedStatusClass() {
 			return this.syncError && this.lastSavedString !== '' ? 'error' : ''
 		},

diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss
@@ -72,3 +72,9 @@
 		}
 	}
 }
+
+@media (max-width: 660px) {
+	.emoji-popover {
+		top: calc(-55vh) !important;
+	}
+}
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
@@ -40,13 +40,13 @@
 					@call:help="showHelp" />
 			</template>
 			<template v-else>
-				<div class="top">
+				<div class="top-menubar">
 					<ActionEntry v-for="actionEntry of topEntries"
 						v-bind="{ actionEntry }"
 						:key="`text-action--${actionEntry.key}`"
 						@call:help="showHelp" />
 				</div>
-				<div class="bottom">
+				<div class="bottom-menubar">
 					<ActionEntry v-for="actionEntry of bottomEntries"
 						v-bind="{ actionEntry }"
 						:key="`text-action--${actionEntry.key}`"
@@ -287,16 +287,17 @@ export default {
 			.text-menubar__entries {
 				margin-left: 0;
 			}
-
-			.top {
+			.top-menubar {
 				display: flex;
 			}
 
-			.bottom {
+			.bottom-menubar {
 				display: flex;
 				position: fixed;
-				top: calc(100vh - 100px);
+				top: calc(100vh - 15vh);
 				left: 0;
+				width: 100%;
+				overflow-y: scroll;
 			}
 		}
 	}

diff --git a/src/components/Menu/mobileEntries.js b/src/components/Menu/mobileEntries.js
@@ -72,68 +72,56 @@ export default [
 		position: 'top',
 	},
 	{
-		key: 'style',
-		label: t('text', 'Style'),
-		keyModifiers: ['ctrl', 'shift'],
-		visible: false,
+		key: 'bold',
+		label: t('text', 'Bold'),
+		keyChar: 'b',
+		keyModifiers: ['ctrl'],
 		icon: FormatBold,
-		isActive: 'styling',
-		children: [
-			{
-				key: 'bold',
-				label: t('text', 'Bold'),
-				keyChar: 'b',
-				keyModifiers: ['ctrl'],
-				icon: FormatBold,
-				isActive: 'strong',
-				action: (command) => {
-					return command.toggleBold()
-				},
-				priority: 6,
-				position: 'top',
-			},
-			{
-				key: 'italic',
-				label: t('text', 'Italic'),
-				keyChar: 'i',
-				keyModifiers: ['ctrl'],
-				icon: FormatItalic,
-				isActive: 'em',
-				action: (command) => {
-					return command.toggleItalic()
-				},
-				priority: 7,
-				position: 'top',
-			},
-			{
-				key: 'underline',
-				label: t('text', 'Underline'),
-				keyChar: 'u',
-				keyModifiers: ['ctrl'],
-				icon: FormatUnderline,
-				isActive: 'underline',
-				action: (command) => {
-					return command.toggleUnderline()
-				},
-				priority: 14,
-				position: 'top',
-			},
-			{
-				key: 'strikethrough',
-				label: t('text', 'Strikethrough'),
-				keyChar: 'd',
-				keyModifiers: ['ctrl'],
-				icon: FormatStrikethrough,
-				isActive: 'strike',
-				action: (command) => {
-					return command.toggleStrike()
-				},
-				priority: 15,
-				position: 'top',
-			},
-		],
-		priority: 1,
-		position: 'top',
+		isActive: 'strong',
+		action: (command) => {
+			return command.toggleBold()
+		},
+		priority: 6,
+		position: 'bottom',
+	},
+	{
+		key: 'italic',
+		label: t('text', 'Italic'),
+		keyChar: 'i',
+		keyModifiers: ['ctrl'],
+		icon: FormatItalic,
+		isActive: 'em',
+		action: (command) => {
+			return command.toggleItalic()
+		},
+		priority: 7,
+		position: 'bottom',
+	},
+	{
+		key: 'underline',
+		label: t('text', 'Underline'),
+		keyChar: 'u',
+		keyModifiers: ['ctrl'],
+		icon: FormatUnderline,
+		isActive: 'underline',
+		action: (command) => {
+			return command.toggleUnderline()
+		},
+		priority: 14,
+		position: 'bottom',
+	},
+	{
+		key: 'strikethrough',
+		label: t('text', 'Strikethrough'),
+		keyChar: 'd',
+		keyModifiers: ['ctrl'],
+		icon: FormatStrikethrough,
+		isActive: 'strike',
+		action: (command) => {
+			return command.toggleStrike()
+		},
+		priority: 15,
+		position: 'bottom',
 	},
 	{
 		key: 'headings',
@@ -200,69 +188,62 @@ export default [
 			},
 		],
 		priority: 1,
-		position: 'top',
+		position: 'bottom',
 	},
 	{
-		key: 'lists',
-		label: t('text', 'Lists'),
-		keyChar: '1…6',
+		key: 'unordered-list',
+		label: t('text', 'Unordered list'),
+		keyChar: '8',
 		keyModifiers: ['ctrl', 'shift'],
-		visible: false,
+		isActive: 'bulletList',
 		icon: FormatListBulleted,
-		isActive: ['bulletList', 'orderedList', 'taskList'],
-		children: [
-			{
-				key: 'unordered-list',
-				label: t('text', 'Unordered list'),
-				icon: FormatListBulleted,
-				isActive: 'bulletList',
-				keyChar: '8',
-				keyModifiers: ['ctrl', 'shift'],
-				action: (command) => {
-					return command.toggleBulletList()
-				},
-			},
-			{
-				key: 'ordered-list',
-				label: t('text', 'Ordered list'),
-				icon: FormatListNumbered,
-				isActive: 'orderedList',
-				keyChar: '9',
-				keyModifiers: ['ctrl', 'shift'],
-				action: (command) => {
-					return command.toggleOrderedList()
-				},
-			},
-			{
-				key: 'task-list',
-				label: t('text', 'To-Do list'),
-				icon: FormatListCheckbox,
-				isActive: 'taskList',
-				action: (command) => command.toggleTaskList(),
-			},
-		],
-		priority: 1,
-		position: 'top',
+		action: (command) => {
+			return command.toggleBulletList()
+		},
+		priority: 8,
+		position: 'bottom',
 	},
 	{
-		key: 'blocks',
-		label: t('text', 'Blocks'),
+		key: 'ordered-list',
+		label: t('text', 'Ordered list'),
+		keyChar: '9',
 		keyModifiers: ['ctrl', 'shift'],
-		visible: false,
+		isActive: 'orderedList',
+		icon: FormatListNumbered,
+		action: (command) => {
+			return command.toggleOrderedList()
+		},
+		priority: 9,
+		position: 'bottom',
+	},
+	{
+		key: 'task-list',
+		label: t('text', 'To-Do list'),
+		isActive: 'taskList',
+		icon: FormatListCheckbox,
+		action: (command) => command.toggleTaskList(),
+		priority: 10,
+	},
+	{
+		key: 'blockquote',
+		label: t('text', 'Blockquote'),
+		keyChar: '>',
+		keyModifiers: ['ctrl'],
+		isActive: 'blockquote',
 		icon: FormatQuote,
-		isActive: 'blocks',
+		action: (command) => {
+			return command.toggleBlockquote()
+		},
+		priority: 12,
+		position: 'bottom',
+	},
+	{
+		key: 'callouts',
+		label: t('text', 'Callouts'),
+		visible: false,
+		icon: Info,
+		isActive: 'callout',
 		children: [
-			{
-				key: 'blockquote',
-				label: t('text', 'Blockquote'),
-				keyChar: '>',
-				keyModifiers: ['ctrl'],
-				isActive: 'blockquote',
-				icon: FormatQuote,
-				action: (command) => {
-					return command.toggleBlockquote()
-				},
-			},
 			{
 				key: 'callout-info',
 				label: t('text', 'Info'),
@@ -299,17 +280,19 @@ export default [
 					return command.toggleCallout({ type: 'error' })
 				},
 			},
-			{
-				key: 'code-block',
-				label: t('text', 'Code block'),
-				isActive: 'codeBlock',
-				icon: CodeTags,
-				action: (command) => {
-					return command.toggleCodeBlock()
-				},
-			},
 		],
-		priority: 1,
+		priority: 3,
+		position: 'bottom',
+	},
+	{
+		key: 'code-block',
+		label: t('text', 'Code block'),
+		isActive: 'codeBlock',
+		icon: CodeTags,
+		action: (command) => {
+			return command.toggleCodeBlock()
+		},
+		priority: 13,
 		position: 'bottom',
 	},
 	{
@@ -331,15 +314,15 @@ export default [
 		action: (command, emojiObject = {}) => {
 			return command.emoji(emojiObject)
 		},
-		priority: 4,
+		priority: 19,
 		position: 'bottom',
 	},
 	{
 		key: 'insert-image',
 		label: t('text', 'Insert image'),
 		icon: Images,
 		component: ActionImageUpload,
-		priority: 2,
+		priority: 18,
 		position: 'bottom',
 	},
 	{