flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup + found an odd bug -- toggleSingleImageModeTransitions at first toggles oddly (bad context mirroring?)...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-08-17 22:23:48 +04:00
parent de391f135b
commit 7dad2dcc53
5 changed files with 73 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/TODO.otl
View File

@ -114,7 +114,9 @@ Priority work
[X] 100% actions [X] 100% actions
[X] bug: shifting up to new ribbon pushes the current row down... [X] bug: shifting up to new ribbon pushes the current row down...
| before starting on a fix, need to cleanup the code from old hacks and workarounds... | before starting on a fix, need to cleanup the code from old hacks and workarounds...
[_] 28% Preview II (optional features) [_] 26% Preview II (optional features)
[_] make keyboeard handler mode-aware...
| this is needed to disable navigation keys in setup-mode, for example...
[_] slideshow... [_] slideshow...
[_] 50% serialization/deserialization [_] 50% serialization/deserialization
[X] JSON loader/unloader [X] JSON loader/unloader

10
ui/fullscreen.html
View File

@ -74,7 +74,7 @@ function setup(){
// XXX get the timing right // XXX get the timing right
// XXX fire this when all is done, via an event... // XXX fire this when all is done, via an event...
$('.overlay').delay(500).fadeOut(700) $('.splash').delay(500).fadeOut(700)
} }
$(document).ready(setup); $(document).ready(setup);
@ -88,13 +88,19 @@ $(document).ready(setup);
</head> </head>
<body> <body>
<div class="viewer no-single-image-transitions"> <div class="viewer no-single-image-transitions">
<div class="overlay"> <div class="splash">
<!-- XXX replace this with a background-image logo... --> <!-- XXX replace this with a background-image logo... -->
<table width="100%" height="100%"><tr><td align="center" valign="middle"> <table width="100%" height="100%"><tr><td align="center" valign="middle">
<big><b>ImageGrid</b></big><br> <big><b>ImageGrid</b></big><br>
<small><i>loading...</i></small> <small><i>loading...</i></small>
</td></tr></table> </td></tr></table>
</div> </div>
<div class="overlay">
<div class="background">
</div>
<div class="content">
</div>
</div>
<div class="controller-mini left"> <div class="controller-mini left">
<div class="screen-button show-controls">*</div> <div class="screen-button show-controls">*</div>
<div class="screen-button"></div> <div class="screen-button"></div>

23
ui/gallery-prototype.js
View File

@ -113,21 +113,22 @@ ImageGrid.TYPE('toggle', function(obj){
}) })
function showInOverlay(obj){ function showInOverlay(obj){
// clean things up... // clean things up...
$('.overlay').children().remove() $('.overlay .content').children().remove()
// put it in the overlay... // put it in the overlay...
$('.overlay').append(obj) $('.overlay .content').append(obj)
// prepare the overlay... // prepare the overlay...
$('.overlay') $('.overlay')
.one('click', function(){ .one('click', function(){
$('.overlay') $('.overlay')
.fadeOut() .fadeOut(function(){
.children() $('.overlay .content')
.remove() .children()
.remove()
})
}) })
.fadeIn() .fadeIn()
return obj return obj
@ -1026,10 +1027,10 @@ function toggleBackgroundModes(){
//var toggleSingleImageModeTransitions = createCSSClassToggler('.viewer', 'no-single-image-transitions') // XXX for some reason this is backwords... (says 'on' when it's off ans 'off' when on)
ImageGrid.ACTION({ ImageGrid.ACTION({
id: 'toggleSingleImageModeTransitions', id: 'toggleSingleImageModeTransitions',
title: 'Single image mode transitions', title: 'Disable single image mode transitions',
doc: 'Toggle transitions in single image mode.', doc: 'Toggle transitions in single image mode.',
group: 'Mode: Single Image', group: 'Mode: Single Image',
type: 'toggle', type: 'toggle',
@ -1037,7 +1038,6 @@ ImageGrid.ACTION({
}) })
//var toggleControls = createCSSClassToggler('.viewer', 'hidden-controls')
ImageGrid.ACTION({ ImageGrid.ACTION({
id: 'toggleControls', id: 'toggleControls',
title: 'Keyboard interface', title: 'Keyboard interface',
@ -1048,7 +1048,6 @@ ImageGrid.ACTION({
}) })
//var toggleTransitions = createCSSClassToggler('.viewer', 'transitions-enabled')
ImageGrid.ACTION({ ImageGrid.ACTION({
id: 'toggleTransitions', id: 'toggleTransitions',
title: 'Global transitions', title: 'Global transitions',

52
ui/gallery.css
View File

@ -1,23 +1,44 @@
.overlay { .overlay, .splash {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; z-index: 9000;
}
.overlay {
display: none;
}
.splash {
color: gray;
background-color: white; background-color: white;
opacity: 1.0;
}
.overlay .background, .overlay .content {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
color: gray; color: gray;
opacity: 1.0; opacity: 1.0;
z-index: 9000;
text-align: center: text-align: center:
} }
.overlay .background {
background-color: white;
opacity: 0.5;
z-index: 9000;
}
.overlay .content {
overflow: auto;
opacity: 0.9;
z-index: 9010;
}
.overlay * { .overlay *, .splash * {
color: gray; color: gray;
} }
@ -29,6 +50,7 @@
padding: 20px; padding: 20px;
margin: 5px; margin: 5px;
border: solid 1px silver; border: solid 1px silver;
background-color: white;
} }
.options .option { .options .option {
@ -253,15 +275,21 @@
/* dark background */ /* dark background */
.dark.viewer, .dark .overlay { .dark.viewer, .dark .splash {
background-color: rgb(32, 32, 32); background-color: rgb(32, 32, 32);
} }
.dark .overlay * { .dark .overlay *, .dark .splash * {
color: silver; color: silver;
} }
.dark .overlay .options, .dark .overlay .background {
background-color: rgb(32, 32, 32);
}
.dark .screen-button { .dark .screen-button {
color: silver; color: silver;
@ -278,14 +306,18 @@
/* black background */ /* black background */
.black.viewer, .black .overlay { .black.viewer, .black .splash {
background-color: black; background-color: black;
} }
.black .overlay * { .black .overlay *, .black .splash * {
color: silver; color: silver;
} }
.black .overlay .options, .black .overlay .background {
background-color: black;
}
.black .screen-button { .black .screen-button {
color: white; color: white;

12
ui/gallery.html
View File

@ -71,7 +71,7 @@ function setup(){
// XXX get the timing right // XXX get the timing right
// XXX fire this when all is done, via an event... // XXX fire this when all is done, via an event...
$('.overlay').delay(500).fadeOut(700) $('.splash').delay(500).fadeOut(700)
} }
$(document).ready(setup); $(document).ready(setup);
@ -83,13 +83,19 @@ $(document).ready(setup);
</style> </style>
<div class="viewer no-single-image-transitions"> <div class="viewer no-single-image-transitions">
<div class="overlay"> <div class="splash">
<!-- XXX replace this with a background-image logo... --> <!-- XXX replace this with a background-image logo... -->
<table width="100%" height="100%"><tr><td align="center" valign="middle"> <table width="100%" height="100%"><tr><td align="center" valign="middle">
<big><b>ImageGrid</b></big><br> <big><b>ImageGrid</b></big><br>
<small><i>overlay...</i></small> <small><i>loading...</i></small>
</td></tr></table> </td></tr></table>
</div> </div>
<div class="overlay">
<div class="background">
</div>
<div class="content">
</div>
</div>
<div class="controller-mini left"> <div class="controller-mini left">
<div class="screen-button show-controls">*</div> <div class="screen-button show-controls">*</div>
<div class="screen-button"></div> <div class="screen-button"></div>