Theme: Side Menu Enhancements

This commit is contained in:
Nate 2019-03-26 14:43:31 -06:00
parent 7112aed941
commit 299a0141ff
6 changed files with 238 additions and 73 deletions

View File

@ -661,6 +661,26 @@ $text['label-messages']['ru-ru'] = "";
$text['label-messages']['sv-se'] = "";
$text['label-messages']['uk-ua'] = "";
$text['label-image_text']['en-us'] = "Image & Text";
$text['label-image_text']['ar-eg'] = "";
$text['label-image_text']['de-at'] = "";
$text['label-image_text']['de-ch'] = "";
$text['label-image_text']['de-de'] = "";
$text['label-image_text']['es-cl'] = "";
$text['label-image_text']['es-mx'] = "";
$text['label-image_text']['fr-ca'] = "";
$text['label-image_text']['fr-fr'] = "";
$text['label-image_text']['he-il'] = "";
$text['label-image_text']['it-it'] = "";
$text['label-image_text']['nl-nl'] = "";
$text['label-image_text']['pl-pl'] = "";
$text['label-image_text']['pt-br'] = "";
$text['label-image_text']['pt-pt'] = "";
$text['label-image_text']['ro-ro'] = "";
$text['label-image_text']['ru-ru'] = "";
$text['label-image_text']['sv-se'] = "";
$text['label-image_text']['uk-ua'] = "";
$text['header-default_settings']['en-us'] = "Default Settings";
$text['header-default_settings']['ar-eg'] = "";
$text['header-default_settings']['de-at'] = "Standard Einstellungen"; //copied from de-de

View File

@ -534,6 +534,7 @@
echo " <select class='formfld' id='default_setting_value' name='default_setting_value'>\n";
echo " <option value='image' ".(($default_setting_value == "image") ? "selected='selected'" : null).">".$text['label-image']."</option>\n";
echo " <option value='text' ".(($default_setting_value == "text") ? "selected='selected'" : null).">".$text['label-text']."</option>\n";
echo " <option value='image_text' ".(($default_setting_value == "image_text") ? "selected='selected'" : null).">".$text['label-image_text']."</option>\n";
echo " <option value='none' ".(($default_setting_value == "none") ? "selected='selected'" : null).">".$text['label-none']."</option>\n";
echo " </select>\n";
}

View File

@ -72,7 +72,9 @@
echo " <b>".$text['header-user_dashboard']."</b><br />";
echo " </td>\n";
echo " <td valign='top' style='text-align: right; white-space: nowrap;'>\n";
echo " ".$text['label-welcome']." <a href='".PROJECT_PATH."/core/users/user_edit.php?id=user'>".$_SESSION["username"]."</a>";
if ($_SESSION['theme']['menu_style']['text'] != 'side') {
echo " ".$text['label-welcome']." <a href='".PROJECT_PATH."/core/users/user_edit.php?id=user'>".$_SESSION["username"]."</a>";
}
echo " </td>\n";
echo " </tr>\n";
echo " <tr>\n";

View File

@ -106,7 +106,6 @@ $text['theme-button-close']['sv-se'] = "Stänga";
$text['theme-button-close']['uk-ua'] = "Близько";
$text['theme-button-close']['tr-tr'] = "Kapat";
$text['theme-label-search']['en-us'] = "Search...";
$text['theme-label-search']['ar-eg'] = "";
$text['theme-label-search']['de-at'] = "Suchen..."; //copied from de-de
@ -170,4 +169,46 @@ $text['theme-label-all_rights_reserved']['sv-se'] = "All rights reserved.";
$text['theme-label-all_rights_reserved']['uk-ua'] = "";
$text['theme-label-all_rights_reserved']['tr-tr'] = "Tüm hakları saklıdır.";
?>
$text['theme-label-user']['en-us'] = "User";
$text['theme-label-user']['ar-eg'] = "";
$text['theme-label-user']['de-at'] = "Benutzer"; //copied from de-de
$text['theme-label-user']['de-ch'] = "Benutzer"; //copied from de-de
$text['theme-label-user']['de-de'] = "Benutzer";
$text['theme-label-user']['es-cl'] = "Usuario";
$text['theme-label-user']['es-mx'] = "Usuario"; //copied from es-cl
$text['theme-label-user']['fr-ca'] = "Utilisateur"; //copied from fr-fr
$text['theme-label-user']['fr-fr'] = "Utilisateur";
$text['theme-label-user']['he-il'] = "";
$text['theme-label-user']['it-it'] = "Utente";
$text['theme-label-user']['nl-nl'] = "";
$text['theme-label-user']['pl-pl'] = "Użytkownicy";
$text['theme-label-user']['pt-br'] = "Usuário";
$text['theme-label-user']['pt-pt'] = "Utilizadore";
$text['theme-label-user']['ro-ro'] = "";
$text['theme-label-user']['ru-ru'] = "Пользователь";
$text['theme-label-user']['sv-se'] = "Användare";
$text['theme-label-user']['uk-ua'] = "Користувачі";
$text['theme-label-user']['tr-tr'] = "Користувачі";
$text['theme-label-domain']['en-us'] = "Domain";
$text['theme-label-domain']['ar-eg'] = "النطاق";
$text['theme-label-domain']['de-at'] = "Domäne"; //copied from de-de
$text['theme-label-domain']['de-ch'] = "Domäne"; //copied from de-de
$text['theme-label-domain']['de-de'] = "Domäne";
$text['theme-label-domain']['es-cl'] = "Dominio";
$text['theme-label-domain']['es-mx'] = "Dominio"; //copied from es-cl
$text['theme-label-domain']['fr-ca'] = "Domaine"; //copied from fr-fr
$text['theme-label-domain']['fr-fr'] = "Domaine";
$text['theme-label-domain']['he-il'] = "דומיין";
$text['theme-label-domain']['it-it'] = "Dominio";
$text['theme-label-domain']['nl-nl'] = "";
$text['theme-label-domain']['pl-pl'] = "Domena";
$text['theme-label-domain']['pt-br'] = "Dominio";
$text['theme-label-domain']['pt-pt'] = "Domínio";
$text['theme-label-domain']['ro-ro'] = "Domeniu";
$text['theme-label-domain']['ru-ru'] = "Домен";
$text['theme-label-domain']['sv-se'] = "Domän";
$text['theme-label-domain']['uk-ua'] = "Домен";
$text['theme-label-domain']['tr-tr'] = "Alan Adı";
?>

View File

@ -387,6 +387,13 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
text-decoration: none;
}
a#header_domain_selector_domain:hover,
a#header_domain_selector_domain:focus,
a#header_domain_selector_domain:active {
text-decoration: none;
cursor: pointer;
}
/* logout icon */
a.logout_icon {
display: inline-block;
@ -396,6 +403,15 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
margin-left: 10px;
}
a#header_logout_icon {
display: inline-block;
font-size: 11pt;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
a.logout_icon:hover,
a.logout_icon:focus,
a.logout_icon:active {
@ -433,7 +449,7 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
position: fixed;
top: 0;
left: 0;
width: 225px;
width: <?php echo is_numeric($_SESSION['theme']['menu_side_width_contracted']['text']) ? $_SESSION['theme']['menu_side_width_contracted']['text'] : '55'; ?>px;
height: 100%;
overflow: auto;
<?php if ($_SESSION['theme']['menu_main_background_image']['text'] != '') { ?>
@ -490,7 +506,7 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
width: auto;
max-height: 30px;
max-width: 185px;
margin-right: 10px;
margin-right: 5px;
}
/* menu brand text */
@ -502,6 +518,7 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
.menu_brand_text:hover {
color: <?php echo ($_SESSION['theme']['menu_brand_text_color_hover']['text'] != '') ? $_SESSION['theme']['menu_brand_text_color_hover']['text'] : 'rgba(255,255,255,1.0)'; ?>;
text-decoration: none;
}
a.menu_side_item_main {
@ -543,6 +560,10 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
text-decoration: none;
}
a.menu_side_toggle {
padding: 10px;
cursor: pointer;
}
/* BUTTONS ********************************************************************/
@ -882,6 +903,12 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
}
}
div#content_header {
padding: 10px;
margin-top: 5px;
height: 40px;
}
/* GENERAL ELEMENTS *****************************************************************/
img {

View File

@ -89,6 +89,38 @@
}
}
//toggle side menu visibility (if enabled)
var menu_side_state = 'contracted';
function menu_side_contract() {
$('.menu_side_sub').slideUp(180);
<?php if ($_SESSION['theme']['menu_brand_type']['text'] != 'text') { ?>
$('.menu_brand_text').hide();
<?php } ?>
$('.menu_side_item_title').hide();
$('#menu_brand_image').animate({ width: '20px', 'margin-left': '-2px' }, 250);
$('#menu_side_container').animate({ width: '<?php echo is_numeric($_SESSION['theme']['menu_side_width_contracted']['text']) ? $_SESSION['theme']['menu_side_width_contracted']['text'] : '55'; ?>px' }, 250);
$('#content_container').animate({ width: $(window).width() - <?php echo is_numeric($_SESSION['theme']['menu_side_width_contracted']['text']) ? $_SESSION['theme']['menu_side_width_contracted']['text'] : '55'; ?> }, 250, function() {
menu_side_state = 'contracted';
});
$('.menu_side_contract').hide();
$('.menu_side_expand').show();
}
function menu_side_expand() {
$('#menu_brand_image').animate({ width: '30px', 'margin-left': '0' }, 250);
$('#menu_side_container').animate({ width: '<?php echo is_numeric($_SESSION['theme']['menu_side_width_expanded']['text']) ? $_SESSION['theme']['menu_side_width_expanded']['text'] : '225'; ?>px' }, 250);
$('#content_container').animate({ width: $(window).width() - <?php echo is_numeric($_SESSION['theme']['menu_side_width_expanded']['text']) ? $_SESSION['theme']['menu_side_width_expanded']['text'] : '225'; ?> }, 250, function() {
<?php if ($_SESSION['theme']['menu_brand_type']['text'] != 'text') { ?>
$('.menu_brand_text').fadeIn(180);
<?php } ?>
$('.menu_side_item_title').fadeIn(180);
menu_side_state = 'expanded';
});
$('.menu_side_expand').hide();
$('.menu_side_contract').show();
}
$(document).ready(function() {
<?php echo message::html(true, " "); ?>
@ -105,6 +137,7 @@
//domain selector controls
$(".domain_selector_domain").click(function() { show_domains(); });
$("#header_domain_selector_domain").click(function() { show_domains(); });
$("#domains_hide").click(function() { hide_domains(); });
function show_domains() {
@ -222,6 +255,18 @@
});
<?php } ?>
<?php if ($_SESSION['theme']['menu_style']['text'] == 'side') { ?>
//create resizeEnd event
$(window).resize(function() {
if (this.resizeTO) { clearTimeout(this.resizeTO); }
this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 180);
});
//side menu: adjust content container width after window resize
$(window).on('resizeEnd', function() {
$('#content_container').animate({ width: $(window).width() - $('#menu_side_container').width() }, 200);
});
<?php } ?>
});
//audio playback functions
@ -365,11 +410,11 @@
// qr code container for contacts
echo "<div id='qr_code_container' style='display: none;' onclick='$(this).fadeOut(400);'>";
echo " <table cellpadding='0' cellspacing='0' border='0' width='100%' height='100%'><tr><td align='center' valign='middle'>";
echo " <span id='qr_code' onclick=\"$('#qr_code_container').fadeOut(400);\"></span>";
echo " </td></tr></table>";
echo "</div>";
echo "<div id='qr_code_container' style='display: none;' onclick='$(this).fadeOut(400);'>\n";
echo " <table cellpadding='0' cellspacing='0' border='0' width='100%' height='100%'><tr><td align='center' valign='middle'>\n";
echo " <span id='qr_code' onclick=\"$('#qr_code_container').fadeOut(400);\"></span>\n";
echo " </td></tr></table>\n";
echo "</div>\n";
if (!$default_login) {
@ -533,13 +578,12 @@
$menu_style = ($_SESSION['theme']['menu_style']['text'] != '') ? $_SESSION['theme']['menu_style']['text'] : 'fixed';
$menu_position = ($_SESSION['theme']['menu_position']['text']) ? $_SESSION['theme']['menu_position']['text'] : 'top';
$open_container = "<div class='container-fluid' style='padding: 0;' align='center'>";
switch ($menu_style) {
case 'inline':
$logo_align = ($_SESSION['theme']['logo_align']['text'] != '') ? $_SESSION['theme']['logo_align']['text'] : 'left';
$logo_style = ($_SESSION['theme']['logo_style']['text'] != '') ? $_SESSION['theme']['logo_style']['text'] : '';
echo str_replace("center", $logo_align, $open_container);
echo "<div class='container-fluid' style='padding: 0;' align='".$logo_align."'>\n";
if ($_SERVER['PHP_SELF'] != PROJECT_PATH."/core/install/install.php") {
$logo = ($_SESSION['theme']['logo']['text'] != '') ? $_SESSION['theme']['logo']['text'] : PROJECT_PATH."/themes/default/images/logo.png";
echo "<a href='".((PROJECT_PATH != '') ? PROJECT_PATH : '/')."'><img src='".$logo."' style='padding: 15px 20px;$logo_style'></a>";
@ -548,74 +592,104 @@
show_menu($menu_array, $menu_style, $menu_position);
break;
case 'static':
echo $open_container;
echo "<div class='container-fluid' style='padding: 0;' align='center'>\n";
show_menu($menu_array, $menu_style, $menu_position);
break;
case 'fixed':
show_menu($menu_array, $menu_style, $menu_position);
echo $open_container;
echo "<div class='container-fluid' style='padding: 0;' align='center'>\n";
break;
case 'side':
echo "<div id='menu_side_container'>";
//menu brand image/text
echo "<div id='menu_side_brand_container'>\n";
//define the menu brand link
if (strlen(PROJECT_PATH) > 0) {
$menu_brand_link = PROJECT_PATH;
}
else if (!$default_login) {
$menu_brand_link = '/';
}
//show the menu brand
$menu_brand_image = ($_SESSION['theme']['menu_brand_image']['text'] != '') ? escape($_SESSION['theme']['menu_brand_image']['text']) : PROJECT_PATH."/themes/default/images/logo.png";
$menu_brand_text = ($_SESSION['theme']['menu_brand_text']['text'] != '') ? escape($_SESSION['theme']['menu_brand_text']['text']) : "FusionPBX";
if ($_SESSION['theme']['menu_brand_type']['text'] == 'image' || $_SESSION['theme']['menu_brand_type']['text'] == '') {
echo "<a href='".$menu_brand_link."' style='text-decoration: none;'>";
echo "<img id='menu_brand_image' src='".$menu_brand_image."' title=\"".escape($menu_brand_text)."\">";
echo "</a>";
}
else if ($_SESSION['theme']['menu_brand_type']['text'] == 'both') {
echo "<a href='".$menu_brand_link."' style='text-decoration: none;'>";
echo "<img id='menu_brand_image' src='".$menu_brand_image."' title=\"".escape($menu_brand_text)."\">";
echo "<span class='menu_brand_text'>".$menu_brand_text."</span>";
echo "</a>";
}
else if ($_SESSION['theme']['menu_brand_type']['text'] == 'text') {
echo "<a class='menu_brand_text' href=\"".$menu_brand_link."\">".$menu_brand_text."22</a>\n";
}
echo "</div>\n";
//main menu items
if (is_array($menu_array) && sizeof($menu_array) != 0) {
foreach ($menu_array as $menu_index_main => $menu_item_main) {
echo "<a class='menu_side_item_main' onclick=\"$('#sub_".$menu_item_main['menu_item_uuid']."').slideToggle(180, function() { if (!$(this).is(':hidden')) { $('.menu_side_sub').not($(this)).slideUp(180); } });\">";
if ($menu_item_main['menu_item_icon'] != '') {
echo "<i class='glyphicon ".$menu_item_main['menu_item_icon']."' style='z-index: 99800; padding-right: 8px;'></i>";
}
echo $menu_item_main['menu_language_title'];
echo "</a>\n";
//sub menu items
if (is_array($menu_item_main['menu_items']) && sizeof($menu_item_main['menu_items']) != 0) {
echo "<div id='sub_".$menu_item_main['menu_item_uuid']."' class='menu_side_sub' style='display: none;'>\n";
foreach ($menu_item_main['menu_items'] as $menu_index_sub => $menu_item_sub) {
echo "<a class='menu_side_item_sub' ".($menu_item_sub['menu_item_category'] == 'external' ? "target='_blank'" : null)." href='".$menu_item_sub['menu_item_link']."'>";
//if ($menu_item_main['menu_item_icon'] != '') {
// echo "<i class='glyphicon ".$menu_item_main['menu_item_icon']."' style='padding-right: 8px;'></i>";
//}
echo $menu_item_sub['menu_language_title'];
echo "</a>\n";
/*
if ($menu_index_sub == sizeof($menu_item_main['menu_items'])) {
echo "<div style='height: 15px;'></div>\n";
}
*/
}
echo "</div>\n";
}
}
echo "<div style='height: 100px;'></div>\n";
echo "<div id='menu_side_container'>\n";
//menu brand image and/or text
if ($_SESSION['theme']['menu_brand_type']['text'] == 'none') {
echo "<div style='margin-bottom: 20px;'>\n";
echo "<a class='menu_side_item_main menu_side_contract' onclick='menu_side_contract();' style='display: none;'><i class='glyphicon glyphicon-menu-left' style='z-index: 99800; padding-right: 8px;'></i></a>";
echo "<a class='menu_side_item_main menu_side_expand' onclick='menu_side_expand();'><i class='glyphicon glyphicon-menu-right' style='z-index: 99800; padding-right: 8px;'></i></a>";
echo "</div>\n";
}
echo "</div>";
echo "<div style='padding: 0; width: calc(100% - 225px); float: right; padding-top: 30px; text-align: center;'>"; // $open_container (modified)
else {
echo "<div id='menu_side_brand_container'>\n";
//define the menu brand link
if (strlen(PROJECT_PATH) > 0) {
$menu_brand_link = PROJECT_PATH;
}
else if (!$default_login) {
$menu_brand_link = '/';
}
//show the menu brand image and/or text
$menu_brand_image = ($_SESSION['theme']['menu_brand_image']['text'] != '') ? escape($_SESSION['theme']['menu_brand_image']['text']) : PROJECT_PATH."/themes/default/images/logo.png";
$menu_brand_text = ($_SESSION['theme']['menu_brand_text']['text'] != '') ? escape($_SESSION['theme']['menu_brand_text']['text']) : "FusionPBX";
if ($_SESSION['theme']['menu_brand_type']['text'] == 'image' || $_SESSION['theme']['menu_brand_type']['text'] == '') {
echo "<a href='".$menu_brand_link."' style='text-decoration: none;'>";
echo "<img id='menu_brand_image' style='width: 20px; margin-left: -2px; margin-top: -5px;' src='".$menu_brand_image."' title=\"".escape($menu_brand_text)."\">";
echo "</a>\n";
}
else if ($_SESSION['theme']['menu_brand_type']['text'] == 'image_text') {
echo "<a href='".$menu_brand_link."' style='text-decoration: none;'>";
echo "<img id='menu_brand_image' style='width: 20px; margin-left: -2px; margin-top: -5px;' src='".$menu_brand_image."' title=\"".escape($menu_brand_text)."\">";
echo "<span class='menu_brand_text' style='display: none;'>".$menu_brand_text."</span>";
echo "</a>\n";
}
else if ($_SESSION['theme']['menu_brand_type']['text'] == 'text') {
echo "<a class='menu_brand_text' href=\"".$menu_brand_link."\">".$menu_brand_text."</a>\n";
}
echo "</div>\n";
}
//main menu items
if (is_array($menu_array) && sizeof($menu_array) != 0) {
foreach ($menu_array as $menu_index_main => $menu_item_main) {
echo "<a class='menu_side_item_main' onclick=\"menu_side_expand(); $('#sub_".$menu_item_main['menu_item_uuid']."').slideToggle(180, function() { if (!$(this).is(':hidden')) { $('.menu_side_sub').not($(this)).slideUp(180); } });\">";
if ($menu_item_main['menu_item_icon'] != '') {
echo "<i class='glyphicon ".$menu_item_main['menu_item_icon']."' style='z-index: 99800; padding-right: 8px;'></i>";
}
echo "<span class='menu_side_item_title' style='display: none;'>".$menu_item_main['menu_language_title']."</span>";
echo "</a>\n";
//sub menu items
if (is_array($menu_item_main['menu_items']) && sizeof($menu_item_main['menu_items']) != 0) {
echo "<div id='sub_".$menu_item_main['menu_item_uuid']."' class='menu_side_sub' style='display: none;'>\n";
foreach ($menu_item_main['menu_items'] as $menu_index_sub => $menu_item_sub) {
echo "<a class='menu_side_item_sub' ".($menu_item_sub['menu_item_category'] == 'external' ? "target='_blank'" : null)." href='".$menu_item_sub['menu_item_link']."'>";
echo "<span class='menu_side_item_title' style='display: none;'>".$menu_item_sub['menu_language_title']."</span>";
echo "</a>\n";
}
echo "</div>\n";
}
}
echo "<div style='height: 100px;'></div>\n";
}
echo "</div>\n";
echo "<div id='content_container' style='padding: 0; width: calc(100% - ".(is_numeric($_SESSION['theme']['menu_side_width_contracted']['text']) ? $_SESSION['theme']['menu_side_width_contracted']['text'] : '55')."px); float: right; padding-top: 0px; text-align: center;'>\n";
echo " <div id='content_header'>\n";
//header: left
//menu toggle buttons
if ($_SESSION['theme']['menu_brand_type']['text'] != 'none') {
echo "<div style='float: left;'>\n";
echo "<a class='menu_side_toggle menu_side_contract' onclick='menu_side_contract();' style='display: none;'><i class='glyphicon glyphicon-menu-left'></i></a>";
echo "<a class='menu_side_toggle menu_side_expand' onclick='menu_side_expand();'><i class='glyphicon glyphicon-menu-right'></i></a>";
echo "</div>\n";
}
//header: right
echo "<span class='pull-right' style='white-space: nowrap;'>";
//current user
echo "<span style='display: inline-block; padding-right: 20px; font-size: 85%;'>\n";
echo "<strong>".$text['theme-label-user']."</strong>: ";
echo "<a href='".PROJECT_PATH."/core/users/user_edit.php?id=user'>".(count($_SESSION['domains']) > 1 && permission_exists('domain_select') ? $_SESSION['username'].'@'.$_SESSION["user_context"] : $_SESSION['username'])."</a>";
echo "</span>\n";
//domain name/selector (sm+)
if ($_SESSION["username"] != '' && permission_exists("domain_select") && count($_SESSION['domains']) > 1 && $_SESSION['theme']['domain_visible']['text'] == 'true') {
echo "<span style='display: inline-block; padding-right: 10px; font-size: 85%;'>\n";
echo "<strong>".$text['theme-label-domain']."</strong>: ";
echo "<a id='header_domain_selector_domain' title='".$text['theme-label-open_selector']."'>".escape($_SESSION['domain_name'])."</a>";
echo "</span>\n";
}
//logout icon
if ($_SESSION['username'] != '' && $_SESSION['theme']['logout_icon_visible']['text'] == "true") {
echo "<a id='header_logout_icon' href='".PROJECT_PATH."/logout.php' title=\"".$text['theme-label-logout']."\" onclick=\"return confirm('".$text['theme-confirm-logout']."')\"><span class='glyphicon glyphicon-log-out'></span></a>";
}
echo "</span>";
echo " </div>\n";
break;
}
?>