From ff234347e98b6d1e109829ef8e1c88575e42f2bb Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 28 Nov 2018 14:55:59 -0500
Subject: [PATCH] Put all buttons in a group and use flex to position message
and groups.
Instead of setting 100% width on the message, causing inappropriate wrapping of the button text. Removed the nbsp in the Try Again text
---
src/components/alerts/alert.css | 8 ++-
src/components/alerts/alert.jsx | 98 +++++++++++++++++----------------
2 files changed, 56 insertions(+), 50 deletions(-)
diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index 87c0ca4c7..2f5b8bd6c 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -7,7 +7,7 @@
display: flex;
flex-direction: row;
overflow: hidden;
- align-items: left;
+ justify-content: space-between;
border-radius: $space;
padding: $space;
margin-bottom: 7px;
@@ -37,13 +37,17 @@
font-weight: bold;
font-size: .75rem;
line-height: 14px;
- width: 100%;
display: flex;
align-items: center;
padding-left: .5rem;
padding-right: .5rem;
}
+.alert-buttons {
+ display: flex;
+ flex-direction: row;
+}
+
.alert-close-button {
outline-style:none;
}
diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index 64b931171..4b6bdf493 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -57,54 +57,56 @@ const AlertComponent = ({
/>
) : content}
</div>
- {showSaveNow && (
- <button
- className={styles.alertConnectionButton}
- onClick={onSaveNow}
- >
- <FormattedMessage
- defaultMessage="Try Again" // TODO control wrapping in css
- description="Button to try saving again"
- id="gui.alerts.tryAgain"
- />
- </button>
- )}
- {showDownload && (
- <button
- className={styles.alertConnectionButton}
- onClick={onDownload}
- >
- <FormattedMessage
- defaultMessage="Download"
- description="Button to download project locally"
- id="gui.alerts.download"
- />
- </button>
- )}
- {showReconnect && (
- <button
- className={styles.alertConnectionButton}
- onClick={onReconnect}
- >
- <FormattedMessage
- defaultMessage="Reconnect"
- description="Button to reconnect the device"
- id="gui.connection.reconnect"
- />
- </button>
- )}
- {closeButton && (
- <Box
- className={styles.alertCloseButtonContainer}
- >
- <CloseButton
- className={classNames(styles.alertCloseButton)}
- color={closeButtonColors[level]}
- size={CloseButton.SIZE_LARGE}
- onClick={onCloseAlert}
- />
- </Box>
- )}
+ <div className={styles.alertButtons}>
+ {showSaveNow && (
+ <button
+ className={styles.alertConnectionButton}
+ onClick={onSaveNow}
+ >
+ <FormattedMessage
+ defaultMessage="Try Again"
+ description="Button to try saving again"
+ id="gui.alerts.tryAgain"
+ />
+ </button>
+ )}
+ {showDownload && (
+ <button
+ className={styles.alertConnectionButton}
+ onClick={onDownload}
+ >
+ <FormattedMessage
+ defaultMessage="Download"
+ description="Button to download project locally"
+ id="gui.alerts.download"
+ />
+ </button>
+ )}
+ {showReconnect && (
+ <button
+ className={styles.alertConnectionButton}
+ onClick={onReconnect}
+ >
+ <FormattedMessage
+ defaultMessage="Reconnect"
+ description="Button to reconnect the device"
+ id="gui.connection.reconnect"
+ />
+ </button>
+ )}
+ {closeButton && (
+ <Box
+ className={styles.alertCloseButtonContainer}
+ >
+ <CloseButton
+ className={classNames(styles.alertCloseButton)}
+ color={closeButtonColors[level]}
+ size={CloseButton.SIZE_LARGE}
+ onClick={onCloseAlert}
+ />
+ </Box>
+ )}
+ </div>
</Box>
);
--
GitLab