Merge pull request #173 from Microsoft/blockiconfont

Add block icon font

docs/static/fonts/icons/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
 	font-family: "iconfont";
-	src: url("iconfont.eot?0e26c61e9bbbc4168f76255eca2448a6?#iefix") format("embedded-opentype"),
+	src: url("iconfont.eot?efa64a2368d48451c10a24a5f99b98a1?#iefix") format("embedded-opentype"),
-url("iconfont.woff2?0e26c61e9bbbc4168f76255eca2448a6") format("woff2"),
+url("iconfont.woff2?efa64a2368d48451c10a24a5f99b98a1") format("woff2"),
-url("iconfont.woff?0e26c61e9bbbc4168f76255eca2448a6") format("woff");
+url("iconfont.woff?efa64a2368d48451c10a24a5f99b98a1") format("woff");
 }
 
 .icon {
@@ -67,21 +67,24 @@ url("iconfont.woff?0e26c61e9bbbc4168f76255eca2448a6") format("woff");
 .icon-variables:before {
 	content: "\f111";
 }
-.icon-cancel:before {
+.icon-advancedcollapsed:before {
 	content: "\f112";
 }
-.icon-check:before {
+.icon-advancedexpanded:before {
 	content: "\f113";
 }
-.icon-download:before {
+.icon-cancel:before {
 	content: "\f114";
 }
-.icon-save:before {
+.icon-check:before {
 	content: "\f115";
 }
-.icon-advancedcollapsed:before {
+.icon-download:before {
 	content: "\f116";
 }
-.icon-advancedexpanded:before {
+.icon-save:before {
 	content: "\f117";
 }
+.icon-blocks:before {
+	content: "\f118";
+}

docs/static/fonts/icons/iconfont.svg

@@ -58,24 +58,27 @@
     <glyph glyph-name="variables"
       unicode="&#xF111;"
       horiz-adv-x="40" d=" M36.8 12V7.8H3.4V12H36.8z M36.8 22.1V17.9H3.4V22.1H36.8z M36.7 32.2V28H3.3V32.2H36.7z" />
-    <glyph glyph-name="cancel"
-      unicode="&#xF112;"
-      horiz-adv-x="40" d=" M33 29.6L29.4 33.2L20.2 24L11 33.2L7.3 29.6L16.5 20.3L7.3 11.1L11 7.3L20.2 16.5L29.4 7.3L33 11.1L23.8 20.3z" />
-    <glyph glyph-name="check"
-      unicode="&#xF113;"
-      horiz-adv-x="40" d=" M33.7 32.9L15.3 14.4L7.5 22.3L3.8 18.4L11.7 10.8L11.7 10.8L15.3 7.1L37.4 29.2z" />
-    <glyph glyph-name="download"
-      unicode="&#xF114;"
-      horiz-adv-x="40" d=" M5.2 15.7H36.5V1.7H5.2V15.7z M28.5 24.2L26.1 26.6L22.6 23.1L22.6 36.5L19.1 36.5L19.1 23.5L16 26.6L13.6 24.2L20.9 16.7L21 16.9L21.2 16.7z" />
-    <glyph glyph-name="save"
-      unicode="&#xF115;"
-      horiz-adv-x="40" d=" M25 34.5C25 33.6 25 32.8 25 31.9C25 31 24.7 30.9 24 30.9C23.5 30.9 22.8 30.9 22.4 30.9C22.1 30.9 21.4 31 21.4 31.7V31.9V36.9C21.4 37.3 21.6 37.8 22.3 38C22.3 38 22.3 38 22.4 38C23 38 23.7 38 24.2 38C24.7 38 25.2 37.6 25.2 37.1C25.2 37.1 25.2 37.1 25.2 36.9C25 36.3 25 35.2 25 34.5z M37.6 31.2C35.8 32.9 34.3 34.5 32.5 36.3C31 37.8 31 37.8 28.5 37.8C27.5 37.8 27.3 37.6 27.3 36.6V28.4C27.3 27.4 27.1 27.2 26.1 27.2H14.3C13.2 27.2 13 27.4 13 28.4V36.4C13 37.6 12.9 37.8 11.7 37.8H3.8C2.6 37.8 2.4 37.6 2.4 36.4V19.9C2.4 14.3 2.4 8.9 2.4 3.2C2.4 2 2.6 1.8 3.7 1.8H36.9C37.9 1.8 38.1 2.2 38.1 3.2V29.6C38.3 30.5 37.9 30.9 37.6 31.2zM33.7 6.7H7.1V23H33.7V6.7z" />
     <glyph glyph-name="advancedcollapsed"
-      unicode="&#xF116;"
+      unicode="&#xF112;"
       horiz-adv-x="40" d=" M39.7 28.2L36.2 31.5L20 15.3L3.8 31.5L0.3 28.2L18.3 10.3L18.3 10.3L20 8.5L20.5 9L20.5 9z" />
     <glyph glyph-name="advancedexpanded"
-      unicode="&#xF117;"
+      unicode="&#xF113;"
       horiz-adv-x="40" d=" M39.3 12L21.7 29.6L21.7 29.6L20 31.3L19.5 30.8L19.5 30.8L0.7 12L4 8.7L20 24.7L36 8.7z" />
+    <glyph glyph-name="cancel"
+      unicode="&#xF114;"
+      horiz-adv-x="40" d=" M33 29.6L29.4 33.2L20.2 24L11 33.2L7.3 29.6L16.5 20.3L7.3 11.1L11 7.3L20.2 16.5L29.4 7.3L33 11.1L23.8 20.3z" />
+    <glyph glyph-name="check"
+      unicode="&#xF115;"
+      horiz-adv-x="40" d=" M33.7 32.9L15.3 14.4L7.5 22.3L3.8 18.4L11.7 10.8L11.7 10.8L15.3 7.1L37.4 29.2z" />
+    <glyph glyph-name="download"
+      unicode="&#xF116;"
+      horiz-adv-x="40" d=" M5.2 15.7H36.5V1.7H5.2V15.7z M28.5 24.2L26.1 26.6L22.6 23.1L22.6 36.5L19.1 36.5L19.1 23.5L16 26.6L13.6 24.2L20.9 16.7L21 16.9L21.2 16.7z" />
+    <glyph glyph-name="save"
+      unicode="&#xF117;"
+      horiz-adv-x="40" d=" M25 34.5C25 33.6 25 32.8 25 31.9C25 31 24.7 30.9 24 30.9C23.5 30.9 22.8 30.9 22.4 30.9C22.1 30.9 21.4 31 21.4 31.7V31.9V36.9C21.4 37.3 21.6 37.8 22.3 38C22.3 38 22.3 38 22.4 38C23 38 23.7 38 24.2 38C24.7 38 25.2 37.6 25.2 37.1C25.2 37.1 25.2 37.1 25.2 36.9C25 36.3 25 35.2 25 34.5z M37.6 31.2C35.8 32.9 34.3 34.5 32.5 36.3C31 37.8 31 37.8 28.5 37.8C27.5 37.8 27.3 37.6 27.3 36.6V28.4C27.3 27.4 27.1 27.2 26.1 27.2H14.3C13.2 27.2 13 27.4 13 28.4V36.4C13 37.6 12.9 37.8 11.7 37.8H3.8C2.6 37.8 2.4 37.6 2.4 36.4V19.9C2.4 14.3 2.4 8.9 2.4 3.2C2.4 2 2.6 1.8 3.7 1.8H36.9C37.9 1.8 38.1 2.2 38.1 3.2V29.6C38.3 30.5 37.9 30.9 37.6 31.2zM33.7 6.7H7.1V23H33.7V6.7z" />
+    <glyph glyph-name="blocks"
+      unicode="&#xF118;"
+      horiz-adv-x="40" d=" M10.9 23H39V16.9H10.9V23z M39.2 27.1L39.2 33L0.9 33L0.9 31.1L0.9 27.1L0.9 12.9L0.9 7L39.2 7L39.2 12.9L6.9 12.9L6.9 27.1z" />
   </font>
 </defs>
 </svg>

svgicons/generateIcons.js

@@ -19,12 +19,13 @@ webfontsGenerator({
     "./categories/sensors.svg",
     "./categories/text.svg",
     "./categories/variables.svg",
+    "./categories/advancedcollapsed.svg",
+    "./categories/advancedexpanded.svg",
     "./icons/cancel.svg",
     "./icons/check.svg",
     "./icons/download.svg",
     "./icons/save.svg",
-    "./categories/advancedcollapsed.svg",
+    "./icons/blocks.svg"
-    "./categories/advancedexpanded.svg"
   ],
   dest: '../docs/static/fonts/icons/',
   round: 10

svgicons/icons/blocks.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="svg41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 23 23" style="enable-background:new 0 0 23 23;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<title>color</title>
+<g id="menu_icn_blocks" transform="translate(-9594.255 11170)">
+	<rect id="Rectangle_271" x="9600.5" y="-11160.2" class="st0" width="16.2" height="3.5"/>
+	<polygon class="st0" points="9616.8,-11162.6 9616.8,-11166 9594.8,-11166 9594.8,-11164.9 9594.8,-11162.6 9594.8,-11154.4 
+		9594.8,-11151 9616.8,-11151 9616.8,-11154.4 9598.2,-11154.4 9598.2,-11162.6 	"/>
+</g>
+</svg>

theme/blockly.less

@@ -118,34 +118,34 @@ span.blocklyTreeIcon.blocklyTreeIconaddpackage::before {
 }
 
 span.blocklyTreeIcon.blocklyTreeIconadvancedcollapsed::before {
-    content: "\f116";
-}
-
-span.blocklyTreeIcon.blocklyTreeIconadvancedexpanded::before {
-    content: "\f117";
-}
-
-.save-editortools-btn .icon.save,
-    .download-button .icon.download.icon-and-text,
-    .button.approve.positive .i.icon.checkmark,
-    .button.approve.cancel .i.icon.cancel
-{
-    font-family: 'legoIcons';
-}
-
-.save-editortools-btn .icon.save:before {
-    content: "\f115";
-}
-
-.download-button .icon.download.icon-and-text:before {
-    content: "\f114";
-}
-
-.button.approve.positive .i.icon.checkmark:before {
-    content: "\f113";
-}
-
-.button.approve.cancel .i.icon.cancel:before {
     content: "\f112";
 }
 
+span.blocklyTreeIcon.blocklyTreeIconadvancedexpanded::before {
+    content: "\f113";
+}
+
+.save-editortools-btn .icon.save:before {
+    font-family: 'legoIcons';
+    content: "\f117";
+}
+
+.download-button .icon.download.icon-and-text:before {
+    font-family: 'legoIcons';
+    content: "\f116";
+}
+
+.button.approve.positive i.icon.checkmark:before {
+    font-family: 'legoIcons';
+    content: "\f115";
+}
+
+.button.approve.cancel i.icon.cancel:before {
+    font-family: 'legoIcons';
+    content: "\f114";
+}
+
+.blocks-menuitem i.icon.blocks:before {
+    font-family: 'legoIcons' !important;
+    content: "\f118" !important;
+}