Update settings page to display additional information

This commit is contained in:
toasted-nutbread 2020-04-05 14:46:21 -04:00
parent 1b97629cd8
commit dd9d50bfc1
3 changed files with 91 additions and 0 deletions

View File

@ -235,6 +235,43 @@ html:root[data-operating-system=openbsd] [data-hide-for-operating-system~=openbs
display: none;
}
.dict-details-container {
margin: 0.5em 0;
}
.dict-details-toggle-link {
cursor: pointer;
}
.dict-details {
margin-left: 1em;
}
.dict-details-table {
display: table;
width: 100%
}
.dict-details-entry {
display: table-row;
}
.dict-details-entry+.dict-details-entry>* {
padding-top: 0.25em;
}
.dict-details-entry-label {
display: table-cell;
font-weight: bold;
white-space: nowrap;
padding-right: 0.5em;
}
.dict-details-entry-info {
display: table-cell;
white-space: pre-line;
}
@media screen and (max-width: 740px) {
.col-xs-6 {

View File

@ -199,11 +199,16 @@ class SettingsDictionaryEntryUI {
this.allowSecondarySearchesCheckbox = this.content.querySelector('.dict-allow-secondary-searches');
this.priorityInput = this.content.querySelector('.dict-priority');
this.deleteButton = this.content.querySelector('.dict-delete-button');
this.detailsToggleLink = this.content.querySelector('.dict-details-toggle-link');
this.detailsContainer = this.content.querySelector('.dict-details');
this.detailsTable = this.content.querySelector('.dict-details-table');
if (this.dictionaryInfo.version < 3) {
this.content.querySelector('.dict-outdated').hidden = false;
}
this.setupDetails(dictionaryInfo);
this.content.querySelector('.dict-title').textContent = this.dictionaryInfo.title;
this.content.querySelector('.dict-revision').textContent = `rev.${this.dictionaryInfo.revision}`;
this.content.querySelector('.dict-prefix-wildcard-searches-supported').checked = !!this.dictionaryInfo.prefixWildcardsSupported;
@ -214,6 +219,45 @@ class SettingsDictionaryEntryUI {
this.eventListeners.addEventListener(this.allowSecondarySearchesCheckbox, 'change', this.onAllowSecondarySearchesChanged.bind(this), false);
this.eventListeners.addEventListener(this.priorityInput, 'change', this.onPriorityChanged.bind(this), false);
this.eventListeners.addEventListener(this.deleteButton, 'click', this.onDeleteButtonClicked.bind(this), false);
this.eventListeners.addEventListener(this.detailsToggleLink, 'click', this.onDetailsToggleLinkClicked.bind(this), false);
}
setupDetails(dictionaryInfo) {
const targets = [
['Author', 'author'],
['URL', 'url'],
['Description', 'description'],
['Attribution', 'attribution']
];
let count = 0;
for (const [label, key] of targets) {
const info = dictionaryInfo[key];
if (typeof info !== 'string') { continue; }
const n1 = document.createElement('div');
n1.className = 'dict-details-entry';
n1.dataset.type = key;
const n2 = document.createElement('span');
n2.className = 'dict-details-entry-label';
n2.textContent = `${label}:`;
n1.appendChild(n2);
const n3 = document.createElement('span');
n3.className = 'dict-details-entry-info';
n3.textContent = info;
n1.appendChild(n3);
this.detailsTable.appendChild(n1);
++count;
}
if (count === 0) {
this.detailsContainer.hidden = true;
this.detailsToggleLink.hidden = true;
}
}
cleanup() {
@ -318,6 +362,12 @@ class SettingsDictionaryEntryUI {
document.querySelector('#dict-remove-modal-dict-name').textContent = title;
$(n).modal('show');
}
onDetailsToggleLinkClicked(e) {
e.preventDefault();
this.detailsContainer.hidden = !this.detailsContainer.hidden;
}
}
class SettingsDictionaryExtraUI {

View File

@ -674,6 +674,10 @@
<label class="dict-result-priority-label">Result priority</label>
<input type="number" class="form-control dict-priority">
</div>
<div class="dict-details-container">
<a class="dict-details-toggle-link">Details...</a>
<div class="dict-details" hidden><div class="dict-details-table"></div></div>
</div>
<div class="dict-delete-table">
<div>
<button class="btn btn-default dict-delete-button">Delete Dictionary</button>