mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-23 11:35:04 +01:00
Code Issues Projects Releases Wiki Activity

implement new approach

Browse Source 
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-06-30 23:30:44 +05:30
parent bcaf84e545
commit b469c4299f
3 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/platform/web/Platform.js
View File

@ -36,6 +36,7 @@ import {BlobHandle} from "./dom/BlobHandle.js";
import {hasReadPixelPermission, ImageHandle, VideoHandle} from "./dom/ImageHandle.js";
import {downloadInIframe} from "./dom/download.js";
import {Disposables} from "../../utils/Disposables.js";
import {handleAvatarError} from "./ui/avatar.js";
function addScript(src) {
return new Promise(function (resolve, reject) {
@ -189,6 +190,7 @@ export class Platform {
this._disposables.track(disposable);
}
}
this._container.addEventListener("error", handleAvatarError, true);
window.__hydrogenViewModel = vm;
const view = new RootView(vm);
this._container.appendChild(view.mount());

20
src/platform/web/ui/avatar.js
View File

@ -108,16 +108,32 @@ export function renderStaticAvatar(vm, size, extraClasses = undefined) {
let avatarClasses = classNames({
avatar: true,
[`size-${size}`]: true,
[`usercolor${vm.avatarColorNumber}`]: !hasAvatar,
[`usercolor${vm.avatarColorNumber}`]: true,
['has-image']: true
});
if (extraClasses) {
avatarClasses += ` ${extraClasses}`;
}
const avatarContent = hasAvatar ? renderImg(vm, size) : text(vm.avatarLetter);
return tag.div({className: avatarClasses}, [avatarContent]);
return tag.div({className: avatarClasses, 'data-avatar-letter': vm.avatarLetter}, [avatarContent]);
}
function renderImg(vm, size) {
const sizeStr = size.toString();
return tag.img({src: vm.avatarUrl(size), width: sizeStr, height: sizeStr, title: vm.avatarTitle});
}
function isAvatarEvent(e) {
const element = e.target;
const parent = element.parentElement;
return element.tagName === "IMG" && parent.classList.contains("avatar");
}
export function handleAvatarError(e) {
if (!isAvatarEvent(e)) { return; }
const parent = e.target.parentElement;
const avatarLetter = parent.getAttribute("data-avatar-letter");
const letterNode = document.createTextNode(avatarLetter);
parent.appendChild(letterNode);
parent.classList.remove("has-image");
}

4
src/platform/web/ui/css/avatar.css
View File

@ -31,6 +31,10 @@ limitations under the License.
speak: none;
}
.hydrogen .avatar:not(.has-image) img{
display: none;
}
.hydrogen .avatar img {
width: 100%;
height: 100%;