From 4c720d6de207d2683aa2679fd449a2cb49e9e211 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sun, 16 Jun 2013 02:42:29 +0400 Subject: [PATCH] added single ribbon mode (not final, not sure if we need to go between ribbons in this mode), and several tweaks... Signed-off-by: Alex A. Naanou --- ui/TODO.otl | 13 ++++---- ui/data.js | 21 ++++++++++++ ui/keybindings.js | 47 +++++++++++++++------------ ui/layout.css | 73 ++++++++++++++++++++++++++++++++++++++++-- ui/layout.less | 81 +++++++++++++++++++++++++++++++++++++++++++++-- ui/lib/jli.js | 2 +- ui/marks.js | 28 +++++++--------- ui/modes.js | 23 ++++++++++++++ ui/setup.js | 9 ++++-- 9 files changed, 245 insertions(+), 52 deletions(-) diff --git a/ui/TODO.otl b/ui/TODO.otl index a3f3b008..599010eb 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -93,18 +93,19 @@ Roadmap [_] 29% Gen 3 current todo [_] 58% High priority - % Priority tasks - full archive index - ribbon separation + [_] % Priority tasks + [_] full archive index + [_] segmented loading of images and data + [_] ribbon separation | split ribbon into manageable chunks | | this can be done naturally by: | - date | - event | - tag - index and group ALL files in an archive - import metadata - real GIDs + [_] index and group ALL files in an archive + [_] import metadata + [_] real GIDs [_] BUG: align problems are back... | default data set (browser/images.js) same images #4 (going | from right) & #5 (going from left) of 18 in the first ribbon diff --git a/ui/data.js b/ui/data.js index b0744b93..10e027a4 100755 --- a/ui/data.js +++ b/ui/data.js @@ -1042,6 +1042,27 @@ function loadSettings(){ } +// XXX make keep_ribbons option work... +function cropDataToGIDs(gids, keep_ribbons){ + var cur = DATA.current + var old_data = DATA + DATA = { + varsion: '2.0', + current: null, + ribbons: [ + gids + ], + order: DATA.order.slice(), + } + DATA.current = getGIDBefore(cur, 0) + + reloadViewer() + updateImages() + + return old_data +} + + /********************************************************************** * Image caching... diff --git a/ui/keybindings.js b/ui/keybindings.js index 9715d683..72dac103 100755 --- a/ui/keybindings.js +++ b/ui/keybindings.js @@ -149,14 +149,6 @@ var KEYBOARD_CONFIG = { title: 'Single image mode', doc: 'To toggle between this and ribbon modes press Enter.', - /* - F: doc('Toggle view proportions', - function(){ - var mode = toggleImageProportions() - showStatus('Fitting image to:', mode + '...') - centerRibbons() - }), - */ Esc: doc('Exit single image mode', function(){ toggleSingleImageMode('off') @@ -168,13 +160,15 @@ var KEYBOARD_CONFIG = { // marked only ribbon mode... // - '.marked-only-view:not(.single-image-mode)': { - title: 'Marked only view', - doc: 'To toggle this mode press shift-F2.', + '.single-ribbon-mode:not(.single-image-mode), .marked-only-view:not(.single-image-mode)': { + title: 'Marked only and single ribbon views', + doc: 'To show marked-only images press shift-F2 and for single ribbon mode press F3.', - Esc: doc('Exit marked only view', + Esc: doc('Exit mode', function(){ + // add something like uncrop here... toggleMarkedOnlyView('off') + toggleSingleRibbonMode('off') return false }), Q: 'Esc', @@ -540,13 +534,22 @@ var KEYBOARD_CONFIG = { // function(){ toggleImageMarkBlock() }), ctrl: doc('Mark current ribbon', - function(){ markAll('ribbon') }), + function(){ + toggleMarkesView('on') + markAll('ribbon') + }), 'ctrl+shift': doc('Mark all images', - function(){ markAll('all') }), + function(){ + toggleMarkesView('on') + markAll('all') + }), }, D: { ctrl: doc('Unmark current ribbon', - function(){ removeImageMarks('ribbon') }), + function(){ + event.preventDefault() + removeImageMarks('ribbon') + }), 'ctrl+shift': doc('Unmark all images', function(){ removeImageMarks('all') }), }, @@ -563,13 +566,17 @@ var KEYBOARD_CONFIG = { F2: { default: doc('Toggle mark visibility', function(){ toggleMarkesView() }), - //shift: 'F3', + shift: doc('Toggle marked only images view', + function(){ + toggleMarkedOnlyView() + }), }, - F3: doc('Toggle marked only images view', - function(){ - toggleMarkedOnlyView() - }), + F3: doc('Toggle single ribbon view (EXPERIMENTAL)', + function(){ + event.preventDefault() + toggleSingleRibbonMode() + }), E: doc('Open image in external software', openImage), // XXX make F4 a default editor and E a default viewer... diff --git a/ui/layout.css b/ui/layout.css index 3aef6ddb..26cc7d0f 100644 --- a/ui/layout.css +++ b/ui/layout.css @@ -14,6 +14,50 @@ .expanding-text:hover .hidden { display: inline; } +[tooltip-top] { + position: relative; + text-decoration: none; +} +[tooltip-top]:after { + content: attr(tooltip-top); + position: absolute; + bottom: 130%; + left: 20%; + background: #ffcb66; + padding: 5px 15px; + color: black; + border-radius: 10px; + white-space: nowrap; + opacity: 0; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + transition: all 0.4s ease; +} +[tooltip-top]:before { + content: ""; + position: absolute; + width: 0; + height: 0; + border-top: 20px solid #ffcb66; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + transition: all 0.4s ease; + opacity: 0; + left: 30%; + bottom: 90%; +} +[tooltip-top]:hover:after { + bottom: 100%; +} +[tooltip-top]:hover:before { + bottom: 70%; +} +[tooltip-top]:hover:after, +[tooltip-top]:hover:before { + opacity: 1; +} /*********************************************************************/ body { font-family: sans-serif; @@ -321,6 +365,17 @@ button:hover { background-image: url(images/loading-270deg.gif); } */ +/* separator test */ +.image.red + .image:not(.red):before { + display: inline-block; + position: relative; + content: ""; + top: 0px; + left: -50px; + width: 100px; + height: 100%; + background-color: yellow; +} /***************************************************** Image marks ***/ .marks-visible.viewer .marked.image:after { display: block; @@ -795,15 +850,18 @@ button:hover { .single-image-mode.viewer .global-mode-indicators:hover { opacity: 1; } +.global-mode-indicators .indicator, +.context-mode-indicators .indicator { + display: none; + height: 20px; + vertical-align: center; +} /* actual indicators */ /* marks... */ .global-mode-indicators .marked-only-visible, .global-mode-indicators .marks-visible, .context-mode-indicators .current-image-marked { - display: none; color: blue; - height: 20px; - vertical-align: center; } .global-mode-indicators .marked-only-visible .shown, .global-mode-indicators .marks-visible .shown, @@ -824,6 +882,11 @@ button:hover { margin-top: 3px; top: 50%; } +.global-mode-indicators .marked-only-visible:after, +.global-mode-indicators .marks-visible:after, +.context-mode-indicators .current-image-marked:after { + color: blue; +} .marks-visible.viewer .global-mode-indicators .marks-visible { display: inline-block; } @@ -844,6 +907,10 @@ button:hover { .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown { display: inline-block; } +.single-ribbon-mode.viewer .global-mode-indicators .single-ribbon-mode { + color: gray; + display: inline-block; +} /********************************************** Mode: single image ***/ .single-image-mode.viewer .image { background-color: transparent; diff --git a/ui/layout.less b/ui/layout.less index 6c84848b..3f836e43 100755 --- a/ui/layout.less +++ b/ui/layout.less @@ -65,6 +65,52 @@ } +[tooltip-top] { + position: relative; + text-decoration: none; +} +[tooltip-top]:after { + content: attr(tooltip-top); + position: absolute; + bottom: 130%; + left: 20%; + background: #ffcb66; + padding: 5px 15px; + color: black; + border-radius: 10px; + white-space: nowrap; + opacity: 0; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + transition: all 0.4s ease; +} +[tooltip-top]:before { + content: ""; + position: absolute; + width: 0; + height: 0; + border-top: 20px solid #ffcb66; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + -webkit-transition: all 0.4s ease; + -moz-transition : all 0.4s ease; + transition : all 0.4s ease; + opacity: 0; + left: 30%; + bottom: 90%; +} +[tooltip-top]:hover:after { + bottom: 100%; +} +[tooltip-top]:hover:before { + bottom: 70%; +} +[tooltip-top]:hover:after, +[tooltip-top]:hover:before { + opacity: 1; +} + + /*********************************************************************/ @@ -363,6 +409,20 @@ button:hover { */ +/* separator test */ +.image.red+.image:not(.red):before { + display: inline-block; + position: relative; + content: ""; + top:0px; + left: -50px; + width: 100px; + height: 100%; + + background-color: yellow; +} + + /***************************************************** Image marks ***/ @@ -791,16 +851,20 @@ button:hover { opacity: 1; } +.global-mode-indicators .indicator, +.context-mode-indicators .indicator { + display: none; + height: 20px; + vertical-align: center; +} + /* actual indicators */ /* marks... */ .global-mode-indicators .marked-only-visible, .global-mode-indicators .marks-visible, .context-mode-indicators .current-image-marked { - display: none; color: blue; - height: 20px; - vertical-align: center; } .global-mode-indicators .marked-only-visible .shown, .global-mode-indicators .marks-visible .shown, @@ -822,6 +886,11 @@ button:hover { margin-top: 3px; top: 50%; } +.global-mode-indicators .marked-only-visible:after, +.global-mode-indicators .marks-visible:after, +.context-mode-indicators .current-image-marked:after { + color: blue; +} .marks-visible.viewer .global-mode-indicators .marks-visible { display: inline-block; } @@ -844,6 +913,12 @@ button:hover { } +.single-ribbon-mode.viewer .global-mode-indicators .single-ribbon-mode { + color: gray; + display: inline-block; +} + + /********************************************** Mode: single image ***/ diff --git a/ui/lib/jli.js b/ui/lib/jli.js index 67823941..d64ba8e0 100755 --- a/ui/lib/jli.js +++ b/ui/lib/jli.js @@ -171,7 +171,7 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){ if(callback_pre.call(this, action) === false){ // XXX should we return action here??? //return - return action + return func('?') } } // update the element... diff --git a/ui/marks.js b/ui/marks.js index 54867a4e..ac2c564c 100755 --- a/ui/marks.js +++ b/ui/marks.js @@ -33,22 +33,9 @@ function loadMarkedOnlyData(cmp, no_cleanout_marks){ marked.splice(i, 1) } } - ALL_DATA = DATA - DATA = { - varsion: '2.0', - current: null, - ribbons: [ - marked - ], - //order: marked.slice(), - order: DATA.order, - } - DATA.current = getGIDBefore(cur, 0) - reloadViewer() - toggleMarkesView('off') - // XXX FIX: for some reason not all previews get updated to the - // right size... - updateImages() + + ALL_DATA = cropDataToGIDs(marked) + return DATA } @@ -75,7 +62,14 @@ function loadAllImages(){ var toggleMarkedOnlyView = createCSSClassToggler( '.viewer', - 'marked-only-view', + 'marked-only-view cropped-mode', + function(action){ + // prevent reentering... + if(action == 'on' && $('.viewer').hasClass('cropped-mode') + || action == toggleMarkedOnlyView('?')){ + return false + } + }, function(action){ if(action == 'on'){ loadMarkedOnlyData() diff --git a/ui/modes.js b/ui/modes.js index 2671c59b..2dbf726f 100755 --- a/ui/modes.js +++ b/ui/modes.js @@ -170,6 +170,29 @@ var toggleSingleImageMode = createCSSClassToggler( }) +// XXX make this not conflict with marked-only-mode, better yet, make them +// one single mode... +var toggleSingleRibbonMode = createCSSClassToggler( + '.viewer', + 'single-ribbon-mode cropped-mode', + function(action){ + // prevent reentering... + if(action == 'on' && $('.viewer').hasClass('cropped-mode') + || action == toggleSingleRibbonMode('?')){ + return false + } + }, + function(action){ + if(action == 'on'){ + ALL_DATA = cropDataToGIDs(DATA.ribbons[getRibbonIndex()].slice()) + } else { + DATA = ALL_DATA + reloadViewer() + updateImages() + } + }) + + // TODO transitions... // TODO a real setup UI (instead of prompt) var toggleSlideShowMode = createCSSClassToggler( diff --git a/ui/setup.js b/ui/setup.js index 5adf4517..dde28f48 100755 --- a/ui/setup.js +++ b/ui/setup.js @@ -16,6 +16,11 @@ var PROPORTIONS_RATIO_THRESHOLD = 1.5 */ function setupIndicators(){ + showGlobalIndicator( + 'single-ribbon-mode', + 'Single ribbon mode (F3)') + .css('cursor', 'hand') + .click(function(){ toggleSingleRibbonMode() }) showGlobalIndicator( 'marks-visible', 'Marks visible (F2)') @@ -23,7 +28,7 @@ function setupIndicators(){ .click(function(){ toggleMarkesView() }) showGlobalIndicator( 'marked-only-visible', - 'Marked only images visible (F3)') + 'Marked only images visible (shift-F2)') .css('cursor', 'hand') .click(function(){ toggleMarkedOnlyView() }) @@ -283,7 +288,7 @@ function setupDataBindings(viewer){ // add marked image to list... if(action == 'on'){ - MARKED.push(gid) + MARKED.indexOf(gid) == -1 && MARKED.push(gid) // remove marked image from list... } else {