From b498af4cf401a6bc840ebb03199d0fe032fafcc1 Mon Sep 17 00:00:00 2001
From: fusionate <nate@fusionpbx.com>
Date: Mon, 7 Oct 2024 14:36:55 -0600
Subject: [PATCH] Theme - Fixed Menu: Add new user menu to menu bar.

---
 resources/classes/menu.php    | 70 +++++++++++++++++++++++++++++++----
 themes/default/app_config.php |  4 +-
 themes/default/css.php        | 13 +++++--
 themes/default/template.php   | 29 ++++++++++-----
 4 files changed, 93 insertions(+), 23 deletions(-)

diff --git a/resources/classes/menu.php b/resources/classes/menu.php
index 01e72a33eb..6c9d94eed4 100644
--- a/resources/classes/menu.php
+++ b/resources/classes/menu.php
@@ -910,6 +910,10 @@ if (!class_exists('menu')) {
 		 */
 		public function menu_horizontal($menu_array) {
 
+			//add multi-lingual support
+				$language = new text;
+				$text = $language->get();
+
 			//determine menu behavior
 				$menu_style = !empty($_SESSION['theme']['menu_style']['text']) ? $_SESSION['theme']['menu_style']['text'] : 'fixed';
 				switch ($menu_style) {
@@ -974,7 +978,7 @@ if (!class_exists('menu')) {
 
 				$html .= "		</div>\n";
 
-				$html .= "		<button type='button' class='navbar-toggler' data-toggle='collapse' data-target='#main_navbar' aria-expanded='false' aria-controls='main_navbar' aria-label='Toggle Menu'>\n";
+				$html .= "		<button type='button' class='navbar-toggler' data-toggle='collapse' data-target='#main_navbar' aria-expanded='false' aria-controls='main_navbar' aria-label='Toggle Menu' onclick=\"$('#body_header_user_menu').fadeOut(200);\">\n";
 				$html .= "			<span class='fa-solid fa-bars'></span>\n";
 				$html .= "		</button>\n";
 
@@ -1057,16 +1061,33 @@ if (!class_exists('menu')) {
 				$html .= "			</ul>\n";
 
 				$html .= "			<ul class='navbar-nav ml-auto'>\n";
-				//current user
-					if (isset($_SESSION['theme']['user_visible']['text']) && $_SESSION['theme']['user_visible']['text'] == 'true') {
+				//current user (latter condition for backward compatibility)
+					if (
+						!empty($_SESSION['username']) &&
+						(
+							isset($_SESSION['theme']['header_user_visible']['text']) &&
+							$_SESSION['theme']['header_user_visible']['text'] == 'true'
+						) || (
+							isset($_SESSION['theme']['user_visible']['text']) &&
+							$_SESSION['theme']['user_visible']['text'] == 'true'
+						)) {
+
+						//set (default) user graphic size and icon
+						$user_graphic = "<i class='".(!empty($_SESSION['theme']['body_header_icon_user']['text']) ? $_SESSION['theme']['body_header_icon_user']['text'] : 'fa-solid fa-user-circle')."'></i>";
+						//overwrite user graphic with image from session, if exists
+						if ($_SESSION['theme']['body_header_user_image']['boolean'] == true && !empty($_SESSION['user']['contact_image']) && is_uuid($_SESSION['user']['contact_image'])) {
+							$user_graphic = "<span style=\"display: inline-block; vertical-align: middle; width: 15px; height: 15px; border-radius: 50%; margin-top: -2px; background-image: url('".PROJECT_PATH."/app/contacts/contact_attachment.php?id=".$_SESSION['user']['contact_image']."&action=download&sid=".session_id()."'); background-repeat: no-repeat; background-size: cover; background-position: center;\"></span>";
+						}
 						$html .= "		<li class='nav-item'>\n";
-						$html .= "			<a class='header_user' href='".PROJECT_PATH."/core/users/user_edit.php?id=user' title=\"".$this->text['theme-label-user']."\"><i class='".(!empty($_SESSION['theme']['body_header_icon_user']['text']) ? $_SESSION['theme']['body_header_icon_user']['text'] : 'fa-solid fa-user-circle')." fa-lg fa-fw' style='margin-top: 6px; margin-right: 5px;'></i>".escape($_SESSION['username'])."</a>";
+						$html .= "			<a class='nav-link header_user d-block d-sm-none' href='show:usermenu' title=\"".$_SESSION['username']."\" style='border-top: 1px solid ".($_SESSION['theme']['menu_sub_background_color']['text'] ?? 'rgba(0,0,0,0.90)')."' data-toggle='collapse' data-target='#main_navbar' onclick=\"event.preventDefault(); $('#body_header_user_menu').toggleFadeSlide();\">".($user_graphic ?? null)."<span style='margin-left: 7px;'>".escape($_SESSION['username'])."</span></a>";
+						$html .= "			<a class='nav-link header_user d-none d-sm-block' href='show:usermenu' title=\"".$_SESSION['username']."\" onclick=\"event.preventDefault(); $('#body_header_user_menu').toggleFadeSlide();\">".($user_graphic ?? null)."<span class='d-none d-md-inline' style='margin-left: 7px;'>".escape($_SESSION['username'])."</span></a>";
 						$html .= "		</li>\n";
 					}
 				//domain name/selector
 					if (!empty($_SESSION['username']) && permission_exists('domain_select') && count($_SESSION['domains']) > 1 && $_SESSION['theme']['domain_visible']['text'] == 'true') {
 						$html .= "		<li class='nav-item'>\n";
-						$html .= "			<a class='header_domain' href='#' id='header_domain_selector_domain' title='".$this->text['theme-label-open_selector']."'><i class='".(!empty($_SESSION['theme']['body_header_icon_domain']['text']) ? $_SESSION['theme']['body_header_icon_domain']['text'] : 'fa-solid fa-earth-americas')." fa-lg fa-fw' style='margin-top: 6px; margin-right: 5px;'></i>".escape($_SESSION['domain_name'])."</a>";
+						$html .= "			<a class='nav-link header_domain header_domain_selector_domain d-block d-sm-none' href='select:domain' onclick='event.preventDefault();' data-toggle='collapse' data-target='#main_navbar' title='".$this->text['theme-label-open_selector']."'><span class='".(!empty($_SESSION['theme']['body_header_icon_domain']['text']) ? $_SESSION['theme']['body_header_icon_domain']['text'] : 'fa-solid fa-earth-americas')."'></span><span style='margin-left: 7px;'>".escape($_SESSION['domain_name'])."</span></a>";
+						$html .= "			<a class='nav-link header_domain header_domain_selector_domain d-none d-sm-block' href='select:domain' onclick='event.preventDefault();' title='".$this->text['theme-label-open_selector']."'><span class='".(!empty($_SESSION['theme']['body_header_icon_domain']['text']) ? $_SESSION['theme']['body_header_icon_domain']['text'] : 'fa-solid fa-earth-americas')."'></span><span class='d-none d-md-inline' style='margin-left: 7px;'>".escape($_SESSION['domain_name'])."</span></a>";
 						$html .= "		</li>\n";
 					}
 				//logout icon
@@ -1083,6 +1104,42 @@ if (!class_exists('menu')) {
 				$html .= "	</div>\n";
 				$html .= "</nav>\n";
 
+				//user menu on menu bar
+					//styles below are defined here to prevent caching (following a permission change, etc)
+					$html .= "<style>\n";
+					$html .= "div#body_header_user_menu {\n";
+					$html .= "	right: ".(permission_exists('domain_select') ? '170px' : '30px')." !important;\n";
+					$html .= "	}\n";
+					$html .= "@media (max-width: 575.98px) {\n";
+					$html .= "	div#body_header_user_menu {\n";
+					$html .= "		right: 10px !important;;\n";
+					$html .= "		}\n";
+					$html .= "	}\n";
+					$html .= "</style>\n";
+
+					$html .= "<div id='body_header_user_menu'>\n";
+					$html .= "	<div class='row m-0'>\n";
+					if (!empty($_SESSION['user']['contact_image']) && is_uuid($_SESSION['user']['contact_image'])) {
+						$html .= "	<div class='col-5 col-sm-6 p-0' style=\"min-width: 130px; background-image: url('".PROJECT_PATH."/app/contacts/contact_attachment.php?id=".$_SESSION['user']['contact_image']."&action=download&sid=".session_id()."'); background-repeat: no-repeat; background-size: cover; background-position: center;\"></div>\n";
+					}
+					$html .= "		<div class='".(!empty($_SESSION['user']['contact_image']) && is_uuid($_SESSION['user']['contact_image']) ? 'col-7 col-sm-6 pr-0' : 'col-12 p-0')." ' style='min-width: 130px; text-align: left;'>\n";
+					if (!empty($_SESSION['user']['contact_name'])) {
+						$html .= "		<div style='line-height: 95%;'><strong>".$_SESSION['user']['contact_name']."</strong></div>\n";
+					}
+					if (!empty($_SESSION['user']['contact_organization'])) {
+						$html .= "		<div class='mt-2' style='font-size: 85%; line-height: 95%;'>".$_SESSION['user']['contact_organization']."</div>\n";
+					}
+					if (!empty($_SESSION['user']['extension'][0]['destination'])) {
+						$html .= "		<div class='mt-2' style='font-size: 90%;'><i class='fa-solid fa-phone' style='margin-right: 5px; color: #00b043;'></i><strong>".$_SESSION['user']['extension'][0]['destination']."</strong></div>\n";
+					}
+					$html .= "			<div class='pt-2 mt-3' style='border-top: 1px solid ".color_adjust($_SESSION['theme']['body_header_shadow_color']['text'], 0.05).";'>\n";
+					$html .= "				<a href='".PROJECT_PATH."/core/users/user_edit.php?id=user'>".$text['title-account_settings']."</a><br>\n";
+					$html .= "				<a href='".PROJECT_PATH."/logout.php'>".$text['title-logout']."</a>\n";
+					$html .= "			</div>";
+					$html .= "		</div>";
+					$html .= "	</div>";
+					$html .= "</div>";
+
 				//modal for logout icon (above)
 					if (!empty($_SESSION['username']) && isset($_SESSION['theme']['logout_icon_visible']) && $_SESSION['theme']['logout_icon_visible']['text'] == "true") {
 						$html .= modal::create(['id'=>'modal-logout','type'=>'general','message'=>$this->text['theme-confirm-logout'],'actions'=>button::create(['type'=>'button','label'=>$this->text['theme-label-logout'],'icon'=>'fa-solid fa-right-from-bracket','id'=>'btn_logout','style'=>'float: right; margin-left: 15px;','collapse'=>'never','link'=>PROJECT_PATH.'/logout.php','onclick'=>"modal_close();"])]);
@@ -1239,7 +1296,6 @@ if (!class_exists('menu')) {
 					//overwrite user graphic with image from session, if exists
 					if ($_SESSION['theme']['body_header_user_image']['boolean'] == true && !empty($_SESSION['user']['contact_image']) && is_uuid($_SESSION['user']['contact_image'])) {
 						$user_graphic_size = str_replace(['px','%'], '', ($_SESSION['theme']['body_header_user_image_size']['numeric'] ?? 18));
-						// $user_graphic = "<span style=\"display: inline-block; vertical-align: middle; width: ".$user_graphic_size."px; height: ".$user_graphic_size."px; border-radius: 50%; margin-right: 7px; margin-top: ".($user_graphic_size > 18 ? '-'.(ceil(($user_graphic_size - 18) / 2) - 4) : '-4')."px; background-image: url('data:".$_SESSION['user']['contact_image']['mime'].";base64,".$_SESSION['user']['contact_image']['content']."'); background-repeat: no-repeat; background-size: cover; background-position: center;\"></span>";
 						$user_graphic = "<span style=\"display: inline-block; vertical-align: middle; width: ".$user_graphic_size."px; height: ".$user_graphic_size."px; border-radius: 50%; margin-right: 7px; margin-top: ".($user_graphic_size > 18 ? '-'.(ceil(($user_graphic_size - 18) / 2) - 4) : '-4')."px; background-image: url('".PROJECT_PATH."/app/contacts/contact_attachment.php?id=".$_SESSION['user']['contact_image']."&action=download&sid=".session_id()."'); background-repeat: no-repeat; background-size: cover; background-position: center;\"></span>";
 					}
 					$html .= "<span style='display: inline-block; padding-right: 20px; font-size: 90%;'>\n";
@@ -1248,7 +1304,7 @@ if (!class_exists('menu')) {
 				//domain name/selector (sm+)
 					if (!empty($_SESSION['username']) && permission_exists('domain_select') && count($_SESSION['domains']) > 1 && $_SESSION['theme']['domain_visible']['text'] == 'true') {
 						$html .= "<span style='display: inline-block; padding-right: 10px; font-size: 90%;'>\n";
-						$html .= "	<a href='show:domainselector' id='header_domain_selector_domain' title='".$this->text['theme-label-open_selector']."'><i class='".(!empty($_SESSION['theme']['body_header_icon_domain']['text']) ? $_SESSION['theme']['body_header_icon_domain']['text'] : 'fa-solid fa-earth-americas')." fa-fw' style='vertical-align: middle; font-size: ".($user_graphic_size - 1)."px; margin-top: ".($user_graphic_size > 18 ? '-'.(ceil(($user_graphic_size - 18) / 2) - 4) : '-3')."px; margin-right: 3px; line-height: 40%;'></i><span class='d-none d-sm-inline'>".escape($_SESSION['domain_name'])."</span></a>";
+						$html .= "	<a href='select:domain' onclick='event.preventDefault();' title='".$this->text['theme-label-open_selector']."' class='header_domain_selector_domain'><i class='".(!empty($_SESSION['theme']['body_header_icon_domain']['text']) ? $_SESSION['theme']['body_header_icon_domain']['text'] : 'fa-solid fa-earth-americas')." fa-fw' style='vertical-align: middle; font-size: ".($user_graphic_size - 1)."px; margin-top: ".($user_graphic_size > 18 ? '-'.(ceil(($user_graphic_size - 18) / 2) - 4) : '-3')."px; margin-right: 3px; line-height: 40%;'></i><span class='d-none d-sm-inline'>".escape($_SESSION['domain_name'])."</span></a>";
 						$html .= "</span>\n";
 					}
 				//logout icon
diff --git a/themes/default/app_config.php b/themes/default/app_config.php
index a7c2548177..ee3e1512c8 100644
--- a/themes/default/app_config.php
+++ b/themes/default/app_config.php
@@ -109,7 +109,7 @@
 		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "header_user_color_hover";
 		$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
 		$apps[$x]['default_settings'][$y]['default_setting_value'] = "#fd9c03";
-		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
 		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the text hover color (and opacity) for header user name.";
 		$y++;
 		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "b999bb99-2224-48f0-8a61-38c4f75c9869";
@@ -117,7 +117,7 @@
 		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "header_domain_color_hover";
 		$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
 		$apps[$x]['default_settings'][$y]['default_setting_value'] = "#fd9c03";
-		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
 		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the text hover color (and opacity) for header domain name.";
 		$y++;
 		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "4a92f422-934f-4ae9-b918-fa932cb1e089";
diff --git a/themes/default/css.php b/themes/default/css.php
index d711c5476f..d12e2c97b2 100644
--- a/themes/default/css.php
+++ b/themes/default/css.php
@@ -49,8 +49,8 @@ $menu_sub_text_color = $_SESSION['theme']['menu_sub_text_color']['text'] ?? '#ff
 $menu_sub_text_size = $_SESSION['theme']['menu_sub_text_size']['text'] ?? '10pt';
 $menu_sub_text_color_hover = $_SESSION['theme']['menu_sub_text_color_hover']['text'] ?? '#fd9c03';
 $menu_sub_background_color_hover = $_SESSION['theme']['menu_sub_background_color_hover']['text'] ?? '#141414';
-$header_user_color_hover = $_SESSION['theme']['header_user_color_hover']['text'] ?? '#1892e6';
-$header_domain_color_hover = $_SESSION['theme']['header_domain_color_hover']['text'] ?? '#1892e6';
+$header_user_color_hover = $_SESSION['theme']['header_user_color_hover']['text'] ?? null;
+$header_domain_color_hover = $_SESSION['theme']['header_domain_color_hover']['text'] ?? null;
 $logout_icon_color = $_SESSION['theme']['logout_icon_color']['text'] ?? 'rgba(255,255,255,0.8)';
 $logout_icon_color_hover = $_SESSION['theme']['logout_icon_color_hover']['text'] ?? 'rgba(255,255,255,1.0)';
 $menu_main_toggle_color = $_SESSION['theme']['menu_main_toggle_color']['text'] ?? 'rgba(255,255,255,0.8)';
@@ -653,7 +653,8 @@ else { //default: white
 		}
 
 	/* main menu item */
-	ul.navbar-nav > li.nav-item > a.nav-link {
+	ul.navbar-nav > li.nav-item > a.nav-link,
+	ul.navbar-nav.ml-auto > li.nav-item > a.nav-link {
 		font-family: <?=$menu_main_text_font?>;
 		font-size: <?=$menu_main_text_size?>;
 		color: <?=$menu_main_text_color?>;
@@ -768,17 +769,21 @@ else { //default: white
 		padding: 10px;
 		}
 
+	<?php if (!empty($header_user_color_hover)) { ?>
 	ul.navbar-nav > li.nav-item:hover > a.header_user,
 	ul.navbar-nav > li.nav-item:focus > a.header_user,
 	ul.navbar-nav > li.nav-item:active > a.header_user {
 		color: <?=$header_user_color_hover?>;
 		}
+	<?php } ?>
 
+	<?php if (!empty($header_domain_color_hover)) { ?>
 	ul.navbar-nav > li.nav-item:hover > a.header_domain,
 	ul.navbar-nav > li.nav-item:focus > a.header_domain,
 	ul.navbar-nav > li.nav-item:active > a.header_domain {
 		color: <?=$header_domain_color_hover?>;
 		}
+	<?php } ?>
 
 	/* logout icon */
 	a.logout_icon {
@@ -1045,7 +1050,7 @@ else { //default: white
 
 /* BODY/HEADER BAR *****************************************************************/
 
-	<?php if ($menu_style == 'side') { ?>
+	<?php if ($menu_style == 'side' || $menu_style == 'fixed') { ?>
 		div#body_header {
 			position: relative;
 			z-index: 1;
diff --git a/themes/default/template.php b/themes/default/template.php
index 6f71dab807..2518eba074 100644
--- a/themes/default/template.php
+++ b/themes/default/template.php
@@ -244,10 +244,11 @@
 		//domain selector controls
 			{if $domain_selector_enabled}
 				{literal}
-				$('#header_domain_selector_domain').on('click', function() { event.preventDefault(); show_domains(); });
+				$('.header_domain_selector_domain').on('click', function() { event.preventDefault(); show_domains(); });
 				$('#domains_hide').on('click', function() { hide_domains(); });
 
 				function show_domains() {
+					$('#body_header_user_menu').fadeOut(200);
 					search_domains('domains_list');
 
 					$('#domains_visible').val(1);
@@ -683,22 +684,30 @@
 						{literal}
 					}
 				});
+				{/literal}
+			{/if}
 
-				//hide an open user menu in the body header on scroll
+		//side/fixed menu: hide an open user menu in the body header or menu on scroll
+			{if $settings.theme.menu_style == 'side' || $settings.theme.menu_style == 'fixed' }
+				{literal}
 				$(window).on('scroll', function() {
 					$('#body_header_user_menu').fadeOut(200);
 				});
-
-				//create function to mimic toggling fade and slide at the same time
-				(function($){
-					$.fn.toggleFadeSlide = function(speed = 200, easing, callback){
-						return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
-					};
-				})(jQuery);
-
+				$('div#main_content').on('click', function() {
+					$('#body_header_user_menu').fadeOut(200);
+				});
 				{/literal}
 			{/if}
 
+		//create function to mimic toggling fade and slide at the same time
+			{literal}
+			(function($){
+				$.fn.toggleFadeSlide = function(speed = 200, easing, callback){
+					return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
+				};
+			})(jQuery);
+			{/literal}
+
 	{literal}
 	}); //document ready end
 	{/literal}