Improved Blockly UI Layout and visual appearance.

MarkusBordihn · MarkusBordihn · commit f2de1efaa1ad · 2018-04-23T02:37:22.000+02:00
This changes allow to adding icons to the different Blockly sections for easier recognition.
diff --git a/locales/deu/blocks/phaser_blocks.js b/locales/deu/blocks/phaser_blocks.js
@@ -27,8 +27,16 @@ Locales['deu'] = Locales['deu'] || {};
  */
 /* eslint-disable max-len */
 Object.assign(Locales['deu'], {
+  'BLOCKS_PHASER_AUDIO': 'Audio',
   'BLOCKS_PHASER_CREATE': 'Erstellen',
   'BLOCKS_PHASER_GAME': 'Spiel',
+  'BLOCKS_PHASER_PRELOAD': 'Vorrausladen',
+  'BLOCKS_PHASER_INPUT': 'Eingabe',
+  'BLOCKS_PHASER_UPDATE': 'Aktualisieren',
+  'BLOCKS_PHASER_RENDERER': 'Renderer',
+  'BLOCKS_PHASER_FILES': 'Dateien',
+  'BLOCKS_PHASER_EXAMPLE_FILES': 'Beispiel Dateien',
   'BLOCKS_PHASER_ON_CREATE': 'beim Erstellen',
   'BLOCKS_PHASER_OPEN_FILE_LIBRARY': 'Öffne Datei Bibliothek',
+  'BLOCKS_PHASER_COLLIDE_WITH': 'kollidiert mit',
 });
diff --git a/locales/deu/sidebar.js b/locales/deu/sidebar.js
@@ -0,0 +1,34 @@
+/**
+ * @fileoverview Translation file for the sidebar (german).
+ *
+ * @license Copyright 2018 The Coding with Chrome Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @author mbordihn@google.com (Markus Bordihn)
+ */
+window['Locales'] = window['Locales'] || {};
+Locales['deu'] = Locales['deu'] || {};
+
+
+/**
+ * @final
+ * @export
+ */
+/* eslint-disable max-len */
+Object.assign(Locales['deu'], {
+  'SIDEBAR_LIBRARY': 'Öffne Datei Bibliothek',
+  'SIDEBAR_MEDIA': 'Medien hochladen und einfügen',
+  'SIDEBAR_FILE_DESCRIPTION': 'Dateibeschreibung anzeigen',
+  'SIDEBAR_TUTORIAL': 'Tutorial starten / neustarten',
+});
diff --git a/locales/eng/blocks/phaser_blocks.js b/locales/eng/blocks/phaser_blocks.js
@@ -27,8 +27,16 @@ Locales['eng'] = Locales['eng'] || {};
  */
 /* eslint-disable max-len */
 Object.assign(Locales['eng'], {
+  'BLOCKS_PHASER_AUDIO': 'Audio',
   'BLOCKS_PHASER_CREATE': 'Create',
   'BLOCKS_PHASER_GAME': 'Game',
+  'BLOCKS_PHASER_PRELOAD': 'Preload',
+  'BLOCKS_PHASER_INPUT': 'Input',
+  'BLOCKS_PHASER_UPDATE': 'Update',
+  'BLOCKS_PHASER_RENDERER': 'Renderer',
+  'BLOCKS_PHASER_FILES': 'Files',
+  'BLOCKS_PHASER_EXAMPLE_FILES': 'Example Files',
   'BLOCKS_PHASER_ON_CREATE': 'on create',
   'BLOCKS_PHASER_OPEN_FILE_LIBRARY': 'Open file library',
+  'BLOCKS_PHASER_COLLIDE_WITH': 'collide with',
 });
diff --git a/locales/eng/sidebar.js b/locales/eng/sidebar.js
@@ -0,0 +1,34 @@
+/**
+ * @fileoverview Translation file for the sidebar (english).
+ *
+ * @license Copyright 2018 The Coding with Chrome Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @author mbordihn@google.com (Markus Bordihn)
+ */
+window['Locales'] = window['Locales'] || {};
+Locales['eng'] = Locales['eng'] || {};
+
+
+/**
+ * @final
+ * @export
+ */
+/* eslint-disable max-len */
+Object.assign(Locales['eng'], {
+  'SIDEBAR_LIBRARY': 'Open file library',
+  'SIDEBAR_MEDIA': 'Upload and insert media',
+  'SIDEBAR_FILE_DESCRIPTION': 'Show file description',
+  'SIDEBAR_TUTORIAL': 'Start/restart tutorial',
+});
diff --git a/package.json b/package.json
@@ -114,6 +114,6 @@
     "lint": "eslint .",
     "show-updates": "ncu",
     "sync": "echo Syncing. Please wait ... && git pull && git submodule init && git submodule update && npm run update",
-    "update": "npm run clean && ncu -u -a && npm install && npm update -a && npm run build-third_party && npm test"
+    "update": "npm run clean && ncu -u -a --packageFile package.json && npm install && npm update -a && npm run build-third_party && npm test"
   }
 }
diff --git a/src/blocks/general/template.js b/src/blocks/general/template.js
@@ -47,6 +47,15 @@ Blockly.BlocksTemplate.addCircle = function() {
 };
 
 
+/**
+ * @return {!Blockly.FieldImage}
+ */
+Blockly.BlocksTemplate.collide = function() {
+  return new Blockly.FieldImage(
+    '../images/icons/collide_20pt.png', 18, 18, '▼');
+};
+
+
 /**
  * @return {!Blockly.FieldImage}
  */
diff --git a/src/blocks/phaser/arcade_physics/blocks.js b/src/blocks/phaser/arcade_physics/blocks.js
@@ -134,7 +134,7 @@ Blockly.Blocks['phaser_physics_arcade_enable'] = {
 Blockly.Blocks['phaser_physics_arcade_overlap'] = {
   init: function() {
     this.appendDummyInput()
-        .appendField(Blockly.BlocksTemplate.runningMan())
+        .appendField(Blockly.BlocksTemplate.collide())
         .appendField(i18t('on collision between'));
     this.appendValueInput('object1');
     this.appendDummyInput()
@@ -157,12 +157,10 @@ Blockly.Blocks['phaser_physics_arcade_overlap'] = {
  */
 Blockly.Blocks['phaser_physics_arcade_collide'] = {
   init: function() {
+    this.appendValueInput('object1')
+        .appendField(Blockly.BlocksTemplate.collide());
     this.appendDummyInput()
-        .appendField(Blockly.BlocksTemplate.point())
-        .appendField(i18t('collide between'));
-    this.appendValueInput('object1');
-    this.appendDummyInput()
-        .appendField(i18t('and'));
+        .appendField(i18t('BLOCKS_PHASER_COLLIDE_WITH'));
     this.appendValueInput('object2');
     this.setPreviousStatement(true, 'Update');
     this.setNextStatement(true, 'Update');
diff --git a/src/blocks/phaser/create/blocks.js b/src/blocks/phaser/create/blocks.js
@@ -77,6 +77,29 @@ Blockly.Blocks['phaser_add_background'] = {
 };
 
 
+/**
+ * Add background with specific size.
+ */
+Blockly.Blocks['phaser_add_background_scaled'] = {
+  init: function() {
+    this.appendDummyInput()
+        .appendField(Blockly.BlocksTemplate.point())
+        .appendField(i18t('add background image'))
+        .appendField(new Blockly.FieldTextInput('name'), 'sprite')
+        .appendField(Blockly.BlocksTemplate.image())
+        .appendField(i18t('with size'))
+        .appendField(new Blockly.FieldNumber(0, 0, 5760), 'width')
+        .appendField('x')
+        .appendField(new Blockly.FieldNumber(0, 0, 2160), 'height');
+    this.setPreviousStatement(true, 'Create');
+    this.setNextStatement(true, 'Create');
+    this.setColour(30);
+    this.setTooltip('');
+    this.setHelpUrl('');
+  },
+};
+
+
 /**
  * Add group.
  */
diff --git a/src/blocks/phaser/create/javascript.js b/src/blocks/phaser/create/javascript.js
@@ -51,7 +51,24 @@ Blockly.JavaScript['phaser_stage_background_color'] = function(block) {
  */
 Blockly.JavaScript['phaser_add_background'] = function(block) {
   let text_sprite = block.getFieldValue('sprite');
-  return 'game.add.image(0, 0, \'' + text_sprite + '\')\n';
+  return 'game.add.image(0, 0, \'' + text_sprite + '\');\n';
+};
+
+
+/**
+ * Add background with specific size.
+ * @param {Blockly.Block} block
+ * @return {!string}
+ */
+Blockly.JavaScript['phaser_add_background_scaled'] = function(block) {
+  let text_sprite = block.getFieldValue('sprite');
+  let number_width = Number(block.getFieldValue('width')) || 'game.world.width';
+  let number_height =
+    Number(block.getFieldValue('height')) || 'game.world.height';
+  return 'var backgroundImage = game.add.image(0, 0, \'' +
+    text_sprite + '\');\n' +
+    'backgroundImage.width = ' + number_width + ';\n' +
+    'backgroundImage.height = ' + number_height + ';\n';
 };
 
 
diff --git a/src/blocks/phaser/game/javascript.js b/src/blocks/phaser/game/javascript.js
@@ -26,12 +26,13 @@
  */
 Blockly.JavaScript['phaser_game'] = function(block) {
   let text_name = block.getFieldValue('name');
-  let number_width = block.getFieldValue('width');
-  let number_height = block.getFieldValue('height');
+  let number_width =
+    Number(block.getFieldValue('width')) || 'window.innerWidth';
+  let number_height =
+    Number(block.getFieldValue('height')) || 'window.innerHeight';
   return 'var obstacle_group;\n' +
-    'var game = new Phaser.Game(' + number_width + ' || window.innerWidth, ' +
-    number_height + ' || window.innerHeight, Phaser.AUTO, \'' +
-    text_name + '\');\n';
+    'var game = new Phaser.Game(' + number_width + ', ' + number_height +
+      ', Phaser.AUTO, \'' + text_name + '\');\n';
 };
 
 
diff --git a/src/blocks/phaser/toolbox.soy b/src/blocks/phaser/toolbox.soy
@@ -29,15 +29,15 @@
   {@param? files: ?}
 
   <xml>
-    <category name="{msg desc=""}BLOCKS_PHASER_GAME{/msg}" colour="75">
+    <category name="BLOCKS_PHASER_GAME" colour="75">
       {call .gameBlocks /}
     </category>
 
-    <category name="{msg desc="Phaser Preload Blocks"}Preload{/msg}" colour="165">
+    <category name="BLOCKS_PHASER_PRELOAD" colour="165">
       {call .preloadBlocks /}
     </category>
 
-    <category name="{msg desc=""}BLOCKS_PHASER_CREATE{/msg}" colour="30">
+    <category name="BLOCKS_PHASER_CREATE" colour="30">
 
       {call .createBlocks /}
 
@@ -58,7 +58,7 @@
 
     </category>
 
-    <category name="{msg desc="Phaser Input Blocks"}Input{/msg}" colour="135">
+    <category name="BLOCKS_PHASER_INPUT" colour="135">
 
       {call .inputBlocks /}
 
@@ -68,7 +68,7 @@
 
     </category>
 
-    <category name="{msg desc="Phaser Update Blocks"}Update{/msg}" colour="315">
+    <category name="BLOCKS_PHASER_UPDATE" colour="315">
 
       {call .updateBlocks /}
 
@@ -82,24 +82,22 @@
 
     </category>
 
-    <category name="{msg desc="Phaser Render Blocks"}Render{/msg}" colour="195">
-
+    <category name="BLOCKS_PHASER_RENDERER" colour="195">
       {call .renderBlocks /}
-
     </category>
 
     <sep></sep>
 
     {if $files}
-      <category name="{msg desc="File Blocks"}Files{/msg}" colour="150">
+      <category name="BLOCKS_PHASER_FILES" colour="150">
         <button text="{msg desc=""}BLOCKS_PHASER_OPEN_FILE_LIBRARY{/msg}" callbackKey="FILE_LIBRARY_MANAGMENT" />
         {call .files data="all" /}
       </category>
     {/if}
 
-      <category name="{msg desc="File Blocks"}Sample Files{/msg}" colour="150">
-        {call .sampleFiles data="all" /}
-      </category>
+    <category name="BLOCKS_PHASER_EXAMPLE_FILES" colour="150">
+      {call .sampleFiles data="all" /}
+    </category>
 
     <sep></sep>
 
@@ -208,7 +206,7 @@
   {@param? opt_hide_input_blocks: bool}
   {@param? opt_show_create_blocks: bool}
 
-  <category name="{msg desc="Phaser Audio Blocks"}Audio{/msg}" colour="245">
+  <category name="BLOCKS_PHASER_AUDIO" colour="245">
     {call .audioBlocks data="all" /}
   </category>
 
@@ -246,6 +244,8 @@
 
   <block type="phaser_add_background"></block>
 
+  <block type="phaser_add_background_scaled"></block>
+
   <block type="phaser_add_group">
     <value name="variable">
       <block type="variables_get">
diff --git a/src/cache/cache.js b/src/cache/cache.js
@@ -42,7 +42,7 @@ cwc.Cache = function(helper) {
   this.helper = helper;
 
   /** @private {!number} */
-  this.version = 4;
+  this.version = 5;
 
   /** @private {!cwc.utils.Database} */
   this.database_ = new cwc.utils.Database(this.name, this.version);
diff --git a/src/frameworks/internal/phaser/phaser.js b/src/frameworks/internal/phaser/phaser.js
@@ -128,6 +128,16 @@ cwc.framework.Phaser.RandomVerticalObstacleGenerator = function(x, y,
  * @private
  */
 cwc.framework.Phaser.prepare_ = function() {
+  if (navigator.userAgent == 'CwC sandbox') {
+    return;
+  }
+
+  if (document.location.href.includes('127.0.0.1:') &&
+      document.location.href.includes('/preview/')) {
+    console.log('Pre-caching files for export ...');
+    return;
+  }
+
   // Cleanup existing canvas elements, in the case this is an saved document.
   let canvasElements = document.getElementsByTagName('canvas');
   if (canvasElements) {
diff --git a/src/ui/blockly/blockly.js b/src/ui/blockly/blockly.js
@@ -537,8 +537,11 @@ cwc.ui.Blockly.prototype.cleanUp_ = function() {
 cwc.ui.Blockly.prototype.handleChangeEvent_ = function(e) {
   switch (e.type) {
     case Blockly.Events.UI:
-      if (this.toolbox.getAutoCollapse() && e.newValue) {
-        this.toolbox.collapse(e.newValue);
+      if (e.newValue) {
+        this.toolbox.decorateThreeLabels();
+        if (this.toolbox.getAutoCollapse()) {
+          this.toolbox.collapse(e.newValue);
+        }
       }
       break;
 
diff --git a/src/ui/blockly/blockly_toolbox.js b/src/ui/blockly/blockly_toolbox.js
diff --git a/src/ui/library/library_tour.js b/src/ui/library/library_tour.js
diff --git a/src/ui/sidebar/sidebar.js b/src/ui/sidebar/sidebar.js
diff --git a/src/ui/sidebar/sidebar.soy b/src/ui/sidebar/sidebar.soy
diff --git a/static_files/css/blockly/blockly.css b/static_files/css/blockly/blockly.css
diff --git a/static_files/css/blockly/toolbox.css b/static_files/css/blockly/toolbox.css
diff --git a/static_files/images/icons/collide_20pt.png b/static_files/images/icons/collide_20pt.png

Original file line number	Diff line number	Diff line change
`@@ -114,6 +114,6 @@`
`114`	`114`	`"lint": "eslint .",`
`115`	`115`	`"show-updates": "ncu",`
`116`	`116`	`"sync": "echo Syncing. Please wait ... && git pull && git submodule init && git submodule update && npm run update",`
`117`		`- "update": "npm run clean && ncu -u -a && npm install && npm update -a && npm run build-third_party && npm test"`
	`117`	`+ "update": "npm run clean && ncu -u -a --packageFile package.json && npm install && npm update -a && npm run build-third_party && npm test"`
`118`	`118`	`}`
`119`	`119`	`}`