r-g-b editor for custom category colors

HISTORY.md

@@ -50,6 +50,7 @@
 * objects: don't show codification and js-func blocks in search results unless enabled
 * gui, objects: new "showingExtensions" session setting for showing extension prims in the palette
 * German translation update for "extension blocks" setting
+* widgets: r-g-b editor for custom category colors (right-click on color-field)
 
 ### 2021-10-25
 * byob: fixed #2902

snap.html

@@ -15,7 +15,7 @@
         <meta name="msapplication-TileColor" content="#FFFFFF">
         <script src="src/morphic.js?version=2021-07-09"></script>
         <script src="src/symbols.js?version=2021-03-03"></script>
-        <script src="src/widgets.js?version=2021-07-21"></script>
+        <script src="src/widgets.js?version=2021-10-26"></script>
         <script src="src/blocks.js?version=2021-10-22"></script>
         <script src="src/threads.js?version=2021-10-22"></script>
         <script src="src/objects.js?version=2021-10-26"></script>

src/widgets.js

@@ -87,7 +87,7 @@ ScrollFrameMorph, MenuItemMorph, useBlurredShadows, getDocumentPositionOf*/
 
 /*jshint esversion: 6*/
 
-modules.widgets = '2021-July-21';
+modules.widgets = '2021-October-26';
 
 var PushButtonMorph;
 var ToggleButtonMorph;
@@ -1889,6 +1889,114 @@ DialogBoxMorph.prototype.promptVector = function (
     this.popUp(world);
 };
 
+DialogBoxMorph.prototype.promptRGB = function (
+    title,
+    color,
+    world,
+    pic,
+    msg
+) {
+    var clr = new AlignmentMorph('row', 4),
+        iw = this.fontSize * 4,
+        rInp = new InputFieldMorph(color.r.toString(), true),
+        gInp = new InputFieldMorph(color.g.toString(), true),
+        bInp = new InputFieldMorph(color.b.toString(), true),
+        rCol = new AlignmentMorph('column', 2),// +++
+        gCol = new AlignmentMorph('column', 2),
+        bCol = new AlignmentMorph('column', 2),
+        inp = new AlignmentMorph('column', 2),
+        bdy = new AlignmentMorph('column', this.padding);
+
+    function labelText(string) {
+        return new TextMorph(
+            localize(string),
+            10,
+            null, // style
+            false, // bold
+            null, // italic
+            null, // alignment
+            null, // width
+            null, // font name
+            MorphicPreferences.isFlat ? null : new Point(1, 1),
+            WHITE // shadowColor
+        );
+    }
+
+    function constrain(num) {
+        return Math.max(0, Math.min(num, 255));
+    }
+
+    rInp.contents().minWidth = iw;
+    rInp.setWidth(iw);
+    gInp.contents().minWidth = iw;
+    gInp.setWidth(iw);
+    bInp.contents().minWidth = iw;
+    bInp.setWidth(iw);
+
+    inp.alignment = 'left';
+    inp.setColor(this.color);
+    bdy.setColor(this.color);
+    rCol.alignment = 'left';
+    rCol.setColor(this.color);
+    gCol.alignment = 'left';
+    gCol.setColor(this.color);
+    bCol.alignment = 'left';
+    bCol.setColor(this.color);
+
+    rCol.add(labelText('red'));
+    rCol.add(rInp);
+    gCol.add(labelText('green'));
+    gCol.add(gInp);
+    bCol.add(labelText('blue'));
+    bCol.add(bInp); // +++
+    clr.add(rCol);
+    clr.add(gCol);
+    clr.add(bCol);
+    inp.add(clr);
+
+    if (msg) {
+        bdy.add(labelText(msg));
+    }
+
+    bdy.add(inp);
+
+    clr.fixLayout();
+    rCol.fixLayout();
+    gCol.fixLayout();
+    bCol.fixLayout();
+    inp.fixLayout();
+    bdy.fixLayout();
+
+    this.labelString = title;
+    this.createLabel();
+    if (pic) {this.setPicture(pic); }
+
+    this.addBody(bdy);
+
+    this.addButton('ok', 'OK');
+
+    this.addButton('cancel', 'Cancel');
+    this.fixLayout();
+
+    this.edit = function () {
+        rInp.edit();
+    };
+
+    this.getInput = function () {
+        return new Color(
+            constrain(rInp.getValue()),
+            constrain(gInp.getValue()),
+            constrain(bInp.getValue())
+        );
+    };
+
+    if (!this.key) {
+        this.key = 'RGB' + title;
+    }
+
+    this.popUp(world);
+};
+
 DialogBoxMorph.prototype.promptCategory = function (
     title,
     name,
@@ -1959,6 +2067,20 @@ DialogBoxMorph.prototype.promptCategory = function (
         };
     };
 
+    picker.mouseClickRight = () => {
+        new DialogBoxMorph(
+            this,
+            (clr) => picker.setColor(clr),
+            this
+        ).promptRGB(
+            "Category color",
+            picker.color,
+            this.world(),
+            null, // pic
+            null // msg
+        );
+    };
+
     inp.alignment = 'left';
     inp.setColor(this.color);
     bdy.setColor(this.color);