diff --git a/src/_h5ai/client/css/inc/content.less b/src/_h5ai/client/css/inc/content.less index b177869a..be9fd4cc 100644 --- a/src/_h5ai/client/css/inc/content.less +++ b/src/_h5ai/client/css/inc/content.less @@ -8,6 +8,9 @@ #content-header, #content-footer { margin: 16px; color: @col; + box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); + background: #fafafa; + padding: 16px; a, a:active, a:visited { color: @col-link; @@ -15,11 +18,15 @@ cursor: pointer; &:hover { - color: #555; + color: #000; } } pre, code { font-family: @font-family-mono; } + + h1, h2, h3, h4, h5, h6, p { + margin: 0.1em 0; + } } diff --git a/src/_h5ai/client/css/inc/view-details.less b/src/_h5ai/client/css/inc/view-details.less index 68248f0a..a5b20d70 100644 --- a/src/_h5ai/client/css/inc/view-details.less +++ b/src/_h5ai/client/css/inc/view-details.less @@ -24,6 +24,12 @@ #view.view-details { + margin: 16px; + + #items { + box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); + } + .header { position: relative; white-space: nowrap; @@ -62,7 +68,8 @@ border-bottom: 1px solid rgba(0,0,0,0.07); &:hover { - border-bottom: 1px solid rgba(0,0,0,0.09); + box-shadow: 0 1px 10px 0px rgba(0,0,0,0.5); + z-index: 1; } } @@ -98,41 +105,5 @@ margin-top: -1px; } - &.size-16 { - .view-details-sized(16px) - } - - .view-details-sized(24px); - - &.size-32 { - .view-details-sized(32px) - } - - &.size-48 { - .view-details-sized(48px) - } - - &.size-64 { - .view-details-sized(64px) - } - - &.size-96 { - .view-details-sized(96px) - } - - &.size-128 { - .view-details-sized(128px) - } - - &.size-192 { - .view-details-sized(192px) - } - - &.size-256 { - .view-details-sized(256px) - } - - &.size-384 { - .view-details-sized(384px) - } + .view-details-sized(16px) } diff --git a/src/_h5ai/client/css/inc/view-grid.less b/src/_h5ai/client/css/inc/view-grid.less index e48572f7..e8297e05 100644 --- a/src/_h5ai/client/css/inc/view-grid.less +++ b/src/_h5ai/client/css/inc/view-grid.less @@ -48,28 +48,4 @@ } .view-grid-sized(48px); - - &.size-64 { - .view-grid-sized(64px) - } - - &.size-96 { - .view-grid-sized(96px) - } - - &.size-128 { - .view-grid-sized(128px) - } - - &.size-192 { - .view-grid-sized(192px) - } - - &.size-256 { - .view-grid-sized(256px) - } - - &.size-384 { - .view-grid-sized(384px) - } } diff --git a/src/_h5ai/client/css/inc/view-icons.less b/src/_h5ai/client/css/inc/view-icons.less index f6b6913b..aa18895a 100644 --- a/src/_h5ai/client/css/inc/view-icons.less +++ b/src/_h5ai/client/css/inc/view-icons.less @@ -48,20 +48,4 @@ } .view-icons-sized(96px); - - &.size-128 { - .view-icons-sized(128px); - } - - &.size-192 { - .view-icons-sized(192px); - } - - &.size-256 { - .view-icons-sized(256px); - } - - &.size-384 { - .view-icons-sized(384px); - } } diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less index 5a673758..d32e4c58 100644 --- a/src/_h5ai/client/css/inc/view.less +++ b/src/_h5ai/client/css/inc/view.less @@ -121,7 +121,7 @@ box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); border-radius: 0 20px 20px 0; opacity: 0.6; - padding: 1px 1px 1px 3px; + padding: 2px; &:hover { opacity: 0.8; diff --git a/src/_h5ai/client/js/inc/view/viewmode.js b/src/_h5ai/client/js/inc/view/viewmode.js index 4756215f..5c5705e0 100644 --- a/src/_h5ai/client/js/inc/view/viewmode.js +++ b/src/_h5ai/client/js/inc/view/viewmode.js @@ -1,7 +1,7 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event'], function (_, $, allsettings, resource, store, event) { var modes = ['details', 'grid', 'icons']; - var sizes = [16, 24, 32, 48, 64, 96, 128, 192, 256, 384]; + var sizes = [16, 24, 32, 48, 64, 96, 128, 192, 256]; var settings = _.extend({}, { modes: modes, sizes: sizes @@ -15,6 +15,9 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c ''; var sizeTemplate = ''; + var dynamicStyleTag = null; + + sizes = settings.sizes.sort(function (a, b) { return a-b; }); function adjustSpacing() { @@ -22,6 +25,52 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c // kept here for later use } + function applyCss(rules) { + + if (dynamicStyleTag) { + document.head.removeChild(dynamicStyleTag); + } + dynamicStyleTag = document.createElement('style'); + dynamicStyleTag.appendChild(document.createTextNode('')); // fix webkit + document.head.appendChild(dynamicStyleTag); + _.each(rules, function (rule, i) { + + dynamicStyleTag.sheet.insertRule(rule, i); + }); + } + + function cropSize(size, min, max) { + + min = min || 4; + max = max || 2048; + return Math.min(max, Math.max(min, size)); + } + + function applyCssSizes(size) { + + var dsize = cropSize(size, 16, 96); + var gsize = cropSize(size, 48, 192); + var isize = cropSize(size, 96); + var rules = [ + '#view.view-details .item .label { line-height: ' + (dsize+14) + 'px !important; }', + '#view.view-details .item .date { line-height: ' + (dsize+14) + 'px !important; }', + '#view.view-details .item .size { line-height: ' + (dsize+14) + 'px !important; }', + '#view.view-details .square { width: ' + dsize + 'px !important; }', + '#view.view-details .square img { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }', + '#view.view-details .label { margin: 0 246px 0 ' + (dsize+32) + 'px !important; }', + + '#view.view-grid .item .label { line-height: ' + gsize + 'px !important; }', + '#view.view-grid .square { width: ' + gsize + 'px !important; }', + '#view.view-grid .square img { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }', + + '#view.view-icons .item { width: ' + (isize*4/3) + 'px !important; }', + '#view.view-icons .landscape img { width: ' + isize + 'px !important; height: ' + isize + 'px !important; }', + '#view.view-icons .landscape .thumb { width: ' + (isize*4/3) + 'px !important; }' + ]; + applyCss(rules); + } + + function update(mode, size) { var $view = $('#view'); @@ -43,15 +92,8 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c } }); - _.each(sizes, function (s) { - if (s === size) { - $view.addClass('size-' + s).show(); - } else { - $view.removeClass('size-' + s); - } - }); - - $('#view-size').val(_.indexOf(_.intersection(sizes, settings.sizes), size)); + applyCssSizes(size); + $('#view-size').val(_.indexOf(sizes, size)); adjustSpacing(); } diff --git a/src/_h5ai/conf/options.json b/src/_h5ai/conf/options.json index 00d814de..af13d4b7 100644 --- a/src/_h5ai/conf/options.json +++ b/src/_h5ai/conf/options.json @@ -34,10 +34,10 @@ Options The user selected view mode is also stored local in modern browsers so that it will be persistent. - setParentFolderLabels: set parent folder labels to real folder names - - sizes: array, subset of [16, 24, 32, 48, 64, 96, 128, 192, 256, 384] - the first value indicates the default view mode. If only one value - is given the view mode is fixed and the selector buttons are hidden. - The user selected view mode is also stored local in modern browsers + - sizes: array of positive integers + the first value indicates the default view size. If only one value + is given the view size is fixed and the selector buttons are hidden. + The user selected view size is also stored local in modern browsers so that it will be persistent. - smartBrowsing: use History API if available (no need to reload the whole page) - theme: name of one of the folders in "_{{pkg.name}}/client/themes", defaults to builtin fallback @@ -52,7 +52,7 @@ Options "hideParentFolder": true, "modes": ["details", "grid", "icons"], "setParentFolderLabels": true, - "sizes": [16, 24, 32, 48, 64, 96, 128, 192, 256, 384], + "sizes": [16, 24, 32, 48, 64, 96, 128, 192, 256], "smartBrowsing": true, "theme": "", "unmanaged": ["index.html", "index.htm", "index.php"],