From 8b78c22be49b06ef0c731a2802a40a0d791274c1 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Thu, 4 Dec 2014 00:34:13 +0100 Subject: [PATCH] Update layout. --- src/_h5ai/client/css/inc/bottombar.less | 18 +++++------- src/_h5ai/client/css/inc/sidebar.less | 34 +++++++++++++++------- src/_h5ai/client/css/inc/topbar.less | 31 +++++++++++++------- src/_h5ai/client/css/inc/tree.less | 22 +++----------- src/_h5ai/client/css/inc/view-details.less | 32 +++++++++----------- src/_h5ai/client/css/inc/view.less | 21 ++++++++----- src/_h5ai/client/js/inc/ext/crumb.js | 6 ++-- src/_h5ai/client/js/inc/ext/tree.js | 17 +---------- src/_h5ai/conf/options.json | 2 +- 9 files changed, 89 insertions(+), 94 deletions(-) diff --git a/src/_h5ai/client/css/inc/bottombar.less b/src/_h5ai/client/css/inc/bottombar.less index 799f2095..11c23727 100644 --- a/src/_h5ai/client/css/inc/bottombar.less +++ b/src/_h5ai/client/css/inc/bottombar.less @@ -6,8 +6,10 @@ height: 18px; padding: 6px; - background: @col-widget-back; - border-top: @border-widget; + // background: #fafafa; + background: #eee; + box-shadow: 0 0 8px 0 rgba(0,0,0,0.2); + z-index: 1; color: #999; text-align: right; @@ -17,25 +19,21 @@ } a, a:active, a:visited { - color: #555; + color: #999; text-decoration: none; .transition(all 0.2s ease-in-out); - opacity: 0.7; + outline: 0; &:hover { color: @col-hover; - opacity: 1; } } - .noJsMsg { - color: @col-error; - } - .noBrowserMsg { + + .noJsMsg, .noBrowserMsg { color: @col-error; a, a:active, a:visited { color: @col-error; text-decoration: underline; - opacity: 1; &:hover { color: @col-hover; } diff --git a/src/_h5ai/client/css/inc/sidebar.less b/src/_h5ai/client/css/inc/sidebar.less index 9a6fc721..2d75cfab 100644 --- a/src/_h5ai/client/css/inc/sidebar.less +++ b/src/_h5ai/client/css/inc/sidebar.less @@ -5,9 +5,10 @@ flex: 0 0 auto; order: 99; width: 200px; - padding: 8px; - background-color: @col-widget-back; - border-left: @border-widget; + padding: 8px 16px; + // background-color: @col-widget-back; + // border-left: @border-widget; + background: #eaeaea; } #settings { @@ -18,7 +19,7 @@ h1 { font-size: 1em; - border-bottom: 1px solid #e7e7e7; + margin: 2px 0 6px 0; } } @@ -33,17 +34,20 @@ height: 30px; line-height: 30px; padding: 0 10px; + outline: none; &:hover, &.hover { opacity: 1.0; - background: @col-widget-back-highlight; + box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); } } .current { a, span.element { opacity: 1.0; - background: @col-widget-back-highlight; + // background: @col-widget-back-highlight; + background: rgba(0,0,0,0.02); + box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); } } @@ -60,9 +64,15 @@ } .select { - background-color: @col-widget-back-highlight; + // background-color: @col-widget-back-highlight; + background: transparent; width: 175px; overflow: hidden; + outline: none; + + &:hover, &.hover { + box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); + } } input, select { @@ -73,16 +83,18 @@ font-size: @font-size; font-weight: @font-weight; color: @col; - background: @col-widget-back; + // background: @col-widget-back; + background: transparent; width: 100%; height: 30px; line-height: 30px; border: 0 solid #000; - outline: none; cursor: pointer; + outline: none; &:hover, &.hover { - background: @col-widget-back-highlight; + // background: @col-widget-back-highlight; + box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); } } @@ -93,7 +105,7 @@ input[type='range'] { border-radius: 2px; - width: 64px; + width: 60px; margin: 0 0 4px 12px; padding: 0 2px; vertical-align: middle; diff --git a/src/_h5ai/client/css/inc/topbar.less b/src/_h5ai/client/css/inc/topbar.less index 710e371a..993a27ee 100644 --- a/src/_h5ai/client/css/inc/topbar.less +++ b/src/_h5ai/client/css/inc/topbar.less @@ -4,11 +4,13 @@ flex: 0 0 auto; order: 1; min-height: 30px; - background-color: @col-widget-back; - border-bottom: @border-widget; + // background-color: @col-widget-back; + // border-bottom: @border-widget; font-weight: lighter; - // box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); - // z-index: 1; + + background: #fafafa; + box-shadow: 0 0 8px 0 rgba(0,0,0,0.2); + z-index: 1; } @@ -18,7 +20,7 @@ .topbar-left { float: left; - border-right: @border-widget-sep; + // border-right: @border-widget-sep; } .topbar-right { @@ -40,9 +42,13 @@ .transition(all 0.2s ease-in-out); display: block; - height: 30px; - line-height: 30px; - padding: 0 10px; + // height: 30px; + // line-height: 30px; + height: 48px; + line-height: 48px; + font-size: 15px; + // padding: 0 10px; + padding: 0 6px; &:hover, &.hover { .topbar-hover; @@ -53,12 +59,14 @@ } img { position: relative; - top: -2px; + top: -1px; width: 16px; height: 16px; + opacity: 0.8; } img + span, img + input { - margin-left: 6px; + // margin-left: 6px; + margin-left: 8px; } .crumb { .topbar-left; @@ -72,6 +80,9 @@ width: 12px; height: 12px; } + &.root, &.domain { + margin-left: 10px; + } } .view { .topbar-right; diff --git a/src/_h5ai/client/css/inc/tree.less b/src/_h5ai/client/css/inc/tree.less index ac9ba8a3..6164a797 100644 --- a/src/_h5ai/client/css/inc/tree.less +++ b/src/_h5ai/client/css/inc/tree.less @@ -6,29 +6,15 @@ flex: 0 0 auto; order: 1; - padding: 8px; - // background-color: @col-widget-back; - // border-right: @border-widget; - background: #eee; - border-right: 1px solid @col-border; + padding: 8px 16px 8px 8px; + // background: #eee; + // border-right: 1px solid @col-border; + background: #eaeaea; font-weight: lighter; white-space: nowrap; max-width: 250px; overflow-x: hidden; - .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; - } - } - .indicator { position: relative; top: 2px; diff --git a/src/_h5ai/client/css/inc/view-details.less b/src/_h5ai/client/css/inc/view-details.less index b78442c6..e38c7d73 100644 --- a/src/_h5ai/client/css/inc/view-details.less +++ b/src/_h5ai/client/css/inc/view-details.less @@ -2,13 +2,8 @@ .view-details-sized(@size) { .item { - - a, a:active, a:visited { - height: @size + 14px; - } - .label, .date, .size { - padding: (@size/2 - 2px) 8px; + line-height: @size + 14px; } } @@ -36,18 +31,19 @@ background: #fafafa; border-bottom: 1px solid rgba(0,0,0,0.07); - a, a:active, a:visited { - padding: 12px 8px; + .label, .date, .size { + line-height: 46px; opacity: 0.4; + outline: 0; .transition(all 0.2s ease-in-out); &:hover { - color: #555; - opacity: 0.9; + opacity: 1; + color: @col-hover; } } - img { + .sort { display: none; position: relative; top: -2px; @@ -56,8 +52,8 @@ padding: 0 8px; } - .ascending img.ascending, - .descending img.descending { + .ascending .sort.ascending, + .descending .sort.descending { display: inline; } } @@ -68,11 +64,6 @@ &:hover { border-bottom: 1px solid rgba(0,0,0,0.09); } - - // needs to be here, to not conflict with header fields - .icon { - padding: 8px; - } } .icon.square { @@ -80,12 +71,17 @@ position: absolute; left: 16px; top: -1px; + padding: 8px; .thumb { box-shadow: 0 0 1px 0 rgba(0,0,0,0.2); } } + .label, .date, .size { + padding: 0 8px; + } + .date { position: absolute; right: 116px; diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less index 9f82d13b..39007781 100644 --- a/src/_h5ai/client/css/inc/view.less +++ b/src/_h5ai/client/css/inc/view.less @@ -69,7 +69,7 @@ display: block; img { - display: block; + opacity: 1; } } } @@ -123,21 +123,26 @@ .selector { display: none; position: absolute; - left: 0; - top: 0; - width: 18px; - height: 18px; + // left: 0; + // top: 0; + // width: 18px; + // height: 18px; + left: 4px; + top: 4px; + width: 24px; + height: 24px; background-color: #fff; - border: 1px solid @col-border-strong; cursor: pointer; .transition(all 0.2s ease-in-out); + box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); + border-radius: 40px; &:hover { - border-color: @col-border-stronger; + box-shadow: 0 0 16px 0 rgba(0,0,0,0.3); } img { - display: none; + opacity: 0.2; width: 100%; height: 100%; } diff --git a/src/_h5ai/client/js/inc/ext/crumb.js b/src/_h5ai/client/js/inc/ext/crumb.js index a560cff9..d150d4dd 100644 --- a/src/_h5ai/client/js/inc/ext/crumb.js +++ b/src/_h5ai/client/js/inc/ext/crumb.js @@ -32,12 +32,14 @@ modulejs.define('ext/crumb', ['_', '$', 'core/settings', 'core/resource', 'core/ if (item.isDomain()) { $html.addClass('domain'); - $a.find('img').attr('src', resource.image('home')); + // $a.find('img').attr('src', resource.image('home')); + $a.find('img').remove(); } if (item.isRoot()) { $html.addClass('root'); - $a.find('img').attr('src', resource.image('home')); + // $a.find('img').attr('src', resource.image('home')); + $a.find('img').remove(); } if (item.isCurrentFolder()) { diff --git a/src/_h5ai/client/js/inc/ext/tree.js b/src/_h5ai/client/js/inc/ext/tree.js index f48d3ae1..be95fdf7 100644 --- a/src/_h5ai/client/js/inc/ext/tree.js +++ b/src/_h5ai/client/js/inc/ext/tree.js @@ -109,11 +109,7 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e item.isContentVisible = down; $indicator.removeClass('open close').addClass(down ? 'open' : 'close'); - // $tree.scrollpanel('update', true); - $content[down ? 'slideDown' : 'slideUp'](function () { - - // $tree.scrollpanel('update'); - }); + $content[down ? 'slideDown' : 'slideUp'](); } return function () { @@ -162,20 +158,13 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e }); } - function updateScrollbar() { - - $('#tree').scrollpanel('update'); - } - function onLocationChanged(item) { fetchTree(item, function (root) { $('#tree') - // .find('.sp-container').append(update(root)).end() .append(update(root)) .show(); - // updateScrollbar(); }); } @@ -187,13 +176,9 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e $('
') .appendTo('#main-row') - // .scrollpanel() .on('click', '.indicator', createOnIndicatorClick()); - // event.sub('ready', updateScrollbar); event.sub('location.changed', onLocationChanged); - - // $(window).on('resize', updateScrollbar); } diff --git a/src/_h5ai/conf/options.json b/src/_h5ai/conf/options.json index 5e454cc5..d91f4dba 100644 --- a/src/_h5ai/conf/options.json +++ b/src/_h5ai/conf/options.json @@ -49,7 +49,7 @@ Options "hidden": ["^\\.", "^_{{pkg.name}}"], "hideFolders": false, "hideIf403": true, - "hideParentFolder": false, + "hideParentFolder": true, "modes": ["details", "grid", "icons"], "setParentFolderLabels": true, "sizes": [16, 24, 32, 48, 64, 96, 128, 192, 256, 384],