pxt-core 7.3.25 → 7.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "7.3.25",
+  "version": "7.3.26",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

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/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;
+            }
+        }
     }
 
     /*******************************