aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/bg/js/query-parser.js39
-rw-r--r--ext/bg/search.html5
-rw-r--r--ext/fg/float.html4
-rw-r--r--ext/mixed/css/search.css48
4 files changed, 78 insertions, 18 deletions
diff --git a/ext/bg/js/query-parser.js b/ext/bg/js/query-parser.js
index 698a5cfe..0c7b381f 100644
--- a/ext/bg/js/query-parser.js
+++ b/ext/bg/js/query-parser.js
@@ -29,7 +29,8 @@ class QueryParser extends EventDispatcher {
this._documentUtil = documentUtil;
this._parseResults = [];
this._queryParser = document.querySelector('#query-parser-content');
- this._queryParserSelect = document.querySelector('#query-parser-select-container');
+ this._queryParserModeContainer = document.querySelector('#query-parser-mode-container');
+ this._queryParserModeSelect = document.querySelector('#query-parser-mode-select');
this._textScanner = new TextScanner({
node: this._queryParser,
ignoreElements: () => [],
@@ -45,6 +46,7 @@ class QueryParser extends EventDispatcher {
prepare() {
this._textScanner.prepare();
this._textScanner.on('searched', this._onSearched.bind(this));
+ this._queryParserModeSelect.addEventListener('change', this._onParserChange.bind(this), false);
}
setOptions({selectedParser, termSpacing, scanning}) {
@@ -94,7 +96,7 @@ class QueryParser extends EventDispatcher {
}
_onParserChange(e) {
- const value = e.target.value;
+ const value = e.currentTarget.value;
this._setSelectedParser(value);
}
@@ -128,13 +130,11 @@ class QueryParser extends EventDispatcher {
}
_renderParserSelect() {
- this._queryParserSelect.textContent = '';
- if (this._parseResults.length > 1) {
- const selectedParser = this._selectedParser;
- const select = this._createParserSelect(this._parseResults, selectedParser);
- select.addEventListener('change', this._onParserChange.bind(this));
- this._queryParserSelect.appendChild(select);
+ const visible = (this._parseResults.length > 1);
+ if (visible) {
+ this._updateParserModeSelect(this._queryParserModeSelect, this._parseResults, this._selectedParser);
}
+ this._queryParserModeContainer.hidden = !visible;
}
_renderParseResult() {
@@ -144,12 +144,13 @@ class QueryParser extends EventDispatcher {
this._queryParser.appendChild(this._createParseResult(parseResult.content, false));
}
- _createParserSelect(parseResults, selectedParser) {
- const select = document.createElement('select');
- select.className = 'query-parser-select form-control';
+ _updateParserModeSelect(select, parseResults, selectedParser) {
+ const fragment = document.createDocumentFragment();
+
+ let index = 0;
+ let selectedIndex = -1;
for (const parseResult of parseResults) {
const option = document.createElement('option');
- option.className = 'query-parser-select-option';
option.value = parseResult.id;
switch (parseResult.source) {
case 'scanning-parser':
@@ -159,13 +160,21 @@ class QueryParser extends EventDispatcher {
option.textContent = `MeCab: ${parseResult.dictionary}`;
break;
default:
- option.textContent = 'Unrecognized dictionary';
+ option.textContent = `Unknown source: ${parseResult.source}`;
break;
}
option.defaultSelected = selectedParser === parseResult.id;
- select.appendChild(option);
+ fragment.appendChild(option);
+
+ if (selectedParser === parseResult.id) {
+ selectedIndex = index;
+ }
+ ++index;
}
- return select;
+
+ select.textContent = '';
+ select.appendChild(fragment);
+ select.selectedIndex = selectedIndex;
}
_createParseResult(terms, preview) {
diff --git a/ext/bg/search.html b/ext/bg/search.html
index bb5dc421..29594eae 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -32,6 +32,10 @@
<label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
<span class="search-option-label">Clipboard monitor</span>
</label>
+ <div class="search-option" id="query-parser-mode-container" hidden>
+ <span class="search-option-pre-label">Parser:</span>
+ <select id="query-parser-mode-select"></select>
+ </div>
</div>
<div class="search-textbox-container">
<textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="false" autofocus></textarea>
@@ -42,7 +46,6 @@
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
<div class="scan-disable" id="query-parser-container">
- <div id="query-parser-select-container"></div>
<div id="query-parser-content"></div>
</div>
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 68ec09cd..e40a656b 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -23,7 +23,9 @@
</div></div><div class="navigation-header-spacer"></div>
<div class="scan-disable" id="query-parser-container" hidden>
- <div id="query-parser-select-container" class="input-group"></div>
+ <div class="search-option" id="query-parser-mode-container" hidden>
+ <select id="query-parser-mode-select"></select>
+ </div>
<div id="query-parser-content"></div>
</div>
diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css
index cd986233..066cd726 100644
--- a/ext/mixed/css/search.css
+++ b/ext/mixed/css/search.css
@@ -17,6 +17,7 @@
/* Variables */
:root {
+ --padding: 10px;
--main-content-size: 700px;
--main-content-padding: 10px;
--shadow-color: rgba(0, 0, 0, 0.185);
@@ -33,6 +34,11 @@
--animation-duration: 0s;
--animation-duration2: calc(var(--animation-duration) * 2);
+ --material-arrow-dimension1: 5px;
+ --material-arrow-dimension2: 10px;
+ --input-height: 32px;
+ --input-width-large: 200px;
+
--text-color-default: #222222;
--background-color: #ffffff;
--background-color-light: #ffffff;
@@ -95,6 +101,30 @@ h1 {
border-bottom: var(--thin-border-size) solid var(--separator-color1);
}
+/* Material design select */
+select {
+ width: var(--input-width-large);
+ height: var(--input-height);
+ line-height: var(--input-height);
+ border: 0;
+ border-radius: 0;
+ box-sizing: border-box;
+ padding: 0 0.5em;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-image: url(/mixed/img/material-down-arrow.svg);
+ background-repeat: no-repeat;
+ background-position: right var(--padding) center;
+ background-color: var(--input-background-color);
+ background-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
+ cursor: pointer;
+ outline: 0;
+}
+select::-ms-expand {
+ display: none;
+}
+
/* Material design toggle switch */
label.toggle {
cursor: default;
@@ -302,15 +332,31 @@ label.toggle {
align-items: center;
}
.search-option {
- display: flex;
flex: 0 1 auto;
margin: 0.5em 1em;
align-items: center;
cursor: pointer;
}
+.search-option:not([hidden]) {
+ display: flex;
+}
.search-option-label {
padding-left: 0.5em;
}
+.search-option-pre-label {
+ padding-right: 0.5em;
+}
+#query-parser-mode-container {
+ flex: 1 1 auto;
+}
+#query-parser-mode-container:not([hidden]) {
+ display: flex;
+}
+#query-parser-mode-select {
+ flex: 1 1 auto;
+ max-width: 220px;
+ min-width: 100px;
+}
/* Search styles */
#intro {