diff --git a/src/_h5ai/client/css/inc/info.less b/src/_h5ai/client/css/inc/info.less
new file mode 100644
index 00000000..c76f27ea
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/_h5ai/client/css/inc/qrcode.less b/src/_h5ai/client/css/inc/qrcode.less
deleted file mode 100644
index e4efae34..00000000
--- a/src/_h5ai/client/css/inc/qrcode.less
+++ /dev/null
@@ -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;
- }
-}
diff --git a/src/_h5ai/client/css/styles.less b/src/_h5ai/client/css/styles.less
index 6eef1098..7964dae6 100644
--- a/src/_h5ai/client/css/styles.less
+++ b/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";
diff --git a/src/_h5ai/client/images/ui/info.svg b/src/_h5ai/client/images/ui/info-toggle.svg
similarity index 100%
rename from src/_h5ai/client/images/ui/info.svg
rename to src/_h5ai/client/images/ui/info-toggle.svg
diff --git a/src/_h5ai/client/js/inc/ext/info.js b/src/_h5ai/client/js/inc/ext/info.js
new file mode 100644
index 00000000..54fe8d36
--- /dev/null
+++ b/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 =
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
';
+ var settingsTemplate =
+ '' +
+ '
Info
' +
+ '
' +
+ '
';
+ var sepTemplate = '';
+ var storekey = 'ext/info';
+ var $label, $time, $size, $qrcode;
+ var currentFolder;
+
+ //
+ //
+
+ 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();
+});
diff --git a/src/_h5ai/client/js/inc/ext/qrcode.js b/src/_h5ai/client/js/inc/ext/qrcode.js
deleted file mode 100644
index 112858c1..00000000
--- a/src/_h5ai/client/js/inc/ext/qrcode.js
+++ /dev/null
@@ -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 = '';
- 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();
-});
diff --git a/src/_h5ai/client/js/inc/ext/statusbar.js b/src/_h5ai/client/js/inc/ext/statusbar.js
deleted file mode 100644
index 38b307c6..00000000
--- a/src/_h5ai/client/js/inc/ext/statusbar.js
+++ /dev/null
@@ -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 =
- '' +
- '' +
- ' ' +
- '' +
- ' ' +
- '' +
- '' +
- '';
- var sepTemplate = '';
- 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 = $('').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();
-});
diff --git a/src/_h5ai/conf/options.json b/src/_h5ai/conf/options.json
index 16bf8daf..a9e5c167 100644
--- a/src/_h5ai/conf/options.json
+++ b/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.