mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2025-06-02 08:09:47 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update layout.

Browse source
This commit is contained in:
Lars Jung 2014-12-04 00:34:13 +01:00
parent 8576de6a39
commit 8b78c22be4
9 changed files with 89 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/_h5ai/client/css/inc/bottombar.less
View file

@ -6,8 +6,10 @@
height: 18px; height: 18px;
padding: 6px; padding: 6px;
background: @col-widget-back; // background: #fafafa;
border-top: @border-widget; background: #eee;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
z-index: 1;
color: #999; color: #999;
text-align: right; text-align: right;
@ -17,25 +19,21 @@
} }
a, a:active, a:visited { a, a:active, a:visited {
color: #555; color: #999;
text-decoration: none; text-decoration: none;
.transition(all 0.2s ease-in-out); .transition(all 0.2s ease-in-out);
opacity: 0.7; outline: 0;
&:hover { &:hover {
color: @col-hover; color: @col-hover;
opacity: 1;
} }
} }
.noJsMsg {
color: @col-error; .noJsMsg, .noBrowserMsg {
}
.noBrowserMsg {
color: @col-error; color: @col-error;
a, a:active, a:visited { a, a:active, a:visited {
color: @col-error; color: @col-error;
text-decoration: underline; text-decoration: underline;
opacity: 1;
&:hover { &:hover {
color: @col-hover; color: @col-hover;
} }

34
src/_h5ai/client/css/inc/sidebar.less
View file

@ -5,9 +5,10 @@
flex: 0 0 auto; flex: 0 0 auto;
order: 99; order: 99;
width: 200px; width: 200px;
padding: 8px; padding: 8px 16px;
background-color: @col-widget-back; // background-color: @col-widget-back;
border-left: @border-widget; // border-left: @border-widget;
background: #eaeaea;
} }
#settings { #settings {
@ -18,7 +19,7 @@
h1 { h1 {
font-size: 1em; font-size: 1em;
border-bottom: 1px solid #e7e7e7; margin: 2px 0 6px 0;
} }
} }
@ -33,17 +34,20 @@
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
padding: 0 10px; padding: 0 10px;
outline: none;
&:hover, &.hover { &:hover, &.hover {
opacity: 1.0; opacity: 1.0;
background: @col-widget-back-highlight; box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
} }
} }
.current { .current {
a, span.element { a, span.element {
opacity: 1.0; 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 { .select {
background-color: @col-widget-back-highlight; // background-color: @col-widget-back-highlight;
background: transparent;
width: 175px; width: 175px;
overflow: hidden; overflow: hidden;
outline: none;
&:hover, &.hover {
box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
}
} }
input, select { input, select {
@ -73,16 +83,18 @@
font-size: @font-size; font-size: @font-size;
font-weight: @font-weight; font-weight: @font-weight;
color: @col; color: @col;
background: @col-widget-back; // background: @col-widget-back;
background: transparent;
width: 100%; width: 100%;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
border: 0 solid #000; border: 0 solid #000;
outline: none;
cursor: pointer; cursor: pointer;
outline: none;
&:hover, &.hover { &: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'] { input[type='range'] {
border-radius: 2px; border-radius: 2px;
width: 64px; width: 60px;
margin: 0 0 4px 12px; margin: 0 0 4px 12px;
padding: 0 2px; padding: 0 2px;
vertical-align: middle; vertical-align: middle;

31
src/_h5ai/client/css/inc/topbar.less
View file

@ -4,11 +4,13 @@
flex: 0 0 auto; flex: 0 0 auto;
order: 1; order: 1;
min-height: 30px; min-height: 30px;
background-color: @col-widget-back; // background-color: @col-widget-back;
border-bottom: @border-widget; // border-bottom: @border-widget;
font-weight: lighter; 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 { .topbar-left {
float: left; float: left;
border-right: @border-widget-sep; // border-right: @border-widget-sep;
} }
.topbar-right { .topbar-right {
@ -40,9 +42,13 @@
.transition(all 0.2s ease-in-out); .transition(all 0.2s ease-in-out);
display: block; display: block;
height: 30px; // height: 30px;
line-height: 30px; // line-height: 30px;
padding: 0 10px; height: 48px;
line-height: 48px;
font-size: 15px;
// padding: 0 10px;
padding: 0 6px;
&:hover, &.hover { &:hover, &.hover {
.topbar-hover; .topbar-hover;
@ -53,12 +59,14 @@
} }
img { img {
position: relative; position: relative;
top: -2px; top: -1px;
width: 16px; width: 16px;
height: 16px; height: 16px;
opacity: 0.8;
} }
img + span, img + input { img + span, img + input {
margin-left: 6px; // margin-left: 6px;
margin-left: 8px;
} }
.crumb { .crumb {
.topbar-left; .topbar-left;
@ -72,6 +80,9 @@
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
&.root, &.domain {
margin-left: 10px;
}
} }
.view { .view {
.topbar-right; .topbar-right;

22
src/_h5ai/client/css/inc/tree.less
View file

@ -6,29 +6,15 @@
flex: 0 0 auto; flex: 0 0 auto;
order: 1; order: 1;
padding: 8px; padding: 8px 16px 8px 8px;
// background-color: @col-widget-back; // background: #eee;
// border-right: @border-widget; // border-right: 1px solid @col-border;
background: #eee; background: #eaeaea;
border-right: 1px solid @col-border;
font-weight: lighter; font-weight: lighter;
white-space: nowrap; white-space: nowrap;
max-width: 250px; max-width: 250px;
overflow-x: hidden; 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 { .indicator {
position: relative; position: relative;
top: 2px; top: 2px;

32
src/_h5ai/client/css/inc/view-details.less
View file

@ -2,13 +2,8 @@
.view-details-sized(@size) { .view-details-sized(@size) {
.item { .item {
a, a:active, a:visited {
height: @size + 14px;
}
.label, .date, .size { .label, .date, .size {
padding: (@size/2 - 2px) 8px; line-height: @size + 14px;
} }
} }
@ -36,18 +31,19 @@
background: #fafafa; background: #fafafa;
border-bottom: 1px solid rgba(0,0,0,0.07); border-bottom: 1px solid rgba(0,0,0,0.07);
a, a:active, a:visited { .label, .date, .size {
padding: 12px 8px; line-height: 46px;
opacity: 0.4; opacity: 0.4;
outline: 0;
.transition(all 0.2s ease-in-out); .transition(all 0.2s ease-in-out);
&:hover { &:hover {
color: #555; opacity: 1;
opacity: 0.9; color: @col-hover;
} }
} }
img { .sort {
display: none; display: none;
position: relative; position: relative;
top: -2px; top: -2px;
@ -56,8 +52,8 @@
padding: 0 8px; padding: 0 8px;
} }
.ascending img.ascending, .ascending .sort.ascending,
.descending img.descending { .descending .sort.descending {
display: inline; display: inline;
} }
} }
@ -68,11 +64,6 @@
&:hover { &:hover {
border-bottom: 1px solid rgba(0,0,0,0.09); 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 { .icon.square {
@ -80,12 +71,17 @@
position: absolute; position: absolute;
left: 16px; left: 16px;
top: -1px; top: -1px;
padding: 8px;
.thumb { .thumb {
box-shadow: 0 0 1px 0 rgba(0,0,0,0.2); box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
} }
} }
.label, .date, .size {
padding: 0 8px;
}
.date { .date {
position: absolute; position: absolute;
right: 116px; right: 116px;

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

@ -69,7 +69,7 @@
display: block; display: block;
img { img {
display: block; opacity: 1;
} }
} }
} }
@ -123,21 +123,26 @@
.selector { .selector {
display: none; display: none;
position: absolute; position: absolute;
left: 0; // left: 0;
top: 0; // top: 0;
width: 18px; // width: 18px;
height: 18px; // height: 18px;
left: 4px;
top: 4px;
width: 24px;
height: 24px;
background-color: #fff; background-color: #fff;
border: 1px solid @col-border-strong;
cursor: pointer; cursor: pointer;
.transition(all 0.2s ease-in-out); .transition(all 0.2s ease-in-out);
box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
border-radius: 40px;
&:hover { &:hover {
border-color: @col-border-stronger; box-shadow: 0 0 16px 0 rgba(0,0,0,0.3);
} }
img { img {
display: none; opacity: 0.2;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

6
src/_h5ai/client/js/inc/ext/crumb.js
View file

@ -32,12 +32,14 @@ modulejs.define('ext/crumb', ['_', '$', 'core/settings', 'core/resource', 'core/
if (item.isDomain()) { if (item.isDomain()) {
$html.addClass('domain'); $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()) { if (item.isRoot()) {
$html.addClass('root'); $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()) { if (item.isCurrentFolder()) {

17
src/_h5ai/client/js/inc/ext/tree.js
View file

@ -109,11 +109,7 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
item.isContentVisible = down; item.isContentVisible = down;
$indicator.removeClass('open close').addClass(down ? 'open' : 'close'); $indicator.removeClass('open close').addClass(down ? 'open' : 'close');
// $tree.scrollpanel('update', true); $content[down ? 'slideDown' : 'slideUp']();
$content[down ? 'slideDown' : 'slideUp'](function () {
// $tree.scrollpanel('update');
});
} }
return function () { return function () {
@ -162,20 +158,13 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
}); });
} }
function updateScrollbar() {
$('#tree').scrollpanel('update');
}
function onLocationChanged(item) { function onLocationChanged(item) {
fetchTree(item, function (root) { fetchTree(item, function (root) {
$('#tree') $('#tree')
// .find('.sp-container').append(update(root)).end()
.append(update(root)) .append(update(root))
.show(); .show();
// updateScrollbar();
}); });
} }
@ -187,13 +176,9 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
$('<div id="tree"/>') $('<div id="tree"/>')
.appendTo('#main-row') .appendTo('#main-row')
// .scrollpanel()
.on('click', '.indicator', createOnIndicatorClick()); .on('click', '.indicator', createOnIndicatorClick());
// event.sub('ready', updateScrollbar);
event.sub('location.changed', onLocationChanged); event.sub('location.changed', onLocationChanged);
// $(window).on('resize', updateScrollbar);
} }

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

@ -49,7 +49,7 @@ Options
"hidden": ["^\\.", "^_{{pkg.name}}"], "hidden": ["^\\.", "^_{{pkg.name}}"],
"hideFolders": false, "hideFolders": false,
"hideIf403": true, "hideIf403": true,
"hideParentFolder": false, "hideParentFolder": true,
"modes": ["details", "grid", "icons"], "modes": ["details", "grid", "icons"],
"setParentFolderLabels": true, "setParentFolderLabels": true,
"sizes": [16, 24, 32, 48, 64, 96, 128, 192, 256, 384], "sizes": [16, 24, 32, 48, 64, 96, 128, 192, 256, 384],