From d4e397cbd0d1e00a2b19305a59fb855869941d57 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 14 Jul 2020 00:52:03 +0100 Subject: [PATCH] Switch to svg masks for the e2eicon and border it for the EntityTile avatars Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_ToastContainer.scss | 17 +++++-- res/css/views/rooms/_E2EIcon.scss | 60 ++++++++++++++++++------ res/css/views/rooms/_EntityTile.scss | 2 - res/css/views/rooms/_EventTile.scss | 43 +++++++++++++++-- src/components/views/rooms/E2EIcon.js | 3 +- src/components/views/rooms/EntityTile.js | 2 +- 6 files changed, 101 insertions(+), 26 deletions(-) diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index b15f357fc7..e798e4ac52 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -48,13 +48,14 @@ limitations under the License. padding: 8px; &.mx_Toast_hasIcon { - &::after { + &::before, &::after { content: ""; width: 22px; height: 22px; grid-column: 1; grid-row: 1; mask-size: 100%; + mask-position: center; mask-repeat: no-repeat; background-size: 100%; background-repeat: no-repeat; @@ -65,8 +66,18 @@ limitations under the License. background-color: $primary-fg-color; } - &.mx_Toast_icon_verification_warning::after { - background-image: url("$(res)/img/e2e/warning.svg"); + &.mx_Toast_icon_verification_warning { + // white infill for the hollow svg mask + &::before { + background-color: #ffffff; + mask-image: url('$(res)/img/e2e/normal.svg'); + mask-size: 90%; + } + + &::after { + mask-image: url("$(res)/img/e2e/warning.svg"); + background-color: $notice-primary-color; + } } &.mx_Toast_icon_element_logo::after { diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss index 584ea17433..cacbad6693 100644 --- a/res/css/views/rooms/_E2EIcon.scss +++ b/res/css/views/rooms/_E2EIcon.scss @@ -22,28 +22,58 @@ limitations under the License. display: block; } -.mx_E2EIcon_warning::after, -.mx_E2EIcon_normal::after, -.mx_E2EIcon_verified::after { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-repeat: no-repeat; - background-size: contain; +.mx_E2EIcon_warning, +.mx_E2EIcon_normal, +.mx_E2EIcon_verified { + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } +} + +// white infill for the transparency +.mx_E2EIcon::before { + background-color: #ffffff; + mask: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; +} + +// transparent-looking border surrounding the shield for when overlain over avatars +.mx_E2EIcon_bordered { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $header-panel-bg-color; + + // shrink the actual badge + &::after { + mask-size: 75%; + } + // shrink the infill of the badge + &::before { + mask-size: 65%; + } } .mx_E2EIcon_warning::after { - background-image: url('$(res)/img/e2e/warning.svg'); + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; } .mx_E2EIcon_normal::after { - background-image: url('$(res)/img/e2e/normal.svg'); + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: #020202; // TODO theme this } .mx_E2EIcon_verified::after { - background-image: url('$(res)/img/e2e/verified.svg'); + mask-image: url('$(res)/img/e2e/verified.svg'); + background-color: $accent-color; } diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 8db71f297c..27a4e67089 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -26,8 +26,6 @@ limitations under the License. position: absolute; bottom: 2px; right: 7px; - height: 15px; - width: 15px; } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 7a13515ec6..00782c58fe 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -341,23 +341,58 @@ $left-gutter: 64px; background-size: contain; } +.mx_EventTile_e2eIcon { + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } + + &::before { + background-color: #ffffff; + mask: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; + } +} + .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unknown { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unencrypted { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unauthenticated { - background-image: url('$(res)/img/e2e/normal.svg'); + &::after { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: #020202; // TODO theme this + } opacity: 1; } diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js index 254e28dffa..1ea21bfc9a 100644 --- a/src/components/views/rooms/E2EIcon.js +++ b/src/components/views/rooms/E2EIcon.js @@ -42,11 +42,12 @@ const crossSigningRoomTitles = { [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"), }; -const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => { +const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordered}) => { const [hover, setHover] = useState(false); const classes = classNames({ mx_E2EIcon: true, + mx_E2EIcon_bordered: bordered, mx_E2EIcon_warning: status === E2E_STATE.WARNING, mx_E2EIcon_normal: status === E2E_STATE.NORMAL, mx_E2EIcon_verified: status === E2E_STATE.VERIFIED, diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index b6d2bce785..d880e824da 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -170,7 +170,7 @@ const EntityTile = createReactClass({ let e2eIcon; const { e2eStatus } = this.props; if (e2eStatus) { - e2eIcon = ; + e2eIcon = ; } const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');