fix(UI): set button size with a CSS variable

Signed-off-by: Maks Wolkowinski <[email protected]> Change-Id: I6b02681d04dee8cb90b40c6007bd4044dbbb3975 Signed-off-by: Darshan-upadhyay1110 <[email protected]>
CollaboraOnline · Oct 25, 2024 · 2e1ba0d · 2e1ba0d
1 parent 86c9358
commit 2e1ba0d
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 36 deletions.
diff --git a/browser/css/btns.css b/browser/css/btns.css
@@ -10,14 +10,10 @@
 }
 
 /* toolbuttons */
-
-.unotoolbutton .unobutton img {
-	width: var(--btn-size);
-	height: var(--btn-size);
-}
 .unotoolbutton .unobutton.selected + .ui-content.unolabel {
 	color: var(--color-text-dark);
 }
+
 /* toolbuttons non selected */
 #clearFormatting,
 .hasnotebookbar .ui-content.unotoolbutton.has-label,

diff --git a/browser/css/cool.css b/browser/css/cool.css
@@ -13,9 +13,16 @@
 	/* Shared color for cell and selection border */
 	--cell-cursor-selection-border-color: var(--color-primary);
 
-	--btn-size: 24px;
-	--btn-size-m: 18px;
-	--btn-size-s: 16px;
+	--btn-size: 28px;
+	--btn-padding: 2px;
+	--btn-img-size: calc(var(--btn-size) - var(--btn-padding) * 2);
+
+	--btn-size-m: 22px;
+	--btn-img-size-m: calc(var(--btn-size-m) - var(--btn-padding) * 2);
+
+	--btn-size-s: 20px;
+	--btn-img-size-s: calc(var(--btn-size-s) - var(--btn-padding) * 2);
+
 	--border-radius: 4px; /* buttons, widgets */
 	--border-radius-large: 10px; /* dialog */
 

diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
@@ -418,8 +418,8 @@ td.jsdialog > [id^='table-box']:not(.sidebar) {
 }
 
 .ui-listview-icon {
-	height: var(--btn-size-s);
-	width: var(--btn-size-s);
+	height: var(--btn-img-size-s);
+	width: var(--btn-img-size-s);
 	margin-inline-end: 8px;
 	vertical-align: middle;
 }
@@ -1318,10 +1318,8 @@ input[type='number']:hover::-webkit-outer-spin-button {
 /* color selector */
 .unotoolbutton .selected-color {
 	height: 5px;
-	width: 24px;
+	width: calc(var(--btn-img-size) - var(--btn-padding) * 2);
 	position: relative;
-	grid-column: 1;
-	grid-row: 2;
 	border: 1px solid var(--color-border-dark);
 	border-radius: 7px;
 	outline: 1px solid var(--color-background-lighter);
@@ -1378,8 +1376,9 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	background-color: var(--color-background-dark);
 }
 
-.jsdialog.menubutton img {
-	vertical-align: middle;
+.jsdialog .unobutton img {
+	min-width: 0;
+	min-height: 0;
 }
 
 .menubutton .arrow {
@@ -1765,13 +1764,18 @@ input[type='number']:hover::-webkit-outer-spin-button {
 
 /* toolbuttons */
 .jsdialog .ui-content.unobutton {
+	height: var(--btn-size);
+	width: var(--btn-size);
 	display: flex;
 	flex-direction: column;
-	padding: 3px;
+	padding: var(--btn-padding);
 	vertical-align: middle;
 	background-color: transparent;
 	border: none;
 	position: relative;
+	overflow: hidden;
+	justify-content: center;
+	align-items: center;
 }
 
 .unoarrow::after,

diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
@@ -26,11 +26,6 @@ img.sidebar.ui-drawing-area {
 	margin: 0;
 }
 
-.sidebar .unobutton > img {
-	width: var(--btn-size);
-	height: var(--btn-size);
-}
-
 #document-container:not(.mobile) + #sidebar-dock-wrapper {
 	padding: 0;
 	box-sizing: border-box;
@@ -184,6 +179,10 @@ div.sidebar.ui-grid .checkbutton.sidebar,
 	box-shadow: revert;
 }
 
+.sidebar #FrameLineColor-button img {
+	margin-bottom: -4px;
+}
+
 /* writer */
 
 #ParaPropertyPanel.sidebar #backgroundcolor,

diff --git a/browser/css/menubar.css b/browser/css/menubar.css
@@ -74,7 +74,6 @@
 	position: relative;
 	background: transparent;
 	line-height: 0;
-	height: 24px;
 	align-items: center;
 	justify-content: center;
 }

diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
@@ -83,18 +83,25 @@ button.ui-tab.notebookbar {
 	height: 31px;
 }
 
+.notebookbar-shortcuts-bar .unotoolbutton.notebookbar .unobutton {
+	width: var(--btn-size-m);
+	height: var(--btn-size-m);
+	padding: var(--btn-padding);
+	justify-content: center;
+	align-items: center;
+}
+
 .notebookbar-shortcuts-bar .unotoolbutton.notebookbar .unobutton img {
-	width: 16px !important;
-	height: 16px !important;
-	margin: 0 !important;
+	width: 16px;
+	height: 16px;
+	margin: 0;
 }
 
 .unoSave.savemodified .unobutton img,
 .savemodified.unotoolbutton .unobutton img,
 #save.saving img,
 #save.saved img {
 	box-sizing: border-box;
-	padding-left: 24px;
 }
 
 html:not([data-theme='dark']) .unoSave.savemodified .unobutton img,
@@ -202,9 +209,9 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 
 .unotoolbutton.notebookbar .unobutton {
 	box-sizing: border-box;
-	padding: 3px;
-	min-width: var(--btn-size);
-	min-height: var(--btn-size);
+	padding: var(--btn-padding);
+	width: var(--btn-size);
+	height: var(--btn-size);
 	background-color: transparent;
 	margin: 0;
 	vertical-align: middle;
@@ -215,6 +222,8 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 	display: flex;
 	flex-direction: column;
 	position: relative;
+	justify-content: center;
+	align-items: center;
 }
 
 .unotoolbutton.notebookbar .unobutton::after {
@@ -236,8 +245,8 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 }
 
 .ui-tabs-content .unobutton > img {
-	width: var(--btn-size);
-	height: var(--btn-size);
+	min-height: 0;
+	min-width: 0;
 }
 
 .has-dropdown--color.notebookbar {
@@ -362,10 +371,6 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 	line-height: 22px;
 }
 
-.has-colorpicker.menubutton img {
-	width: var(--btn-size-m) !important;
-	height: var(--btn-size-m) !important;
-}
 /* Styles preview */
 
 #stylesview {

diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
@@ -73,6 +73,7 @@
 #toolbar-down {
 	z-index: 11;
 	border-top: 1px solid var(--color-toolbar-border);
+	min-height: 32px;
 }
 #toolbar-down > .ui-scroll-wrapper > .vertical {
 	/* To do: test if all .ui-scroll-wrapper.vertical

diff --git a/browser/src/control/jsdialog/Widget.ColorPickerButton.js b/browser/src/control/jsdialog/Widget.ColorPickerButton.js
@@ -188,7 +188,7 @@ JSDialog.colorPickerButton = function (parentContainer, data, builder) {
 			var valueNode = L.DomUtil.create(
 				'span',
 				'selected-color',
-				menubutton.container,
+				menubutton.button,
 			);
 			valueNode.addEventListener('click', applyFunction);