mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-24 03:35:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

make user pill avatars work in editor

Browse source
This commit is contained in:
Bruno Windels 2019-05-20 14:21:25 +02:00
parent e58d844e5b
commit c1b2f3dce1
2 changed files with 26 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
res/css/views/elements/_MessageEditor.scss
View file

@ -59,10 +59,14 @@ limitations under the License.
width: 16px;
height: 16px;
background: var(--avatar-background); //set on parent by JS
color: var(--avatar-color);
color: $avatar-initial-color;
background-repeat: no-repeat;
background-size: 16px;
border-radius: 8px;
text-align: center;
font-weight: normal;
line-height: 16px;
font-size: 10.4px;
}
}
}

32
src/editor/parts.js
View file

@ -17,6 +17,8 @@ limitations under the License.
import AutocompleteWrapperModel from "./autocomplete";
import Avatar from "../Avatar";
const DPR = window.devicePixelRatio;
class BasePart {
constructor(text = "") {
this._text = text;
@ -153,6 +155,7 @@ class PillPart extends BasePart {
const container = document.createElement("span");
container.className = this.type;
container.appendChild(document.createTextNode(this.text));
this.setAvatar(container);
return container;
}
@ -166,6 +169,7 @@ class PillPart extends BasePart {
// console.log("turning", node.className, "into", this.type);
node.className = this.type;
}
this.setAvatar(node);
}
canUpdateDOMNode(node) {
@ -222,6 +226,9 @@ export class RoomPillPart extends PillPart {
this._room = room;
}
setAvatar(node) {
}
get type() {
return "room-pill";
}
@ -233,18 +240,21 @@ export class UserPillPart extends PillPart {
this._member = member;
}
toDOMNode() {
const pill = super.toDOMNode();
const avatarUrl = Avatar.avatarUrlForMember(this._member, 16, 16);
if (avatarUrl) {
pill.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
pill.style.setProperty("--avatar-letter", "''");
} else {
pill.style.setProperty("--avatar-background", `green`);
pill.style.setProperty("--avatar-color", `white`);
pill.style.setProperty("--avatar-letter", `'${this.text[0].toUpperCase()}'`);
setAvatar(node) {
const name = this._member.name || this._member.userId;
const defaultAvatarUrl = Avatar.defaultAvatarUrlForString(this._member.userId);
let avatarUrl = Avatar.avatarUrlForMember(this._member, 16 * DPR, 16 * DPR);
let initialLetter = "";
if (avatarUrl === defaultAvatarUrl) {
// the url from defaultAvatarUrlForString is meant to go in an img element,
// which has the base of the document. we're using it in css,
// which has the base of the theme css file, two levels deeper than the document,
// so go up to the level of the document.
avatarUrl = `../../${avatarUrl}`;
initialLetter = Avatar.getInitialLetter(name);
}
return pill;
node.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
node.style.setProperty("--avatar-letter", `'${initialLetter}'`);
}
get type() {