[dirent details] improvement

media/css/seahub.css

@@ -1074,6 +1074,10 @@ textarea:-moz-placeholder {/* for FF */
 .details-panel {
     width:320px;
 }
+.details-panel-item-name {
+    display:inline-block;
+    max-width:215px;
+}
 .details-panel-img-container {
     text-align:center;
     height:160px;

seahub/templates/js/templates.html

@@ -777,7 +777,7 @@
         <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fleft"></a>
         <h3 class="right-side-panel-title">
             <img src="<%= icon_url %>" width="24" alt="" class="vam" />
-            <span class="vam"><%- dirent.obj_name %></span>
+            <span class="vam ellipsis details-panel-item-name" title="<%- dirent.obj_name %>"><%- dirent.obj_name %></span>
         </h3>
     </div>
     <div class="right-side-panel-con">
@@ -791,31 +791,48 @@
         </div>
 
         <div class="details-panel-text-info-container">
+            <% if (dirent.is_file) { %>
             <table>
                 <tr class="vh">
                     <th width="35%"></th>
                     <td width="65%"></td>
                 </tr>
-
-                <% if (dirent.is_file) { %>
                 <tr>
                     <th>{% trans "Size" %}</th>
                     <td><%= dirent.file_size %></td>
                 </tr>
-                <% } else { %>
+                <tr>
+                    <th>{% trans "Location" %}</th>
+                    <td><%- path %></td>
+                </tr>
+                <% if (dirent.last_modified) { %>
+                <tr>
+                    <th>{% trans "Last Update" %}</th>
+                    <td><%= dirent.last_update %></td>
+                </tr>
+                <% } %>
+            </table>
+
+            <% } else { %>
+            <p class="loading-icon loading-tip"></p>
+            <p class="error hide"></p>
+            <table class="hide">
+                <tr class="vh">
+                    <th width="35%"></th>
+                    <td width="65%"></td>
+                </tr>
                 <tr>
                     <th>{% trans "Folders" %}</th>
                     <td class="dir-folder-counts"></td>
                 </tr>
                 <tr>
                     <th>{% trans "Files" %}</th>
-                    <td class="dir-file-counts"><span class="loading-icon"></span></td>
+                    <td class="dir-file-counts"></td>
                 </tr>
                 <tr>
                     <th>{% trans "Size" %}</th>
                     <td class="dir-size"></td>
                 </tr>
-                <% } %>
 
                 <tr>
                     <th>{% trans "Location" %}</th>
@@ -828,8 +845,8 @@
                 </tr>
                 <% } %>
             </table>
+            <% } %>
         </div>
-
     </div>
 </script>
 

static/scripts/app/views/dirent-details.js

@@ -45,13 +45,15 @@ define([
         },
 
         update: function(part_data) {
-            if (part_data.error) {
+            var $container = this.$('.details-panel-text-info-container');
-                this.$('.dir-folder-counts, .dir-file-counts, .dir-size')
+            $('.loading-icon', $container).hide();
-                    .html('<span class="error">' + gettext("Error") + '</span>');
+            if (part_data.error_msg) {
+                $('.error', $container).html(part_data.error_msg).show();
             } else {
                 this.$('.dir-folder-counts').html(part_data.dir_count);
                 this.$('.dir-file-counts').html(part_data.file_count);
                 this.$('.dir-size').html(part_data.size);
+                $('table', $container).show();
             }
         },
 

static/scripts/app/views/dirent-grid.js

@@ -323,8 +323,15 @@ define([
                             'size': Common.fileSizeFormat(data.size, 1)
                         });
                     },
-                    error: function() {
+                    error: function(xhr) {
-                        detailsView.update({'error': true});
+                        var error_msg;
+                        if (xhr.responseText) {
+                            var parsed_resp = $.parseJSON(xhr.responseText);
+                            error_msg = parsed_resp.error_msg || parsed_resp.detail;
+                        } else {
+                            error_msg = gettext("Failed. Please check the network.");
+                        }
+                        detailsView.update({'error_msg': error_msg});
                     }
                 });
             }

static/scripts/app/views/dirent.js

@@ -605,8 +605,15 @@ define([
                             'size': Common.fileSizeFormat(data.size, 1)
                         });
                     },
-                    error: function() {
+                    error: function(xhr) {
-                        detailsView.update({'error': true});
+                        var error_msg;
+                        if (xhr.responseText) {
+                            var parsed_resp = $.parseJSON(xhr.responseText);
+                            error_msg = parsed_resp.error_msg || parsed_resp.detail;
+                        } else {
+                            error_msg = gettext("Failed. Please check the network.");
+                        }
+                        detailsView.update({'error_msg': error_msg});
                     }
                 });
             }