mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
added generic global and context indicators...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
20a9f68c90
commit
3afccfbd27
26
ui/TODO.otl
26
ui/TODO.otl
@ -105,6 +105,32 @@ Roadmap
|
|||||||
| jumping to end from start of ribbon
|
| jumping to end from start of ribbon
|
||||||
[_] usable empty view -- w.o. data...
|
[_] usable empty view -- w.o. data...
|
||||||
[_] single image mode transition (alpha-blend/fade/none)
|
[_] single image mode transition (alpha-blend/fade/none)
|
||||||
|
[_] make the marks in single image mode show in corner of viewer, not image
|
||||||
|
| and think of a uniform indicator position...
|
||||||
|
|
|
||||||
|
| +---------------------------+
|
||||||
|
| | oooo | <-- global indicators
|
||||||
|
| | | (all modes)
|
||||||
|
| | |
|
||||||
|
| | |
|
||||||
|
| | |
|
||||||
|
| | |
|
||||||
|
| | |
|
||||||
|
| | |
|
||||||
|
| | |
|
||||||
|
| | oooo | <-- context indicators
|
||||||
|
| +---------------------------+ (single image mode)
|
||||||
|
|
|
||||||
|
| make global indicators semi-transparent in single-image-mode, so as to
|
||||||
|
| indicate their lesser priority than context/image indicators...
|
||||||
|
|
|
||||||
|
| keep image indicators within the image square for ribbon mode...
|
||||||
|
|
|
||||||
|
| possible indicator styles:
|
||||||
|
| - letter, expand on hover
|
||||||
|
| - colored circle -- show text of same color under or to the side on hover
|
||||||
|
|
|
||||||
|
| might bee nice too use both styles, one for images one for global...
|
||||||
[_] 0% Tablet UI
|
[_] 0% Tablet UI
|
||||||
[_] screen buttons
|
[_] screen buttons
|
||||||
[_] ASAP: test on Android...
|
[_] ASAP: test on Android...
|
||||||
|
|||||||
31
ui/base.js
31
ui/base.js
@ -413,6 +413,37 @@ function getStatus(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function makeIndicator(text){
|
||||||
|
return $('<span class="expanding-text">'+
|
||||||
|
'<span class="hidden">'+ text +'</span>'+
|
||||||
|
'<span class="shown">'+ text[0] +'</span>'+
|
||||||
|
'</span>')
|
||||||
|
}
|
||||||
|
|
||||||
|
function showGlobalIndicator(cls, text){
|
||||||
|
var c = $('.global-mode-indicators')
|
||||||
|
if(c.length == 0){
|
||||||
|
c = $('<div>')
|
||||||
|
.addClass('global-mode-indicators')
|
||||||
|
.appendTo($('.viewer'))
|
||||||
|
}
|
||||||
|
return makeIndicator(text)
|
||||||
|
.addClass(cls)
|
||||||
|
.appendTo(c)
|
||||||
|
}
|
||||||
|
function showContextIndicator(cls, text){
|
||||||
|
var c = $('.context-mode-indicators')
|
||||||
|
if(c.length == 0){
|
||||||
|
c = $('<div>')
|
||||||
|
.addClass('context-mode-indicators')
|
||||||
|
.appendTo($('.viewer'))
|
||||||
|
}
|
||||||
|
return makeIndicator(text)
|
||||||
|
.addClass(cls)
|
||||||
|
.appendTo(c)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**********************************************************************
|
/**********************************************************************
|
||||||
* Constructors
|
* Constructors
|
||||||
|
|||||||
@ -41,6 +41,8 @@ $(function(){
|
|||||||
toggleTheme('gray')
|
toggleTheme('gray')
|
||||||
toggleImageInfo('on')
|
toggleImageInfo('on')
|
||||||
|
|
||||||
|
setupIndicators()
|
||||||
|
|
||||||
autoHideCursor($('.viewer'))
|
autoHideCursor($('.viewer'))
|
||||||
|
|
||||||
// NOTE: this is global so as to not to add any extra complexity to
|
// NOTE: this is global so as to not to add any extra complexity to
|
||||||
@ -188,6 +190,7 @@ Populated
|
|||||||
<div class="down-indicator"></div>
|
<div class="down-indicator"></div>
|
||||||
<div class="start-indicator"></div>
|
<div class="start-indicator"></div>
|
||||||
<div class="end-indicator"></div>
|
<div class="end-indicator"></div>
|
||||||
|
|
||||||
<div class="overlay-block">
|
<div class="overlay-block">
|
||||||
<div class="background"></div>
|
<div class="background"></div>
|
||||||
<div class="content"></div>
|
<div class="content"></div>
|
||||||
|
|||||||
109
ui/layout.css
109
ui/layout.css
@ -183,6 +183,11 @@ body {
|
|||||||
left: 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) */
|
/* corner mark... (a-la bookmarks in PortableMag) */
|
||||||
/*
|
/*
|
||||||
.marks-visible.viewer .marked.image:after {
|
.marks-visible.viewer .marked.image:after {
|
||||||
@ -221,6 +226,8 @@ body {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/*.marks-visible.viewer:not(.single-image-mode):after {*/
|
||||||
|
/*
|
||||||
.marks-visible.viewer:after {
|
.marks-visible.viewer:after {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -253,6 +260,7 @@ body {
|
|||||||
.marked-only-view.marks-visible.viewer:after {
|
.marked-only-view.marks-visible.viewer:after {
|
||||||
background: blue;
|
background: blue;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
/* XXX should we use opacity??? */
|
/* XXX should we use opacity??? */
|
||||||
.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
|
.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
|
||||||
@ -445,6 +453,107 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 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 ***/
|
/********************************************** Mode: single image ***/
|
||||||
.single-image-mode.viewer .image {
|
.single-image-mode.viewer .image {
|
||||||
|
|||||||
32
ui/setup.js
32
ui/setup.js
@ -8,6 +8,26 @@
|
|||||||
* Setup
|
* Setup
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
function setupIndicators(){
|
||||||
|
showGlobalIndicator(
|
||||||
|
'marks-visible',
|
||||||
|
'Marks visible (F2)')
|
||||||
|
.css('cursor', 'hand')
|
||||||
|
.click(function(){ toggleMarkesView() })
|
||||||
|
showGlobalIndicator(
|
||||||
|
'marked-only-visible',
|
||||||
|
'Marked only images visible (alt-F2)')
|
||||||
|
.css('cursor', 'hand')
|
||||||
|
.click(function(){ toggleMarkedOnlyView() })
|
||||||
|
|
||||||
|
showContextIndicator(
|
||||||
|
'current-image-marked',
|
||||||
|
'Image is marked (Ins/M)')
|
||||||
|
.css('cursor', 'hand')
|
||||||
|
.click(function(){ toggleImageMark() })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Setup event handlers for data bindings...
|
// Setup event handlers for data bindings...
|
||||||
//
|
//
|
||||||
// This does two jobs:
|
// This does two jobs:
|
||||||
@ -245,6 +265,18 @@ function setupDataBindings(viewer){
|
|||||||
function(){
|
function(){
|
||||||
updateGlobalImageInfo()
|
updateGlobalImageInfo()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// mark indicator...
|
||||||
|
// XXX make this generic and handle any of the available marks...
|
||||||
|
.on('focusingImage togglingMark', function(evt, image){
|
||||||
|
image = image.length == 0 ? getImage() : image
|
||||||
|
var indicator = $('.context-mode-indicators .current-image-marked')
|
||||||
|
if(image.hasClass('marked')){
|
||||||
|
indicator.addClass('shown')
|
||||||
|
} else {
|
||||||
|
indicator.removeClass('shown')
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user