mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-12-22 09:00:10 +00:00
accounts: fix search bugs, adjust top bar layout
search bar is now massive with a small filter button next to it. Action buttons are on their own row. Also fixed dealing with going from a search with filters in to an empty one, search() is now called for any change at all to the input.
This commit is contained in:
parent
76bb95098c
commit
6f452c62de
GPG Key ID:
BBC65952848FB1A2
@ -490,10 +490,10 @@ a:hover:not(.lang-link):not(.\~urge), a:active:not(.lang-link):not(.\~urge) {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
/* .search {
|
||||||
max-width: 15rem;
|
max-width: 15rem;
|
||||||
min-width: 10rem;
|
min-width: 10rem;
|
||||||
}
|
} */
|
||||||
|
|
||||||
td.img-circle {
|
td.img-circle {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
@ -548,6 +548,11 @@ div.card:contains(section.banner.footer) {
|
|||||||
padding-bottom: 0px !important
|
padding-bottom: 0px !important
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx-0i {
|
||||||
|
margin-left: 0px !important;
|
||||||
|
margin-right: 0px !important
|
||||||
|
}
|
||||||
|
|
||||||
.text-center-i {
|
.text-center-i {
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -580,45 +580,43 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="tab-accounts" class="unfocused">
|
<div id="tab-accounts" class="unfocused">
|
||||||
<div class="card @low dark:~d_neutral accounts mb-4 overflow-visible">
|
<div class="card @low dark:~d_neutral accounts mb-4 overflow-visible">
|
||||||
<div class="flex-expand row">
|
<div class="flex-expand align-middle">
|
||||||
<div class="row w-6/12">
|
<span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
|
||||||
<span class="text-3xl font-bold mr-2 col">{{ .strings.accounts }}</span>
|
<input type="search" class="field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
|
||||||
<input type="search" class="col sm field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
|
<div id="accounts-filter-dropdown" class="dropdown" tabindex="0">
|
||||||
<div id="accounts-filter-dropdown" class="col sm dropdown pb-0i" tabindex="0">
|
<span class="h-100 button ~neutral @low center ml-4" id="accounts-filter-button">{{ .strings.filters }}</span>
|
||||||
<span class="h-100 sm button ~neutral @low center mb-2" id="accounts-filter-button">{{ .strings.filters }}</span>
|
<div class="dropdown-display">
|
||||||
<div class="dropdown-display">
|
<div class="card ~neutral @low mt-2" id="accounts-filter-list">
|
||||||
<div class="card ~neutral @low mt-2" id="accounts-filter-list">
|
<p class="supra pb-2">{{ .strings.filters }}</p>
|
||||||
<p class="supra pb-2">{{ .strings.filters }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<span class="col sm button ~neutral @low center mb-2" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
|
|
||||||
<div id="accounts-announce-dropdown" class="col sm dropdown pb-0i" tabindex="0">
|
|
||||||
<span class="h-100 sm button ~info @low center mb-2" id="accounts-announce">{{ .strings.announce }}</span>
|
|
||||||
<div class="dropdown-display">
|
|
||||||
<div class="card ~neutral @low">
|
|
||||||
<span class="supra sm">{{ .strings.templates }}</span>
|
|
||||||
<div id="accounts-announce-templates"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="col sm button ~urge @low center mb-2" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
|
|
||||||
<span class="col sm button ~warning @low center mb-2" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
|
|
||||||
<div id="accounts-disable-enable-dropdown" class="col sm dropdown manual pb-0i" tabindex="0">
|
|
||||||
<span class="h-100 sm button ~positive @low center mb-2" id="accounts-disable-enable">{{ .strings.disable }}</span>
|
|
||||||
<div class="dropdown-display">
|
|
||||||
<div class="card ~neutral @low">
|
|
||||||
<span class="button ~urge sm full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="col sm button ~info @low center mb-2 unfocused" id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
|
|
||||||
<span class="col sm button ~critical @low center mb-2" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row -mx-2">
|
||||||
|
<span class="col button ~neutral @low center max-w-[20%]" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
|
||||||
|
<div id="accounts-announce-dropdown" class="col dropdown pb-0i max-w-[20%]" tabindex="0">
|
||||||
|
<span class="w-100 button ~info @low center" id="accounts-announce">{{ .strings.announce }}</span>
|
||||||
|
<div class="dropdown-display">
|
||||||
|
<div class="card ~neutral @low">
|
||||||
|
<span class="supra sm">{{ .strings.templates }}</span>
|
||||||
|
<div id="accounts-announce-templates"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="col button ~urge @low center max-w-[20%]" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
|
||||||
|
<span class="col button ~warning @low center max-w-[20%]" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
|
||||||
|
<div id="accounts-disable-enable-dropdown" class="col dropdown manual pb-0i max-w-[20%]" tabindex="0">
|
||||||
|
<span class="w-100 button ~positive @low center" id="accounts-disable-enable">{{ .strings.disable }}</span>
|
||||||
|
<div class="dropdown-display">
|
||||||
|
<div class="card ~neutral @low">
|
||||||
|
<span class="button ~urge full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="col button ~info @low center unfocused max-w-[20%]" id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
|
||||||
|
<span class="col button ~critical @low center max-w-[20%]" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row -mx-2">
|
||||||
<button type="button" class="button ~neutral @low center ml-2 mr-2 hidden"><span id="accounts-sort-by-field"></span> <span class="ml-2">×</span></button>
|
<button type="button" class="button ~neutral @low center ml-2 mr-2 hidden"><span id="accounts-sort-by-field"></span> <span class="ml-2">×</span></button>
|
||||||
<span id="accounts-filter-area"></span>
|
<span id="accounts-filter-area"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -970,7 +970,7 @@ export class accountsList {
|
|||||||
// FIXME: Generate filter card for each filter class
|
// FIXME: Generate filter card for each filter class
|
||||||
const filterCard = document.createElement("span");
|
const filterCard = document.createElement("span");
|
||||||
filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter");
|
filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter");
|
||||||
filterCard.classList.add("button", "~" + (boolState ? "positive" : "critical"), "@high", "center", "ml-2", "mr-2");
|
filterCard.classList.add("button", "~" + (boolState ? "positive" : "critical"), "@high", "center", "ml-2", "mr-2", "mt-2");
|
||||||
filterCard.innerHTML = `
|
filterCard.innerHTML = `
|
||||||
<span class="font-bold mr-2">${queryFormat.name}</span>
|
<span class="font-bold mr-2">${queryFormat.name}</span>
|
||||||
<i class="text-2xl ri-${boolState? "checkbox" : "close"}-circle-fill"></i>
|
<i class="text-2xl ri-${boolState? "checkbox" : "close"}-circle-fill"></i>
|
||||||
@ -1004,7 +1004,7 @@ export class accountsList {
|
|||||||
if (queryFormat.string) {
|
if (queryFormat.string) {
|
||||||
const filterCard = document.createElement("span");
|
const filterCard = document.createElement("span");
|
||||||
filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter");
|
filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter");
|
||||||
filterCard.classList.add("button", "~neutral", "@low", "center", "ml-2", "mr-2", "h-full");
|
filterCard.classList.add("button", "~neutral", "@low", "center", "ml-2", "mr-2", "mt-2", "h-full");
|
||||||
filterCard.innerHTML = `
|
filterCard.innerHTML = `
|
||||||
<span class="font-bold mr-2">${queryFormat.name}:</span> "${split[1]}"
|
<span class="font-bold mr-2">${queryFormat.name}:</span> "${split[1]}"
|
||||||
`;
|
`;
|
||||||
@ -1048,7 +1048,7 @@ export class accountsList {
|
|||||||
|
|
||||||
const filterCard = document.createElement("span");
|
const filterCard = document.createElement("span");
|
||||||
filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter");
|
filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter");
|
||||||
filterCard.classList.add("button", "~neutral", "@low", "center", "ml-2", "mr-2", "h-full");
|
filterCard.classList.add("button", "~neutral", "@low", "center", "ml-2", "mr-2", "mt-2", "h-full");
|
||||||
filterCard.innerHTML = `
|
filterCard.innerHTML = `
|
||||||
<span class="font-bold mr-2">${queryFormat.name}:</span> ${(compareType == 1) ? window.lang.strings("after")+" " : ((compareType == -1) ? window.lang.strings("before")+" " : "")}${split[1]}
|
<span class="font-bold mr-2">${queryFormat.name}:</span> ${(compareType == 1) ? window.lang.strings("after")+" " : ((compareType == -1) ? window.lang.strings("before")+" " : "")}${split[1]}
|
||||||
`;
|
`;
|
||||||
@ -1138,10 +1138,10 @@ export class accountsList {
|
|||||||
this._modifySettings.classList.add("unfocused");
|
this._modifySettings.classList.add("unfocused");
|
||||||
this._deleteUser.classList.add("unfocused");
|
this._deleteUser.classList.add("unfocused");
|
||||||
if (window.emailEnabled || window.telegramEnabled) {
|
if (window.emailEnabled || window.telegramEnabled) {
|
||||||
this._announceButton.classList.add("unfocused");
|
this._announceButton.parentElement.classList.add("unfocused");
|
||||||
}
|
}
|
||||||
this._extendExpiry.classList.add("unfocused");
|
this._extendExpiry.classList.add("unfocused");
|
||||||
this._disableEnable.classList.add("unfocused");
|
this._disableEnable.parentElement.classList.add("unfocused");
|
||||||
this._sendPWR.classList.add("unfocused");
|
this._sendPWR.classList.add("unfocused");
|
||||||
} else {
|
} else {
|
||||||
let visibleCount = 0;
|
let visibleCount = 0;
|
||||||
@ -1161,7 +1161,7 @@ export class accountsList {
|
|||||||
this._deleteUser.classList.remove("unfocused");
|
this._deleteUser.classList.remove("unfocused");
|
||||||
this._deleteUser.textContent = window.lang.quantity("deleteUser", list.length);
|
this._deleteUser.textContent = window.lang.quantity("deleteUser", list.length);
|
||||||
if (window.emailEnabled || window.telegramEnabled) {
|
if (window.emailEnabled || window.telegramEnabled) {
|
||||||
this._announceButton.classList.remove("unfocused");
|
this._announceButton.parentElement.classList.remove("unfocused");
|
||||||
}
|
}
|
||||||
let anyNonExpiries = list.length == 0 ? true : false;
|
let anyNonExpiries = list.length == 0 ? true : false;
|
||||||
let allNonExpiries = true;
|
let allNonExpiries = true;
|
||||||
@ -1179,7 +1179,7 @@ export class accountsList {
|
|||||||
}
|
}
|
||||||
if (showDisableEnable && this._users[id].disabled != this._shouldEnable) {
|
if (showDisableEnable && this._users[id].disabled != this._shouldEnable) {
|
||||||
showDisableEnable = false;
|
showDisableEnable = false;
|
||||||
this._disableEnable.classList.add("unfocused");
|
this._disableEnable.parentElement.classList.add("unfocused");
|
||||||
}
|
}
|
||||||
if (!showDisableEnable && anyNonExpiries) { break; }
|
if (!showDisableEnable && anyNonExpiries) { break; }
|
||||||
if (!this._users[id].lastNotifyMethod()) {
|
if (!this._users[id].lastNotifyMethod()) {
|
||||||
@ -1215,7 +1215,7 @@ export class accountsList {
|
|||||||
this._disableEnable.classList.add("~warning");
|
this._disableEnable.classList.add("~warning");
|
||||||
this._disableEnable.classList.remove("~positive");
|
this._disableEnable.classList.remove("~positive");
|
||||||
}
|
}
|
||||||
this._disableEnable.classList.remove("unfocused");
|
this._disableEnable.parentElement.classList.remove("unfocused");
|
||||||
this._disableEnable.textContent = message;
|
this._disableEnable.textContent = message;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1764,13 +1764,13 @@ export class accountsList {
|
|||||||
this._deleteUser.classList.add("unfocused");
|
this._deleteUser.classList.add("unfocused");
|
||||||
|
|
||||||
this._announceButton.onclick = this.announce;
|
this._announceButton.onclick = this.announce;
|
||||||
this._announceButton.classList.add("unfocused");
|
this._announceButton.parentElement.classList.add("unfocused");
|
||||||
|
|
||||||
this._extendExpiry.onclick = () => { this.extendExpiry(); };
|
this._extendExpiry.onclick = () => { this.extendExpiry(); };
|
||||||
this._extendExpiry.classList.add("unfocused");
|
this._extendExpiry.classList.add("unfocused");
|
||||||
|
|
||||||
this._disableEnable.onclick = this.enableDisableUsers;
|
this._disableEnable.onclick = this.enableDisableUsers;
|
||||||
this._disableEnable.classList.add("unfocused");
|
this._disableEnable.parentElement.classList.add("unfocused");
|
||||||
|
|
||||||
this._enableExpiry.onclick = () => { this.extendExpiry(true); };
|
this._enableExpiry.onclick = () => { this.extendExpiry(true); };
|
||||||
this._enableExpiryNotify.onchange = () => {
|
this._enableExpiryNotify.onchange = () => {
|
||||||
@ -1796,17 +1796,19 @@ export class accountsList {
|
|||||||
this._deleteNotify.checked = false;
|
this._deleteNotify.checked = false;
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
this._search.oninput = () => {
|
const onchange = () => {
|
||||||
const query = this._search.value;
|
const query = this._search.value;
|
||||||
if (!query) {
|
if (!query) {
|
||||||
this.setVisibility(this._ordering, true);
|
// this.setVisibility(this._ordering, true);
|
||||||
this._inSearch = false;
|
this._inSearch = false;
|
||||||
} else {
|
} else {
|
||||||
this._inSearch = true;
|
this._inSearch = true;
|
||||||
this.setVisibility(this.search(query), true);
|
// this.setVisibility(this.search(query), true);
|
||||||
}
|
}
|
||||||
|
this.setVisibility(this.search(query), true);
|
||||||
this._checkCheckCount();
|
this._checkCheckCount();
|
||||||
};
|
};
|
||||||
|
this._search.oninput = onchange;
|
||||||
|
|
||||||
this._announceTextarea.onkeyup = this.loadPreview;
|
this._announceTextarea.onkeyup = this.loadPreview;
|
||||||
addDiscord = newDiscordSearch(window.lang.strings("linkDiscord"), window.lang.strings("searchDiscordUser"), window.lang.strings("add"), (user: DiscordUser, id: string) => {
|
addDiscord = newDiscordSearch(window.lang.strings("linkDiscord"), window.lang.strings("searchDiscordUser"), window.lang.strings("add"), (user: DiscordUser, id: string) => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user