user settings: fix uploaded files UI

Fix UI and date uploaded

static/js/attachments_ui.js

@@ -16,15 +16,16 @@ function delete_attachments(attachment) {
     });
 }
 
-exports.bytes_to_size = function (bytes) {
+exports.bytes_to_size = function (bytes, kb_with_1024_bytes=false) {
+    var kb_size = kb_with_1024_bytes ? 1024 : 1000;
     var sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
     if (bytes === 0) {
         return '0 B';
     }
-    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1000)), 10);
+    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(kb_size)), 10);
-    var size = Math.round(bytes / Math.pow(1000, i), 2);
+    var size = Math.round(bytes / Math.pow(kb_size, i));
     if ((i > 0) && (size < 10)) {
-        size = '0' + size;
+        size = Math.round((bytes / Math.pow(kb_size, i)) * 10) / 10;
     }
     return size + ' ' + sizes[i];
  };
@@ -34,8 +35,8 @@ exports.set_up_attachments = function () {
 
     var attachments = page_params.attachments;
     _.each(attachments, function (attachment) {
-
+        var time = new XDate(attachment.create_time);
-        attachment.create_time_str = timerender.relative_date(attachment.create_time);
+        attachment.create_time_str = timerender.render_now(time).time_str;
         attachment.size_str = exports.bytes_to_size(attachment.size);
     });
 

static/js/timerender.js

@@ -8,9 +8,6 @@ var set_to_start_of_day = function (time) {
     return time.setMilliseconds(0).setSeconds(0).setMinutes(0).setHours(0);
 };
 
-var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
-              "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-
 // Given an XDate object 'time', returns an object:
 // {
 //      time_str:        a string for the current human-formatted version
@@ -217,6 +214,9 @@ exports.get_full_time = function (timestamp) {
 // this is for rendering absolute time based off the preferences for twenty-four
 // hour time in the format of "%mmm %d, %h:%m %p".
 exports.absolute_time = (function () {
+    var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+                  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
     var fmt_time = function (date, H_24) {
         var payload = {
             hours: date.getHours(),
@@ -254,31 +254,6 @@ exports.absolute_time = (function () {
     };
 }());
 
-// this is for rendering date relative to current time
-// and should display "Today" or "Yesterday" if timestamp date is
-// today's or yesterday's, if not display the format "%mmm %d".
-exports.relative_date = function (timestamp, today) {
-    if (typeof today === 'undefined') {
-         today = new Date();
-    }
-    var date = new Date(timestamp);
-    if ((today.getMonth() === date.getMonth()) && (today.getFullYear() === date.getFullYear())) {
-        var date_diff = today.getDate() - date.getDate();
-        if (date_diff === 0) {
-            return "Today";
-        } else if (date_diff === 1) {
-            return "Yesterday";
-        }
-    }
-    var is_older_year = (today.getFullYear() - date.getFullYear()) > 0;
-    var str = MONTHS[date.getMonth()] + " " + date.getDate();
-    // include year if message date is from a previous year
-    if (is_older_year) {
-        str += ", " + date.getFullYear();
-    }
-    return str;
-};
-
 // XDate.toLocaleDateString and XDate.toLocaleTimeString are
 // expensive, so we delay running the following code until we need
 // the full date and time strings.

static/styles/settings.css

@@ -154,6 +154,18 @@ label {
     width: 20%;
 }
 
+#uploaded_files_table > tr > td:nth-of-type(4),
+#uploaded_files_table > tr > td:nth-of-type(5),
+.upload-size,
+.upload-actions {
+    width: 15%;
+}
+
+#uploaded_files_table > tr > td:nth-of-type(1),
+.upload-file-name {
+    width: 30%;
+}
+
 td .button {
     margin: 2px 0px;
     box-shadow: none;
@@ -348,11 +360,10 @@ input[type=checkbox].inline-block {
     width: 100%;
 }
 
-#attachments_list .attachment-item .list-container .remove-attachment {
+.remove-attachment {
-    margin-top: 10px;
+    margin-right: 5px       !important;
-    margin-right: 5px;
+    font-size: 1.1em        !important;
-    font-size: 1.2em;
+    padding-left: 0px       !important;
-    color: hsl(0, 56%, 73%);
 }
 
 #attachments_list .attachment-item .list-container .file-icon {
@@ -441,26 +452,6 @@ input[type=checkbox].inline-block {
     padding: 1px 4px 1px 2px;
 }
 
-#attachments-settings table th,
-#attachments-settings table td {
-    text-align: center;
-}
-
-#attachments-settings table td.file-name,
-#attachments-settings table td.date-uploaded {
-    text-align: left;
-}
-
-#attachments-settings table th.upload-size,
-#attachments-settings table td.upload-size {
-    width: 50px;
-}
-
-#attachments-settings table th.upload-actions,
-#attachments-settings table td.upload-actions {
-    width: 75px;
-}
-
 #download_attachment {
     padding-left: 0px;
     border-left: 0px;

static/templates/settings/attachments-settings.handlebars

@@ -5,7 +5,7 @@
     <div class="alert" id="delete-upload-status"></div>
     <table class="table table-condensed table-striped wrapped-table">
         <thead>
-            <th data-sort="alphabetic" data-sort-prop="name" class="wrapped-cell">{{t "File" }}</th>
+            <th data-sort="alphabetic" data-sort-prop="name" class="upload-file-name">{{t "File" }}</th>
             <th class="active" data-sort="numeric" data-sort-prop="create_time">{{t "Date uploaded" }}</th>
             <th data-sort="mentioned-in">{{t "Mentioned in" }}</th>
             <th class="upload-size" data-sort="numeric" data-sort-prop="size">{{t "Size" }}</th>

static/templates/uploaded_files_list.handlebars

@@ -1,11 +1,11 @@
 {{#with attachment}}
 <tr class="uploaded_file_row" id="{{name}}">
-    <td class="file-name">
+    <td>
         <a type="submit" href="/user_uploads/{{path_id}}" target="_blank" title="{{t 'View file' }}">
             {{ name }}
         </a>
     </td>
-    <td class="date-uploaded">{{ create_time_str }}</td>
+    <td>{{ create_time_str }}</td>
     <td>
         {{#if messages }}
         <div class="attachment-messages">
@@ -17,8 +17,8 @@
         </div>
         {{/if}}
     </td>
-    <td class="upload-size">{{ size_str }}</td>
+    <td>{{ size_str }}</td>
-    <td class="upload-actions">
+    <td>
         <span class="edit-attachment-buttons">
             <button type="submit"
                 class="button small no-style remove-attachment"