* Add mic indicator
* Fix mic indicator position and margin
* Don’t always show indicator, don’t sneaky-enable extension
* Position mic indicator in RTL
* Actually, don’t move indicator in RTL
* Update event name for MIC_LISTENING
* Move mic indicator state into redux
* Move stageSizeToTransform into screen-utils
* Position mic indicator and question at bottom of stage
* Fix pointer events
* JSDOC for stageSizeToTransform
* Pass micIndicator into StageComponent via …props
Fixes issue with changing language, and hopefully player/editor mode (untested).
This is for demonstration purposes, if this is the way we decide, I will make official APIs on the VM and the Renderer for checking for the canvas and renderer.
Pass a `stageSize` property down from a centralized `MediaQuery` in the
GUI component, and control the size of the stage and all surrounding
elements based on that value. Note that this is a pure property and is
not stored in the Redux state, since we gain access to the results of
the media query during `render()` and we shouldn't change Redux state
during `render()`.
Some stage-adjacent elements don't yet react correctly to the smallest
stage size.
Specifically in 2.0:
- Monitors cannot be dragged in fullscreen/player
- List monitors cannot be resized, have items added using the button or have their values edited.
- Slider monitors still work.
Also integrate the "ignore draggability, always drag" behavior of editor
mode.
Right now, editor drag mode is hooked up to the "isFullscreen" flag,
since it is the closest thing we have to player mode now.
- Auditing color CSS and componet CSS to make consistent.
- Made a first pass of changes to increase contrast to elements that previously were problematic
* Implement GH-830: Add coming soon tooltips
This implements coming soon tooltips for:
* the small stage size
* save, load and language
It also creates the component that can be copied over into the paint editor for use there as well.
Lastly, this does a small refactor on the full screen implementation to include multiple small screen sizes too.
1. Removed duplication of code in stage component to avoid future
potential divergence. Now just selectively applying styling based
on states of zoomed, colorPicking, and question.
2. Fixed bottom border getting chopped in zoomed mode by adding margin
and adjusting height/width accordingly.
3. Removed shouldComponentUpdate from stageHeader as suggested from code
review. Added ignore lint warning suggesting change to stateless function.
** Merging in loupe color picker changes from upstream. Resolved conflicts, which
required some minor changes. The color picker menu from scratch-blocks along
with other workspace menus will show through stage when zoomed if opened.
Resolved by moving stage/stage-header z-index from 999 to 5000.
1. Fixed issue with sprites not being dragable when stage zoomed.
2. Fixed issue with coordinates of mouse position being wrong when
stage is zoomed. This was caused by the renderer not being
resized when zooming/unzooming.
3. Refactored zoom control to separate react component/containter
with global reducer for isZoomed, which is passed to the stage
container. This allows for the zoom control to zoom the stage
menu and stage as seperate containers.
4. Added icons zoom/unzoom for stage zoom control. Moved icon
position to be part of stage menu floating to right of start/stop
buttons.
* Needs a real icon for opening (borrowed sprite-info icon). The open
icon needs to be moved from current location of underneath stage to
same row as control buttons (start/stop vm).
* The zoomed mode loses the ability to drag sprites. Haven't had
a change to look into this yet.
* Standardized use of space units where appropriate
* Reversed box classes for easier readability in Inspector
* Sprite Area: removed unused info button
* SpriteSelectorItems: fixed spacing between rows. Isolated layout + component CSS, now reusable in other context. Items per row is now easily configurable
* MenuBar: refactored structure for clickable items
* Covers parts of these issues: GUI layout panes (#69), sprite libraries (#12), import buttons (#64), menu bar (#67), and sprite info area (#53)
~ Refactored layout pane structure by removing `display: flex` from `.box`, by default. Declaring flex instead only where specifically needed. This helped fix layout quirks, and should help us avoid hard to find issues related to nested flex boxes
~ Added descriptive classnames to boxes/containers/wrappers. Moved more padding, margins + layout into these wrappers to help with component reusability.
~ Set up a spacer unit variable inside `gui.css`, to start keeping consistent padding, margins and rounded corners between panes. Used [CSS/PostCSS Modules](https://github.com/css-modules/postcss-modules-values) to avoid SCSS dependency.
~ Refactored inline styles from JSX, into CSS files. 2 reasons: a) prepping for reuse of CSS Module variables. b) Feels easier to debug complex flex layouts when all the styles are in one place vs JS/HTML/CSS syntax mixed together
~ Added menu bar into layout via new component, and sprite info header in sprite selector pane, with stubs for the labels + forms. Sprite items are correctly scrolling, while leaving the header fixed, in Chrome. Mostly working in FFx. Not working in Safari, IE yet.
~ Style pass on library modal
~ Experimenting with a few different transition styles: Logo in menu bar, sprite library items, Add buttons.
Move layout styles from component stylesheets to the GUI, or the component that is placing the component.
Add a new `Box` component to control layouts, basically giving a convenient way to lay out with flexbox.
Use `Box` as the output component for any component that may need to be passed layout options. The props passing convention allows giving layout props to the final `Box` component, making wrapping with another `Box` unnecessary in some cases.
The inline css method gives us nothing that CSS modules can't give us. This puts the project more in line with the way www works, and makes CSS actually readable.
Using class names gives us full control of the modal styles.
Paul Kaplan