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

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
Download patch file Download diff file Expand all files Collapse all files

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";
}