pxt-core 7.5.8 → 7.5.11

package/react-common/styles/controls/RadioButtonGroup.less

@@ -0,0 +1,36 @@
+.common-radio-group.common-radio-buttons {
+    display: flex;
+    flex-direction: row;
+
+    .common-radio-choice {
+        &:extend(.common-button);
+        position: relative;
+
+        padding: 0;
+        background: @radioButtonIconBackground;
+        color: @radioButtonIconColor;
+        border: 1px solid @radioButtonIconBorder;
+
+        width: 2.5rem;
+        height: 2.5rem;
+        display: flex;
+        align-items: center;
+
+        i {
+            width: 100%;
+            margin: 0;
+        }
+
+        input {
+            position: absolute;
+            appearance: none;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .common-radio-choice.selected {
+        background: @radioButtonIconBackgroundChecked;
+        color: @radioButtonIconColorChecked;
+    }
+}

package/react-common/styles/react-common-variables.less

@@ -35,6 +35,33 @@
 @buttonFocusOutlineLightBackground: @commonBorderColor solid 1px;
 @buttonMenuBackgroundHoverColor: rgba(0,0,0,.1);
 @buttonMenuBackgroundActiveColor: rgba(0,0,0,.15);
+@buttonLinkColor: #3977b4;
+
+
+/****************************************************
+ *                    Dropdowns                      *
+ ****************************************************/
+
+
+ /****************************************************
+ *                DraggableGraph                     *
+ ****************************************************/
+
+ @draggableGraphPathColor: #E63022;
+ @draggableGraphPointColor: #E63022;
+
+
+/****************************************************
+ *                    Dropdowns                      *
+ ****************************************************/
+
+
+ /****************************************************
+ *                DraggableGraph                     *
+ ****************************************************/
+
+ @draggableGraphPathColor: #E63022;
+ @draggableGraphPointColor: #E63022;
 
 /****************************************************
  *                    Modals                        *
@@ -89,10 +116,21 @@
 /****************************************************
  *              EditorToggle                        *
  ****************************************************/
+
 @editorToggleBackgroundColor: rgba(52,73,94,.4);
 @editorToggleBorderColor: rgba(52,73,94,.2);
 @editorToggleBorderWidth: 3px;
 
+/****************************************************
+ *                RadioButtonGroup                  *
+ ****************************************************/
+
+ @radioButtonIconBackground: #eaeaea;
+ @radioButtonIconBackgroundChecked: #ffffff;
+ @radioButtonIconColor: #333333;
+ @radioButtonIconColorChecked: #E63022;
+ @radioButtonIconBorder: #A6A6A6;
+
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/

package/react-common/styles/react-common.less

@@ -2,11 +2,14 @@
 @import "share/share.less";
 @import "controls/Button.less";
 @import "controls/Checkbox.less";
+@import "controls/DraggableGraph.less";
+@import "controls/Dropdown.less";
 @import "controls/EditorToggle.less";
 @import "controls/Icon.less";
 @import "controls/Input.less";
 @import "controls/MenuDropdown.less";
 @import "controls/Modal.less";
+@import "controls/RadioButtonGroup.less";
 @import "controls/Spinner.less";
 @import "controls/Textarea.less";
 @import "./react-common-variables.less";

package/theme/pxt.less

@@ -38,6 +38,7 @@
 @import 'webusb';
 
 @import 'image-editor/imageEditor';
+@import "soundeffecteditor";
 
 @import "react-common";
 

package/theme/soundeffecteditor.less

@@ -0,0 +1,239 @@
+/****************************************************
+ *                    Variables                      *
+ ****************************************************/
+
+@soundEffectHeaderColor: #E63022;
+
+@soundPlayButtonBackground: #333333;
+@soundPlayButtonForeground: #ffffff;
+
+@soundPreviewBackgroundColor: #fbe2d6;
+@soundPreviewBaselineColor: #888888;
+@soundPreviewStaticWaveColor: @soundPreviewBaselineColor;
+@soundPreviewAnimatedWaveColor: @soundEffectHeaderColor;
+
+@soundGalleryBackgroundColor: #481041;
+@soundGalleryWaveColor: @soundEffectHeaderColor;
+
+
+/****************************************************
+ *                    Container                      *
+ ****************************************************/
+
+.sound-effect-editor-widget {
+    box-shadow: 0 0 3px ~"rgb(0 0 0 / 30%)";
+    border-radius: 0.25rem;
+    overflow-y: scroll;
+    background-color: @white;
+}
+
+.sound-effect-editor {
+    width: 100%;
+    height: 100%;
+    background-color: @white;
+    display: flex;
+    flex-direction: column;
+
+    .link-button {
+        margin-left: 2rem;
+    }
+}
+
+.sound-effect-editor-content {
+    flex-grow: 1;
+    position: relative;
+    overflow: hidden;
+}
+
+.sound-controls {
+    padding: 0.5rem 2rem;
+}
+
+.sound-effect-header {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    height: 3.5rem;
+    position: relative;
+
+    justify-content: center;
+    align-items: center;
+
+    background-color: @soundEffectHeaderColor;
+
+    & > .common-button {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+}
+
+/****************************************************
+ *                      Graphs                      *
+ ****************************************************/
+
+.sound-graph-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+
+    & > span {
+        flex-grow: 1;
+    }
+}
+
+.frequency-graph {
+    padding-top: 0.5rem;
+    border-bottom: 1px solid #dedede;
+}
+
+.dropdown-and-label {
+    display: flex;
+    flex-direction: row;
+    margin-right: 0.5rem;
+    align-items: center;
+}
+
+.sound-graph-container {
+    margin-top: 0.5rem;
+    border: 1px solid #dedede;
+}
+
+.sound-label {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 2rem;
+    margin-right: 0.5rem;
+    user-select: none;
+}
+
+.sound-label.waveform-name {
+    font-weight: 600;
+    margin-left: 0.5rem;
+}
+
+.waveform-and-duration-controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .duration-controls {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+        justify-content: right;
+
+        input {
+            width: 4rem;
+        }
+    }
+}
+
+/****************************************************
+ *                     Preview                      *
+ ****************************************************/
+
+ .sound-preview {
+    height: 8rem;
+    padding: 0 2.5rem;
+    background: @soundPreviewBackgroundColor;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+        height: 100%;
+    }
+}
+
+.common-button.sound-effect-play-button {
+    width: 3rem;
+    height: 3rem;
+    overflow: hidden;
+    padding: 0;
+    border-radius: 2rem;
+    background: @soundPlayButtonBackground;
+    position: absolute;
+    right: 0;
+    margin-top: -1.5rem;
+
+    .fas.fa-play {
+        margin: 0 0 0 0.25rem;
+        color: @soundPlayButtonForeground;
+    }
+}
+
+.common-button.sound-effect-play-button:focus::after {
+    border-radius: 2rem;
+}
+
+.sound-preview-baseline {
+    stroke: @soundPreviewBaselineColor;
+}
+
+.sound-preview-static-wave {
+    stroke: @soundPreviewStaticWaveColor;
+}
+
+.sound-preview-animated-wave {
+    stroke: @soundPreviewAnimatedWaveColor;
+}
+
+
+/****************************************************
+ *                      Gallery                     *
+ ****************************************************/
+
+.sound-gallery {
+    position: absolute;
+    height: 100%;
+    top: -100%;
+    width: 100%;
+    transition: top 0.25s ease;
+    background: @soundGalleryBackgroundColor;
+    padding: 1rem;
+    overflow-y: auto;
+}
+
+.sound-gallery.visible {
+    top: 0px;
+}
+
+.sound-gallery-scroller {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.sound-gallery-scroller > .common-button {
+    margin-bottom: 0.5rem;
+    padding: 0.6rem 2rem 0.6rem;
+}
+
+.sound-gallery-item-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .common-button.sound-effect-play-button {
+        position: relative;
+        margin-top: 0;
+        z-index: 2;
+    }
+
+    .sound-effect-name {
+        font-size: 22px;
+        flex-grow: 1;
+    }
+
+    svg {
+        width: 10rem;
+    }
+}
+
+.sound-gallery-preview-wave {
+    stroke: @soundGalleryWaveColor;
+}

package/webapp/public/skillmap.html

@@ -28,5 +28,5 @@
     <!-- end usabilla live embed code -->
 
     <!-- @include thin-footer.html -->
-  <script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this.webpackJsonpskillsmap=this.webpackJsonpskillsmap||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/blb/skillmap/js/2.3e47a285.chunk.js"></script><script src="/blb/skillmap/js/main.2485091f.chunk.js"></script></body>
+  <script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this.webpackJsonpskillsmap=this.webpackJsonpskillsmap||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/blb/skillmap/js/2.3e47a285.chunk.js"></script><script src="/blb/skillmap/js/main.e30f6be4.chunk.js"></script></body>
 </html>