From 7e7c48e0460ae163b2d3a66a1b54f767f8777e71 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 21 May 2020 16:32:19 +0100 Subject: [PATCH 1/5] Improve style of toasts to match Figma Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_ToastContainer.scss | 46 ++++++++++++++++----- src/components/structures/ToastContainer.js | 5 ++- 2 files changed, 40 insertions(+), 11 deletions(-) diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index 6ec4a0d1522..d39d6cdfe82 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -28,8 +28,8 @@ limitations under the License. margin: 0 4px; grid-row: 2 / 4; grid-column: 1; - background-color: white; - box-shadow: 0px 4px 12px $menu-box-shadow-color; + background-color: $dark-panel-bg-color; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); border-radius: 8px; } @@ -37,8 +37,8 @@ limitations under the License. grid-row: 1 / 3; grid-column: 1; color: $primary-fg-color; - background-color: $primary-bg-color; - box-shadow: 0px 4px 12px $menu-box-shadow-color; + background-color: $dark-panel-bg-color; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); border-radius: 8px; overflow: hidden; display: grid; @@ -73,12 +73,23 @@ limitations under the License. } } - h2 { - grid-column: 1 / 3; - grid-row: 1; - margin: 0; - font-size: $font-15px; - font-weight: 600; + .mx_Toast_title { + h2 { + grid-column: 1 / 3; + grid-row: 1; + margin: 0; + font-size: $font-15px; + font-weight: 600; + display: inline; + width: auto; + } + + span { + float: right; + font-size: $font-12px; + line-height: $font-21px; + color: $muted-fg-color; + } } .mx_Toast_body { @@ -87,7 +98,13 @@ limitations under the License. } .mx_Toast_buttons { + float: right; display: flex; + + .mx_FormButton { + min-width: 96px; + box-sizing: border-box; + } } .mx_Toast_description { @@ -96,6 +113,15 @@ limitations under the License. text-overflow: ellipsis; margin: 4px 0 11px 0; font-size: $font-12px; + + .mx_AccessibleButton_kind_link { + font-size: inherit; + padding: 0; + } + + a { + text-decoration: none; + } } .mx_Toast_deviceID { diff --git a/src/components/structures/ToastContainer.js b/src/components/structures/ToastContainer.js index 283fbdd96a9..ddbef424216 100644 --- a/src/components/structures/ToastContainer.js +++ b/src/components/structures/ToastContainer.js @@ -57,7 +57,10 @@ export default class ToastContainer extends React.Component { toastKey: key, }); toast = (
-

{title}{countIndicator}

+
+

{title}

+ {countIndicator} +
{React.createElement(component, toastProps)}
); } From 5995a27ced87200c60b208a5549e6b4a6c608831 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 21 May 2020 16:52:36 +0100 Subject: [PATCH 2/5] Iterate paddings Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_ToastContainer.scss | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index d39d6cdfe82..464eaf488df 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -46,7 +46,6 @@ limitations under the License. column-gap: 10px; row-gap: 4px; padding: 8px; - padding-right: 16px; &.mx_Toast_hasIcon { &::after { @@ -68,12 +67,27 @@ limitations under the License. background-image: url("$(res)/img/e2e/warning.svg"); } - h2, .mx_Toast_body { + .mx_Toast_title, .mx_Toast_body { grid-column: 2; } } + &:not(.mx_Toast_hasIcon) { + padding-left: 12px; + + .mx_Toast_title { + grid-column: 1 / -1; + } + } + + .mx_Toast_title, + .mx_Toast_description { + padding-right: 8px; + } .mx_Toast_title { + width: 100%; + box-sizing: border-box; + h2 { grid-column: 1 / 3; grid-row: 1; From 6a0ffe905f14ec916ab32ed10601fcb63f912ecb Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 21 May 2020 17:12:16 +0100 Subject: [PATCH 3/5] Iterate text alignment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_ToastContainer.scss | 3 ++- src/components/structures/ToastContainer.js | 6 +++++- src/i18n/strings/en_EN.json | 1 - 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index 464eaf488df..f64e6884985 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -99,9 +99,10 @@ limitations under the License. } span { + padding-left: 8px; float: right; font-size: $font-12px; - line-height: $font-21px; + line-height: $font-22px; color: $muted-fg-color; } } diff --git a/src/components/structures/ToastContainer.js b/src/components/structures/ToastContainer.js index ddbef424216..729171bd6a2 100644 --- a/src/components/structures/ToastContainer.js +++ b/src/components/structures/ToastContainer.js @@ -50,7 +50,11 @@ export default class ToastContainer extends React.Component { "mx_Toast_hasIcon": icon, [`mx_Toast_icon_${icon}`]: icon, }); - const countIndicator = isStacked ? _t(" (1/%(totalCount)s)", {totalCount}) : null; + + let countIndicator; + if (isStacked) { + countIndicator = `1/${totalCount}`; + } const toastProps = Object.assign({}, props, { key, diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index cd091702859..99b1d2ad6f9 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2073,7 +2073,6 @@ "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.", "Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.", "Failed to load timeline position": "Failed to load timeline position", - " (1/%(totalCount)s)": " (1/%(totalCount)s)", "Guest": "Guest", "Your profile": "Your profile", "Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others", From 1dfd62c1425c9f6462ccc424d475e70461e1b4f1 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 21 May 2020 17:47:35 +0100 Subject: [PATCH 4/5] iterate alignment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_ToastContainer.scss | 5 +++-- src/components/structures/ToastContainer.js | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index f64e6884985..2916c4ffdc8 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -42,8 +42,8 @@ limitations under the License. border-radius: 8px; overflow: hidden; display: grid; - grid-template-columns: 20px 1fr; - column-gap: 10px; + grid-template-columns: 22px 1fr; + column-gap: 8px; row-gap: 4px; padding: 8px; @@ -96,6 +96,7 @@ limitations under the License. font-weight: 600; display: inline; width: auto; + vertical-align: middle; } span { diff --git a/src/components/structures/ToastContainer.js b/src/components/structures/ToastContainer.js index 729171bd6a2..8f20dcd61df 100644 --- a/src/components/structures/ToastContainer.js +++ b/src/components/structures/ToastContainer.js @@ -15,7 +15,6 @@ limitations under the License. */ import * as React from "react"; -import { _t } from '../../languageHandler'; import ToastStore from "../../stores/ToastStore"; import classNames from "classnames"; From f539a960e1af71b1fec4e2bedd7fe3a2d240f951 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 21 May 2020 17:50:32 +0100 Subject: [PATCH 5/5] re-add brackets Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/ToastContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/ToastContainer.js b/src/components/structures/ToastContainer.js index 8f20dcd61df..c7789d861f0 100644 --- a/src/components/structures/ToastContainer.js +++ b/src/components/structures/ToastContainer.js @@ -52,7 +52,7 @@ export default class ToastContainer extends React.Component { let countIndicator; if (isStacked) { - countIndicator = `1/${totalCount}`; + countIndicator = `(1/${totalCount})`; } const toastProps = Object.assign({}, props, {