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 · Jan 30, 2025 · 1b80927 · 1b80927
1 parent ea270f6
commit 1b80927
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
@@ -387,7 +387,7 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 /* Styles preview */
 
 #stylesview {
-	height: 64px;
+	height: 66px;
 	width: 35vw;
 	overflow: auto;
 	display: grid;
@@ -403,6 +403,33 @@ 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: 66px;
+	margin-left: -5px;
+	box-sizing: border-box;
+}
+
+#stylesview-btn.vertical {
+	gap: 0;
+}
+
+#stylesview-btn button img {
+	width: var(--btn-img-size-m) !important;
+	height: var(--btn-img-size-m) !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/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_scrolltoprevious.svg',
+					},
+					{
+						'id': 'scroll-down',
+						'type': 'customtoolitem',
+						'text': _('Scroll down'),
+						'command': 'scrollpreviewdown',
+						'icon': 'lc_scrolltonext.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() {