open-source-mirrors
/
jfa-go
mirror of https://github.com/hrfee/jfa-go
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Accounts: Always inline icons, only one settings cog

Browse Source 
Admin chip, email edit bot and contact method cog icon are now always inline.
Only one cog icon is shown now.
discord
Harvey Tindall 4 years ago
parent 9fac79b1f0
commit b3ce7acfcb
No known key found for this signature in database
GPG Key ID: BBC65952848FB1A2
2 changed files with 74 additions and 64 deletions
Show Stats Download Patch File Download Diff File

10
css/base.css
Unescape View File

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

128
ts/modules/accounts.ts
Unescape View File

@ -102,7 +102,9 @@ class user implements User {
this._notifyEmail = s; this._notifyEmail = s;
if (window.telegramEnabled && this._telegramUsername != "") { if (window.telegramEnabled && this._telegramUsername != "") {
const email = this._telegram.getElementsByClassName("accounts-contact-email")[0] as HTMLInputElement; const email = this._telegram.getElementsByClassName("accounts-contact-email")[0] as HTMLInputElement;
email.checked = s; if (email) {
email.checked = s;
}
} }
if (window.discordEnabled && this._discordUsername != "") { if (window.discordEnabled && this._discordUsername != "") {
const email = this._discord.getElementsByClassName("accounts-contact-email")[0] as HTMLInputElement; const email = this._discord.getElementsByClassName("accounts-contact-email")[0] as HTMLInputElement;
@ -120,52 +122,50 @@ class user implements User {
} else { } else {
let innerHTML = ` let innerHTML = `
<a href="https://t.me/${u}" target="_blank">@${u}</a> <a href="https://t.me/${u}" target="_blank">@${u}</a>
<i class="icon ri-settings-2-line ml-half dropdown-button"></i>
<div class="dropdown manual">
<div class="dropdown-display">
<div class="card ~neutral !low">
<span class="supra sm">${window.lang.strings("contactThrough")}</span>
<label class="switch pb-1 mt-half">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-email">
<span>Email</span>
</label>
<label class="switch pb-1">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-telegram">
<span>Telegram</span>
</label>
`; `;
if (window.discordEnabled && this._discordUsername != "") { if (!window.discordEnabled || this._discordUsername == "") {
innerHTML += ` innerHTML += `
<label class="switch pb-1"> <div class="table-inline">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-discord"> <i class="icon ri-settings-2-line ml-half dropdown-button"></i>
<span>Discord</span> <div class="dropdown manual">
</label> <div class="dropdown-display">
`; <div class="card ~neutral !low">
} <span class="supra sm">${window.lang.strings("contactThrough")}</span>
innerHTML += ` <label class="switch pb-1 mt-half">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-email">
<span>Email</span>
</label>
<label class="switch pb-1">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-telegram">
<span>Telegram</span>
</label>
</div>
</div>
</div> </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.
const button = this._telegram.querySelector("i");
const dropdown = this._telegram.querySelector("div.dropdown") as HTMLDivElement;
const checks = this._telegram.querySelectorAll("input") as NodeListOf<HTMLInputElement>;
for (let i = 0; i < checks.length; i++) {
checks[i].onclick = () => this._setNotifyMethod("telegram");
} }
this._telegram.innerHTML = innerHTML;
button.onclick = () => { if (!window.discordEnabled || this._discordUsername == "") {
dropdown.classList.add("selected"); // Javascript is necessary as including the button inside the dropdown would make it too wide to display next to the username.
document.addEventListener("click", outerClickListener); const button = this._telegram.querySelector("i");
}; const dropdown = this._telegram.querySelector("div.dropdown") as HTMLDivElement;
const outerClickListener = (event: Event) => { const checks = this._telegram.querySelectorAll("input") as NodeListOf<HTMLInputElement>;
if (!(event.target instanceof HTMLElement && (this._telegram.contains(event.target) || button.contains(event.target)))) { for (let i = 0; i < checks.length; i++) {
dropdown.classList.remove("selected"); checks[i].onclick = () => this._setNotifyMethod("telegram");
document.removeEventListener("click", outerClickListener);
} }
};
button.onclick = () => {
dropdown.classList.add("selected");
document.addEventListener("click", outerClickListener);
};
const outerClickListener = (event: Event) => {
if (!(event.target instanceof HTMLElement && (this._telegram.contains(event.target) || button.contains(event.target)))) {
dropdown.classList.remove("selected");
document.removeEventListener("click", outerClickListener);
}
};
}
} }
} }
@ -174,7 +174,9 @@ class user implements User {
if (!window.telegramEnabled || !this._telegramUsername) return; if (!window.telegramEnabled || !this._telegramUsername) return;
this._notifyTelegram = s; this._notifyTelegram = s;
const telegram = this._telegram.getElementsByClassName("accounts-contact-telegram")[0] as HTMLInputElement; const telegram = this._telegram.getElementsByClassName("accounts-contact-telegram")[0] as HTMLInputElement;
telegram.checked = s; if (telegram) {
telegram.checked = s;
}
if (window.discordEnabled && this._discordUsername != "") { if (window.discordEnabled && this._discordUsername != "") {
const telegram = this._discord.getElementsByClassName("accounts-contact-telegram")[0] as HTMLInputElement; const telegram = this._discord.getElementsByClassName("accounts-contact-telegram")[0] as HTMLInputElement;
telegram.checked = s; telegram.checked = s;
@ -227,30 +229,32 @@ class user implements User {
(this._discord.querySelector("span") as HTMLSpanElement).onclick = this._addDiscord; (this._discord.querySelector("span") as HTMLSpanElement).onclick = this._addDiscord;
} else { } else {
let innerHTML = ` let innerHTML = `
<a href="https://discord.com/users/${this._discordID}" class="discord-link" target="_blank">${u}</a> <div class="table-inline">
<i class="icon ri-settings-2-line ml-half dropdown-button"></i> <a href="https://discord.com/users/${this._discordID}" class="discord-link" target="_blank">${u}</a>
<div class="dropdown manual"> <i class="icon ri-settings-2-line ml-half dropdown-button"></i>
<div class="dropdown-display"> <div class="dropdown manual">
<div class="card ~neutral !low"> <div class="dropdown-display">
<span class="supra sm">${window.lang.strings("contactThrough")}</span> <div class="card ~neutral !low">
<label class="switch pb-1 mt-half"> <span class="supra sm">${window.lang.strings("contactThrough")}</span>
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-email"> <label class="switch pb-1 mt-half">
<span>Email</span> <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-email">
</label> <span>Email</span>
<label class="switch pb-1"> </label>
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-discord"> <label class="switch pb-1">
<span>Discord</span> <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-discord">
</label> <span>Discord</span>
</label>
`; `;
if (window.telegramEnabled && this._telegramUsername != "") { if (window.telegramEnabled && this._telegramUsername != "") {
innerHTML += ` innerHTML += `
<label class="switch pb-1"> <label class="switch pb-1">
<input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-telegram"> <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-telegram">
<span>Telegram</span> <span>Telegram</span>
</label> </label>
`; `;
} }
innerHTML += ` innerHTML += `
</div>
</div> </div>
</div> </div>
</div> </div>
@ -323,8 +327,8 @@ class user implements User {
this._row = document.createElement("tr") as HTMLTableRowElement; this._row = document.createElement("tr") as HTMLTableRowElement;
let innerHTML = ` let innerHTML = `
<td><input type="checkbox" value=""></td> <td><input type="checkbox" value=""></td>
<td><span class="accounts-username"></span> <span class="accounts-admin"></span> <span class="accounts-disabled"></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><i class="icon ri-edit-line accounts-email-edit"></i><span class="accounts-email-container ml-half"></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) { if (window.telegramEnabled) {
innerHTML += ` innerHTML += `

Write Preview
Loading…
Cancel
Save