Merge branch 'develop' into feature/dynamic-paths

Author: lindapaiste

.github/workflows/deploy.yml

@@ -23,7 +23,9 @@ jobs:
         with:
           ref: release
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
+        with:
+          platforms: linux/amd64,linux/arm64
       - name: Login to Docker Hub
         uses: docker/login-action@v1
         with:

client/components/Nav.jsx

@@ -30,6 +30,7 @@ class Nav extends React.PureComponent {
     super(props);
     this.handleSave = this.handleSave.bind(this);
     this.handleNew = this.handleNew.bind(this);
+    this.handleDuplicate = this.handleDuplicate.bind(this);
     this.handleShare = this.handleShare.bind(this);
     this.handleDownload = this.handleDownload.bind(this);
     this.handleLangSelection = this.handleLangSelection.bind(this);
@@ -56,6 +57,10 @@ class Nav extends React.PureComponent {
     }
   }
 
+  handleDuplicate() {
+    this.props.cloneProject();
+  }
+
   handleLangSelection(event) {
     this.props.setLanguage(event.target.value);
     this.props.showToast(1500);
@@ -132,7 +137,7 @@ class Nav extends React.PureComponent {
           </NavMenuItem>
           <NavMenuItem
             hideIf={!this.props.project.id || !this.props.user.authenticated}
-            onClick={this.props.cloneProject}
+            onClick={this.handleDuplicate}
           >
             {this.props.t('Nav.File.Duplicate')}
           </NavMenuItem>

client/modules/IDE/components/Editor.jsx

@@ -159,6 +159,7 @@ class Editor extends React.Component {
       [`${metaKey}-Enter`]: () => null,
       [`Shift-${metaKey}-Enter`]: () => null,
       [`${metaKey}-F`]: 'findPersistent',
+      [`Shift-${metaKey}-F`]: this.tidyCode,
       [`${metaKey}-G`]: 'findPersistentNext',
       [`Shift-${metaKey}-G`]: 'findPersistentPrev',
       [replaceCommand]: 'replace',
@@ -194,16 +195,6 @@ class Editor extends React.Component {
     });
 
     this._cm.on('keydown', (_cm, e) => {
-      if (
-        ((metaKey === 'Cmd' && e.metaKey) ||
-          (metaKey === 'Ctrl' && e.ctrlKey)) &&
-        e.shiftKey &&
-        e.key === 'f'
-      ) {
-        e.preventDefault();
-        this.tidyCode();
-      }
-
       // Show hint
       const mode = this._cm.getOption('mode');
       if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {

client/modules/IDE/reducers/preferences.js

@@ -12,7 +12,7 @@ const initialState = {
   autorefresh: false,
   language: 'en-US',
   autocloseBracketsQuotes: true,
-  autocompleteHinter: true
+  autocompleteHinter: false
 };
 
 const preferences = (state = initialState, action) => {

client/styles/abstracts/_variables.scss

@@ -3,19 +3,13 @@ $base-font-size: 12;
 //colors
 $p5js-pink: #ed225d;
 $p5js-pink-opacity: #ed225d80;
-$processing-blue: #007BBB;
 $p5js-active-pink: #f10046;
 $white: #fff;
 $black: #000;
 $yellow: #F5DC23;
-$orange: #ffa500;
-$red: #ff0000;
-$lightsteelblue: #B0C4DE;
 $dodgerblue: #1E90FF;
-// $icon-hover-color: #333;
 $p5-contrast-pink: #FFA9D9;
 
-$border-color: #B5B5B5;
 $outline-color: #0F9DD7;
 
 // Grayscale values
@@ -43,7 +37,6 @@ $themes: (
     primary-text-color: $dark,
     secondary-text-color: $medium-dark,
     inactive-text-color: $middle-dark,
-    dropzone-text-color: $dark,
     modal-button-color: $dark,
     background-color: $lighter,
     button-background-color: $light,
@@ -67,15 +60,10 @@ $themes: (
     console-background-color: $light,
     console-input-background-color: $lightest,
     console-color: $darker,
-    console-logged-times-color: $lightest,
     console-arrow-color: $middle-gray,
     console-active-arrow-color: #0071AD,
     console-header-background-color: $medium-light,
     console-header-color: $darker,
-    console-info-background-color: #5276B7,
-    console-warn-background-color: #996B00,
-    console-debug-background-color: #0071AD,
-    console-error-background-color: #D11518,
     ide-border-color: $medium-light,
     editor-gutter-color: $lighter,
     file-hover-color: $light,
@@ -99,9 +87,6 @@ $themes: (
     codefold-icon-open: url("../images/triangle-arrow-down.svg?byUrl"),
     codefold-icon-closed: url("../images/triangle-arrow-right.svg?byUrl"),
 
-    primary-button-color: $lightest,
-    primary-button-background-color: $p5js-pink,
-
     table-button-color: $lightest,
     table-button-background-color: $middle-gray,
     table-button-active-color: $lightest,
@@ -146,7 +131,6 @@ $themes: (
     logo-background-color: $lightest,
     heavy-text-color: $lightest,
     primary-text-color: $lightest,
-    dropzone-text-color: $black,
     modal-button-color: $lightest,
     secondary-text-color: $medium-light,
     inactive-text-color: $middle-light,
@@ -172,15 +156,10 @@ $themes: (
     console-background-color: $dark,
     console-input-background-color: $darker,
     console-color: $lightest,
-    console-logged-times-color: $dark,
     console-arrow-color: $medium-light,
     console-active-arrow-color: #097BB3,
     console-header-background-color: $medium-dark,
     console-header-color: $lightest,
-    console-info-background-color: #5276B7,
-    console-warn-background-color: #966C08,
-    console-error-background-color: #DD3134,
-    console-debug-background-color: #097BB3,
     ide-border-color: $middle-dark,
     editor-gutter-color: $darker,
     file-hover-color: $dark,
@@ -204,9 +183,6 @@ $themes: (
     codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"),
     codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"),
 
-    primary-button-color: $lightest,
-    primary-button-background-color: $p5js-pink,
-
     table-button-color: $lightest,
     table-button-background-color: $middle-gray,
     table-button-active-color: $lightest,
@@ -249,7 +225,6 @@ $themes: (
     logo-background-color: $darker,
     heavy-text-color: $yellow,
     primary-text-color: $lightest,
-    dropzone-text-color: $black,
     modal-button-color: $dark,
     secondary-text-color: $lighter,
     inactive-text-color: $light,
@@ -275,15 +250,10 @@ $themes: (
     console-background-color: $dark,
     console-input-background-color: $darker,
     console-color: $lightest,
-    console-logged-times-color: $darker,
     console-arrow-color: $lightest,
     console-active-arrow-color: $dodgerblue,
     console-header-background-color: $medium-dark,
     console-header-color: $lightest,
-    console-info-background-color: $lightsteelblue,
-    console-warn-background-color: $orange,
-    console-debug-background-color: $dodgerblue,
-    console-error-background-color: $red,
     ide-border-color: $middle-dark,
     editor-gutter-color: $darker,
     file-hover-color: $dark,
@@ -307,9 +277,6 @@ $themes: (
     codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"),
     codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"),
 
-    primary-button-color: $lightest,
-    primary-button-background-color: $p5js-pink,
-
     table-button-color: $dark,
     table-button-background-color: $middle-gray,
     table-button-active-color: $dark,
@@ -352,13 +319,3 @@ $themes: (
 $toast-background-color: $medium-dark;
 $toast-text-color: $lightest;
 
-$light-console-error-color: #D11518;
-$light-console-warn-color: #FAAF00;
-$light-console-debug-color: #0071AD;
-
-$dark-console-error-color: #DF3A3D;
-$dark-console-warn-color: #F5BC38;
-$dark-console-debug-color: #0C99E2;
-
-$about-play-background-color: rgba(255, 255, 255, 0.7);
-$about-button-border-color: rgba(151, 151, 151, 0.7);

client/styles/components/_about.scss

@@ -6,35 +6,6 @@
   }
 }
 
-// hello p5 video link button css
-
-// .about__play-video {
-//   padding-top: #{9 / $base-font-size}rem;
-//   padding-left: #{5 / $base-font-size}rem;
-// }
-
-// .about__play-video-button {
-//   @include themify() {
-//     @extend %toolbar-button;
-//     width: #{32 / $base-font-size}rem;
-//     height: #{32 / $base-font-size}rem;
-//     line-height: #{34 / $base-font-size}rem;
-//     border-radius: #{24 / $base-font-size}rem;
-//     background-color: $about-play-background-color;
-//     border: solid 0.5px $about-button-border-color;
-//     &:hover {
-//       border-color: getThemifyVariable('button-background-hover-color');
-//     }
-//   }
-//   padding-left: 2px;
-//   margin-right: #{9 / $base-font-size}rem;
-//   svg {
-//     width: #{11 / $base-font-size}rem;
-//     height: #{11 / $base-font-size}rem;
-//     margin-left: #{1 / $base-font-size}rem;
-//   }
-// }
-
 .about__content {
   display: flex;
   flex-direction: row;
@@ -105,12 +76,3 @@
 .about__footer-list {
   padding-top: #{12 / $base-font-size}rem;
 }
-
-.about__ok-button {
-  @include themify() {
-    @extend %button;
-    padding: #{7 / $base-font-size}rem #{13 / $base-font-size}rem;
-    font-size: #{16 / $base-font-size}rem;
-    border: #{0.5 / $base-font-size}rem solid $toast-background-color;
-  }
-}

client/styles/components/_collection-popover.scss

@@ -86,7 +86,7 @@
 
 .collection-add-sketch {
   min-width: #{600 / $base-font-size}rem;
-  overflow: scroll;
+  overflow: auto;
 }
 
 .collection-share {

client/styles/components/_collection.scss

@@ -34,10 +34,6 @@
 	font-weight: normal;
 }
 
-.preview-console__icon {
-	padding-right: #{20 / $base-font-size}rem;
-}
-
 .preview-console__messages {
 	display: flex;
 	flex: 1;

client/styles/components/_console.scss

@@ -2,14 +2,6 @@
   position: relative;
 }
 
-.copyable-input__tooltip {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
 .copyable-input__value {
   width: 100%;
   font-size: #{16 / $base-font-size}rem;