Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-07-05 11:37:01 +02:00
Code Issues Releases Wiki Activity

Keep search input field visuals consistent

Browse Source 
Related feedback:
https://github.com/uBlockOrigin/uBlock-issues/issues/3161#issuecomment-1992340127
This commit is contained in:
Raymond Hill 2024-03-13 10:57:56 -04:00
parent df5a6d1fcc
commit 6f54317bdf
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
6 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/3p-filters.html
View File

@ -44,7 +44,7 @@
<div class="rootstats expandable" data-key="*">
<span class="fa-icon listExpander">angle-up</span><span id="listsOfBlockedHostsPrompt"></span>
</div>
<div class="searchbar"><input type="search" spellcheck="false"/><span class="fa-icon">search</span></div>
<div class="searchfield"><input type="search" spellcheck="false" placeholder="" /><span class="fa-icon">search</span></div>
<div class="listEntries"></div>
<div class="li listEntry expandable" data-role="import">
<span class="detailbar">

16
src/css/3p-filters.css
View File

@ -54,23 +54,9 @@ body.working #actions button {
transform: rotate(180deg);
}
#lists .searchbar {
align-items: center;
column-gap: var(--default-gap-xxsmall);
display: inline-flex;
#lists .searchfield {
margin-block-start: calc(var(--font-size) * 0.75);
margin-inline-start: var(--checkbox-size);
position: relative;
}
#lists .searchbar input {
padding-inline-start: var(--default-gap-large);
}
#lists .searchbar .fa-icon {
color: var(--ink-4);
fill: var(--ink-4);
left: 4px;
position: absolute;
transform: none;
}
#lists.searchMode > .listEntries .listEntries,
#lists.searchMode > .listEntries .listEntry.searchMatch {

6
src/css/codemirror.css
View File

@ -160,7 +160,6 @@
}
.cm-search-widget {
align-items: center;
background-color: var(--cm-gutter-surface);
border-bottom: 1px solid var(--cm-gutter-border);
cursor: default;
@ -169,6 +168,7 @@
flex-shrink: 0;
flex-wrap: wrap;
justify-content: space-between;
line-height: 1.5;
padding: var(--default-gap-xsmall);
row-gap: var(--default-gap-xsmall);
user-select: none;
@ -186,7 +186,7 @@
.cm-search-widget .cm-maximize {
fill: none;
flex-grow: 0;
font-size: 140%;
font-size: 130%;
height: 1em;
stroke-width: 3px;
stroke: var(--ink-0);
@ -221,8 +221,6 @@ html:not(.mobile) .cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
transform: scale(1.2);
}
.cm-search-widget-input input {
border: 1px solid var(--cm-gutter-ink);
display: inline-flex;
flex-grow: 1;
max-width: 16em;
}

18
src/css/common.css
View File

@ -271,6 +271,24 @@ select {
padding: 2px;
}
.searchfield {
align-items: center;
column-gap: var(--default-gap-xxsmall);
display: inline-flex;
position: relative;
}
.searchfield .fa-icon {
color: var(--ink-4);
fill: var(--ink-4);
font-size: 1em !important;
left: 2px;
position: absolute;
transform: none;
}
.searchfield input:not(:placeholder-shown) ~ .fa-icon {
display: none;
}
.hidden {
display: none;
height: 0;

4
src/js/3p-filters.js
View File

@ -664,7 +664,7 @@ dom.on('#suspendUntilListsAreLoaded', 'change', userSettingCheckboxChanged);
/******************************************************************************/
const searchFilterLists = ( ) => {
const pattern = dom.prop('.searchbar input', 'value') || '';
const pattern = dom.prop('.searchfield input', 'value') || '';
dom.cl.toggle('#lists', 'searchMode', pattern !== '');
if ( pattern === '' ) { return; }
const reflectSearchMatches = listEntry => {
@ -707,7 +707,7 @@ const searchFilterLists = ( ) => {
const perListHaystack = new WeakMap();
dom.on('.searchbar input', 'input', searchFilterLists);
dom.on('.searchfield input', 'input', searchFilterLists);
/******************************************************************************/

5
src/js/codemirror/search.js
View File

@ -478,7 +478,10 @@ import { i18n$ } from '../i18n.js';
'<div class="cm-search-widget">',
'<span class="cm-maximize"><svg viewBox="0 0 40 40"><path d="M4,16V4h12M24,4H36V16M4,24V36H16M36,24V36H24" /><path d="M14 2.5v12h-12M38 14h-12v-12M14 38v-12h-12M26 38v-12h12" /></svg></span>&ensp;',
'<span class="cm-search-widget-input">',
'<input type="search" spellcheck="false" placeholder="&#x26B2;">&ensp;',
'<span class="searchfield">',
'<input type="search" spellcheck="false" placeholder="">',
'<span class="fa-icon">search</span>',
'</span>&ensp;',
'<span class="cm-search-widget-up cm-search-widget-button fa-icon">angle-up</span>&nbsp;',
'<span class="cm-search-widget-down cm-search-widget-button fa-icon fa-icon-vflipped">angle-up</span>&ensp;',
'<span class="cm-search-widget-count"></span>',