chore: optimize devsite's toolbox css config and localized names inje…

…ction (google#2312) * feat: use css config in devsite toolbox * feat: rename `functions` with `procedures` to correspond to msgs keys * feat: optimize localized string filling approach in devsite * feat: remove colour block style of devsite * chore(format): format with prettier * chore(format): format another file to pass check
gonfunko · Apr 15, 2024 · 0c314ec · 0c314ec
1 parent 6e581a5
commit 0c314ec
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 23 deletions.
diff --git a/examples/devsite-landing-demo/script.js b/examples/devsite-landing-demo/script.js
@@ -75,14 +75,9 @@ function init() {
   }
 
   // Inject localized category names.
-  toolboxJson['contents'][0].name = getMsg('Logic');
-  toolboxJson['contents'][1].name = getMsg('Loops');
-  toolboxJson['contents'][2].name = getMsg('Math');
-  toolboxJson['contents'][3].name = getMsg('Text');
-  toolboxJson['contents'][4].name = getMsg('Lists');
-  // Separator.
-  toolboxJson['contents'][6].name = getMsg('Variables');
-  toolboxJson['contents'][7].name = getMsg('Procedures');
+  toolboxJson['contents'].forEach(function (part) {
+    part.name = getMsg(part.name);
+  });
 
   // Inject default variable name.
   // https://github.com/google/blockly/issues/5238
@@ -138,11 +133,6 @@ function init() {
           colourSecondary: '#B2DFDB',
           colorTertiary: '#009688',
         },
-        colour_blocks: {
-          colourPrimary: '#FFCDD2',
-          colourSecondary: '#FFEBEE',
-          colorTertiary: '#EF9A9A',
-        },
         variable_blocks: {
           colourPrimary: '#EF9A9A',
           colourSecondary: '#FFEBEE',

diff --git a/examples/devsite-landing-demo/style.css b/examples/devsite-landing-demo/style.css
@@ -75,31 +75,31 @@ option {
   font-family: var(--font-family) !important;
 }
 
-#blockly-0 {
+.blocklyTreeRowLogic {
   border-left: 15px solid #d1c4e9 !important;
 }
 
-#blockly-1 {
+.blocklyTreeRowLoops {
   border-left: 15px solid #a5d6a7 !important;
 }
 
-#blockly-2 {
+.blocklyTreeRowMath {
   border-left: 15px solid #4285f4 !important;
 }
 
-#blockly-3 {
+.blocklyTreeRowText {
   border-left: 15px solid #ffca28 !important;
 }
 
-#blockly-4 {
+.blocklyTreeRowLists {
   border-left: 15px solid #4db6ac !important;
 }
 
-#blockly-6 {
+.blocklyTreeRowVariables {
   border-left: 15px solid #ef9a9a !important;
 }
 
-#blockly-7 {
+.blocklyTreeRowProcedures {
   border-left: 15px solid #d7ccc8 !important;
 }
 

diff --git a/examples/devsite-landing-demo/toolbox.js b/examples/devsite-landing-demo/toolbox.js
@@ -15,7 +15,11 @@ let toolboxJson = {
     {
       // Logic Category
       kind: 'CATEGORY',
+      name: 'Logic',
       colour: 262,
+      cssConfig: {
+        row: 'blocklyTreeRow blocklyTreeRowLogic',
+      },
       contents: [
         {
           kind: 'BLOCK',
@@ -47,7 +51,11 @@ let toolboxJson = {
     {
       // Loops Category
       kind: 'CATEGORY',
+      name: 'Loops',
       colour: 122,
+      cssConfig: {
+        row: 'blocklyTreeRow blocklyTreeRowLoops',
+      },
       contents: [
         {
           kind: 'BLOCK',
@@ -103,7 +111,11 @@ let toolboxJson = {
     {
       // Math Category
       kind: 'CATEGORY',
+      name: 'Math',
       colour: 206,
+      cssConfig: {
+        row: 'blocklyTreeRow blocklyTreeRowMath',
+      },
       contents: [
         {
           kind: 'BLOCK',
@@ -272,7 +284,11 @@ let toolboxJson = {
     {
       // Text Category
       kind: 'CATEGORY',
+      name: 'Text',
       colour: 46,
+      cssConfig: {
+        row: 'blocklyTreeRow blocklyTreeRowText',
+      },
       contents: [
         {
           kind: 'BLOCK',
@@ -478,7 +494,11 @@ let toolboxJson = {
     {
       // Lists Category
       kind: 'CATEGORY',
+      name: 'Lists',
       colour: 172,
+      cssConfig: {
+        row: 'blocklyTreeRow blocklyTreeRowLists',
+      },
       contents: [
         {
           kind: 'BLOCK',
@@ -650,17 +670,25 @@ let toolboxJson = {
     },
 
     {
-      // Variable Category
+      // Variables Category
       kind: 'CATEGORY',
       custom: 'VARIABLE',
+      name: 'Variables',
       colour: 4,
+      cssConfig: {
+        row: 'blocklyTreeRow blocklyTreeRowVariables',
+      },
     },
 
     {
-      // Function Category
+      // Procedures Category
       kind: 'CATEGORY',
       custom: 'PROCEDURE',
+      name: 'Procedures',
       colour: 16,
+      cssConfig: {
+        row: 'blocklyTreeRow blocklyTreeRowProcedures',
+      },
     },
   ],
 };
diff --git a/plugins/migration/test/rename.mocha.js b/plugins/migration/test/rename.mocha.js
@@ -19,7 +19,7 @@ suite('Rename', function () {
       '1.0.0': [
         {
           oldName: 'Blockly',
-          exports: {}
+          exports: {},
         },
         {
           oldName: 'Blockly.moduleA',