Configurable menubar color

civicrm · Apr 8, 2019 · 6a3e6d9 · 6a3e6d9
1 parent 1889d80
commit 6a3e6d9
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 23 deletions.
diff --git a/CRM/Admin/Form/Preferences/Display.php b/CRM/Admin/Form/Preferences/Display.php
@@ -52,6 +52,7 @@ class CRM_Admin_Form_Preferences_Display extends CRM_Admin_Form_Preferences {
     'display_name_format' => CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME,
     'sort_name_format' => CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME,
     'menubar_position' => CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME,
+    'menubar_color' => CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME,
   ];
 
   /**
@@ -105,6 +106,8 @@ public function postProcess() {
 
     $this->postProcessCommon();
 
+    \Civi::service('asset_builder')->clear();
+
     // If "Configure CKEditor" button was clicked
     if (!empty($this->_params['ckeditor_config'])) {
       // Suppress the "Saved" status message and redirect to the CKEditor Config page

diff --git a/CRM/Admin/Form/SettingTrait.php b/CRM/Admin/Form/SettingTrait.php
@@ -238,6 +238,9 @@ protected function addFieldsDefinedInSettingsMetadata() {
         elseif ($add === 'addYesNo' && ($props['type'] === 'Boolean')) {
           $this->addRadio($setting, ts($props['title']), [1 => 'Yes', 0 => 'No'], NULL, '&nbsp;&nbsp;');
         }
+        elseif ($add === 'add') {
+          $this->add($props['html_type'], $setting, ts($props['title']), $options);
+        }
         else {
           $this->$add($setting, ts($props['title']), $options);
         }
@@ -293,6 +296,7 @@ protected function getQuickFormType($spec) {
       'entity_reference' => 'EntityRef',
       'advmultiselect' => 'Element',
     ];
+    $mapping += array_fill_keys(CRM_Core_Form::$html5Types, '');
     return $mapping[$htmlType];
   }
 

diff --git a/CRM/Core/Resources.php b/CRM/Core/Resources.php
@@ -844,9 +844,12 @@ public static function renderMenubarStylesheet(GenericHookEvent $e) {
     foreach ($items as $item) {
       $e->content .= file_get_contents(self::singleton()->getPath('civicrm', $item));
     }
-    $vars = [
-      'resourceBase' => rtrim($config->resourceBase, '/'),
-    ];
+    $vars = ['resourceBase' => rtrim($config->resourceBase, '/')];
+    $vars['menubarColor'] = $color = Civi::settings()->get('menubar_color');
+    $vars['semiTransparentMenuColor'] = 'rgba(' . implode(', ', CRM_Utils_Color::getRgb($color)) . ', .85)';
+    $vars['highlightColor'] = CRM_Utils_Color::getHighlight($color);
+    $vars['textColor'] = CRM_Utils_Color::getContrast($color) == 'white' ? '#ddd' : '#333';
+    $vars['highlightTextColor'] = CRM_Utils_Color::getContrast($vars['highlightColor']) == 'white' ? '#ddd' : '#333';
     foreach ($vars as $var => $val) {
       $e->content = str_replace('$' . $var, $val, $e->content);
     }

diff --git a/CRM/Utils/Color.php b/CRM/Utils/Color.php
@@ -45,12 +45,50 @@ class CRM_Utils_Color {
    * @return string
    */
   public static function getContrast($hexcolor) {
-    $hexcolor = trim($hexcolor, ' #');
-    $r = hexdec(substr($hexcolor, 0, 2));
-    $g = hexdec(substr($hexcolor, 2, 2));
-    $b = hexdec(substr($hexcolor, 4, 2));
+    list($r, $g, $b) = self::getRgb($hexcolor);
     $yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
     return ($yiq >= 128) ? 'black' : 'white';
   }
 
+  /**
+   * Convert hex color to decimal
+   *
+   * @param string $hexcolor
+   * @return array
+   *   [red, green, blue]
+   */
+  public static function getRgb($hexcolor) {
+    $hexcolor = trim($hexcolor, ' #');
+    if (strlen($hexcolor) === 3) {
+      $hexcolor = $hexcolor[0] . $hexcolor[0] . $hexcolor[1] . $hexcolor[1] . $hexcolor[2] . $hexcolor[2];
+    }
+    return [
+      hexdec(substr($hexcolor, 0, 2)),
+      hexdec(substr($hexcolor, 2, 2)),
+      hexdec(substr($hexcolor, 4, 2)),
+    ];
+  }
+
+  /**
+   * Calculate a highlight color from a base color
+   *
+   * @param $hexcolor
+   * @return string
+   */
+  public static function getHighlight($hexcolor) {
+    $rgb = CRM_Utils_Color::getRgb($hexcolor);
+    $avg = array_sum($rgb) / 3;
+    foreach ($rgb as &$v) {
+      if ($avg > 242) {
+        // For very bright values, lower the brightness
+        $v -= 50;
+      }
+      else {
+        // Bump up brightness on a nonlinear curve - darker colors get more of a boost
+        $v = min(255, intval((-.0035 * ($v - 242) ** 2) + 260));
+      }
+    }
+    return '#' . implode(array_map('dechex', $rgb));
+  }
+
 }
diff --git a/css/crm-menubar.css b/css/crm-menubar.css
@@ -6,8 +6,8 @@
   font-size: 13px;
 }
 #civicrm-menu {
-  background-color: #f2f2f2;
-	width: 100%;
+  background-color: $menubarColor;
+  width: 100%;
   z-index: 500;
   height: auto;
   margin: 0;
@@ -22,7 +22,6 @@
 #civicrm-menu li a {
   padding: 12px 8px;
   text-decoration: none;
-  color: #333;
   box-shadow: none;
   border: none;
 }
@@ -42,12 +41,12 @@
 #civicrm-menu li a:hover,
 #civicrm-menu li a.highlighted {
   text-decoration: none;
-  background-color: #fff;
+  background-color: $highlightColor;
+  color: $highlightTextColor;
 }
 #civicrm-menu li li .sub-arrow:before {
   content: "\f0da";
 	font-family: 'FontAwesome';
-  color: #666;
 	float: right;
 	margin-right: -25px;
 }
@@ -174,10 +173,10 @@ ul.crm-quickSearch-results.ui-state-disabled {
   float: right;
 }
 #civicrm-menu #crm-menubar-toggle-position a i {
-  color: #888;
   margin: 0;
-  border-top: 2px solid #888;
+  border-top: 2px solid $textColor;
   font-size: 11px;
+  opacity: .8;
 }
 body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
   transform: rotate(180deg);
@@ -215,10 +214,14 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
   }
 
   #civicrm-menu ul {
-    background-color: #fff;
     box-shadow: 0px 0px 2px 0 rgba(0,0,0,0.3);
   }
 
+  #civicrm-menu li a {
+    background-color: $semiTransparentMenuColor;
+    color: $textColor;
+  }
+
   #civicrm-menu > li > a {
     height: 40px;
   }
@@ -227,13 +230,6 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
     z-index: 200000;
   }
 
-  #civicrm-menu ul li a:focus,
-  #civicrm-menu ul li a:hover,
-  #civicrm-menu ul li a.highlighted {
-    background-color: #f2f2f2;
-    color: #222;
-  }
-
   body.crm-menubar-over-cms-menu #civicrm-menu,
   body.crm-menubar-below-cms-menu #civicrm-menu {
     position: fixed;

diff --git a/settings/Core.setting.php b/settings/Core.setting.php
@@ -1024,7 +1024,7 @@
     'type' => 'String',
     'html_type' => 'select',
     'default' => 'over-cms-menu',
-    'add' => '5.9',
+    'add' => '5.12',
     'title' => ts('Menubar position'),
     'is_domain' => 1,
     'is_contact' => 0,
@@ -1037,4 +1037,18 @@
       'none' => ts('None - disable menu'),
     ),
   ),
+  'menubar_color' => array(
+    'group_name' => 'CiviCRM Preferences',
+    'group' => 'core',
+    'name' => 'menubar_position',
+    'type' => 'String',
+    'html_type' => 'color',
+    'default' => '#f2f2f2',
+    'add' => '5.13',
+    'title' => ts('Menubar color'),
+    'is_domain' => 1,
+    'is_contact' => 0,
+    'description' => ts('Color of the CiviCRM main menu.'),
+    'help_text' => NULL,
+  ),
 );
diff --git a/templates/CRM/Admin/Form/Preferences/Display.tpl b/templates/CRM/Admin/Form/Preferences/Display.tpl
@@ -216,6 +216,12 @@
         <div class="description">{ts}Default position for the CiviCRM menubar.{/ts}</div>
       </td>
     </tr>
+    <tr class="crm-preferences-display-form-block_menubar_color">
+      <td class="label">{$form.menubar_color.label}</td>
+      <td>
+        {$form.menubar_color.html}
+      </td>
+    </tr>
   </table>
   <div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="bottom"}</div>
 </div>