Make color picker work in layer details

src/css/component.css

@@ -276,11 +276,16 @@ button img{
 }
 .ui_input_group > input,
 .ui_input_group > .ui_number_input,
-.ui_input_group > .ui_range {
+.ui_input_group > .ui_range,
+.ui_input_group > .ui_color_sample {
     border-radius: 0;
     height: auto;
     min-width: 0;
 }
+.ui_input_group > .ui_color_sample {
+    border: none;
+    width: 100%;
+}
 .ui_input_group > :first-child {
     border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
 }

src/css/layout.css

@@ -473,7 +473,7 @@ body .sp-preview{
 	clear:both;
 	margin-bottom: 2px;
 }
-.block.details input{
+.block.details input[type="number"]{
 	width: 70px;
 	padding: 3px 5px;
 }
@@ -638,3 +638,27 @@ canvas{
 		width: 88px;
 	}
 }
+
+/* ========== dialogs ======================================================= */
+
+#dialog_color_picker_group {
+	width: 60%;
+}
+#dialog_color_channel_group {
+	width: 40%;
+	margin-left: 1rem;
+}
+
+@media screen and (max-width: 450px) {
+	#dialog_color_picker .ui_flex_group {
+		flex-wrap: wrap;
+	}
+	#dialog_color_picker_group {
+		width: 100%;
+	}
+	#dialog_color_channel_group {
+		width: 100%;
+		margin-left: 0;
+		margin-top: 1rem;
+	}
+}

src/css/utility.css

@@ -11,6 +11,11 @@
     max-width: 6.4rem;
     overflow: hidden;
 }
+.label_width_medium {
+    width: 100%;
+    max-width: 10.4rem;
+    overflow: hidden;
+}
 
 /* Font color utility */
 .text_red { color: var(--text-color-red); }

src/js/config.js

@@ -18,6 +18,9 @@ config.layer = null;
 config.need_render = false;
 config.need_render_changed_params = false; // Set specifically when param change in layer details triggered render
 config.mouse = {};
+config.swatches = {
+	default: [] // Only default used right now, object format for swatch swapping in future.
+};
 
 //requires styles in reset.css
 config.themes = [

src/js/core/components/color-input.js

@@ -26,7 +26,7 @@ let POP;
 		if (!POP) {
 			POP = new Dialog_class();
 		}
-		let colorsDialog = new GUI_colors_class('dialog');
+		let colorsDialog = new GUI_colors_class();
 		var settings = {
 			title: 'Color Picker',
 			on_finish() {
@@ -38,7 +38,7 @@ let POP;
 			params: [
 				{
 					function() {
-						var html = '<div id="color_picker_dialog_container"></div>';
+						var html = '<div id="dialog_color_picker"></div>';
 						return html;
 					}
 				}
@@ -57,7 +57,7 @@ let POP;
 			colorValue = '#000000';
 		}
 		POP.show(settings);
-		colorsDialog.render_main_colors();
+		colorsDialog.render_main_colors('dialog');
 		colorsDialog.set_color({ hex: colorValue, a: alpha });
 	};
 

src/js/core/gui/gui-colors.js

@@ -97,10 +97,22 @@ const sidebarTemplate = `
 
 const dialogTemplate = `
 	<div class="ui_flex_group">
-		<div class="ui_flex_group column" style="width: 60%">
+		<div id="dialog_color_picker_group" class="ui_flex_group column">
 			<input id="dialog_color_picker_gradient" type="color" aria-label="Color Selection">
+			<div class="block_section">
+				<div class="ui_input_grid stacked">
+					<div class="ui_input_group">
+						<label class="label_width_medium">Current</label>
+						<div id="dialog_selected_color_sample" class="ui_color_sample"></div>
+					</div>
+					<div class="ui_input_group">
+						<label class="label_width_medium">Previous</label>
+						<div id="dialog_previous_color_sample" class="ui_color_sample"></div>
+					</div>
+				</div>
+			</div>
 		</div>
-		<div class="ui_flex_group column" style="width: 40%; margin-left: 1rem">
+		<div id="dialog_color_channel_group">
 			<div class="ui_input_group stacked">
 				<label id="dialog_color_hex_label" title="Hex" class="label_width_small">Hex</label>
 				<input id="dialog_color_hex" aria-labelledby="dialog_color_hex_label" value="#000000" maxlength="7" type="text" />
@@ -156,20 +168,22 @@ const dialogTemplate = `
  */
 class GUI_colors_class {
 
-	constructor(uiType) {
+	constructor() {
 		this.el = null;
 		this.COLOR = '#000000';
 		this.ALPHA = 255;
-		this.uiType = uiType || 'sidebar';
+		this.colorNotSet = true;
+		this.uiType = null;
 		this.butons = null;
 		this.sections = null;
 		this.inputs = null;
 		this.Helper = new Helper_class();
 	}
 
-	render_main_colors() {
+	render_main_colors(uiType) {
+		this.uiType = uiType || 'sidebar';
 		if (this.uiType === 'dialog') {
-			this.el = document.getElementById('color_picker_dialog_container');
+			this.el = document.getElementById('dialog_color_picker');
 			this.el.innerHTML = dialogTemplate;
 		} else {
 			var saved_color = this.Helper.getCookie('color');
@@ -178,7 +192,7 @@ class GUI_colors_class {
 			this.el.innerHTML = sidebarTemplate;
 		}
 		this.init_components();
-		this.render_range_gradients = Helper.throttle(this.render_range_gradients, 50);
+		this.render_ui_deferred = Helper.throttle(this.render_ui_deferred, 50);
 	}
 
 	init_components() {
@@ -309,7 +323,7 @@ class GUI_colors_class {
 				});
 			});
 		if (this.uiType === 'dialog') {
-			this.inputs.swatches.uiSwatches('set_all_hex', $('#color_swatches').uiSwatches('get_all_hex'));
+			this.inputs.swatches.uiSwatches('set_all_hex', config.swatches.default);
 		}
 
 		// Initialize color picker gradient
@@ -326,7 +340,8 @@ class GUI_colors_class {
 
 		// Initialize hex entry
 		this.inputs.hex
-			.on('input', () => {
+			.on('input', (event) => {
+				console.log(event);
 				const value = this.inputs.hex.val();
 				const trimmedValue = value.trim();
 				if (value !== trimmedValue) {
@@ -424,6 +439,10 @@ class GUI_colors_class {
 			if (this.uiType === 'dialog') {
 				this.COLOR = newColor != null ? newColor : this.COLOR;
 				this.ALPHA = newAlpha != null ? newAlpha : this.ALPHA;
+				if (this.colorNotSet) {
+					this.colorNotSet = false;
+					$('#dialog_previous_color_sample', this.el)[0].style.background = this.COLOR;
+				}
 			} else {
 				config.COLOR = newColor != null ? newColor : config.COLOR;
 				config.ALPHA = newAlpha != null ? newAlpha : config.ALPHA;
@@ -481,7 +500,7 @@ class GUI_colors_class {
 			this.inputs.hsl[hslKey].number.uiNumberInput('set_value', hslValue);
 		}
 
-		this.render_range_gradients({ hsl, hsv });
+		this.render_ui_deferred({ hsl, hsv });
 	}
 
 	/**
@@ -491,7 +510,7 @@ class GUI_colors_class {
 	 *                    hsl - override for hsl values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
 	 *                    hsv - override for hsv values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
 	 */
-	render_range_gradients(options) {
+	render_ui_deferred(options) {
 		options = options || {};
 		const COLOR = this.uiType === 'dialog' ? this.COLOR : config.COLOR;
 
@@ -548,6 +567,11 @@ class GUI_colors_class {
 		this.inputs.hsl.l.range.uiRange('set_background',
 			`linear-gradient(to right, #000000 0%, ${ Helper.hslToHex(rangeMid.h, rangeMid.s, rangeMid.l) } 50%, #ffffff 100%)`
 		);
+
+		// Store swatch values
+		if (this.uiType === 'sidebar') {
+			config.swatches.default = this.inputs.swatches.uiSwatches('get_all_hex');
+		}
 	}
 
 }

src/js/core/gui/gui-details.js

@@ -293,14 +293,21 @@ class GUI_details_class {
 	render_color(events) {
 		var layer = config.layer;
 
+		let $colorInput;
+		if (events) {
+			$colorInput = $(document.getElementById('detail_color')).uiColorInput();
+		} else {
+			$colorInput = $(document.getElementById('detail_color'));
+		}
+
 		if (layer != undefined) {
-			document.getElementById('detail_color').value = layer.color;
+			$colorInput.uiColorInput('set_value', layer.color);
 		}
 
 		if (events) {
 			//events
-			document.getElementById('detail_color').addEventListener('change', function (e) {
-				var value = this.value;
+			$colorInput.on('change', function (e) {
+				const value = $colorInput.uiColorInput('get_value');
 				config.layer.color = value;
 				config.need_render = true;
 				config.need_render_changed_params = true;

src/js/tools/pick_color.js

@@ -40,7 +40,10 @@ class Pick_color_class extends Base_tools_class {
 			_this.dragMove(event);
 		});
 		document.addEventListener('mouseup', function (event) {
-			_this.copy_color_to_ckipboard();
+			var _this = this;
+			if (config.TOOL.name != _this.name)
+				return;
+			_this.copy_color_to_clipboard();
 		});
 
 		// collect touch events
@@ -99,7 +102,7 @@ class Pick_color_class extends Base_tools_class {
 		this.Base_gui.GUI_colors.set_color(newColorDefinition);
 	}
 
-	copy_color_to_ckipboard() {
+	copy_color_to_clipboard() {
 		navigator.clipboard.writeText(config.COLOR);
 	}