mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 19:56:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

I have modified padlocks styling when the left panel is collapsed

Browse source
This commit is contained in:
rtestard 2020-02-04 15:05:26 +01:00
parent d822104159
commit f023bcfd63
3 changed files with 35 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
res/css/views/rooms/_InviteOnlyIcon.scss
View file

@ -14,27 +14,45 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_InviteOnlyIcon {
@define-mixin mx_InviteOnlyIcon {
width: 12px;
height: 12px;
position: relative;
display: block !important;
// Align the padlock with unencrypted room names
}
@define-mixin mx_InviteOnlyIcon_padlock {
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;
}
.mx_InviteOnlyIcon_large {
@mixin mx_InviteOnlyIcon;
margin: 0 4px;
&::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;
@mixin mx_InviteOnlyIcon_padlock;
width: 12px;
height: 12px;
}
}
.mx_InviteOnlyIcon_small {
@mixin mx_InviteOnlyIcon;
left: -2px;
&::before {
@mixin mx_InviteOnlyIcon_padlock;
width: 10px;
height: 10px;
}
}

4
src/components/views/rooms/InviteOnlyIcon.js
View file

@ -37,6 +37,8 @@ export default class InviteOnlyIcon extends React.Component {
};
render() {
const style = this.props.collapsedPanel ? "mx_InviteOnlyIcon_small": "mx_InviteOnlyIcon_large";
if (!SettingsStore.isFeatureEnabled("feature_invite_only_padlocks")) {
return null;
}
@ -46,7 +48,7 @@ export default class InviteOnlyIcon extends React.Component {
if (this.state.hover) {
tooltip = <Tooltip className="mx_InviteOnlyIcon_tooltip" label={_t("Invite only")} dir="auto" />;
}
return (<div className="mx_InviteOnlyIcon"
return (<div className={style}
onMouseEnter={this.onHoverStart}
onMouseLeave={this.onHoverEnd}
>

2
src/components/views/rooms/RoomTile.js
View file

@ -526,7 +526,7 @@ export default createReactClass({
let privateIcon = null;
if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
if (this.state.joinRule == "invite" && !dmUserId) {
privateIcon = <InviteOnlyIcon />;
privateIcon = <InviteOnlyIcon collapsedPanel={this.props.collapsed} />;
}
}