Merge pull request #3851 from evhan55/localization/alerts

Alerts CSS width changes and hardware alerts localization

src/components/alerts/alert.css

@@ -11,6 +11,7 @@
     border-radius: $space;
     padding: $space;
     margin-bottom: 7px;
+    min-height: 1.5rem;
 }
 
 .alert.warn {
@@ -26,7 +27,8 @@
 }
 
 .alert-icon {
-    margin: $space;
+    margin-left: .25rem;
+    margin-right: .25rem;
     vertical-align: middle;
 }
 
@@ -38,6 +40,8 @@
     width: 100%;
     display: flex;
     align-items: center;
+    padding-left: .5rem;
+    padding-right: .5rem;
 }
 
 .alert-close-button {
@@ -52,17 +56,18 @@
 }
 
 .connection-button {
+    min-height: 2rem;
     padding: 0.55rem 0.9rem;
     border-radius: 0.35rem;
     background: #FF8C1A;
     color: white;
     font-weight: 700;
     font-size: 0.77rem;
-    margin: 0.25rem;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
+    align-self: center;
     margin-right: 13px;
     outline-style:none;
 }

src/components/alerts/alert.jsx

@@ -18,10 +18,10 @@ const closeButtonColors = {
 const AlertComponent = ({
     content,
     closeButton,
+    extensionName,
     iconSpinner,
     iconURL,
     level,
-    message,
     onCloseAlert,
     onReconnect,
     showReconnect
@@ -29,21 +29,29 @@ const AlertComponent = ({
     <Box
         className={classNames(styles.alert, styles[level])}
     >
+        {/* TODO: implement Rtl handling */}
+        {iconSpinner && (
+            <Spinner className={styles.alertSpinner} />
+        )}
+        {iconURL && (
+            <img
+                className={styles.alertIcon}
+                src={iconURL}
+            />
+        )}
         <div className={styles.alertMessage}>
-            {/* TODO: implement Rtl handling */}
-            <div className={styles.alertIcon}>
-                {iconSpinner && (
-                    <Spinner />
-                )}
-                {iconURL && (
-                    <img src={iconURL} />
-                )}
-            </div>
-            <div>
-                {message}
-                &nbsp;
-                {content}
-            </div>
+            {extensionName ? (
+                <FormattedMessage
+                    defaultMessage="Scratch lost connection to {extensionName}"
+                    description="Message indicating that an extension peripheral has been disconnected"
+                    id="gui.alerts.lostPeripheralConnection"
+                    values={{
+                        extensionName: (
+                            `${extensionName}`
+                        )
+                    }}
+                />
+            ) : content}
         </div>
         {showReconnect && (
             <button
@@ -74,11 +82,11 @@ const AlertComponent = ({
 
 AlertComponent.propTypes = {
     closeButton: PropTypes.bool,
-    content: PropTypes.element,
+    content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+    extensionName: PropTypes.string,
     iconSpinner: PropTypes.bool,
     iconURL: PropTypes.string,
     level: PropTypes.string,
-    message: PropTypes.string,
     onCloseAlert: PropTypes.func.isRequired,
     onReconnect: PropTypes.func,
     showReconnect: PropTypes.bool

src/components/alerts/alerts.jsx

@@ -18,6 +18,7 @@ const AlertsComponent = ({
                 closeButton={a.closeButton}
                 content={a.content}
                 extensionId={a.extensionId}
+                extensionName={a.extensionName}
                 iconSpinner={a.iconSpinner}
                 iconURL={a.iconURL}
                 index={index}

src/components/gui/gui.css

@@ -303,7 +303,8 @@ $fade-out-distance: 15px;
 /* Alerts */
 
 .alerts-container {
-    width: 520px;
+    width: 448px;
+    min-width: 448px;
     z-index: $z-index-alerts;
     left: 0;
     right: 0;

src/containers/alert.jsx

@@ -26,6 +26,7 @@ class Alert extends React.Component {
         const {
             closeButton,
             content,
+            extensionName,
             index, // eslint-disable-line no-unused-vars
             level,
             iconSpinner,
@@ -37,6 +38,7 @@ class Alert extends React.Component {
             <AlertComponent
                 closeButton={closeButton}
                 content={content}
+                extensionName={extensionName}
                 iconSpinner={iconSpinner}
                 iconURL={iconURL}
                 level={level}
@@ -62,6 +64,7 @@ Alert.propTypes = {
     closeButton: PropTypes.bool,
     content: PropTypes.element,
     extensionId: PropTypes.string,
+    extensionName: PropTypes.string,
     iconSpinner: PropTypes.bool,
     iconURL: PropTypes.string,
     index: PropTypes.number,

src/reducers/alerts.js

@@ -56,32 +56,28 @@ const reducer = function (state, action) {
         return state; // if alert not found, show nothing
     }
     case SHOW_EXTENSION_ALERT: {
-        const newList = state.alertsList.slice();
-        const newAlert = {
-            alertType: AlertTypes.EXTENSION,
-            message: action.data.message,
-            level: AlertLevels.WARN
-        };
         const extensionId = action.data.extensionId;
-        newAlert.showReconnect = false;
-        newAlert.extensionId = extensionId;
-        if (extensionId) { // if it's an extension
+        if (extensionId) {
             const extension = extensionData.find(ext => ext.extensionId === extensionId);
             if (extension) {
-                newAlert.showReconnect = true;
-                if (extension.name) {
-                    newAlert.content = extension.name;
-                }
-                if (extension.smallPeripheralImage) {
-                    newAlert.iconURL = extension.smallPeripheralImage;
-                }
-                newAlert.closeButton = true;
+                const newList = state.alertsList.slice();
+                const newAlert = {
+                    alertType: AlertTypes.EXTENSION,
+                    closeButton: true,
+                    extensionId: extensionId,
+                    extensionName: extension.name,
+                    iconURL: extension.smallPeripheralImage,
+                    level: AlertLevels.WARN,
+                    showReconnect: true
+                };
+                newList.push(newAlert);
+
+                return Object.assign({}, state, {
+                    alertsList: newList
+                });
             }
         }
-        newList.push(newAlert);
-        return Object.assign({}, state, {
-            alertsList: newList
-        });
+        return state; // if alert not found, show nothing
     }
     case CLOSE_ALERT: {
         const newList = state.alertsList.slice();