hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-23 01:20:11 +00:00
Code Issues Projects Releases Wiki Activity

switch emails to normal text when not editing

Browse Source 
fixes padding on small screens.
This commit is contained in:
Harvey Tindall 2021-02-05 18:24:27 +00:00
parent 2c8be42bbc
commit c09ffb49e7
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ts/modules/accounts.ts
View File

@ -42,7 +42,15 @@ class user implements User {
} }
get email(): string { return this._emailAddress; } get email(): string { return this._emailAddress; }
set email(value: string) { this._email.value = value; this._emailAddress = value; } set email(value: string) {
this._emailAddress = value;
const input = this._email.querySelector("input");
if (input) {
input.value = value;
} else {
this._email.textContent = value;
}
}
get last_active(): string { return this._lastActive.textContent; } get last_active(): string { return this._lastActive.textContent; }
set last_active(value: string) { this._lastActive.textContent = value; } set last_active(value: string) { this._lastActive.textContent = value; }
@ -55,20 +63,27 @@ class user implements User {
this._row.innerHTML = ` this._row.innerHTML = `
<td><input type="checkbox" value=""></td> <td><input type="checkbox" value=""></td>
<td><span class="accounts-username"></span> <span class="accounts-admin"></span></td> <td><span class="accounts-username"></span> <span class="accounts-admin"></span></td>
<td><i class="icon ri-edit-line accounts-email-edit"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden accounts-email" readonly></td> <td><i class="icon ri-edit-line accounts-email-edit"></i><span class="accounts-email-container ml-half"></span></td>
<td class="accounts-last-active"></td> <td class="accounts-last-active"></td>
`; `;
const emailEditor = `<input type="email" class="input ~neutral !normal stealth-input">`;
this._check = this._row.querySelector("input[type=checkbox]") as HTMLInputElement; this._check = this._row.querySelector("input[type=checkbox]") as HTMLInputElement;
this._username = this._row.querySelector(".accounts-username") as HTMLSpanElement; this._username = this._row.querySelector(".accounts-username") as HTMLSpanElement;
this._admin = this._row.querySelector(".accounts-admin") as HTMLSpanElement; this._admin = this._row.querySelector(".accounts-admin") as HTMLSpanElement;
this._email = this._row.querySelector(".accounts-email") as HTMLInputElement; this._email = this._row.querySelector(".accounts-email-container") as HTMLInputElement;
this._emailEditButton = this._row.querySelector(".accounts-email-edit") as HTMLElement; this._emailEditButton = this._row.querySelector(".accounts-email-edit") as HTMLElement;
this._lastActive = this._row.querySelector(".accounts-last-active") as HTMLTableDataCellElement; this._lastActive = this._row.querySelector(".accounts-last-active") as HTMLTableDataCellElement;
this._check.onchange = () => { this.selected = this._check.checked; } this._check.onchange = () => { this.selected = this._check.checked; }
const toggleStealthInput = () => { const toggleStealthInput = () => {
this._email.classList.toggle("stealth-input-hidden"); if (this._emailEditButton.classList.contains("ri-edit-line")) {
this._email.readOnly = !this._email.readOnly; this._email.innerHTML = emailEditor;
this._email.querySelector("input").value = this._emailAddress;
this._email.classList.remove("ml-half");
} else {
this._email.textContent = this._emailAddress;
this._email.classList.add("ml-half");
}
this._emailEditButton.classList.toggle("ri-check-line"); this._emailEditButton.classList.toggle("ri-check-line");
this._emailEditButton.classList.toggle("ri-edit-line"); this._emailEditButton.classList.toggle("ri-edit-line");
}; };
@ -80,7 +95,7 @@ class user implements User {
} }
}; };
this._emailEditButton.onclick = () => { this._emailEditButton.onclick = () => {
if (this._email.classList.contains("stealth-input-hidden")) { if (this._emailEditButton.classList.contains("ri-edit-line")) {
document.addEventListener('click', outerClickListener); document.addEventListener('click', outerClickListener);
} else { } else {
this._updateEmail(); this._updateEmail();
@ -94,7 +109,7 @@ class user implements User {
private _updateEmail = () => { private _updateEmail = () => {
let oldEmail = this.email; let oldEmail = this.email;
this.email = this._email.value; this.email = this._email.querySelector("input").value;
let send = {}; let send = {};
send[this.id] = this.email; send[this.id] = this.email;
_post("/users/emails", send, (req: XMLHttpRequest) => { _post("/users/emails", send, (req: XMLHttpRequest) => {