Show file sizes in listings

app/components/directory-listing/template.hbs

@@ -5,6 +5,7 @@
       {{#link-to "index" (query-params path=item.path)}}
         <span class="icon">{{item-icon type=item.type}}</span>
         <span class="name">{{item.name}}</span>
+        <span class="size"></span>
         <span class="type">{{item.type}}</span>
       {{/link-to}}
     {{else}}
@@ -12,6 +13,7 @@
       {{#link-to "index"}}
         <span class="icon">{{item-icon type=item.type}}</span>
         <span class="name">{{item.name}}</span>
+        <span class="size">{{human-file-size item.size}}</span>
         <span class="type">{{item.type}}</span>
       {{/link-to}}
     {{/if}}

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]);
+});

app/styles/_layout.scss

@@ -4,8 +4,8 @@
 
 #remotestorage-widget {
   position: fixed;
-  right: 1rem;
-  top: 0.5rem;
+  top: 1rem;
+  right: 3rem;
   z-index: 1;
 }
 

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;
           }
         }