Implement the new color picker.

OpenRA.Game/Widgets/DropDownButtonWidget.cs

@@ -62,7 +62,8 @@ namespace OpenRA.Widgets
 			panel = fullscreenMask = null;
 		}
 
-		public void AttachPanel(Widget p)
+		public void AttachPanel(Widget p) { AttachPanel(p, null); }
+		public void AttachPanel(Widget p, Action onCancel)
 		{
 			if (panel != null)
 				throw new InvalidOperationException("Attempted to attach a panel to an open dropdown");
@@ -71,7 +72,10 @@ namespace OpenRA.Widgets
 			// Mask to prevent any clicks from being sent to other widgets
 			fullscreenMask = new MaskWidget();
 			fullscreenMask.Bounds = new Rectangle(0, 0, Game.viewport.Width, Game.viewport.Height);
-			fullscreenMask.OnMouseDown = mi => RemovePanel();
+			fullscreenMask.OnMouseDown += mi => RemovePanel();
+			if (onCancel != null)
+				fullscreenMask.OnMouseDown += _ => onCancel();
+
 			Ui.Root.AddChild(fullscreenMask);
 
 			var oldBounds = panel.Bounds;
@@ -105,7 +109,7 @@ namespace OpenRA.Widgets
 
 	public class MaskWidget : Widget
 	{
-	   	public Action<MouseInput> OnMouseDown = _ => {};
+		public event Action<MouseInput> OnMouseDown = _ => {};
 		public MaskWidget() : base() { }
 		public MaskWidget(MaskWidget other)
 			: base(other)

OpenRA.Mods.Cnc/Widgets/Logic/CncSettingsLogic.cs

@@ -155,12 +155,12 @@ namespace OpenRA.Mods.Cnc.Widgets.Logic
 
 		bool ShowColorPicker(DropDownButtonWidget color, PlayerSettings s)
 		{
-			Action<ColorRamp> onSelect = c => {s.ColorRamp = c; color.RemovePanel();};
+			Action<ColorRamp> onExit = c => {s.ColorRamp = c; color.RemovePanel();};
 			Action<ColorRamp> onChange = c => {colorPreview.Ramp = c;};
 
 			var colorChooser = Game.LoadWidget(world, "COLOR_CHOOSER", null, new WidgetArgs()
 			{
-				{ "onSelect", onSelect },
+				{ "onExit", onExit },
 				{ "onChange", onChange },
 				{ "initialRamp", s.ColorRamp }
 			});

OpenRA.Mods.RA/Widgets/Logic/ColorPickerLogic.cs

@@ -17,56 +17,32 @@ namespace OpenRA.Mods.RA.Widgets.Logic
 {
 	public class ColorPickerLogic
 	{
-		ColorRamp ramp;
-
 		[ObjectCreator.UseCtor]
-		public ColorPickerLogic(Widget widget, ColorRamp initialRamp, Action<ColorRamp> onChange,
+		public ColorPickerLogic(Widget widget, HSLColor initialColor, Action<HSLColor> onChange, WorldRenderer worldRenderer)
-			Action<ColorRamp> onSelect, WorldRenderer worldRenderer)
 		{
-			var panel = widget;
+			var hueSlider = widget.Get<SliderWidget>("HUE");
-			ramp = initialRamp;
+			var mixer = widget.Get<ColorMixerWidget>("MIXER");
-			var hueSlider = panel.Get<SliderWidget>("HUE");
+			var randomButton = widget.GetOrNull<ButtonWidget>("RANDOM_BUTTON");
-			var satSlider = panel.Get<SliderWidget>("SAT");
-			var lumSlider = panel.Get<SliderWidget>("LUM");
 
-			Action sliderChanged = () =>
+			hueSlider.OnChange += _ => mixer.Set(hueSlider.Value);
-			{
+			mixer.OnChange += () =>	onChange(mixer.Color);
-				ramp = new ColorRamp((byte)(255*hueSlider.Value),
-									 (byte)(255*satSlider.Value),
-									 (byte)(255*lumSlider.Value),
-									 10);
-				onChange(ramp);
-			};
 
-			hueSlider.OnChange += _ => sliderChanged();
-			satSlider.OnChange += _ => sliderChanged();
-			lumSlider.OnChange += _ => sliderChanged();
-
-			Action updateSliders = () =>
-			{
-				hueSlider.Value = ramp.Color.H / 255f;
-				satSlider.Value = ramp.Color.S / 255f;
-				lumSlider.Value = ramp.Color.L / 255f;
-			};
-
-			panel.Get<ButtonWidget>("SAVE_BUTTON").OnClick = () => onSelect(ramp);
-
-			var randomButton = panel.Get<ButtonWidget>("RANDOM_BUTTON");
 			if (randomButton != null)
 				randomButton.OnClick = () =>
 				{
+					// Avoid colors with low sat or lum
 					var hue = (byte)Game.CosmeticRandom.Next(255);
-					var sat = (byte)Game.CosmeticRandom.Next(255);
+					var sat = (byte)Game.CosmeticRandom.Next(70, 255);
-					var lum = (byte)Game.CosmeticRandom.Next(51,255);
+					var lum = (byte)Game.CosmeticRandom.Next(70, 255);
 
-					ramp = new ColorRamp(hue, sat, lum, 10);
+					mixer.Set(new HSLColor(hue, sat, lum));
-					updateSliders();
+					hueSlider.Value = hue / 255f;
-					sliderChanged();
 				};
 
 			// Set the initial state
-			updateSliders();
+			mixer.Set(initialColor);
-			onChange(ramp);
+			hueSlider.Value = initialColor.H / 255f;
+			onChange(mixer.Color);
 		}
 	}
 }

OpenRA.Mods.RA/Widgets/Logic/LobbyUtils.cs

@@ -103,28 +103,27 @@ namespace OpenRA.Mods.RA.Widgets.Logic
 		public static void ShowColorDropDown(DropDownButtonWidget color, Session.Client client,
 			OrderManager orderManager, ColorPreviewManagerWidget preview)
 		{
-			Action<ColorRamp> onSelect = c =>
+			Action onExit = () =>
 			{
 				if (client.Bot == null)
 				{
-					Game.Settings.Player.ColorRamp = c;
+					Game.Settings.Player.ColorRamp = preview.Ramp;
 					Game.Settings.Save();
 				}
 
 				color.RemovePanel();
-				orderManager.IssueOrder(Order.Command("color {0} {1}".F(client.Index, c)));
+				orderManager.IssueOrder(Order.Command("color {0} {1}".F(client.Index, preview.Ramp)));
 			};
 
-			Action<ColorRamp> onChange = c => preview.Ramp = c;
+			Action<HSLColor> onChange = c => preview.Ramp = new ColorRamp(c, 10);
 
 			var colorChooser = Game.LoadWidget(orderManager.world, "COLOR_CHOOSER", null, new WidgetArgs()
 			{
-				{ "onSelect", onSelect },
 				{ "onChange", onChange },
-				{ "initialRamp", client.ColorRamp }
+				{ "initialColor", client.ColorRamp.Color }
 			});
 
-			color.AttachPanel(colorChooser);
+			color.AttachPanel(colorChooser, onExit);
 		}
 
 		public static Dictionary<int2, Session.Client> GetSpawnClients(OrderManager orderManager, Map map)

artsrc/cnc/chrome.svg

@@ -61,9 +61,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="11.313708"
+     inkscape:zoom="5.656854"
-     inkscape:cx="352.22285"
+     inkscape:cx="366.7043"
-     inkscape:cy="474.91804"
+     inkscape:cy="471.90817"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -1276,11 +1276,23 @@
        inkscape:export-ydpi="90" />
     <path
        style="fill:#ffc000;fill-opacity:1;stroke:none"
-       d="m 340,584.3622 0,-5 1.81818,2 2.18182,-2 2.18182,2 1.81818,-2 0,5 z"
+       d="m 340,584.3622 0,-5 1.59091,2 1.90909,-2 1.90909,2 1.59091,-2 0,5 z"
        id="path3179"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cccccccc"
        inkscape:export-xdpi="90"
        inkscape:export-ydpi="90" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="path4066"
+       d="m 395,651.3622 -3.5,-4 0,0 -3.5,4 z"
+       style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 395,636.3622 -3.5,4 0,0 -3.5,-4 z"
+       id="path4070"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
   </g>
 </svg>

mods/cnc/chrome.yaml

@@ -390,6 +390,8 @@ lobby-bits: chrome.png
 	spawn-claimed: 256,32,16,16
 	spawn-unclaimed: 256,48,16,16
 	admin: 340,39,7,5
+	colorpicker: 256,32,16,16
+	huepicker: 388,96,7,15
 
 checkbox-bits: chrome.png
 	checked: 272,32,16,16

mods/cnc/chrome/dialogs.yaml

@@ -1,71 +1,46 @@
 Background@COLOR_CHOOSER:
 	Logic:ColorPickerLogic
 	Background:panel-black
-	Width:315
+	Width:234
-	Height:130
+	Height:105
 	Children:
-		Button@SAVE_BUTTON:
+		Background@HUEBG:
-			Key:return
+			Background:panel-black
-			X:210
-			Y:90
-			Width:90
-			Height:25
-			Text:Save
-		Button@RANDOM_BUTTON:
-			X:15
-			Y:90
-			Width:90
-			Height:25
-			Text:Random
-		ShpImage@FACT:
-			X:220
-			Y:15
-			Image:fact
-			Palette:colorpicker
-		Label@HUE_LABEL:
 			X:5
 			Y:5
-			Width:40
+			Width:148
-			Height:20
+			Height:13
-			Align:Right
+			Children:
-			Text:Hue:
+				HueSlider@HUE:
-			Font:Bold
+					X:2
-		Slider@HUE:
+					Y:2
-			X:43
+					Width:144
-			Y:10
+					Height:9
-			Width:160
+					Ticks:5
-			Height:20
+		Background@MIXERBG:
-			Ticks:5
+			Background:panel-black
-		Label@SAT_LABEL:
 			X:5
-			Y:30
+			Y:23
-			Width:40
+			Width:148
-			Height:20
+			Height:76
-			Align:Right
+			Children:
-			Text:Sat:
+				ColorMixer@MIXER:
-			Font:Bold
+					X:2
-		Slider@SAT:
+					Y:2
-			X:43
+					Width:144
-			Y:35
+					Height:72
-			Width:160
+		ShpImage@FACT:
-			Height:20
+			X:160
-			Ticks:5
+			Y:13
-		Label@LUM_LABEL:
+			Image:fact
-			X:5
+			Palette:colorpicker
-			Y:55
+		Button@RANDOM_BUTTON:
-			Width:40
+			Key:tab
-			Height:20
+			X:158
-			Align:Right
+			Y:74
-			Text:Lum:
+			Width:70
-			Font:Bold
+			Height:25
-		Slider@LUM:
+			Text:Random
-			X:43
-			Y:60
-			Width:160
-			Height:20
-			Ticks:5
-			MinimumValue: 0.2
-			MaximumValue: 1
 
 ScrollPanel@LABEL_DROPDOWN_TEMPLATE:
 	Width:DROPDOWN_WIDTH

mods/d2k/chrome.yaml

@@ -240,6 +240,8 @@ lobby-bits: spawnpoints.png
 	spawn-unclaimed: 528,128,16,16
 	spawn-claimed: 512,128,16,16
 	admin: 37,5,7,5
+	colorpicker: 512,128,16,16
+	huepicker: 45,0,7,15
 
 strategic: strategic.png
 	unowned: 0,0,32,32

mods/d2k/chrome/color-picker.yaml

@@ -1,66 +1,44 @@
 Background@COLOR_CHOOSER:
 	Logic:ColorPickerLogic
 	Background:dialog2
-	Width:310
+	Width:234
-	Height:120
+	Height:105
 	Children:
-		Button@SAVE_BUTTON:
+		Background@HUEBG:
-			X:210
+			Background:dialog3
-			Y:85
+			X:5
-			Width:90
-			Height:25
-			Text:Save
-			Font:Bold
-		Button@RANDOM_BUTTON:
-			X:115
-			Y:85
-			Width:90
-			Height:25
-			Text:Random
-			Font:Bold
-		ShpImage@CARRYALL:
-			X:220
-			Y:10
-			Image:carryall
-			Palette:colorpicker
-		Label@HUE_LABEL:
-			X:0
 			Y:5
-			Width:40
+			Width:148
-			Height:20
+			Height:13
-			Align: Right
+			Children:
-			Text: Hue:
+				HueSlider@HUE:
-		Slider@HUE:
+					X:2
-			X:43
+					Y:2
-			Y:10
+					Width:144
-			Width:160
+					Height:9
-			Height:20
+					Ticks:5
-			Ticks:5
+		Background@MIXERBG:
-		Label@SAT_LABEL:
+			Background:dialog3
-			X:0
+			X:5
-			Y:30
+			Y:23
-			Width:40
+			Width:148
-			Height:20
+			Height:76
-			Align: Right
+			Children:
-			Text: Sat:
+				ColorMixer@MIXER:
-		Slider@SAT:
+					X:2
-			X:43
+					Y:2
-			Y:35
+					Width:144
-			Width:160
+					Height:72
-			Height:20
+		ShpImage@FACT:
-			Ticks:5
+			X:160
-		Label@LUM_LABEL:
+			Y:8
-			X:0
+			Image:carryall
-			Y:55
+			Frame:13
-			Width:40
+			Palette:colorpicker
-			Height:20
+		Button@RANDOM_BUTTON:
-			Align: Right
+			Key:tab
-			Text: Lum:
+			X:158
-		Slider@LUM:
+			Y:74
-			X:43
+			Width:70
-			Y:60
+			Height:25
-			Width:160
+			Text:Random
-			Height:20
-			Ticks:5
-			MinimumValue: 0.2
-			MaximumValue: 1

mods/ra/chrome.yaml

@@ -173,6 +173,8 @@ lobby-bits: spawnpoints.png
 	spawn-unclaimed: 528,128,16,16
 	spawn-claimed: 512,128,16,16
 	admin: 37,5,7,5
+	colorpicker: 512,128,16,16
+	huepicker: 45,0,7,15
 
 strategic: strategic.png
 	unowned: 0,0,32,32

mods/ra/chrome/color-picker.yaml

@@ -1,66 +1,43 @@
 Background@COLOR_CHOOSER:
 	Logic:ColorPickerLogic
 	Background:dialog2
-	Width:310
+	Width:234
-	Height:120
+	Height:105
 	Children:
-		Button@SAVE_BUTTON:
+		Background@HUEBG:
-			X:210
+			Background:dialog3
-			Y:85
+			X:5
-			Width:90
+			Y:5
-			Height:25
+			Width:148
-			Text:Save
+			Height:13
-			Font:Bold
+			Children:
-		Button@RANDOM_BUTTON:
+				HueSlider@HUE:
-			X:115
+					X:2
-			Y:85
+					Y:2
-			Width:90
+					Width:144
-			Height:25
+					Height:9
-			Text:Random
+					Ticks:5
-			Font:Bold
+		Background@MIXERBG:
+			Background:dialog3
+			X:5
+			Y:23
+			Width:148
+			Height:76
+			Children:
+				ColorMixer@MIXER:
+					X:2
+					Y:2
+					Width:144
+					Height:72
 		ShpImage@FACT:
-			X:220
+			X:156
-			Y:10
+			Y:1
 			Image:fact
 			Palette:colorpicker
-		Label@HUE_LABEL:
+		Button@RANDOM_BUTTON:
-			X:0
+			Key:tab
-			Y:5
+			X:158
-			Width:40
+			Y:74
-			Height:20
+			Width:70
-			Align: Right
+			Height:25
-			Text: Hue:
+			Text:Random
-		Slider@HUE:
-			X:43
-			Y:10
-			Width:160
-			Height:20
-			Ticks:5
-		Label@SAT_LABEL:
-			X:0
-			Y:30
-			Width:40
-			Height:20
-			Align: Right
-			Text: Sat:	
-		Slider@SAT:
-			X:43
-			Y:35
-			Width:160
-			Height:20
-			Ticks:5
-		Label@LUM_LABEL:
-			X:0
-			Y:55
-			Width:40
-			Height:20
-			Align: Right
-			Text: Lum:	
-		Slider@LUM:
-			X:43
-			Y:60
-			Width:160
-			Height:20
-			Ticks:5
-			MinimumValue: 0.2
-			MaximumValue: 1