pxt-core 7.4.9 → 7.4.13

package/theme/blockly-core.less

@@ -72,7 +72,7 @@ body.blocklyMinimalBody {
         Blockly Text
 *******************************/
 
-.pxt-renderer {
+.pxt-renderer.classic-theme {
     text.blocklyFlyoutLabelText, .blocklyFlyoutButton text.blocklyText {
         font-family: @pageFont !important;
     }
@@ -90,12 +90,12 @@ body.blocklyMinimalBody {
         font-style: italic;
     }
 
-    text.semanticIcon {
+    .blocklyEditableText>text.semanticIcon {
         fill: #fff;
         font-family: "Icons";
         font-size: 19px;
     }
-    text.semanticIcon.inverted {
+    .blocklyEditableText>text.semanticIcon.inverted {
         fill: #000;
     }
 }
@@ -107,6 +107,13 @@ body.blocklyMinimalBody {
     color: white;
 }
 
+/*******************************
+        Blockly Toolbox
+*******************************/
+
+.blocklyTreeIcon {
+    visibility: visible;
+}
 
 /*******************************
         Blockly Flyout
@@ -216,17 +223,19 @@ text.blocklyCheckbox {
 }
 
 /* (arcade only) Sets the correct background color for the sprite image field */
-.pxt-renderer .blocklyNonEditableText > rect.blocklySpriteField,
-.pxt-renderer .blocklyNonEditableText > rect.blocklyAnimationField,
-.pxt-renderer .blocklyNonEditableText > rect.blocklyTilemapField,
-.pxt-renderer .blocklyEditableText > rect.blocklySpriteField,
-.pxt-renderer .blocklyEditableText > rect.blocklyAnimationField,
-.pxt-renderer .blocklyEditableText > rect.blocklyTilemapField {
-    fill: #dedede;
-    stroke: #898989;
-    stroke-width: 1;
-}
+.pxt-renderer.classic-theme {
+    .blocklyNonEditableText > rect.blocklySpriteField,
+    .blocklyNonEditableText > rect.blocklyAnimationField,
+    .blocklyNonEditableText > rect.blocklyTilemapField,
+    .blocklyEditableText > rect.blocklySpriteField,
+    .blocklyEditableText > rect.blocklyAnimationField,
+    .blocklyEditableText > rect.blocklyTilemapField {
+        fill: #dedede;
+        stroke: #898989;
+        stroke-width: 1;
+    }
 
+}
 
 /*******************************
         Blocks
@@ -307,6 +316,22 @@ text.blocklyCheckbox {
     border: 1px solid #FAF6BD; // match comment color
 }
 
+/*******************************
+        Workspace Search
+*******************************/
+
+.blockly-ws-searching {
+    path.blocklyPath:not(.blockly-ws-search-highlight-pxt) {
+        opacity: 0.6;
+    }
+
+    path.blocklyPath.blockly-ws-search-highlight-pxt.blockly-ws-search-current {
+        stroke: #FFF200;
+        stroke-width: 4px;
+        transition: none;
+    }
+}
+
 /*******************************
         Media Adjustments
 *******************************/

package/theme/common-components.less

@@ -16,6 +16,7 @@
     margin-top: -0.25rem;
     background-color: @red;
     border-radius: 50%;
+    animation: notification-glow 5s infinite ease-in-out;
 }
 
 .tab-icon {
@@ -31,4 +32,10 @@
 .tab-content,
 .tab-content > div {
     height: 100%;
+}
+
+@keyframes notification-glow {
+    0%, 50% { box-shadow: 0 0 0.12rem -0.12rem @red; }
+    10%, 40% { box-shadow: 0 0 0.12rem 0rem @red; }
+    25% { box-shadow: 0 0 0.12rem 0.12rem @white; }
 }

package/theme/common.less

@@ -1326,7 +1326,7 @@ p.ui.font.small {
     .simPanel.ui.items {
         position: fixed;
         padding: 0;
-        margin: 1em;
+        margin: 1em 1em 0;
         bottom: ~"calc(5.5rem + var(--extra-mobile-sim-padding))" !important;
         right: 0.5rem;
         top: unset;

package/theme/highcontrast.less

@@ -841,6 +841,10 @@
             color: @HCbackground;
             background-color: @HCtextColor;
         }
+
+        .tab-badge {
+            display: none;
+        }
     }
 
     .ui.label {

package/theme/melodyeditor.less

@@ -250,8 +250,8 @@
 }
 
 .melody-content-div,
-.pxt-renderer g.blocklyEditableText > &,
-.pxt-renderer g.blocklyNonEditableText > & {
+.pxt-renderer.classic-theme g.blocklyEditableText > &,
+.pxt-renderer.classic-theme g.blocklyNonEditableText > & {
     .melody-red {
         fill: #A80000;
         background: #A80000;

package/theme/print.less

@@ -102,7 +102,7 @@
     }
 
     /** blockly **/
-    svg, .pxt-renderer {
+    svg, .pxt-renderer.classic-theme {
         .blocklyPath {
             stroke-width: 3px !important;
             stroke: black !important;

package/theme/pxt.less

@@ -39,5 +39,7 @@
 
 @import 'image-editor/imageEditor';
 
+@import "react-common";
+
 /* Reference import */
 @import (reference) "semantic.less";

package/theme/toolbox.less

@@ -8,6 +8,7 @@
     color: @blocklyToolboxText;
     overflow-x: visible;
     overflow-y: auto;
+    padding-top: 0;
     z-index: @blocklyToolboxZIndex;
     /* so blocks go over toolbox when dragging */
     -webkit-tap-highlight-color: transparent;

package/theme/tutorial-sidebar.less

@@ -6,10 +6,16 @@
 @tutorialSecondaryColor: @blue;
 
 @tutorialTabletButtonColor: #f3f3f3;
+@tutorialTabletSimulatorButtonColor: rgba(0, 0, 0, 0.05);
 @tutorialTabletStepCounterWidth: 16rem;
 
 @tutorialHintMaskZIndex: -1; // Below tutorial pane
 
+@tutorialControlsOffset: 5.725rem;
+@tutorialBoardviewOffset: 3rem;
+@tutorialTabBarOffset: 3.5rem;
+@tutorialSimulatorMinHeight: 250px;
+
 /*******************************
         Tutorial Tab
 *******************************/
@@ -27,11 +33,6 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-
-    .ui.button, .ui.button:hover {
-        box-shadow: none;
-        background-image: none;
-    }
 }
 
 .tutorial-content {
@@ -65,6 +66,14 @@
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), @white);
 }
 
+.tutorial-container,
+.tutorial-controls {
+    .ui.button, .ui.button:hover {
+        box-shadow: none;
+        background-image: none;
+    }
+}
+
 /*******************************
         Exit Tutorial
 *******************************/
@@ -297,9 +306,13 @@
             .sidebar-button, .play-button { display: block !important; }
             .expand-button, .fullscreen-button { display: none !important; }
         }
+
+        .tutorial-controls { display: none; }
     }
     .tab-simulator.tab-content:not(.hidden) {
         .simPanel {
+            height: calc(100% - @tutorialControlsOffset);
+
             .sidebar-button, .button.hidefullscreen { display: none !important; }
         }
     }
@@ -353,6 +366,29 @@
         Media Adjustments
 *******************************/
 
+/* Desktop Only */
+@media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestTabletScreen) {
+    #root.tabTutorial:not(.fullscreensim) .tab-simulator:not(.hidden) {
+        .simPanel {
+            height: calc(100% - @tutorialControlsOffset);
+            min-height: @tutorialSimulatorMinHeight;
+        }
+        #boardview {
+            height: calc(100% - @tutorialBoardviewOffset);
+            min-height: @tutorialSimulatorMinHeight;
+        }
+        #simulators {
+            height: 100%;
+            min-height: @tutorialSimulatorMinHeight;
+        }
+        .simframe {
+            padding-bottom: unset !important;
+            height: 100%;
+            min-height: @tutorialSimulatorMinHeight;
+        }
+    }
+}
+
 /* <= Tablet (Mobile + Tablet) */
 @media only screen and (max-width: @largestTabletScreen) {
     #root.tabTutorial,
@@ -465,7 +501,8 @@
         }
     }
 
-    .tutorial-container {
+    .tutorial-container,
+    .tutorial-controls {
         > .ui.button, > .ui.button:focus {
             color: @tutorialPrimaryColor;
             background: @tutorialTabletButtonColor;
@@ -526,6 +563,10 @@
     #root.tabTutorial:not(.fullscreensim) .tab-simulator:not(.hidden) {
         .simPanel {
             display: flex;
+            position: relative;
+            height: 100%;
+            margin: 0 4rem;
+            z-index: 30;
 
             #simulators {
                 width: 34rem;
@@ -551,6 +592,23 @@
         #boardview {
             width: 100% !important;
         }
+
+        .tutorial-controls {
+            position: absolute;
+            top: @tutorialTabBarOffset;
+            width: 100%;
+            height: calc(100% - @tutorialTabBarOffset);
+            justify-content: space-between;
+            z-index: 10;
+
+            .ui.button {
+                height: 100%;
+            }
+
+            .ui.button:not(:hover) {
+                background-color: @tutorialTabletSimulatorButtonColor;
+            }
+        }
     }
 
     /*******************************