diff --git a/app/components/directory-listing/template.hbs b/app/components/directory-listing/template.hbs index 7a989e4..4082723 100644 --- a/app/components/directory-listing/template.hbs +++ b/app/components/directory-listing/template.hbs @@ -5,6 +5,7 @@ {{#link-to "index" (query-params path=item.path)}} {{item-icon type=item.type}} {{item.name}} + {{item.type}} {{/link-to}} {{else}} @@ -12,6 +13,7 @@ {{#link-to "index"}} {{item-icon type=item.type}} {{item.name}} + {{human-file-size item.size}} {{item.type}} {{/link-to}} {{/if}} diff --git a/app/helpers/human-file-size.js b/app/helpers/human-file-size.js new file mode 100644 index 0000000..cf7c818 --- /dev/null +++ b/app/helpers/human-file-size.js @@ -0,0 +1,16 @@ +import { helper } from '@ember/component/helper'; + +export default helper(function(fileSizeInBytes/*, options*/) { + if (fileSizeInBytes < 1024) { + return `${fileSizeInBytes} bytes`; + } + + var i = -1; + var byteUnits = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + do { + fileSizeInBytes = fileSizeInBytes / 1024; + i++; + } while (fileSizeInBytes > 1024); + + return String(Math.max(fileSizeInBytes, 0.1).toFixed(1) + ' ' +byteUnits[i]); +}); diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index 408bd26..436d3be 100644 --- a/app/styles/_layout.scss +++ b/app/styles/_layout.scss @@ -4,8 +4,8 @@ #remotestorage-widget { position: fixed; - right: 1rem; - top: 0.5rem; + top: 1rem; + right: 3rem; z-index: 1; } diff --git a/app/styles/components/_directory-listing.scss b/app/styles/components/_directory-listing.scss index 17c2660..cf36a29 100644 --- a/app/styles/components/_directory-listing.scss +++ b/app/styles/components/_directory-listing.scss @@ -41,8 +41,14 @@ &.name { width: 60%; } + &.size { + width: 10%; + white-space: nowrap; + color: $dark-grey-3; + } &.type { - width: 37%; + width: 27%; + white-space: nowrap; color: $dark-grey-3; } }