[ColorPicker] Improve change message triggers

- Change is triggered when moving sliders (if no buttons are shown)
- Remove unnecessary change messages
- Switch to aardvark-community fork

See: https://github.com/aardvark-community/spectrum

src/Aardvark.UI.Primitives/Aardvark.UI.Primitives.fsproj

@@ -78,8 +78,10 @@
     <EmbeddedResource Include="resources\golden-layout\golden-layout-aard.css" LogicalName="resources\golden-layout\golden-layout-aard.css" />
     <EmbeddedResource Include="resources\golden-layout\golden-layout-aard.js" LogicalName="resources\golden-layout\golden-layout-aard.js" />
     <EmbeddedResource Include="resources\golden-layout\popout.html" LogicalName="resources\golden-layout\popout.html" />
-    <EmbeddedResource Include="resources\spectrum.css" />
-    <EmbeddedResource Include="resources\spectrum.js" />
+    <EmbeddedResource Include="resources\spectrum-min.css" LogicalName="resources\spectrum.css" Condition="'$(Configuration)|$(Platform)'!='Debug|AnyCPU'" />
+    <EmbeddedResource Include="resources\spectrum.css" Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'" />
+    <EmbeddedResource Include="resources\spectrum-min.js" LogicalName="resources\spectrum.js" Condition="'$(Configuration)|$(Platform)'!='Debug|AnyCPU'" />
+    <EmbeddedResource Include="resources\spectrum.js" Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'" />
     <EmbeddedResource Include="resources\spectrum-overrides.css" />
     <EmbeddedResource Include="resources\notifications.js" />
     <None Include="paket.references" />

src/Aardvark.UI.Primitives/Color/ColorPicker.fs

@@ -4,6 +4,8 @@ open Aardvark.UI
 open Aardvark.Base
 open FSharp.Data.Adaptive
 
+// https://github.com/aardvark-community/spectrum
+
 // TODO: Move to Aardvark.UI.Primitives namespace and delete old color picker
 module ColorPicker =
 
@@ -349,12 +351,9 @@ module ColorPicker =
                 "const $self = $('#__ID__');"
 
                 "$self.spectrum({"
-                $"   appendTo: 'replacer',"
-
-                // A bit weird with buttons, without buttons this is the default behavior anyway.
-                // Setting this to false will make clicking outside reset the displayed color even if
-                // a color was selected from the palette (which fires a change immediately).
-                $"    clickoutFiresChange: true,"
+                $"    appendTo: 'replacer',"
+                $"    clickoutFiresChange: false,"
+                $"    fireChangeImmediately: true,"
 
                 if config.darkTheme then
                     "    replacerClassName: 'dark',"
@@ -378,12 +377,6 @@ module ColorPicker =
 
                 match config.pickerStyle with
                 | Some p ->
-                    // Make sure value is saved when clicking on the replacer itself
-                    if not p.showButtons then
-                        "$self.on('hide.spectrum', function (e, tinycolor) {"
-                        "    aardvark.processEvent('__ID__', 'data-event', tinycolor.toHex8());"
-                        "});"
-
                     // Disable text input if requested
                     if p.textInput = TextInput.Disabled then
                         "$self.spectrum('container').find('.sp-input').attr('disabled', true);"

src/Aardvark.UI.Primitives/resources/spectrum.css

@@ -1,5 +1,5 @@
 /***
-Spectrum Colorpicker v1.8.0
+Spectrum Colorpicker v1.8.1
 https://github.com/bgrins/spectrum
 Author: Brian Grinstead
 License: MIT
@@ -10,8 +10,6 @@ License: MIT
     top:0;
     left:0;
     display:inline-block;
-    *display: inline;
-    *zoom: 1;
     /* https://github.com/bgrins/spectrum/issues/40 */
     z-index: 9999994;
     overflow: hidden;
@@ -216,7 +214,6 @@ License: MIT
 /* Clearfix hack */
 .sp-cf:before, .sp-cf:after { content: ""; display: table; }
 .sp-cf:after { clear: both; }
-.sp-cf { *zoom: 1; }
 
 /* Mobile devices, make hue slider bigger so it is easier to slide */
 @media (max-device-width: 480px) {
@@ -368,8 +365,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     cursor:pointer;
     padding: 4px;
     display:inline-block;
-    *zoom: 1;
-    *display: inline;
     border: solid 1px #91765d;
     background: #eee;
     color: #333;
@@ -402,7 +397,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .sp-palette {
-    *width: 220px;
     max-width: 220px;
 }
 .sp-palette .sp-thumb-el {