mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-11-20 03:25:52 +01:00
128 lines
5.0 KiB
HTML
128 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" type="text/css" href="css/main.css">
|
|
<link rel="stylesheet" type="text/css" href="css/themes/element/theme.css">
|
|
</head>
|
|
<body class="not-ie11">
|
|
<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="session-status">Session Status Bar</h2>
|
|
<div id="session-status" class="hydrogen"></div>
|
|
<script id="main" type="module">
|
|
import {SessionStatusView} from "./session/SessionStatusView.js";
|
|
const view = new SessionStatusView(vm({
|
|
isShown: true,
|
|
statusLabel: "Doing something something",
|
|
isWaiting: true,
|
|
isConnectNowShown: true,
|
|
connectNow: () => alert("connecting now")
|
|
}));
|
|
document.getElementById("session-status").appendChild(view.mount());
|
|
</script>
|
|
<h2 name="login">Login</h2>
|
|
<div id="login" class="hydrogen"></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!"),
|
|
cancelUrl: "#/session"
|
|
}));
|
|
document.getElementById("login").appendChild(view.mount());
|
|
</script>
|
|
<h2 name="login-loading">Login Loading</h2>
|
|
<div id="login-loading" class="hydrogen"></div>
|
|
<script id="main" type="module">
|
|
import {LoginView} from "./login/LoginView.js";
|
|
const view = new LoginView(vm({
|
|
isBusy: true,
|
|
loadViewModel: vm({
|
|
loadLabel: "Doing something important...",
|
|
loading: true,
|
|
}),
|
|
cancelUrl: "#/session",
|
|
defaultHomeserver: "https://hs.tld",
|
|
}));
|
|
document.getElementById("login-loading").appendChild(view.mount());
|
|
</script>
|
|
<h2 name="session-loading">Session Loading</h2>
|
|
<div id="session-loading" class="hydrogen"></div>
|
|
<script id="main" type="module">
|
|
import {SessionLoadView} from "./login/SessionLoadView.js";
|
|
const view = new SessionLoadView(vm({
|
|
loading: true,
|
|
loadLabel: "Getting on with loading your session..."
|
|
}));
|
|
document.getElementById("session-loading").appendChild(view.mount());
|
|
</script>
|
|
<h2 name="invite-dm-view">Invite DM view</h2>
|
|
<div id="invite-dm-view" style="height: 600px" class="hydrogen"></div>
|
|
<script id="main" type="module">
|
|
import {InviteView} from "./session/room/InviteView.js";
|
|
const view = new InviteView(vm({
|
|
busy: false,
|
|
name: "Alice",
|
|
avatarTitle: "Alice",
|
|
avatarColorNumber: 5,
|
|
avatarLetter: "A",
|
|
error: "",
|
|
inviter: {
|
|
id: "@alice:hs.tld",
|
|
displayName: "Alice",
|
|
name: "Alice",
|
|
avatarTitle: "Alice",
|
|
avatarColorNumber: 5,
|
|
avatarLetter: "A",
|
|
},
|
|
isDirectMessage: true,
|
|
showDMProfile: true,
|
|
}));
|
|
document.getElementById("invite-dm-view").appendChild(view.mount());
|
|
</script>
|
|
<h2 name="invite-room-view">Invite Room view</h2>
|
|
<div id="invite-room-view" style="height: 600px" class="hydrogen"></div>
|
|
<script id="main" type="module">
|
|
import {InviteView} from "./session/room/InviteView.js";
|
|
const view = new InviteView(vm({
|
|
busy: false,
|
|
name: "Some Room",
|
|
avatarTitle: "Some Room",
|
|
avatarColorNumber: 2,
|
|
avatarLetter: "S",
|
|
error: "",
|
|
inviter: {
|
|
id: "@alice:hs.tld",
|
|
displayName: "Alice",
|
|
name: "Alice",
|
|
avatarTitle: "Alice",
|
|
avatarColorNumber: 5,
|
|
avatarLetter: "A",
|
|
},
|
|
roomDescription: "#some-room:hs.tld - public room",
|
|
isDirectMessage: false,
|
|
showDMProfile: false,
|
|
}));
|
|
document.getElementById("invite-room-view").appendChild(view.mount());
|
|
</script>
|
|
</body>
|
|
</html>
|