Writer: Notebookbar: Home tab: Add ui separators in between groups

Before this commit, few users reported some level of friction when attempting to find buttons. - Group visually groups of buttons by means of separators. Thus, making it easier to identify the "undo, redo group", "Clipboard group", "font group", etc. Signed-off-by: Pedro Pinto Silva <[email protected]> Change-Id: I48136194d03c109a27fb7faafbe0cd9a54fca1a1
CollaboraOnline · Jan 24, 2025 · 7e668d8 · 7e668d8
1 parent 7a50f22
commit 7e668d8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
@@ -187,6 +187,14 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 	grid-gap: 4px;
 }
 
+.notebookbar.ui-separator {
+	width: 1px;
+	background-color: var(--color-toolbar-border);
+	height: 100%;
+	margin: 0 2px;
+	box-sizing: border-box;
+}
+
 .horizontal.notebookbar {
 	display: grid;
 	grid-auto-flow: column;

diff --git a/browser/src/control/Control.NotebookbarWriter.js b/browser/src/control/Control.NotebookbarWriter.js
@@ -509,6 +509,7 @@ L.Control.NotebookbarWriter = L.Control.Notebookbar.extend({
 				],
 				'vertical': 'true'
 			},
+			{ type: 'separator', id: 'home-undoredo-break', orientation: 'vertical' },
 			{
 				'id': 'home-paste:PasteMenu',
 				'type': 'menubutton',
@@ -560,6 +561,7 @@ L.Control.NotebookbarWriter = L.Control.Notebookbar.extend({
 				],
 				'vertical': 'true'
 			},
+			{ type: 'separator', id: 'home-resertattributes-break', orientation: 'vertical' },
 			{
 				'type': 'container',
 				'children': [
@@ -693,13 +695,15 @@ L.Control.NotebookbarWriter = L.Control.Notebookbar.extend({
 				],
 				'vertical': 'true'
 			},
+			{ type: 'separator', id: 'home-fontcombobox-break', orientation: 'vertical' },
 			{
 				'id': 'home-insert-annotation',
 				'type': 'bigtoolitem',
 				'text': _UNO('.uno:InsertAnnotation'),
 				'command': '.uno:InsertAnnotation',
 				'accessibility': { focusBack: false, combination: 'ZC', de: 'ZC' }
 			},
+			{ type: 'separator', id: 'home-insertannotation-break', orientation: 'vertical' },
 			{
 				'type': 'container',
 				'children': [
@@ -828,6 +832,7 @@ L.Control.NotebookbarWriter = L.Control.Notebookbar.extend({
 				'entries': [],
 				'vertical': 'false'
 			},
+			{ type: 'separator', id: 'home-stylesview-break', orientation: 'vertical' },
 			{
 				'type': 'container',
 				'children': [
@@ -875,6 +880,7 @@ L.Control.NotebookbarWriter = L.Control.Notebookbar.extend({
 				],
 				'vertical': 'true'
 			},
+			{ type: 'separator', id: 'home-charmapcontrol-break', orientation: 'vertical' },
 			{
 				'type': 'container',
 				'children': [