diff --git a/src/_h5ai/client/css/inc/download.less b/src/_h5ai/client/css/inc/download.less index 675f71b1..fd09199b 100644 --- a/src/_h5ai/client/css/inc/download.less +++ b/src/_h5ai/client/css/inc/download.less @@ -1,9 +1,8 @@ #download { display: none; - .transition(all 0.2s ease-in-out); &.failed { - background-color: rgba(255,0,0,0.5); + background-color: @col-error; } } diff --git a/src/_h5ai/client/css/inc/filter.less b/src/_h5ai/client/css/inc/filter.less index b717222b..6c82c284 100644 --- a/src/_h5ai/client/css/inc/filter.less +++ b/src/_h5ai/client/css/inc/filter.less @@ -2,18 +2,23 @@ #filter { input { + display: none; border: none; font-family: @font-family; font-weight: lighter; + font-size: 16px; color: @col; background: transparent; - width: 30px; outline: 0; + width: 160px; + padding: 0 12px 0 4px; + line-height: 48px; + vertical-align: top; } - &.current { + &.active { input { - width: 150px; + display: inline-block; } } } diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less index 4b225c91..7ffb7a94 100644 --- a/src/_h5ai/client/css/inc/general.less +++ b/src/_h5ai/client/css/inc/general.less @@ -56,7 +56,8 @@ @col-sb-thumb-active: rgba(0,0,0,0.25); @col-range-back: rgb(224,224,224); -@col-range-thumb: rgb(190,190,190); +// @col-range-thumb: rgb(190,190,190); +@col-range-thumb: #555; @border-widget: 1px solid @col-border; @border-widget-sep: 1px solid @col-widget-sep; @@ -135,6 +136,11 @@ html { &.browser .noBrowserMsg { display: none; } + &.js.browser { + #bottombar { + display: none; + } + } } body { diff --git a/src/_h5ai/client/css/inc/sidebar.less b/src/_h5ai/client/css/inc/sidebar.less index f9e45396..de554303 100644 --- a/src/_h5ai/client/css/inc/sidebar.less +++ b/src/_h5ai/client/css/inc/sidebar.less @@ -4,12 +4,15 @@ overflow: auto; flex: 0 0 auto; order: 0; - width: 264px; - border-right: 1px solid @col-border; + // width: 264px; + // border-right: 1px solid @col-border; + border-right: 2px solid rgba(0, 0, 0, 0.06); + background: #fafafa; + z-index: 1; } #settings { - padding: 16px 8px 16px 16px; + padding: 16px; .block { display: block; @@ -25,7 +28,7 @@ color: @col; cursor: pointer; text-decoration: none; - opacity: 0.7; + // opacity: 0.7; .transition(all 0.2s ease-in-out); display: block; @@ -34,7 +37,8 @@ &:hover { opacity: 1.0; - box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); + background: rgba(0,0,0,0.03); + // box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); } } @@ -66,7 +70,8 @@ outline: 0; &:hover { - box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); + background: rgba(0,0,0,0.03); + // box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); } } @@ -87,7 +92,8 @@ outline: 0; &:hover { - box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); + background: rgba(0,0,0,0.03); + // box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); } } @@ -134,4 +140,8 @@ input[type='range']::-webkit-slider-thumb { .range-thumb; margin-top: -5px; } input[type='range']::-moz-range-thumb { .range-thumb; } input[type='range']::-ms-thumb { .range-thumb; } + + #view-size { + display: block; + } } diff --git a/src/_h5ai/client/css/inc/topbar.less b/src/_h5ai/client/css/inc/topbar.less index f288a01b..d7e3b38c 100644 --- a/src/_h5ai/client/css/inc/topbar.less +++ b/src/_h5ai/client/css/inc/topbar.less @@ -17,8 +17,29 @@ } -#navbar { - display: none; +#backlink { + overflow: hidden; + flex: 0 0 auto; + order: 99; + text-align: center; + padding: 6px 12px; + .transition(all 0.2s ease-in-out); + + &, &:active, &:visited { + color: @col-text-disabled-black; + cursor: pointer; + text-decoration: none; + } + &:hover { + color: @col-hover; + } + &:focus { + outline: 0; + } + + div { + line-height: 18px; + } } @@ -31,6 +52,7 @@ .tool { display: inline-block; cursor: pointer; + .transition(all 0.2s ease-in-out); img { display: inline-block; @@ -38,13 +60,17 @@ height: 24px; padding: 12px; } + + &:hover img { + background: rgba(0,0,0,0.03); + } } } #crumbbar { overflow: hidden; - flex: 0 0 auto; + flex: 1 1 auto; order: 2; height: 48px; font-size: 16px; diff --git a/src/_h5ai/client/css/inc/tree.less b/src/_h5ai/client/css/inc/tree.less index c8a0859e..55def641 100644 --- a/src/_h5ai/client/css/inc/tree.less +++ b/src/_h5ai/client/css/inc/tree.less @@ -7,7 +7,7 @@ order: 1; padding: 16px 16px 16px 8px; - border-right: 1px solid @col-border; + // border-right: 1px solid @col-border; white-space: nowrap; max-width: 250px; overflow-x: hidden; diff --git a/src/_h5ai/client/images/settings.svg b/src/_h5ai/client/images/settings.svg index 4db49002..7ccdaf00 100644 --- a/src/_h5ai/client/images/settings.svg +++ b/src/_h5ai/client/images/settings.svg @@ -9,8 +9,9 @@ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" - version="1.1" + viewBox="0 0 24 24" id="svg2" + version="1.1" inkscape:version="0.48.4 r9939" sodipodi:docname="settings.svg"> - - - + inkscape:current-layer="svg2" /> + + diff --git a/src/_h5ai/client/js/inc/ext/download.js b/src/_h5ai/client/js/inc/ext/download.js index ffa6782d..60e4f11d 100644 --- a/src/_h5ai/client/js/inc/ext/download.js +++ b/src/_h5ai/client/js/inc/ext/download.js @@ -7,12 +7,9 @@ modulejs.define('ext/download', ['_', '$', 'core/settings', 'core/resource', 'co alwaysVisible: false }, allsettings.download); var downloadBtnTemplate = - '
  • ' + - '' + - 'download' + - '' + - '' + - '
  • '; + '
    ' + + 'download' + + '
    '; var selectedItems = []; @@ -49,8 +46,8 @@ modulejs.define('ext/download', ['_', '$', 'core/settings', 'core/resource', 'co } $(downloadBtnTemplate) - .find('a').on('click', onClick).end() - .appendTo('#navbar'); + .on('click', onClick) + .appendTo('#toolbar'); if (settings.alwaysVisible) { $('#download').show(); diff --git a/src/_h5ai/client/js/inc/ext/filter.js b/src/_h5ai/client/js/inc/ext/filter.js index 88e6a30a..eebd6c6d 100644 --- a/src/_h5ai/client/js/inc/ext/filter.js +++ b/src/_h5ai/client/js/inc/ext/filter.js @@ -4,13 +4,12 @@ modulejs.define('ext/filter', ['_', '$', 'core/settings', 'core/resource', 'core enabled: false }, allsettings.filter); var template = - '
  • ' + - '' + - 'filter' + - '' + - '' + - '
  • '; + '
    ' + + 'filter' + + '' + + '
    '; var noMatchTemplate = '
    '; + var inputIsVisible = false; var $filter, $input, $noMatch; @@ -66,36 +65,29 @@ modulejs.define('ext/filter', ['_', '$', 'core/settings', 'core/resource', 'core return new RegExp(sequence, 'i'); } - function reset() { + function update() { - $input.val('').blur(); - } - - function update(focus) { - - var val = $input.val(); - - if (focus) { - $input.focus(); - } - - if (val || focus) { + if (inputIsVisible) { + var val = $input.val(); filter(parseFilterSequence(val)); - $filter.addClass('current'); + $filter.addClass('active'); + $input.focus(); } else { filter(); - $filter.removeClass('current'); + $filter.removeClass('active'); } } - function updt() { + function toggle() { - update(true); + inputIsVisible = !inputIsVisible; + update(); } - function updf() { + function reset() { - update(false); + $input.val(''); + update(); } function init() { @@ -104,22 +96,12 @@ modulejs.define('ext/filter', ['_', '$', 'core/settings', 'core/resource', 'core return; } - $filter = $(template).appendTo('#navbar'); + $filter = $(template).appendTo('#toolbar'); $input = $filter.find('input'); $noMatch = $(noMatchTemplate).appendTo('#view'); - $filter.on('click', updt); - $input.on('focus blur keyup', updf); - - $(document) - .on('keydown', function (event) { - - if (event.which === 27) { - reset(); - } - }) - .on('keypress', updt); - + $filter.on('click', 'img', toggle); + $input.on('keyup', update); event.sub('location.changed', reset); } diff --git a/src/_h5ai/client/js/inc/view/ensure.js b/src/_h5ai/client/js/inc/view/ensure.js index 0d21eb8d..5cd1f841 100644 --- a/src/_h5ai/client/js/inc/view/ensure.js +++ b/src/_h5ai/client/js/inc/view/ensure.js @@ -4,7 +4,6 @@ modulejs.define('view/ensure', ['$', 'config', 'core/event'], function ($, confi '
    ' + '
    ' + '
    ' + - ''; var templateMainRow = '
    ' + @@ -12,6 +11,11 @@ modulejs.define('view/ensure', ['$', 'config', 'core/event'], function ($, confi '
    ' + '
    ' + '
    '; + var templateBacklink = + '' + + '
    powered by
    ' + + '
    h5ai ' + config.setup.VERSION + '
    ' + + '
    '; var selb = '#bottombar'; @@ -47,12 +51,13 @@ modulejs.define('view/ensure', ['$', 'config', 'core/event'], function ($, confi $(templateTopbar).appendTo('body'); $(templateMainRow).appendTo('body'); + $(templateBacklink).appendTo('#topbar'); - event.sub('ready', function () { + // event.sub('ready', function () { - ensure(); - setInterval(ensure, 60000); - }); + // ensure(); + // setInterval(ensure, 60000); + // }); }