From a105db3161531956e9fda2c10d6da70b4a6d07ae Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 7 Aug 2012 21:12:22 +0400 Subject: [PATCH] split off transitions into a seporate css file, this will enable trivial on/off... Signed-off-by: Alex A. Naanou --- ui/TODO.otl | 3 +- ui/fullscreen.html | 1 + ui/gallery-prototype.js | 13 ++++++ ui/gallery.css | 76 ---------------------------------- ui/gallery.html | 1 + ui/transitions.css | 90 +++++++++++++++++++++++++++++++++++++++++ 6 files changed, 107 insertions(+), 77 deletions(-) create mode 100755 ui/transitions.css diff --git a/ui/TODO.otl b/ui/TODO.otl index c6bfb7bd..b12d7103 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -111,7 +111,8 @@ Priority work | leave doing a different vertical layout for later versions... [_] basic wrapper | hook-in os-specific API - [_] 12% Preview II (optional features) + [_] 11% Preview II (optional features) + [_] flip ribbons relative to current -- reverse order [_] slideshow... [_] serialization/deserialization [_] actual file loading (Target-specific) diff --git a/ui/fullscreen.html b/ui/fullscreen.html index ab1804d7..bb35eeab 100755 --- a/ui/fullscreen.html +++ b/ui/fullscreen.html @@ -2,6 +2,7 @@ + diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index 7a495c59..bf90d4f6 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -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 : diff --git a/ui/gallery.css b/ui/gallery.css index 030ec202..c9d45a6e 100755 --- a/ui/gallery.css +++ b/ui/gallery.css @@ -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 { position: absolute; top: 0px; @@ -46,12 +30,6 @@ 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; } @@ -66,12 +44,6 @@ border: groove 2px; 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; 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; - -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; } @@ -192,16 +151,6 @@ float: left; width: 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; left: 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-bottom: 2px; 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 { 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 { 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; } diff --git a/ui/gallery.html b/ui/gallery.html index ce791113..062c9dee 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -4,6 +4,7 @@ + diff --git a/ui/transitions.css b/ui/transitions.css new file mode 100755 index 00000000..d8f5e75c --- /dev/null +++ b/ui/transitions.css @@ -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; +}