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('layout.css');
|
||||||
|
@import url('login.css');
|
||||||
@import url('left-panel.css');
|
@import url('left-panel.css');
|
||||||
@import url('room.css');
|
@import url('room.css');
|
||||||
@import url('timeline.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";
|
import {errorToDOM} from "./error.js";
|
||||||
|
|
||||||
function objHasFns(obj) {
|
function objHasFns(obj) {
|
||||||
@ -244,12 +244,16 @@ class TemplateBuilder {
|
|||||||
}
|
}
|
||||||
|
|
||||||
el(name, attributes, children) {
|
el(name, attributes, children) {
|
||||||
|
return this.elNS(HTML_NS, name, attributes, children);
|
||||||
|
}
|
||||||
|
|
||||||
|
elNS(ns, name, attributes, children) {
|
||||||
if (attributes && isChildren(attributes)) {
|
if (attributes && isChildren(attributes)) {
|
||||||
children = attributes;
|
children = attributes;
|
||||||
attributes = null;
|
attributes = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const node = document.createElement(name);
|
const node = document.createElementNS(ns, name);
|
||||||
|
|
||||||
if (attributes) {
|
if (attributes) {
|
||||||
this._setNodeAttributes(node, attributes);
|
this._setNodeAttributes(node, attributes);
|
||||||
@ -300,8 +304,11 @@ class TemplateBuilder {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const tag of TAG_NAMES) {
|
|
||||||
TemplateBuilder.prototype[tag] = function(attributes, children) {
|
for (const [ns, tags] of Object.entries(TAG_NAMES)) {
|
||||||
return this.el(tag, attributes, children);
|
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) {
|
export function el(elementName, attributes, children) {
|
||||||
|
return elNS(HTML_NS, elementName, attributes, children);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function elNS(ns, elementName, attributes, children) {
|
||||||
if (attributes && isChildren(attributes)) {
|
if (attributes && isChildren(attributes)) {
|
||||||
children = attributes;
|
children = attributes;
|
||||||
attributes = null;
|
attributes = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const e = document.createElement(elementName);
|
const e = document.createElementNS(ns, elementName);
|
||||||
|
|
||||||
if (attributes) {
|
if (attributes) {
|
||||||
for (let [name, value] of Object.entries(attributes)) {
|
for (let [name, value] of Object.entries(attributes)) {
|
||||||
@ -67,15 +71,24 @@ export function text(str) {
|
|||||||
return document.createTextNode(str);
|
return document.createTextNode(str);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const TAG_NAMES = [
|
export const HTML_NS = "http://www.w3.org/1999/xhtml";
|
||||||
"a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
|
export const SVG_NS = "http://www.w3.org/2000/svg";
|
||||||
"p", "strong", "em", "span", "img", "section", "main", "article", "aside",
|
|
||||||
"pre", "button", "time", "input", "textarea", "svg", "circle"];
|
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 = {};
|
export const tag = {};
|
||||||
|
|
||||||
for (const tagName of TAG_NAMES) {
|
|
||||||
tag[tagName] = function(attributes, children) {
|
for (const [ns, tags] of Object.entries(TAG_NAMES)) {
|
||||||
return el(tagName, attributes, children);
|
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 {
|
class SessionLoadView extends TemplateView {
|
||||||
render(t) {
|
render(t) {
|
||||||
return t.div([
|
return t.div({className: "SessionLoadView"}, [
|
||||||
spinner(t, {hidden: vm => !vm.loading}),
|
spinner(t, {hidden: vm => !vm.loading}),
|
||||||
t.p(vm => vm.loadLabel)
|
t.p(vm => vm.loadLabel)
|
||||||
]);
|
]);
|
||||||
|
Loading…
Reference in New Issue
Block a user