Hook to alter menubar css variables & fix breakpoint in WP

CRM/Core/Resources.php

@@ -767,6 +767,9 @@ public function coreResourceList($region) {
       $items[] = 'js/crm.menubar.js';
       $items[] = Civi::service('asset_builder')->getUrl('crm-menubar.css', [
         'color' => Civi::settings()->get('menubar_color'),
+        'height' => 40,
+        'breakpoint' => 768,
+        'opacity' => .88,
       ]);
       $items[] = [
         'menubar' => [
@@ -852,9 +855,11 @@ public static function renderMenubarStylesheet(GenericHookEvent $e) {
     }
     $vars = [
       'resourceBase' => rtrim($config->resourceBase, '/'),
-      'menubarHeight' => '40px',
+      'menubarHeight' => $e->params['height'] . 'px',
+      'breakMin' => $e->params['breakpoint'] . 'px',
+      'breakMax' => ($e->params['breakpoint'] - 1) . 'px',
       'menubarColor' => $color,
-      'semiTransparentMenuColor' => 'rgba(' . implode(', ', CRM_Utils_Color::getRgb($color)) . ', .85)',
+      'menuItemColor' => 'rgba(' . implode(', ', CRM_Utils_Color::getRgb($color)) . ", {$e->params['opacity']})",
       'highlightColor' => CRM_Utils_Color::getHighlight($color),
       'textColor' => CRM_Utils_Color::getContrast($color, '#333', '#ddd'),
     ];

CRM/Utils/Hook.php

@@ -2217,6 +2217,24 @@ public static function alterAngular($angular) {
     Civi::dispatcher()->dispatch('hook_civicrm_alterAngular', $event);
   }
 
+  /**
+   * This hook is called when building a link to a semi-static asset.
+   *
+   * @param string $asset
+   *   The name of the asset.
+   *   Ex: 'angular.json'
+   * @param array $params
+   *   List of optional arguments which influence the content.
+   * @return null
+   *   the return value is ignored
+   */
+  public static function getAssetUrl(&$asset, &$params) {
+    return self::singleton()->invoke(['asset', 'params'],
+      $asset, $params, self::$_nullObject, self::$_nullObject, self::$_nullObject, self::$_nullObject,
+      'civicrm_getAssetUrl'
+    );
+  }
+
   /**
    * This hook is called whenever the system builds a new copy of
    * semi-static asset.

CRM/Utils/System.php

@@ -52,6 +52,7 @@
  * @method static setHttpHeader(string $name, string $value) Set http header.
  * @method static array synchronizeUsers() Create CRM contacts for all existing CMS users.
  * @method static appendCoreResources(\Civi\Core\Event\GenericHookEvent $e) Callback for hook_civicrm_coreResourceList.
+ * @method static alterAssetUrl(\Civi\Core\Event\GenericHookEvent $e) Callback for hook_civicrm_getAssetUrl.
  */
 class CRM_Utils_System {
 

CRM/Utils/System/Base.php

@@ -919,6 +919,14 @@ public function logger($message) {
   public function appendCoreResources(\Civi\Core\Event\GenericHookEvent $e) {
   }
 
+  /**
+   * Modify dynamic assets.
+   *
+   * @param \Civi\Core\Event\GenericHookEvent $e
+   */
+  public function alterAssetUrl(\Civi\Core\Event\GenericHookEvent $e) {
+  }
+
   /**
    * @param string $name
    * @param string $value

CRM/Utils/System/WordPress.php

@@ -807,6 +807,16 @@ public function appendCoreResources(\Civi\Core\Event\GenericHookEvent $e) {
     $e->list[] = 'js/crm.wordpress.js';
   }
 
+  /**
+   * @inheritDoc
+   */
+  public function alterAssetUrl(\Civi\Core\Event\GenericHookEvent $e) {
+    // Set menubar breakpoint to match WP admin theme
+    if ($e->asset == 'crm-menubar.css') {
+      $e->params['breakpoint'] = 783;
+    }
+  }
+
   /**
    * @inheritDoc
    */

Civi/Core/AssetBuilder.php

@@ -125,6 +125,8 @@ public function isValidName($name) {
    *   Ex: 'http://example.org/files/civicrm/dyn/angular.abcd1234abcd1234.json'.
    */
   public function getUrl($name, $params = []) {
+    \CRM_Utils_Hook::getAssetUrl($name, $params);
+
     if (!$this->isValidName($name)) {
       throw new \RuntimeException("Invalid dynamic asset name");
     }

Civi/Core/Container.php

@@ -322,6 +322,7 @@ public function createEventDispatcher($container) {
     $dispatcher->addListener('hook_civicrm_buildAsset', ['\CRM_Utils_VisualBundle', 'buildAssetCss']);
     $dispatcher->addListener('hook_civicrm_buildAsset', ['\CRM_Core_Resources', 'renderMenubarStylesheet']);
     $dispatcher->addListener('hook_civicrm_coreResourceList', ['\CRM_Utils_System', 'appendCoreResources']);
+    $dispatcher->addListener('hook_civicrm_getAssetUrl', ['\CRM_Utils_System', 'alterAssetUrl']);
     $dispatcher->addListener('civi.dao.postInsert', ['\CRM_Core_BAO_RecurringEntity', 'triggerInsert']);
     $dispatcher->addListener('civi.dao.postUpdate', ['\CRM_Core_BAO_RecurringEntity', 'triggerUpdate']);
     $dispatcher->addListener('civi.dao.postDelete', ['\CRM_Core_BAO_RecurringEntity', 'triggerDelete']);

css/crm-menubar.css

@@ -183,7 +183,7 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
   transform: rotate(180deg);
 }
 
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   /* Switch to desktop layout
   -----------------------------------------------
@@ -219,7 +219,7 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
   }
 
   #civicrm-menu li a {
-    background-color: $semiTransparentMenuColor;
+    background-color: $menuItemColor;
     color: $textColor;
   }
 
@@ -263,7 +263,7 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
   /* hide the menu in mobile view */
   #crm-menubar-state:not(:checked) ~ #civicrm-menu {
     display: none;

css/menubar-backdrop.css

@@ -1,4 +1,4 @@
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu {
     border-top: 0 none !important;
@@ -28,7 +28,7 @@
   }
 
 }
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
 
   body.backdrop-admin-bar-position-absolute #civicrm-menu-nav {
     position: absolute;

css/menubar-drupal7.css

@@ -1,4 +1,4 @@
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar {
     display: none;
@@ -67,7 +67,7 @@
 }
 
 /* For adminimal_admin_menu */
-@media (min-width: 768px) and (max-width: 1024px) {
+@media (min-width: $breakMin) and (max-width: 1024px) {
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu.admin-menu.adminimal-menu > .slicknav_menu {
     display: none;
@@ -80,7 +80,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
 
   body.toolbar.crm-menubar-visible #toolbar-home {
     visibility: hidden;

css/menubar-drupal8.css

@@ -24,7 +24,7 @@ nav#civicrm-menu-nav .crm-menubar-toggle-btn-icon {
   left: 44px;
 }
 
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar-administration {
     display: none;

css/menubar-joomla.css

@@ -1,4 +1,4 @@
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   body.crm-menubar-over-cms-menu.crm-menubar-visible {
     padding-top: $menubarHeight;
@@ -15,7 +15,7 @@
   }
 
 }
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
 
   body #civicrm-menu-nav {
     position: absolute;

css/menubar-wordpress.css

@@ -1,4 +1,4 @@
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   body.crm-menubar-over-cms-menu.crm-menubar-visible #wpbody {
     padding-top: 8px;
@@ -33,7 +33,7 @@
   }
 
 }
-@media (min-width: 768px) and (max-width: 960px) {
+@media (min-width: $breakMin) and (max-width: 960px) {
 
   /* For the auto-fold toolbar */
   .wp-toolbar body.crm-menubar-below-cms-menu.auto-fold > #civicrm-menu-nav #civicrm-menu {
@@ -42,7 +42,7 @@
   }
 
 }
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
 
   body #civicrm-menu-nav .crm-menubar-toggle-btn {
     position: absolute;