Merge pull request #3929 from matrix-org/zip/11840-tooltips-on-padlocks
Seperates out the padlock icon, and adds a tooltip
This commit is contained in:
commit
131aacd3ab
8 changed files with 103 additions and 52 deletions
|
@ -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";
|
||||
|
|
38
res/css/views/rooms/_InviteOnlyIcon.scss
Normal file
38
res/css/views/rooms/_InviteOnlyIcon.scss
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
51
src/components/views/rooms/InviteOnlyIcon.js
Normal file
51
src/components/views/rooms/InviteOnlyIcon.js
Normal file
|
@ -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 = <Tooltip className="mx_InviteOnlyIcon_tooltip" label={_t("Invite only")} dir="auto" />;
|
||||
}
|
||||
return (<div className="mx_InviteOnlyIcon"
|
||||
onMouseEnter={this.onHoverStart}
|
||||
onMouseLeave={this.onHoverEnd}
|
||||
>
|
||||
{ tooltip }
|
||||
</div>);
|
||||
}
|
||||
}
|
|
@ -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") ?
|
||||
<div className={joinRuleClass} /> :
|
||||
undefined;
|
||||
let privateIcon;
|
||||
if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
|
||||
if (joinRule == "invite") {
|
||||
privateIcon = <InviteOnlyIcon />;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.onCancelClick) {
|
||||
cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
|
||||
|
|
|
@ -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 = <div className="mx_RoomTile_PrivateIcon" />;
|
||||
if (this.state.joinRule == "invite" && !dmUserId) {
|
||||
privateIcon = <InviteOnlyIcon />;
|
||||
}
|
||||
}
|
||||
|
||||
let e2eIcon = null;
|
||||
|
|
|
@ -909,6 +909,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: ",
|
||||
|
|
Loading…
Reference in a new issue