Add subcontent for shadow and background color

Add css options for background color
This commit is contained in:
FusionPBX
2024-09-01 02:18:35 -06:00
committed by GitHub
parent 906b3edf03
commit 4443519aa1
8 changed files with 190 additions and 96 deletions

View File

@@ -63,6 +63,8 @@
<source src="{$background_video}" type="video/mp4">
</video>
{/if}
<div id='background-image'></div>
<div id='background-color'></div>
<div id='page' align='center'>
<div id='message_container'></div>
<div id='default_login'>

View File

@@ -63,6 +63,8 @@
<source src="{$background_video}" type="video/mp4">
</video>
{/if}
<div id='background-image'></div>
<div id='background-color'></div>
<div id='page' align='center'>
<div id='message_container'></div>
<div id='default_login'>

View File

@@ -63,6 +63,8 @@
<source src="{$background_video}" type="video/mp4">
</video>
{/if}
<div id='background-image'></div>
<div id='background-color'></div>
<div id='page' align='center'>
<div id='message_container'></div>
<div id='default_login'>

View File

@@ -15,6 +15,8 @@
<source src="{$background_video}" type="video/mp4">
</video>
{/if}
<div id='background-image'></div>
<div id='background-color'></div>
<div id='page' align='center'>
<div id='default_login' style='max-width: 400px;'>
<a href='{$project_path}/'><img id='login_logo' style='width: {$login_logo_width}; height: {$login_logo_height};' src='{$login_logo_source}' /></a><br />

View File

@@ -63,6 +63,8 @@
<source src="{$background_video}" type="video/mp4">
</video>
{/if}
<div id='background-image'></div>
<div id='background-color'></div>
<div id='page' align='center'>
<div id='message_container'></div>
<div id='default_login'>

View File

@@ -880,6 +880,22 @@
$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the bottom border (dividing line) color (and opacity) of table data rows.";
$y++;
$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "c909eb3f-3ecf-48c6-aad1-aafbaf421a5d";
$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "subcontent_shadow_color";
$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
$apps[$x]['default_settings'][$y]['default_setting_value'] = "#737983";
$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the color (and opacity) of the subcontent boxes.";
$y++;
$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "66d54130-db92-4b82-926c-96ddfcf72659";
$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "subcontent_background_color";
$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
$apps[$x]['default_settings'][$y]['default_setting_value'] = "#ffffff";
$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
$apps[$x]['default_settings'][$y]['default_setting_description'] = "background color of the subcontent box.";
$y++;
$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "3b46602c-c736-43ec-a4b5-c733110dbe57";
$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "dashboard_border_color";

View File

@@ -242,6 +242,8 @@ $dashboard_footer_background_color = $_SESSION['theme']['dashboard_footer_backgr
$dashboard_footer_background_color_hover = $_SESSION['theme']['dashboard_footer_background_color_hover']['text'] ?? color_adjust($dashboard_footer_background_color, 0.02);
$dashboard_footer_dots_color = $_SESSION['theme']['dashboard_footer_dots_color']['text'] ?? '#a4aebf';
$dashboard_footer_dots_color_hover = $_SESSION['theme']['dashboard_footer_dots_color_hover']['text'] ?? $dashboard_footer_dots_color;
$subcontent_shadow_color = $_SESSION['theme']['subcontent_shadow_color']['text'] ?? $dashboard_shadow_color;
$subcontent_background_color = $_SESSION['theme']['subcontent_background_color']['text'] ?? '';
$action_bar_border_top = $_SESSION['theme']['action_bar_border_top']['text'] ?? 0;
$action_bar_border_right = $_SESSION['theme']['action_bar_border_right']['text'] ?? 0;
$action_bar_border_bottom = $_SESSION['theme']['action_bar_border_bottom']['text'] ?? 0;
@@ -312,36 +314,42 @@ if (!empty($_SESSION['theme'])) {
//determine which background image/color settings to use (login or standard)
$background_images_enabled = false;
if (!empty($_SESSION['username'])) {
//logged in - use standard background images/colors
//logged in - use standard background images
if (!empty($_SESSION['theme']['background_image_enabled']) && $_SESSION['theme']['background_image_enabled']['boolean'] == 'true' && is_array($_SESSION['theme']['background_image'])) {
$background_images_enabled = true;
$background_images = $_SESSION['theme']['background_image'];
}
else {
$background_colors[0] = $_SESSION['theme']['background_color'][0] ?? null;
$background_colors[1] = $_SESSION['theme']['background_color'][1] ?? null;
//logged in - use standard background colors
if (!empty($_SESSION['theme']['background_image_enabled']) && !empty($_SESSION['theme']['background_color'][0]) && !empty($_SESSION['theme']['background_color'][1])) {
$background_colors[0] = $_SESSION['theme']['background_color'][0];
$background_colors[1] = $_SESSION['theme']['background_color'][1];
}
elseif (!empty($_SESSION['theme']['background_image_enabled']) && !empty($_SESSION['theme']['background_color'][0])) {
$background_colors[0] = $_SESSION['theme']['background_color'][0];
}
}
else {
//not logged in - try using login background images/colors
//not logged in - try using login background images
if (isset($_SESSION['theme']['login_background_image_enabled']['boolean']) && $_SESSION['theme']['login_background_image_enabled']['boolean'] == 'true' && is_array($_SESSION['theme']['login_background_image'])) {
$background_images_enabled = true;
$background_images = $_SESSION['theme']['login_background_image'];
}
else if (!empty($_SESSION['theme']['login_background_color'][0]) || !empty($_SESSION['theme']['login_background_color'][1])) {
$background_colors[0] = $_SESSION['theme']['login_background_color'][0] ?? null;
$background_colors[1] = $_SESSION['theme']['login_background_color'][1] ?? null;
//otherwise, use standard background images
if (!empty($_SESSION['theme']['background_image_enabled']['boolean']) && $_SESSION['theme']['background_image_enabled']['boolean'] == 'true' && is_array($_SESSION['theme']['background_image'])) {
$background_images_enabled = true;
$background_images = $_SESSION['theme']['background_image'];
}
else {
//otherwise, use standard background images/colors
if (!empty($_SESSION['theme']['background_image_enabled']['boolean']) && $_SESSION['theme']['background_image_enabled']['boolean'] == 'true' && is_array($_SESSION['theme']['background_image'])) {
$background_images_enabled = true;
$background_images = $_SESSION['theme']['background_image'];
}
else {
$background_colors[0] = $_SESSION['theme']['background_color'][0] ?? null;
$background_colors[1] = $_SESSION['theme']['background_color'][1] ?? null;
}
//use standard background colors
if (!empty($_SESSION['theme']['background_color']) && !empty($_SESSION['theme']['background_color'][0]) && !empty($_SESSION['theme']['background_color'][1])) {
$background_colors[0] = $_SESSION['theme']['login_background_color'][0];
$background_colors[1] = $_SESSION['theme']['login_background_color'][1];
}
elseif (!empty($_SESSION['theme']['background_image_enabled']) && !empty($_SESSION['theme']['background_color'][0])) {
$background_colors[0] = $_SESSION['theme']['background_color'][0];
}
}
@@ -417,8 +425,7 @@ if ($background_images_enabled) {
}
//check for background color
else if (!empty($background_colors[0]) || !empty($background_colors[1])) { //background color 1 or 2 is enabled
if (!empty($background_colors[0]) || !empty($background_colors[1])) { //background color 1 or 2 is enabled
if (!empty($background_colors[0]) && empty($background_colors[1])) { // use color 1
$background_color = "background: ".$background_colors[0].";";
}
@@ -427,22 +434,25 @@ else if (!empty($background_colors[0]) || !empty($background_colors[1])) { //bac
}
else if (!empty($background_colors[0]) && !empty($background_colors[1]) && isset($_SESSION['theme']['background_radial_gradient']['text'])) { // radial gradient
$background_color = "background: ".$background_colors[0].";\n";
$background_color .= "background: -ms-radial-gradient(center, circle, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= "background: radial-gradient(circle at center, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= " background: -ms-radial-gradient(center, circle, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= " background: radial-gradient(circle at center, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
}
else if (!empty($background_colors[0]) && !empty($background_colors[1])) { // vertical gradient
$background_color = "background: ".$background_colors[0].";\n";
$background_color .= "background: -ms-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= "background: -moz-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= "background: -o-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= "background: -webkit-gradient(linear, left top, left bottom, color-stop(0, ".$background_colors[0]."), color-stop(1, ".$background_colors[1]."));\n";
$background_color .= "background: -webkit-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= "background: linear-gradient(to bottom, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= " background: -ms-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= " background: -moz-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= " background: -o-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= " background: -webkit-gradient(linear, left top, left bottom, color-stop(0, ".$background_colors[0]."), color-stop(1, ".$background_colors[1]."));\n";
$background_color .= " background: -webkit-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
$background_color .= " background: linear-gradient(to bottom, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
}
}
else { //default: white
$background_color = "background: #ffffff;\n";
$background_color = "";
}
?>
html {
@@ -462,22 +472,6 @@ else { //default: white
bottom: 0;
left: 0;
text-align: center;
<?php
if (!empty($_SESSION['background_image'])) {
echo "background-image: url('".$_SESSION['background_image']."');\n";
echo "background-size: 100% 100%;\n";
echo "background-position: top;\n";
}
else {
echo $background_color;
}
?>
background-repeat: no-repeat;
background-attachment: fixed;
webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
#background-video {
@@ -489,7 +483,53 @@ else { //default: white
right: 0;
top: 0;
bottom: 0;
z-index: -2;
z-index: -7;
}
#background-image {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
<?php
if (!empty($_SESSION['background_image'])) {
echo "background-image: url('".$_SESSION['background_image']."');\n";
echo " background-size: 100% 100%;\n";
echo " background-position: top;\n";
}
?>
background-repeat: no-repeat;
background-attachment: fixed;
webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -5;
}
#background-color {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
<?php
if (!empty($background_color)) {
echo $background_color;
}
if (isset($_SESSION['theme']['background_filter']['text'])) {
echo " backdrop-filter: ".$_SESSION['theme']['background_filter']['text'].";\n";
echo " -webkit-backdrop-filter: ".$_SESSION['theme']['background_filter']['text'].";\n";
}
?>
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -3;
}
pre {
@@ -2537,6 +2577,28 @@ else { //default: white
border: 1px solid #5d5f5a;
}
/* SUBCONTENT **********************************************************************/
div.subcontent {
/*border: 1px solid #bae0ba;*/
<?php
if (!empty($subcontent_background_color)) {
echo "background-color: " .$subcontent_background_color.";\n";
}
?>
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 20px;
margin-bottom: 15px;
<?php
if (!empty($subcontent_shadow_color)) {
echo "-webkit-box-shadow: 0 px 7px ".$subcontent_shadow_color.";\n";
echo "-moz-box-shadow: 0 2px 7px ".$subcontent_shadow_color.";\n";
echo "box-shadow: 0 2px 7px ".$subcontent_shadow_color.";\n";
}
?>
}
/* DASHBOARD **********************************************************************/
/* login message */
@@ -2550,12 +2612,12 @@ else { //default: white
margin-bottom: 15px;
}
.widget {
div.widget {
<?php
if (!empty($dashboard_shadow_color)) {
echo "-webkit-box-shadow: 0 3px 5px ".$dashboard_shadow_color.";\n";
echo "-moz-box-shadow: 0 3px 5px ".$dashboard_shadow_color.";\n";
echo "box-shadow: 0 3px 5px ".$dashboard_shadow_color.";\n";
echo "-webkit-box-shadow: 0 px 7px ".$dashboard_shadow_color.";\n";
echo "-moz-box-shadow: 0 2px 7px ".$dashboard_shadow_color.";\n";
echo "box-shadow: 0 2px 7px ".$dashboard_shadow_color.";\n";
}
?>
}

View File

@@ -1182,64 +1182,70 @@
</video>
{/if}
{*//image background *}
<div id='background-image'></div>
{*//color background *}
<div id='background-color'></div>
{*//message container *}
<div id='message_container'></div>
<div id='message_container'></div>
{*//domain selector *}
{if $authenticated && $domain_selector_enabled}
{if $authenticated && $domain_selector_enabled}
<div id='domains_container'>
<input type='hidden' id='domains_visible' value='0'>
<div id='domains_block'>
<div id='domains_header'>
<input id='domains_hide' type='button' class='btn' style='float: right' value="{$text.theme_button_close}">
<a id='domains_title' href='{$domains_app_path}'>{$text.theme_title_domains} <span id='domain_count' style='font-size: 80%;'></span></a>
<br><br>
<input type='text' id='domains_search' class='formfld' style='margin-left: 0; min-width: 100%; width: 100%;' placeholder="{$text.theme_label_search}" onkeyup="search_domains('domains_list');">
</div>
<div id='domains_list'></div>
<div id='domains_container'>
<input type='hidden' id='domains_visible' value='0'>
<div id='domains_block'>
<div id='domains_header'>
<input id='domains_hide' type='button' class='btn' style='float: right' value="{$text.theme_button_close}">
<a id='domains_title' href='{$domains_app_path}'>{$text.theme_title_domains} <span id='domain_count' style='font-size: 80%;'></span></a>
<br><br>
<input type='text' id='domains_search' class='formfld' style='margin-left: 0; min-width: 100%; width: 100%;' placeholder="{$text.theme_label_search}" onkeyup="search_domains('domains_list');">
</div>
<div id='domains_list'></div>
</div>
{/if}
{*//qr code container for contacts *}
<div id='qr_code_container' style='display: none;' onclick='$(this).fadeOut(400);'>
<table cellpadding='0' cellspacing='0' border='0' width='100%' height='100%'><tr><td align='center' valign='middle'>
<span id='qr_code' onclick="$('#qr_code_container').fadeOut(400);"></span>
</td></tr></table>
</div>
{/if}
{*//qr code container for contacts *}
<div id='qr_code_container' style='display: none;' onclick='$(this).fadeOut(400);'>
<table cellpadding='0' cellspacing='0' border='0' width='100%' height='100%'><tr><td align='center' valign='middle'>
<span id='qr_code' onclick="$('#qr_code_container').fadeOut(400);"></span>
</td></tr></table>
</div>
{*//login page *}
{if !empty($login_page)}
<div id='default_login'>
<a href='{$project_path}/'><img id='login_logo' style='width: {$login_logo_width}; height: {$login_logo_height};' src='{$login_logo_source}'></a><br />
{$document_body}
</div>
<div id='footer_login'>
<span class='footer'>{$settings.theme.footer}</span>
</div>
{if !empty($login_page)}
<div id='default_login'>
<a href='{$project_path}/'><img id='login_logo' style='width: {$login_logo_width}; height: {$login_logo_height};' src='{$login_logo_source}'></a><br />
{$document_body}
</div>
<div id='footer_login'>
<span class='footer'>{$settings.theme.footer}</span>
</div>
{*//other pages *}
{else}
{if $settings.theme.menu_style == 'side' || $settings.theme.menu_style == 'inline' || $settings.theme.menu_style == 'static'}
{$container_open}
{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 $menu_side_state == 'hidden'}expanded{else}{$menu_side_state}{/if}'>{/if}
{else} {*//default: fixed *}
{$menu}
{$container_open}
{/if}
<div id='main_content'>
{$document_body}
</div>
<div id='footer'>
<span class='footer'>{$settings.theme.footer}</span>
</div>
{$container_close}
{else}
{if $settings.theme.menu_style == 'side' || $settings.theme.menu_style == 'inline' || $settings.theme.menu_style == 'static'}
{$container_open}
{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 $menu_side_state == 'hidden'}expanded{else}{$menu_side_state}{/if}'>{/if}
{else} {*//default: fixed *}
{$menu}
{$container_open}
{/if}
<div id='main_content'>
{$document_body}
</div>
<div id='footer'>
<span class='footer'>{$settings.theme.footer}</span>
</div>
{$container_close}
{/if}
</body>
</html>