From 09675e12b4633f4e196f2ff731ca306044654f23 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 4 Jun 2013 16:32:33 +0400 Subject: [PATCH] started work on flipping... Signed-off-by: Alex A. Naanou --- ui/base.js | 62 ++- ui/data.js | 8 + ui/index.html | 34 ++ ui/layout.css | 1299 +++++++++++++++++++++++------------------------- ui/layout.less | 12 +- ui/setup.js | 2 +- ui/ui.js | 12 +- 7 files changed, 734 insertions(+), 695 deletions(-) diff --git a/ui/base.js b/ui/base.js index a01e4ea1..de4c8c2c 100755 --- a/ui/base.js +++ b/ui/base.js @@ -877,27 +877,79 @@ function rotateImage(direction, image){ }) $('.viewer').trigger('rotating' + direction.capitalize(), [image]) + + return image } function rotateLeft(image){ - rotateImage('left', image) + return rotateImage('left', image) } function rotateRight(image){ - rotateImage('right', image) + return rotateImage('right', image) } /******************************************************** Flipping ***/ -function flipVertical(image){ - // XXX +function getImageFlipState(image){ + image = image == null ? getImage() : $(image) + var state = image.attr('flipped') + + if(state == null){ + return [] + } + + state = state.split(',').map(function(e){ return e.trim() }) + + return state +} +function setImageFlipState(image, state){ + image = image == null ? getImage() : $(image) + + if(state.length == 0){ + image.removeAttr('flipped') + } else if(state != null){ + image.attr('flipped', state.join(', ')) + } + + return image +} + +// XXX not yet implemented... +// ...mostly because it will conflict with turning and require a +// very tightly woven with rotation code, both JS and CSS... +// i.e. requiring two sets of rotation styles, one for flipped +// and another for horizontally flipped image. +// ...at least flipping will not affect the square/viewer aspect +// ratio of images. +function flipImage(direction, image){ + image = image == null ? getImage() : $(image) + image.each(function(i, e){ + var img = $(this) + var state = getImageFlipState(img) + var i = state.indexOf(direction) + + if(i >= 0){ + state.splice(i, 1) + } else { + state.push(direction) + } + setImageFlipState(image, state) + }) + + $('.viewer').trigger('flipping' + direction.capitalize(), [image]) + + return image } +function flipVertical(image){ + return flipImage('vertical') +} function flipHorizontal(image){ - // XXX + return flipImage('horizontal') } diff --git a/ui/data.js b/ui/data.js index 0153e8bf..ce5d21e0 100755 --- a/ui/data.js +++ b/ui/data.js @@ -1425,6 +1425,8 @@ function updateRibbonsFromFavDirs(){ * Actions... */ +/******************************************************** Extension **/ + // Open image in an external editor/viewer // // NOTE: this will open the default editor/viewer. @@ -1438,6 +1440,9 @@ function openImage(){ } + +/********************************************************** Sorting **/ + function reverseImageOrder(){ DATA.order.reverse() updateRibbonOrder() @@ -1466,6 +1471,9 @@ function sortImagesByName(reverse){ } + +/*************************************************** Manual sorting **/ + // Ordering images... // NOTE: this a bit more complicated than simply shifting an image // left/right the DATA.order, we have to put it before or after diff --git a/ui/index.html b/ui/index.html index 61a822ec..31a2cbff 100755 --- a/ui/index.html +++ b/ui/index.html @@ -4,6 +4,8 @@ + + + + diff --git a/ui/layout.css b/ui/layout.css index dcb68c26..2ac2ec2e 100755 --- a/ui/layout.css +++ b/ui/layout.css @@ -1,677 +1,622 @@ -/********************************************************************** -* -**********************************************************************/ - -body { - font-family: sans-serif; - padding: 0px; - margin: 0px; -} - - - -/********************************************************** Viewer ***/ -.viewer { - position: relative; - width: 100%; - height: 100%; - overflow: hidden; - - /*border: solid blue 1px;*/ - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - -ms-user-select: none; - user-select: none; -} - - - -/****************************************************** Ribbon set ***/ -.ribbon-set { - position: absolute; - display: block; - - /* NOTE: this needs for scaling/zooming to behave correctly and not - shift the element, when its dimensions change... - ...this is because .ribbon-set will both be used for scaling - and aligning... */ - transform-origin: top left; - -ms-transform-origin: top left; - -webkit-transform-origin: top left; /* Safari and Chrome */ -} -.ribbon-set:empty:after { - display: block; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - content: "Empty"; - text-align: center; -} - - - -/********************************************************** Ribbon ***/ -.ribbon { - position: relative; - display: block; - height: auto; - min-width: 0px; - overflow: visible; - white-space: nowrap; - font-size: 0; - - margin-top: 20px; - margin-bottom: 20px; -} -.ribbon:empty { - display: none; -} -.ribbon:first-child { - margin-top: 0px; -} -.ribbon:last-child { - margin-bottom: 0px; -} - - - -/*********************************************************** Image ***/ -.image { - position: relative; - display: inline-block; - vertical-align: middle; - text-align:left; - width: 300px; - height: 300px; - font-size: 12pt; - overflow: hidden; - - box-sizing: border-box; - color: white; - - text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em; - - background: no-repeat 50% black; - background-size: contain; - /* XXX do we need this? */ - border: solid black 5px; -} -.current.image { - background: no-repeat 50% black; - background-size: contain; - - /* XXX remove this... */ - border: solid red 5px; -} - - -/* image turning... */ -/* NOTE: need to account for proportions after turning... */ -.image[orientation="90"] { - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -o-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} -.image[orientation="180"] { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -o-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} -.image[orientation="270"] { - -webkit-transform: rotate(270deg); - -moz-transform: rotate(270deg); - -o-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); -} - - -/* default backgrounds */ -/* XXX not sure if we need these... */ -/* -.image { - background-image: url(images/loading.gif); -} -.image[orientation="90"] { - background-image: url(images/loading-90deg.gif); -} -.image[orientation="180"] { - background-image: url(images/loading-180deg.gif); -} -.image[orientation="270"] { - background-image: url(images/loading-270deg.gif); -} -*/ - - - -/***************************************************** Image marks ***/ -.marks-visible.viewer .marked.image:after { - display: block; - position: absolute; - content: ""; - font-size: 0pt; - border: none; - - width: 15px; - height: 15px; - - bottom: 5px; - right: 5px; - - border-radius: 50%; - background: blue; -} -.marks-visible.viewer .marked.image[orientation="90"]:after { - top: 5px; - right: 5px; -} -.marks-visible.viewer .marked.image[orientation="180"]:after { - top: 5px; - left: 5px; -} -.marks-visible.viewer .marked.image[orientation="270"]:after { - bottom: 5px; - left: 5px; -} - -/* XXX make the marks position relative to viewer or gidden compleatly */ -.marks-visible.single-image-mode.viewer .marked.image:after { - display: none; -} - -/* corner mark... (a-la bookmarks in PortableMag) */ -/* -.marks-visible.viewer .marked.image:after { - display: block; - position: absolute; - content: ""; - font-size: 0pt; - border: none; - - width: 30px; - height: 30px; - - top: -15px; - right: -15px; - - background: blue; - - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -o-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} -.marks-visible.viewer .marked.image[orientation="90"]:after { - top: -15px; - left: -15px; -} -.marks-visible.viewer .marked.image[orientation="180"]:after { - bottom: -15px; - left: -15px; -} -.marks-visible.viewer .marked.image[orientation="270"]:after { - bottom: -15px; - right: -15px; -} -*/ - - -/*.marks-visible.viewer:not(.single-image-mode):after {*/ -/* -.marks-visible.viewer:after { - display: block; - position: absolute; - content: ""; - font-size: 0pt; - - top: 10px; - right: 10px; - width: 10px; - height: 10px; - - border: solid 2px blue; - border-radius: 50%; - background: blue; -} -.marked-only-view.viewer:after { - display: block; - position: absolute; - content: ""; - font-size: 0pt; - top: 10px; - right: 10px; - width: 10px; - height: 10px; - - border: solid 2px blue; - border-radius: 50%; - background: transparent; -} -.marked-only-view.marks-visible.viewer:after { - background: blue; -} -*/ - -/* XXX should we use opacity??? */ -.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) { - opacity: 0.3; -} - - - -/****************************************************** Image info ***/ -.image .inline-image-info { - display: none; - - position: absolute; - bottom: 0px; - width: 100%; - background: black; - opacity: 0.7; -} -.image .inline-image-info:hover { - -moz-user-select: auto; - -webkit-user-select: auto; - -o-user-select: auto; - -ms-user-select: auto; - user-select: auto; -} -.image .inline-image-info::selection { - color: white; - background: red; -} -.image-info-visible.viewer .global-image-info, -.image-info-visible.viewer .image:hover .inline-image-info { - display: block; -} -.single-image-mode.viewer .image:hover .inline-image-info { - display: none; -} -.image[orientation="90"] .inline-image-info { - top: auto; - left: 100%; - - -ms-transform-origin: bottom left; - -webkit-transform-origin: bottom left; - transform-origin: bottom left; - - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); -} -.image[orientation="180"] .inline-image-info { - top: 0px; - bottom: auto; - - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -o-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} -.image[orientation="270"] .inline-image-info { - top: auto; - left: auto; - right: 100%; - - -ms-transform-origin: bottom right; - -webkit-transform-origin: bottom right; - transform-origin: bottom right; - - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -o-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} - -.overlay-info { - display: none; - position: absolute; - - bottom: 0px; - left: 0px; - width: 100%; - padding: 2px; - padding-left: 10px; - padding-right: 10px; - box-sizing: border-box; - - background: black; - color: white; - - opacity: 0.6; -} -.overlay-info:hover { - -moz-user-select: auto; - -webkit-user-select: auto; - -o-user-select: auto; - -ms-user-select: auto; - user-select: auto; -} -.overlay-info .float-right { - float: right; -} -.overlay-info .secondary { - font-style: italic; - font-size: small; - color: silver; -} -.overlay-info::selection, -.overlay-info ::selection { - color: white; - background: red; -} - - - -/*************************************************** Global status ***/ -.global-status { - display: block; - opacity: 1; - z-index: 1000; -} - - - -/****************************************************** Indicators ***/ -.up-indicator, -.down-indicator, -.start-indicator, -.end-indicator { - display: block; - position: absolute; - content: ""; - top: 0px; - left: 50%; - height: 50px; - width: 100px; - margin-left: -50px; - - overflow: hidden; - - cursor: hand; -} -.up-indicator:after, -.down-indicator:after { - display: inline-block; - position: absolute; - content: ""; - width: 50px; - height: 50px; - - bottom: -25px; - left: 25px; - - background: yellow; - - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -o-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} -.down-indicator { - top: auto; - bottom: 0px; -} -.down-indicator:after { - top: -25px; - bottom: auto; -} -.start-indicator, -.end-indicator { - left: 0px; - width: 10px; - height: 100%; - margin: 0px; - - background: yellow; -} -.end-indicator { - left: auto; - right: 0px; -} -/* default state */ -.up-indicator, -.down-indicator, -.start-indicator, -.end-indicator { - display: none; -} - - -/* these are generic containers for indicators */ -.global-mode-indicators { - position: absolute; - top: 15px; - right: 15px; - height: 20px; - width: auto; - - font-size: small; -} -.global-mode-indicators>* { - margin-left: 10px; -} -.global-mode-indicators .circle { - display: inline-block; - width: 10px; - height: 10px; - border-radius: 50%; -} -/* hide indicators in single image mode */ -.single-image-mode.viewer .global-mode-indicators { - opacity: 0.5; -} -.light.single-image-mode.viewer .global-mode-indicators { - opacity: 0.1; -} -.dark.single-image-mode.viewer .global-mode-indicators { - opacity: 0.6; -} -.single-image-mode.viewer .global-mode-indicators:hover { - opacity: 1; -} - -/* context indicators */ -.context-mode-indicators { - position: absolute; - right: 15px; - bottom: 15px; - height: 20px; - width: auto; - - font-size: small; -} -.context-mode-indicators>* { - margin-left: 10px; -} -.context-mode-indicators .circle { - display: inline-block; - width: 10px; - height: 10px; - border-radius: 50%; -} - - -/* actual indicators */ -/* marks... */ -.global-mode-indicators .marked-only-visible, -.global-mode-indicators .marks-visible, -.context-mode-indicators .current-image-marked { - display: none; - color: blue; -} -.global-mode-indicators .marked-only-visible .shown, -.global-mode-indicators .marks-visible .shown, -.context-mode-indicators .current-image-marked .shown { - display: none; -} -.global-mode-indicators .marked-only-visible:after, -.global-mode-indicators .marks-visible:after, -.context-mode-indicators .current-image-marked:after { - display: inline-block; - width: 10px; - height: 10px; - border-radius: 50%; - content: ""; - background-color: blue; - border: solid 2px blue; - margin-left: 5px; -} -.marks-visible.viewer .global-mode-indicators .marks-visible { - display: inline-block; -} -.marked-only-view.viewer .global-mode-indicators .marks-visible { - display: none; -} -.marked-only-view.viewer .global-mode-indicators .marked-only-visible { - display: inline-block; -} -.marked-only-view.viewer:not(.marks-visible) .global-mode-indicators .marked-only-visible:after { - background-color: transparent; -} -/* image mark in single image mode... */ -.context-mode-indicators .current-image-marked { - display: none; - color: blue; -} -.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown { - display: inline-block; -} - - - -/********************************************** Mode: single image ***/ -.single-image-mode.viewer .image { - background-color: transparent; - /* NOTE: need to keep a distance from screen borders... */ - border: solid transparent 2px; -} -.single-image-mode.viewer .image:not(.current) { - /* XXX for some reason this breaks the alignment on large magnifications... - display: none; - */ - /* XXX this makes images pass through the :visible filter... - opacity: 0; - */ - visibility: hidden; -} - - - -/********************************************************** Themes ***/ -/* XXX this is by no means final... */ -.viewer, -.light.viewer, -.light.viewer .overlay-block .background { - background: white; -} - -.gray.viewer, -.gray.viewer .overlay-block .background { - background: #333; -} - -.dark.viewer, -.dark.viewer .overlay-block .background { - background: #0a0a0a; -} - - - -/********************************************************* Overlay ***/ -.overlay-block { - display: none; - position: absolute: - top: 0px; - left: 0px; - height: 100%; - width: 100%; -} -.viewer.overlay .overlay-block { - display: block; -} -.overlay-block .content { -} -.overlay-block .background { - position: absolute: - top: 0px; - left: 0px; - height: 100%; - width: 100%; - opacity: 0.7; -} - - - -/************************************************************ Help ***/ -/* this is for sliding stuff */ -.viewer.drawer-mode { - box-shadow: 0px 0px 50px 0px silver; -} - -/* help */ -.keyboard-help { - width: 80%; - margin-top: 20px; - margin-left: 15%; - margin-right: 5%; - margin-bottom: 100px; -} -.keyboard-help .section-doc { - font-size: small; - vertical-align: top; - font-style: italic; -} -.keyboard-help th { - text-align: left; - height: 50px; - vertical-align: bottom; - border-bottom: solid gray 1px; -} -.keyboard-help tr:hover { - background: #eee; - vertical-align: top; -} -.keyboard-help tr td:first-child { - color: gray; - font-style: italic; - padding-right: 20px; - padding-left: 10px; -} -.keyboard-help .section-doc td:only-child { - padding-right: 0px; - padding-left: 0px; -} - - - -/********************************************************* utility ***/ -.expanding-text .hidden { - display: none; -} -.expanding-text:hover .shown { - display: none; -} -.expanding-text:hover .hidden { - display: inline; -} - - - - -/*********************************************************************/ +/********************************************************************** +* +**********************************************************************/ +body { + font-family: sans-serif; + padding: 0px; + margin: 0px; +} +/********************************************************** Viewer ***/ +.viewer { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + /*border: solid blue 1px;*/ + + box-sizing: border-box; + -moz-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + -ms-user-select: none; + user-select: none; +} +/****************************************************** Ribbon set ***/ +.ribbon-set { + position: absolute; + display: block; + /* NOTE: this needs for scaling/zooming to behave correctly and not + shift the element, when its dimensions change... + ...this is because .ribbon-set will both be used for scaling + and aligning... */ + + transform-origin: top left; + -ms-transform-origin: top left; + -webkit-transform-origin: top left; + /* Safari and Chrome */ + +} +.ribbon-set:empty:after { + display: block; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + content: "Empty"; + text-align: center; +} +/********************************************************** Ribbon ***/ +.ribbon { + position: relative; + display: block; + height: auto; + min-width: 0px; + overflow: visible; + white-space: nowrap; + font-size: 0; + margin-top: 20px; + margin-bottom: 20px; +} +.ribbon:empty { + display: none; +} +.ribbon:first-child { + margin-top: 0px; +} +.ribbon:last-child { + margin-bottom: 0px; +} +/*********************************************************** Image ***/ +.image { + position: relative; + display: inline-block; + vertical-align: middle; + text-align: left; + width: 300px; + height: 300px; + font-size: 12pt; + overflow: hidden; + box-sizing: border-box; + color: white; + text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em; + background: no-repeat 50% #000000; + background-size: contain; + /* XXX do we need this? */ + + border: solid black 5px; +} +.current.image { + background: no-repeat 50% #000000; + background-size: contain; + /* XXX remove this... */ + + border: solid red 5px; +} +/* image turning... */ +/* NOTE: need to account for proportions after turning... */ +.image[orientation="90"] { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.image[orientation="180"] { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.image[orientation="270"] { + -webkit-transform: rotate(270deg); + -moz-transform: rotate(270deg); + -o-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} +/* Flipped vertically only... */ +/* NOTE: wee need to do all possible combinations here as we can't + combine different parts of a transform attr from different + classes */ +.image[flipped*="vertical"] { + -moz-transform: scaleY(-1); + -o-transform: scaleY(-1); + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); +} +/* Flipped horizontally only... */ +.image[flipped*="horizontal"] { + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + -ms-transform: scaleX(-1); + transform: scaleX(-1); +} +/* Flipped vertically only... */ +.image[flipped*="vertical"][flipped*="horizontal"] { + -moz-transform: scaleX(-1) scaleY(-1); + -o-transform: scaleX(-1) scaleY(-1); + -webkit-transform: scaleX(-1) scaleY(-1); + -ms-transform: scaleX(-1) scaleY(-1); + transform: scaleX(-1) scaleY(-1); +} +/* default backgrounds */ +/* XXX not sure if we need these... */ +/* +.image { + background-image: url(images/loading.gif); +} +.image[orientation="90"] { + background-image: url(images/loading-90deg.gif); +} +.image[orientation="180"] { + background-image: url(images/loading-180deg.gif); +} +.image[orientation="270"] { + background-image: url(images/loading-270deg.gif); +} +*/ +/***************************************************** Image marks ***/ +.marks-visible.viewer .marked.image:after { + display: block; + position: absolute; + content: ""; + font-size: 0pt; + border: none; + width: 15px; + height: 15px; + bottom: 5px; + right: 5px; + border-radius: 50%; + background: blue; +} +.marks-visible.viewer .marked.image[orientation="90"]:after { + top: 5px; + right: 5px; +} +.marks-visible.viewer .marked.image[orientation="180"]:after { + top: 5px; + left: 5px; +} +.marks-visible.viewer .marked.image[orientation="270"]:after { + bottom: 5px; + left: 5px; +} +/* XXX make the marks position relative to viewer or gidden compleatly */ +.marks-visible.single-image-mode.viewer .marked.image:after { + display: none; +} +/* corner mark... (a-la bookmarks in PortableMag) */ +/* +.marks-visible.viewer .marked.image:after { + display: block; + position: absolute; + content: ""; + font-size: 0pt; + border: none; + + width: 30px; + height: 30px; + + top: -15px; + right: -15px; + + background: blue; + + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} +.marks-visible.viewer .marked.image[orientation="90"]:after { + top: -15px; + left: -15px; +} +.marks-visible.viewer .marked.image[orientation="180"]:after { + bottom: -15px; + left: -15px; +} +.marks-visible.viewer .marked.image[orientation="270"]:after { + bottom: -15px; + right: -15px; +} +*/ +/*.marks-visible.viewer:not(.single-image-mode):after {*/ +/* +.marks-visible.viewer:after { + display: block; + position: absolute; + content: ""; + font-size: 0pt; + + top: 10px; + right: 10px; + width: 10px; + height: 10px; + + border: solid 2px blue; + border-radius: 50%; + background: blue; +} +.marked-only-view.viewer:after { + display: block; + position: absolute; + content: ""; + font-size: 0pt; + top: 10px; + right: 10px; + width: 10px; + height: 10px; + + border: solid 2px blue; + border-radius: 50%; + background: transparent; +} +.marked-only-view.marks-visible.viewer:after { + background: blue; +} +*/ +/* XXX should we use opacity??? */ +.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) { + opacity: 0.3; +} +/****************************************************** Image info ***/ +.image .inline-image-info { + display: none; + position: absolute; + bottom: 0px; + width: 100%; + background: black; + opacity: 0.7; +} +.image .inline-image-info:hover { + -moz-user-select: auto; + -webkit-user-select: auto; + -o-user-select: auto; + -ms-user-select: auto; + user-select: auto; +} +.image .inline-image-info::selection { + color: white; + background: red; +} +.image-info-visible.viewer .global-image-info, +.image-info-visible.viewer .image:hover .inline-image-info { + display: block; +} +.single-image-mode.viewer .image:hover .inline-image-info { + display: none; +} +.image[orientation="90"] .inline-image-info { + top: auto; + left: 100%; + -ms-transform-origin: bottom left; + -webkit-transform-origin: bottom left; + transform-origin: bottom left; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.image[orientation="180"] .inline-image-info { + top: 0px; + bottom: auto; + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.image[orientation="270"] .inline-image-info { + top: auto; + left: auto; + right: 100%; + -ms-transform-origin: bottom right; + -webkit-transform-origin: bottom right; + transform-origin: bottom right; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.overlay-info { + display: none; + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + padding: 2px; + padding-left: 10px; + padding-right: 10px; + box-sizing: border-box; + background: black; + color: white; + opacity: 0.6; +} +.overlay-info:hover { + -moz-user-select: auto; + -webkit-user-select: auto; + -o-user-select: auto; + -ms-user-select: auto; + user-select: auto; +} +.overlay-info .float-right { + float: right; +} +.overlay-info .secondary { + font-style: italic; + font-size: small; + color: silver; +} +.overlay-info::selection, +.overlay-info ::selection { + color: white; + background: red; +} +/*************************************************** Global status ***/ +.global-status { + display: block; + opacity: 1; + z-index: 1000; +} +/****************************************************** Indicators ***/ +.up-indicator, +.down-indicator, +.start-indicator, +.end-indicator { + display: block; + position: absolute; + content: ""; + top: 0px; + left: 50%; + height: 50px; + width: 100px; + margin-left: -50px; + overflow: hidden; + cursor: hand; +} +.up-indicator:after, +.down-indicator:after { + display: inline-block; + position: absolute; + content: ""; + width: 50px; + height: 50px; + bottom: -25px; + left: 25px; + background: yellow; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} +.down-indicator { + top: auto; + bottom: 0px; +} +.down-indicator:after { + top: -25px; + bottom: auto; +} +.start-indicator, +.end-indicator { + left: 0px; + width: 10px; + height: 100%; + margin: 0px; + background: yellow; +} +.end-indicator { + left: auto; + right: 0px; +} +/* default state */ +.up-indicator, +.down-indicator, +.start-indicator, +.end-indicator { + display: none; +} +/* these are generic containers for indicators */ +.global-mode-indicators { + position: absolute; + top: 15px; + right: 15px; + height: 20px; + width: auto; + font-size: small; +} +.global-mode-indicators > * { + margin-left: 10px; +} +.global-mode-indicators .circle { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 50%; +} +/* hide indicators in single image mode */ +.single-image-mode.viewer .global-mode-indicators { + opacity: 0.5; +} +.light.single-image-mode.viewer .global-mode-indicators { + opacity: 0.1; +} +.dark.single-image-mode.viewer .global-mode-indicators { + opacity: 0.6; +} +.single-image-mode.viewer .global-mode-indicators:hover { + opacity: 1; +} +/* context indicators */ +.context-mode-indicators { + position: absolute; + right: 15px; + bottom: 15px; + height: 20px; + width: auto; + font-size: small; +} +.context-mode-indicators > * { + margin-left: 10px; +} +.context-mode-indicators .circle { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 50%; +} +/* actual indicators */ +/* marks... */ +.global-mode-indicators .marked-only-visible, +.global-mode-indicators .marks-visible, +.context-mode-indicators .current-image-marked { + display: none; + color: blue; +} +.global-mode-indicators .marked-only-visible .shown, +.global-mode-indicators .marks-visible .shown, +.context-mode-indicators .current-image-marked .shown { + display: none; +} +.global-mode-indicators .marked-only-visible:after, +.global-mode-indicators .marks-visible:after, +.context-mode-indicators .current-image-marked:after { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 50%; + content: ""; + background-color: blue; + border: solid 2px blue; + margin-left: 5px; +} +.marks-visible.viewer .global-mode-indicators .marks-visible { + display: inline-block; +} +.marked-only-view.viewer .global-mode-indicators .marks-visible { + display: none; +} +.marked-only-view.viewer .global-mode-indicators .marked-only-visible { + display: inline-block; +} +.marked-only-view.viewer:not(.marks-visible) .global-mode-indicators .marked-only-visible:after { + background-color: transparent; +} +/* image mark in single image mode... */ +.context-mode-indicators .current-image-marked { + display: none; + color: blue; +} +.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown { + display: inline-block; +} +/********************************************** Mode: single image ***/ +.single-image-mode.viewer .image { + background-color: transparent; + /* NOTE: need to keep a distance from screen borders... */ + + border: solid transparent 2px; +} +.single-image-mode.viewer .image:not(.current) { + /* XXX for some reason this breaks the alignment on large magnifications... + display: none; + */ + + /* XXX this makes images pass through the :visible filter... + opacity: 0; + */ + + visibility: hidden; +} +/********************************************************** Themes ***/ +/* XXX this is by no means final... */ +.viewer, +.light.viewer, +.light.viewer .overlay-block .background { + background: white; +} +.gray.viewer, +.gray.viewer .overlay-block .background { + background: #333; +} +.dark.viewer, +.dark.viewer .overlay-block .background { + background: #0a0a0a; +} +/********************************************************* Overlay ***/ +.overlay-block { + display: none; + position: absolute: + top: 0px; + left: 0px; + height: 100%; + width: 100%; +} +.viewer.overlay .overlay-block { + display: block; +} +.overlay-block .background { + position: absolute: + top: 0px; + left: 0px; + height: 100%; + width: 100%; + opacity: 0.7; +} +/************************************************************ Help ***/ +/* this is for sliding stuff */ +.viewer.drawer-mode { + box-shadow: 0px 0px 50px 0px silver; +} +/* help */ +.keyboard-help { + width: 80%; + margin-top: 20px; + margin-left: 15%; + margin-right: 5%; + margin-bottom: 100px; +} +.keyboard-help .section-doc { + font-size: small; + vertical-align: top; + font-style: italic; +} +.keyboard-help th { + text-align: left; + height: 50px; + vertical-align: bottom; + border-bottom: solid gray 1px; +} +.keyboard-help tr:hover { + background: #eee; + vertical-align: top; +} +.keyboard-help tr td:first-child { + color: gray; + font-style: italic; + padding-right: 20px; + padding-left: 10px; +} +.keyboard-help .section-doc td:only-child { + padding-right: 0px; + padding-left: 0px; +} +/********************************************************* utility ***/ +.expanding-text .hidden { + display: none; +} +.expanding-text:hover .shown { + display: none; +} +.expanding-text:hover .hidden { + display: inline; +} +/********************************************************************** +* vim:set spell ft=css : */ diff --git a/ui/layout.less b/ui/layout.less index 23bee377..e9fc8d2d 100755 --- a/ui/layout.less +++ b/ui/layout.less @@ -122,18 +122,10 @@ body { .rotate(90deg); } .image[orientation="180"] { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -o-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + .rotate(180deg); } .image[orientation="270"] { - -webkit-transform: rotate(270deg); - -moz-transform: rotate(270deg); - -o-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); + .rotate(270deg); } diff --git a/ui/setup.js b/ui/setup.js index aeb39282..8d45df7a 100755 --- a/ui/setup.js +++ b/ui/setup.js @@ -16,7 +16,7 @@ function setupIndicators(){ .click(function(){ toggleMarkesView() }) showGlobalIndicator( 'marked-only-visible', - 'Marked only images visible (alt-F2)') + 'Marked only images visible (shift-F2)') .css('cursor', 'hand') .click(function(){ toggleMarkedOnlyView() }) diff --git a/ui/ui.js b/ui/ui.js index d0bf6278..cf6ad069 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -175,9 +175,15 @@ function updateStatus(message){ // Same as updateInfo(...) but will aslo show and animate-close the message +// +// XXX the next call will not reset the animation of the previous, rather +// it will pause it and rezume... +// ...not sure if this is correct. function showStatus(message){ return updateStatus.apply(null, arguments) - .stop() + //.stop() + .stop(true, false) + //.finish() .show() .delay(500) .fadeOut(800) @@ -193,7 +199,9 @@ function showErrorStatus(message){ message.splice(0, 0, 'Error:') return updateStatus.apply(null, message) .one('click', function(){ $(this).fadeOut() }) - .stop() + //.stop() + .stop(true, false) + //.finish() .show() }