From 4ef2afbe7b648c30364dd7b69543ddd7bf333081 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrik=20Elfstr=C3=B6m?= <me@patrikelfstrom.se>
Date: Fri, 20 Dec 2024 01:45:29 +0100
Subject: [PATCH] WebUI: Change filter inputs to type search

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
---
 src/webui/www/private/css/style.css                |  9 +++++----
 src/webui/www/private/index.html                   |  2 +-
 src/webui/www/private/views/log.html               |  6 +++---
 src/webui/www/private/views/propertiesToolbar.html |  2 +-
 src/webui/www/private/views/search.html            | 10 +++++-----
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
index 1dc074745..186d0f5e8 100644
--- a/src/webui/www/private/css/style.css
+++ b/src/webui/www/private/css/style.css
@@ -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;
diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html
index 99817ed4a..da0b74d7e 100644
--- a/src/webui/www/private/index.html
+++ b/src/webui/www/private/index.html
@@ -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>
diff --git a/src/webui/www/private/views/log.html b/src/webui/www/private/views/log.html
index 1f54315f5..ace139971 100644
--- a/src/webui/www/private/views/log.html
+++ b/src/webui/www/private/views/log.html
@@ -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>
 
diff --git a/src/webui/www/private/views/propertiesToolbar.html b/src/webui/www/private/views/propertiesToolbar.html
index beb84b4c9..95fa5ff8f 100644
--- a/src/webui/www/private/views/propertiesToolbar.html
+++ b/src/webui/www/private/views/propertiesToolbar.html
@@ -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">
diff --git a/src/webui/www/private/views/search.html b/src/webui/www/private/views/search.html
index 45e8dda09..187586c90 100644
--- a/src/webui/www/private/views/search.html
+++ b/src/webui/www/private/views/search.html
@@ -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>