From 4373b3dd0b25b7e3af1b0b268f3b55a1d650e398 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Thu, 25 Apr 2019 22:48:14 -0400 Subject: [PATCH 1/4] Add css variable for menubar breakpoint --- CRM/Core/Resources.php | 2 ++ css/crm-menubar.css | 4 ++-- css/menubar-backdrop.css | 4 ++-- css/menubar-drupal7.css | 6 +++--- css/menubar-drupal8.css | 2 +- css/menubar-joomla.css | 4 ++-- css/menubar-wordpress.css | 6 +++--- 7 files changed, 15 insertions(+), 13 deletions(-) diff --git a/CRM/Core/Resources.php b/CRM/Core/Resources.php index eb34b4de58ca..92c86e6bed30 100644 --- a/CRM/Core/Resources.php +++ b/CRM/Core/Resources.php @@ -853,6 +853,8 @@ public static function renderMenubarStylesheet(GenericHookEvent $e) { $vars = [ 'resourceBase' => rtrim($config->resourceBase, '/'), 'menubarHeight' => '40px', + 'breakMin' => '768px', + 'breakMax' => '767px', 'menubarColor' => $color, 'semiTransparentMenuColor' => 'rgba(' . implode(', ', CRM_Utils_Color::getRgb($color)) . ', .85)', 'highlightColor' => CRM_Utils_Color::getHighlight($color), diff --git a/css/crm-menubar.css b/css/crm-menubar.css index 14f27c465db6..1754568a416f 100644 --- a/css/crm-menubar.css +++ b/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 ----------------------------------------------- @@ -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; diff --git a/css/menubar-backdrop.css b/css/menubar-backdrop.css index b291d4494203..ef980b240b16 100644 --- a/css/menubar-backdrop.css +++ b/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; diff --git a/css/menubar-drupal7.css b/css/menubar-drupal7.css index e8e7ca1d2636..f5c663160b8e 100644 --- a/css/menubar-drupal7.css +++ b/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; diff --git a/css/menubar-drupal8.css b/css/menubar-drupal8.css index 0697ea9aca5f..c143dc967f13 100644 --- a/css/menubar-drupal8.css +++ b/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; diff --git a/css/menubar-joomla.css b/css/menubar-joomla.css index 57ae08c6b9ce..48422b5e38d5 100644 --- a/css/menubar-joomla.css +++ b/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; diff --git a/css/menubar-wordpress.css b/css/menubar-wordpress.css index b5f8181f76f7..e87fc6e52717 100644 --- a/css/menubar-wordpress.css +++ b/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; From c4560ed2fce7807fa04ff00b59797a445843c1d2 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Thu, 25 Apr 2019 23:01:03 -0400 Subject: [PATCH 2/4] Add hook to influince menubar css variables --- CRM/Core/Resources.php | 11 +++++++---- CRM/Utils/Hook.php | 18 ++++++++++++++++++ Civi/Core/AssetBuilder.php | 2 ++ 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/CRM/Core/Resources.php b/CRM/Core/Resources.php index 92c86e6bed30..a15560aa5c70 100644 --- a/CRM/Core/Resources.php +++ b/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,11 +855,11 @@ public static function renderMenubarStylesheet(GenericHookEvent $e) { } $vars = [ 'resourceBase' => rtrim($config->resourceBase, '/'), - 'menubarHeight' => '40px', - 'breakMin' => '768px', - 'breakMax' => '767px', + '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)', + 'semiTransparentMenuColor' => 'rgba(' . implode(', ', CRM_Utils_Color::getRgb($color)) . ", {$e->params['opacity']})", 'highlightColor' => CRM_Utils_Color::getHighlight($color), 'textColor' => CRM_Utils_Color::getContrast($color, '#333', '#ddd'), ]; diff --git a/CRM/Utils/Hook.php b/CRM/Utils/Hook.php index 024692ea3d84..9a48148b9f1b 100644 --- a/CRM/Utils/Hook.php +++ b/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. diff --git a/Civi/Core/AssetBuilder.php b/Civi/Core/AssetBuilder.php index b60f41e20bcc..a53be59402aa 100644 --- a/Civi/Core/AssetBuilder.php +++ b/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"); } From 62c20d1eb87fbd5bb9a42e4d237c7192bd81e856 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Fri, 26 Apr 2019 08:56:46 -0400 Subject: [PATCH 3/4] Alter menubar breakpoint to match WP admin theme --- CRM/Utils/System.php | 1 + CRM/Utils/System/Base.php | 8 ++++++++ CRM/Utils/System/WordPress.php | 10 ++++++++++ Civi/Core/Container.php | 1 + 4 files changed, 20 insertions(+) diff --git a/CRM/Utils/System.php b/CRM/Utils/System.php index 6733d57f7e2c..4706b2672cf9 100644 --- a/CRM/Utils/System.php +++ b/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 { diff --git a/CRM/Utils/System/Base.php b/CRM/Utils/System/Base.php index 0ad46528d416..8bb09e260fcd 100644 --- a/CRM/Utils/System/Base.php +++ b/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 diff --git a/CRM/Utils/System/WordPress.php b/CRM/Utils/System/WordPress.php index 5beecc51ea0d..0f67b9be3853 100644 --- a/CRM/Utils/System/WordPress.php +++ b/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 */ diff --git a/Civi/Core/Container.php b/Civi/Core/Container.php index 579ee3083ee4..9ce531d1bb77 100644 --- a/Civi/Core/Container.php +++ b/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']); From 4543469f0c1237a5dd53718eaa24b3a7664b1dd0 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Fri, 26 Apr 2019 10:09:02 -0400 Subject: [PATCH 4/4] Better variable name --- CRM/Core/Resources.php | 2 +- css/crm-menubar.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CRM/Core/Resources.php b/CRM/Core/Resources.php index a15560aa5c70..69f9e4615089 100644 --- a/CRM/Core/Resources.php +++ b/CRM/Core/Resources.php @@ -859,7 +859,7 @@ public static function renderMenubarStylesheet(GenericHookEvent $e) { 'breakMin' => $e->params['breakpoint'] . 'px', 'breakMax' => ($e->params['breakpoint'] - 1) . 'px', 'menubarColor' => $color, - 'semiTransparentMenuColor' => 'rgba(' . implode(', ', CRM_Utils_Color::getRgb($color)) . ", {$e->params['opacity']})", + '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'), ]; diff --git a/css/crm-menubar.css b/css/crm-menubar.css index 1754568a416f..dc2a4e793711 100644 --- a/css/crm-menubar.css +++ b/css/crm-menubar.css @@ -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; }