diff --git a/ui/TODO.otl b/ui/TODO.otl index 20e8ad0e..8a8784af 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -1,5 +1,5 @@ Priority work - [_] 64% Preview II + [_] 67% Preview II [X] 100% sorted images in ribbons [X] 100% stage I: position the promoted/demoted image correctly | and correct positioning on promote/demote @@ -58,16 +58,14 @@ Priority work [X] one (with zooming) [X] single image mode with zooming | ribbons are hidden - [_] 18% UI - [_] fix single image mode + [_] 30% UI + [X] fix single image mode | need to center the image correctly... - [_] 44% add screen buttons for all actions... + [_] 46% add screen buttons for all actions... [X] navigation [X] actions [_] zooming - [_] 20% zoom presets - [_] in - [_] out + [_] 33% zoom presets [_] single [_] three [X] wide @@ -152,6 +150,9 @@ Priority work [_] 0% Pre-Alpha [_] 0% finalize UI logic [_] unsorted images + [_] 0% Alpha + [_] 0% Beta + [_] 0% 1.0 Goals: @@ -219,32 +220,42 @@ Goals: all levels always browsable make all the steps except the actual sorting implicit | i.e. no jumping through hoops for the human... + use the same mechanism as used for sorting, for image selection + | this can be used for tagging, exhibitions, ...etc. + context + | a context consists of two things: + | - image selection (might be a product of another context, search or selection) + | - a way the levels are interpreted within this context + | + | default contexts: + | - full view rating context + | this incorporates ALL the archive and the levels are interpreted as ratings. + | - selection rating context + | same as full view but only part of the archive is rated + | XXX this will need to be merged correctly back into the archive... + | - selection context + | this simply takes one set of images as input and shows a subset as output. + | + | contexts are persistent, much like a catalogue. + | + | a context can be cloned and re-used. + | + | contexts can be used to mark: + | - shoots + | - subjects + | - exhibitions/shows + | - portfolios + | - ... +[[controls.otl]] -basic structure - [X] ribbons - [X] images - [_] indicators - | show where the images came from... - -[_] % basic control elements - [_] 77% touch zones / buttons - [X] next DONE - [X] prev DONE - [X] shift up DONE - [X] shift down DONE - [X] promote DONE - [X] demote DONE - [_] zoom in ~ - [_] zoom out ~ - [X] toggle single image DONE [_] 38% features [_] 55% views [_] 60% ribbon-based view - [_] show all + [_] show all (very zoomed out view) | might be good to not show any images here at all, just replace them with their average color [X] show map [X] fit to ribbon @@ -266,6 +277,8 @@ basic structure [_] crop [_] rotate + + [_] 38% General ToDo [_] 80% image sorting [_] will affect: @@ -297,9 +310,6 @@ basic structure [_] position in ribbon -[X] 100% refactoring: - [X] merge almost identical functions... - [_] % ISSUES and BUGS: [_] jumping on focus up/down... diff --git a/ui/gallery.css b/ui/gallery.css index 487980a3..436ccbf0 100755 --- a/ui/gallery.css +++ b/ui/gallery.css @@ -1,10 +1,5 @@ .image { - /* new markup... */ float: left; - /* old markup... - position: relative; - display: inline-block; - */ width: 350px; height: 350px; @@ -23,10 +18,12 @@ cursor: hand; } + .mock-image { background: blue; } + .demo-buttons { margin: 15px border: groove 2px; @@ -39,16 +36,21 @@ -ms-transition: all 0.2s ease; transition: all 0.2s ease; } + + .demo-buttons:hover { opacity: 1; } + .viewer { width: 900px; height: 500px; border: solid blue 5px; margin: 20px; } + + .controller { height: 500px; width: 50px; @@ -61,9 +63,8 @@ -ms-transition: all 0.2s ease; transition: all 0.2s ease; } -.single-image-mode .controller { - opacity: 0.8; -} + + .promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single { text-align: center; vertical-align: middle; @@ -71,31 +72,48 @@ height: 150px; background: gray; - -moz-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + -ms-user-select: none; + user-select: none; } + + .next-image, .prev-image, .toggle-wide, .toggle-single { background: silver; } + + .toggle-wide, .toggle-single { height:50px } + + .promote { } + + .next-image { } + + .prev-image { } + + .demote { } + + .toggle-wide { } + + .toggle-single { } + .container { position: relative; overflow: hidden; @@ -111,11 +129,10 @@ transition: all 0.2s ease; } + .field { position: relative; overflow: visible; - /* XXX replace this with transform:scale(...) */ - zoom: 1; top: 0px; left: 0px; margin-top: 0px; @@ -127,6 +144,7 @@ transition: all 0.2s ease; } + .ribbon { height: 360px; /* XXX make this expand dynamically */ @@ -134,8 +152,7 @@ overflow: visible; padding-top: 2px; padding-bottom: 2px; - /*text-align: center;*/ - opacity: 0.2; + opacity: 0.5; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; @@ -144,6 +161,8 @@ transition: all 0.2s ease; } + + .new-ribbon { height: 0px; @@ -154,16 +173,13 @@ transition: all 0.2s ease; } + .current.image { opacity: 1.0; } -.current.ribbon { - /* - padding-top: 20px; - padding-bottom: 20px; - */ +.current.ribbon { opacity: 1.0; -webkit-transition: all 0.2s ease; @@ -173,54 +189,8 @@ transition: all 0.2s ease; } + .current.ribbon .image { } -/* single image theme (start everything with .single-image-mode) - * - * XXX need to make this touch friendly... - */ -.single-image-mode .container { - background: gray; -} - -.single-image-mode .image { - opacity: 0.0; - /* XXX need to fix animation with this... */ - position: absolute; - left: 0px; - /* - zoom: 120%; - */ -} - -.single-image-mode .image:hover { - /*opacity: 0.5;*/ - /* XXX need to fix animation with this... */ - position: absolute; - left: 0px; -} - -.single-image-mode .current.image:hover, .single-image-mode .current.image { - opacity: 1.0; - /* XXX need to fix animation with this... */ - position: absolute; - left: 0px; -} - - -/* wide view mode */ - -/* XXX not yet working correctly... -.wide-view-mode { - transform: scale(0.2,0.2); - -ms-transform: scale(0.2,0.2); - -webkit-transform: scale(0.2,0.2); - -o-transform: scale(0.2,0.2); - -moz-transform: scale(0.2,0.2); -} -*/ -.wide-view-mode .field { -} - diff --git a/ui/gallery.html b/ui/gallery.html index 3e21f238..c211824d 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -3,7 +3,11 @@ --> + + + +