mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
support svg namespace, fix spinner
This commit is contained in:
parent
34549a2ecb
commit
d91ab5355c
5
src/ui/web/common.js
Normal file
5
src/ui/web/common.js
Normal file
@ -0,0 +1,5 @@
|
||||
export function spinner(t, extraClasses = undefined) {
|
||||
return t.svg({className: Object.assign({"spinner": true}, extraClasses), viewBox:"0 0 100% 100%"},
|
||||
t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"})
|
||||
);
|
||||
}
|
12
src/ui/web/css/login.css
Normal file
12
src/ui/web/css/login.css
Normal file
@ -0,0 +1,12 @@
|
||||
.SessionLoadView {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.SessionLoadView p {
|
||||
flex: 1;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.SessionLoadView .spinner {
|
||||
--size: 20px;
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
@import url('layout.css');
|
||||
@import url('login.css');
|
||||
@import url('left-panel.css');
|
||||
@import url('room.css');
|
||||
@import url('timeline.css');
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { setAttribute, text, isChildren, classNames, TAG_NAMES } from "./html.js";
|
||||
import { setAttribute, text, isChildren, classNames, TAG_NAMES, HTML_NS } from "./html.js";
|
||||
import {errorToDOM} from "./error.js";
|
||||
|
||||
function objHasFns(obj) {
|
||||
@ -244,12 +244,16 @@ class TemplateBuilder {
|
||||
}
|
||||
|
||||
el(name, attributes, children) {
|
||||
return this.elNS(HTML_NS, name, attributes, children);
|
||||
}
|
||||
|
||||
elNS(ns, name, attributes, children) {
|
||||
if (attributes && isChildren(attributes)) {
|
||||
children = attributes;
|
||||
attributes = null;
|
||||
}
|
||||
|
||||
const node = document.createElement(name);
|
||||
const node = document.createElementNS(ns, name);
|
||||
|
||||
if (attributes) {
|
||||
this._setNodeAttributes(node, attributes);
|
||||
@ -300,8 +304,11 @@ class TemplateBuilder {
|
||||
}
|
||||
}
|
||||
|
||||
for (const tag of TAG_NAMES) {
|
||||
TemplateBuilder.prototype[tag] = function(attributes, children) {
|
||||
return this.el(tag, attributes, children);
|
||||
};
|
||||
|
||||
for (const [ns, tags] of Object.entries(TAG_NAMES)) {
|
||||
for (const tag of tags) {
|
||||
TemplateBuilder.prototype[tag] = function(attributes, children) {
|
||||
return this.elNS(ns, tag, attributes, children);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@ -33,12 +33,16 @@ export function setAttribute(el, name, value) {
|
||||
}
|
||||
|
||||
export function el(elementName, attributes, children) {
|
||||
return elNS(HTML_NS, elementName, attributes, children);
|
||||
}
|
||||
|
||||
export function elNS(ns, elementName, attributes, children) {
|
||||
if (attributes && isChildren(attributes)) {
|
||||
children = attributes;
|
||||
attributes = null;
|
||||
}
|
||||
|
||||
const e = document.createElement(elementName);
|
||||
const e = document.createElementNS(ns, elementName);
|
||||
|
||||
if (attributes) {
|
||||
for (let [name, value] of Object.entries(attributes)) {
|
||||
@ -67,15 +71,24 @@ export function text(str) {
|
||||
return document.createTextNode(str);
|
||||
}
|
||||
|
||||
export const TAG_NAMES = [
|
||||
"a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
|
||||
"p", "strong", "em", "span", "img", "section", "main", "article", "aside",
|
||||
"pre", "button", "time", "input", "textarea", "svg", "circle"];
|
||||
export const HTML_NS = "http://www.w3.org/1999/xhtml";
|
||||
export const SVG_NS = "http://www.w3.org/2000/svg";
|
||||
|
||||
export const TAG_NAMES = {
|
||||
[HTML_NS]: [
|
||||
"a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
|
||||
"p", "strong", "em", "span", "img", "section", "main", "article", "aside",
|
||||
"pre", "button", "time", "input", "textarea"],
|
||||
[SVG_NS]: ["svg", "circle"]
|
||||
};
|
||||
|
||||
export const tag = {};
|
||||
|
||||
for (const tagName of TAG_NAMES) {
|
||||
tag[tagName] = function(attributes, children) {
|
||||
return el(tagName, attributes, children);
|
||||
|
||||
for (const [ns, tags] of Object.entries(TAG_NAMES)) {
|
||||
for (const tagName of tags) {
|
||||
tag[tagName] = function(attributes, children) {
|
||||
return elNS(ns, tagName, attributes, children);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -32,7 +32,7 @@ function spinner(t, extraClasses = undefined) {
|
||||
|
||||
class SessionLoadView extends TemplateView {
|
||||
render(t) {
|
||||
return t.div([
|
||||
return t.div({className: "SessionLoadView"}, [
|
||||
spinner(t, {hidden: vm => !vm.loading}),
|
||||
t.p(vm => vm.loadLabel)
|
||||
]);
|
||||
|
Loading…
Reference in New Issue
Block a user