From 03dea124d10c8a4716b1c70a4f26c5af454c0a15 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 4 Aug 2012 16:07:08 +0400 Subject: [PATCH] more refactoring and cleanup... Signed-off-by: Alex A. Naanou --- ui/TODO.otl | 21 ++++++++++++--------- ui/controls.otl | 40 +++++++++++++++++++++++++--------------- ui/gallery-prototype.js | 25 +++++++++++++++++-------- ui/gallery.css | 18 +++++++++++++----- ui/gallery.html | 25 ++++++++++++------------- ui/ui.js | 2 -- 6 files changed, 79 insertions(+), 52 deletions(-) diff --git a/ui/TODO.otl b/ui/TODO.otl index 8a8784af..87787252 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -58,21 +58,18 @@ Priority work [X] one (with zooming) [X] single image mode with zooming | ribbons are hidden - [_] 30% UI + [_] 33% UI [X] fix single image mode | need to center the image correctly... - [_] 46% add screen buttons for all actions... + [X] 100% add screen buttons for all actions... [X] navigation [X] actions - [_] zooming - [_] 33% zoom presets - [_] single - [_] three + [X] zooming + [X] 100% zoom presets + [X] single + [X] three [X] wide | toggle... - [_] return to current image / home (after drag) - [_] tap image to return from large magnification - [_] pinch to zoom [_] stretch viewer to screen [_] 0% layout [_] tablet @@ -89,6 +86,11 @@ Priority work | @media screen {} [_] web | is this is the same as the above two? (with auto-select) + [_] 0% return to current image / home (after drag) + [_] button + [_] keyboard + [_] tap image to return from large magnification + [_] pinch to zoom [_] 0% setting screen [_] basic screen [_] keyboard config (low priority) @@ -134,6 +136,7 @@ Priority work [_] cleanup legacy workarounds [_] ui.js, gallery-prototype.js either merge or revise split logic [_] 0% Preview III + [_] revise controls... [_] dynamic image/preview swap for zooming | important to make 1:1 previews for all main views and zoom levels... | also need to make this as device-neutral as possible... diff --git a/ui/controls.otl b/ui/controls.otl index a33da2b2..4a8dbecd 100755 --- a/ui/controls.otl +++ b/ui/controls.otl @@ -17,23 +17,31 @@ Control scheme: general focus image -- tap/click - - + left image - left swipe right + - + left,bksp,<,p swipe right + - right image - right swipe left + - + right,space,>,n swipe left + - up image - up -- (via focus image) ?? - + up - (via focus image) ?? - down image - down -- (via focus image) ?? - + down - (via focus image) ?? - + + skip 10 left + ?? - - - + skip 10 right + ?? - - - + first image - home -- ?? - + home - ?? - last image - end -- ?? - + end - ?? - shift up s-up swipe up + - shift down s-down swipe down + - + shift up, new ribbon c-s-up ?? ?? ?? shift down, new ribbon @@ -42,36 +50,38 @@ Control scheme: drag view -- tap-drag - - move view left - ?? ?? ?? ?? + h - - - move view right - ?? ?? ?? ?? + l - - - move view up - ?? ?? ?? ?? + k - - - move view down - ?? ?? ?? ?? + j - - - center current image ?? ?? ?? ?? zoom in - + pinch spread - - + + pinch spread + - zoom out - - pinch closeup - - + - pinch closeup + - fit one 1 tap current image - - toggle single image mode - ?? ?? - - + Enter ?? + - toggle slideshow mode ?? ?? - - keyboard help + ?? ?? - - settings + ?? ?? - - ribbon-specific fit three - 3 ?? - - + 3 ?? + - broad view - ?? ?? - - + ?? ?? + - single-specific . diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index 79a53d29..810634fa 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -37,12 +37,20 @@ function setupControlElements(){ $(".image").click(setCurrentImage) // buttons... - $('.next-image').click(nextImage) - $('.prev-image').click(prevImage) - $('.demote').click(shiftImageUp) - $('.promote').click(shiftImageDown) - $('.toggle-wide').click(toggleWideView) - $('.toggle-single').click(toggleSingleImageMode) + $('.screen-button.next-image').click(nextImage) + $('.screen-button.prev-image').click(prevImage) + $('.screen-button.demote').click(shiftImageUp) + $('.screen-button.promote').click(shiftImageDown) + + $('.screen-button.zoom-in').click(function(){scaleContainerBy(ZOOM_FACTOR)}) + $('.screen-button.zoom-out').click(function(){scaleContainerBy(1/ZOOM_FACTOR)}) + + $('.screen-button.toggle-wide').click(toggleWideView) + $('.screen-button.toggle-single').click(toggleSingleImageMode) + + $('.screen-button.fit-three').click(fitThreeImages) + + $('.screen-button.settings').click(function(){alert('not implemented yet...')}) } @@ -111,7 +119,7 @@ var ZOOM_FACTOR = 2 // XXX need to make this handle modifiers gracefully... var keys = { toggleHelp: [72], - toggleSingleImageMode: [70], + toggleSingleImageMode: [70, 13], // ???, Enter close: [27, 88, 67], // zooming... @@ -256,9 +264,10 @@ function toggleSingleImageMode(){ // wide view mode toggle... function toggleWideView(){ if($('.wide-view-mode').length > 0){ - setContainerScale(1) + setContainerScale(ORIGINAL_FIELD_SCALE) $('.viewer').removeClass('wide-view-mode') } else { + ORIGINAL_FIELD_SCALE = getElementScale($('.field')) setContainerScale(0.1) $('.viewer').addClass('wide-view-mode') } diff --git a/ui/gallery.css b/ui/gallery.css index 436ccbf0..0513082f 100755 --- a/ui/gallery.css +++ b/ui/gallery.css @@ -65,12 +65,15 @@ } -.promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single { +.screen-button { text-align: center; vertical-align: middle; width: 100%; - height: 150px; + height: 125px; + + /* coloring is temporary... */ background: gray; + color: silver; -moz-user-select: none; -webkit-user-select: none; @@ -80,15 +83,20 @@ } -.next-image, .prev-image, .toggle-wide, .toggle-single { +.next-image, .prev-image, .toggle-wide, .toggle-single, .zoom-in, .settings, .toggle-wide { + /* coloring is temporary... */ background: silver; + color: gray; } -.toggle-wide, .toggle-single { - height:50px +.toggle-single, .fit-three, .zoom-in, .zoom-out { + height: 50px; } +.settings, .toggle-wide { + height: 25px; +} .promote { } diff --git a/ui/gallery.html b/ui/gallery.html index 2d6987de..79973d62 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -12,11 +12,6 @@ - - - - - @@ -68,10 +63,12 @@ $(document).ready(setup);
-
^
-
<
-
v
-
[ ]
+
^
+
<
+
v
+
[ ]
+
ooo
+
settings
@@ -85,10 +82,12 @@ $(document).ready(setup);
-
^
-
>
-
v
-
+/-
+
^
+
>
+
v
+
+
+
-
+
...
diff --git a/ui/ui.js b/ui/ui.js index 9982ea37..963bb706 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -67,8 +67,6 @@ function getCurrentHorizontalOffset(image){ image = $('.image.current') } - var scale = getElementScale($('.field')) - var ribbon = image.parents('.ribbon') var images = ribbon.children('.image')