some space-saving measures for checkboxes

Some eye-candy as well

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

css/icons.css

@@ -1,3 +1,34 @@
+.ui.inline-icon {
+	position: relative;
+
+	display: flex;
+}
+
+.ui.inline-icon::after {
+	content: "";
+	display: block;
+
+	position: absolute;
+
+	box-sizing: border-box;
+
+	margin: auto;
+	top: 15%;
+	bottom: 15%;
+
+	mask-size: contain;
+	mask-repeat: no-repeat;
+
+	max-height: 70%;
+	aspect-ratio: 1;
+
+	left: 0;
+	right: 0;
+
+	background-color: var(--c-text);
+}
+
+.ui.inline-icon.icon-eye-off::after,
 .ui.icon > .icon-eye-off {
 	-webkit-mask-image: url("../res/icons/eye-off.svg");
 	mask-image: url("../res/icons/eye-off.svg");
@@ -42,3 +73,57 @@
 	-webkit-mask-image: url("../res/icons/settings.svg");
 	mask-image: url("../res/icons/settings.svg");
 }
+
+.ui.inline-icon.icon-grid::after,
+.ui.icon > .icon-grid {
+	-webkit-mask-image: url("../res/icons/grid.svg");
+	mask-image: url("../res/icons/grid.svg");
+}
+
+.ui.inline-icon.icon-venetian-mask::after,
+.ui.icon > .icon-venetian-mask {
+	-webkit-mask-image: url("../res/icons/venetian-mask.svg");
+	mask-image: url("../res/icons/venetian-mask.svg");
+}
+
+.ui.inline-icon.icon-brush::after,
+.ui.icon > .icon-brush {
+	-webkit-mask-image: url("../res/icons/brush.svg");
+	mask-image: url("../res/icons/brush.svg");
+}
+
+.ui.inline-icon.icon-paintbrush::after,
+.ui.icon > .icon-paintbrush {
+	-webkit-mask-image: url("../res/icons/paintbrush.svg");
+	mask-image: url("../res/icons/paintbrush.svg");
+}
+
+.ui.inline-icon.icon-expand::after,
+.ui.icon > .icon-expand {
+	-webkit-mask-image: url("../res/icons/expand.svg");
+	mask-image: url("../res/icons/expand.svg");
+}
+
+.ui.inline-icon.icon-pin::after,
+.ui.icon > .icon-pin {
+	-webkit-mask-image: url("../res/icons/pin.svg");
+	mask-image: url("../res/icons/pin.svg");
+}
+
+.ui.inline-icon.icon-box-select::after,
+.ui.icon > .icon-box-select {
+	-webkit-mask-image: url("../res/icons/box-select.svg");
+	mask-image: url("../res/icons/box-select.svg");
+}
+
+.ui.inline-icon.icon-maximize::after,
+.ui.icon > .icon-maximize {
+	-webkit-mask-image: url("../res/icons/maximize.svg");
+	mask-image: url("../res/icons/maximize.svg");
+}
+
+.ui.inline-icon.icon-clipboard-list::after,
+.ui.icon > .icon-clipboard-list {
+	-webkit-mask-image: url("../res/icons/clipboard-list.svg");
+	mask-image: url("../res/icons/clipboard-list.svg");
+}

css/ui/generic.css

@@ -37,6 +37,8 @@
 /* Slider Input */
 div.slider-wrapper {
 	margin: 5px;
+	margin-left: 0;
+	margin-right: 0;
 }
 
 div.slider-wrapper {
@@ -100,6 +102,83 @@ div.slider-wrapper > input.text {
 	background-color: transparent;
 }
 
+/* Checkbox Input */
+div.checkbox-array {
+	display: flex;
+
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+input.oo-checkbox[type="checkbox"] {
+	/* Hide original checkbox */
+	-webkit-appearance: none;
+	appearance: none;
+
+	flex: 1;
+
+	margin: 0;
+
+	min-width: 28px;
+	height: 28px;
+
+	background-color: var(--c-primary);
+
+	cursor: pointer;
+}
+
+input.oo-checkbox[type="checkbox"]:disabled {
+	background-color: #666 !important;
+	cursor: default !important;
+}
+
+input.oo-checkbox[type="checkbox"]:disabled:hover {
+	filter: none !important;
+}
+
+input.oo-checkbox[type="checkbox"]:checked::after {
+	background-color: #66f;
+}
+
+input.oo-checkbox[type="checkbox"]:hover {
+	background-color: var(--c-hover);
+}
+
+input.oo-checkbox[type="checkbox"]:active {
+	filter: brightness(120%);
+}
+
+input.oo-checkbox[type="checkbox"]:first-child {
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
+
+input.oo-checkbox[type="checkbox"]:last-child {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+/* Mask Inversion Checkbox */
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox::after {
+	background-color: var(--c-text);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:hover {
+	filter: brightness(120%);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:active {
+	filter: brightness(140%);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox {
+	background-color: #922;
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:checked {
+	background-color: #229;
+}
+
 /* Bare Select */
 
 .bareselector {

js/lib/toolbar.js

@@ -145,17 +145,24 @@ const toolbar = {
  * Premade inputs for populating the context menus
  */
 const _toolbar_input = {
-	checkbox: (state, dataKey, text, cb = null) => {
+	checkbox: (state, dataKey, text, classes, cb = null) => {
 		if (state[dataKey] === undefined) state[dataKey] = false;
 
 		const checkbox = document.createElement("input");
 		checkbox.type = "checkbox";
+		checkbox.classList.add("oo-checkbox", "ui", "inline-icon");
+
+		if (typeof classes === "string") classes = [classes];
+
+		if (classes) checkbox.classList.add(...classes);
 		checkbox.checked = state[dataKey];
 		checkbox.onchange = () => {
 			state[dataKey] = checkbox.checked;
 			cb && cb();
 		};
 
+		checkbox.title = text;
+
 		const label = document.createElement("label");
 		label.appendChild(checkbox);
 		label.appendChild(new Text(text));

js/ui/tool/colorbrush.js

@@ -349,13 +349,16 @@ const colorBrushTool = () =>
 					state.ctxmenu = {};
 
 					// Affects Mask Checkbox
+					const array = document.createElement("div");
 					const affectMaskCheckbox = _toolbar_input.checkbox(
 						state,
 						"affectMask",
-						"Affect Mask"
+						"Affect Mask",
-					).label;
+						"icon-venetian-mask"
+					).checkbox;
+					array.appendChild(affectMaskCheckbox);
 
-					state.ctxmenu.affectMaskCheckbox = affectMaskCheckbox;
+					state.ctxmenu.affectMaskCheckbox = array;
 
 					// Brush size slider
 					const brushSizeSlider = _toolbar_input.slider(

js/ui/tool/dream.js

@@ -1469,24 +1469,27 @@ const dreamTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 
 					// Invert Mask Checkbox
 					state.ctxmenu.invertMaskLabel = _toolbar_input.checkbox(
 						state,
 						"invertMask",
 						"Invert Mask",
+						["icon-venetian-mask", "invert-mask-checkbox"],
 						() => {
 							setMask(state.invertMask ? "hold" : "clear");
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Checkbox
 					state.ctxmenu.keepUnmaskedLabel = _toolbar_input.checkbox(
 						state,
 						"keepUnmasked",
 						"Keep Unmasked",
+						"icon-pin",
 						() => {
 							if (state.keepUnmasked) {
 								state.ctxmenu.keepUnmaskedBlurSlider.classList.remove(
@@ -1496,7 +1499,7 @@ const dreamTool = () =>
 								state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible");
 							}
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Blur Slider
 					state.ctxmenu.keepUnmaskedBlurSlider = _toolbar_input.slider(
@@ -1515,8 +1518,9 @@ const dreamTool = () =>
 					state.ctxmenu.preserveMasksLabel = _toolbar_input.checkbox(
 						state,
 						"preserveMasks",
-						"Preserve Brushed Masks"
+						"Preserve Brushed Masks",
-					).label;
+						"icon-paintbrush"
+					).checkbox;
 
 					// Overmasking Slider
 					state.ctxmenu.overMaskPxLabel = _toolbar_input.slider(
@@ -1546,14 +1550,16 @@ const dreamTool = () =>
 				}
 
 				menu.appendChild(state.ctxmenu.cursorSizeSlider);
-				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				const array = document.createElement("div");
-				menu.appendChild(document.createElement("br"));
+				array.classList.add("checkbox-array");
-				menu.appendChild(state.ctxmenu.invertMaskLabel);
+				array.appendChild(state.ctxmenu.snapToGridLabel);
-				menu.appendChild(document.createElement("br"));
+				//menu.appendChild(document.createElement("br"));
-				menu.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				array.appendChild(state.ctxmenu.invertMaskLabel);
+				array.appendChild(state.ctxmenu.preserveMasksLabel);
+				//menu.appendChild(document.createElement("br"));
+				array.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				menu.appendChild(array);
 				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSlider);
-				menu.appendChild(state.ctxmenu.preserveMasksLabel);
-				menu.appendChild(document.createElement("br"));
 				menu.appendChild(state.ctxmenu.overMaskPxLabel);
 				menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
 			},
@@ -1974,24 +1980,27 @@ const img2imgTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 
 					// Invert Mask Checkbox
 					state.ctxmenu.invertMaskLabel = _toolbar_input.checkbox(
 						state,
 						"invertMask",
 						"Invert Mask",
+						["icon-venetian-mask", "invert-mask-checkbox"],
 						() => {
 							setMask(state.invertMask ? "hold" : "clear");
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Checkbox
 					state.ctxmenu.keepUnmaskedLabel = _toolbar_input.checkbox(
 						state,
 						"keepUnmasked",
 						"Keep Unmasked",
+						"icon-pin",
 						() => {
 							if (state.keepUnmasked) {
 								state.ctxmenu.keepUnmaskedBlurSlider.classList.remove(
@@ -2007,7 +2016,7 @@ const img2imgTool = () =>
 								);
 							}
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Blur Slider
 					state.ctxmenu.keepUnmaskedBlurSlider = _toolbar_input.slider(
@@ -2032,15 +2041,17 @@ const img2imgTool = () =>
 					state.ctxmenu.preserveMasksLabel = _toolbar_input.checkbox(
 						state,
 						"preserveMasks",
-						"Preserve Brushed Masks"
+						"Preserve Brushed Masks",
-					).label;
+						"icon-paintbrush"
+					).checkbox;
 
 					// Inpaint Full Resolution Checkbox
 					state.ctxmenu.fullResolutionLabel = _toolbar_input.checkbox(
 						state,
 						"fullResolution",
-						"Inpaint Full Resolution"
+						"Inpaint Full Resolution",
-					).label;
+						"icon-expand"
+					).checkbox;
 
 					// Denoising Strength Slider
 					state.ctxmenu.denoisingStrengthSlider = _toolbar_input.slider(
@@ -2059,8 +2070,9 @@ const img2imgTool = () =>
 					state.ctxmenu.borderMaskGradientCheckbox = _toolbar_input.checkbox(
 						state,
 						"gradient",
-						"Border Mask Gradient"
+						"Border Mask Gradient",
-					).label;
+						"icon-box-select"
+					).checkbox;
 
 					// Border Mask Size Slider
 					state.ctxmenu.borderMaskSlider = _toolbar_input.slider(
@@ -2107,20 +2119,22 @@ const img2imgTool = () =>
 				}
 
 				menu.appendChild(state.ctxmenu.cursorSizeSlider);
-				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				const array = document.createElement("div");
-				menu.appendChild(document.createElement("br"));
+				array.classList.add("checkbox-array");
-				menu.appendChild(state.ctxmenu.invertMaskLabel);
+				array.appendChild(state.ctxmenu.snapToGridLabel);
-				menu.appendChild(document.createElement("br"));
+				array.appendChild(state.ctxmenu.invertMaskLabel);
-				menu.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				array.appendChild(state.ctxmenu.preserveMasksLabel);
+				array.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				menu.appendChild(array);
 				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSlider);
 				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSliderLinebreak);
-				menu.appendChild(state.ctxmenu.preserveMasksLabel);
-				menu.appendChild(document.createElement("br"));
-				menu.appendChild(state.ctxmenu.fullResolutionLabel);
-				menu.appendChild(document.createElement("br"));
 				menu.appendChild(state.ctxmenu.inpaintTypeSelect);
 				menu.appendChild(state.ctxmenu.denoisingStrengthSlider);
-				menu.appendChild(state.ctxmenu.borderMaskGradientCheckbox);
+				const btnArray2 = document.createElement("div");
+				btnArray2.classList.add("checkbox-array");
+				btnArray2.appendChild(state.ctxmenu.fullResolutionLabel);
+				btnArray2.appendChild(state.ctxmenu.borderMaskGradientCheckbox);
+				menu.appendChild(btnArray2);
 				menu.appendChild(state.ctxmenu.borderMaskSlider);
 				menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
 			},

js/ui/tool/select.js

@@ -633,23 +633,26 @@ const selectTransformTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 
 					// Keep Aspect Ratio
 					state.ctxmenu.keepAspectRatioLabel = _toolbar_input.checkbox(
 						state,
 						"keepAspectRatio",
-						"Keep Aspect Ratio"
+						"Keep Aspect Ratio",
-					).label;
+						"icon-maximize"
+					).checkbox;
 
 					// Use Clipboard
 					const clipboardCheckbox = _toolbar_input.checkbox(
 						state,
 						"useClipboard",
-						"Use clipboard"
+						"Use clipboard",
+						"icon-clipboard-list"
 					);
-					state.ctxmenu.useClipboardLabel = clipboardCheckbox.label;
+					state.ctxmenu.useClipboardLabel = clipboardCheckbox.checkbox;
 					if (!(navigator.clipboard && navigator.clipboard.write))
 						clipboardCheckbox.checkbox.disabled = true; // Disable if not available
 
@@ -760,11 +763,12 @@ const selectTransformTool = () =>
 					state.ctxmenu.actionArray = actionArray;
 					state.ctxmenu.visibleActionArray = visibleActionArray;
 				}
-				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				const array = document.createElement("div");
-				menu.appendChild(document.createElement("br"));
+				array.classList.add("checkbox-array");
-				menu.appendChild(state.ctxmenu.keepAspectRatioLabel);
+				array.appendChild(state.ctxmenu.snapToGridLabel);
-				menu.appendChild(document.createElement("br"));
+				array.appendChild(state.ctxmenu.keepAspectRatioLabel);
-				menu.appendChild(state.ctxmenu.useClipboardLabel);
+				array.appendChild(state.ctxmenu.useClipboardLabel);
+				menu.appendChild(array);
 				menu.appendChild(state.ctxmenu.selectionPeekOpacitySlider);
 				menu.appendChild(state.ctxmenu.actionArray);
 				menu.appendChild(state.ctxmenu.visibleActionArray);

js/ui/tool/stamp.js

@@ -368,11 +368,17 @@ const stampTool = () =>
 				if (!state.ctxmenu) {
 					state.ctxmenu = {};
 					// Snap To Grid Checkbox
-					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
+					const array = document.createElement("div");
-						state,
+					array.classList.add("checkbox-array");
-						"snapToGrid",
+					array.appendChild(
-						"Snap To Grid"
+						_toolbar_input.checkbox(
-					).label;
+							state,
+							"snapToGrid",
+							"Snap To Grid",
+							"icon-grid"
+						).checkbox
+					);
+					state.ctxmenu.snapToGridLabel = array;
 
 					// Create resource list
 					const uploadButtonId = `upload-btn-${guid()}`;

res/icons/clipboard-list.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
+  <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+  <path d="M12 11h4"></path>
+  <path d="M12 16h4"></path>
+  <path d="M8 11h.01"></path>
+  <path d="M8 16h.01"></path>
+
+</svg>

res/icons/equal.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="5" y1="9" x2="19" y2="9"></line>
+  <line x1="5" y1="15" x2="19" y2="15"></line>
+
+</svg>

res/icons/expand.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"></path>
+  <path d="M3 16.2V21m0 0h4.8M3 21l6-6"></path>
+  <path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"></path>
+  <path d="M3 7.8V3m0 0h4.8M3 3l6 6"></path>
+
+</svg>

res/icons/grid.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+  <line x1="3" y1="9" x2="21" y2="9"></line>
+  <line x1="3" y1="15" x2="21" y2="15"></line>
+  <line x1="9" y1="3" x2="9" y2="21"></line>
+  <line x1="15" y1="3" x2="15" y2="21"></line>
+
+</svg>

res/icons/maximize.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
+  <path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
+  <path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
+  <path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
+
+</svg>

res/icons/pin.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="12" y1="17" x2="12" y2="22"></line>
+  <path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"></path>
+
+</svg>

res/icons/square.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+
+</svg>

res/icons/venetian-mask.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M2 12a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V7h-5a8 8 0 0 0-5 2 8 8 0 0 0-5-2H2Z"></path>
+  <path d="M6 11c1.5 0 3 .5 3 2-2 0-3 0-3-2Z"></path>
+  <path d="M18 11c-1.5 0-3 .5-3 2 2 0 3 0 3-2Z"></path>
+
+</svg>