mirror of
https://github.com/fusionpbx/fusionpbx.git
synced 2026-01-06 11:43:50 +00:00
Theme: Side Menu updates.
This commit is contained in:
Nate
@@ -1711,6 +1711,22 @@
|
||||
$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the default state of the Side Menu: expanded (pinned) or contracted (unpinned).";
|
||||
$y++;
|
||||
$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "05e0318f-4344-4d40-9690-fb5cbcf20a2d";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "menu_side_state_user";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_name'] = "boolean";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_value'] = "true";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_description'] = "Enable Side Menu toggle icon allowing users to choose their own state preference (contracted or expanded).";
|
||||
$y++;
|
||||
$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "8ee8012a-da8c-483a-996d-d81b30a8bbea";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "menu_side_toggle";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_value'] = "hover";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set whether the Side Menu opens & closes with a click (focus) or by mouse over/out (hover).";
|
||||
$y++;
|
||||
$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "97a620e1-d7b2-4550-8648-726c3029143d";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
|
||||
$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "action_bar_border_top";
|
||||
|
||||
@@ -516,12 +516,22 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
|
||||
}
|
||||
|
||||
/* menu side logo */
|
||||
a.menu_brand_image {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
a.menu_brand_image:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img#menu_brand_image_contracted {
|
||||
border: none;
|
||||
width: auto;
|
||||
max-height: 30px;
|
||||
max-width: 30px;
|
||||
margin-right: 10px;
|
||||
max-height: 20px;
|
||||
max-width: 20px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
img#menu_brand_image_expanded {
|
||||
@@ -529,18 +539,19 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
|
||||
height: auto;
|
||||
max-width: 145px;
|
||||
max-height: 35px;
|
||||
margin-top: -3px;
|
||||
margin-left: -6px;
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
/* menu brand text */
|
||||
.menu_brand_text {
|
||||
a.menu_brand_text {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: <?php echo ($_SESSION['theme']['menu_brand_text_color']['text'] != '') ? $_SESSION['theme']['menu_brand_text_color']['text'] : 'rgba(255,255,255,0.80)'; ?>;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu_brand_text:hover {
|
||||
a.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;
|
||||
}
|
||||
@@ -574,7 +585,6 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
|
||||
|
||||
div#menu_side_container > a.menu_side_item_main,
|
||||
div#menu_side_container > div > a.menu_side_item_main,
|
||||
div#menu_side_container > div#menu_side_brand_container a.menu_side_item_main,
|
||||
div#menu_side_container > div#menu_side_control_container a.menu_side_item_main {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -594,10 +604,7 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
|
||||
div#menu_side_container > div > a.menu_side_item_main:active,
|
||||
div#menu_side_container > div#menu_side_control_container > div a.menu_side_item_main:hover,
|
||||
div#menu_side_container > div#menu_side_control_container > div a.menu_side_item_main:focus,
|
||||
div#menu_side_container > div#menu_side_control_container > div a.menu_side_item_main:active,
|
||||
div#menu_side_container > div#menu_side_brand_container > div a.menu_side_item_main:hover,
|
||||
div#menu_side_container > div#menu_side_brand_container > div a.menu_side_item_main:focus,
|
||||
div#menu_side_container > div#menu_side_brand_container > div a.menu_side_item_main:active {
|
||||
div#menu_side_container > div#menu_side_control_container > div a.menu_side_item_main:active {
|
||||
color: <?php echo ($_SESSION['theme']['menu_main_text_color_hover']['text'] != '') ? $_SESSION['theme']['menu_main_text_color_hover']['text'] : '#fd9c03'; ?>;
|
||||
background: <?php echo ($_SESSION['theme']['menu_main_background_color_hover']['text'] != '') ? $_SESSION['theme']['menu_main_background_color_hover']['text'] : 'rgba(0,0,0,1.0)'; ?>;
|
||||
text-decoration: none;
|
||||
@@ -615,6 +622,12 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
a.menu_side_item_sub {
|
||||
padding: 8px 20px 8px 45px;
|
||||
}
|
||||
}
|
||||
|
||||
a.menu_side_item_sub:hover,
|
||||
a.menu_side_item_sub:focus,
|
||||
a.menu_side_item_sub:active {
|
||||
@@ -628,6 +641,32 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div#content_container {
|
||||
padding: 0;
|
||||
padding-top: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
div#content_container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
div#content_container {
|
||||
<?php
|
||||
if ($_SESSION['theme']['menu_side_state']['text'] == 'expanded') {
|
||||
$content_container_width = is_numeric($_SESSION['theme']['menu_side_width_expanded']['text']) ? $_SESSION['theme']['menu_side_width_expanded']['text'] : '225';
|
||||
}
|
||||
else {
|
||||
$content_container_width = is_numeric($_SESSION['theme']['menu_side_width_contracted']['text']) ? $_SESSION['theme']['menu_side_width_contracted']['text'] : '60';
|
||||
}
|
||||
?>
|
||||
width: calc(100% - <?php echo $content_container_width; ?>px);
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* BUTTONS ********************************************************************/
|
||||
|
||||
/* buttons */
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
|
||||
|
||||
{*//external css files *}
|
||||
<link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap.min.css.php'>
|
||||
@@ -102,17 +102,22 @@
|
||||
{/literal}
|
||||
{else if $settings.theme.menu_brand_type == 'text'}
|
||||
{literal}
|
||||
$('.menu_brand_text').fadeOut(180);
|
||||
$('.menu_brand_text').hide();
|
||||
{/literal}
|
||||
{/if}
|
||||
{literal}
|
||||
$('#menu_side_container').animate({ width: '{/literal}{$settings.theme.menu_side_width_contracted}{literal}px' }, 250);
|
||||
$('#content_container').animate({ width: $(window).width() - {/literal}{$settings.theme.menu_side_width_contracted}{literal} }, 250, function() {
|
||||
$('.menu_side_control_state').hide();
|
||||
$('#menu_side_container').animate({ width: '{/literal}{$settings.theme.menu_side_width_contracted}{literal}px' }, 180, function() {
|
||||
menu_side_state_current = 'contracted';
|
||||
});
|
||||
|
||||
if ($(window).width() >= 576) {
|
||||
$('#content_container').animate({ width: $(window).width() - {/literal}{$settings.theme.menu_side_width_contracted}{literal} }, 250);
|
||||
}
|
||||
$('.menu_side_contract').hide();
|
||||
$('.menu_side_expand').show();
|
||||
if ($(window).width() < 576) {
|
||||
$('#menu_side_container').hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -129,12 +134,11 @@
|
||||
{/literal}
|
||||
{/if}
|
||||
{literal}
|
||||
$('#menu_side_container').animate({ width: '{/literal}{$settings.theme.menu_side_width_expanded}{literal}px' }, 250, function() {
|
||||
$('.menu_side_contract').fadeIn(180);
|
||||
});
|
||||
$('#content_container').animate({ width: $(window).width() - {/literal}{$settings.theme.menu_side_width_expanded}{literal} }, 250, function() {
|
||||
$('.menu_brand_text').fadeIn(180);
|
||||
$('.menu_side_item_title').fadeIn(180);
|
||||
$('.menu_side_expand').hide();
|
||||
$('.menu_side_contract').show();
|
||||
$('#menu_side_container').show();
|
||||
var menu_side_container_width = $(window).width() < 576 ? $(window).width() : '{/literal}{$settings.theme.menu_side_width_expanded}{literal}px';
|
||||
$('#menu_side_container').animate({ width: menu_side_container_width }, 180, function() {
|
||||
{/literal}
|
||||
{if $settings.theme.menu_brand_type == 'image' || $settings.theme.menu_brand_type == ''}
|
||||
{literal}
|
||||
@@ -142,9 +146,15 @@
|
||||
{/literal}
|
||||
{/if}
|
||||
{literal}
|
||||
menu_side_state_current = 'expanded';
|
||||
$('.menu_side_control_state').fadeIn(180);
|
||||
$('.menu_brand_text').fadeIn(180);
|
||||
$('.menu_side_item_title').fadeIn(180, function() {
|
||||
menu_side_state_current = 'expanded';
|
||||
});
|
||||
});
|
||||
$('.menu_side_expand').hide();
|
||||
if ($(window).width() >= 576) {
|
||||
$('#content_container').animate({ width: $(window).width() - {/literal}{$settings.theme.menu_side_width_expanded}{literal} }, 250);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -561,7 +571,27 @@
|
||||
{if $settings.theme.menu_style == 'side'}
|
||||
{literal}
|
||||
$(window).on('resizeEnd', function() {
|
||||
$('#content_container').animate({ width: $(window).width() - $('#menu_side_container').width() }, 200);
|
||||
if ($(window).width() < 576) {
|
||||
if (menu_side_state_current == 'contracted') {
|
||||
$('#menu_side_container').hide();
|
||||
}
|
||||
if (menu_side_state_current == 'expanded') {
|
||||
$('#menu_side_container').show();
|
||||
$('#menu_side_container').animate({ width: $(window).width() }, 180);
|
||||
}
|
||||
$('#content_container').animate({ width: $(window).width() }, 100);
|
||||
}
|
||||
else {
|
||||
$('#menu_side_container').show();
|
||||
if (menu_side_state_current == 'expanded') {
|
||||
$('#menu_side_container').animate({ width: '{/literal}{$settings.theme.menu_side_width_expanded}{literal}px' }, 180, function() {
|
||||
$('#content_container').animate({ width: $(window).width() - $('#menu_side_container').width() }, 100);
|
||||
});
|
||||
}
|
||||
else {
|
||||
$('#content_container').animate({ width: $(window).width() - $('#menu_side_container').width() }, 100);
|
||||
}
|
||||
}
|
||||
});
|
||||
{/literal}
|
||||
{/if}
|
||||
@@ -933,7 +963,7 @@
|
||||
{if $settings.theme.menu_style == 'inline'}{$logo}{/if}
|
||||
{$menu}
|
||||
{if $settings.theme.menu_style == 'inline' || $settings.theme.menu_style == 'static'}<br />{/if}
|
||||
{if $settings.theme.menu_style == 'side'}<input type='hidden' id='menu_side_state_current' value=''>{/if}
|
||||
{if $settings.theme.menu_style == 'side'}<input type='hidden' id='menu_side_state_current' value='{$menu_side_state}'>{/if}
|
||||
{else} {*//default: fixed *}
|
||||
{$menu}
|
||||
{$container_open}
|
||||
|
||||
Reference in New Issue
Block a user