mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +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
|
||||
[_] usable empty view -- w.o. data...
|
||||
[_] 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
|
||||
[_] screen buttons
|
||||
[_] 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
|
||||
|
||||
@ -41,6 +41,8 @@ $(function(){
|
||||
toggleTheme('gray')
|
||||
toggleImageInfo('on')
|
||||
|
||||
setupIndicators()
|
||||
|
||||
autoHideCursor($('.viewer'))
|
||||
|
||||
// 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="start-indicator"></div>
|
||||
<div class="end-indicator"></div>
|
||||
|
||||
<div class="overlay-block">
|
||||
<div class="background"></div>
|
||||
<div class="content"></div>
|
||||
|
||||
109
ui/layout.css
109
ui/layout.css
@ -183,6 +183,11 @@ body {
|
||||
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 {
|
||||
@ -221,6 +226,8 @@ body {
|
||||
*/
|
||||
|
||||
|
||||
/*.marks-visible.viewer:not(.single-image-mode):after {*/
|
||||
/*
|
||||
.marks-visible.viewer:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -253,6 +260,7 @@ body {
|
||||
.marked-only-view.marks-visible.viewer:after {
|
||||
background: blue;
|
||||
}
|
||||
*/
|
||||
|
||||
/* XXX should we use opacity??? */
|
||||
.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 ***/
|
||||
.single-image-mode.viewer .image {
|
||||
|
||||
32
ui/setup.js
32
ui/setup.js
@ -8,6 +8,26 @@
|
||||
* 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...
|
||||
//
|
||||
// This does two jobs:
|
||||
@ -245,6 +265,18 @@ function setupDataBindings(viewer){
|
||||
function(){
|
||||
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