Dictionary display updates (#1146)
* Display dictionary-list as flex * Move styles * Move enabled toggle * Update details * Disable sorting based on priority * Update styles * Update title color when disabled * Update display style of secondary search dictionaries
This commit is contained in:
toasted-nutbread
GitHub
parent
7dd06e1a64
commit
4f6309842f
@ -1903,6 +1903,28 @@ body.preview-sidebar-visible .fab-container-item.fab-container-item-popup-previe
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dictionary-info {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
.dictionary-info-label {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.dictionary-title {
|
||||
color: inherit;
|
||||
transition: color var(--animation-duration) ease-in-out;
|
||||
}
|
||||
.dictionary-item[data-enabled=false] .dictionary-title {
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
|
||||
.dictionary-list {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.dictionary-list>.settings-item,
|
||||
.dictionary-list>.settings-item+.settings-item {
|
||||
margin-left: calc(var(--modal-padding-horizontal) * -1);
|
||||
|
||||
@ -74,6 +74,7 @@ class DictionaryEntry {
|
||||
}
|
||||
if (enabledCheckbox !== null) {
|
||||
enabledCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'enabled']);
|
||||
this._eventListeners.addEventListener(enabledCheckbox, 'settingChanged', this._onEnabledChanged.bind(this), false);
|
||||
}
|
||||
if (priorityInput !== null) {
|
||||
priorityInput.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'priority']);
|
||||
@ -91,9 +92,6 @@ class DictionaryEntry {
|
||||
if (detailsToggleLink !== null && this._detailsContainer !== null) {
|
||||
this._eventListeners.addEventListener(detailsToggleLink, 'click', this._onDetailsToggleLinkClicked.bind(this), false);
|
||||
}
|
||||
if (priorityInput !== null) {
|
||||
this._eventListeners.addEventListener(priorityInput, 'settingChanged', this._onPriorityChanged.bind(this), false);
|
||||
}
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
@ -122,7 +120,7 @@ class DictionaryEntry {
|
||||
const {detail: {menu}} = e;
|
||||
const showDetails = menu.querySelector('.popup-menu-item[data-menu-action="showDetails"]');
|
||||
const hideDetails = menu.querySelector('.popup-menu-item[data-menu-action="hideDetails"]');
|
||||
const hasDetails = (this._detailsContainer !== null && (this._hasDetails || this._hasCounts));
|
||||
const hasDetails = (this._detailsContainer !== null);
|
||||
const detailsVisible = (hasDetails && !this._detailsContainer.hidden);
|
||||
if (showDetails !== null) {
|
||||
showDetails.hidden = detailsVisible;
|
||||
@ -154,9 +152,9 @@ class DictionaryEntry {
|
||||
this._detailsContainer.hidden = !this._detailsContainer.hidden;
|
||||
}
|
||||
|
||||
_onPriorityChanged(e) {
|
||||
_onEnabledChanged(e) {
|
||||
const {detail: {value}} = e;
|
||||
this._node.style.order = `${-value}`;
|
||||
this._node.dataset.enabled = `${value}`;
|
||||
}
|
||||
|
||||
_setupDetails(detailsTable) {
|
||||
|
||||
@ -24,6 +24,7 @@ class SecondarySearchDictionaryController {
|
||||
this._settingsController = settingsController;
|
||||
this._getDictionaryInfoToken = null;
|
||||
this._container = null;
|
||||
this._eventListeners = new EventListenerCollection();
|
||||
}
|
||||
|
||||
async prepare() {
|
||||
@ -37,6 +38,8 @@ class SecondarySearchDictionaryController {
|
||||
// Private
|
||||
|
||||
async _onDatabaseUpdated() {
|
||||
this._eventListeners.removeAllEventListeners();
|
||||
|
||||
const token = {};
|
||||
this._getDictionaryInfoToken = token;
|
||||
const dictionaries = await this._settingsController.getDictionaryInfo();
|
||||
@ -44,18 +47,27 @@ class SecondarySearchDictionaryController {
|
||||
this._getDictionaryInfoToken = null;
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (const {title} of dictionaries) {
|
||||
for (const {title, revision} of dictionaries) {
|
||||
const node = this._settingsController.instantiateTemplate('secondary-search-dictionary');
|
||||
fragment.appendChild(node);
|
||||
|
||||
const nameNode = node.querySelector('.dictionary-name');
|
||||
const nameNode = node.querySelector('.dictionary-title');
|
||||
nameNode.textContent = title;
|
||||
|
||||
const versionNode = node.querySelector('.dictionary-version');
|
||||
versionNode.textContent = `rev.${revision}`;
|
||||
|
||||
const toggle = node.querySelector('.dictionary-allow-secondary-searches');
|
||||
toggle.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'allowSecondarySearches']);
|
||||
this._eventListeners.addEventListener(toggle, 'settingChanged', this._onEnabledChanged.bind(this, node), false);
|
||||
}
|
||||
|
||||
this._container.textContent = '';
|
||||
this._container.appendChild(fragment);
|
||||
}
|
||||
|
||||
_onEnabledChanged(node, e) {
|
||||
const {detail: {value}} = e;
|
||||
node.dataset.enabled = `${value}`;
|
||||
}
|
||||
}
|
||||
@ -1562,7 +1562,7 @@
|
||||
|
||||
|
||||
<!-- Dictionary modals -->
|
||||
<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-full">
|
||||
<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
|
||||
<div class="modal-header"><div class="modal-title">Dictionaries</div></div>
|
||||
<div class="modal-body">
|
||||
<div class="settings-item">
|
||||
@ -2214,10 +2214,13 @@
|
||||
|
||||
|
||||
<!-- Dictionary templates -->
|
||||
<template id="dictionary-template"><div class="settings-item">
|
||||
<template id="dictionary-template"><div class="settings-item dictionary-item">
|
||||
<div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></div>
|
||||
<div class="settings-item-label dictionary-info">
|
||||
<label class="toggle"><input type="checkbox" class="dictionary-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
||||
<span class="dictionary-info-label"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<button class="icon-button dictionary-menu-button" data-menu="dictionary-menu" data-menu-position="below,left"><span class="icon-button-inner"><span class="icon-button-icon" data-icon="kebab-menu"></span></span></button>
|
||||
@ -2229,14 +2232,15 @@
|
||||
This dictionary is outdated and may not support new extension features.
|
||||
Re-import the dictionary to enable support for the latest features.
|
||||
</div></div>
|
||||
<div class="settings-item"><div class="settings-item-inner">
|
||||
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">Enabled</div>
|
||||
<div class="settings-item-label">Priority</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<label class="toggle"><input type="checkbox" class="dictionary-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
||||
<input type="number" step="1" class="short-height dictionary-priority">
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="dictionary-details" hidden>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
@ -2256,18 +2260,11 @@
|
||||
<p><a class="more-toggle" data-parent-distance="3">Hide…</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">Priority</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<input type="number" step="1" class="short-height dictionary-priority">
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="settings-item dictionary-details" hidden><div class="settings-item-children">
|
||||
<div class="settings-item"><div class="settings-item-children">
|
||||
<div class="dictionary-details-table"></div>
|
||||
<div class="dictionary-counts"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></template>
|
||||
@ -2298,12 +2295,12 @@
|
||||
<button class="popup-menu-item" data-menu-action="delete">Delete</button>
|
||||
</div></div></template>
|
||||
|
||||
<template id="secondary-search-dictionary-template"><div class="settings-item"><div class="settings-item-inner">
|
||||
<template id="secondary-search-dictionary-template"><div class="settings-item dictionary-item"><div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label dictionary-name"></div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<div class="settings-item-label dictionary-info">
|
||||
<label class="toggle"><input type="checkbox" class="dictionary-allow-secondary-searches"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
||||
<span class="dictionary-info-label"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div></div></template>
|
||||
|
||||
|
||||
@ -18,14 +18,6 @@
|
||||
width: calc(1em * (16 / var(--font-size-default-no-units)));
|
||||
height: calc(1em * (16 / var(--font-size-default-no-units)));
|
||||
top: calc(1em * (3 / var(--font-size-default-no-units)));
|
||||
}
|
||||
.dictionary-info {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
.dictionary-info-label {
|
||||
margin-left: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -314,7 +306,7 @@
|
||||
|
||||
|
||||
<!-- Dictionary templates -->
|
||||
<template id="dictionary-template"><div class="settings-item">
|
||||
<template id="dictionary-template"><div class="settings-item dictionary-item">
|
||||
<div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label dictionary-info">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user