mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

make view gallery of views in different states

Browse source
This commit is contained in:
Bruno Windels 2020-04-30 18:28:21 +02:00
parent d3f7fb5089
commit d69987b426
4 changed files with 94 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -10,7 +10,7 @@
<meta name="description" content="A matrix chat application">
<link rel="stylesheet" type="text/css" href="src/ui/web/css/main.css">
</head>
<body>
<body class="brawl">
<script id="version" type="disabled">
window.BRAWL_VERSION = "%%VERSION%%";
</script>

7
src/ui/web/css/main.css
View file

@ -3,8 +3,9 @@
@import url('room.css');
@import url('timeline.css');
@import url('avatar.css');
@import url('spinner.css');
body {
.brawl {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@ -12,6 +13,10 @@ body {
color: white;
}
.hidden {
visibility: hidden;
}
.SyncStatusBar {
background-color: #555;
display: none;

34
src/ui/web/css/spinner.css Normal file
View file

@ -0,0 +1,34 @@
@keyframes spinner {
0% {
transform: rotate(0);
stroke-dasharray: 0 0 10 90;
}
45% {
stroke-dasharray: 0 0 90 10;
}
75% {
stroke-dasharray: 0 50 50 0;
}
100% {
transform: rotate(360deg);
stroke-dasharray: 10 90 0 0;
}
}
.spinner circle {
transform-origin: 50% 50%;
animation-name: spinner;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
fill: none;
stroke: currentcolor;
stroke-width: calc(var(--size) * 0.1);
stroke-linecap: butt;
}
.spinner {
--size: 20px;
width: var(--size);
height: var(--size);
}

53
src/ui/web/view-gallery.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<script type="text/javascript">
function vm(o) {
// fake EventEmitter
o.on = () => {};
o.off = () => {};
o.i18n = (parts, ...expr) => {
let result = "";
for (let i = 0; i < parts.length; ++i) {
result = result + parts[i];
if (i < expr.length) {
result = result + expr[i];
}
}
return result;
};
return o;
}
</script>
<h1>View Gallery</h1>
<h2 name="login">Login</h2>
<div id="login" class="brawl"></div>
<script id="main" type="module">
import {LoginView} from "./login/LoginView.js";
const view = new LoginView(vm({
defaultHomeServer: "https://hs.tld",
login: () => alert("Logging in!"),
goBack: () => alert("Going back"),
}));
document.getElementById("login").appendChild(view.mount());
</script>
<h2 name="login-loading">Login Loading</h2>
<div id="login-loading" class="brawl"></div>
<script id="main" type="module">
import {LoginView} from "./login/LoginView.js";
const view = new LoginView(vm({
loadViewModel: vm({
loadLabel: "Doing something important...",
loading: true,
}),
defaultHomeServer: "https://hs.tld",
}));
document.getElementById("login-loading").appendChild(view.mount());
</script>
</body>
</html>