diff --git a/src/_h5ai/client/css/inc/info.less b/src/_h5ai/client/css/inc/info.less index c76f27ea..1791614c 100644 --- a/src/_h5ai/client/css/inc/info.less +++ b/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: 250px; + width: 240px; - .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: 150px; - // border: @border-widget; - box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.4); + width: 200px; + border: 1px solid @col-border; canvas { display: block; diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less index 77c9147a..dca1e7e5 100644 --- a/src/_h5ai/client/css/inc/view.less +++ b/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; diff --git a/src/_h5ai/client/js/inc/ext/info.js b/src/_h5ai/client/js/inc/ext/info.js index 54fe8d36..d8bcfc9d 100644 --- a/src/_h5ai/client/js/inc/ext/info.js +++ b/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 = '
' + - '
' + - '
' + - '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + '
' + '
'; var settingsTemplate = @@ -19,7 +22,7 @@ modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resou '
'; var sepTemplate = ''; var storekey = 'ext/info'; - var $label, $time, $size, $qrcode; + var $img, $label, $time, $size, $qrcode; var currentFolder; // @@ -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, - color: '#333', + size: 200, + 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'); diff --git a/src/_h5ai/conf/options.json b/src/_h5ai/conf/options.json index a9e5c167..3a0e82aa 100644 --- a/src/_h5ai/conf/options.json +++ b/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 },