Update info bar styles.

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

@@ -6,25 +6,50 @@
     flex: 0 0 auto;
     order: 99;
 
-    padding: 16px 16px 16px 8px;
+    padding: 16px;
     border-left: 1px solid @col-border;
     white-space: nowrap;
     overflow-x: hidden;
-    // font-weight: lighter;
+    width: 240px;
-    width: 250px;
 
-    .label, .time, .size {
+    .icon {
+        .rounded();
+        width: 240px;
+        height: 180px;
+        overflow: hidden;
+        margin: 0 auto;
+
+        img {
+            .rounded();
+            width: 240px;
+            max-height: 180px;
+            overflow: hidden;
+        }
+    }
+
+    .block {
+        border-top: 1px solid @col-border;
+        border-bottom: 1px solid @col-border;
+        margin: 0 0 24px 0;
+        padding: 24px 0;
+    }
+
+    .label {
+        font-size: 16px;
+        margin-bottom: 16px;
+    }
+
+    .time, .size {
         line-height: 20px;
+        height: 20px;
     }
 
     .qrcode {
         background: #fff;
         border-radius: 2px;
         margin: 0 auto;
-        padding: 8px;
+        width: 200px;
-        width: 150px;
+        border: 1px solid @col-border;
-        // border: @border-widget;
-        box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.4);
 
         canvas {
             display: block;

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

@@ -110,7 +110,7 @@
         top: 0;
         width: 22px;
         height: 22px;
-        background-color: @col-back-selected;
+        background: @col-back-selected;
         cursor: pointer;
         border-radius: 0 0 2px 0;
         opacity: 0.6;

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

@@ -5,9 +5,12 @@ modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resou
         }, allsettings.info);
     var template =
             '<div id="info">' +
-                '<div class="label"/>' +
+                '<div class="icon"><img/></div>' +
-                '<div class="time"/>' +
+                '<div class="block">' +
-                '<div class="size"/>' +
+                    '<div class="label"/>' +
+                    '<div class="time"/>' +
+                    '<div class="size"/>' +
+                '</div>' +
                 '<div class="qrcode"/>' +
             '</div>';
     var settingsTemplate =
@@ -19,7 +22,7 @@ modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resou
             '</div>';
     var sepTemplate = '<span class="sep"/>';
     var storekey = 'ext/info';
-    var $label, $time, $size, $qrcode;
+    var $img, $label, $time, $size, $qrcode;
     var currentFolder;
 
     // <span class="l10n-folders"/>
@@ -38,6 +41,12 @@ modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resou
 
     function update(item) {
 
+        var src = resource.icon('folder');
+        if (!item.isCurrentFolder() && item.$view) {
+            src = item.$view.find('.icon.landscape img').attr('src');
+        }
+
+        $img.attr('src', src);
         $label.text(item.label);
         if (_.isNumber(item.time)) {
             $time.text(format.formatDate(item.time));
@@ -45,7 +54,7 @@ modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resou
             $time.text('.');
         }
         if (_.isNumber(item.size)) {
-            $size.text(format.formatSize(item.size));
+            $size.text(format.formatSize(item.size) + ' (' + item.size + ' B)');
         } else {
             $size.text('.');
         }
@@ -55,12 +64,12 @@ modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resou
             $size.append(' - ' + stats.folders + ' - ' + stats.files);
         }
 
-
         $qrcode.empty().qrcode({
             render: modernizr.canvas ? 'canvas' : 'div',
-            size: 150,
+            size: 200,
-            color: '#333',
+            fill: '#555',
             background: null,
+            quiet: 2,
             radius: 0.3,
             text: window.location.protocol + '//' + window.location.host + item.absHref
         });
@@ -68,10 +77,6 @@ modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resou
 
     function onMouseenter(item) {
 
-        if (item.isCurrentParentFolder()) {
-            return;
-        }
-
         update(item);
     }
 
@@ -93,6 +98,7 @@ modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resou
         }
 
         var $info = $(template).appendTo('#main-row');
+        $img = $info.find('.icon img');
         $label = $info.find('.label');
         $time = $info.find('.time');
         $size = $info.find('.size');

src/_h5ai/conf/options.json

@@ -300,7 +300,7 @@ Options
         "mov": ["vid-avi", "vid-flv", "vid-mkv", "vid-mov", "vid-mp4", "vid-mpg", "vid-webm"],
         "doc": ["x-pdf", "x-ps"],
         "delay": 1,
-        "size": 100,
+        "size": 240,
         "exif": true
     },