StylePreview: Add scroll buttons

- added scroll up and down btn for stylepreview in notebookbar - added 'more' button option which is a toggle button opens the stylist Signed-off-by: Darshan-upadhyay1110 <[email protected]> Change-Id: I230ddefe3cb68dad3ba46b12eaabb12e99bad6db
CollaboraOnline · Feb 3, 2025 · 4ba2c13 · 4ba2c13
1 parent ea270f6
commit 4ba2c13
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 5 deletions.
diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
@@ -72,10 +72,6 @@ img.sidebar.ui-drawing-area {
 	padding: 0;
 }
 
-.ui-expander.jsdialog.sidebar .ui-expander-icon-right img {
-	filter: brightness(2);
-}
-
 .ui-expander.jsdialog.sidebar .ui-expander-icon-right:hover img {
 	filter: none;
 }

diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
@@ -403,6 +403,37 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 	background-color: var(--color-stylesview-background);
 	filter: brightness(var(--brightness-stylesview));
 	box-sizing: border-box;
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+#stylesview-btn {
+	border: 1px solid var(--color-stylesview-border);
+	border-top-right-radius: var(--border-radius);
+	border-bottom-right-radius: var(--border-radius);
+	height: 64px;
+	margin-inline-start: -5px;
+	box-sizing: border-box;
+}
+
+#stylesview-btn.vertical {
+	gap: 0;
+}
+
+#stylesview-btn div{
+	border: none;
+}
+
+#stylesview-btn button img {
+	width: var(--btn-img-size-s) !important;
+	height: var(--btn-img-size-s) !important;
+	box-sizing: border-box;
+}
+
+#stylesview-btn button {
+	width: var(--btn-size-s) !important;
+	height: var(--btn-size-s) !important;
+	padding: 0px 0px 4px !important;
 }
 
 #stylesview:hover {

diff --git a/browser/images/lc_morebutton.svg b/browser/images/lc_morebutton.svg
diff --git a/browser/src/control/Control.NotebookbarWriter.js b/browser/src/control/Control.NotebookbarWriter.js
@@ -832,6 +832,35 @@ L.Control.NotebookbarWriter = L.Control.Notebookbar.extend({
 				'entries': [],
 				'vertical': 'false'
 			},
+			{
+				'id': 'stylesview-btn',
+				'type': 'container',
+				'children': [
+					{
+						'id': 'scroll-up',
+						'type': 'customtoolitem',
+						'text': _('Scroll up'),
+						'command': 'scrollpreviewup',
+						'icon': 'lc_searchprev.svg',
+					},
+					{
+						'id': 'scroll-down',
+						'type': 'customtoolitem',
+						'text': _('Scroll down'),
+						'command': 'scrollpreviewdown',
+						'icon': 'lc_searchnext.svg',
+					},
+					{
+						'id': 'format-style-list-dialog',
+						'type': 'toolitem',
+						'text': _('Style list'),
+						'command': '.uno:SidebarDeck.StyleListDeck',
+						'icon': 'lc_morebutton.svg',
+						'accessibility': { focusBack: true, combination: 'SD', de: null }
+					},
+				],
+				'vertical': 'true'
+			},
 			{ type: 'separator', id: 'home-stylesview-break', orientation: 'vertical' },
 			{
 				'type': 'container',

diff --git a/browser/src/docdispatcher.ts b/browser/src/docdispatcher.ts
@@ -312,6 +312,22 @@ class Dispatcher {
 		this.actionsMap['collapsenotebookbar'] = () => {
 			app.map.uiManager.collapseNotebookbar();
 		};
+
+		this.actionsMap['scrollpreviewup'] = () => {
+			const stylePreview = document.getElementById('stylesview');
+			stylePreview.scrollBy({
+				top: -stylePreview.offsetHeight,
+				behavior: 'smooth',
+			}); // Scroll up based on stylepreview height
+		};
+
+		this.actionsMap['scrollpreviewdown'] = () => {
+			const stylePreview = document.getElementById('stylesview');
+			stylePreview.scrollBy({
+				top: stylePreview.offsetHeight,
+				behavior: 'smooth',
+			}); // Scroll up based on stylepreview height
+		};
 	}
 
 	private addExportCommands() {