Alerts for hardware and other info: overall design

[kaaaaathy]

Overview

We need a way to tell Scratchers when their hardware extension device loses connection.
This design is for an alert message which directs users to the device modal.

Current Scope

The alert appears when an extension device loses connection.
Clicking "x" dismisses the alert.

Clicking "reconnect" triggers the device modal. The original alert should disappear.

The alert can also appear in full screen stage mode.
Clicking "reconnect" takes you back to the editor page w/ device modal.

More than one alert can appear at once. Multiple alerts should stack.

Stacking behavior persists in full screen stage.

Although multiple alerts case is probably rare... the stacking solution isn't ideal. We might revisit a solution that doesn't dominate the entire workspace.

Future Considerations

Extensibility

Alerts could also be useful in other use cases:

• Downloading/uploading confirmations
  This case includes a "progress" alert and a "success" alert.
  
  

(Success alert should disappear on a timer.)

• Lost wifi connection
  

Other Extensions Messaging

There are a couple situations where we should communicate that hardware is not connected, with or without alerts.

• What happens if a Scratcher loads a project with hardware extensions, without a device already connected?
• Is this useful for other extension errors, e.g. video sensing?
• How does this system work with the project page?

Specs

Sizing + Colors
Minimum width is 448px. For the smaller size, min width is 200px.
Ideally, text shouldn't be longer than one line. If it needs to, it can wrap to a 2nd line.

Positioning
Alerts are centered within the code stage.
First alert is 64px from the top of the page.
Multiple alerts have 8px of spacing between them.

When the code stage stage shrinks, the alert is centered within the entire window instead, so that it doesn't lose width.

R1 Animation: https://codepen.io/kathymakes/pen/BPXxWB
R1 Mockups: https://projects.invisionapp.com/d/main#/projects/prototypes/15193635

[carljbowman]

@kathymakes - Looks great! Thanks for speccing this out!

One more thing we should add to future considerations is the UX on the Project page view. Both when you first open a project that uses a hardware extension, but also once you have connected a device in the Editor view and then switch back to the Project page view (by clicking the "See Community" button).

[kyleplo]

Other warnings:

• Cloud variables cannot have text
• Info about cloud variables when first created

[chexbox]

How about a red color, as well as orange/yellow and green.
Also, a "X" on success alerts, to close the alert before it times out.

[kaaaaathy]

Reupdated spec & images.

[evhan55]

Progress is being made via PR #3143.

Still to do in further PR's:

• hook up a Reconnect button to enable reconnecting to a disconnected peripheral
• multiple alerts
• add icons (for peripheral and for close button)
• add string localization
• add custom styling for different types of alerts (i.e., error, success, etc)

[evhan55]

Progress continued via PRs #3209 and scratchfoundation/scratch-vm#1607.

Still to do in further PR's:

• hook up a Reconnect button to enable reconnecting to a disconnected peripheral
• add string localization (i.e. formatMessage compatible)
• add an API for different types of alerts? (e.g. this._runtime.emitPeripheralError(this._extensionId))
• add custom styling for different types of alerts

[evhan55]

Some styling notes from @kathymakes:

• the x has an icon that we can use instead of a typed "x"
• the dropshadow should be 0 y offset and 0 blur, and some amount of spread... maybe 4 px?

[kaaaaathy]

Thanks @evhan55 !
Here's the "X" icon, which is the same svg "X" we use for modals.

X Icon.svg.zip