diff options
| -rw-r--r-- | ext/bg/css/settings.css | 37 | ||||
| -rw-r--r-- | ext/bg/js/settings/dictionaries.js | 50 | ||||
| -rw-r--r-- | ext/bg/settings.html | 4 |
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> |