setting header colors based on settings

.meteor/packages

@@ -51,6 +51,7 @@ useraccounts:unstyled@1.8.1
 tsega:bootstrap3-datetimepicker@3.1.3_1
 momentjs:moment
 aslagle:reactive-table
+aramk:tinycolor
 
 # Testing
 

.meteor/versions

@@ -10,6 +10,7 @@ aldeed:collection2@2.3.2
 aldeed:simple-schema@1.3.1
 aldeed:template-extension@3.4.3
 anti:i18n@0.4.3
+aramk:tinycolor@1.1.0_1
 aslagle:reactive-table@0.7.0
 autoupdate@1.2.0
 backbone@1.0.0

client/views/common/css.html

@@ -9,12 +9,24 @@
       body{
         background: {{getSetting "backgroundCSS"}};
       }
+
+      /* Header */
+
       .header{
         background-color: {{getSetting "headerColor"}};
       }
       .header, .header .logo a, .header .logo a:visited{
         color: {{getSetting "headerTextColor"}};        
       }
+
+      .side-nav .dropdown-top-level, .show-more{
+        border-color: {{headerTextColorHalfOpacity}};
+      }
+
+      .header .svg-buttoncolor path{
+        fill: {{getSetting "headerTextColor"}};
+      }
+
       input[type="submit"], button, .button, button.submit, .auth-buttons #login-buttons #login-buttons-password, .btn-primary, .header .btn-primary, .header .btn-primary:link, .header .btn-primary:visited, .error, .mobile-menu-button, .login-link-text, .post-category:hover{
         background-color: {{getSetting "buttonColor"}};
         color: {{getSetting "buttonTextColor"}};
@@ -37,9 +49,7 @@
         max-width:{{getSetting "logoWidth"}}px;
       }
 
-      .svg-buttoncolor path{
-        fill: {{getSetting "buttonColor"}};
-      }
+
 
       {{hideAuthClass}}
 

client/views/common/css.js

@@ -23,5 +23,8 @@ Template[getTemplate('css')].helpers({
 
     return authClass.slice(0, - 2) + "{display:none !important}";
 
+  },
+  headerTextColorHalfOpacity: function () {
+    return tinycolor(getSetting("headerTextColor")).setAlpha(0.5);
   }
 });

client/views/nav/nav.js

@@ -1,4 +1,20 @@
 Template[getTemplate('nav')].helpers({
+  headerClass: function () {
+    var headerClass = "";
+    var bgBrightness = tinycolor(getSetting('headerColor')).getBrightness();
+    if (bgBrightness < 50) {
+      headerClass += " dark-bg";
+    } else if (bgBrightness < 100) {
+      headerClass += " medium-dark-bg";
+    } else if (bgBrightness < 200) {
+      headerClass += " medium-light-bg";
+    } else if (bgBrightness < 255) {
+      headerClass += " light-bg";
+    } else {
+      headerClass += " white-bg";
+    }
+    return headerClass;
+  },
   primaryNav: function () {
     return _.sortBy(primaryNav, 'order');
   },
@@ -36,10 +52,6 @@ Template[getTemplate('nav')].helpers({
   },
   getTemplate: function () {
     return getTemplate(this.template);
-  },
-  headerClass: function () {
-    var color = getSetting('headerColor');
-    return (color == 'white' || color == '#fff' || color == '#ffffff') ? "white-background" : '';
   }
 });
 

packages/telescope-search/lib/client/stylesheets/search.scss

@@ -20,7 +20,7 @@
     &:focus {
       outline: none;
     }
-    .white-background &{
+    .white-bg &{
       border: 1px solid #ddd;  
     }
   }

packages/telescope-theme-base/lib/client/scss/specific/_dropdown.scss

@@ -82,14 +82,14 @@
   text-align: center;
   .show-more-icon{
     display: block;
-    visibility: hidden; // hide until SVG injection is
+    visibility: hidden; // hide until SVG injection
     height: 20px;
     width: 20px;
-    opacity: 0.4;
+    opacity: 0.5;
     margin: 0 auto;
   }
   &:hover{
-    background: white(0.3);
+    background: white(0.2);
     .show-more-icon{
       opacity: 1;
     }

packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss

@@ -160,7 +160,6 @@ $nav-width: 250px;
 		display: block;
 		border-bottom: 1px solid #ccc;
 		padding-bottom: 5px;
-		margin-bottom: 5px;
 	}
 	.menu-label{
 		display: block;
@@ -175,17 +174,28 @@ $nav-width: 250px;
 		font-weight: bold;
 	}
 	.dropdown-contents{
-		max-height: 90px;
+		max-height: 103px;
 		overflow: hidden;
 		@include animate(max-height);
+		li{
+			margin: 10px 0;
+		}
+	}
+	.account-link{
+		margin: 10px 0;
+	}
+	.notifications{
+		.dropdown-contents{
+			max-height: 0px;
+		}
+		.show-more{
+			margin-top: -1px;
+		}
 	}
 	.dropdown-open .dropdown-contents{
 		max-height: 999px;
 	}
-	.notifications-menu{
-		display: none;
-	}
 	.tagline{
 		margin-top: 0px;
 	}
-}
+}