diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index f3c880aa..b8c23c5d 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -318,21 +318,27 @@ button:hover { position: relative; float: left; - opacity: 0.4; - size: 30px; cursor: default; z-index: 4000; } -.buttons:hover { + +/* general button visibility */ +.buttons .button { + opacity: 0.4; +} +.buttons:hover .button { opacity: 1; } -.light .buttons { +.buttons .button.visible { + opacity: 1 !important; +} +.light .buttons .button { opacity: 0.5; } -.dark .buttons { +.dark .buttons .button { opacity: 0.2; } @@ -359,7 +365,7 @@ button:hover { background: transparent; } .buttons .button sub { - font-size: x-small; + font-size: x-small; } @@ -394,16 +400,11 @@ button:hover { } - /* main buttons... */ .main-buttons.buttons { top: 0px; left: 0px; } -.main-buttons.buttons:hover { - opacity: 1; -} - /* secondary buttons... */ @@ -411,9 +412,6 @@ button:hover { top: 0px; float: right; } -.secondary-buttons.buttons:hover { - opacity: 1; -} /* .secondary-buttons.buttons { top: 40px; @@ -432,9 +430,6 @@ button:hover { z-index: 9999; } -.app-buttons.buttons:hover { - opacity: 1; -} .app-buttons .button.close:hover { background: rgba(255, 0, 0, 0.8); } @@ -538,12 +533,12 @@ button:hover { } /* XXX not sure if this is the right way to go... */ -.single-image-mode .main-buttons, -.single-image-mode .app-buttons { +.single-image-mode .main-buttons:not(:hover) .button, +.single-image-mode .app-buttons:not(:hover) .button { opacity: 0.1; } -.slideshow-running .main-buttons, -.slideshow-running .app-buttons { +.slideshow-running .main-buttons:not(:hover) .button, +.slideshow-running .app-buttons:not(:hover) .button { opacity: 0; } diff --git a/ui (gen4)/features/ui-slideshow.js b/ui (gen4)/features/ui-slideshow.js index 019abe4c..71b5e652 100755 --- a/ui (gen4)/features/ui-slideshow.js +++ b/ui (gen4)/features/ui-slideshow.js @@ -48,6 +48,7 @@ var SlideshowActions = actions.Actions({ ], }, + // XXX should this take the slideshow off pause if paused??? toggleSlideshow: ['Slideshow/$Slideshow quick toggle', toggler.CSSClassToggler( function(){ return this.dom }, @@ -182,6 +183,14 @@ var SlideshowActions = actions.Actions({ return o })], + + slideshowButtonAction: ['- Slideshow/', + core.doc` + `, + function(){ + return this.toggleSlideshowTimer('?') == 'paused' ? + (this.toggleSlideshowTimer() && 'on') + : this.toggleSlideshow() }], // settings... // NOTE: these are disabled as they are repeated in the slideshow dialog... @@ -241,7 +250,7 @@ var SlideshowActions = actions.Actions({ this.__slideshow_timer = 'suspended' } }], - toggleSlideshowTimer:['Slideshow/Pause or resume running slideshow', + toggleSlideshowTimer: ['Slideshow/Pause or resume running slideshow', core.doc` NOTE: this will have no effect if the slideshow is not running... @@ -250,8 +259,10 @@ var SlideshowActions = actions.Actions({ toggler.Toggler(null, function(_, state){ if(state == null){ - return this.__slideshow_timer == 'suspended' ? 'paused' - : !!this.__slideshow_timer ? 'running' + return this.__slideshow_timer == 'suspended' ? + 'paused' + : !!this.__slideshow_timer ? + 'running' : 'off' } @@ -341,12 +352,7 @@ module.Slideshow = core.ImageGridFeatures.Feature({ ['stop', function(){ this.toggleSlideshow('off') }], - // slideshow hold... - // - // Holding down a key or mouse button will suspend the slideshow - // and resume it when the key/button is released... - // - // XXX experimental, needs more testing... + // slideshow pause... ['toggleSlideshow', function(){ var that = this @@ -355,20 +361,10 @@ module.Slideshow = core.ImageGridFeatures.Feature({ return } + var running = this.toggleSlideshow('?') == 'on' var toggle_debounce = false - var hold = this.__slideshow_hold_handler - = this.__slideshow_hold_handler - || function(evt){ - !toggle_debounce - && that.toggleSlideshowTimer('?') == 'running' - && that.suspendSlideshowTimer() } - var release = this.__slideshow_release_handler - = this.__slideshow_release_handler - || function(evt){ - !toggle_debounce - && that.toggleSlideshowTimer('?') != 'running' - && that.resetSlideshowTimer() } + // toggle on click... var toggle = this.__slideshow_toggle_handler = this.__slideshow_toggle_handler || function(){ @@ -377,22 +373,35 @@ module.Slideshow = core.ImageGridFeatures.Feature({ toggle_debounce = true setTimeout(function(){ toggle_debounce = false - }, that.config['image-click-debounce-timeout'] || 100) - } - } + }, that.config['image-click-debounce-timeout'] || 100) } } + running ? + this.dom.on('click', toggle) + : this.dom.off('click', toggle) - if(this.toggleSlideshow('?') == 'on'){ - this.dom.on('mousedown', hold) - this.dom.on('mouseup', release) - this.dom.on('tap', toggle) - - } else { - this.dom.off('mousedown', hold) - this.dom.off('mouseup', release) - this.dom.off('touchend', toggle) - } + // toggle on blur/focus... + var user_paused = false + var focus_debounce = false + var blur = this.__slideshow_blur_handler + = this.__slideshow_blur_handler + || function(){ + if(!focus_debounce){ + user_paused = that.toggleSlideshowTimer('?') == 'paused' + that.toggleSlideshowTimer('paused') + focus_debounce = true } } + var focus = this.__slideshow_focus_handler + = this.__slideshow_focus_handler + || function(){ + focus_debounce = false + user_paused + || that.toggleSlideshowTimer('running') } + running ? + this.dom + .on('blur', blur) + .on('focus', focus) + : this.dom + .off('blur', blur) + .off('focus', focus) }], - //*/ // pause/resume slideshow on modal stuff... ['firstModalOpen', diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index 40ba82ee..e0033e4e 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/ui (gen4)/features/ui-widgets.js @@ -2247,7 +2247,7 @@ var ButtonsActions = actions.Actions({ ]], 'C': ['crop', 'browseActions: "Crop/" -- Crop menu...'], '▷': ['slideshow', [ - 'toggleSlideshow -- Slideshow', + 'slideshowButtonAction -- Slideshow', 'slideshowDialog -- Slideshow menu...', ]], }, @@ -2411,8 +2411,10 @@ module.Buttons = core.ImageGridFeatures.Feature({ 'width': '0px', 'overflow': 'visible', }) - .text(l > 99 ? '99+' - : l == 0 ? '' + .text(l > 99 ? + '99+' + : l == 0 ? + '' : l) /* $('.main-buttons.buttons .collections.button sub') @@ -2427,14 +2429,25 @@ module.Buttons = core.ImageGridFeatures.Feature({ //*/ }], // update slideshow status... - ['toggleSlideshow', + [['toggleSlideshow', 'toggleSlideshowTimer'], function(){ + var mode = this.toggleSlideshow('?') + mode = (mode == 'on' + && this.toggleSlideshowTimer('?') == 'paused') ? + 'paused' + : mode + // update the button icon... $('.main-buttons.buttons .slideshow.button') - .html(this.toggleSlideshow('?') == 'on' ? - '◼' + .html(mode == 'on' ? + '◼' + : mode == 'paused' ? + '❚❚' //'◻' - : '▷') - }], + : '▷') + .run(function(){ + mode == 'paused' ? + this.addClass('visible') + : this.removeClass('visible') }) }], // update zoom button status... ['viewScale', function(){ diff --git a/ui (gen4)/lib/widget/browse2.js b/ui (gen4)/lib/widget/browse2.js index c87fa058..c87d07e4 100755 --- a/ui (gen4)/lib/widget/browse2.js +++ b/ui (gen4)/lib/widget/browse2.js @@ -1314,6 +1314,15 @@ var BaseBrowserPrototype = { // NOTE: this may or may not be a Browser object. parent: null, + // Root dialog... + // + get root(){ + var cur = this + while(cur.parent instanceof BaseBrowser){ + cur = cur.parent + } + return cur }, + // Section containers... // // Format: @@ -5180,8 +5189,16 @@ var HTMLBrowserPrototype = { that.dom && that.dom.focus() }) }, __open__: function(evt, elem){ this.focus(elem) }, + //* XXX there is a problem with .update() propagation up the nested + // dialogs -- we lose context... + // ...see .renderContext(..) / .renderFinalize(..) for details... __expand__: function(){ this.update() }, __collapse__: function(){ this.update() }, + /*/ + // XXX this is a hack -- we should fix the actual update propagation and revert to the above... + __expand__: function(){ this.root.update() }, + __collapse__: function(){ this.root.update() }, + //*/ __select__: updateElemClass('add', 'selected'), __deselect__: updateElemClass('remove', 'selected'), __disable__: updateElemClass('add', 'disabled', function(){ this.update() }),