mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2024-09-20 04:38:51 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update info bar styles.

Browse source
This commit is contained in:
Lars Jung 2015-04-01 03:22:57 +02:00
parent d575de2459
commit 936ffaf768
4 changed files with 53 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/_h5ai/client/css/inc/info.less
View file

@ -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;

2
src/_h5ai/client/css/inc/view.less
View file

@ -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;

30
src/_h5ai/client/js/inc/ext/info.js
View file

@ -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="time"/>' +
'<div class="size"/>' +
'<div class="icon"><img/></div>' +
'<div class="block">' +
'<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,
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');

2
src/_h5ai/conf/options.json
View file

@ -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
},