Merge pull request #190 from Microsoft/consoleicon

Add console icon and set color.

docs/static/fonts/icons/iconfont.css

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

docs/static/fonts/icons/iconfont.svg

@@ -58,26 +58,29 @@
     <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="advancedcollapsed"
+    <glyph glyph-name="console"
       unicode="&#xF112;"
+      horiz-adv-x="40" d=" M15.6 21.3L2.3 15L2.3 19.8L11.1 23.6L2.3 27.4L2.3 32.2L15.6 25.9L15.6 21.3z M36 9.1L16.6 9.1L16.6 12.2L36 12.2L36 9.1z" />
+    <glyph glyph-name="advancedcollapsed"
+      unicode="&#xF113;"
       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="&#xF113;"
+      unicode="&#xF114;"
       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;"
+      unicode="&#xF115;"
       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;"
+      unicode="&#xF116;"
       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;"
+      unicode="&#xF117;"
       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;"
+      unicode="&#xF118;"
       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;"
+      unicode="&#xF119;"
       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>

libs/core/console.ts

@@ -3,7 +3,7 @@
 /**
  * Reading and writing data to the console output.
  */
-//% weight=12 color=#002050 icon="\uf120"
+//% weight=12 color=#00451A icon="\uf112"
 //% advanced=true
 namespace console {
     type Listener = (text: string) => void;

svgicons/categories/console.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg41"
+   x="0px"
+   y="0px"
+   viewBox="0 0 23 23"
+   style="enable-background:new 0 0 23 23;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="console.svg"><metadata
+     id="metadata12"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title>color</dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs10" /><sodipodi:namedview
+     pagecolor="#ffff44"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1090"
+     inkscape:window-height="695"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="10.26087"
+     inkscape:cx="11.5"
+     inkscape:cy="11.5"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg41" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#FFFFFF;}
+</style><title
+     id="title5">color</title><g
+     id="g3830"
+     transform="matrix(0.98283231,0,0,-1.0120366,8.9614614,10.754156)"><path
+       d="m 0,0 -7.762,-3.561 0,2.701 5.142,2.18 -5.142,2.16 0,2.721 L 0,2.62 0,0 Z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       id="path3832"
+       inkscape:connector-curvature="0" /></g><path
+     d="m 20.692705,17.741823 -11.1512146,0 0,-1.743739 11.1512146,0 0,1.743739 z"
+     style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path3834"
+     inkscape:connector-curvature="0" /></svg>

svgicons/generateIcons.js

@@ -19,6 +19,7 @@ webfontsGenerator({
     "./categories/sensors.svg",
     "./categories/text.svg",
     "./categories/variables.svg",
+    "./categories/console.svg",
     "./categories/advancedcollapsed.svg",
     "./categories/advancedexpanded.svg",
     "./icons/cancel.svg",

theme/blockly.less

@@ -53,7 +53,6 @@ div.blocklyTreeSeparator {
 /* Blockly Text */
 span.blocklyTreeLabel {
     font-family: @pageFont !important;
-    text-transform: uppercase !important;
     font-size:1rem !important;
     font-weight: bold;
 }
@@ -118,34 +117,34 @@ span.blocklyTreeIcon.blocklyTreeIconaddpackage::before {
 }
 
 span.blocklyTreeIcon.blocklyTreeIconadvancedcollapsed::before {
-    content: "\f112";
+    content: "\f113";
 }
 
 span.blocklyTreeIcon.blocklyTreeIconadvancedexpanded::before {
-    content: "\f113";
+    content: "\f114";
 }
 
 .save-editortools-btn .icon.save:before {
     font-family: 'legoIcons';
-    content: "\f117";
+    content: "\f118";
 }
 
 .download-button .icon.download.icon-and-text:before {
     font-family: 'legoIcons';
-    content: "\f116";
+    content: "\f117";
 }
 
 .button.approve.positive i.icon.checkmark:before {
     font-family: 'legoIcons';
-    content: "\f115";
+    content: "\f116";
 }
 
 .button.approve.cancel i.icon.cancel:before {
     font-family: 'legoIcons';
-    content: "\f114";
+    content: "\f115";
 }
 
 .blocks-menuitem i.icon.blocks:before {
     font-family: 'legoIcons' !important;
-    content: "\f118" !important;
+    content: "\f119" !important;
 }

theme/site/globals/site.variables

@@ -132,7 +132,7 @@
    Full screen
 --------------------*/
 
-@fullscreenBackgroundGradientStart: @blue;
+@fullscreenBackgroundGradientStart: #fff;
 @fullscreenBackgroundGradientEnd: #fff;
 
 /*-------------------
@@ -170,6 +170,6 @@
 --------------------*/
 
 @flyoutLabelColor: white;
-@blocklyFlyoutColor: #282828;
-@blocklyFlyoutColorOpacity: 0.9;
-@monacoFlyoutColor: rgba(40, 40, 40,0.9);
+@blocklyFlyoutColor: #3B3C3D;
+@blocklyFlyoutColorOpacity: 1.0;
+@monacoFlyoutColor: rgba(59, 60, 61, 1.0);