github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-08-23 06:35:24 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

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
This commit is contained in:
Patrik Elfström 2024-12-20 01:45:29 +01:00
commit 4ef2afbe7b
No known key found for this signature in database
GPG key ID: FB7364E56AB95F97
5 changed files with 15 additions and 14 deletions
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 */ /* Forms */
input[type="search"],
input[type="text"], input[type="text"],
input[type="number"], input[type="number"],
input[type="password"], input[type="password"],
@ -503,13 +504,13 @@ a.propButton img {
#torrentsFilterInput { #torrentsFilterInput {
background-color: var(--color-background-default); background-color: var(--color-background-default);
background-image: url("../images/edit-find.svg"); background-image: url("../images/edit-find.svg");
background-position: left; background-position: 2px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1.5em; background-size: 1.5em;
border: 1px solid var(--color-border-default); border: 1px solid var(--color-border-default);
border-radius: 3px; border-radius: 3px;
min-width: 160px; min-width: 170px;
padding: 2px 12px 2px 25px; padding: 2px 2px 2px 25px;
} }
#torrentsFilterRegexBox { #torrentsFilterRegexBox {
@ -555,7 +556,7 @@ a.propButton img {
#torrentFilesFilterInput { #torrentFilesFilterInput {
background-image: url("../images/edit-find.svg"); background-image: url("../images/edit-find.svg");
background-position: left; background-position: 1px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1.5em; background-size: 1.5em;
margin-top: -1px; margin-top: -1px;

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

@ -140,7 +140,7 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div id="torrentsFilterToolbar"> <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"> <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="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> <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 { #filterTextInput {
background-image: url("../images/edit-find.svg"); background-image: url("../images/edit-find.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left; background-position: 2px;
background-size: 1.5em; background-size: 1.5em;
padding: 2px 12px 2px 2em; padding: 2px 2px 2px 2em;
margin-left: .3em; margin-left: .3em;
width: 237px; width: 237px;
border: 1px solid var(--color-border-default); border: 1px solid var(--color-border-default);
@ -96,7 +96,7 @@
<option value="8">QBT_TR(Critical Messages)QBT_TR[CONTEXT=ExecutionLogWidget]</option> <option value="8">QBT_TR(Critical Messages)QBT_TR[CONTEXT=ExecutionLogWidget]</option>
</select> </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> <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> </div>

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

@ -1,6 +1,6 @@
<div class="toolbarTabs"> <div class="toolbarTabs">
<div id="torrentFilesFilterToolbar" class="invisible"> <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> </div>
<menu id="propertiesTabs" class="tab-menu"> <menu id="propertiesTabs" class="tab-menu">
<li id="propGeneralLink"> <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-image: url("images/edit-find.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1.5em; background-size: 1.5em;
background-position: left; background-position: 3px;
border: 1px solid var(--color-border-default); border: 1px solid var(--color-border-default);
border-radius: 3px; border-radius: 3px;
padding: 0 0 0 25px; padding: 0 4px 0 25px;
} }
#categorySelect { #categorySelect {
@ -36,7 +36,7 @@
} }
#searchInNameFilter { #searchInNameFilter {
width: 150px; width: 160px;
margin-right: 20px; margin-right: 20px;
} }
@ -89,7 +89,7 @@
<div id="searchResults"> <div id="searchResults">
<div style="overflow: hidden; height: 60px;"> <div style="overflow: hidden; height: 60px;">
<div style="display: flex; flex-wrap: wrap; gap: 5px; margin: 20px 0 10px 0; height: 24px;"> <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="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> <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()"> <button type="button" id="startSearchButton" class="searchInputField" onclick="qBittorrent.Search.startStopSearch()">
@ -132,7 +132,7 @@
</div> </div>
<div id="searchResultsFilters" class="invisible"> <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> <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>