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

Move power label to right of name

Browse source 
The power label is shown to the right of the name, but hidden on hover.

Part of https://github.com/vector-im/riot-web/issues/11940
This commit is contained in:
J. Ryan Stinnett 2020-01-30 22:04:47 +00:00
parent 5933bd15b1
commit 3ef7e5113b
3 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
res/css/views/rooms/_EntityTile.scss
View file

@ -40,7 +40,7 @@ limitations under the License.
content: ""; content: "";
position: absolute; position: absolute;
top: calc(50% - 8px); // center top: calc(50% - 8px); // center
right: 10px; right: -8px;
mask: url('$(res)/img/member_chevron.png'); mask: url('$(res)/img/member_chevron.png');
mask-repeat: no-repeat; mask-repeat: no-repeat;
width: 16px; width: 16px;
@ -85,6 +85,7 @@ limitations under the License.
.mx_EntityTile_details { .mx_EntityTile_details {
overflow: hidden; overflow: hidden;
flex: 1;
} }
.mx_EntityTile_ellipsis .mx_EntityTile_name { .mx_EntityTile_ellipsis .mx_EntityTile_name {
@ -121,3 +122,13 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
text-overflow: clip; text-overflow: clip;
} }
.mx_EntityTile_power {
padding-inline-start: 6px;
font-size: 10px;
color: $notice-secondary-color;
}
.mx_EntityTile:hover .mx_EntityTile_power {
display: none;
}

7
src/components/views/rooms/EntityTile.js
View file

@ -160,10 +160,11 @@ const EntityTile = createReactClass({
let powerLabel; let powerLabel;
const powerStatus = this.props.powerStatus; const powerStatus = this.props.powerStatus;
if (powerStatus) { if (powerStatus) {
powerLabel = { const powerText = {
[EntityTile.POWER_STATUS_MODERATOR]: _t("Moderator"), [EntityTile.POWER_STATUS_MODERATOR]: _t("Mod"),
[EntityTile.POWER_STATUS_ADMIN]: _t("Admin"), [EntityTile.POWER_STATUS_ADMIN]: _t("Admin"),
}[powerStatus]; }[powerStatus];
powerLabel = <div className="mx_EntityTile_power">{powerText}</div>;
} }
let e2eIcon; let e2eIcon;
@ -183,10 +184,10 @@ const EntityTile = createReactClass({
onClick={this.props.onClick}> onClick={this.props.onClick}>
<div className="mx_EntityTile_avatar"> <div className="mx_EntityTile_avatar">
{ av } { av }
{ powerLabel }
{ e2eIcon } { e2eIcon }
</div> </div>
{ nameEl } { nameEl }
{ powerLabel }
{ inviteButton } { inviteButton }
</AccessibleButton> </AccessibleButton>
</div> </div>

1
src/i18n/strings/en_EN.json
View file

@ -909,6 +909,7 @@
"Some sessions in this encrypted room are not trusted": "Some sessions in this encrypted room are not trusted", "Some sessions in this encrypted room are not trusted": "Some sessions in this encrypted room are not trusted",
"All sessions in this encrypted room are trusted": "All sessions in this encrypted room are trusted", "All sessions in this encrypted room are trusted": "All sessions in this encrypted room are trusted",
"Edit message": "Edit message", "Edit message": "Edit message",
"Mod": "Mod",
"This event could not be displayed": "This event could not be displayed", "This event could not be displayed": "This event could not be displayed",
"%(senderName)s sent an image": "%(senderName)s sent an image", "%(senderName)s sent an image": "%(senderName)s sent an image",
"%(senderName)s sent a video": "%(senderName)s sent a video", "%(senderName)s sent a video": "%(senderName)s sent a video",