diff --git a/ui/TODO.otl b/ui/TODO.otl index 33c164db..03aa5904 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -1,5 +1,5 @@ Priority work - [_] 87% Preview II + [_] 89% Preview II [_] 49% native client [_] 33% Windows (CEF / CEFPython) [X] basic test @@ -11,12 +11,12 @@ Priority work [X] disable transitions... [_] basic wrapper | hook-in os-specific API - [_] 88% UI - [_] 0% disable opacity for current ribbon - [_] 0% opacity for current ribbon mode + [X] 100% UI + [X] 100% disable opacity for current ribbon + [X] 1.0 opacity for current ribbon mode | automatically turned on for magnifications over 2 images | per screen.... - [_] current image indicator + [X] current image indicator | this can be: | - rectangle (not border) | - underline @@ -123,8 +123,8 @@ Priority work [X] 100% actions [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... - [_] 26% Preview II (optional features) - [_] % PhoneGap + Android Issues: + [_] 24% Preview II (optional features) + [_] 0% PhoneGap + Android Issues: [_] half the keyboard is not working... [_] screen buttons are very laggy | while swipe works super fast... diff --git a/ui/fullscreen.html b/ui/fullscreen.html index 8bc40ce3..6b4f7f09 100755 --- a/ui/fullscreen.html +++ b/ui/fullscreen.html @@ -88,6 +88,8 @@ $(document).ready(setup);
+ +
@@ -95,12 +97,16 @@ $(document).ready(setup); loading...
+ +
+ +
*
@@ -113,8 +119,13 @@ $(document).ready(setup);
ooo
?
+ +
+
+
+
diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index 76f9a1e6..eb03b50a 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -738,6 +738,18 @@ function getCurrentHorizontalOffset(image){ +// XXX some minor inacuracies... +function centerIndicator(){ + // XXX something odd going on with the border here... + var i_border = Math.abs($('.current-indicator').outerHeight() - $('.current-indicator').height())/2 + $('.current-indicator').css({ + 'top': ($('.ribbon').index($('.current.ribbon'))) * $('.ribbon').outerHeight() - i_border, + 'left': ($('.viewer').outerWidth() - $('.current-indicator').outerWidth())/2, + }) +} + + + function centerSquare(){ $('.field').css({ 'margin-top': getCurrentVerticalOffset() @@ -973,7 +985,7 @@ function loadJSON(data, set_order){ var field = $('.field') // drop all old content... - field.children().remove() + field.children('.ribbon').remove() for(var i=0; i < ribbons.length; i++){ var images = ribbons[i] @@ -1005,6 +1017,7 @@ function handleImageClick(){ .addClass('current') // position the field and ribbons... centerSquare() + centerIndicator() alignRibbons() } @@ -1297,6 +1310,21 @@ ImageGrid.GROUP('Mode: Ribbon', type: 'toggle', }, createCSSClassToggler('.viewer', 'single-ribbon-mode')), + ImageGrid.ACTION({ + id: 'toggleCurrentRibbonOpacity', + title: 'Current ribbon opacity', + doc: 'Toggle other image transparancy/opacity in current ribbon.', + type: 'toggle', + }, + createCSSClassToggler('.viewer', 'opaque-current-ribbon')), + ImageGrid.ACTION({ + id: 'toggleIndicatorDot', + title: 'Dot indicator', + doc: 'Toggle indicator between dot and frame modes.\n\n'+ + 'NOTE: this is visible only when the indicator is visible.', + type: 'toggle', + }, + createCSSClassToggler('.viewer', 'dot-indicator')), // XXX this can be done in two ways: // - keep all images when promoting, just add a class to them that diff --git a/ui/gallery.css b/ui/gallery.css index 3674d3a0..535c97d7 100755 --- a/ui/gallery.css +++ b/ui/gallery.css @@ -102,11 +102,13 @@ } -.image { - float: left; - +.image, .current-indicator { width: 350px; height: 350px; +} + +.image { + float: left; background: no-repeat 50% black; background-size: contain; @@ -116,6 +118,45 @@ cursor: hand; } +.current-indicator { + display: none; +} + + +.opaque-current-ribbon .current-indicator { + display: block; + position: absolute; +} +.opaque-current-ribbon .current-indicator div { + position: relative; + border: solid gray 4px; + + margin-top: -2px; + margin-left: -4px; + + width: 100%; + height: 100%; +} + +.opaque-current-ribbon.dot-indicator .current-indicator { + display: block; + position: absolute; +} +.opaque-current-ribbon.dot-indicator .current-indicator div { + position: absolute; + border: solid silver 5px; + + bottom: 5px; + right: 5px; + + width: 5px; + height: 5px; +} + +.opaque-current-ribbon .current.ribbon .image { + opacity: 1.0; +} + .mock-image { background: blue; diff --git a/ui/gallery.html b/ui/gallery.html index 2d4e4e27..f9bd28dc 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -110,6 +110,9 @@ $(document).ready(setup);
+
+
+