From 1588f6210cb41c0a9d9defaa3e0ae71754337cd5 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 18 Nov 2020 20:15:30 -0500 Subject: [PATCH] Display and query parser layout (#1043) * Update query parser text assignment * Update how padding is used * Hide query parser container by default --- ext/bg/js/query-parser.js | 31 ++++++++++++++++++------------- ext/bg/search.html | 2 +- ext/mixed/css/display.css | 31 +++++++++++++++---------------- ext/mixed/css/search.css | 5 +++-- ext/mixed/js/display.js | 37 ++++++++++++++++++++++++------------- 5 files changed, 61 insertions(+), 45 deletions(-) diff --git a/ext/bg/js/query-parser.js b/ext/bg/js/query-parser.js index 3217316d..16af77b2 100644 --- a/ext/bg/js/query-parser.js +++ b/ext/bg/js/query-parser.js @@ -21,12 +21,13 @@ */ class QueryParser extends EventDispatcher { - constructor({getOptionsContext, progressIndicatorVisible, documentUtil}) { + constructor({getOptionsContext, documentUtil}) { super(); this._getOptionsContext = getOptionsContext; - this._progressIndicatorVisible = progressIndicatorVisible; - this._selectedParser = null; this._documentUtil = documentUtil; + this._text = ''; + this._setTextToken = null; + this._selectedParser = null; this._parseResults = []; this._queryParser = document.querySelector('#query-parser-content'); this._queryParserModeContainer = document.querySelector('#query-parser-mode-container'); @@ -43,6 +44,10 @@ class QueryParser extends EventDispatcher { }); } + get text() { + return this._text; + } + prepare() { this._textScanner.prepare(); this._textScanner.on('searched', this._onSearched.bind(this)); @@ -63,18 +68,18 @@ class QueryParser extends EventDispatcher { } async setText(text) { - const overrideToken = this._progressIndicatorVisible.setOverride(true); - try { - this._setPreview(text); + this._text = text; + this._setPreview(text); - this._parseResults = await api.textParse(text, this._getOptionsContext()); - this._refreshSelectedParser(); + const token = {}; + this._setTextToken = token; + this._parseResults = await api.textParse(text, this._getOptionsContext()); + if (this._setTextToken !== token) { return; } - this._renderParserSelect(); - this._renderParseResult(); - } finally { - this._progressIndicatorVisible.clearOverride(overrideToken); - } + this._refreshSelectedParser(); + + this._renderParserSelect(); + this._renderParseResult(); } // Private diff --git a/ext/bg/search.html b/ext/bg/search.html index 7ba479ba..caa9106f 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -47,7 +47,7 @@ -
+ diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index 24d143fc..67017306 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -36,7 +36,11 @@ --spinner-size-no-units: 32; --action-button-size-no-units: 16; - --entry-padding: 0.72em; + --list-margin: 0.72em; + --main-content-vertical-padding: 0em; + --main-content-horizontal-padding: 0em; + --entry-horizontal-padding: 0.72em; + --entry-vertical-padding: 0.72em; --sidebar-width-no-units: 40; --sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units))); @@ -178,7 +182,7 @@ body { } ol, ul { margin-top: 0; - margin-bottom: var(--entry-padding); + margin-bottom: var(--list-padding); } #spinner { position: fixed; @@ -245,6 +249,7 @@ a { } .content-body-inner { width: 100%; + padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding); } @@ -371,22 +376,20 @@ button.sidebar-button.danger:hover .sidebar-button-icon { /* Search page */ +#query-parser-container { + padding-left: var(--entry-horizontal-padding); + padding-right: var(--entry-horizontal-padding); + padding-bottom: 0.25em; + border-bottom: var(--expression-thin-border-size) solid var(--light-border-color); +} #query-parser-content { margin-top: 0.5em; font-size: var(--query-parser-font-size); white-space: pre-wrap; } -#query-parser-content:not(:empty) { - padding-bottom: 0.25em; - border-bottom: var(--expression-thin-border-size) solid var(--light-border-color); -} #query-parser-content[data-term-spacing=true] .query-parser-term { margin-right: 0.2em; } -:root[data-yomichan-page=float] #query-parser-container { - padding-left: var(--entry-padding); - padding-right: var(--entry-padding); -} /* Action buttons */ @@ -516,12 +519,8 @@ button.action-button { /* Entries */ .entry { - padding-top: var(--entry-padding); - padding-bottom: var(--entry-padding); -} -:root[data-yomichan-page=float] .entry { - padding-left: var(--entry-padding); - padding-right: var(--entry-padding); + padding: var(--entry-vertical-padding) var(--entry-horizontal-padding); + position: relative; } .term-expression .kanji-link { border-bottom: var(--expression-thin-border-size) dashed var(--dark-border-color); diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css index 997c089f..d9024172 100644 --- a/ext/mixed/css/search.css +++ b/ext/mixed/css/search.css @@ -17,9 +17,11 @@ /* Variables */ :root { + --main-content-horizontal-padding: 0.72em; + --entry-horizontal-padding: 0; + --padding: 10px; --main-content-size: 700px; - --main-content-padding: 10px; --shadow-color: rgba(0, 0, 0, 0.185); --shadow-vertical: 0 1px 4px 0 var(--shadow-color), 0 2px 2px 0 var(--shadow-color); @@ -231,7 +233,6 @@ label.toggle { /* Content layout */ .content-body-inner { width: var(--main-content-size); - padding: 0 var(--main-content-padding); max-width: 100%; box-sizing: border-box; margin: 0 auto; diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 7068d424..715b3f3d 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -76,7 +76,6 @@ class Display extends EventDispatcher { this._queryParserContainer = document.querySelector('#query-parser-container'); this._queryParser = new QueryParser({ getOptionsContext: this.getOptionsContext.bind(this), - progressIndicatorVisible: this._progressIndicatorVisible, documentUtil: this._documentUtil }); this._mode = null; @@ -154,7 +153,7 @@ class Display extends EventDispatcher { set queryParserVisible(value) { this._queryParserVisible = value; - this._updateQueryParserVisibility(); + this._updateQueryParser(); } get mode() { @@ -466,7 +465,7 @@ class Display extends EventDispatcher { const fullVisible = urlSearchParams.get('full-visible'); this._queryParserVisibleOverride = (fullVisible === null ? null : (fullVisible !== 'false')); - this._updateQueryParserVisibility(); + this._updateQueryParser(); this._closePopups(); this._setEventListenersActive(false); @@ -862,7 +861,7 @@ class Display extends EventDispatcher { async _setContentTermsOrKanji(token, isTerms, urlSearchParams, eventArgs) { let source = urlSearchParams.get('query'); if (!source) { - this._setQueryParserText(''); + this._setFullQuery(''); return false; } @@ -890,7 +889,7 @@ class Display extends EventDispatcher { source = this.postProcessQuery(source); let full = urlSearchParams.get('full'); full = (full === null ? source : this.postProcessQuery(full)); - this._setQueryParserText(full); + this._setFullQuery(full); this._setTitleText(source); let {definitions} = content; @@ -990,11 +989,27 @@ class Display extends EventDispatcher { } } - _setQueryParserText(text) { - if (this._fullQuery === text) { return; } + _setFullQuery(text) { this._fullQuery = text; - if (!this._isQueryParserVisible()) { return; } - this._queryParser.setText(text); + this._updateQueryParser(); + } + + _updateQueryParser() { + const text = this._fullQuery; + const visible = this._isQueryParserVisible(); + this._queryParserContainer.hidden = !visible || text.length === 0; + if (visible && this._queryParser.text !== text) { + this._setQueryParserText(text); + } + } + + async _setQueryParserText(text) { + const overrideToken = this._progressIndicatorVisible.setOverride(true); + try { + await this._queryParser.setText(text); + } finally { + this._progressIndicatorVisible.clearOverride(overrideToken); + } } _setTitleText(text) { @@ -1366,10 +1381,6 @@ class Display extends EventDispatcher { ); } - _updateQueryParserVisibility() { - this._queryParserContainer.hidden = !this._isQueryParserVisible(); - } - _closePopups() { yomichan.trigger('closePopups'); }