make view gallery of views in different states
This commit is contained in:
Bruno Windels
parent
d3f7fb5089
commit
d69987b426
4 changed files with 94 additions and 2 deletions
|
|
@ -10,7 +10,7 @@
|
||||||
<meta name="description" content="A matrix chat application">
|
<meta name="description" content="A matrix chat application">
|
||||||
<link rel="stylesheet" type="text/css" href="src/ui/web/css/main.css">
|
<link rel="stylesheet" type="text/css" href="src/ui/web/css/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="brawl">
|
||||||
<script id="version" type="disabled">
|
<script id="version" type="disabled">
|
||||||
window.BRAWL_VERSION = "%%VERSION%%";
|
window.BRAWL_VERSION = "%%VERSION%%";
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,9 @@
|
||||||
@import url('room.css');
|
@import url('room.css');
|
||||||
@import url('timeline.css');
|
@import url('timeline.css');
|
||||||
@import url('avatar.css');
|
@import url('avatar.css');
|
||||||
|
@import url('spinner.css');
|
||||||
|
|
||||||
body {
|
.brawl {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif,
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif,
|
||||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
|
@ -12,6 +13,10 @@ body {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.SyncStatusBar {
|
.SyncStatusBar {
|
||||||
background-color: #555;
|
background-color: #555;
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
34
src/ui/web/css/spinner.css
Normal file
34
src/ui/web/css/spinner.css
Normal 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
53
src/ui/web/view-gallery.html
Normal 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>
|
||||||
Reference in a new issue