Display files hierarchically in Web UI content tab

.gitignore

@@ -36,3 +36,7 @@ config.status
 src/icons/qbt-theme/build-icons/node_modules/
 src/icons/skin/build-icons/node_modules/
 src/icons/skin/build-icons/icons/*.png
+
+# Web UI tools
+node_modules
+package-lock.json

src/webui/api/torrentscontroller.cpp

@@ -460,7 +460,7 @@ void TorrentsController::filesAction()
             QString fileName = torrent->filePath(i);
             if (fileName.endsWith(QB_EXT, Qt::CaseInsensitive))
                 fileName.chop(QB_EXT.size());
-            fileDict[KEY_FILE_NAME] = Utils::Fs::toNativePath(fileName);
+            fileDict[KEY_FILE_NAME] = Utils::Fs::toUniformPath(fileName);
 
             const BitTorrent::TorrentInfo::PieceRange idx = info.filePieces(i);
             fileDict[KEY_FILE_PIECE_RANGE] = QVariantList {idx.first(), idx.last()};

src/webui/www/private/css/style.css

@@ -352,7 +352,6 @@ a.propButton img {
 #torrentsFilterToolbar {
     float: right;
     margin-right: 30px;
-    margin-right: 30px;
 }
 
 #torrentsFilterInput {
@@ -364,6 +363,20 @@ a.propButton img {
     background-position: left;
 }
 
+#torrentFilesFilterToolbar {
+    float: right;
+    margin-right: 30px;
+}
+
+#torrentFilesFilterInput {
+    width: 160px;
+    padding-left: 2em;
+    background-image: url("../images/qbt-theme/edit-find.svg");
+    background-repeat: no-repeat;
+    background-size: 1.5em;
+    background-position: left;
+}
+
 /* Tri-state checkbox */
 
 label.tristate {
@@ -470,6 +483,19 @@ td.generalLabel {
     line-height: 25px;
 }
 
+.filesTableCollapseIcon {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    margin-bottom: -3px;
+    padding-right: 5px;
+}
+
+.filesTableCollapseIcon.rotate {
+    transform: rotate(270deg);
+    margin-bottom: -1px;
+}
+
 .unselectable {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -596,3 +622,17 @@ td.statusBarSeparator {
 .searchPluginsTableRow {
     cursor: pointer;
 }
+
+#torrentFilesTableDiv .dynamicTable tr.nonAlt {
+    background-color: #fff;
+}
+
+#torrentFilesTableDiv .dynamicTable tr.nonAlt.selected {
+    background-color: #354158;
+    color: #fff;
+}
+
+#torrentFilesTableDiv .dynamicTable tr.nonAlt:hover {
+    background-color: #ee6600;
+    color: #fff;
+}

src/webui/www/private/index.html

@@ -21,8 +21,10 @@
     <script src="scripts/lib/mocha-0.9.6-yc.js"></script>
     <script src="scripts/mocha-init.js?locale=${LANG}&v=${CACHEID}"></script>
     <script src="scripts/lib/clipboard-2.0.0.min.js"></script>
+    <script src="scripts/filesystem.js?v=${CACHEID}"></script>
     <script src="scripts/misc.js?locale=${LANG}&v=${CACHEID}"></script>
     <script src="scripts/progressbar.js?v=${CACHEID}"></script>
+    <script src="scripts/file-tree.js?v=${CACHEID}"></script>
     <script src="scripts/dynamicTable.js?locale=${LANG}&v=${CACHEID}"></script>
     <script src="scripts/client.js?locale=${LANG}&v=${CACHEID}"></script>
     <script src="scripts/contextmenu.js?locale=${LANG}&v=${CACHEID}"></script>
@@ -189,7 +191,7 @@ <h1 class="applicationTitle">qBittorrent Web User Interface <span class="version
         <li><a href="#CopyTrackerUrl" id="CopyTrackerUrl"><img src="images/qbt-theme/edit-copy.svg" alt="QBT_TR(Copy tracker URL)QBT_TR[CONTEXT=TrackerListWidget]"/> QBT_TR(Copy tracker URL)QBT_TR[CONTEXT=TrackerListWidget]</a></li>
     </ul>
     <ul id="torrentFilesMenu" class="contextMenu">
-        <li class="separator">
+        <li>
             <a href="#FilePrio" class="arrow-right"><span style="display: inline-block; width: 16px;"></span> QBT_TR(Priority)QBT_TR[CONTEXT=PropertiesWidget]</a>
             <ul>
                 <li><a href="#FilePrioIgnore"><span style="display: inline-block; width: 16px;"></span> QBT_TR(Do not download)QBT_TR[CONTEXT=PropListDelegate]</a></li>

src/webui/www/private/properties.html

@@ -1,4 +1,7 @@
 <div class="toolbarTabs">
+	<div id="torrentFilesFilterToolbar" class="invisible">
+	    <input type="text" id="torrentFilesFilterInput" placeholder="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" autocorrect="off" autocapitalize="none" />
+	</div>
     <ul id="propertiesTabs" class="tab-menu">
         <li id="PropGeneralLink" class="selected"><a>QBT_TR(General)QBT_TR[CONTEXT=PropTabBar]</a></li>
         <li id="PropTrackersLink"><a>QBT_TR(Trackers)QBT_TR[CONTEXT=PropTabBar]</a></li>

src/webui/www/private/scripts/client.js

@@ -887,34 +887,39 @@ window.addEvent('load', function() {
             $('PropGeneralLink').addEvent('click', function(e) {
                 $$('.propertiesTabContent').addClass('invisible');
                 $('prop_general').removeClass("invisible");
+                hideFilesFilter();
                 updatePropertiesPanel();
                 localStorage.setItem('selected_tab', this.id);
             });
 
             $('PropTrackersLink').addEvent('click', function(e) {
                 $$('.propertiesTabContent').addClass('invisible');
                 $('prop_trackers').removeClass("invisible");
+                hideFilesFilter();
                 updatePropertiesPanel();
                 localStorage.setItem('selected_tab', this.id);
             });
 
             $('PropPeersLink').addEvent('click', function(e) {
                 $$('.propertiesTabContent').addClass('invisible');
                 $('prop_peers').removeClass("invisible");
+                hideFilesFilter();
                 updatePropertiesPanel();
                 localStorage.setItem('selected_tab', this.id);
             });
 
             $('PropWebSeedsLink').addEvent('click', function(e) {
                 $$('.propertiesTabContent').addClass('invisible');
                 $('prop_webseeds').removeClass("invisible");
+                hideFilesFilter();
                 updatePropertiesPanel();
                 localStorage.setItem('selected_tab', this.id);
             });
 
             $('PropFilesLink').addEvent('click', function(e) {
                 $$('.propertiesTabContent').addClass('invisible');
                 $('prop_files').removeClass("invisible");
+                showFilesFilter();
                 updatePropertiesPanel();
                 localStorage.setItem('selected_tab', this.id);
             });
@@ -927,6 +932,14 @@ window.addEvent('load', function() {
         height: prop_h
     });
 
+    const showFilesFilter = function() {
+        $('torrentFilesFilterToolbar').removeClass("invisible");
+    };
+
+    const hideFilesFilter = function() {
+        $('torrentFilesFilterToolbar').addClass("invisible");
+    };
+
     let prevTorrentsFilterValue;
     let torrentsFilterInputTimer = null;
     // listen for changes to torrentsFilterInput