OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

reuse mx_Pill styles for editor pills to avoid style duplication 

the avatar style code is still different though,
as it's implemented differently

This also prevents updating the css variables when not needed,
which caused the avatar to flicker when updating the editor.
pull/21833/head
Bruno Windels 2019-05-21 12:19:35 +02:00
parent b00a38a1e5
commit 5d184b3f77
2 changed files with 29 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
res/css/views/elements/_MessageEditor.scss
View File

@ -34,32 +34,11 @@ limitations under the License.
max-height: 200px;
overflow-x: auto;
span {
display: inline-block;
padding: 0 5px;
border-radius: 4px;
color: white;
}
span.room-pill {
color: $accent-fg-color;
background-color: $rte-room-pill-color;
}
span.user-pill {
color: $primary-fg-color;
background-color: $other-user-pill-bg-color;
}
span.user-pill, span.room-pill {
height: 20px;
line-height: 20px;
border-radius: 16px;
display: inline-block;
span.mx_UserPill, span.mx_RoomPill {
padding-left: 21px;
padding-right: 5px;
position: relative;
// avatar psuedo element
&::before {
position: absolute;
left: 2px;

36
src/editor/parts.js
View File

@ -154,7 +154,7 @@ class PillPart extends BasePart {
toDOMNode() {
const container = document.createElement("span");
container.className = this.type;
container.className = this.className;
container.appendChild(document.createTextNode(this.text));
this.setAvatar(container);
return container;
@ -163,12 +163,10 @@ class PillPart extends BasePart {
updateDOMNode(node) {
const textNode = node.childNodes[0];
if (textNode.textContent !== this.text) {
// console.log("changing pill text from", textNode.textContent, "to", this.text);
textNode.textContent = this.text;
}
if (node.className !== this.type) {
// console.log("turning", node.className, "into", this.type);
node.className = this.type;
if (node.className !== this.className) {
node.className = this.className;
}
this.setAvatar(node);
}
@ -180,6 +178,20 @@ class PillPart extends BasePart {
node.childNodes[0].nodeType === Node.TEXT_NODE;
}
// helper method for subclasses
_setAvatarVars(node, avatarUrl, initialLetter) {
const avatarBackground = `url('${avatarUrl}')`;
const avatarLetter = `'${initialLetter}'`;
// check if the value is changing,
// otherwise the avatars flicker on every keystroke while updating.
if (node.style.getPropertyValue("--avatar-background") !== avatarBackground) {
node.style.setProperty("--avatar-background", avatarBackground);
}
if (node.style.getPropertyValue("--avatar-letter") !== avatarLetter) {
node.style.setProperty("--avatar-letter", avatarLetter);
}
}
get canEdit() {
return false;
}
@ -245,13 +257,16 @@ export class RoomPillPart extends PillPart {
initialLetter = Avatar.getInitialLetter(this._room.name);
avatarUrl = `../../${Avatar.defaultAvatarUrlForString(this._room.roomId)}`;
}
node.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
node.style.setProperty("--avatar-letter", `'${initialLetter}'`);
this._setAvatarVars(node, avatarUrl, initialLetter);
}
get type() {
return "room-pill";
}
get className() {
return "mx_RoomPill mx_Pill";
}
}
export class UserPillPart extends PillPart {
@ -273,13 +288,16 @@ export class UserPillPart extends PillPart {
avatarUrl = `../../${avatarUrl}`;
initialLetter = Avatar.getInitialLetter(name);
}
node.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
node.style.setProperty("--avatar-letter", `'${initialLetter}'`);
this._setAvatarVars(node, avatarUrl, initialLetter);
}
get type() {
return "user-pill";
}
get className() {
return "mx_UserPill mx_Pill";
}
}