mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-03-21 13:00:10 +01:00
Improves selectors.
This commit is contained in:
Lars Jung
parent
ad845dbe66
commit
66e9dafaa5
@ -4,6 +4,7 @@
|
||||
@col-hover: rgb(29,119,194);
|
||||
@col-border: rgba(0,0,0,0.05);
|
||||
@col-border-strong: rgba(0,0,0,0.15);
|
||||
@col-border-stronger: rgba(0,0,0,0.3);
|
||||
|
||||
@col-error: rgb(204,51,51);
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
margin: 2px;
|
||||
|
||||
a, a:active, a:visited {
|
||||
width: @icon-size + 186px;
|
||||
width: @icon-size + 182px;
|
||||
height: @icon-size + 6px;
|
||||
border: 1px solid rgba(0,0,0,0);
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
&.item {
|
||||
|
||||
a, a:active, a:visited {
|
||||
width: @size + 186px;
|
||||
width: @size + 182px;
|
||||
height: @size + 6px;
|
||||
}
|
||||
|
||||
|
||||
@ -21,47 +21,6 @@
|
||||
background-color: rgba(0,0,0,0.01);
|
||||
}
|
||||
|
||||
#selector {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: -3px;
|
||||
margin-left: -3px;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
border-radius: 3px;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
.on-selected, .on-not-selected {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.item.selected {
|
||||
#selector {
|
||||
.on-not-selected {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:not(.selected) {
|
||||
#selector {
|
||||
.on-selected {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#view {
|
||||
display: none;
|
||||
@ -124,6 +83,10 @@
|
||||
color: @col-hover;
|
||||
background-color: @item-background-col-hover;
|
||||
border-color: @item-border-col-hover;
|
||||
|
||||
.selector {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,6 +101,15 @@
|
||||
border-color: @item-border-col-sel;
|
||||
}
|
||||
}
|
||||
|
||||
.selector {
|
||||
display: block;
|
||||
// border-color: @col-border-stronger;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -194,6 +166,29 @@
|
||||
text-align: right;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.selector {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
border: 1px solid @col-border-strong;
|
||||
cursor: pointer;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
&:hover {
|
||||
border-color: @col-border-stronger;
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty, .no-match {
|
||||
|
||||
@ -115,31 +115,14 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
|
||||
initItem = function (item) {
|
||||
|
||||
if (item.$view) {
|
||||
item.$view.find('a')
|
||||
.on('mouseenter', function () {
|
||||
item.$view.find('.selector').on('click', function (event) {
|
||||
|
||||
var $icon = item.$view.find('.icon');
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
|
||||
$('#selector').remove();
|
||||
$('<div id="selector">' +
|
||||
'<img src="' + resource.image('select') + '" class="on-selected" alt="selected" />' +
|
||||
'<img src="' + resource.image('blank') + '" class="on-not-selected" alt="not-selected" />' +
|
||||
'</div>')
|
||||
.on('click', function (event) {
|
||||
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
|
||||
item.$view.toggleClass('selected');
|
||||
publish();
|
||||
})
|
||||
.appendTo(item.$view.find('a'));
|
||||
})
|
||||
.on('mouseleave', function () {
|
||||
|
||||
$('.hover').removeClass('hover');
|
||||
$('#selector').remove();
|
||||
});
|
||||
item.$view.toggleClass('selected');
|
||||
publish();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -15,6 +15,9 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
||||
'<span class="label"/>' +
|
||||
'<span class="date"/>' +
|
||||
'<span class="size"/>' +
|
||||
'<span class="selector">' +
|
||||
'<img src="' + resource.image('select') + '" alt="selected"/>' +
|
||||
'</span>' +
|
||||
'</a>' +
|
||||
'</li>',
|
||||
hintTemplate = '<span class="hint"/>',
|
||||
@ -72,6 +75,7 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
||||
$label.addClass('l10n-parentDirectory');
|
||||
}
|
||||
$html.addClass('folder-parent');
|
||||
$html.find('.selector').remove();
|
||||
}
|
||||
|
||||
if (item.$view) {
|
||||
|
||||
@ -29,7 +29,7 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
||||
|
||||
var contentWidth = $('#content').width(),
|
||||
$view = $('#view'),
|
||||
itemWidth = ($view.hasClass('view-icons') || $view.hasClass('view-grid')) ? ($view.find('.item').eq(0).width() || 1) : 1;
|
||||
itemWidth = ($view.hasClass('view-icons') || $view.hasClass('view-grid')) ? ($view.find('.item').eq(0).outerWidth(true) || 1) : 1;
|
||||
|
||||
$view.width(Math.floor(contentWidth / itemWidth) * itemWidth);
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user