Revise WebUI confirm deletion dialog

* Fix wrong initialization logic for the "Delete files" checkbox. * Revert back to use XHR to load svg icon. This is better than embedding svg icons. * Revise CSS selector. * Make the dialog resizeable and a bit larger.
qbittorrent · Jan 6, 2024 · 9a244d5 · 9a244d5
1 parent 1b80df8
commit 9a244d5
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 44 deletions.
diff --git a/src/webui/api/appcontroller.cpp b/src/webui/api/appcontroller.cpp
@@ -119,6 +119,8 @@ void AppController::preferencesAction()
     data[u"file_log_delete_old"_s] = app()->isFileLoggerDeleteOld();
     data[u"file_log_age"_s] = app()->fileLoggerAge();
     data[u"file_log_age_type"_s] = app()->fileLoggerAgeType();
+    // Delete torrent contents files on torrent removal
+    data[u"delete_torrent_content_files"_s] = pref->deleteTorrentFilesAsDefault();
 
     // Downloads
     // When adding a torrent
@@ -167,9 +169,6 @@ void AppController::preferencesAction()
     data[u"excluded_file_names_enabled"_s] = session->isExcludedFileNamesEnabled();
     data[u"excluded_file_names"_s] = session->excludedFileNames().join(u'\n');
 
-    // Default setting for torrent file deletion on torrent removal
-    data[u"delete_torrent_files_as_default"_s] = pref->deleteTorrentFilesAsDefault();
-
     // Email notification upon download completion
     data[u"mail_notification_enabled"_s] = pref->isMailNotificationEnabled();
     data[u"mail_notification_sender"_s] = pref->getMailNotificationSender();
@@ -497,6 +496,9 @@ void AppController::setPreferencesAction()
         app()->setFileLoggerAge(it.value().toInt());
     if (hasKey(u"file_log_age_type"_s))
         app()->setFileLoggerAgeType(it.value().toInt());
+    // Delete torrent content files on torrent removal
+    if (hasKey(u"delete_torrent_content_files"_s))
+        pref->setDeleteTorrentFilesAsDefault(it.value().toBool());
 
     // Downloads
     // When adding a torrent
@@ -600,10 +602,6 @@ void AppController::setPreferencesAction()
     if (hasKey(u"excluded_file_names"_s))
         session->setExcludedFileNames(it.value().toString().split(u'\n'));
 
-    // Default setting for torrent file deletion on torrent removal
-    if (hasKey(u"delete_torrent_files_as_default"_s))
-        pref->setDeleteTorrentFilesAsDefault(it.value().toBool());
-
     // Email notification upon download completion
     if (hasKey(u"mail_notification_enabled"_s))
         pref->setMailNotificationEnabled(it.value().toBool());

diff --git a/src/webui/webapplication.h b/src/webui/webapplication.h
@@ -53,7 +53,7 @@
 #include "base/utils/version.h"
 #include "api/isessionmanager.h"
 
-inline const Utils::Version<3, 2> API_VERSION {2, 10, 1};
+inline const Utils::Version<3, 2> API_VERSION {2, 10, 2};
 
 class QTimer;
 

diff --git a/src/webui/www/.eslintrc.json b/src/webui/www/.eslintrc.json
@@ -1,7 +1,7 @@
 {
     "env": {
         "browser": true,
-        "es2020": true
+        "es2021": true
     },
     "extends": "eslint:recommended",
     "plugins": [

diff --git a/src/webui/www/private/confirmdeletion.html b/src/webui/www/private/confirmdeletion.html
@@ -10,25 +10,48 @@
     <script>
         'use strict';
 
+        function setRememberBtnEnabled(enable) {
+            const btn = $('rememberBtn');
+            btn.disabled = !enable;
+
+            const icon = btn.getElementsByTagName('path')[0];
+            if (enable)
+                icon.style.removeProperty('fill');
+            else
+                icon.style.fill = "var(--color-border-default)";
+        }
+
         window.addEvent('domready', function() {
+            new Request({
+                url: 'images/object-locked.svg',
+                method: 'get',
+                onSuccess: function(text, xml) {
+                    const newIcon = xml.childNodes[0];
+                    newIcon.style.height = '24px';
+                    newIcon.style.width = '24px';
+                    $('rememberBtn').appendChild(newIcon);
+                    setRememberBtnEnabled(false);
+                }
+            }).send();
+
             const isDeletingFiles = (new URI().getData('deleteFiles') === "true");
             $('deleteFromDiskCB').checked = isDeletingFiles;
 
+            let prefDeleteContentFiles = false;
             new Request.JSON({
                 url: 'api/v2/app/preferences',
                 method: 'get',
                 noCache: true,
                 onSuccess: function(pref) {
-                    if (pref) {
-                        $('deleteFromDiskCB').checked = pref.delete_torrent_files_as_default;
-                    }
+                    if (!pref)
+                        return;
+
+                    prefDeleteContentFiles = pref.delete_torrent_content_files;
+                    $('deleteFromDiskCB').checked ||= prefDeleteContentFiles;
                 }
             }).send();
-
-            // Disable 'Remember choice' button until 'Delete files' checkbox is clicked
-            disableRememberBtn();
             $('deleteFromDiskCB').addEvent('click', function(e) {
-                enableRememberBtn();
+                setRememberBtnEnabled($('deleteFromDiskCB').checked !== prefDeleteContentFiles);
             });
 
             // Set current "Delete files" choice as the default
@@ -38,26 +61,16 @@
                     method: 'post',
                     data: {
                         'json': JSON.encode({
-                            'delete_torrent_files_as_default': $('deleteFromDiskCB').checked
+                            'delete_torrent_content_files': $('deleteFromDiskCB').checked
                         })
                     },
-                    onComplete: function() {
-                        disableRememberBtn();
+                    onSuccess: function() {
+                        prefDeleteContentFiles = $('deleteFromDiskCB').checked;
+                        setRememberBtnEnabled(false);
                     }
                 }).send();
             });
 
-            function enableRememberBtn() {
-                const btn = $('rememberBtn');
-                btn.disabled = false;
-                btn.getElementsByTagName('path')[0].style.fill = "";
-            }
-
-            function disableRememberBtn() {
-                const btn = $('rememberBtn');
-                btn.disabled = true;
-                btn.getElementsByTagName('path')[0].style.fill = "var(--color-border-default)";
-            }
             const hashes = new URI().getData('hashes').split('|');
             $('cancelBtn').focus();
             $('cancelBtn').addEvent('click', function(e) {
@@ -90,10 +103,6 @@
 
     <p>&nbsp;&nbsp;QBT_TR(Are you sure you want to remove the selected torrents from the transfer list?)QBT_TR[CONTEXT=HttpServer]</p>
     &nbsp;&nbsp;&nbsp;&nbsp;<button id="rememberBtn" type="button" title="Remember choice" style="vertical-align: middle; padding: 4px 6px;">
-        <!-- ./public/icons/object-locked.svg -->
-        <svg height="24" viewBox="0 0 32 32" width="24" xmlns="http://www.w3.org/2000/svg">
-            <path d="m22.58889 13.856795h-13.1776846v-3.690063c0-3.2959186 2.9557016-5.9772288 6.5888426-5.9772288 3.633136 0 6.588842 2.6814977 6.588842 5.9772288zm3.515031.03355v-3.723984c0-5.0541989-4.532547-9.16636116-10.103873-9.16636116-5.571329 0-10.1038769 4.11216226-10.1038769 9.16636116v3.72398c-.7962418.150954-1.3961709.793694-1.3961709 1.560369v13.955002c0 .879047.7884216 1.594288 1.7575164 1.594288h19.4849724c.969092 0 1.757511-.715241 1.757511-1.594288v-13.955002c0-.766675-.599832-1.408677-1.396079-1.560372z" fill="#ff8c00" stroke-width="1.980014" />
-        </svg>
     </button>
     <input type="checkbox" id="deleteFromDiskCB" /> <label for="deleteFromDiskCB"><i>QBT_TR(Also permanently delete the files)QBT_TR[CONTEXT=confirmDeletionDlg]</i></label><br /><br />
     <div style="text-align: right;">

diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
@@ -34,8 +34,8 @@ button {
     padding: 4px 16px;
 }
 
-button[disabled] {
-    cursor: auto;
+button:disabled {
+    cursor: initial;
 }
 
 /*table { border-collapse: collapse; border-spacing: 0; }*/

diff --git a/src/webui/www/private/scripts/mocha-init.js b/src/webui/www/private/scripts/mocha-init.js
@@ -390,11 +390,11 @@ const initializeWindows = function() {
                 loadMethod: 'iframe',
                 contentURL: new URI("confirmdeletion.html").setData("hashes", hashes.join("|")).setData("deleteFiles", deleteFiles).toString(),
                 scrollbars: false,
-                resizable: false,
+                resizable: true,
                 maximizable: false,
                 padding: 10,
                 width: 424,
-                height: 140
+                height: 160
             });
             updateMainData();
         }
@@ -711,11 +711,11 @@ const initializeWindows = function() {
                 loadMethod: 'iframe',
                 contentURL: new URI("confirmdeletion.html").setData("hashes", hashes.join("|")).toString(),
                 scrollbars: false,
-                resizable: false,
+                resizable: true,
                 maximizable: false,
                 padding: 10,
                 width: 424,
-                height: 140
+                height: 160
             });
             updateMainData();
         }
@@ -852,11 +852,11 @@ const initializeWindows = function() {
                 loadMethod: 'iframe',
                 contentURL: new URI("confirmdeletion.html").setData("hashes", hashes.join("|")).toString(),
                 scrollbars: false,
-                resizable: false,
+                resizable: true,
                 maximizable: false,
                 padding: 10,
                 width: 424,
-                height: 140
+                height: 160
             });
             updateMainData();
         }
@@ -938,11 +938,11 @@ const initializeWindows = function() {
                 loadMethod: 'iframe',
                 contentURL: new URI("confirmdeletion.html").setData("hashes", hashes.join("|")).toString(),
                 scrollbars: false,
-                resizable: false,
+                resizable: true,
                 maximizable: false,
                 padding: 10,
                 width: 424,
-                height: 140,
+                height: 160,
                 onCloseComplete: function() {
                     updateMainData();
                     setTrackerFilter(TRACKERS_ALL);