make navbar themable again

5 files changed, 118 insertions, 97 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index c410c61bc..7641949e3 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -851,7 +851,7 @@ footer {
 	margin: 15px;
 	padding: 0px 5px 0px 5px;
 	border-radius: 10px;
-	border: none;
+	border-color: $nav_bd;
 	background-color: $search_background;
     	transition: background-color 300ms ease 0s;
 }
@@ -2183,6 +2183,7 @@ img.mail-list-sender-photo {
 }
 
 /* nav bootstrap */
+
 nav i {
 	font-size: 14px;
 }
@@ -2211,11 +2212,11 @@ nav .dropdown-menu {
 }
 
 #usermenu-caret {
-	color: #999;
+	color: $nav_icon_colour;
 }
 
 #avatar:hover + #usermenu-caret {
-	color: #fff;
+	color: $nav_active_icon_colour;
 }
 
 /* bootstrap overrides */
@@ -2231,3 +2232,35 @@ blockquote {
 .dropdown-menu img {
 	border-radius: $radiuspx;
 }
+
+.navbar-inverse {
+	background-image: -webkit-linear-gradient(top, $nav_gradient_top 0%, $nav_gradient_bottom 100%);
+	background-image:         linear-gradient(to bottom, $nav_gradient_top 0%, $nav_gradient_bottom 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$nav_gradient_top, endColorstr=$nav_gradient_bottom, GradientType=0);
+	background-color: $nav_bg;
+	border-color: $nav_bd;
+}
+
+.navbar-inverse .navbar-nav > .active > a {
+	background-image: -webkit-linear-gradient(top, $nav_active_gradient_top 0%, $nav_active_gradient_bottom 100%);
+	background-image:         linear-gradient(to bottom, $nav_active_gradient_top 0%, $nav_active_gradient_bottom 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$nav_active_gradient_top, endColorstr=$nav_active_gradient_bottom, GradientType=0);
+}
+
+
+.navbar-inverse .navbar-nav > li > a {
+	color: $nav_icon_colour;
+	text-shadow: 0px 0px 0px;
+}
+
+.navbar-inverse .navbar-nav > li > a:hover,
+.navbar-inverse .navbar-nav > li > a:focus {
+	color: $nav_active_icon_colour;
+}
+
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
+	color: $nav_active_icon_colour;
+	background-color: $nav_bg;
+}
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index 2235a9742..608a9bda7 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -7,7 +7,14 @@ function theme_content(&$a) {
 
 	$arr['schema'] = get_pconfig(local_user(),'redbasic', 'schema' );
     $arr['narrow_navbar'] = get_pconfig(local_user(),'redbasic', 'narrow_navbar' );
-	$arr['nav_colour'] = get_pconfig(local_user(),'redbasic', 'nav_colour' );
+	$arr['nav_bg'] = get_pconfig(local_user(),'redbasic', 'nav_bg' );
+	$arr['nav_gradient_top'] = get_pconfig(local_user(),'redbasic', 'nav_gradient_top' );
+	$arr['nav_gradient_bottom'] = get_pconfig(local_user(),'redbasic', 'nav_gradient_bottom' );
+	$arr['nav_active_gradient_top'] = get_pconfig(local_user(),'redbasic', 'nav_active_gradient_top' );
+	$arr['nav_active_gradient_bottom'] = get_pconfig(local_user(),'redbasic', 'nav_active_gradient_bottom' );
+	$arr['nav_bd'] = get_pconfig(local_user(),'redbasic', 'nav_bd' );
+	$arr['nav_icon_colour'] = get_pconfig(local_user(),'redbasic', 'nav_icon_colour' );
+	$arr['nav_active_icon_colour'] = get_pconfig(local_user(),'redbasic', 'nav_active_icon_colour' );
 	$arr['link_colour'] = get_pconfig(local_user(),'redbasic', 'link_colour' );
 	$arr['banner_colour'] = get_pconfig(local_user(),'redbasic', 'banner_colour' );
 	$arr['bgcolour'] = get_pconfig(local_user(),'redbasic', 'background_colour' );
@@ -35,7 +42,14 @@ function theme_post(&$a) {
 	if (isset($_POST['redbasic-settings-submit'])) {
 		set_pconfig(local_user(), 'redbasic', 'schema', $_POST['redbasic_schema']);
 		set_pconfig(local_user(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']);
-		set_pconfig(local_user(), 'redbasic', 'nav_colour', $_POST['redbasic_nav_colour']);
+		set_pconfig(local_user(), 'redbasic', 'nav_bg', $_POST['redbasic_nav_bg']);
+		set_pconfig(local_user(), 'redbasic', 'nav_gradient_top', $_POST['redbasic_nav_gradient_top']);
+		set_pconfig(local_user(), 'redbasic', 'nav_gradient_bottom', $_POST['redbasic_nav_gradient_bottom']);
+		set_pconfig(local_user(), 'redbasic', 'nav_active_gradient_top', $_POST['redbasic_nav_active_gradient_top']);
+		set_pconfig(local_user(), 'redbasic', 'nav_active_gradient_bottom', $_POST['redbasic_nav_active_gradient_bottom']);
+		set_pconfig(local_user(), 'redbasic', 'nav_bd', $_POST['redbasic_nav_bd']);
+		set_pconfig(local_user(), 'redbasic', 'nav_icon_colour', $_POST['redbasic_nav_icon_colour']);
+		set_pconfig(local_user(), 'redbasic', 'nav_active_icon_colour', $_POST['redbasic_nav_active_icon_colour']);
 		set_pconfig(local_user(), 'redbasic', 'link_colour', $_POST['redbasic_link_colour']);
 		set_pconfig(local_user(), 'redbasic', 'background_colour', $_POST['redbasic_background_colour']);
 		set_pconfig(local_user(), 'redbasic', 'banner_colour', $_POST['redbasic_banner_colour']);
@@ -60,8 +74,6 @@ function theme_post(&$a) {
 
 
 function redbasic_form(&$a, $arr) {
-
-
 	$scheme_choices = array();
 	$scheme_choices["---"] = t("Default");
 	$files = glob('view/theme/redbasic/schema/*.php');
@@ -72,22 +84,6 @@ function redbasic_form(&$a, $arr) {
 			$scheme_choices[$f] = $scheme_name;
 		}
 	}
-		
-		
-		$nav_colours = array (
-		  '' => t('Scheme Default'),
-		'red' => 'red',	
-		'pink' => 'pink',
-		'green' => 'green',
-		'blue' => 'blue',
-		'purple' => 'purple',
-		'black' => 'black',
-		'orange' => 'orange',
-		'brown' => 'brown',
-		'grey' => 'grey',
-		'gold' => 'gold',
-		'silver' => t('silver'),	
-		);
 
 if(feature_enabled(local_user(),'expert')) 
 				$expert = 1;
@@ -100,7 +96,14 @@ if(feature_enabled(local_user(),'expert'))
 		'$title' => t("Theme settings"),
 		'$schema' => array('redbasic_schema', t('Set scheme'), $arr['schema'], '', $scheme_choices),
 		'$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar']),		
-		'$nav_colour' => array('redbasic_nav_colour', t('Navigation bar colour'), $arr['nav_colour'], '', $nav_colours),
+		'$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background colour'), $arr['nav_bg']),
+		'$nav_gradient_top' => array('redbasic_nav_gradient_top', t('Navigation bar gradient top colour'), $arr['nav_gradient_top']),
+		'$nav_gradient_bottom' => array('redbasic_nav_gradient_bottom', t('Navigation bar gradient bottom colour'), $arr['nav_gradient_bottom']),
+		'$nav_active_gradient_top' => array('redbasic_nav_active_gradient_top', t('Navigation active button gradient top colour'), $arr['nav_active_gradient_top']),
+		'$nav_active_gradient_bottom' => array('redbasic_nav_active_gradient_bottom', t('Navigation active button gradient bottom colour'), $arr['nav_active_gradient_bottom']),
+		'$nav_bd' => array('redbasic_nav_bd', t('Navigation bar border colour '), $arr['nav_bd']),
+		'$nav_icon_colour' => array('redbasic_nav_icon_colour', t('Navigation bar icon colour '), $arr['nav_icon_colour']),
+		'$nav_active_icon_colour' => array('redbasic_nav_active_icon_colour', t('Navigation bar active icon colour '), $arr['nav_active_icon_colour']),
 		'$link_colour' => array('redbasic_link_colour', t('link colour'), $arr['link_colour'], '', $link_colours),
 		'$banner_colour' => array('redbasic_banner_colour', t('Set font-colour for banner'), $arr['banner_colour']),
 		'$bgcolour' => array('redbasic_background_colour', t('Set the background colour'), $arr['bgcolour']),
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 01e81eb53..9e6adb2a4 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -7,13 +7,15 @@ if(! $a->install) {
 	if($uid)
 	    load_pconfig($uid,'redbasic');
 
-// Nav colours are mess.  Set $nav_colour as a single word for the sake of letting folk pick one
-// but it actually consists of at least two colours to form a gradient - $nav_bg_1 and $nav_bg_2
-// A further two - $nav_bg_3 and $nav_bg_4 are used to create the hover, if any particular scheme
-// wants to implement that
-	    $nav_colour = get_pconfig($uid, "redbasic", "nav_colour");	
-
 // Load the owners pconfig
+		$nav_bg = get_pconfig($uid, "redbasic", "nav_bg");
+		$nav_gradient_top = get_pconfig($uid, "redbasic", "nav_gradient_top");
+		$nav_gradient_bottom = get_pconfig($uid, "redbasic", "nav_gradient_bottom");
+		$nav_active_gradient_top = get_pconfig($uid, "redbasic", "nav_active_gradient_top");
+		$nav_active_gradient_bottom = get_pconfig($uid, "redbasic", "nav_active_gradient_bottom");
+		$nav_bd = get_pconfig($uid, "redbasic", "nav_bd");
+		$nav_icon_colour = get_pconfig($uid, "redbasic", "nav_icon_colour");
+		$nav_active_icon_colour = get_pconfig($uid, "redbasic", "nav_active_icon_colour");
 		$narrow_navbar = get_pconfig($uid,'redbasic','narrow_navbar');
 		$banner_colour = get_pconfig($uid,'redbasic','banner_colour');
 	    $link_colour = get_pconfig($uid, "redbasic", "link_colour");	
@@ -68,13 +70,22 @@ if(! $a->install) {
 //Set some defaults - we have to do this after pulling owner settings, and we have to check for each setting
 //individually.  If we don't, we'll have problems if a user has set one, but not all options.
 
-	if (! $nav_colour) {
-		$nav_colour = "red";
-			$nav_bg_1 = "#f88";
-			$nav_bg_2 = "#b00";
-			$nav_bg_3 = "#f00";
-			$nav_bg_4 = "#b00";
-		}
+	if (! $nav_bg)
+		$nav_bg = "#222";
+	if (! $nav_gradient_top)
+		$nav_gradient_top = "#3c3c3c";
+	if (! $nav_gradient_bottom)
+		$nav_gradient_bottom = "#222";
+	if (! $nav_active_gradient_top)
+		$nav_active_gradient_top = "#222";
+	if (! $nav_active_gradient_bottom)
+		$nav_active_gradient_bottom = "#282828";
+	if (! $nav_bd)
+		$nav_bd = "#080808";
+	if (! $nav_icon_colour)
+		$nav_icon_colour = "#999";
+	if (! $nav_active_icon_colour)
+		$nav_active_icon_colour = "#fff";
 	if (! $link_colour)
 		$link_colour = "#0080FF";
 	if (! $banner_colour)
@@ -123,70 +134,20 @@ if(! $a->install) {
 		$nav_float_min_opacity = (float) $nav_min_opacity;
 		$nav_percent_min_opacity = (int) 100 * $nav_min_opacity;
 	}
-			
-
-// Nav colours have nested values, so we have to define the actual variables
-// used in the CSS from the higher level "red", "black", etc here
-		if ($nav_colour == "red") {
-					$nav_bg_1 = $nav_bg_3 = "#ba002f";
-					$nav_bg_2 = $nav_bg_4 = "#ad002c";
-					$search_background = "#EEEEEE";
-					$active_colour = '#444444';
-		}
-
-		if ($nav_colour == "black") {
-					$nav_bg_1 = $nav_bg_3 = "#000";
-		      			$nav_bg_2 = $nav_bg_4 = "#222";
-					$search_background = '#EEEEEE';
-					$active_colour = '#AAAAAA';
-		}
-		if ($nav_colour == "silver") {
-					$nav_bg_1 = $nav_bg_2 = $nav_bg_3 = $nav_bg_4 = "silver";
-					$search_background = '#EEEEEE';
-		}
-		if($nav_colour === "pink") {
-		      $nav_bg_1 = $nav_bg_3 = "#FFC1CA";
-		      $nav_bg_2 = $nav_bg_4 = "#FFC1CA";
-	}
-		if($nav_colour === "green") {
-		      $nav_bg_1 = $nav_bg_3 = "#5CD65C";
-		      $nav_bg_2 = $nav_bg_4 = "#5CD65C";
-	}
-		if($nav_colour === "blue") {
-		      $nav_bg_1 = $nav_bg_3 = "#1872a2";
-		      $nav_bg_2 = $nav_bg_4 = "#1872a2";
-	}
-		if($nav_colour === "purple") {
-		      $nav_bg_1 = $nav_bg_3 = "#551A8B";
-		      $nav_bg_2 = $nav_bg_4 = "#551A8B";
-	}
-		if($nav_colour === "orange") {
-		      $nav_bg_1 = $nav_bg_3 = "#FF3D0D";
-		      $nav_bg_2 = $nav_bg_4 = "#FF3D0D";
-	}	
-		if($nav_colour === "brown") {
-		      $nav_bg_1 = $nav_bg_3 = "#330000";
-		      $nav_bg_2 = $nav_bg_4 = "#330000";
-	}
-		if($nav_colour === "grey") {
-		      $nav_bg_1 = $nav_bg_3 = "#2e2f2e";
-		      $nav_bg_2 = $nav_bg_4 = "#2e2f2e";
-	}
-		if($nav_colour === "gold") {
-		      $nav_bg_1 = $nav_bg_3 = "#FFAA00";
-		      $nav_bg_2 = $nav_bg_4 = "#FFAA00";
-	}
 
-		
 // Apply the settings
 	if(file_exists('view/theme/redbasic/css/style.css')) {
 		$x = file_get_contents('view/theme/redbasic/css/style.css');
 
 $options = array (
-'$nav_bg_1' => $nav_bg_1,
-'$nav_bg_2' => $nav_bg_2,
-'$nav_bg_3' => $nav_bg_3,
-'$nav_bg_4' => $nav_bg_4,
+'$nav_bg' => $nav_bg,
+'$nav_gradient_top' => $nav_gradient_top,
+'$nav_gradient_bottom' => $nav_gradient_bottom,
+'$nav_active_gradient_top' => $nav_active_gradient_top,
+'$nav_active_gradient_bottom' => $nav_active_gradient_bottom,
+'$nav_bd' => $nav_bd,
+'$nav_icon_colour' => $nav_icon_colour,
+'$nav_active_icon_colour' => $nav_active_icon_colour,
 '$link_colour' => $link_colour,
 '$banner_colour' => $banner_colour,
 '$search_background' => $search_background,
@@ -214,7 +175,6 @@ $options = array (
 );
 
 echo str_replace(array_keys($options), array_values($options), $x);    
-
 }
 
 if($sloppy_photos && file_exists('view/theme/redbasic/css/sloppy_photos.css')) {
diff --git a/view/theme/redbasic/schema/BS-Default.php b/view/theme/redbasic/schema/BS-Default.php
new file mode 100644
index 000000000..401045c7b
--- /dev/null
+++ b/view/theme/redbasic/schema/BS-Default.php
@@ -0,0 +1,18 @@
+<?php
+	
+	if (! $nav_bg)
+		$nav_bg = "#f8f8f8";
+	if (! $nav_bd)
+		$nav_bd = "#e7e7e7";
+	if (! $nav_gradient_top)
+		$nav_gradient_top = "#fff";
+	if (! $nav_gradient_bottom)
+		$nav_gradient_bottom = "#f8f8f8";
+	if (! $nav_active_gradient_top)
+		$nav_active_gradient_top = "#ebebeb";
+	if (! $nav_active_gradient_bottom)
+		$nav_active_gradient_bottom = "#f3f3f3";
+	if (! $nav_icon_colour)
+		$nav_icon_colour = "#777";
+	if (! $nav_active_icon_colour)
+		$nav_active_icon_colour = "#555";
diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl
index af2969397..34c04e91c 100644
--- a/view/theme/redbasic/tpl/theme_settings.tpl
+++ b/view/theme/redbasic/tpl/theme_settings.tpl
@@ -4,8 +4,15 @@
 </div>
 
 {{if $expert}}
-{{* include file="field_select.tpl" field=$nav_colour *}}
 {{include file="field_checkbox.tpl" field=$narrow_navbar}}
+{{include file="field_input.tpl" field=$nav_bg}}
+{{include file="field_input.tpl" field=$nav_gradient_top}}
+{{include file="field_input.tpl" field=$nav_gradient_bottom}}
+{{include file="field_input.tpl" field=$nav_active_gradient_top}}
+{{include file="field_input.tpl" field=$nav_active_gradient_bottom}}
+{{include file="field_input.tpl" field=$nav_bd}}
+{{include file="field_input.tpl" field=$nav_icon_colour}}
+{{include file="field_input.tpl" field=$nav_active_icon_colour}}
 {{include file="field_input.tpl" field=$banner_colour}}
 {{include file="field_input.tpl" field=$link_colour}}
 {{include file="field_input.tpl" field=$bgcolour}}