Initial switch to info bar. Aggregates status bar and QRCode.

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

@@ -0,0 +1,33 @@
+
+#info {
+    display: none;
+
+    overflow: auto;
+    flex: 0 0 auto;
+    order: 99;
+
+    padding: 16px 16px 16px 8px;
+    border-left: 1px solid @col-border;
+    white-space: nowrap;
+    overflow-x: hidden;
+    // font-weight: lighter;
+    width: 250px;
+
+    .label, .time, .size {
+        line-height: 20px;
+    }
+
+    .qrcode {
+        background: #fff;
+        border-radius: 2px;
+        margin: 0 auto;
+        padding: 8px;
+        width: 150px;
+        // border: @border-widget;
+        box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.4);
+
+        canvas {
+            display: block;
+        }
+    }
+}

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

@@ -1,17 +0,0 @@
-
-#qrcode {
-    display: none;
-    position: fixed;
-    left: 8px;
-    bottom: 24px;
-    z-index: 10;
-
-    background-color: @col-widget-back;
-    border: @border-widget;
-    border-radius: 8px;
-    padding: 8px;
-
-    canvas {
-        display: block;
-    }
-}

src/_h5ai/client/css/styles.less

@@ -8,7 +8,7 @@
 @import "inc/download";
 @import "inc/filter";
 @import "inc/tree";
-@import "inc/qrcode";
+@import "inc/info";
 @import "inc/preview";
 @import "inc/preview-aud";
 @import "inc/preview-img";

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

@@ -0,0 +1,122 @@
+modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/format'], function (_, $, modernizr, allsettings, resource, store, event, format) {
+
+    var settings = _.extend({
+            enabled: false
+        }, allsettings.info);
+    var template =
+            '<div id="info">' +
+                '<div class="label"/>' +
+                '<div class="time"/>' +
+                '<div class="size"/>' +
+                '<div class="qrcode"/>' +
+            '</div>';
+    var settingsTemplate =
+            '<div class="block">' +
+                '<h1 class="l10n-info">Info</h1>' +
+                '<div id="view-info" class="button view">' +
+                    '<img src="' + resource.image('info-toggle') + '" alt="view-info"/>' +
+                '</div>' +
+            '</div>';
+    var sepTemplate = '<span class="sep"/>';
+    var storekey = 'ext/info';
+    var $label, $time, $size, $qrcode;
+    var currentFolder;
+
+    // <span class="l10n-folders"/>
+    // <span class="l10n-files"/>
+
+    function updateSettings() {
+
+        if (store.get(storekey)) {
+            $('#view-info').addClass('active');
+            $('#info').show();
+        } else {
+            $('#view-info').removeClass('active');
+            $('#info').hide();
+        }
+    }
+
+    function update(item) {
+
+        $label.text(item.label);
+        if (_.isNumber(item.time)) {
+            $time.text(format.formatDate(item.time));
+        } else {
+            $time.text('.');
+        }
+        if (_.isNumber(item.size)) {
+            $size.text(format.formatSize(item.size));
+        } else {
+            $size.text('.');
+        }
+
+        if (item.isFolder()) {
+            var stats = item.getStats();
+            $size.append(' - ' + stats.folders + ' - ' + stats.files);
+        }
+
+
+        $qrcode.empty().qrcode({
+            render: modernizr.canvas ? 'canvas' : 'div',
+            size: 150,
+            color: '#333',
+            background: null,
+            radius: 0.3,
+            text: window.location.protocol + '//' + window.location.host + item.absHref
+        });
+    }
+
+    function onMouseenter(item) {
+
+        if (item.isCurrentParentFolder()) {
+            return;
+        }
+
+        update(item);
+    }
+
+    function onMouseleave(item) {
+
+        update(currentFolder);
+    }
+
+    function onLocationChanged(item) {
+
+        currentFolder = item;
+        update(currentFolder);
+    }
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        var $info = $(template).appendTo('#main-row');
+        $label = $info.find('.label');
+        $time = $info.find('.time');
+        $size = $info.find('.size');
+        $qrcode = $info.find('.qrcode');
+
+        $(settingsTemplate)
+            .appendTo('#settings')
+            .find('#view-info')
+            .on('click', function (ev) {
+
+                store.put(storekey, !store.get(storekey));
+                updateSettings();
+                ev.preventDefault();
+            });
+
+        // ensure stored value is boolean, default to true
+        store.put(storekey, store.get(storekey) !== false);
+        updateSettings();
+
+        event.sub('location.changed', onLocationChanged);
+        event.sub('item.mouseenter', onMouseenter);
+        event.sub('item.mouseleave', onMouseleave);
+    }
+
+
+    init();
+});

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

@@ -1,53 +0,0 @@
-modulejs.define('ext/qrcode', ['_', '$', 'modernizr', 'core/settings', 'core/event'], function (_, $, modernizr, allsettings, event) {
-
-    var settings = _.extend({
-            enabled: false,
-            size: 150
-        }, allsettings.qrcode);
-    var template = '<div id="qrcode"/>';
-    var $qrcode, hideTimeoutId;
-
-
-    function update(item) {
-
-        $qrcode.empty().qrcode({
-            render: modernizr.canvas ? 'canvas' : 'div',
-            size: settings.size,
-            color: '#333',
-            bgColor: '#fff',
-            radius: 0.5,
-            text: window.location.protocol + '//' + window.location.host + item.absHref
-        });
-    }
-
-    function onMouseenter(item) {
-
-        if (!item.isFolder()) {
-            update(item);
-            clearTimeout(hideTimeoutId);
-            $qrcode.stop(true, true).fadeIn(400);
-        }
-    }
-
-    function onMouseleave(item) {
-
-        hideTimeoutId = setTimeout(function () {
-
-            $qrcode.stop(true, true).fadeOut(400);
-        }, 200);
-    }
-
-    function init() {
-
-        if (!settings.enabled) {
-            return;
-        }
-
-        $qrcode = $(template).appendTo('body');
-
-        event.sub('item.mouseenter', onMouseenter);
-        event.sub('item.mouseleave', onMouseleave);
-    }
-
-    init();
-});

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

@@ -1,82 +0,0 @@
-modulejs.define('ext/statusbar', ['_', '$', 'core/settings', 'core/format', 'core/event'], function (_, $, allsettings, format, event) {
-
-    var settings = _.extend({
-            enabled: false
-        }, allsettings.statusbar);
-    var template =
-            '<span class="statusbar">' +
-                '<span class="status default">' +
-                    '<span class="folderTotal"/> <span class="l10n-folders"/>' +
-                    '<span class="sep"/>' +
-                    '<span class="fileTotal"/> <span class="l10n-files"/>' +
-                '</span>' +
-                '<span class="status dynamic"/>' +
-            '</span>';
-    var sepTemplate = '<span class="sep"/>';
-    var $statusDynamic;
-    var $statusDefault;
-
-
-    function update(html) {
-
-        if (html) {
-            $statusDefault.hide();
-            $statusDynamic.empty().append(html).show();
-        } else {
-            $statusDynamic.empty().hide();
-            $statusDefault.show();
-        }
-    }
-
-    function init() {
-
-        if (!settings.enabled) {
-            return;
-        }
-
-        var $statusbar = $(template);
-        var $folderTotal = $statusbar.find('.folderTotal');
-        var $fileTotal = $statusbar.find('.fileTotal');
-        var onLocationChanged = function (item) {
-
-                var stats = item.getStats();
-                $folderTotal.text(stats.folders);
-                $fileTotal.text(stats.files);
-            };
-
-        $statusDefault = $statusbar.find('.status.default');
-        $statusDynamic = $statusbar.find('.status.dynamic');
-
-        $('#bottombar > .center').append($statusbar);
-
-        event.sub('statusbar', update);
-        event.sub('location.changed', onLocationChanged);
-        event.sub('location.refreshed', onLocationChanged);
-
-        event.sub('item.mouseenter', function (item) {
-
-            if (item.isCurrentParentFolder()) {
-                return;
-            }
-
-            var $span = $('<span/>').append(item.label);
-
-            if (_.isNumber(item.time)) {
-                $span.append(sepTemplate).append(format.formatDate(item.time));
-            }
-            if (_.isNumber(item.size)) {
-                $span.append(sepTemplate).append(format.formatSize(item.size));
-            }
-
-            update($span);
-        });
-
-        event.sub('item.mouseleave', function (item) {
-
-            update();
-        });
-    }
-
-
-    init();
-});

src/_h5ai/conf/options.json

@@ -60,7 +60,7 @@ Options
     },
 
     /*
-    Use a context menu (right-click) on selected elements.
+    Enable a context menu (right-click) on some elements.
     */
     "contextmenu": {
         "enabled": true
@@ -137,6 +137,13 @@ Options
         "id": "UA-000000-0"
     },
 
+    /*
+    Enable a generic info side bar.
+    */
+    "info": {
+        "enabled": true
+    },
+
     /*
     Localization, for example "en", "de" etc. - see "_h5ai/conf/l10n" folder for
     possible values. Adjust it to your needs. If lang is not found
@@ -244,16 +251,6 @@ Options
         "types": ["vid-avi", "vid-flv", "vid-mkv", "vid-mov", "vid-mp4", "vid-mpg", "vid-webm"]
     },
 
-    /*
-    Show QRCodes on hovering files.
-
-    - size: width and height in pixel
-    */
-    "qrcode": {
-        "enabled": true,
-        "size": 150
-    },
-
     /*
     Make entries selectable.
     At the moment only needed for packaged download.
@@ -286,13 +283,6 @@ Options
         "folders": 0
     },
 
-    /*
-    Show additional info in a statusbar.
-    */
-    "statusbar": {
-        "enabled": true
-    },
-
     /*
     Show thumbnails for image files. Needs the "/_{{pkg.name}}/cache" folder to be
     writable for the web Server.