imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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