mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-24 12:07:10 -04:00
Refactor topbar and crumb.
This commit is contained in:
Lars Jung
parent
d5a0dce27a
commit
ba315be9e5
7 changed files with 114 additions and 128 deletions
|
|
@ -81,6 +81,7 @@ module.exports = function (suite) {
|
|||
|
||||
$(src + ': _h5ai/client/css/*.less')
|
||||
.newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
|
||||
.includeit()
|
||||
.less()
|
||||
.autoprefixer()
|
||||
.if(!suite.args.uncompressed, function () { this.cssmin(); })
|
||||
|
|
@ -135,6 +136,7 @@ module.exports = function (suite) {
|
|||
var env = {pkg: pkg};
|
||||
|
||||
$(src + '/_h5ai/client/css/styles.less')
|
||||
.includeit()
|
||||
.less()
|
||||
.autoprefixer()
|
||||
.write(build + '/test/h5ai-styles.css', true);
|
||||
|
|
@ -144,6 +146,7 @@ module.exports = function (suite) {
|
|||
.write(build + '/test/h5ai-scripts.js', true);
|
||||
|
||||
$(root + '/test/styles.less')
|
||||
.includeit()
|
||||
.less()
|
||||
.autoprefixer()
|
||||
.write(build + '/test/styles.css', true);
|
||||
|
|
|
|||
50
src/_h5ai/client/css/inc/crumb.less
Normal file
50
src/_h5ai/client/css/inc/crumb.less
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
#crumbbar {
|
||||
overflow: hidden;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0 8px;
|
||||
// border-left: 1px solid rgba(0,0,0,0.05);
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: @col;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: @col-text-highlight;
|
||||
}
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
.crumb {
|
||||
display: inline-block;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
}
|
||||
.sep {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 12px 0;
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.label {
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.hint {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 16px 4px 16px 0;
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
#topbar {
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -17,6 +16,40 @@
|
|||
}
|
||||
|
||||
|
||||
#toolbar {
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
order: 1;
|
||||
height: 48px;
|
||||
|
||||
.tool {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#flowbar {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
order: 2;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
#backlink {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
|
@ -24,7 +57,6 @@
|
|||
order: 99;
|
||||
text-align: center;
|
||||
padding: 6px 12px;
|
||||
max-width: 80px;
|
||||
overflow: hidden;
|
||||
height: 36px;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
|
@ -47,82 +79,3 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#toolbar {
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
order: 1;
|
||||
height: 48px;
|
||||
|
||||
.tool {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 12px;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
background: rgba(0,0,0,0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#crumbbar {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
order: 2;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0 8px;
|
||||
// border-left: 1px solid rgba(0,0,0,0.05);
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: @col;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: @col-text-highlight;
|
||||
}
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
.crumb {
|
||||
display: inline-block;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
}
|
||||
.sep {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 12px 0;
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.label {
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.hint {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 16px 4px 16px 0;
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
@import "inc/general";
|
||||
@import "inc/topbar";
|
||||
@import "inc/crumb";
|
||||
@import "inc/sidebar";
|
||||
@import "inc/download";
|
||||
@import "inc/filter";
|
||||
|
|
|
|||
|
|
@ -1,29 +1,24 @@
|
|||
modulejs.define('ext/crumb', ['_', '$', 'core/event', 'core/location', 'core/resource', 'core/settings'], function (_, $, event, location, resource, allsettings) {
|
||||
modulejs.define('ext/crumb', ['_', '$', 'core/event', 'core/location', 'core/resource', 'core/settings', 'view/topbar'], function (_, $, event, location, resource, allsettings, topbar) {
|
||||
|
||||
var settings = _.extend({
|
||||
enabled: false
|
||||
}, allsettings.crumb);
|
||||
var template =
|
||||
var template = '<div id="crumbbar"/>';
|
||||
var crumbTemplate =
|
||||
'<a class="crumb">' +
|
||||
'<img class="sep" src="' + resource.image('crumb') + '" alt=">"/>' +
|
||||
'<span class="label"/>' +
|
||||
'</a>';
|
||||
var pageHintTemplate = '<img class="hint" src="' + resource.icon('folder-page') + '" alt="has index page"/>';
|
||||
var $crumbbar = $(template).appendTo(topbar.$flowbar);
|
||||
|
||||
|
||||
function update(item, force) {
|
||||
|
||||
if (!force && item.$crumb) {
|
||||
return item.$crumb;
|
||||
}
|
||||
|
||||
var $html = $(template);
|
||||
|
||||
$html
|
||||
.addClass(item.isFolder() ? 'folder' : 'file')
|
||||
.data('item', item);
|
||||
function createHtml(item) {
|
||||
|
||||
var $html = $(crumbTemplate).data('item', item);
|
||||
item.$crumb = $html;
|
||||
location.setLink($html, item);
|
||||
|
||||
$html.find('.label').text(item.label);
|
||||
|
||||
if (item.isDomain() || item.isRoot()) {
|
||||
|
|
@ -38,36 +33,20 @@ modulejs.define('ext/crumb', ['_', '$', 'core/event', 'core/location', 'core/res
|
|||
$html.append($(pageHintTemplate));
|
||||
}
|
||||
|
||||
if (item.$crumb) {
|
||||
item.$crumb.replaceWith($html);
|
||||
}
|
||||
item.$crumb = $html;
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
function onLocationChanged(item) {
|
||||
|
||||
var crumb = item.getCrumb();
|
||||
var $crumbbar = $('#crumbbar');
|
||||
var found = false;
|
||||
var $crumb = item.$crumb;
|
||||
|
||||
$crumbbar.find('.crumb').each(function () {
|
||||
|
||||
var $html = $(this);
|
||||
if ($html.data('item') === item) {
|
||||
found = true;
|
||||
$html.addClass('active');
|
||||
} else {
|
||||
$html.removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
if (!found) {
|
||||
$crumbbar.find('.crumb').remove();
|
||||
_.each(crumb, function (e) {
|
||||
|
||||
$crumbbar.append(update(e, true));
|
||||
if ($crumb && $crumb.parent()[0] === $crumbbar[0]) {
|
||||
$crumbbar.children().removeClass('active');
|
||||
$crumb.addClass('active');
|
||||
} else {
|
||||
$crumbbar.empty();
|
||||
_.each(item.getCrumb(), function (item) {
|
||||
$crumbbar.append(createHtml(item));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ modulejs.define('view/topbar', ['$', 'config', 'view/root'], function ($, config
|
|||
var template =
|
||||
'<div id="topbar">' +
|
||||
'<div id="toolbar"/>' +
|
||||
'<div id="crumbbar"/>' +
|
||||
'<div id="flowbar"/>' +
|
||||
'<a id="backlink" href="http://larsjung.de/h5ai/" title="powered by h5ai ' + config.setup.VERSION + '">' +
|
||||
'<div>powered</div>' +
|
||||
'<div>by h5ai</div>' +
|
||||
|
|
@ -14,6 +14,6 @@ modulejs.define('view/topbar', ['$', 'config', 'view/root'], function ($, config
|
|||
return {
|
||||
$el: $el,
|
||||
$toolbar: $el.find('#toolbar'),
|
||||
$crumbbar: $el.find('#crumbbar')
|
||||
$flowbar: $el.find('#flowbar')
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -83,10 +83,10 @@ describe('module \'' + ID + '\'', function () {
|
|||
assert.lengthOf($('#topbar > #toolbar'), 1);
|
||||
});
|
||||
|
||||
it('adds HTML #crumbbar to #topbar', function () {
|
||||
it('adds HTML #flowbar to #topbar', function () {
|
||||
|
||||
this.applyFn();
|
||||
assert.lengthOf($('#topbar > #crumbbar'), 1);
|
||||
assert.lengthOf($('#topbar > #flowbar'), 1);
|
||||
});
|
||||
|
||||
it('adds HTML #backlink to #topbar', function () {
|
||||
|
|
@ -139,15 +139,15 @@ describe('module \'' + ID + '\'', function () {
|
|||
});
|
||||
});
|
||||
|
||||
describe('.$crumbbar', function () {
|
||||
describe('.$flowbar', function () {
|
||||
|
||||
it('is $(\'#crumbbar\')', function () {
|
||||
it('is $(\'#flowbar\')', function () {
|
||||
|
||||
var instance = this.applyFn();
|
||||
assert.isObject(instance.$crumbbar);
|
||||
assert.lengthOf(instance.$crumbbar, 1);
|
||||
assert.isString(instance.$crumbbar.jquery);
|
||||
assert.strictEqual(instance.$crumbbar.attr('id'), 'crumbbar');
|
||||
assert.isObject(instance.$flowbar);
|
||||
assert.lengthOf(instance.$flowbar, 1);
|
||||
assert.isString(instance.$flowbar.jquery);
|
||||
assert.strictEqual(instance.$flowbar.attr('id'), 'flowbar');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue