Windy/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent.git synced 2025-01-07 03:16:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

WebUI: Change filter inputs to type search

Browse Source 
Changing input type from text to search for all search and filter inputs
to enable user to easily clear input.

This feature is yet to be implemented in Firefox.
See tracking bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1654288

Also fix search icon horizontal positioning and minor input box paddings.

Closes #15481.
PR #22033.
This commit is contained in:
Patrik Elfström 2024-12-22 10:19:03 +01:00 committed by GitHub
parent e2db0bc866
commit 9709672b34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/webui/www/private/css/style.css
View File

@ -107,6 +107,7 @@ ol {
/* Forms */
input[type="search"],
input[type="text"],
input[type="number"],
input[type="password"],
@ -503,13 +504,13 @@ a.propButton img {
#torrentsFilterInput {
background-color: var(--color-background-default);
background-image: url("../images/edit-find.svg");
background-position: left;
background-position: 2px;
background-repeat: no-repeat;
background-size: 1.5em;
border: 1px solid var(--color-border-default);
border-radius: 3px;
min-width: 160px;
padding: 2px 12px 2px 25px;
min-width: 170px;
padding: 2px 2px 2px 25px;
}
#torrentsFilterRegexBox {
@ -555,7 +556,7 @@ a.propButton img {
#torrentFilesFilterInput {
background-image: url("../images/edit-find.svg");
background-position: left;
background-position: 1px;
background-repeat: no-repeat;
background-size: 1.5em;
margin-top: -1px;

2
src/webui/www/private/index.html
View File

@ -140,7 +140,7 @@
<div class="clear"></div>
</div>
<div id="torrentsFilterToolbar">
<input type="text" id="torrentsFilterInput" placeholder="QBT_TR(Filter torrent list...)QBT_TR[CONTEXT=MainWindow]" aria-label="QBT_TR(Filter torrent list...)QBT_TR[CONTEXT=MainWindow]" autocorrect="off" autocapitalize="none">
<input type="search" id="torrentsFilterInput" placeholder="QBT_TR(Filter torrent list...)QBT_TR[CONTEXT=MainWindow]" aria-label="QBT_TR(Filter torrent list...)QBT_TR[CONTEXT=MainWindow]" autocorrect="off" autocapitalize="none">
<input type="checkbox" id="torrentsFilterRegexBox">
<label for="torrentsFilterRegexBox" aria-label="QBT_TR(Use regular expression)QBT_TR[CONTEXT=MainWindow]" title="QBT_TR(Use regular expression)QBT_TR[CONTEXT=MainWindow]"></label>
<label for="torrentsFilterSelect">QBT_TR(Filter by:)QBT_TR[CONTEXT=MainWindow]</label>

6
src/webui/www/private/views/log.html
View File

@ -43,9 +43,9 @@
#filterTextInput {
background-image: url("../images/edit-find.svg");
background-repeat: no-repeat;
background-position: left;
background-position: 2px;
background-size: 1.5em;
padding: 2px 12px 2px 2em;
padding: 2px 2px 2px 2em;
margin-left: .3em;
width: 237px;
border: 1px solid var(--color-border-default);
@ -96,7 +96,7 @@
<option value="8">QBT_TR(Critical Messages)QBT_TR[CONTEXT=ExecutionLogWidget]</option>
</select>
<input type="text" id="filterTextInput" oninput="window.qBittorrent.Log.filterTextChanged()" placeholder="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" aria-label="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" autocomplete="off" autocorrect="off" autocapitalize="none">
<input type="search" id="filterTextInput" oninput="window.qBittorrent.Log.filterTextChanged()" placeholder="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" aria-label="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" autocomplete="off" autocorrect="off" autocapitalize="none">
<button type="button" title="Clear input" onclick="javascript:document.getElementById('filterTextInput').value='';window.qBittorrent.Log.filterTextChanged();">QBT_TR(Clear)QBT_TR[CONTEXT=ExecutionLogWidget]</button>
</div>

2
src/webui/www/private/views/propertiesToolbar.html
View File

@ -1,6 +1,6 @@
<div class="toolbarTabs">
<div id="torrentFilesFilterToolbar" class="invisible">
<input type="text" id="torrentFilesFilterInput" placeholder="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" aria-label="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" autocorrect="off" autocapitalize="none">
<input type="search" id="torrentFilesFilterInput" placeholder="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" aria-label="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" autocorrect="off" autocapitalize="none">
</div>
<menu id="propertiesTabs" class="tab-menu">
<li id="propGeneralLink">

10
src/webui/www/private/views/search.html
View File

@ -4,10 +4,10 @@
background-image: url("images/edit-find.svg");
background-repeat: no-repeat;
background-size: 1.5em;
background-position: left;
background-position: 3px;
border: 1px solid var(--color-border-default);
border-radius: 3px;
padding: 0 0 0 25px;
padding: 0 4px 0 25px;
}
#categorySelect {
@ -36,7 +36,7 @@
}
#searchInNameFilter {
width: 150px;
width: 160px;
margin-right: 20px;
}
@ -89,7 +89,7 @@
<div id="searchResults">
<div style="overflow: hidden; height: 60px;">
<div style="display: flex; flex-wrap: wrap; gap: 5px; margin: 20px 0 10px 0; height: 24px;">
<input type="text" id="searchPattern" class="searchInputField" placeholder="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocomplete="off" autocapitalize="none" oninput="qBittorrent.Search.onSearchPatternChanged()">
<input type="search" id="searchPattern" class="searchInputField" placeholder="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocomplete="off" autocapitalize="none" oninput="qBittorrent.Search.onSearchPatternChanged()">
<select id="categorySelect" class="searchInputField" aria-label="QBT_TR(Select category)QBT_TR[CONTEXT=SearchEngineWidget]" onchange="qBittorrent.Search.categorySelected()"></select>
<select id="pluginsSelect" class="searchInputField" aria-label="QBT_TR(Select plugins)QBT_TR[CONTEXT=SearchEngineWidget]" onchange="qBittorrent.Search.pluginSelected()"></select>
<button type="button" id="startSearchButton" class="searchInputField" onclick="qBittorrent.Search.startStopSearch()">
@ -132,7 +132,7 @@
</div>
<div id="searchResultsFilters" class="invisible">
<input type="text" id="searchInNameFilter" placeholder="QBT_TR(Filter)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Filter)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocapitalize="none">
<input type="search" id="searchInNameFilter" placeholder="QBT_TR(Filter)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Filter)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocapitalize="none">
<span>QBT_TR(Results)QBT_TR[CONTEXT=SearchEngineWidget] (QBT_TR(showing)QBT_TR[CONTEXT=SearchEngineWidget] <span id="numSearchResultsVisible" class="numSearchResults">0</span> QBT_TR(out of)QBT_TR[CONTEXT=SearchEngineWidget] <span id="numSearchResultsTotal" class="numSearchResults">0</span>):</span>