mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-25 12:34:47 -04:00
More changes.
This commit is contained in:
Lars Jung
parent
551c031c42
commit
8327617df6
10 changed files with 111 additions and 85 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<metadata
|
||||
|
|
@ -40,23 +41,18 @@
|
|||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="9.8333333"
|
||||
inkscape:cx="-14.476267"
|
||||
inkscape:cy="-3.677966"
|
||||
inkscape:cx="-5.8983051"
|
||||
inkscape:cy="12"
|
||||
inkscape:window-x="49"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<g
|
||||
id="g4"
|
||||
transform="translate(-1.0504365e-7,-1028.3622)">
|
||||
<path
|
||||
d="m 19.432209,1041.3422 c 0.04,-0.32 0.07,-0.64 0.07,-0.98 0,-0.34 -0.03,-0.66 -0.07,-0.98 l 2.11,-1.65 c 0.19,-0.15 0.24,-0.42 0.12,-0.64 l -2,-3.46 c -0.12,-0.22 -0.39,-0.3 -0.61,-0.22 l -2.49,1 c -0.52,-0.4 -1.08,-0.73 -1.69,-0.98 l -0.38,-2.65 c -0.03,-0.24 -0.24,-0.42 -0.49,-0.42 h -4 c -0.2500003,0 -0.4600003,0.18 -0.4900003,0.42 l -0.38,2.65 c -0.61,0.25 -1.17,0.59 -1.69,0.98 l -2.49,-1 c -0.23,-0.09 -0.49,0 -0.61,0.22 l -2,3.46 c -0.13,0.22 -0.07,0.49 0.12,0.64 l 2.11,1.65 c -0.04,0.32 -0.07,0.65 -0.07,0.98 0,0.33 0.03,0.66 0.07,0.98 l -2.11,1.65 c -0.19,0.15 -0.24,0.42 -0.12,0.64 l 2,3.46 c 0.12,0.22 0.39,0.3 0.61,0.22 l 2.49,-1 c 0.52,0.4 1.08,0.73 1.69,0.98 l 0.38,2.65 c 0.03,0.24 0.24,0.42 0.4900003,0.42 h 4 c 0.25,0 0.46,-0.18 0.49,-0.42 l 0.38,-2.65 c 0.61,-0.25 1.17,-0.59 1.69,-0.98 l 2.49,1 c 0.23,0.09 0.49,0 0.61,-0.22 l 2,-3.46 c 0.12,-0.22 0.07,-0.49 -0.12,-0.64 l -2.11,-1.65 z m -7.43,2.52 c -1.93,0 -3.5000003,-1.57 -3.5000003,-3.5 0,-1.93 1.5700003,-3.5 3.5000003,-3.5 1.93,0 3.5,1.57 3.5,3.5 0,1.93 -1.57,3.5 -3.5,3.5 z"
|
||||
style="fill:#555555"
|
||||
id="path6"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
inkscape:current-layer="svg2" />
|
||||
<path
|
||||
d="M0 0h24v24h-24z"
|
||||
fill="none"
|
||||
id="path4" />
|
||||
<path
|
||||
d="M3 18h18v-2h-18v2zm0-5h18v-2h-18v2zm0-7v2h18v-2h-18z"
|
||||
id="path6"
|
||||
style="fill:#555555;fill-opacity:1;stroke:none" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 1.6 KiB |
|
|
@ -7,12 +7,9 @@ modulejs.define('ext/download', ['_', '$', 'core/settings', 'core/resource', 'co
|
|||
alwaysVisible: false
|
||||
}, allsettings.download);
|
||||
var downloadBtnTemplate =
|
||||
'<li id="download">' +
|
||||
'<a href="#">' +
|
||||
'<img src="' + resource.image('download') + '" alt="download"/>' +
|
||||
'<span class="l10n-download"/>' +
|
||||
'</a>' +
|
||||
'</li>';
|
||||
'<div id="download" class="tool">' +
|
||||
'<img src="' + resource.image('download') + '" alt="download"/>' +
|
||||
'</div>';
|
||||
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();
|
||||
|
|
|
|||
|
|
@ -4,13 +4,12 @@ modulejs.define('ext/filter', ['_', '$', 'core/settings', 'core/resource', 'core
|
|||
enabled: false
|
||||
}, allsettings.filter);
|
||||
var template =
|
||||
'<li id="filter">' +
|
||||
'<span class="element">' +
|
||||
'<img src="' + resource.image('filter') + '" alt="filter"/>' +
|
||||
'<input type="text" value="" placeholder="filter"/>' +
|
||||
'</span>' +
|
||||
'</li>';
|
||||
'<div id="filter" class="tool">' +
|
||||
'<img src="' + resource.image('filter') + '" alt="filter"/>' +
|
||||
'<input type="text" value="" placeholder="filter"/>' +
|
||||
'</div>';
|
||||
var noMatchTemplate = '<div class="no-match l10n-noMatch"/>';
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ modulejs.define('view/ensure', ['$', 'config', 'core/event'], function ($, confi
|
|||
'<div id="topbar">' +
|
||||
'<div id="toolbar"/>' +
|
||||
'<div id="crumbbar"/>' +
|
||||
'<div id="navbar"/>' +
|
||||
'</div>';
|
||||
var templateMainRow =
|
||||
'<div id="main-row">' +
|
||||
|
|
@ -12,6 +11,11 @@ modulejs.define('view/ensure', ['$', 'config', 'core/event'], function ($, confi
|
|||
'<div id="settings"/>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
var templateBacklink =
|
||||
'<a id="backlink" href="http://larsjung.de/h5ai/" title="h5ai project page">' +
|
||||
'<div>powered by</div>' +
|
||||
'<div>h5ai ' + config.setup.VERSION + '</div>' +
|
||||
'</a>';
|
||||
|
||||
|
||||
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);
|
||||
// });
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue