extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-18 19:20:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve auto suggest list structure

Browse Source
This commit is contained in:
zombieFox 2019-11-21 14:02:53 +00:00
parent f3ad49ad26
commit 106092235b
4 changed files with 46 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/css/auto-suggest.css
View File

@ -4,7 +4,7 @@
font-size: 1em; font-size: 1em;
} }
.auto-suggest-list { .auto-suggest {
background-color: rgb(var(--theme-gray-02)); background-color: rgb(var(--theme-gray-02));
margin-top: 0.5em; margin-top: 0.5em;
padding: 1em; padding: 1em;
@ -15,67 +15,57 @@
max-height: 40vh; max-height: 40vh;
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
overflow-y: auto; overflow-y: auto;
z-index: var(--z-index-auto-suggest-list); z-index: var(--z-index-auto-suggest);
display: flex;
flex-direction: row;
flex-wrap: wrap;
box-shadow: var(--layout-shadow-large); box-shadow: var(--layout-shadow-large);
} }
.auto-suggest-list-item { .auto-suggest-list {
flex-basis: 33.3333333333%; display: grid;
grid-template-columns: repeat(3, 1fr);
} }
.auto-suggest-list-item:not(:last-child) { .auto-suggest-item {
margin-bottom: 0; background-color: transparent;
}
.auto-suggest-link {
padding: 0.5em; padding: 0.5em;
margin: 0;
border: 0; border: 0;
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 6em;
display: flex; display: flex;
position: relative;
white-space: inherit;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: center;
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
} }
.auto-suggest-link:link, .auto-suggest-item:after {
.auto-suggest-link:visited { content: none;
color: rgb(var(--theme-gray-16));
text-decoration: none;
} }
.auto-suggest-link:hover { .auto-suggest-item:link,
background-color: rgb(var(--theme-gray-03)); .auto-suggest-item:visited {
color: rgb(var(--form-input-text-hover)); background-color: transparent;
outline: none; }
text-decoration: none;
.auto-suggest-item:hover {
box-shadow: var(--form-ring-hover); box-shadow: var(--form-ring-hover);
} }
.auto-suggest-link:focus { .auto-suggest-item:focus {
background-color: rgb(var(--theme-gray-01));
color: rgb(var(--form-input-text-focus-active));
outline: none;
text-decoration: none;
box-shadow: var(--form-ring-accent); box-shadow: var(--form-ring-accent);
} }
.auto-suggest-link:active {
color: rgb(var(--theme-style-text));
}
.auto-suggest-icon { .auto-suggest-icon {
font-size: 2em; font-size: 2em;
} }
.auto-suggest-icon-text { .auto-suggest-icon-text {
color: rgb(var(--theme-gray-08)); margin-top: 1em;
margin-top: 0.5em;
font-size: 0.6em; font-size: 0.6em;
text-align: center; text-align: center;
line-height: 1.6;
} }

2
src/css/variables.css
View File

@ -191,7 +191,7 @@
--z-index-shade: 5000; --z-index-shade: 5000;
--z-index-modal: 6000; --z-index-modal: 6000;
--z-index-menu: 7000; --z-index-menu: 7000;
--z-index-auto-suggest-list: 8000; --z-index-auto-suggest: 8000;
--z-index-dropdown: 9000; --z-index-dropdown: 9000;
--z-index-edge: 10000; --z-index-edge: 10000;
/* breakpoint */ /* breakpoint */

39
src/js/auto-suggest.js
View File

@ -177,49 +177,52 @@ var autoSuggest = (function() {
fontawesomeIcon: function() { fontawesomeIcon: function() {
suggestItems.forEach(function(arrayItem) { suggestItems.forEach(function(arrayItem) {
var li = helper.node("li|class:auto-suggest-list-item"); var li = helper.node("li|class:auto-suggest-list-item");
var anchor = helper.node("a|href:#,tabindex:1,class:auto-suggest-link"); var button = helper.node("button|tabindex:1,class:auto-suggest-item");
var icon = helper.node("span|class:auto-suggest-icon fa-" + arrayItem.name); var icon = helper.node("span|class:auto-suggest-icon fa-" + arrayItem.name);
if (arrayItem.styles.includes("solid")) { if (arrayItem.styles.includes("solid")) {
helper.addClass(icon, "fas"); helper.addClass(icon, "fas");
} else if (arrayItem.styles.includes("brands")) { } else if (arrayItem.styles.includes("brands")) {
helper.addClass(icon, "fab"); helper.addClass(icon, "fab");
}; };
anchor.addEventListener("click", function() { button.addEventListener("click", function() {
link.render.autoSuggestIconAction(arrayItem); link.render.autoSuggestIconAction(arrayItem);
}, false); }, false);
var text = helper.node("span:" + arrayItem.label + "|class:auto-suggest-icon-text"); var text = helper.node("span:" + arrayItem.label + "|class:auto-suggest-icon-text");
anchor.appendChild(icon); button.appendChild(icon);
anchor.appendChild(text); button.appendChild(text);
li.appendChild(anchor); li.appendChild(button);
list.appendChild(li); list.appendChild(li);
}); });
} }
}; };
action[_currentInputOptions.type](); action[_currentInputOptions.type]();
}; };
var _renderAutoSuggestList = function() { var _renderAutoSuggest = function() {
var autoSuggestWrapper = helper.e(".auto-suggest-wrapper"); var autoSuggestInput = helper.e(".auto-suggest-input");
var autoSuggest = helper.e(".auto-suggest");
var autoSuggestList = helper.e(".auto-suggest-list"); var autoSuggestList = helper.e(".auto-suggest-list");
if (autoSuggestList) { if (autoSuggest) {
while (autoSuggestList.lastChild) { while (autoSuggestList.lastChild) {
autoSuggestList.removeChild(autoSuggestList.lastChild); autoSuggestList.removeChild(autoSuggestList.lastChild);
}; };
} else { } else {
var style = { var box = {
left: autoSuggestWrapper.getBoundingClientRect().left, left: autoSuggestInput.getBoundingClientRect().left,
top: autoSuggestWrapper.getBoundingClientRect().bottom + window.scrollY, top: autoSuggestInput.getBoundingClientRect().bottom + window.scrollY,
width: autoSuggestWrapper.getBoundingClientRect().width width: autoSuggestInput.getBoundingClientRect().width
}; };
var autoSuggest = helper.node("div|class:auto-suggest list-unstyled");
var autoSuggestList = helper.node("ul|class:auto-suggest-list list-unstyled"); var autoSuggestList = helper.node("ul|class:auto-suggest-list list-unstyled");
body.appendChild(autoSuggestList); autoSuggest.appendChild(autoSuggestList);
autoSuggestList.setAttribute("style", "width: " + style.width + "px; top: " + style.top + "px; left: " + style.left + "px;"); body.appendChild(autoSuggest);
autoSuggest.setAttribute("style", "width: " + box.width + "px; top: " + box.top + "px; left: " + box.left + "px;");
documentEvent.add(); documentEvent.add();
}; };
_populateList(autoSuggestList); _populateList(autoSuggestList);
}; };
if (suggestItems.length > 0) { if (suggestItems.length > 0) {
_autoSuggestActive = true; _autoSuggestActive = true;
_renderAutoSuggestList(); _renderAutoSuggest();
} else { } else {
render.close(); render.close();
}; };
@ -227,9 +230,9 @@ var autoSuggest = (function() {
render.close = function() { render.close = function() {
mod.close(); mod.close();
var autoSuggestList = helper.e(".auto-suggest-list"); var autoSuggest = helper.e(".auto-suggest");
if (autoSuggestList) { if (autoSuggest) {
autoSuggestList.remove(); autoSuggest.remove();
documentEvent.remove(); documentEvent.remove();
_currentInputOptions = {}; _currentInputOptions = {};
_autoSuggestActive = false; _autoSuggestActive = false;

2
src/js/link.js
View File

@ -698,7 +698,7 @@ var link = (function() {
var displayIconLableIcon = helper.node("span|class:label-icon"); var displayIconLableIcon = helper.node("span|class:label-icon");
var displayIconFormIndent = helper.node("div|class:form-indent"); var displayIconFormIndent = helper.node("div|class:form-indent");
var displayIconInputWrap = helper.node("div|class:input-wrap"); var displayIconInputWrap = helper.node("div|class:input-wrap");
var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-wrapper"); var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-input");
var displayIconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled"); var displayIconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon disabled,tabindex:-1"); var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon disabled,tabindex:-1");
var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled"); var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");