diff --git a/client/source/sass/components/_directory-tree.scss b/client/source/sass/components/_directory-tree.scss index 734add74..a4d3c0af 100644 --- a/client/source/sass/components/_directory-tree.scss +++ b/client/source/sass/components/_directory-tree.scss @@ -3,40 +3,87 @@ .icon { display: inline-block; height: 14px; - margin-right: 5px; - vertical-align: top; + margin-right: 6px; width: 14px; } &__node { + color: $directory-tree--filename--foreground; line-height: 1.75; text-overflow: ellipsis; + vertical-align: middle; white-space: nowrap; + &--group { + padding-left: 10px; + position: relative; + + &:after { + background: rgba(#527893, 0.1); + content: ''; + height: 100%; + left: 5px; + position: absolute; + top: -5px; + width: 2px; + } + } + &--directory { color: $directory-tree--directory--foreground; cursor: pointer; - font-weight: 500; transition: color 0.125s; - &:active { - color: $directory-tree--directory--foreground--active; + &.is-expanded { + color: $directory-tree--directory--foreground--open; + font-weight: 500; + + .icon { + fill: $directory-tree--icon--folder--active; + } } .icon { fill: $directory-tree--icon--folder; - position: relative; - } } - &--file { - color: $directory-tree--filename--foreground; - line-height: 1.5; + .file { + display: flex; + line-height: 1.7; + width: 100%; + + &:hover { + + .file { + + &__size, + &__priority { + color: $directory-tree--file-details--hover--foreground; + } + } + } .icon { fill: $directory-tree--icon--file; } + + &__name { + flex: 1 1 auto; + } + + &__size, + &__priority { + color: $directory-tree--file-details--foreground; + flex: 0 0 auto; + font-size: 0.95em; + text-align: right; + transition: color 0.25s; + } + + &__size { + padding-right: $spacing-unit * 1/4; + } } &--file-list { @@ -45,17 +92,17 @@ } &__parent-directory { - color: $torrent-details--directory-tree--directory; - font-size: 0.85em; + color: $torrent-details--directory-tree--parent-directory--foreground; + font-size: 1.125em; .icon { - fill: $torrent-details--directory-tree--icon-fill; - opacity: 0.75; + fill: $torrent-details--directory-tree--parent-directory--icon--fill; + margin-right: 8px; + vertical-align: middle; } } &__tree { - padding-left: 3px; .directory-tree__tree { padding-left: 6px; diff --git a/client/source/sass/components/_torrent-details-panel.scss b/client/source/sass/components/_torrent-details-panel.scss index e1439ab1..78e78159 100644 --- a/client/source/sass/components/_torrent-details-panel.scss +++ b/client/source/sass/components/_torrent-details-panel.scss @@ -25,7 +25,7 @@ z-index: 2; &__heading { - box-shadow: 0 1px 0 rgba(#040d13, 0.3); + box-shadow: 0 1px 0 $torrent-details--header--border; flex: 0 0 auto; .torrent { @@ -33,13 +33,13 @@ &__details { &--name { - color: #97bbd5; + color: $torrent-details--header--name--foreground; font-size: 1.7em; font-weight: 300; } &--tertiary { - color: #7b9cb4; + color: $torrent-details--header--tertiary--foreground; font-size: 1em; } @@ -64,7 +64,7 @@ .progress-bar { &:after { - background: #2a3e4c; + background: $torrent-details--header--progress-bar--track; } } } @@ -109,8 +109,8 @@ } &__navigation { - box-shadow: 1px 0 0 rgba(#040d13, 0.5); - background: rgba(#0c1b26, 0.5); + box-shadow: 1px 0 0 $torrent-details--navigation--border; + background: $torrent-details--navigation--background; padding-left: 0; padding-right: 0; @@ -123,10 +123,9 @@ transition: background 0.25s, box-shadow 0.25s, color 0.25s; &.is-active { - background: rgba(#349cf4, 0.07); - box-shadow: - 1px 0 0 #349cf4; - color: #349cf4; + background: $torrent-details--navigation--item--background--active; + box-shadow: 1px 0 0 $torrent-details--navigation--item--border--active; + color: $torrent-details--navigation--item--foreground--active; } } } diff --git a/client/source/sass/tools/_colors.scss b/client/source/sass/tools/_colors.scss index e50b6f37..5ae28d15 100644 --- a/client/source/sass/tools/_colors.scss +++ b/client/source/sass/tools/_colors.scss @@ -122,8 +122,19 @@ $progress-bar--fill--selected: #fff; $torrent-details--background: #162835; $torrent-details--border: rgba($background, 0.1); -$torrent-details--directory-tree--directory: #375468; -$torrent-details--directory-tree--icon-fill: #375468; +$torrent-details--header--border: rgba(#040d13, 0.3); +$torrent-details--header--name--foreground: #97bbd5; +$torrent-details--header--tertiary--foreground: #7b9cb4; +$torrent-details--header--progress-bar--track: #2a3e4c; + +$torrent-details--navigation--border: rgba(#040d13, 0.5); +$torrent-details--navigation--item--background--active: rgba(#349cf4, 0.07); +$torrent-details--navigation--item--foreground--active: #349cf4; +$torrent-details--navigation--item--border--active: #349cf4; +$torrent-details--navigation--background: rgba(#0c1b26, 0.5); + +$torrent-details--directory-tree--parent-directory--foreground: #3a5c74; +$torrent-details--directory-tree--parent-directory--icon--fill: rgba(#3a5c74, 0.5); $torrent-details--table--foreground: #567285; $torrent-details--table--header: #c0cad3; @@ -134,7 +145,7 @@ $transfer-data--download: $green; $transfer-data--upload: $blue; // dropdown menu -$dropdown--background: rgba(#fff, 0.98);; +$dropdown--background: rgba(#fff, 0.98); $dropdown--foreground: #95a2ad; $dropdown--container--border: rgba($background, 0.1); $dropdown--container--shadow: rgba($background, 0.3); @@ -154,10 +165,14 @@ $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: #567285; -$directory-tree--directory--foreground: #7793a7; -$directory-tree--directory--foreground--active: lighten($directory-tree--directory--foreground, 15%); +$directory-tree--filename--foreground: #527893; +$directory-tree--directory--foreground: $directory-tree--filename--foreground; +$directory-tree--directory--foreground--open: #719bb7; $directory-tree--icon--file: #344b5b; -$directory-tree--icon--folder: #3c5465; -$directory-tree--icon--folder--active: lighten($directory-tree--icon--folder, 15%); +$directory-tree--icon--folder: rgba(#527893, 0.4); +$directory-tree--icon--folder--active: rgba(#82aac5, 0.5); +$directory-tree--icon--folder--open: rgba(#82aac5, 0.5); + +$directory-tree--file-details--foreground: #2b4456; +$directory-tree--file-details--hover--foreground: #527893; diff --git a/client/source/scripts/components/filesystem/DirectoryFileList.js b/client/source/scripts/components/filesystem/DirectoryFileList.js index 806db4cd..7c1d9339 100644 --- a/client/source/scripts/components/filesystem/DirectoryFileList.js +++ b/client/source/scripts/components/filesystem/DirectoryFileList.js @@ -1,6 +1,7 @@ import React from 'react'; import File from '../icons/File'; +import format from '../../util/formatData'; export default class DirectoryFiles extends React.Component { render() { @@ -11,11 +12,23 @@ export default class DirectoryFiles extends React.Component { }); let files = branch.map((file, fileIndex) => { + // console.log(file); + let fileSize = format.data(file.sizeBytes, '', 1); + return ( -