Update icon view and tree view.

src/_h5ai/client/css/inc/tree.less

@@ -12,6 +12,9 @@
     background: #eee;
     border-right: 1px solid @col-border;
     font-weight: lighter;
+    white-space: nowrap;
+    max-width: 250px;
+    overflow-x: hidden;
 
     .sp-scrollbar {
         width: 6px;

src/_h5ai/client/css/inc/view-icons.less

@@ -7,12 +7,10 @@
 
             a, a:active, a:visited {
                 width: @size * 4/3;
-                height: @size + 28px;
             }
         }
 
         .icon.rational {
-            height: @size;
 
             img {
                 width: @size;
@@ -36,27 +34,25 @@
     margin: 8px;
 
     li {
-        text-align: center;
+        background: #fff;
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+
+        &:hover, &.hover {
+            box-shadow: 0 1px 12px 0px rgba(0,0,0,0.5);
+        }
 
         &.item {
             float: left;
             margin: 8px;
 
             a, a:active, a:visited {
-                // padding: 8px;
-                border: 1px solid rgba(0,0,0,0);
                 min-width: @minsize * 4/3;
-                min-height: @minsize + 28px;
-
-                &:hover, &.hover {
-                    border-color: @item-border-col-hover;
-                }
             }
         }
 
         .icon.rational {
             display: block;
-            margin-bottom: 6px;
+            background: #fafafa;
 
             min-height: @minsize;
 
@@ -70,7 +66,7 @@
         }
 
         .label {
-            padding: 0 8px;
+            padding: 4px 6px;
         }
 
         .date, .size {

src/_h5ai/client/css/inc/view.less

@@ -126,8 +126,8 @@
 
             img {
                 vertical-align: top;
-                max-width: 64px;
+                // max-width: 64px;
-                // max-width: 32px;
+                max-width: 32px;
             }
 
             .thumb {
@@ -135,10 +135,9 @@
             }
 
             &.rational {
-                border-radius: 1px;
+                img {
-                background: #fff;
+                    min-width: 32px;
-                overflow: hidden;
+                }
-                box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
             }
         }
 

src/_h5ai/client/js/inc/ext/select.js

@@ -204,5 +204,5 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
     }
 
 
-    init();
+    // init();
 });

src/_h5ai/client/js/inc/ext/tree.js

@@ -109,10 +109,10 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
 
             item.isContentVisible = down;
             $indicator.removeClass('open close').addClass(down ? 'open' : 'close');
-            $tree.scrollpanel('update', true);
+            // $tree.scrollpanel('update', true);
             $content[down ? 'slideDown' : 'slideUp'](function () {
 
-                $tree.scrollpanel('update');
+                // $tree.scrollpanel('update');
             });
         }
 
@@ -172,9 +172,10 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
         fetchTree(item, function (root) {
 
             $('#tree')
-                .find('.sp-container').append(update(root)).end()
+                // .find('.sp-container').append(update(root)).end()
+                .append(update(root))
                 .show();
-            updateScrollbar();
+            // updateScrollbar();
         });
     }
 
@@ -186,13 +187,13 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
 
         $('<div id="tree"/>')
             .appendTo('#main-row')
-            .scrollpanel()
+            // .scrollpanel()
             .on('click', '.indicator', createOnIndicatorClick());
 
-        event.sub('ready', updateScrollbar);
+        // event.sub('ready', updateScrollbar);
         event.sub('location.changed', onLocationChanged);
 
-        $(window).on('resize', updateScrollbar);
+        // $(window).on('resize', updateScrollbar);
     }