paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-11-04 05:53:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

about: Encapsulate in a custom element.

Browse Source 
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2022-02-17 23:11:55 -08:00
parent ffe87a9729
commit 2b2c5dbe5c
3 changed files with 60 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/renderer/about.html
View File

@@ -2,36 +2,20 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/about.css" />
<title>Zulip - About</title>
<style>
html,
body,
body > div {
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<div class="about">
<img class="logo" src="../resources/zulip.png" />
<p class="detail" id="version">v?.?.?</p>
<div class="maintenance-info">
<p class="detail maintainer">
Maintained by
<a href="https://zulip.com" target="_blank" rel="noopener noreferrer"
>Zulip</a
>
</p>
<p class="detail license">
Available under the
<a
href="https://github.com/zulip/zulip-desktop/blob/main/LICENSE"
target="_blank"
rel="noopener noreferrer"
>Apache 2.0 License</a
>
</p>
</div>
</div>
<script>
const {app} = require("electron").remote;
const version_tag = document.querySelector("#version");
version_tag.textContent = "v" + app.getVersion();
const {AboutView} = require("./js/pages/about.js");
document.body.append(new AboutView().$view);
</script>
</body>
</html>

5
app/renderer/css/about.css
View File

@@ -1,4 +1,6 @@
body {
:host {
contain: strict;
display: flow-root;
background: rgba(250, 250, 250, 1);
font-family: menu, "Helvetica Neue", sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
@@ -16,6 +18,7 @@ body {
}
.about {
display: block !important;
margin: 25vh auto;
height: 25vh;
text-align: center;

46
app/renderer/js/pages/about.ts Normal file
View File

@@ -0,0 +1,46 @@
import {remote} from "electron";
import {html} from "../../../common/html";
const {app} = remote;
export class AboutView {
readonly $view: HTMLElement;
constructor() {
this.$view = document.createElement("div");
const $shadow = this.$view.attachShadow({mode: "open"});
$shadow.innerHTML = html`
<link rel="stylesheet" href="css/about.css" />
<!-- Initially hidden to prevent FOUC -->
<div class="about" hidden>
<img class="logo" src="../resources/zulip.png" />
<p class="detail" id="version">v${app.getVersion()}</p>
<div class="maintenance-info">
<p class="detail maintainer">
Maintained by
<a
href="https://zulip.com"
target="_blank"
rel="noopener noreferrer"
>Zulip</a
>
</p>
<p class="detail license">
Available under the
<a
href="https://github.com/zulip/zulip-desktop/blob/main/LICENSE"
target="_blank"
rel="noopener noreferrer"
>Apache 2.0 License</a
>
</p>
</div>
</div>
`.html;
}
destroy() {
// Do nothing.
}
}