added seporate ribbon bg theaming (experimental)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-02-29 04:39:46 +03:00
parent a5f83410cd
commit 2e3083371c
3 changed files with 47 additions and 0 deletions

View File

@ -1639,6 +1639,17 @@ progress:not(value)::-webkit-progress-bar {
*/
visibility: hidden;
}
/************************************ Ribbon Themes (experimental) ***/
/* XXX should these be merged with general themes?? */
.viewer:not(.single-image-mode).gray-ribbon .ribbon {
background-color: rgba(0, 0, 0, 0.6);
}
.viewer:not(.single-image-mode).light-gray-ribbon .ribbon {
background-color: rgba(0, 0, 0, 0.2);
}
.viewer:not(.single-image-mode).transparent-ribbon .ribbon {
background-color: transparent;
}
/********************************************************** Themes ***/
/* XXX this is by no means final... */
/*@import "theme-light";*/

View File

@ -1562,6 +1562,26 @@ progress:not(value)::-webkit-progress-bar {
/************************************ Ribbon Themes (experimental) ***/
/* XXX should these be merged with general themes?? */
.viewer:not(.single-image-mode).black-ribbon .ribbon {
}
.viewer:not(.single-image-mode).gray-ribbon .ribbon {
background-color: rgba(0, 0, 0, 0.6);
}
.viewer:not(.single-image-mode).light-gray-ribbon .ribbon {
background-color: rgba(0, 0, 0, 0.2);
}
.viewer:not(.single-image-mode).transparent-ribbon .ribbon {
background-color: transparent;
}
/********************************************************** Themes ***/
/* XXX this is by no means final... */

View File

@ -146,6 +146,14 @@ actions.Actions({
'light',
],
'ribbon-theme': 'black',
'ribbon-themes': [
'black-ribbon',
'gray-ribbon',
'light-gray-ribbon',
'transparent-ribbon',
],
// XXX BUG: for some reason this get's shadowed by base.config...
'ribbon-focus-modes': [
'visual', // select image closest visually
@ -293,6 +301,11 @@ actions.Actions({
function(){ return this.ribbons.viewer },
function(){ return this.config.themes },
function(state){ this.config.theme = state }) ],
toggleRibbonTheme: ['Interface/Toggle ribbon theme',
toggler.CSSClassToggler(
function(){ return this.ribbons.viewer },
function(){ return this.config['ribbon-themes'] },
function(state){ this.config['ribbon-theme'] = state }) ],
setEmptyMsg: ['- Interface/Set message to be displayed when nothing is loaded.',
function(msg, help){ this.ribbons
&& this.ribbons.length > 0
@ -709,6 +722,9 @@ module.Viewer = core.ImageGridFeatures.Feature({
if(this.config.theme){
this.toggleTheme(this.config.theme)
}
if(this.config['ribbon-theme']){
this.toggleRibbonTheme(this.config['ribbon-theme'])
}
// center viewer on resize events...
if(!this.__viewer_resize){