Assclaw/jfa-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge tailwind and upgraded a17t

Browse Source 
a17t v0.10 became a tailwind plugin rather than standalone css, and made
some other changes. Much of the original custom CSS now uses tailwind
classes, and there have been some other UI changes.
This commit is contained in:
Harvey Tindall
2022-01-04 20:28:36 +00:00
parent 7ff492df6c 2f50ab36fd
commit 9874dce520
43 changed files with 3928 additions and 1555 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts/modules/accounts.ts
+48 -41
View File
@@ -86,10 +86,10 @@ class user implements User {
get admin(): boolean { return this._admin.classList.contains("chip"); }
set admin(state: boolean) {
if (state) {
this._admin.classList.add("chip", "~info", "ml-1");
this._admin.classList.add("chip", "~info", "ml-4");
this._admin.textContent = window.lang.strings("admin");
} else {
this._admin.classList.remove("chip", "~info", "ml-1");
this._admin.classList.remove("chip", "~info", "ml-4");
this._admin.textContent = "";
}
}
@@ -97,10 +97,10 @@ class user implements User {
get disabled(): boolean { return this._disabled.classList.contains("chip"); }
set disabled(state: boolean) {
if (state) {
this._disabled.classList.add("chip", "~warning", "ml-1");
this._disabled.classList.add("chip", "~warning", "ml-4");
this._disabled.textContent = window.lang.strings("disabled");
} else {
this._disabled.classList.remove("chip", "~warning", "ml-1");
this._disabled.classList.remove("chip", "~warning", "ml-4");
this._disabled.textContent = "";
}
}
@@ -130,30 +130,30 @@ class user implements User {
const matrix = this._matrixID != "";
if (!telegram && !discord && !matrix) return;
let innerHTML = `
<i class="icon ri-settings-2-line ml-half dropdown-button"></i>
<i class="icon ri-settings-2-line ml-2 dropdown-button"></i>
<div class="dropdown manual">
<div class="dropdown-display lg">
<div class="card ~neutral !low">
<div class="card ~neutral @low">
<span class="supra sm">${window.lang.strings("contactThrough")}</span>
<label class="row switch pb-1 mt-half">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-email">
<label class="row switch pb-4 mt-2">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-email mr-2">
</span>Email</span>
</label>
<div class="accounts-area-telegram">
<label class="row switch pb-1">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-telegram">
<label class="row switch pb-4">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-telegram mr-2">
<span>Telegram</span>
</label>
</div>
<div class="accounts-area-discord">
<label class="row switch pb-1">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-discord">
<label class="row switch pb-4">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-discord mr-2">
<span>Discord</span>
</label>
</div>
<div class="accounts-area-matrix">
<label class="row switch pb-1">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-matrix">
<label class="row switch pb-4">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-matrix mr-2">
<span>Matrix</span>
</label>
</div>
@@ -193,8 +193,10 @@ class user implements User {
if (!u) {
this._notifyDropdown.querySelector(".accounts-area-matrix").classList.add("unfocused");
this._matrix.innerHTML = `
<span class="chip btn !low">${window.lang.strings("add")}</span>
<input type="text" class="input ~neutral !normal stealth-input unfocused" placeholder="@user:riot.im">
<div class="table-inline justify-center">
<span class="chip btn @low"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>
<input type="text" class="input ~neutral @low stealth-input unfocused" placeholder="@user:riot.im">
</div>
`;
(this._matrix.querySelector("span") as HTMLSpanElement).onclick = this._addMatrix;
} else {
@@ -212,15 +214,20 @@ class user implements User {
private _addMatrix = () => {
const addButton = this._matrix.querySelector(".btn") as HTMLSpanElement;
const icon = this._matrix.querySelector("i");
const input = this._matrix.querySelector("input.stealth-input") as HTMLInputElement;
const addIcon = addButton.querySelector("i");
if (addButton.classList.contains("chip")) {
input.classList.remove("unfocused");
addButton.innerHTML = `<i class="ri-check-line"></i>`;
addIcon.classList.add("ri-check-line");
addIcon.classList.remove("ri-link");
addButton.classList.remove("chip")
if (icon) {
icon.classList.add("unfocused");
}
const outerClickListener = (event: Event) => {
if (!(event.target instanceof HTMLElement && (this._matrix.contains(event.target) || addButton.contains(event.target)))) {
document.dispatchEvent(new CustomEvent("accounts-reload"));
document.removeEventListener("click", outerClickListener);
}
};
document.addEventListener("click", outerClickListener);
} else {
if (input.value.charAt(0) != "@" || !input.value.includes(":")) return;
const send = {
@@ -257,7 +264,7 @@ class user implements User {
this._telegramUsername = u;
if (!u) {
this._notifyDropdown.querySelector(".accounts-area-telegram").classList.add("unfocused");
this._telegram.innerHTML = `<span class="chip btn !low">${window.lang.strings("add")}</span>`;
this._telegram.innerHTML = `<div class="table-inline justify-center"><span class="chip btn @low"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span></div>`;
(this._telegram.querySelector("span") as HTMLSpanElement).onclick = this._addTelegram;
} else {
this._notifyDropdown.querySelector(".accounts-area-telegram").classList.remove("unfocused");
@@ -322,7 +329,7 @@ class user implements User {
const lastNotifyMethod = this.lastNotifyMethod() == "discord";
this._discordUsername = u;
if (!u) {
this._discord.innerHTML = `<span class="chip btn !low">Add</span>`;
this._discord.innerHTML = `<div class="table-inline justify-center"><span class="chip btn @low"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span></div>`;
(this._discord.querySelector("span") as HTMLSpanElement).onclick = () => addDiscord(this.id);
this._notifyDropdown.querySelector(".accounts-area-discord").classList.add("unfocused");
} else {
@@ -380,8 +387,8 @@ class user implements User {
this._row = document.createElement("tr") as HTMLTableRowElement;
let innerHTML = `
<td><input type="checkbox" value=""></td>
<td><div class="table-inline"><span class="accounts-username"></span> <span class="accounts-admin"></span> <span class="accounts-disabled"></span></span></td>
<td><div class="table-inline"><i class="icon ri-edit-line accounts-email-edit"></i><span class="accounts-email-container ml-half"></span></div></td>
<td><div class="table-inline"><span class="accounts-username py-2"></span> <span class="accounts-admin"></span> <span class="accounts-disabled"></span></span></td>
<td><div class="table-inline"><i class="icon ri-edit-line accounts-email-edit"></i><span class="accounts-email-container ml-2"></span></div></td>
`;
if (window.telegramEnabled) {
innerHTML += `
@@ -400,10 +407,10 @@ class user implements User {
}
innerHTML += `
<td class="accounts-expiry"></td>
<td class="accounts-last-active"></td>
<td class="accounts-last-active whitespace-nowrap"></td>
`;
this._row.innerHTML = innerHTML;
const emailEditor = `<input type="email" class="input ~neutral !normal stealth-input">`;
const emailEditor = `<input type="email" class="input ~neutral @low stealth-input">`;
this._check = this._row.querySelector("input[type=checkbox]") as HTMLInputElement;
this._username = this._row.querySelector(".accounts-username") as HTMLSpanElement;
this._admin = this._row.querySelector(".accounts-admin") as HTMLSpanElement;
@@ -423,10 +430,10 @@ class user implements User {
if (this._emailEditButton.classList.contains("ri-edit-line")) {
this._email.innerHTML = emailEditor;
this._email.querySelector("input").value = this._emailAddress;
this._email.classList.remove("ml-half");
this._email.classList.remove("ml-2");
} else {
this._email.textContent = this._emailAddress;
this._email.classList.add("ml-half");
this._email.classList.add("ml-2");
}
this._emailEditButton.classList.toggle("ri-check-line");
this._emailEditButton.classList.toggle("ri-edit-line");
@@ -902,7 +909,7 @@ export class accountsList {
if (req.readyState == 4) {
const preview = document.getElementById("announce-preview") as HTMLDivElement;
if (req.status != 200) {
preview.innerHTML = `<pre class="preview-content" class="monospace"></pre>`;
preview.innerHTML = `<pre class="preview-content" class="font-mono bg-inherit"></pre>`;
window.modals.announce.show();
this._previewLoaded = false;
return;
@@ -910,7 +917,7 @@ export class accountsList {
let templ = req.response as templateEmail;
if (!templ.html) {
preview.innerHTML = `<pre class="preview-content" class="monospace"></pre>`;
preview.innerHTML = `<pre class="preview-content" class="font-mono bg-inherit"></pre>`;
this._previewLoaded = false;
} else {
preview.innerHTML = templ.html;
@@ -938,9 +945,9 @@ export class accountsList {
dList.textContent = '';
for (let name of list) {
const el = document.createElement("div") as HTMLDivElement;
el.classList.add("flex-expand", "ellipsis", "mt-half");
el.classList.add("flex-expand", "ellipsis", "mt-2");
el.innerHTML = `
<span class="button ~neutral sm full-width accounts-announce-template-button">${name}</span><span class="button ~critical fr ml-1 accounts-announce-template-delete">&times;</span>
<span class="button ~neutral sm full-width accounts-announce-template-button">${name}</span><span class="button ~critical fr ml-4 accounts-announce-template-delete">&times;</span>
`;
(el.querySelector("span.accounts-announce-template-button") as HTMLSpanElement).onclick = () => {
_get("/users/announce/" + name, null, (req: XMLHttpRequest) => {
@@ -1281,17 +1288,17 @@ export class accountsList {
if (this._modifySettingsProfile.checked) {
this._userSelect.parentElement.classList.add("unfocused");
this._profileSelect.parentElement.classList.remove("unfocused")
profileSpan.classList.add("!high");
profileSpan.classList.remove("!normal");
userSpan.classList.remove("!high");
userSpan.classList.add("!normal");
profileSpan.classList.add("@high");
profileSpan.classList.remove("@low");
userSpan.classList.remove("@high");
userSpan.classList.add("@low");
} else {
this._userSelect.parentElement.classList.remove("unfocused");
this._profileSelect.parentElement.classList.add("unfocused");
userSpan.classList.add("!high");
userSpan.classList.remove("!normal");
profileSpan.classList.remove("!high");
profileSpan.classList.add("!normal");
userSpan.classList.add("@high");
userSpan.classList.remove("@low");
profileSpan.classList.remove("@high");
profileSpan.classList.add("@low");
}
};
this._modifySettingsProfile.onchange = checkSource;
ts/modules/common.ts
+4 -4
View File
@@ -104,14 +104,14 @@ export class notificationBox implements NotificationBox {
private _error = (message: string): HTMLElement => {
const noti = document.createElement('aside');
noti.classList.add("aside", "~critical", "!normal", "mt-half", "notification-error");
noti.classList.add("aside", "~critical", "@low", "mt-2", "notification-error");
let error = "";
if (window.lang) {
error = window.lang.strings("error") + ":"
}
noti.innerHTML = `<strong>${error}</strong> ${message}`;
const closeButton = document.createElement('span') as HTMLSpanElement;
closeButton.classList.add("button", "~critical", "!low", "ml-1");
closeButton.classList.add("button", "~critical", "@low", "ml-4");
closeButton.innerHTML = `<i class="icon ri-close-line"></i>`;
closeButton.onclick = () => { this._box.removeChild(noti); };
noti.appendChild(closeButton);
@@ -120,10 +120,10 @@ export class notificationBox implements NotificationBox {
private _positive = (bold: string, message: string): HTMLElement => {
const noti = document.createElement('aside');
noti.classList.add("aside", "~positive", "!normal", "mt-half", "notification-positive");
noti.classList.add("aside", "~positive", "@low", "mt-2", "notification-positive");
noti.innerHTML = `<strong>${bold}</strong> ${message}`;
const closeButton = document.createElement('span') as HTMLSpanElement;
closeButton.classList.add("button", "~positive", "!low", "ml-1");
closeButton.classList.add("button", "~positive", "@low", "ml-4");
closeButton.innerHTML = `<i class="icon ri-close-line"></i>`;
closeButton.onclick = () => { this._box.removeChild(noti); };
noti.appendChild(closeButton);
ts/modules/discord.ts
+6 -6
View File
@@ -22,13 +22,13 @@ export function newDiscordSearch(title: string, description: string, buttonText:
}
list.innerHTML = ``;
addLoader(list);
list.parentElement.classList.add("mb-1", "mt-1");
list.parentElement.classList.add("mb-4", "mt-4");
timer = setTimeout(() => {
_get("/users/discord/" + input.value, null, (req: XMLHttpRequest) => {
if (req.readyState == 4) {
if (req.status != 200) {
removeLoader(list);
list.parentElement.classList.remove("mb-1", "mt-1");
list.parentElement.classList.remove("mb-4", "mt-4");
return;
}
const users = req.response["users"] as Array<DiscordUser>;
@@ -39,18 +39,18 @@ export function newDiscordSearch(title: string, description: string, buttonText:
<td class="img-circle sm">
<img class="img-circle" src="${users[i].avatar_url}" width="32" height="32">
</td>
<td class="w-100 sm">
<td class="sm">
<p class="content">${users[i].name}</p>
</td>
<td class="sm">
<span id="discord-user-${users[i].id}" class="button ~info !high">${buttonText}</span>
<td class="sm float-right">
<span id="discord-user-${users[i].id}" class="button ~info @high">${buttonText}</span>
</td>
</tr>
`;
}
list.innerHTML = innerHTML;
removeLoader(list);
list.parentElement.classList.remove("mb-1", "mt-1");
list.parentElement.classList.remove("mb-4", "mt-4");
for (let i = 0; i < users.length; i++) {
const button = document.getElementById(`discord-user-${users[i].id}`) as HTMLInputElement;
button.onclick = () => buttonFunction(users[i], event.detail);
ts/modules/invites.ts
+25 -25
View File
@@ -93,14 +93,14 @@ class DOMInvite implements Invite {
const chip = container.querySelector("span.inv-email-chip");
const tooltip = container.querySelector("span.content") as HTMLSpanElement;
if (address == "") {
container.classList.remove("mr-1");
container.classList.remove("mr-4");
icon.classList.remove("ri-mail-line");
icon.classList.remove("ri-mail-close-line");
chip.classList.remove("~neutral");
chip.classList.remove("~critical");
chip.classList.remove("chip");
} else {
container.classList.add("mr-1");
container.classList.add("mr-4");
chip.classList.add("chip");
if (address.includes("Failed")) {
icon.classList.remove("ri-mail-line");
@@ -251,14 +251,14 @@ class DOMInvite implements Invite {
this._header = document.createElement('div') as HTMLDivElement;
this._container.appendChild(this._header);
this._header.classList.add("card", "~neutral", "!normal", "inv-header", "elem-pad", "no-pad", "flex-expand", "row", "mt-half", "overflow-y");
this._header.classList.add("card", "dark:~d_neutral", "@low", "inv-header", "elem-pad", "no-pad", "flex-expand", "row", "mt-2", "overflow-y");
this._codeArea = document.createElement('div') as HTMLDivElement;
this._header.appendChild(this._codeArea);
this._codeArea.classList.add("inv-codearea");
this._codeArea.innerHTML = `
<a class="invite-link code monospace mr-1" href=""></a>
<span class="button ~info !normal" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
<a class="invite-link code font-mono bg-inherit mr-4" href=""></a>
<span class="button ~info @low" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
`;
const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement;
copyButton.onclick = () => {
@@ -284,8 +284,8 @@ class DOMInvite implements Invite {
<span class="inv-email-chip"><i></i></span>
<span class="content sm"></span>
</div>
<span class="inv-duration mr-1"></span>
<span class="button ~critical !normal inv-delete">${window.lang.strings("delete")}</span>
<span class="inv-duration mr-4"></span>
<span class="button ~critical @low inv-delete">${window.lang.strings("delete")}</span>
<label>
<i class="icon clickable ri-arrow-down-s-line not-rotated"></i>
<input class="inv-toggle-details unfocused" type="checkbox">
@@ -304,7 +304,7 @@ class DOMInvite implements Invite {
this._details = document.createElement('div') as HTMLDivElement;
this._container.appendChild(this._details);
this._details.classList.add("card", "~neutral", "!normal", "mt-half", "no-pad", "inv-details");
this._details.classList.add("card", "~neutral", "@low", "mt-2", "no-pad", "inv-details");
const detailsInner = document.createElement('div') as HTMLDivElement;
this._details.appendChild(detailsInner);
detailsInner.classList.add("inv-row", "flex-expand", "row", "elem-pad", "align-top");
@@ -313,8 +313,8 @@ class DOMInvite implements Invite {
detailsInner.appendChild(this._left);
this._left.classList.add("inv-profilearea");
let innerHTML = `
<p class="supra mb-1 top">${window.lang.strings("profile")}</p>
<div class="select ~neutral !normal inv-profileselect inline-block">
<p class="supra mb-2 top">${window.lang.strings("profile")}</p>
<div class="select ~neutral @low inv-profileselect inline-block mb-2">
<select>
<option value="noProfile" selected>${window.lang.strings("inviteNoProfile")}</option>
</select>
@@ -322,7 +322,7 @@ class DOMInvite implements Invite {
`;
if (window.notificationsEnabled) {
innerHTML += `
<p class="label supra">${window.lang.strings("notifyEvent")}</p>
<p class="label supra mb-2">${window.lang.strings("notifyEvent")}</p>
<label class="switch block">
<input class="inv-notify-expiry" type="checkbox">
<span>${window.lang.strings("notifyInviteExpiry")}</span>
@@ -348,14 +348,14 @@ class DOMInvite implements Invite {
detailsInner.appendChild(this._middle);
this._middle.classList.add("block");
this._middle.innerHTML = `
<p class="supra mb-1 top">${window.lang.strings("inviteDateCreated")} <strong class="inv-created"></strong></p>
<p class="supra mb-1">${window.lang.strings("inviteRemainingUses")} <strong class="inv-remaining"></strong></p>
<p class="supra mb-1"><span class="user-expiry"></span> <strong class="user-expiry-time"></strong></p>
<p class="supra mb-4 top">${window.lang.strings("inviteDateCreated")} <strong class="inv-created"></strong></p>
<p class="supra mb-4">${window.lang.strings("inviteRemainingUses")} <strong class="inv-remaining"></strong></p>
<p class="supra mb-4"><span class="user-expiry"></span> <strong class="user-expiry-time"></strong></p>
`;
this._right = document.createElement('div') as HTMLDivElement;
detailsInner.appendChild(this._right);
this._right.classList.add("card", "~neutral", "!low", "inv-created-users");
this._right.classList.add("card", "~neutral", "@low", "inv-created-users");
this._right.innerHTML = `<strong class="supra table-header">${window.lang.strings("inviteUsersCreated")}</strong>`;
this._userTable = document.createElement('div') as HTMLDivElement;
this._right.appendChild(this._userTable);
@@ -425,9 +425,9 @@ export class inviteList implements inviteList {
this._list.classList.add("empty");
this._list.innerHTML = `
<div class="inv inv-empty">
<div class="card ~neutral !normal inv-header flex-expand mt-half">
<div class="card dark:~d_neutral @low inv-header flex-expand mt-2">
<div class="inv-codearea">
<span class="code monospace">${window.lang.strings("inviteNoInvites")}</span>
<span class="code font-mono bg-inherit">${window.lang.strings("inviteNoInvites")}</span>
</div>
</div>
</div>
@@ -787,17 +787,17 @@ export class createInvite {
if (this._invDurationButton.checked) {
this._invDuration.classList.remove("unfocused");
this._userExpiry.classList.add("unfocused");
invSpan.classList.add("!high");
invSpan.classList.remove("!normal");
userSpan.classList.add("!normal");
userSpan.classList.remove("!high");
invSpan.classList.add("@high");
invSpan.classList.remove("@low");
userSpan.classList.add("@low");
userSpan.classList.remove("@high");
} else if (this._userExpiryButton.checked) {
this._userExpiry.classList.remove("unfocused");
this._invDuration.classList.add("unfocused");
invSpan.classList.add("!normal");
invSpan.classList.remove("!high");
userSpan.classList.add("!high");
userSpan.classList.remove("!normal");
invSpan.classList.add("@low");
invSpan.classList.remove("@high");
userSpan.classList.add("@high");
userSpan.classList.remove("@low");
}
};
ts/modules/lang.ts
+5 -1
View File
@@ -68,6 +68,8 @@ export const loadLangSelector = (page: string) => {
t12.checked = false;
}
}
let queryString = new URLSearchParams(window.location.search);
if (queryString.has("lang")) queryString.delete("lang");
_get("/lang/" + page, null, (req: XMLHttpRequest) => {
if (req.readyState == 4) {
if (req.status != 200) {
@@ -77,7 +79,9 @@ export const loadLangSelector = (page: string) => {
const list = document.getElementById("lang-list") as HTMLDivElement;
let innerHTML = '';
for (let code in req.response) {
innerHTML += `<a href="?lang=${code}" class="button input ~neutral field mb-half lang-link">${req.response[code]}</a>`;
queryString.set("lang", code);
innerHTML += `<a href="?${queryString.toString()}" class="button w-100 al justify-start ~neutral mb-2 lang-link">${req.response[code]}</a>`;
queryString.delete("lang");
}
list.innerHTML = innerHTML;
}
ts/modules/profiles.ts
+4 -4
View File
@@ -23,10 +23,10 @@ class profile implements Profile {
get admin(): boolean { return this._adminChip.classList.contains("chip"); }
set admin(state: boolean) {
if (state) {
this._adminChip.classList.add("chip", "~info", "ml-half");
this._adminChip.classList.add("chip", "~info", "ml-2");
this._adminChip.textContent = "Admin";
} else {
this._adminChip.classList.remove("chip", "~info", "ml-half");
this._adminChip.classList.remove("chip", "~info", "ml-2");
this._adminChip.textContent = "";
}
}
@@ -62,12 +62,12 @@ class profile implements Profile {
<td><input type="radio" name="profile-default"></td>
`;
if (window.ombiEnabled) innerHTML += `
<td><span class="button !normal profile-ombi"></span></td>
<td><span class="button @low profile-ombi"></span></td>
`;
innerHTML += `
<td class="profile-from ellipsis"></td>
<td class="profile-libraries"></td>
<td><span class="button ~critical !normal">${window.lang.strings("delete")}</span></td>
<td><span class="button ~critical @low">${window.lang.strings("delete")}</span></td>
`;
this._row.innerHTML = innerHTML;
this._name = this._row.querySelector("b.profile-name");
ts/modules/settings.ts
+23 -22
View File
@@ -91,10 +91,10 @@ class DOMInput {
get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
set requires_restart(state: boolean) {
if (state) {
this._restart.classList.add("badge", "~info");
this._restart.classList.add("badge", "~info", "dark:~d_warning");
this._restart.textContent = "R";
} else {
this._restart.classList.remove("badge", "~info");
this._restart.classList.remove("badge", "~info", "dark:~d_warning");
this._restart.textContent = "";
}
}
@@ -109,7 +109,7 @@ class DOMInput {
<i class="icon ri-information-line"></i>
<span class="content sm"></span>
</div>
<input type="${inputType}" class="input ~neutral !normal mt-half mb-half">
<input type="${inputType}" class="input ~neutral @low mt-2 mb-2">
</label>
`;
this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
@@ -250,10 +250,10 @@ class DOMBool implements SBool {
get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
set requires_restart(state: boolean) {
if (state) {
this._restart.classList.add("badge", "~info");
this._restart.classList.add("badge", "~info", "dark:~d_warning");
this._restart.textContent = "R";
} else {
this._restart.classList.remove("badge", "~info");
this._restart.classList.remove("badge", "~info", "dark:~d_warning");
this._restart.textContent = "";
}
}
@@ -263,7 +263,7 @@ class DOMBool implements SBool {
this._container = document.createElement("div");
this._container.classList.add("setting");
this._container.innerHTML = `
<label class="switch mb-half">
<label class="switch mb-2">
<input type="checkbox">
<span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
<div class="setting-tooltip tooltip right unfocused">
@@ -372,10 +372,10 @@ class DOMSelect implements SSelect {
get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
set requires_restart(state: boolean) {
if (state) {
this._restart.classList.add("badge", "~info");
this._restart.classList.add("badge", "~info", "dark:~d_warning");
this._restart.textContent = "R";
} else {
this._restart.classList.remove("badge", "~info");
this._restart.classList.remove("badge", "~info", "dark:~d_warning");
this._restart.textContent = "";
}
}
@@ -403,7 +403,7 @@ class DOMSelect implements SSelect {
<i class="icon ri-information-line"></i>
<span class="content sm"></span>
</div>
<div class="select ~neutral !normal mt-half mb-half">
<div class="select ~neutral @low mt-2 mb-2">
<select class="settings-select"></select>
</div>
</label>
@@ -436,7 +436,7 @@ class DOMSelect implements SSelect {
message.innerHTML = window.lang.var("strings",
"settingsRequiredOrRestartMessage",
`<span class="badge ~critical">*</span>`,
`<span class="badge ~info">R</span>`
`<span class="badge ~info dark:~d_warning">R</span>`
);
this.update(setting);
@@ -472,7 +472,7 @@ class sectionPanel {
this._section.classList.add("settings-section", "unfocused");
this._section.innerHTML = `
<span class="heading">${s.meta.name}</span>
<p class="support lg">${s.meta.description}</p>
<p class="support lg my-2">${s.meta.description}</p>
`;
this.update(s);
@@ -549,7 +549,7 @@ export class settingsList {
this._sections[name] = section;
this._panel.appendChild(this._sections[name].asElement());
const button = document.createElement("span") as HTMLSpanElement;
button.classList.add("button", "~neutral", "!low", "settings-section-button", "mb-half");
button.classList.add("button", "~neutral", "@low", "settings-section-button", "justify-between", "mb-2");
button.textContent = s.meta.name;
if (subButton) { button.appendChild(subButton); }
button.onclick = () => { this._showPanel(name); };
@@ -717,7 +717,7 @@ export class settingsList {
const editButton = document.createElement("div");
editButton.classList.add("tooltip", "left");
editButton.innerHTML = `
<span class="button ~neutral !normal">
<span class="button ~neutral @low">
<i class="icon ri-edit-line"></i>
</span>
<span class="content sm">
@@ -738,7 +738,7 @@ export class settingsList {
const addButton = document.createElement("div");
addButton.classList.add("tooltip", "left");
addButton.innerHTML = `
<span class="button ~neutral !normal">+</span>
<span class="button ~neutral @low">+</span>
<span class="content sm">
${window.lang.strings("linkMatrix")}
</span>
@@ -804,7 +804,7 @@ class EmailEditor {
this._templ = req.response as templateEmail;
this._textArea.value = this._templ.content;
if (this._templ.html == "") {
this._preview.innerHTML = `<pre class="preview-content" class="monospace"></pre>`;
this._preview.innerHTML = `<pre class="preview-content" class="font-mono bg-inherit"></pre>`;
} else {
this._preview.innerHTML = this._templ.html;
}
@@ -815,7 +815,7 @@ class EmailEditor {
let innerHTML = '';
for (let i = 0; i < this._templ.variables.length; i++) {
let ci = i % colors.length;
innerHTML += '<span class="button ~' + colors[ci] +' !normal mb-1" style="margin-left: 0.25rem; margin-right: 0.25rem;"></span>'
innerHTML += '<span class="button ~' + colors[ci] +' @low mb-4" style="margin-left: 0.25rem; margin-right: 0.25rem;"></span>'
}
if (this._templ.variables.length == 0) {
this._variablesLabel.classList.add("unfocused");
@@ -825,7 +825,7 @@ class EmailEditor {
this._variables.innerHTML = innerHTML
let buttons = this._variables.querySelectorAll("span.button") as NodeListOf<HTMLSpanElement>;
for (let i = 0; i < this._templ.variables.length; i++) {
buttons[i].innerHTML = `<span class="monospace">` + this._templ.variables[i] + `</span>`;
buttons[i].innerHTML = `<span class="font-mono bg-inherit">` + this._templ.variables[i] + `</span>`;
buttons[i].onclick = () => {
insertText(this._textArea, this._templ.variables[i]);
this.loadPreview();
@@ -839,13 +839,13 @@ class EmailEditor {
} else {
for (let i = this._templ.conditionals.length-1; i >= 0; i--) {
let ci = i % colors.length;
innerHTML += '<span class="button ~' + colors[ci] +' !normal mb-1" style="margin-left: 0.25rem; margin-right: 0.25rem;"></span>'
innerHTML += '<span class="button ~' + colors[ci] +' @low mb-4" style="margin-left: 0.25rem; margin-right: 0.25rem;"></span>'
}
this._conditionalsLabel.classList.remove("unfocused");
this._conditionals.innerHTML = innerHTML
buttons = this._conditionals.querySelectorAll("span.button") as NodeListOf<HTMLSpanElement>;
for (let i = 0; i < this._templ.conditionals.length; i++) {
buttons[i].innerHTML = `<span class="monospace">{if ` + this._templ.conditionals[i].slice(1) + `</span>`;
buttons[i].innerHTML = `<span class="font-mono bg-inherit">{if ` + this._templ.conditionals[i].slice(1) + `</span>`;
buttons[i].onclick = () => {
insertText(this._textArea, "{if " + this._templ.conditionals[i].slice(1) + "{endif}");
this.loadPreview();
@@ -902,15 +902,16 @@ class EmailEditor {
}
tr.innerHTML = `
<td>${this._names[id].name}</td>
<td>${resetButton}</td>
<td><span class="button ~info !normal" title="${window.lang.get("strings", "edit")}"><i class="icon ri-edit-line"></i></span></td>
<td class="table-inline justify-center"><span class="customize-reset">${resetButton}</span></td>
<td><span class="button ~info @low" title="${window.lang.get("strings", "edit")}"><i class="icon ri-edit-line"></i></span></td>
`;
(tr.querySelector("span.button") as HTMLSpanElement).onclick = () => {
window.modals.customizeEmails.close()
this.loadEditor(id);
};
if (this._names[id].enabled) {
const rb = tr.querySelector("i.ri-restart-line") as HTMLElement;
const rb = tr.querySelector("span.customize-reset") as HTMLElement;
rb.classList.add("button");
rb.onclick = () => _post("/config/emails/" + id + "/state/disable", null, (req: XMLHttpRequest) => {
if (req.readyState == 4) {
if (req.status != 200 && req.status != 204) {
ts/modules/theme.ts
+57 -9
View File
@@ -1,19 +1,67 @@
export function toggleTheme() {
document.documentElement.classList.toggle('dark-theme');
document.documentElement.classList.toggle('light-theme');
localStorage.setItem('theme', document.documentElement.classList.contains('dark-theme') ? "dark" : "light");
document.documentElement.classList.toggle('dark');
document.documentElement.classList.toggle('light');
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? "dark" : "light");
}
export function loadTheme() {
const theme = localStorage.getItem("theme");
if (theme == "dark") {
document.documentElement.classList.add('dark-theme');
document.documentElement.classList.remove('light-theme');
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else if (theme == "light") {
document.documentElement.classList.add('light-theme');
document.documentElement.classList.remove('dark-theme');
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
} else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
document.documentElement.classList.add('dark-theme');
document.documentElement.classList.remove('light-theme');
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
}
}
export class nightwind {
beforeTransition = () => {
const doc = document.documentElement;
const onTransitionDone = () => {
doc.classList.remove('nightwind');
doc.removeEventListener('transitionend', onTransitionDone);
}
doc.addEventListener('transitionend', onTransitionDone);
if (!doc.classList.contains('nightwind')) {
doc.classList.add('nightwind');
}
};
constructor() {
const theme = localStorage.getItem("theme");
if (theme == "dark") {
this.enable(true);
} else if (theme == "light") {
this.enable(false);
} else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
this.enable(true);
}
}
toggle = () => {
this.beforeTransition();
if (!document.documentElement.classList.contains('dark')) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? "dark" : "light");
};
enable = (dark: boolean) => {
const mode = dark ? "dark" : "light";
const opposite = dark ? "light" : "dark";
localStorage.setItem('theme', dark ? "dark" : "light");
this.beforeTransition();
if (document.documentElement.classList.contains(opposite)) {
document.documentElement.classList.remove(opposite);
}
document.documentElement.classList.add(mode);
};
}
ts/modules/update.ts
+2 -2
View File
@@ -38,9 +38,9 @@ export class Updater implements updater {
const el = document.getElementById("update-description") as HTMLParagraphElement;
el.textContent = description;
if (this.version == "git") {
el.classList.add("monospace");
el.classList.add("font-mono", "bg-inherit");
} else {
el.classList.remove("monospace");
el.classList.remove("font-mono", "bg-inherit");
}
}