Merge branch 'develop-1.7'

Author: sbates-idrc

.github/workflows/ci.yaml

@@ -8,7 +8,7 @@ jobs:
     name: Build
     strategy:
       matrix:
-        os: [ubuntu-18.04]
+        os: [ubuntu-20.04]
         node-version: [14.x, 16.x]
     runs-on: ${{ matrix.os }}
     env:

docs/adding-new-world-checklist.md

@@ -0,0 +1,42 @@
+# Checklist for adding a new world
+
+- Export world backgrounds, thumbnails, and characters from Figma as SVGs;
+  there should be 9 SVG files for each world, use the following naming
+  convention:
+  - `src/svg/<WorldName>.svg`
+  - `src/svg/<WorldName>Gray.svg`
+  - `src/svg/<WorldName>Contrast.svg`
+  - `src/svg/<WorldName>Thumbnail.svg`
+  - `src/svg/<WorldName>ThumbnailGray.svg`
+  - `src/svg/<WorldName>ThumbnailContrast.svg`
+  - `src/svg/<WorldName><CharacterName>.svg`
+  - `src/svg/<WorldName><CharacterName>Gray.svg`
+  - `src/svg/<WorldName><CharacterName>Contrast.svg`
+- Add an entry for the new world to `Worlds.js`
+  - Each value in the `backgroundInfo` object is a key to look up in the
+    `messages.json` file
+- Add an entry for the new world to the `availableWorldOptions` list property
+  of `WorldSelector.js`
+  - Worlds are ordered alphabetically, except for `Sketchpad` which is
+    always first
+- Update the
+  `'All worlds should be displayed as options and only one is checked'`
+  test in `WorldSelector.test.js` for the new world
+- Add entries to `messages.json`
+  - `<WorldName>.name`: the name of the world
+  - `<WorldName>.character`: the name of the character
+  - `<WorldName>.label`: the label used for the world in the
+    Scene Background dialog
+  - `<WorldName>.<CellInfo>`: add one entry for each type of
+    cell in the world's `backgroundInfo`; these `messages.json` entries are
+    used to localize the cell descriptions
+- To facilitate styling of the thumbnail when hovered in the Scene Background
+  dialog, add a `className` attribute to those elements of the thumbnail
+  SVGs that should be styled differently on hover
+- Add styles to `Worlds.scss`
+  - Styles for Default, Grayscale, and High Contrast themes (at least,
+    adding styles for any other themes as needed)
+  - Character background in the Program Block Editor
+  - Grid line colour
+  - Drawing and character starting point colour
+  - Thumbnail hover colours

docs/keyboard.md

@@ -58,7 +58,7 @@ Those key bindings are as follows.
  | Move focus to the pen toggle | Ctrl + Alt + x, f, s | ![Focus pen toggle icon](board-imgs/FocusPenToggle.png) |
  | Move focus to the play button | Ctrl + Alt + x, f, p | ![Focus play button icon](board-imgs/FocusPlay.png) |
  | Move focus to the previous program block | Ctrl + Alt + x, f, [ | Not available |
- | Move focus to the world selector | Ctrl + Alt + x, f, w | ![Focus world selector icon](board-imgs/FocusWorldSelector.png) |
+ | Move focus to the scene background selector | Ctrl + Alt + x, f, w | ![Focus scene background selector icon](board-imgs/FocusWorldSelector.png) |
  | Move the character down | Ctrl + Alt + x, p, m, d | ![Move character down icon](board-imgs/MoveCharacterDown.png) |
  | Move the character left | Ctrl + Alt + x, p, m, l | ![Move character left icon](board-imgs/MoveCharacterLeft.png) |
  | Move the character right | Ctrl + Alt + x, p, m, r | ![Move character right icon](board-imgs/MoveCharacterRight.png) |
@@ -115,7 +115,7 @@ Those key bindings are as follows:
  | Move focus to the pen toggle | Alt + x, f, s | ![Focus pen toggle icon](board-imgs/FocusPenToggle.png) |
  | Move focus to the play button | Alt + x, f, p | ![Focus play button icon](board-imgs/FocusPlay.png) |
  | Move focus to the previous program block | Alt + x, f, [ | Not available |
- | Move focus to the world selector | Alt + x, f, w | ![Focus world selector icon](board-imgs/FocusWorldSelector.png) |
+ | Move focus to the scene background selector | Alt + x, f, w | ![Focus scene background selector icon](board-imgs/FocusWorldSelector.png) |
  | Move the character down | Alt + x, p, m, d | ![Move character down icon](board-imgs/MoveCharacterDown.png) |
  | Move the character left | Alt + x, p, m, l | ![Move character left icon](board-imgs/MoveCharacterLeft.png) |
  | Move the character right | Alt + x, p, m, r | ![Move character right icon](board-imgs/MoveCharacterRight.png) |

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "c2lc-coding-environment",
-    "version": "1.6.2",
+    "version": "1.7.0",
     "private": true,
     "dependencies": {
         "bootstrap": "4.6.1",

package.json

@@ -1,8 +1,8 @@
 @import 'variables';
 
 .ActionsMenuItem {
-    padding: 0.5rem 0.5rem;
-    border-radius: 0.2rem;
+    position: relative;
+    padding: 0.75rem 0.5rem;
     display: grid;
     grid-template-columns: min-content 1fr min-content;
     column-gap: 0.5rem;
@@ -12,6 +12,7 @@
     &:focus {
         box-shadow: 0 0 0 $c2lc-focus-indicator-width black;
         outline: none;
+        z-index: 1;
     }
 
     &:hover {
@@ -76,4 +77,4 @@
 
 .ActionsMenuItem__icon--right45, .ActionsMenuItem__icon--right90, .ActionsMenuItem__icon--right180 {
     background-color: $c2lc-right-command-color;
-}
+}

src/ActionsMenuItem.scss

@@ -1,7 +1,8 @@
 .ActionsSimplificationModal__menu {
     display: flex;
     flex-direction: column;
-    row-gap: 0.5rem;
+    position: relative;
+    z-index: 0;
     padding: 1rem 2rem;
     border-bottom: 1px solid #F1F2F4;
 }

src/ActionsSimplificationModal.scss

@@ -149,7 +149,7 @@ export class App extends React.Component<AppProps, AppState> {
     constructor(props: any) {
         super(props);
 
-        this.version = '1.6.2';
+        this.version = '1.7';
 
         this.appContext = {
             bluetoothApiIsAvailable: FeatureDetection.bluetoothApiIsAvailable()
@@ -1488,12 +1488,12 @@ export class App extends React.Component<AppProps, AppState> {
                     </div>
                     <div className="App__world-container">
                         <h2 className='sr-only' >
-                            <FormattedMessage id='WorldSelector.heading' />
+                            <FormattedMessage id='WorldSelectorButton.heading' />
                         </h2>
                         <div className="App__world-selector">
                             <IconButton
                                 className='keyboard-shortcut-focus__world-selector'
-                                ariaLabel={this.props.intl.formatMessage({ id: 'WorldSelector' })}
+                                ariaLabel={this.props.intl.formatMessage({ id: 'WorldSelectorButton.label' })}
                                 onClick={this.handleClickWorldIcon}
                             >
                                 <WorldIcon className='App__world-selector-icon'/>

src/App.js

@@ -189,9 +189,9 @@ const ExtendedKeyboardSequences: KeyboardInputScheme = {
             worldSelector: {
                 keyDef: { code: "KeyW", key: "w" },
                 actionName: "focusWorldSelector",
-                description: "Move focus to the world selector",
+                description: "Move focus to the scene background selector",
                 icon: "FocusWorldSelector.png",
-                altText: "Focus world selector icon"
+                altText: "Focus scene background selector icon"
             }
         },
 

src/KeyboardInputSchemes.js

@@ -2,4 +2,8 @@
     max-width: 90vw;
     max-height: calc(100vh - 15rem);
     overflow-y: auto;
-}
+}
+
+.ModalBody.ModalBody--alwaysShowVerticalScrollbar {
+    overflow-y: scroll;
+}