diff --git a/package.json b/package.json
index 9bc92b70936e5e0f361c7fa99cbcbf9bde24d3aa..313fc12e66ef8d9cbc3a6df86e72b72ba219d763 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,7 @@
"redux-throttle": "0.1.1",
"rimraf": "^2.6.1",
"scratch-audio": "0.1.0-prerelease.20181023202904",
- "scratch-blocks": "0.1.0-prerelease.1544667276",
+ "scratch-blocks": "0.1.0-prerelease.1544721188",
"scratch-l10n": "3.1.20181213173343",
"scratch-paint": "0.2.0-prerelease.20181212232948",
"scratch-render": "0.1.0-prerelease.20181212233715",
diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index 2f5b8bd6c526d190b81248988df26e5241c2fa48..8e5d56296e6a40c29a1d195af377b652408b05e2 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -7,9 +7,12 @@
display: flex;
flex-direction: row;
overflow: hidden;
- justify-content: space-between;
+ justify-content: flex-start;
border-radius: $space;
- padding: $space;
+ padding-top: .875rem;
+ padding-bottom: .875rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
margin-bottom: 7px;
min-height: 1.5rem;
}
@@ -26,20 +29,28 @@
box-shadow: 0px 0px 0px 2px $extensions-light;
}
+.alert-spinner {
+ self-align: center;
+}
+
+.icon-section {
+ min-width: 1.25rem;
+ min-height: 1.25rem;
+ display: flex;
+ padding-right: 1rem;
+}
+
.alert-icon {
- margin-left: .25rem;
- margin-right: .25rem;
vertical-align: middle;
}
.alert-message {
color: #555;
font-weight: bold;
- font-size: .75rem;
- line-height: 14px;
+ font-size: .8125rem;
+ line-height: .875rem;
display: flex;
align-items: center;
- padding-left: .5rem;
padding-right: .5rem;
}
@@ -61,6 +72,7 @@
.alert-connection-button {
min-height: 2rem;
+ width: 6.5rem;
padding: 0.55rem 0.9rem;
border-radius: 0.35rem;
background: #FF8C1A;
@@ -70,8 +82,9 @@
border: none;
cursor: pointer;
display: flex;
+ justify-content: center;
align-items: center;
- align-self: center;
+ align-self: stretch;
outline-style:none;
}
@@ -82,3 +95,9 @@
[dir="rtl"] .alert-connection-button {
margin-left: 13px;
}
+
+/* prevent last button in list from too much margin to edge of alert */
+.alert-buttons > :last-child {
+ margin-left: 0;
+ margin-right: 0;
+}
diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index 4b6bdf493e3a87be40f65f0476d8dfced4ce99bc..db86bd4b8d6dd263ffe3a3b26f27bda62714200e 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -34,14 +34,21 @@ const AlertComponent = ({
className={classNames(styles.alert, styles[level])}
>
{/* TODO: implement Rtl handling */}
- {iconSpinner && (
- <Spinner className={styles.alertSpinner} />
- )}
- {iconURL && (
- <img
- className={styles.alertIcon}
- src={iconURL}
- />
+ {(iconSpinner || iconURL) && (
+ <div className={styles.iconSection}>
+ {iconSpinner && (
+ <Spinner
+ className={styles.alertSpinner}
+ level={level}
+ />
+ )}
+ {iconURL && (
+ <img
+ className={styles.alertIcon}
+ src={iconURL}
+ />
+ )}
+ </div>
)}
<div className={styles.alertMessage}>
{extensionName ? (
diff --git a/src/components/alerts/alerts.css b/src/components/alerts/alerts.css
new file mode 100644
index 0000000000000000000000000000000000000000..3b7cf5221a813058e20205224da0f23fec8d40b6
--- /dev/null
+++ b/src/components/alerts/alerts.css
@@ -0,0 +1,4 @@
+.alerts-inner-container {
+ min-width: 200px;
+ max-width: 548px;
+}
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
index 21d6c01c45a7960ba64ed1c6f6d414287aab79b8..50acd7ce1619e37df645eefc3cd6914448d934ac 100644
--- a/src/components/alerts/alerts.jsx
+++ b/src/components/alerts/alerts.jsx
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
import Box from '../box/box.jsx';
import Alert from '../../containers/alert.jsx';
+import styles from './alerts.css';
+
const AlertsComponent = ({
alertsList,
className,
@@ -13,24 +15,26 @@ const AlertsComponent = ({
bounds="parent"
className={className}
>
- {alertsList.map((a, index) => (
- <Alert
- closeButton={a.closeButton}
- content={a.content}
- extensionId={a.extensionId}
- extensionName={a.extensionName}
- iconSpinner={a.iconSpinner}
- iconURL={a.iconURL}
- index={index}
- key={index}
- level={a.level}
- message={a.message}
- showDownload={a.showDownload}
- showReconnect={a.showReconnect}
- showSaveNow={a.showSaveNow}
- onCloseAlert={onCloseAlert}
- />
- ))}
+ <Box className={styles.alertsInnerContainer} >
+ {alertsList.map((a, index) => (
+ <Alert
+ closeButton={a.closeButton}
+ content={a.content}
+ extensionId={a.extensionId}
+ extensionName={a.extensionName}
+ iconSpinner={a.iconSpinner}
+ iconURL={a.iconURL}
+ index={index}
+ key={index}
+ level={a.level}
+ message={a.message}
+ showDownload={a.showDownload}
+ showReconnect={a.showReconnect}
+ showSaveNow={a.showSaveNow}
+ onCloseAlert={onCloseAlert}
+ />
+ ))}
+ </Box>
</Box>
);
diff --git a/src/components/alerts/inline-message.jsx b/src/components/alerts/inline-message.jsx
index 8a7330f79716444cfecff2c3f597f5de5d4fbc78..981e1984a1c8531fd579c9f9cad0f4eee537ee86 100644
--- a/src/components/alerts/inline-message.jsx
+++ b/src/components/alerts/inline-message.jsx
@@ -20,6 +20,7 @@ const InlineMessageComponent = ({
<Spinner
small
className={styles.spinner}
+ level={'info'}
/>
)}
{content}
diff --git a/src/components/backpack/backpack.css b/src/components/backpack/backpack.css
index 6eddfa905c4a6f79eb1017d149b7030e32aa278a..6c3d9fbc2f9bebcfd78d5306a10605641645d406 100644
--- a/src/components/backpack/backpack.css
+++ b/src/components/backpack/backpack.css
@@ -70,6 +70,7 @@
.backpack-item {
min-width: 4rem;
+ max-width: 6rem;
margin: 0 0.25rem;
}
diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 129d2ca5714633b3643708f6ff3c2be962a07037..f137c91a003cd54c4bb053fa172c6eb6a02841f1 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -234,7 +234,11 @@ const Cards = props => {
if (x === 0 && y === 0) {
// initialize positions
x = isRtl ? -292 : 292;
- y = 365;
+ // The tallest cards are about 385px high, and the default position is pinned
+ // to near the bottom of the blocks palette to allow room to work above.
+ const tallCardHeight = 385;
+ const bottomMargin = 60; // To avoid overlapping the backpack region
+ y = window.innerHeight - tallCardHeight - bottomMargin;
}
const steps = content[activeDeckId].steps;
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 1e4785a531bdf15fb15d705d000e28b0bd19947e..888316c3c89389a6f0b6a84978e23cf4649e8ae9 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -303,12 +303,10 @@ $fade-out-distance: 15px;
/* Alerts */
.alerts-container {
- width: 448px;
- min-width: 448px;
+ display: flex;
+ justify-content: center;
+ width: 100%;
z-index: $z-index-alerts;
- left: 0;
- right: 0;
- margin: auto;
position: absolute;
margin-top: 53px;
}
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 7e1bf25094cb7ece409093526b0e52496fbeaf9e..d8793b111c865f22dd85c44f126a7310ec0d98ea 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -348,23 +348,25 @@ class MenuBar extends React.Component {
{newProjectMessage}
</MenuItem>
</MenuSection>
- <MenuSection>
- {this.props.canSave ? (
- <MenuItem onClick={this.handleClickSave}>
- {saveNowMessage}
- </MenuItem>
- ) : []}
- {this.props.canCreateCopy ? (
- <MenuItem onClick={this.handleClickSaveAsCopy}>
- {createCopyMessage}
- </MenuItem>
- ) : []}
- {this.props.canRemix ? (
- <MenuItem onClick={this.handleClickRemix}>
- {remixMessage}
- </MenuItem>
- ) : []}
- </MenuSection>
+ {(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
+ <MenuSection>
+ {this.props.canSave ? (
+ <MenuItem onClick={this.handleClickSave}>
+ {saveNowMessage}
+ </MenuItem>
+ ) : []}
+ {this.props.canCreateCopy ? (
+ <MenuItem onClick={this.handleClickSaveAsCopy}>
+ {createCopyMessage}
+ </MenuItem>
+ ) : []}
+ {this.props.canRemix ? (
+ <MenuItem onClick={this.handleClickRemix}>
+ {remixMessage}
+ </MenuItem>
+ ) : []}
+ </MenuSection>
+ )}
<MenuSection>
<SBFileUploader onUpdateProjectTitle={this.props.onUpdateProjectTitle}>
{(className, renderFileInput, loadProject) => (
diff --git a/src/components/spinner/spinner.css b/src/components/spinner/spinner.css
index a20e79b137150937dba06fb9f13b790cc377627d..3abc8ffbbea117d723b8abe36a98ac5cdb36aa9b 100644
--- a/src/components/spinner/spinner.css
+++ b/src/components/spinner/spinner.css
@@ -1,19 +1,20 @@
@import "../../css/colors.css";
.spinner {
- width: 1rem;
- height: 1rem;
+ width: 1.25rem;
+ height: 1.25rem;
display: inline-block;
position: relative;
border-radius: 50%;
border-width: .1875rem;
border-style: solid;
border-color: $ui-white-transparent;
+ box-sizing: content-box;
}
.spinner::before, .spinner::after {
- width: 1rem;
- height: 1rem;
+ width: 1.25rem;
+ height: 1.25rem;
content: '';
border-radius: 50%;
display: block;
@@ -48,17 +49,25 @@
}
}
-.spinner.orange {
+.spinner.success {
+ border-color: $extensions-transparent;
+}
+
+.spinner.success::after {
+ border-top-color: $extensions-primary;
+}
+
+.spinner.warn {
border-color: $error-transparent;
}
-.spinner.orange::after {
+.spinner.warn::after {
border-top-color: $error-primary;
}
-.spinner.white {
+.spinner.info {
border-color: $ui-white-transparent;
}
-.spinner.white::after {
+.spinner.info::after {
border-top-color: $ui-white;
}
diff --git a/src/components/spinner/spinner.jsx b/src/components/spinner/spinner.jsx
index bb82fbf51c675e6624902d89ff6caf1ab72b5dde..f25e3ebb18771e9c94a1010930f9d2a65337e92e 100644
--- a/src/components/spinner/spinner.jsx
+++ b/src/components/spinner/spinner.jsx
@@ -7,6 +7,7 @@ import styles from './spinner.css';
const SpinnerComponent = function (props) {
const {
className,
+ level,
small
} = props;
return (
@@ -14,6 +15,7 @@ const SpinnerComponent = function (props) {
className={classNames(
className,
styles.spinner,
+ styles[level],
{[styles.small]: small}
)}
/>
@@ -21,9 +23,11 @@ const SpinnerComponent = function (props) {
};
SpinnerComponent.propTypes = {
className: PropTypes.string,
+ level: PropTypes.string,
small: PropTypes.bool
};
SpinnerComponent.defaultProps = {
- className: ''
+ className: '',
+ level: 'info'
};
export default SpinnerComponent;
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index da89efab0433d86fe091e452f56c06f3fb496e9e..678f61ef49ae2e2d1bf6e99b45637ed67f1800d1 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -31,6 +31,7 @@
*/
box-sizing: border-box;
width: calc((100% / $sprites-per-row ) - $space);
+ max-width: 6rem;
min-width: 4rem;
min-height: 4rem; /* @todo: calc height same as width */
margin: calc($space / 2);