diff --git a/CHANGELOG.md b/CHANGELOG.md index 9c61e604..277bf1e9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * replaces PHP backtick operator with `exec` * adds initial theme support +* adds sidebar * adds icons from [Evolvere Icon Theme](http://franksouza183.deviantart.com/art/Evolvere-Icon-theme-440718295) * adds PHP variant to calc folder sizes * adds scroll position reset on location change (issue [#279](https://github.com/lrsjng/h5ai/issues/279)) diff --git a/src/_h5ai/client/css/inc/delete.less b/src/_h5ai/client/css/inc/delete.less deleted file mode 100644 index 1942ce80..00000000 --- a/src/_h5ai/client/css/inc/delete.less +++ /dev/null @@ -1,10 +0,0 @@ - -#delete { - display: none; - .topbar-right; - .transition(all 0.2s ease-in-out); - - &.failed { - background-color: rgba(255,0,0,0.5); - } -} diff --git a/src/_h5ai/client/css/inc/dropbox.less b/src/_h5ai/client/css/inc/dropbox.less deleted file mode 100644 index ed8dfefa..00000000 --- a/src/_h5ai/client/css/inc/dropbox.less +++ /dev/null @@ -1,89 +0,0 @@ - -#content { - border: 1px dashed #fff; - border-radius: 8px; - .transition(border-color 0.2s ease-in-out); - - &.hint { - border-color: #ddd; - } - &.match { - border-color: #999; - } -} - - -#uploads { - width: 450px; - margin: 12px auto; - padding: 0; - list-style: none; - - .upload { - color: #555; - font-size: 0.9em; - - .name { - display: inline-block; - white-space: nowrap; - overflow: hidden; - - &:before { - display: inline-block; - content: '•'; - color: #55c; - width: 1em; - text-align: center; - padding-right: 1em; - } - } - - .size { - display: none; - float: right; - white-space: nowrap; - - &:after { - content: ' bytes' - } - } - - .error { - float: right; - white-space: nowrap; - color: #c55; - } - - .finished { - float: right; - white-space: nowrap; - color: #008200; - } - - .progress { - display: inline-block; - margin: 4px 8px; - - width: 84px; - height: 8px; - background-color: #ddd; - overflow: hidden; - float: right; - - .bar { - width: 0%; - height: 100%; - background-color: #999; - } - } - - &.finished .name:before { - content: '✔'; - color: #008200; - } - &.error .name:before { - content: '✖'; - color: #c55; - } - } -} diff --git a/src/_h5ai/client/css/inc/filter.less b/src/_h5ai/client/css/inc/filter.less index 9040dc23..ebc23619 100644 --- a/src/_h5ai/client/css/inc/filter.less +++ b/src/_h5ai/client/css/inc/filter.less @@ -8,6 +8,7 @@ color: @col; background-color: rgba(0,0,0,0); width: 30px; + outline: none; } &.current { diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less index 5b34da55..1420fc31 100644 --- a/src/_h5ai/client/css/inc/general.less +++ b/src/_h5ai/client/css/inc/general.less @@ -47,6 +47,7 @@ html { min-height: 100%; overflow: auto; + overflow-y: scroll; &.js .noJsMsg { display: none; diff --git a/src/_h5ai/client/css/inc/l10n.less b/src/_h5ai/client/css/inc/l10n.less index 04c0c037..e69de29b 100644 --- a/src/_h5ai/client/css/inc/l10n.less +++ b/src/_h5ai/client/css/inc/l10n.less @@ -1,54 +0,0 @@ - -#langSelector { - position: relative; - cursor: pointer; - - .langOptions { - position: absolute; - z-index: 2; - overflow: auto; - display: none; - right: 0; - top: 0; - max-height: 200px; - background-color: @col-widget-back; - border: @border-widget; - - .sp-scrollbar { - margin: 0; - width: 6px; - background-color: @col-sb-back; - cursor: pointer; - - .sp-thumb { - background-color: @col-sb-thumb; - } - &.active .sp-thumb { - background-color: @col-sb-thumb-active; - } - } - - ul { - margin: 0; - padding: 0; - list-style: none; - text-align: left; - } - - li { - padding: 8px 24px 10px 24px; - white-space: nowrap; - border-top: @border-widget-sep; - .transition(all 0.2s ease-in-out); - - &.current { - color: #333; - background-color: @col-widget-back-sel; - } - &:hover { - color: @col-hover; - background-color: @col-widget-back-hover; - } - } - } -} diff --git a/src/_h5ai/client/css/inc/qrcode.less b/src/_h5ai/client/css/inc/qrcode.less index f12c94b4..616e087b 100644 --- a/src/_h5ai/client/css/inc/qrcode.less +++ b/src/_h5ai/client/css/inc/qrcode.less @@ -4,7 +4,7 @@ position: fixed; right: 16px; bottom: 50px; - z-index: 1; + z-index: 10; background-color: @col-widget-back; border: @border-widget; diff --git a/src/_h5ai/client/css/inc/responsive.less b/src/_h5ai/client/css/inc/responsive.less index d83d01d2..2855c6d5 100644 --- a/src/_h5ai/client/css/inc/responsive.less +++ b/src/_h5ai/client/css/inc/responsive.less @@ -7,9 +7,6 @@ .current { display: block; } - .view span { - display: none; - } } #view.view-details { .header .label, .item .label { @@ -21,7 +18,6 @@ } #view.view-icons { padding: 0; - border: none; } #bottombar { .center { @@ -54,7 +50,7 @@ a[href]:after { position: static; margin-top: 2em; } -#tree { +#tree, #sidebar { display: none !important; } } diff --git a/src/_h5ai/client/css/inc/sidebar.less b/src/_h5ai/client/css/inc/sidebar.less new file mode 100644 index 00000000..81693dff --- /dev/null +++ b/src/_h5ai/client/css/inc/sidebar.less @@ -0,0 +1,133 @@ + +#sidebar { + position: fixed; + right: -220px; + width: 200px; + top: 31px; + height: 100%; + z-index: 3; + overflow: auto; + padding: 8px; + background-color: @col-widget-back; + border-left: @border-widget; + + .sp-scrollbar { + width: 6px; + background-color: @col-sb-back; + cursor: pointer; + + .sp-thumb { + background-color: @col-sb-thumb; + } + &.active .sp-thumb { + background-color: @col-sb-thumb-active; + } + } +} + +#settings { + a, a:active, a:visited, span.element { + color: @col; + cursor: pointer; + text-decoration: none; + opacity: 0.7; + .transition(all 0.2s ease-in-out); + + display: block; + height: 30px; + line-height: 30px; + padding: 0 10px; + + &:hover, &.hover { + .topbar-hover; + } + } + .current { + a, span.element { + .topbar-highlight; + } + } + img { + position: relative; + top: -2px; + width: 16px; + height: 16px; + } + img + span, img + input { + margin-left: 6px; + } + + .view { + display: inline-block; + margin: 0 4px 0 0; + } + + .block { + display: block; + margin: 12px 0; + } + + .select { + background-color: @col-widget-back-highlight; + width: 200px; + overflow: hidden; + } + + input, select { + font-family: @font-family; + font-size: 13px; + font-weight: @font-weight; + color: @col; + background-color: @col-widget-back; + width: 100%; + height: 30px; + line-height: 30px; + border: 0 solid #000; + outline: none; + cursor: pointer; + } + + select { + background: transparent; + -webkit-appearance: none; + padding: 0 4px; + width: 220px; + } + + input[type='range'] { + -webkit-appearance: none; + border-width: 0; + border-radius: 2px; + background-color: #eee; + height: 12px; + vertical-align: middle; + width: 64px; + margin: 0 0 4px 12px; + } + input[type='range']::-webkit-slider-thumb { + -webkit-appearance: none; + border: 1px solid #aaa; + border-radius: 2px; + background-color: #aaa; + height: 12px; + width: 12px; + vertical-align: middle; + } + input[type='range']::-moz-range-track { + -moz-appearance: none; + border-width: 0; + border-radius: 2px; + background-color: #eee; + height: 6px; + vertical-align: middle; + } + input[type='range']::-moz-range-thumb { + -moz-appearance: none; + border: 1px solid #aaa; + border-radius: 2px; + background-color: #aaa; + height: 12px; + width: 12px; + vertical-align: middle; + } +} diff --git a/src/_h5ai/client/css/inc/tree.less b/src/_h5ai/client/css/inc/tree.less index be456672..6508bf61 100644 --- a/src/_h5ai/client/css/inc/tree.less +++ b/src/_h5ai/client/css/inc/tree.less @@ -3,7 +3,7 @@ display: none; position: fixed; left: 0; - top: 31px; + top: 31px; height: 100%; z-index: 3; overflow: auto; diff --git a/src/_h5ai/client/css/styles.less b/src/_h5ai/client/css/styles.less index 73113a4b..82587368 100644 --- a/src/_h5ai/client/css/styles.less +++ b/src/_h5ai/client/css/styles.less @@ -5,10 +5,9 @@ @import "inc/general"; @import "inc/topbar"; @import "inc/bottombar"; +@import "inc/sidebar"; @import "inc/download"; -@import "inc/delete"; @import "inc/filter"; -@import "inc/l10n"; @import "inc/tree"; @import "inc/qrcode"; @import "inc/preview"; @@ -24,7 +23,6 @@ @import "inc/view-icons"; @import "inc/view-grid"; // @import "inc/context-menu"; -@import "inc/dropbox"; @import "inc/fallback"; @import "inc/responsive"; diff --git a/src/_h5ai/client/images/delete.svg b/src/_h5ai/client/images/delete.svg deleted file mode 100644 index 4cc729ef..00000000 --- a/src/_h5ai/client/images/delete.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Gnome Symbolic Icon Theme - - - - image/svg+xml - - Gnome Symbolic Icon Theme - - - - - - - diff --git a/src/_h5ai/client/js/inc/ext/l10n.js b/src/_h5ai/client/js/inc/ext/l10n.js index dd9bb961..ce1d8847 100644 --- a/src/_h5ai/client/js/inc/ext/l10n.js +++ b/src/_h5ai/client/js/inc/ext/l10n.js @@ -11,8 +11,8 @@ modulejs.define('ext/l10n', ['_', '$', 'core/settings', 'core/langs', 'core/form isoCode: 'en', lang: 'english', details: 'details', - list: "list", - grid: "grid", + list: 'list', + grid: 'grid', icons: 'icons', name: 'Name', lastModified: 'Last modified', @@ -28,11 +28,8 @@ modulejs.define('ext/l10n', ['_', '$', 'core/settings', 'core/langs', 'core/form 'delete': 'delete' }, - template = '' + - ' - ' + - '
    ' + - '', - langOptionTemplate = '
  • ', + blockTemplate = '
    ', adjustSpacing = function () { @@ -57,29 +61,44 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c _.each(sizes, function (s) { if (s === size) { - $('#view-' + s).addClass('current'); $view.addClass('size-' + s).show(); } else { - $('#view-' + s).removeClass('current'); $view.removeClass('size-' + s); } }); + $('#view-size').val(_.indexOf(_.intersection(sizes, settings.sizes), size)); + adjustSpacing(); }, init = function () { - var $navbar = $('#navbar'); + var $sidebar = $('#sidebar'), + $settings = $('#settings'), + $viewBlock = $('
    '), + max; + + $(sidebarToggleTemplate) + .on('click', 'a', function (event) { + + menuIsVisible = !menuIsVisible; + $sidebar.stop().animate({ + right: menuIsVisible ? 0 : -$sidebar.outerWidth()-1 + }); + event.preventDefault(); + }) + .appendTo('#navbar'); settings.modes = _.intersection(settings.modes, modes); if (settings.modes.length > 1) { - _.each(modes.slice(0).reverse(), function (mode) { + _.each(modes, function (mode) { if (_.contains(settings.modes, mode)) { - $(template.replace(/\[MODE\]/g, mode)) - .appendTo($navbar) + $(modeTemplate.replace(/\[MODE\]/g, mode)) + .appendTo($viewBlock) .on('click', 'a', function (event) { + update(mode); event.preventDefault(); }); @@ -88,18 +107,18 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c } if (settings.sizes.length > 1) { - _.each(sizes.slice(0).reverse(), function (size) { - if (_.contains(settings.sizes, size)) { - $(sizeTemplate.replace(/\[SIZE\]/g, size)) - .appendTo($navbar) - .on('click', 'a', function (event) { - update(null, size); - event.preventDefault(); - }); - } - }); + max = settings.sizes.length-1; + $(sizeTemplate) + .prop('max', max).attr('max', max) + .on('input', function (event) { + + update(null, settings.sizes[parseInt(event.target.value, 10)]); + }) + .appendTo($viewBlock); } + $viewBlock.appendTo($settings); + update(); event.sub('location.changed', adjustSpacing); diff --git a/src/_h5ai/conf/options.json b/src/_h5ai/conf/options.json index 8acbce8d..41678d2b 100644 --- a/src/_h5ai/conf/options.json +++ b/src/_h5ai/conf/options.json @@ -52,7 +52,7 @@ Options "hideParentFolder": false, "modes": ["details", "grid", "icons"], "setParentFolderLabels": true, - "sizes": [24, 48, 96], + "sizes": [24, 32, 48, 64, 96], "smartBrowsing": true, "theme": "fallback", "unmanaged": ["index.html", "index.htm", "index.php"], diff --git a/src/_h5ai/server/php/inc/page.php.jade b/src/_h5ai/server/php/inc/page.php.jade index edaf03c6..b623a080 100644 --- a/src/_h5ai/server/php/inc/page.php.jade +++ b/src/_h5ai/server/php/inc/page.php.jade @@ -39,4 +39,7 @@ html.no-js.browser( lang="en" ) span.right span.center + div#sidebar + div#settings + div#fallback !{fallback}