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

set pill avatar through css variables to set on psuedo-element

Browse source 
this way it won't interfere with editor selection/caret
This commit is contained in:
Bruno Windels 2019-05-17 19:49:46 +01:00
parent 710338c01f
commit 3b598a1782
2 changed files with 31 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,8 +45,23 @@ limitations under the License.
display: inline-block;
color: $primary-fg-color;
background-color: $other-user-pill-bg-color;
padding-left: 5px;
padding-left: 21px;
padding-right: 5px;
position: relative;
&::before {
position: absolute;
left: 2px;
top: 2px;
content: var(--avatar-letter);
width: 16px;
height: 16px;
background: var(--avatar-background); //set on parent by JS
color: var(--avatar-color);
background-repeat: no-repeat;
background-size: 16px;
border-radius: 8px;
}
}
}

15
src/editor/parts.js
View file

@ -15,6 +15,7 @@ limitations under the License.
*/
import AutocompleteWrapperModel from "./autocomplete";
import Avatar from "../Avatar";
class BasePart {
constructor(text = "") {
@ -232,6 +233,20 @@ 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()}'`);
}
return pill;
}
get type() {
return "user-pill";
}