1
0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-22 09:00:10 +00:00

Accounts: Always inline icons, only one settings cog

Admin chip, email edit bot and contact method cog icon are now always inline.
Only one cog icon is shown now.
This commit is contained in:
Harvey Tindall 2021-05-22 23:02:16 +01:00
parent 9fac79b1f0
commit b3ce7acfcb
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
2 changed files with 74 additions and 64 deletions

View File

@ -30,12 +30,12 @@
}
}
@media screen and (max-width: 750px) {
@media screen and (max-width: 1000px) {
:root {
font-size: 0.9rem;
}
.table-responsive table {
min-width: 660px;
min-width: 800px;
}
}
@ -428,6 +428,7 @@ p.top {
.table-responsive {
overflow-x: auto;
font-size: 0.9rem;
}
#notification-box {
@ -506,3 +507,8 @@ img.img-circle {
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
.table-inline {
display: flex !important;
align-items: center;
}

View File

@ -102,8 +102,10 @@ class user implements User {
this._notifyEmail = s;
if (window.telegramEnabled && this._telegramUsername != "") {
const email = this._telegram.getElementsByClassName("accounts-contact-email")[0] as HTMLInputElement;
if (email) {
email.checked = s;
}
}
if (window.discordEnabled && this._discordUsername != "") {
const email = this._discord.getElementsByClassName("accounts-contact-email")[0] as HTMLInputElement;
email.checked = s;
@ -120,6 +122,10 @@ class user implements User {
} else {
let innerHTML = `
<a href="https://t.me/${u}" target="_blank">@${u}</a>
`;
if (!window.discordEnabled || this._discordUsername == "") {
innerHTML += `
<div class="table-inline">
<i class="icon ri-settings-2-line ml-half dropdown-button"></i>
<div class="dropdown manual">
<div class="dropdown-display">
@ -133,21 +139,14 @@ class user implements User {
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-telegram">
<span>Telegram</span>
</label>
`;
if (window.discordEnabled && this._discordUsername != "") {
innerHTML += `
<label class="switch pb-1">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-discord">
<span>Discord</span>
</label>
</div>
</div>
</div>
</div>
`;
}
innerHTML += `
</div>
</div>
</div>
`;
this._discord.innerHTML = innerHTML;
this._telegram.innerHTML = innerHTML;
if (!window.discordEnabled || this._discordUsername == "") {
// Javascript is necessary as including the button inside the dropdown would make it too wide to display next to the username.
const button = this._telegram.querySelector("i");
const dropdown = this._telegram.querySelector("div.dropdown") as HTMLDivElement;
@ -168,13 +167,16 @@ class user implements User {
};
}
}
}
get notify_telegram(): boolean { return this._notifyTelegram; }
set notify_telegram(s: boolean) {
if (!window.telegramEnabled || !this._telegramUsername) return;
this._notifyTelegram = s;
const telegram = this._telegram.getElementsByClassName("accounts-contact-telegram")[0] as HTMLInputElement;
if (telegram) {
telegram.checked = s;
}
if (window.discordEnabled && this._discordUsername != "") {
const telegram = this._discord.getElementsByClassName("accounts-contact-telegram")[0] as HTMLInputElement;
telegram.checked = s;
@ -227,6 +229,7 @@ class user implements User {
(this._discord.querySelector("span") as HTMLSpanElement).onclick = this._addDiscord;
} else {
let innerHTML = `
<div class="table-inline">
<a href="https://discord.com/users/${this._discordID}" class="discord-link" target="_blank">${u}</a>
<i class="icon ri-settings-2-line ml-half dropdown-button"></i>
<div class="dropdown manual">
@ -254,6 +257,7 @@ class user implements User {
</div>
</div>
</div>
</div>
`;
this._discord.innerHTML = innerHTML;
// Javascript is necessary as including the button inside the dropdown would make it too wide to display next to the username.
@ -323,8 +327,8 @@ class user implements User {
this._row = document.createElement("tr") as HTMLTableRowElement;
let innerHTML = `
<td><input type="checkbox" value=""></td>
<td><span class="accounts-username"></span> <span class="accounts-admin"></span> <span class="accounts-disabled"></span></td>
<td><i class="icon ri-edit-line accounts-email-edit"></i><span class="accounts-email-container ml-half"></span></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>
`;
if (window.telegramEnabled) {
innerHTML += `