diff --git a/ui/layout.css b/ui/layout.css index 75bc9def..e3037b88 100644 --- a/ui/layout.css +++ b/ui/layout.css @@ -116,14 +116,25 @@ button:hover { -ms-transform-origin: top left; transform-origin: top left; } -.ribbon-set:empty:after { - display: block; - top: 0px; - left: 0px; +/* empty ribbon set... */ +.ribbon-set:empty { width: 100%; height: 100%; - content: "Empty"; +} +.ribbon-set:empty:after { + display: block; + position: absolute; + content: "No files loaded, press 'O' to load."; + top: 50%; + left: 0px; + width: 100%; + height: 20px; + margin-top: -10px; text-align: center; + vertical-align: center; + font-size: 20px; + color: silver; + opacity: 0.9; } /********************************************************** Ribbon ***/ .ribbon { @@ -851,6 +862,9 @@ button:hover { .light.viewer .overlay-block:hover .background:after { color: black; } +.light.viewer .ribbon-set:empty:after { + color: gray; +} .gray.viewer, .gray.viewer .overlay-block .background { background: #333; diff --git a/ui/layout.less b/ui/layout.less index ad9ea911..3cb8eba2 100755 --- a/ui/layout.less +++ b/ui/layout.less @@ -191,14 +191,29 @@ button:hover { and aligning... */ .origin(top, left); } -.ribbon-set:empty:after { - display: block; - top: 0px; - left: 0px; + +/* empty ribbon set... */ +.ribbon-set:empty { width: 100%; height: 100%; - content: "Empty"; +} +.ribbon-set:empty:after { + display: block; + position: absolute; + content: "No files loaded, press 'O' to load."; + + top: 50%; + left: 0px; + width: 100%; + height: 20px; + margin-top: -10px; + text-align: center; + vertical-align: center; + + font-size: 20px; + color: silver; + opacity: 0.9; } @@ -848,6 +863,9 @@ button:hover { .light.viewer .overlay-block:hover .background:after { color: black; } +.light.viewer .ribbon-set:empty:after { + color: gray; +} .gray.viewer, .gray.viewer .overlay-block .background { diff --git a/ui/modes.js b/ui/modes.js index c3cfcf58..2671c59b 100755 --- a/ui/modes.js +++ b/ui/modes.js @@ -182,14 +182,14 @@ var toggleSlideShowMode = createCSSClassToggler( // interval from user... //var interval = prompt('Slideshow interval (sec):', SLIDESHOW_INTERVAL/1000) formDialog($('.viewer'), 'Slideshow', { - 'Interval:': (SLIDESHOW_INTERVAL/1000) + 'sec', - 'Looping:': SLIDESHOW_LOOP ? true : false, - 'Reverse direction:': SLIDESHOW_DIRECTION == 'prev' ? true : false + 'Interval': (SLIDESHOW_INTERVAL/1000) + 'sec', + 'Looping': SLIDESHOW_LOOP ? true : false, + 'Reverse direction': SLIDESHOW_DIRECTION == 'prev' ? true : false }, 'Start') .done(function(data){ - var interval = parseFloat(data['Interval:']) - var looping = data['Looping:'] - var reverse = data['Reverse direction:'] + var interval = parseFloat(data['Interval']) + var looping = data['Looping'] + var reverse = data['Reverse direction'] SLIDESHOW_INTERVAL = isNaN(interval) ? 3000 : interval*1000 SLIDESHOW_LOOP = looping diff --git a/ui/setup.js b/ui/setup.js index b6acd621..b8828510 100755 --- a/ui/setup.js +++ b/ui/setup.js @@ -50,6 +50,18 @@ function setupIndicators(){ function setupDataBindings(viewer){ viewer = viewer == null ? $('.viewer') : viewer viewer + .click(function(){ + if($('.ribbon').length == 0){ + // XXX use the real action (the same as the keyboard handler)... + // browser version... + var getter = window.listDir != null ? getDir : prompt + getter('Path to open', BASE_URL) + .done(function(path){ + path = path.trim() + statusNotify(loadDir(path)) + }) + } + }) // XXX need to maintain the correct number of images per ribbon // per zoom setting -- things get really odd when a ribbon // is smaller than it should be... diff --git a/ui/ui.js b/ui/ui.js index bc4b29c0..28288681 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -468,7 +468,6 @@ var FIELD_TYPES = { .attr('nwworkingdir', value.ndir) .change(function(){ var p = file[0].files - console.log('mooo!!!', p[0]) if(p.length != 0){ field.find('.path').val(p[0].path) }