summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-04-05 14:46:21 -0400
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-04-05 14:46:45 -0400
commitdd9d50bfc194aa4c3d8e99188cfac0214476f868 (patch)
tree65668ccc5bdd20eecc00c3b49a4e0c5ce1d4ebe6
parent1b97629cd8014d7523a12ae857305e65a6d06672 (diff)
Update settings page to display additional information
-rw-r--r--ext/bg/css/settings.css37
-rw-r--r--ext/bg/js/settings/dictionaries.js50
-rw-r--r--ext/bg/settings.html4
3 files changed, 91 insertions, 0 deletions
diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index d686e8f8..6344bd38 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -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 {
diff --git a/ext/bg/js/settings/dictionaries.js b/ext/bg/js/settings/dictionaries.js
index 5e59cc3d..b9e4fe82 100644
--- a/ext/bg/js/settings/dictionaries.js
+++ b/ext/bg/js/settings/dictionaries.js
@@ -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 {
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 237162c7..1297a9cc 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -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>