From 2e3083371c748191086950b08dcf00ca70d8d0be Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Mon, 29 Feb 2016 04:39:46 +0300
Subject: [PATCH] added seporate ribbon bg theaming (experimental)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/css/layout.css  | 11 +++++++++++
 ui (gen4)/css/layout.less | 20 ++++++++++++++++++++
 ui (gen4)/features/ui.js  | 16 ++++++++++++++++
 3 files changed, 47 insertions(+)

diff --git a/ui (gen4)/css/layout.css b/ui (gen4)/css/layout.css
index 8dc8f319..ea920bd0 100644
--- a/ui (gen4)/css/layout.css	
+++ b/ui (gen4)/css/layout.css	
@@ -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";*/
diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index a7d6319c..e36b2f36 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -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... */
diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js
index f2a4165c..dd432144 100755
--- a/ui (gen4)/features/ui.js	
+++ b/ui (gen4)/features/ui.js	
@@ -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){