flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-30 02:40:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

added status bar toggler and modes + some styling...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-02-05 08:24:48 +03:00
parent ec78b20e13
commit 625e6a5537
4 changed files with 309 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
ui (gen4)/css/layout.css
View File

@ -162,7 +162,7 @@ button:hover {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.title-bar .button:hover { .title-bar .button:hover {
cursor: hand; cursor: pointer;
} }
.title-bar .close:hover { .title-bar .close:hover {
color: red; color: red;
@ -234,7 +234,7 @@ button:hover {
font-weight: bold; font-weight: bold;
color: silver; color: silver;
opacity: 0.9; opacity: 0.9;
cursor: hand; cursor: pointer;
} }
.viewer:empty:after, .viewer:empty:after,
.ribbon-set:empty:after { .ribbon-set:empty:after {
@ -1186,6 +1186,80 @@ stretching in width... */
color: white; color: white;
background: red; background: red;
} }
.overlay-info.full,
.overlay-info.minimal {
display: block;
/* XXX is this correct??? */
z-index: 1000;
}
.overlay-info.minimal {
background: transparent;
}
.overlay-info.minimal .full-only {
display: none;
}
/* XXX REUSE: this is the same as selected/bookmarked image markers... */
.overlay-info .marked,
.overlay-info .marked:after,
.overlay-info .marked:before,
.overlay-info .bookmarked:after {
display: block;
position: relative;
content: "";
font-size: 0pt;
border: none;
margin: 4px;
margin-left: 6px;
width: 10px;
height: 10px;
box-shadow: 2px 2px 20px -2px rgba(0, 0, 0, 0.7);
box-sizing: border-box;
border-radius: 50%;
background: blue;
cursor: pointer;
}
/* tick... */
.overlay-info .marked {
background: transparent;
margin-left: 6px;
}
.overlay-info .marked:before,
.overlay-info .marked:after {
position: absolute;
bottom: auto;
border-radius: 3px;
-webkit-transform: rotate(-45deg) scaleY(1) scaleX(1);
-moz-transform: rotate(-45deg) scaleY(1) scaleX(1);
-o-transform: rotate(-45deg) scaleY(1) scaleX(1);
-ms-transform: rotate(-45deg) scaleY(1) scaleX(1);
transform: rotate(-45deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/
/*
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
*/
}
.overlay-info .marked:before {
width: 3px;
height: 6px;
}
.overlay-info .marked:after {
width: 12px;
height: 3px;
}
.overlay-info .bookmarked:after {
background: yellow;
}
.overlay-info .marked:not(.on),
.overlay-info .bookmarked:not(.on) {
opacity: 0.5;
}
.overlay-info .marked:not(.on):before,
.overlay-info .marked:not(.on):after,
.overlay-info .bookmarked:not(.on):after {
background: gray;
}
/*************************************************** Global status ***/ /*************************************************** Global status ***/
.global-status { .global-status {
display: block; display: block;
@ -1208,7 +1282,7 @@ stretching in width... */
width: 100px; width: 100px;
margin-left: -50px; margin-left: -50px;
overflow: hidden; overflow: hidden;
cursor: hand; cursor: pointer;
} }
.up-indicator:after, .up-indicator:after,
.down-indicator:after { .down-indicator:after {
@ -1340,12 +1414,12 @@ stretching in width... */
.global-mode-indicators .marks-visible, .global-mode-indicators .marks-visible,
.context-mode-indicators .current-image-marked { .context-mode-indicators .current-image-marked {
color: blue; color: blue;
cursor: hand; cursor: pointer;
text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em; text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em;
} }
.context-mode-indicators .current-image-bookmarked { .context-mode-indicators .current-image-bookmarked {
color: yellow; color: yellow;
cursor: hand; cursor: pointer;
text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em; text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em;
} }
.global-mode-indicators .marked-only-visible .shown, .global-mode-indicators .marked-only-visible .shown,
@ -1517,7 +1591,7 @@ progress:not(value)::-webkit-progress-bar {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
color: red; color: red;
cursor: hand; cursor: pointer;
} }
.progress-bar progress { .progress-bar progress {
display: block; display: block;

91
ui (gen4)/css/layout.less
View File

@ -269,7 +269,7 @@ button:hover {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.title-bar .button:hover { .title-bar .button:hover {
cursor: hand; cursor: pointer;
} }
.title-bar .close:hover { .title-bar .close:hover {
@ -357,7 +357,7 @@ button:hover {
color: silver; color: silver;
opacity: 0.9; opacity: 0.9;
cursor: hand; cursor: pointer;
} }
.viewer:empty:after, .viewer:empty:after,
.ribbon-set:empty:after { .ribbon-set:empty:after {
@ -1048,6 +1048,85 @@ stretching in width... */
background: red; background: red;
} }
.overlay-info.full,
.overlay-info.minimal {
display: block;
/* XXX is this correct??? */
z-index: 1000,
}
.overlay-info.minimal {
background: transparent;
}
.overlay-info.minimal .full-only {
display: none;
}
/* XXX REUSE: this is the same as selected/bookmarked image markers... */
.overlay-info .marked,
.overlay-info .marked:after,
.overlay-info .marked:before,
.overlay-info .bookmarked:after {
display: block;
position: relative;
content: "";
font-size: 0pt;
border: none;
margin: 4px;
margin-left: 6px;
width: 10px;
height: 10px;
box-shadow: 2px 2px 20px -2px rgba(0,0,0,0.7);
box-sizing: border-box;
border-radius: 50%;
background: blue;
cursor: pointer;
}
/* tick... */
.overlay-info .marked {
background: transparent;
margin-left: 6px;
}
.overlay-info .marked:before,
.overlay-info .marked:after {
position: absolute;
bottom: auto;
border-radius: 3px;
.rotate(-45deg);
}
.overlay-info .marked:before {
width: 3px;
height: 6px;
}
.overlay-info .marked:after {
width: 12px;
height: 3px;
}
.overlay-info .bookmarked:after {
background: yellow;
}
.overlay-info .marked:not(.on),
.overlay-info .bookmarked:not(.on) {
opacity: 0.5;
}
.overlay-info .marked:not(.on):before,
.overlay-info .marked:not(.on):after,
.overlay-info .bookmarked:not(.on):after {
background: gray;
}
/*************************************************** Global status ***/ /*************************************************** Global status ***/
@ -1078,7 +1157,7 @@ stretching in width... */
overflow: hidden; overflow: hidden;
cursor: hand; cursor: pointer;
} }
.up-indicator:after, .up-indicator:after,
.down-indicator:after { .down-indicator:after {
@ -1217,13 +1296,13 @@ stretching in width... */
.global-mode-indicators .marks-visible, .global-mode-indicators .marks-visible,
.context-mode-indicators .current-image-marked { .context-mode-indicators .current-image-marked {
color: blue; color: blue;
cursor: hand; cursor: pointer;
text-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em, text-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em,
rgba(0,0,0,0.5) 0.1em 0.1em; rgba(0,0,0,0.5) 0.1em 0.1em;
} }
.context-mode-indicators .current-image-bookmarked { .context-mode-indicators .current-image-bookmarked {
color: yellow; color: yellow;
cursor: hand; cursor: pointer;
text-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em, text-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em,
rgba(0,0,0,0.5) 0.1em 0.1em; rgba(0,0,0,0.5) 0.1em 0.1em;
} }
@ -1422,7 +1501,7 @@ progress:not(value)::-webkit-progress-bar {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
color: red; color: red;
cursor: hand; cursor: pointer;
} }
.progress-bar progress { .progress-bar progress {
display: block; display: block;

175
ui (gen4)/features/ui.js
View File

@ -2505,79 +2505,23 @@ var makeStateIndicatorItem = function(container, type, text){
// XXX should we use this or makeStateIndicatorItem(..)??? // XXX should we use this or makeStateIndicatorItem(..)???
// ...investigate the features of the above... // ...investigate the features of the above...
// - .attr('text')??? // - .attr('text')???
var makeExpandingInfoItem = function(container, cls, align){ var makeExpandingInfoItem = function(container, cls, align, full_only){
var e = $('<span>') var e = $('<span>')
.addClass(cls + ' expanding-text ' + align) .addClass(cls + ' expanding-text ' + align +' '+ (full_only && 'full-only'))
.append($('<span class="shown">')) .append($('<span class="shown">'))
.append($('<span class="hidden">')) .append($('<span class="hidden">'))
container.append(e) container.append(e)
return e return e
} }
var makeInfoItem = function(container, cls, align){ var makeInfoItem = function(container, cls, align, full_only){
var e = $('<span>') var e = $('<span>')
.addClass(cls +' '+ align) .addClass(cls +' '+ align +' '+ (full_only && 'full_only'))
container.append(e) container.append(e)
return e return e
} }
// Format: var ImageStateIndicatorActions = actions.Actions({
// full:
// [ (12/123) DSC_1234.jpg GID:a1b2c3 T:2016-01-28 08:37:50 B M C ]
// or
// [ DSC_1234.jpg GID:a1b2c3 T:2016-01-28 08:37:50 B M C (12/123) ]
//
// minimal (no background):
// [ (12/123) B M C ]
// or
// [ B M C (12/123) ]
//
// hidden:
// [ ]
//
// XXX an alternative approach:
// - global status area
// - status bar for local status
// - as in gen3
// - add image status
//
// General item format:
// - minimal state - only short version / icon is shown
// - when not active a disabled state/icon is shown
//
// - expanded state - status bar sows expanded state (only?)
// - title/help shown above
// - floating text, transparent bg
// - same align as item
//
// XXX Q: can title bar be used instead of global state indication???
// ...especially if we are indicating only crop...
// XXX
var ImageStateIndicator =
module.ImageStateIndicator = core.ImageGridFeatures.Feature({
title: '',
doc: '',
tag: 'ui-image-state-indicator',
depends: [
'ui',
'ui-single-image-view',
],
config: {
'global-info-elements': [
'path',
'gid',
'---',
'index',
'mark',
'bookmark',
],
},
actions: actions.Actions({
// XXX for some reason mark indicator clicking does not work in
// single image mode...
updateStateIndicators: ['- Interface/', updateStateIndicators: ['- Interface/',
function(gid){ function(gid){
gid = gid || this.current gid = gid || this.current
@ -2585,11 +2529,13 @@ module.ImageStateIndicator = core.ImageGridFeatures.Feature({
var that = this var that = this
// make/get indicator containers... // make/get indicator containers...
/*
var image = this.ribbons.viewer.find('.state-indicator-container.image-info') var image = this.ribbons.viewer.find('.state-indicator-container.image-info')
if(image.length == 0){ if(image.length == 0){
image = makeStateIndicator('image-info') image = makeStateIndicator('image-info')
.appendTo(this.ribbons.viewer) .appendTo(this.ribbons.viewer)
} }
*/
var global = this.ribbons.viewer.find('.state-indicator-container.global-info') var global = this.ribbons.viewer.find('.state-indicator-container.global-info')
if(global.length == 0){ if(global.length == 0){
@ -2597,7 +2543,7 @@ module.ImageStateIndicator = core.ImageGridFeatures.Feature({
global = makeStateIndicator('global-info overlay-info') global = makeStateIndicator('global-info overlay-info')
var align = '' var align = ''
var order = this.config['global-info-elements'].slice() var order = this.config['global-state-indicator-elements'].slice()
var i = order.indexOf('---') var i = order.indexOf('---')
// rearrange the tail section... // rearrange the tail section...
@ -2608,26 +2554,25 @@ module.ImageStateIndicator = core.ImageGridFeatures.Feature({
} }
order.forEach(function(elem){ order.forEach(function(elem){
var full_only = that.config['global-state-indicator-elements-full-only'].indexOf(elem) >= 0
// spacer... // spacer...
if(elem == '---'){ if(elem == '---'){
align = 'float-right' align = 'float-right'
// expanding indicators... // expanding indicators...
} else if(elem == 'gid' || elem == 'path'){ } else if(elem == 'gid' || elem == 'path'){
makeExpandingInfoItem(global, elem, align) makeExpandingInfoItem(global, elem, align, full_only)
// simple indicators... // simple indicators...
} else if(elem == 'index'){ } else if(elem == 'index'){
makeInfoItem(global, elem, align) makeInfoItem(global, elem, align, full_only)
// toggler indicators... // toggler indicators...
} else if(elem == 'bookmark' || elem == 'mark'){ } else if(elem == 'bookmark' || elem == 'mark'){
makeInfoItem(global, elem+'ed', align) makeInfoItem(global, elem+'ed', align, full_only)
.click(function(){ .click(function(){
that['toggle'+elem.capitalize()]() that['toggle'+elem.capitalize()]()
}) })
// XXX use CSS for this...
.text(elem[0].toUpperCase())
} }
}) })
@ -2666,25 +2611,91 @@ module.ImageStateIndicator = core.ImageGridFeatures.Feature({
var tags = this.data.getTags(gid) var tags = this.data.getTags(gid)
// marks... // marks...
global.find('.marked') global.find('.marked')[
[tags.indexOf('selected') < 0 ? 'removeClass' : 'addClass']('on') tags.indexOf('selected') < 0 ?
// XXX STUB: add a css rule for visualising the above... 'removeClass'
.css({ : 'addClass']('on')
opacity: tags.indexOf('selected') < 0 ? '0.5' : '1', global.find('.bookmarked')[
}) tags.indexOf('bookmark') < 0 ?
global.find('.bookmarked') 'removeClass'
[tags.indexOf('bookmark') < 0 ? 'removeClass' : 'addClass']('on') : 'addClass']('on')
// XXX STUB: add a css rule for visualising the above...
.css({
opacity: tags.indexOf('bookmark') < 0 ? '0.5' : '1',
})
}], }],
toggleStateIndicator: ['Interface/Toggle state indicator modes',
toggler.CSSClassToggler(
function(){
return this.ribbons.viewer.find('.state-indicator-container.global-info') },
function(){ return this.config['global-state-indicator-modes'] },
function(state){ this.config['global-state-indicator-mode'] = state }) ],
})
// XXX add toggler to toggle global image indicator (status bar) modes...
// XXX // XXX an alternative approach:
}), // - global status area
// - status bar for local status
// - as in gen3
// - add image status
//
// General item format:
// - minimal state - only short version / icon is shown
// - when not active a disabled state/icon is shown
//
// - expanded state - status bar sows expanded state (only?)
// - title/help shown above
// - floating text, transparent bg
// - same align as item
//
// XXX Q: can title bar be used instead of global state indication???
// ...especially if we are indicating only crop...
// XXX add styling:
// - element spacing
// - tip text
// - avoid multi-line -- scroll???
// XXX rename to status bar???
var ImageStateIndicator =
module.ImageStateIndicator = core.ImageGridFeatures.Feature({
title: '',
doc: '',
tag: 'ui-image-state-indicator',
depends: [
'ui',
'ui-single-image-view',
],
config: {
'global-state-indicator-elements': [
// XXX should index be here or to the right???
'index',
//'path',
'gid',
'---',
'mark',
'bookmark',
],
'global-state-indicator-elements-full-only': [
'gid',
],
'global-state-indicator-modes': [
'none',
'minimal',
'full',
],
'global-state-indicator-mode': null,
},
actions: ImageStateIndicatorActions,
handlers: [ handlers: [
['start',
function(){
if(this.config['global-state-indicator-mode']){
this.toggleStateIndicator(this.config['global-state-indicator-mode'])
}
}],
[[ [[
'focusImage', 'focusImage',
'toggleBookmark', 'toggleBookmark',

3
ui (gen4)/ui.js
View File

@ -219,9 +219,10 @@ module.GLOBAL_KEYBOARD = {
}, },
I: { I: {
default: 'showMetadata', default: 'showMetadata',
shift: 'showMetadata: "current" "full"', shift: 'toggleStateIndicator',
ctrl: 'toggleMark!: "ribbon"', ctrl: 'toggleMark!: "ribbon"',
'ctrl+shift': 'showMetadata: "current" "full"',
'meta+alt': 'showDevTools', 'meta+alt': 'showDevTools',
}, },