From a6fcbcacf68d0d01ead7edaad9ad33dbbd1dfbcb Mon Sep 17 00:00:00 2001 From: Zoe Date: Fri, 24 Jan 2020 12:04:08 +0000 Subject: [PATCH] Seperates out the padlock icon, and adds a tooltip Fixes https://github.com/vector-im/riot-web/issues/11840 --- res/css/_components.scss | 1 + res/css/views/rooms/_InviteOnlyIcon.scss | 38 +++++++++++++++ res/css/views/rooms/_RoomHeader.scss | 21 -------- res/css/views/rooms/_RoomTile.scss | 25 +--------- src/components/views/rooms/InviteOnlyIcon.js | 51 ++++++++++++++++++++ src/components/views/rooms/RoomHeader.js | 12 +++-- src/components/views/rooms/RoomTile.js | 6 ++- src/i18n/strings/en_EN.json | 1 + 8 files changed, 103 insertions(+), 52 deletions(-) create mode 100644 res/css/views/rooms/_InviteOnlyIcon.scss create mode 100644 src/components/views/rooms/InviteOnlyIcon.js diff --git a/res/css/_components.scss b/res/css/_components.scss index 60f749de9c..07e92bdc7b 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -148,6 +148,7 @@ @import "./views/rooms/_AuxPanel.scss"; @import "./views/rooms/_BasicMessageComposer.scss"; @import "./views/rooms/_E2EIcon.scss"; +@import "./views/rooms/_InviteOnlyIcon.scss"; @import "./views/rooms/_EditMessageComposer.scss"; @import "./views/rooms/_EntityTile.scss"; @import "./views/rooms/_EventTile.scss"; diff --git a/res/css/views/rooms/_InviteOnlyIcon.scss b/res/css/views/rooms/_InviteOnlyIcon.scss new file mode 100644 index 0000000000..e70586bb73 --- /dev/null +++ b/res/css/views/rooms/_InviteOnlyIcon.scss @@ -0,0 +1,38 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_InviteOnlyIcon { + width: 12px; + height: 12px; + position: relative; + display: block !important; + // Align the padlock with unencrypted room names + margin-left: 6px; + + &::before { + background-color: $roomtile-name-color; + mask-image: url('$(res)/img/feather-customised/lock-solid.svg'); + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } +} diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 6bfcd437c1..0ac2e99b97 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -269,24 +269,3 @@ limitations under the License. .mx_RoomHeader_pinsIndicatorUnread { background-color: $pinned-unread-color; } - -.mx_RoomHeader_PrivateIcon.mx_RoomHeader_isPrivate { - width: 12px; - height: 12px; - position: relative; - display: block !important; - - &::before { - background-color: $roomtile-name-color; - mask-image: url('$(res)/img/feather-customised/lock-solid.svg'); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } -} diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 376f4370e3..a24fdf2629 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -215,30 +215,7 @@ limitations under the License. flex: 1; } -.mx_RoomTile.mx_RoomTile.mx_RoomTile_isPrivate .mx_RoomTile_name { +.mx_InviteOnlyIcon + .mx_RoomTile_nameContainer .mx_RoomTile_name { // Scoot the padding in a bit from 6px to make it look better padding-left: 3px; } - -.mx_RoomTile.mx_RoomTile_isPrivate .mx_RoomTile_PrivateIcon { - width: 12px; - height: 12px; - position: relative; - display: block !important; - // Align the padlock with unencrypted room names - margin-left: 6px; - - &::before { - background-color: $roomtile-name-color; - mask-image: url('$(res)/img/feather-customised/lock-solid.svg'); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } -} diff --git a/src/components/views/rooms/InviteOnlyIcon.js b/src/components/views/rooms/InviteOnlyIcon.js new file mode 100644 index 0000000000..5afaa7f0f2 --- /dev/null +++ b/src/components/views/rooms/InviteOnlyIcon.js @@ -0,0 +1,51 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import { _t } from '../../../languageHandler'; +import * as sdk from '../../../index'; + +export default class InviteOnlyIcon extends React.Component { + constructor() { + super(); + + this.state = { + hover: false, + }; + } + + onHoverStart = () => { + this.setState({hover: true}); + }; + + onHoverEnd = () => { + this.setState({hover: false}); + }; + + render() { + const Tooltip = sdk.getComponent("elements.Tooltip"); + let tooltip; + if (this.state.hover) { + tooltip = ; + } + return (
+ { tooltip } +
); + } +} diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 15f0daa200..8a427e1c06 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -32,6 +32,7 @@ import {CancelButton} from './SimpleRoomHeader'; import SettingsStore from "../../../settings/SettingsStore"; import RoomHeaderButtons from '../right_panel/RoomHeaderButtons'; import E2EIcon from './E2EIcon'; +import InviteOnlyIcon from './InviteOnlyIcon'; export default createReactClass({ displayName: 'RoomHeader', @@ -162,11 +163,12 @@ export default createReactClass({ const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", ""); const joinRule = joinRules && joinRules.getContent().join_rule; - const joinRuleClass = classNames("mx_RoomHeader_PrivateIcon", - {"mx_RoomHeader_isPrivate": joinRule === "invite"}); - const privateIcon = SettingsStore.isFeatureEnabled("feature_cross_signing") ? -
: - undefined; + let privateIcon; + if (SettingsStore.isFeatureEnabled("feature_cross_signing")) { + if (joinRule == "invite") { + privateIcon = ; + } + } if (this.props.onCancelClick) { cancelButton = ; diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 0b50d85ff6..4e1a4c7b23 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -34,6 +34,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import {_t} from "../../../languageHandler"; import {RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex"; import E2EIcon from './E2EIcon'; +import InviteOnlyIcon from './InviteOnlyIcon'; // eslint-disable-next-line camelcase import rate_limited_func from '../../../ratelimitedfunc'; @@ -411,7 +412,6 @@ export default createReactClass({ 'mx_RoomTile_noBadges': !badges, 'mx_RoomTile_transparent': this.props.transparent, 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed, - 'mx_RoomTile_isPrivate': this.state.joinRule == "invite" && !dmUserId, }); const avatarClasses = classNames({ @@ -523,7 +523,9 @@ export default createReactClass({ let privateIcon = null; if (SettingsStore.isFeatureEnabled("feature_cross_signing")) { - privateIcon =
; + if (this.state.joinRule == "invite" && !dmUserId) { + privateIcon = ; + } } let e2eIcon = null; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 099b64dd49..456d48a94c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -908,6 +908,7 @@ "Unencrypted": "Unencrypted", "Encrypted by a deleted device": "Encrypted by a deleted device", "Please select the destination room for this message": "Please select the destination room for this message", + "Invite only": "Invite only", "Scroll to bottom of page": "Scroll to bottom of page", "Close preview": "Close preview", "device id: ": "device id: ",