diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
index a418960e17b0e..a0dd9b5c9cb28 100644
--- 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
index a7f9ff95485cc..20f2663593ce7 100644
--- 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
index 53bf0b0bc7134..72ad61b531a8b 100644
--- a/browser/images/lc_morebutton.svg
+++ b/browser/images/lc_morebutton.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/browser/src/control/Control.NotebookbarWriter.js b/browser/src/control/Control.NotebookbarWriter.js
index a22abf56d694e..ea43e86e441e7 100644
--- 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
index c0cd4d1090170..5af74a392ed49 100644
--- 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() {