Using gridpicker for icons (#365)

* Use the grid picker custom field for show icons

libs/core/_locales/core-strings.json

@@ -91,6 +91,7 @@
   "IconNames.Rabbit|block": "rabbit",
   "IconNames.Rollerskate|block": "roller skate",
   "IconNames.Sad|block": "sad",
+  "IconNames.Scissors|block": "scissors",
   "IconNames.Silly|block": "silly",
   "IconNames.Skull|block": "skull",
   "IconNames.SmallDiamond|block": "small diamond",

libs/core/icons.ts

@@ -142,7 +142,10 @@ enum IconNames {
     Square,
     //% block="small square"
     //% blockImage=1
-    SmallSquare
+    SmallSquare,
+    //% block="scissors"
+    //% blockImage=1
+    Scissors
 }
 
 enum ArrowNames {
@@ -174,6 +177,9 @@ namespace basic {
     //% block="show icon %i" icon="\uf00a"
     //% parts="ledmatrix"
     //% help=basic/show-icon
+    //% blockFieldEditor="FieldGridPicker"
+    //% blockFieldEditorParams.width=500 blockFieldEditorParams.columns=5
+    //% blockFieldEditorParams.itemColour=black blockFieldEditorParams.tooltips=true
     export function showIcon(icon: IconNames) {
         let res = images.iconImage(icon)
         res.showImage(0)
@@ -380,6 +386,12 @@ namespace images {
                                         . # . # .
                                         . # # # .
                                         . . . . .`;
+            case IconNames.Scissors: return `
+                                        # # . . #
+                                        # # . # .
+                                        . . # . .
+                                        # # . # .
+                                        # # . . #`;
                                             // The following images were designed by Abbie Brooks.
             case IconNames.TShirt: return `
                                         # # . # #

theme/style.less

@@ -85,6 +85,15 @@ span.blocklyTreeLabel {
     &:extend(.pink all);
 }
 
+/* Blockly Field: Grid picker */
+.blocklyGridPickerTooltip {
+    padding: 3px 5px;
+    background-color: #fefefe;
+    border: black solid 3px;
+    color: black;
+    border-radius: 10px;
+}
+
 /*******************************
              Monaco
 *******************************/