Improve directory view

client/source/sass/objects/_directory-tree.scss

@@ -2,22 +2,45 @@
 
   .icon {
     display: inline-block;
-    fill: $torrent-details--directory-tree--icon-fill;
     height: 14px;
     margin-right: 5px;
-    vertical-align: middle;
+    vertical-align: top;
     width: 14px;
   }
 
   &__node {
-    line-height: 1.2;
-    overflow: hidden;
-    padding-bottom: 5px;
+    line-height: 1.75;
     text-overflow: ellipsis;
     white-space: nowrap;
 
     &--directory {
+      color: $directory-tree--directory--foreground;
       cursor: pointer;
+      font-weight: 500;
+      transition: opacity 0.125s;
+
+      &:active {
+        opacity: 0.7;
+      }
+
+      .icon {
+        fill: $directory-tree--icon--folder;
+        position: relative;
+
+      }
+    }
+
+    &--file {
+      color: $directory-tree--filename--foreground;
+      line-height: 1.5;
+
+      .icon {
+        fill: $directory-tree--icon--file;
+      }
+    }
+
+    &--file-list {
+      margin-bottom: 3px;
     }
   }
 
@@ -26,6 +49,7 @@
     font-size: 0.85em;
 
     .icon {
+      fill: $torrent-details--directory-tree--icon-fill;
       opacity: 0.75;
     }
   }

client/source/sass/tools/_colors.scss

@@ -151,3 +151,10 @@ $modal--overlay: rgba($background, 0.5);
 $modal--header--foreground: $header--foreground;
 $modal--content--border: rgba($background, 0.1);
 $modal--content--shadow: rgba($background, 0.3);
+
+// directory torrent-details--directory-tree--icon-fill
+$directory-tree--filename--foreground: rgba(#566573, 0.8);
+$directory-tree--directory--foreground: #566573;
+
+$directory-tree--icon--file: rgba(#566573, 0.4);
+$directory-tree--icon--folder: rgba(#566573, 0.6);

client/source/scripts/components/icons/File.js

@@ -7,7 +7,7 @@ export default class File extends BaseIcon {
     return (
       <svg className={`icon icon--file ${this.props.className}`}
         xmlns={this.getXmlns()} viewBox={this.getViewBox()}>
-        <path d="M49.4,15.3l-8.6-8.9c-1-1.1-3.1-1.9-4.5-1.9H11.4c-1.5,0-2.7,1.2-2.7,2.7v45.5c0,1.5,1.2,2.7,2.7,2.7h37.2 c1.5,0,2.7-1.2,2.7-2.7V20C51.3,18.5,50.4,16.4,49.4,15.3z M37.1,8.4C37.6,8.5,38,8.8,38.2,9l8.7,8.9c0.2,0.2,0.4,0.7,0.6,1.2H37.1 V8.4z M47.7,51.9H12.3V8.1h21.3V20c0,1.5,1.2,2.7,2.7,2.7h11.5V51.9z"/>
+        <path d="M48.14,19.89V56a3,3,0,0,1-3,3H3a3,3,0,0,1-3-3V5.84a3,3,0,0,1,3-3H31.09A8.41,8.41,0,0,1,36.23,5L46,14.75A8.4,8.4,0,0,1,48.14,19.89Zm-4,3h-13a3,3,0,0,1-3-3v-13H4V55H44.13V22.89Zm-12-4H43.88a4,4,0,0,0-.69-1.29L33.38,7.79a4,4,0,0,0-1.28-.69V18.88Z"/>
       </svg>
     );
   }

client/source/scripts/components/icons/FolderClosedOutlined.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import BaseIcon from './BaseIcon';
+
+export default class FolderClosedOutline extends BaseIcon {
+  render() {
+    return (
+      <svg className={`icon icon--directory-outlined ${this.props.className}`}
+        xmlns={this.getXmlns()} viewBox={this.getViewBox()}>
+        <path d="M52.3,47.47a7.07,7.07,0,0,1-7,7H7a7.07,7.07,0,0,1-7-7V17.29a7.07,7.07,0,0,1,7-7H17.1a7.07,7.07,0,0,1,7,7v1H45.26a7.07,7.07,0,0,1,7,7V47.47Zm-4-22.13a3,3,0,0,0-3-3H23.13a3,3,0,0,1-3-3v-2a3,3,0,0,0-3-3H7a3,3,0,0,0-3,3V47.47a3,3,0,0,0,3,3H45.26a3,3,0,0,0,3-3V25.34Z"/>
+      </svg>
+    );
+  }
+}
+
+FolderClosedOutline.defaultProps = {
+  className: ''
+};

client/source/scripts/components/icons/FolderOpenOutlined.js

@@ -7,7 +7,7 @@ export default class FolderOpenOutlined extends BaseIcon {
     return (
       <svg className={`icon icon--directory-outlined ${this.props.className}`}
         xmlns={this.getXmlns()} viewBox={this.getViewBox()}>
-        <path d="M55.8,33c0,0.5-0.3,0.8-0.6,1.2l-9.2,11c-1.1,1.3-3.2,2.3-4.9,2.3H7.2c-0.7,0-1.7-0.2-1.7-1.1c0-0.5,0.3-0.8,0.6-1.2l9.2-11 c1.1-1.2,3.2-2.2,4.9-2.2h33.9C54.8,31.9,55.8,32.1,55.8,33z M20.2,28.1c-2.8,0-6.2,1.5-8,3.7l-8,9.5V15.5c0-1.6,1.3-2.9,3-2.9h10 c1.7,0,3,1.3,3,2.9v1.9c0,1.6,1.3,2.9,3,2.9h18c1.7,0,3,1.3,3,2.9v4.8H20.2z M59.8,33c0-0.7-0.2-1.4-0.5-2.1 c-0.9-1.9-3.1-2.9-5.2-2.9h-6v-4.8c0-3.7-3.1-6.8-7-6.8h-17v-1c0-3.7-3.1-6.8-7-6.8h-10c-3.8,0-7,3.1-7,6.8v29c0,3.7,3.1,6.8,7,6.8 h33.9c2.8,0,6.2-1.6,8-3.7l9.2-11C59.2,35.6,59.8,34.3,59.8,33z"/>
+        <path d="M58.55,39.26L49.28,50.67a11.34,11.34,0,0,1-8,3.83H7a7.07,7.07,0,0,1-7-7V17.29a7.07,7.07,0,0,1,7-7H17.1a7.07,7.07,0,0,1,7,7v1h17.1a7.07,7.07,0,0,1,7,7v5h6a5.59,5.59,0,0,1,5.22,3A4.94,4.94,0,0,1,60,35.49,6.18,6.18,0,0,1,58.55,39.26Zm-14.3-8.9v-5a3,3,0,0,0-3-3H23.13a3,3,0,0,1-3-3v-2a3,3,0,0,0-3-3H7a3,3,0,0,0-3,3V44.1l8-9.9a11.22,11.22,0,0,1,8-3.84H44.25Zm10.06,4H20.11a7.25,7.25,0,0,0-4.93,2.33L5.94,48.13a2.19,2.19,0,0,0-.57,1.26c0,0.88,1,1.1,1.67,1.1h34.2a7.15,7.15,0,0,0,4.93-2.36l9.24-11.41A2,2,0,0,0,56,35.49C56,34.61,55,34.39,54.31,34.39Z"/>
       </svg>
     );
   }

client/source/scripts/components/torrent-list/DirectoryTreeNode.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import FolderClosedOutlined from '../icons/FolderClosedOutlined';
 import FolderOpenOutlined from '../icons/FolderOpenOutlined';
 import DirectoryTree from './DirectoryTree';
 
@@ -39,11 +40,17 @@ export default class DirectoryTreeNode extends React.Component {
   render() {
     let classes = `directory-tree__branch directory-tree__branch--depth-${this.props.depth}`;
 
+    let icon = <FolderClosedOutlined />;
+
+    if (this.state.expanded) {
+      icon = <FolderOpenOutlined />;
+    }
+
     return (
       <div className={classes}>
         <div className="directory-tree__node directory-tree__node--directory"
           onClick={this.handleDirectoryClick} title={this.props.directoryName}>
-          <FolderOpenOutlined />
+          {icon}
           {this.props.directoryName}
         </div>
         {this.getSubTree()}

server/assets/style.css

@@ -868,25 +868,39 @@ body {
 
 .directory-tree .icon {
   display: inline-block;
-  fill: #a5b0b9;
   height: 14px;
   margin-right: 5px;
-  vertical-align: middle;
+  vertical-align: top;
   width: 14px; }
 
 .directory-tree__node {
-  line-height: 1.2;
-  overflow: hidden;
-  padding-bottom: 5px;
+  line-height: 1.75;
   text-overflow: ellipsis;
   white-space: nowrap; }
   .directory-tree__node--directory {
-    cursor: pointer; }
+    color: #566573;
+    cursor: pointer;
+    font-weight: 500;
+    -webkit-transition: opacity 0.125s;
+    transition: opacity 0.125s; }
+    .directory-tree__node--directory:active {
+      opacity: 0.7; }
+    .directory-tree__node--directory .icon {
+      fill: rgba(86, 101, 115, 0.6);
+      position: relative; }
+  .directory-tree__node--file {
+    color: rgba(86, 101, 115, 0.8);
+    line-height: 1.5; }
+    .directory-tree__node--file .icon {
+      fill: rgba(86, 101, 115, 0.4); }
+  .directory-tree__node--file-list {
+    margin-bottom: 3px; }
 
 .directory-tree__parent-directory {
   color: #a5b0b9;
   font-size: 0.85em; }
   .directory-tree__parent-directory .icon {
+    fill: #a5b0b9;
     opacity: 0.75; }
 
 .directory-tree__tree {