fix: modernize and reenable the colour slider field (#42)

* fix: modernize and reenable the colour slider field

* refactor: clean up FieldColourSlider

* refactor: extend the FieldColour Blockly plugin

* refactor: remove redundant setting of colour on source block

blocks_common/colour.js

@@ -22,13 +22,8 @@
  * @fileoverview Colour blocks for Blockly.
  * @author fraser@google.com (Neil Fraser)
  */
-'use strict';
-
-goog.provide('Blockly.Blocks.colour');
-
-goog.require('Blockly.Blocks');
-
-goog.require('Blockly.constants');
+import * as Blockly from 'blockly';
+import * as Constants from '../src/constants.js';
 
 /**
  * Pick a random colour.
@@ -54,7 +49,7 @@ Blockly.Blocks['colour_picker'] = {
           "colour": randomColour()
         }
       ],
-      "outputShape": Blockly.OUTPUT_SHAPE_ROUND,
+      "outputShape": Constants.OUTPUT_SHAPE_ROUND,
       "output": "Colour"
     });
   }

core/css.js

@@ -881,6 +881,10 @@ const styles = `
     cursor: pointer;
   }
 
+  .scratchColourPicker {
+    width: min-content;
+  }
+
   .scratchColourPickerLabel {
     font-family: "Helvetica Neue", Helvetica, sans-serif;
     font-size: 0.65rem;
@@ -896,6 +900,36 @@ const styles = `
     margin-left: 10px;
   }
 
+  .scratchColourSlider {
+    appearance: none;
+    margin: 8px;
+    height: 22px;
+    width: 150px;
+    position: relative;
+    outline: none;
+    border-radius: 11px;
+    margin-bottom: 20px;
+  }
+
+  /* Combining this and the -moz equivalent below with a comma break the webkit version */
+  .scratchColourSlider::-webkit-slider-thumb {
+    appearance: none;
+    background-color: #fff;
+    height: 26px;
+    width: 26px;
+    border-radius: 100%;
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
+  }
+
+  .scratchColourSlider::-moz-range-thumb {
+    appearance: none;
+    background-color: #fff;
+    height: 26px;
+    width: 26px;
+    border-radius: 100%;
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
+  }
+
   .scratchMatrixButtonDiv {
     width: 50%;
     text-align: center;