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

split off transitions into a seporate css file, this will enable trivial on/off...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-08-07 21:12:22 +04:00
parent 6c6d614f1e
commit a105db3161
6 changed files with 107 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/TODO.otl
View File

@ -111,7 +111,8 @@ Priority work
| leave doing a different vertical layout for later versions... | leave doing a different vertical layout for later versions...
[_] basic wrapper [_] basic wrapper
| hook-in os-specific API | hook-in os-specific API
[_] 12% Preview II (optional features) [_] 11% Preview II (optional features)
[_] flip ribbons relative to current -- reverse order
[_] slideshow... [_] slideshow...
[_] serialization/deserialization [_] serialization/deserialization
[_] actual file loading (Target-specific) [_] actual file loading (Target-specific)

1
ui/fullscreen.html
View File

@ -2,6 +2,7 @@
<head> <head>
<link rel="stylesheet" href="gallery.css"> <link rel="stylesheet" href="gallery.css">
<link rel="stylesheet" href="single-image-mode.css"> <link rel="stylesheet" href="single-image-mode.css">
<link rel="stylesheet" href="transitions.css">
<link rel="stylesheet" href="markers.css"> <link rel="stylesheet" href="markers.css">

13
ui/gallery-prototype.js
View File

@ -733,5 +733,18 @@ function shiftImageUp(){
function flipRibbons(){
var ribbons = $('.ribbon')
// index of current ribbon, needed to adjust placement of everything...
var cur = ribbon.index($('.current.ribbon'))
// XXX would have been nice if we could do detach reverse attach or just reverse...
}
/*********************************************************************/ /*********************************************************************/
// vim:set ts=4 sw=4 nowrap : // vim:set ts=4 sw=4 nowrap :

76
ui/gallery.css
View File

@ -1,19 +1,3 @@
.animated {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.unanimated {
-webkit-transition: none;
-moz-transition: none;
-o-transition: all 0 ease;
-ms-transition: none;
transition: none;
}
.loading { .loading {
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -46,12 +30,6 @@
opacity: 0.3; opacity: 0.3;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
cursor: hand; cursor: hand;
} }
@ -66,12 +44,6 @@
border: groove 2px; border: groove 2px;
opacity: 0.2; opacity: 0.2;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
} }
@ -86,13 +58,6 @@
height: 500px; height: 500px;
background: white; background: white;
/* mostly to animate the background... */
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
} }
@ -109,12 +74,6 @@
*/ */
z-index: 5000; z-index: 5000;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
opacity: 0.5; opacity: 0.5;
} }
@ -192,16 +151,6 @@
float: left; float: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
/*
width: 800px;
height: 500px;
*/
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
} }
@ -211,12 +160,6 @@
top: 0px; top: 0px;
left: 0px; left: 0px;
margin-top: 0px; margin-top: 0px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
} }
@ -228,24 +171,11 @@
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
opacity: 0.5; opacity: 0.5;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
} }
.new-ribbon { .new-ribbon {
height: 0px; height: 0px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
} }
@ -256,12 +186,6 @@
.current.ribbon { .current.ribbon {
opacity: 1.0; opacity: 1.0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
} }

1
ui/gallery.html
View File

@ -4,6 +4,7 @@
<link rel="stylesheet" href="gallery.css"> <link rel="stylesheet" href="gallery.css">
<link rel="stylesheet" href="single-image-mode.css"> <link rel="stylesheet" href="single-image-mode.css">
<link rel="stylesheet" href="transitions.css">
<link rel="stylesheet" href="markers.css"> <link rel="stylesheet" href="markers.css">

90
ui/transitions.css Executable file
View File

@ -0,0 +1,90 @@
.animated {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.unanimated {
-webkit-transition: none;
-moz-transition: none;
-o-transition: all 0 ease;
-ms-transition: none;
transition: none;
}
.image {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.demo-buttons {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.viewer {
/* mostly to animate the background... */
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.controller, .controller-mini {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.container {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.field {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.ribbon {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.new-ribbon {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.current.ribbon {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}