feat(UI): Improve split button styling

Signed-off-by: Maks Wolkowinski <[email protected]> Change-Id: I4f0474e02411ada5547c8c2f23dda22cb4433557
CollaboraOnline · Sep 12, 2024 · 11a8e52 · 11a8e52
1 parent 42e9dac
commit 11a8e52
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 47 deletions.
diff --git a/browser/css/btns.css b/browser/css/btns.css
@@ -25,17 +25,32 @@
 .hasnotebookbar .ui-content.unotoolbutton:not(.has-label):not(.inline),
 .sidebar.unotoolbutton,
 .jsdialog.unotoolbutton,
+.notebookbar.unotoolbutton,
 #closebutton {
 	background-color: transparent;
 	border: 1px solid transparent;
 	color: var(--color-main-text);
 	border-radius: var(--border-radius);
 }
+
+/* toolbuttons non selected hover */
+.hasnotebookbar .ui-content.unotoolbutton.has-label:hover,
+.hasnotebookbar .ui-content.unotoolbutton.inline:hover,
+.hasnotebookbar .ui-content.unotoolbutton:not(.has-label):not(.inline):hover,
+.sidebar.unotoolbutton:hover,
+.jsdialog.unotoolbutton:hover,
+.notebookbar.unotoolbutton:hover {
+	border: 1px solid var(--color-border-darker);
+	color: var(--color-text-darker);
+	border-radius: var(--border-radius);
+}
+
 /* toolbuttons selected */
 .hasnotebookbar .ui-content.unotoolbutton.selected.has-label,
 .hasnotebookbar .ui-content.unotoolbutton.selected.inline,
 .hasnotebookbar .ui-content.unotoolbutton.selected:not(.has-label):not(.inline),
 .sidebar.unotoolbutton.selected,
+.notebookbar.unotoolbutton.selected,
 .jsdialog.unotoolbutton.selected {
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
@@ -50,14 +65,16 @@
 	background-color: var(--color-background-darker);
 	border-color: var(--color-border-darker);
 }
+
 /* toolbuttons selected hover */
+.hasnotebookbar .ui-content.unotoolbutton.has-label:hover,
 .hasnotebookbar .ui-content.unotoolbutton.selected:hover,
 .unotoolbutton.notebookbar:hover,
 .unotoolbutton.jsdialog:hover,
 .hasnotebookbar .ui-content.unotoolbutton.selected:not(.has-label):not(.inline):hover,
 .sidebar.unotoolbutton.selected:hover,
+.notebookbar.unotoolbutton.selected:hover,
 .jsdialog.unotoolbutton.selected:hover {
-	background-color: var(--color-background-darker) !important;
 	border: 1px solid var(--color-border-darker);
 	color: var(--color-text-darker);
 	border-radius: var(--border-radius);

diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
@@ -248,6 +248,7 @@ td.jsdialog > [id^='table-box']:not(.sidebar) {
 .ui-toolbar .ui-separator.vertical {
 	height: 14px;
 	align-self: center;
+	margin: 0 3px;
 }
 
 .jsdialog.ui-separator.horizontal {
@@ -1311,7 +1312,6 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	height: 5px;
 	width: 24px;
 	position: relative;
-	top: -5px;
 	grid-column: 1;
 	grid-row: 2;
 	border: 1px solid var(--color-border-dark);
@@ -1339,17 +1339,18 @@ input[type='number']:hover::-webkit-outer-spin-button {
 .arrowbackground {
 	box-sizing: border-box;
 	width: 16px;
-	height: 24px;
+	height: 100%;
 	display: flex;
 	align-items: center;
 	border-left: 1px solid transparent;
 	background-color: transparent;
 	grid-column: 3;
+	position: relative;
 }
 
 .arrowbackground:hover {
 	border-left-color: transparent;
-	background-color: transparent;
+	background-color: var(--color-background-darker);
 }
 
 .unoarrow:not([disabled]):hover, .arrowbackground:not([disabled]):hover .unoarrow {
@@ -1369,10 +1370,6 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	background-color: var(--color-background-dark);
 }
 
-.menubutton span {
-	margin: 0px 5px;
-}
-
 .jsdialog.menubutton img {
 	vertical-align: middle;
 }
@@ -1758,17 +1755,30 @@ input[type='number']:hover::-webkit-outer-spin-button {
 }
 
 /* toolbuttons */
-
-.jsdialog:not(.menubutton) > .ui-content.unobutton {
-	width: var(--btn-size);
-}
-
 .jsdialog .ui-content.unobutton {
-	height: var(--btn-size);
-	padding: 0px;
+	display: flex;
+	flex-direction: column;
+	padding: 3px;
 	vertical-align: middle;
 	background-color: transparent;
 	border: none;
+	position: relative;
+}
+
+.unoarrow::after,
+.jsdialog .ui-content.unobutton::after {
+	--click-increment: -1px;
+	position: absolute;
+	content: '';
+	top: var(--click-increment);
+	right: var(--click-increment);
+	bottom: var(--click-increment);
+	left: var(--click-increment);
+}
+
+.notebookbar .ui-content.unobutton:hover,
+.jsdialog .ui-content.unobutton:hover {
+	background-color: var(--color-background-darker);
 }
 
 .unotoolbutton.has-dropdown {
@@ -1778,10 +1788,6 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	grid-template-rows: auto 0px;
 }
 
-.unotoolbutton.jsdialog.sidebar.ui-content > .arrowbackground {
-	width: auto;
-}
-
 /* handling show/hide state */
 .hidden {
 	display: none !important;

diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
@@ -23,7 +23,6 @@ img.sidebar.ui-drawing-area {
 .sidebar .ui-content .unobutton {
 	box-sizing: border-box;
 	margin: 0;
-	padding: 0;
 }
 
 .sidebar .unobutton > img {
@@ -70,6 +69,7 @@ img.sidebar.ui-drawing-area {
 	width: 10px;
 	height: 10px;
 	margin-inline-end: 10px;
+	padding: 0;
 }
 
 .ui-expander.jsdialog.sidebar .ui-expander-icon-right img {
@@ -89,6 +89,9 @@ img.sidebar.ui-drawing-area {
 #ParaPropertyPanel.sidebar.ui-grid #box1.sidebar.ui-grid-cell,
 #NumberFormatPropertyPanel.sidebar.ui-grid #grid1 {
 	justify-content: space-between !important;
+	row-gap: 8px;
+	grid-auto-flow: revert !important;
+	grid-template-columns: repeat(2, auto);
 }
 
 /* section content */
@@ -124,26 +127,10 @@ div.sidebar.ui-grid .checkbutton.sidebar,
 	background-color: var(--color-background-dark);
 }
 
-.menubutton.sidebar span {
-	display: none;
-}
-
-.menubutton.sidebar:hover span {
-	position: absolute;
-	font-size: var(--default-font-size);
-	display: block;
-	width: auto;
-	padding: 14px 4px;
-	border-radius: var(--border-radius);
-	white-space: nowrap;
-	margin-inline-start: -14px;
-	margin-block-start: 2px;
-}
-
 .sidebar.ui-grid.ui-grid-cell .menubutton {
 	justify-content: space-between;
 	justify-self: end;
-	padding: 4px;
+	padding: 0;
 	margin-right: 1px;
 }
 
@@ -177,7 +164,7 @@ div.sidebar.ui-grid .checkbutton.sidebar,
 }
 .sidebar.unotoolbutton {
 	border: 1px solid transparent;
-	margin-right: 5px;
+	margin-right: 3px;
 }
 .sidebar.jsdialog.checkbutton {
 	font-size: var(--default-font-size);
@@ -192,6 +179,10 @@ div.sidebar.ui-grid .checkbutton.sidebar,
 	justify-content: center;
 }
 
+.sidebar.menubutton.has-colorpicker:hover span {
+	box-shadow: revert;
+}
+
 /* writer */
 
 #ParaPropertyPanel.sidebar #backgroundcolor,

diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
@@ -178,6 +178,8 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 	grid-auto-flow: column;
 	grid-gap: 4px;
 	align-items: center;
+	justify-items: center;
+	width: max-content;
 }
 
 /* unobuttons */
@@ -199,17 +201,33 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 .unotoolbutton.notebookbar .unobutton {
 	cursor: pointer;
 	box-sizing: border-box;
-	padding: 0;
-	width: var(--btn-size);
-	height: var(--btn-size);
+	padding: 3px;
+	min-width: var(--btn-size);
+	min-height: var(--btn-size);
 	background-color: transparent;
 	margin: 0;
 	vertical-align: middle;
 	border: none;
 	line-height: 0em;
 	color: var(--color-main-text);
 	font-size: var(--default-font-size);
-	border-radius: var(--border-radius);
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+.unotoolbutton.notebookbar .unobutton::after {
+	--click-increment: -1px;
+	position: absolute;
+	content: '';
+	top: var(--click-increment);
+	right: var(--click-increment);
+	bottom: var(--click-increment);
+	left: var(--click-increment);
+}
+
+.unotoolbutton.notebookbar.inline:hover {
+	background-color: var(--color-background-darker);
 }
 
 .jsdialog .ui-tabs-content {
@@ -280,7 +298,6 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 }
 
 .unotoolbutton.notebookbar {
-	margin-inline-end: 5px !important;
 	text-align: center;
 }
 
@@ -339,7 +356,6 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 .has-colorpicker.menubutton img {
 	width: var(--btn-size-m) !important;
 	height: var(--btn-size-m) !important;
-	padding-bottom: calc(var(--btn-size) - var(--btn-size-m));
 }
 /* Styles preview */
 

diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
@@ -46,7 +46,7 @@
 .ui-toolbar > div > div > .ui-pushbutton,
 .ui-toolbar > div > div .ui-badge {
 	margin: auto 2px;
-	padding: 3px;
+	padding: 0;
 	white-space: nowrap;
 	height: inherit;
 }

diff --git a/browser/src/control/Control.JSDialogBuilder.js b/browser/src/control/Control.JSDialogBuilder.js
@@ -2760,8 +2760,8 @@ L.Control.JSDialogBuilder = L.Control.extend({
 
 			if (typeof menubutton === 'object') {
 				L.DomUtil.addClass(menubutton.container, data.class ? data.class + ' has-colorpicker': 'has-colorpicker');
-
-				var valueNode = L.DomUtil.create('div', 'selected-color', menubutton.container);
+				
+				var valueNode = L.DomUtil.create('span', 'selected-color', menubutton.button);
 				valueNode.addEventListener('click', applyFunction);
 
 				var updateFunction = function () {

diff --git a/cypress_test/integration_tests/desktop/impress/delete_objects_spec.js b/cypress_test/integration_tests/desktop/impress/delete_objects_spec.js
@@ -37,6 +37,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Delete Objects', function(
 	});
 
 	it('Delete Chart' , function() {
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		//insert
 		cy.cGet('#insertobjectchart').click();