🚜 feat(dialogs) Clean up dialog pop-ups template

Move styling to CSS theme
Move HTML to smarty template
Render everything in one pass
Cleaned up some variable and function names
Add some strict typing

Should render and behave the same as before
parent 53af319e
div.msgbackground {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 100;
overflow: hidden;
background-image: url(../../images/opacity_black.png);
}
div.msgtrace {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
}
div.msgtitle {
width: auto;
background-color: #f0f0f0;
......@@ -15,6 +31,10 @@ div.msgdialog {
margin: auto;
top: 200px;
}
div.msgdialog div.msgcontent {
z-index: 250;
width: 100%;
}
div.msgdialog .description {
font-style: italic;
}
......@@ -30,3 +50,63 @@ div.msgdialog .description {
width: auto;
}
}
.error,
.notice,
.success,
.info {
border: 2px solid #c0c2c3;
margin: .2em;
padding: .3em;
}
.error {
background: #fbe3e4;
color: #8a1f11;
border-color: #fbc2c4;
}
.error h1,
.error h2,
.error h3,
.error h4,
.error h5,
.error h6 {
color: #8a3700;
}
.notice {
background: #fff6bf;
color: #514721;
border-color: #ffd324;
}
.notice h1,
.notice h2,
.notice h3,
.notice h4,
.notice h5,
.notice h6 {
color: #412701;
}
.success {
background: #f3f4f4;
color: #264409;
border-color: #f3f4f4;
}
.success h1,
.success h2,
.success h3,
.success h4,
.success h5,
.success h6 {
color: #378a00;
}
.info {
background: #d5edf8;
color: #205791;
border-color: #92cae4;
}
.info h1,
.info h2,
.info h3,
.info h4,
.info h5,
.info h6 {
color: #31363b;
}
@import "colors";
div.msgbackground {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 100;
overflow: hidden;
background-image: url(../../images/opacity_black.png);
}
div.msgtrace {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
}
div.msgtitle {
width: auto;
background-color: @background-header-color;
......@@ -11,6 +29,10 @@ div.msgtitle {
}
div.msgdialog {
div.msgcontent {
z-index: 250;
width: 100%;
}
width: 60%;
z-index: 150;
position: relative;
......@@ -31,3 +53,41 @@ div.msgdialog {
width: auto;
}
}
.error, .notice, .success, .info {
border: 2px solid @border-color-1;
margin: .2em;
padding: .3em;
}
.error {
background: @error-background-color;
color: @error-text-color;
border-color: @error-border-color;
h1,h2,h3,h4,h5,h6 {
color: @error-title-color;
}
}
.notice {
background: @notice-background-color;
color: @notice-text-color;
border-color: @notice-border-color;
h1,h2,h3,h4,h5,h6 {
color: @notice-title-color;
}
}
.success {
background: @success-background-color;
color: @success-text-color;
border-color: @success-border-color;
h1,h2,h3,h4,h5,h6 {
color: @success-title-color;
}
}
.info {
background: @info-background-color;
color: @info-text-color;
border-color: @info-border-color;
h1,h2,h3,h4,h5,h6 {
color: @info-title-color;
}
}
......@@ -376,44 +376,6 @@ span.mark {
color: @text-color-mark;
}
.error, .notice, .success, .info {
border: 2px solid @border-color-1;
margin: .2em;
padding: .3em;
}
.error {
background: @error-background-color;
color: @error-text-color;
border-color: @error-border-color;
h1,h2,h3,h4,h5,h6 {
color: @error-title-color;
}
}
.notice {
background: @notice-background-color;
color: @notice-text-color;
border-color: @notice-border-color;
h1,h2,h3,h4,h5,h6 {
color: @notice-title-color;
}
}
.success {
background: @success-background-color;
color: @success-text-color;
border-color: @success-border-color;
h1,h2,h3,h4,h5,h6 {
color: @success-title-color;
}
}
.info {
background: @info-background-color;
color: @info-text-color;
border-color: @info-border-color;
h1,h2,h3,h4,h5,h6 {
color: @info-title-color;
}
}
/* Header */
div#header-left {
......
......@@ -358,66 +358,6 @@ span.informal {
span.mark {
color: #dd0000;
}
.error,
.notice,
.success,
.info {
border: 2px solid #c0c2c3;
margin: .2em;
padding: .3em;
}
.error {
background: #fbe3e4;
color: #8a1f11;
border-color: #fbc2c4;
}
.error h1,
.error h2,
.error h3,
.error h4,
.error h5,
.error h6 {
color: #8a3700;
}
.notice {
background: #fff6bf;
color: #514721;
border-color: #ffd324;
}
.notice h1,
.notice h2,
.notice h3,
.notice h4,
.notice h5,
.notice h6 {
color: #412701;
}
.success {
background: #f3f4f4;
color: #264409;
border-color: #f3f4f4;
}
.success h1,
.success h2,
.success h3,
.success h4,
.success h5,
.success h6 {
color: #378a00;
}
.info {
background: #d5edf8;
color: #205791;
border-color: #92cae4;
}
.info h1,
.info h2,
.info h3,
.info h4,
.info h5,
.info h6 {
color: #31363b;
}
/* Header */
html.ltr div#header-left {
float: left;
......
{if $frame}
<div
id="e_layer2"
style="
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:100;
overflow:hidden;
background-image:url(images/opacity_black.png);">
{else}
<div
id="e_layer2"
class="msgbackground">
{if $s_Trace != "" && $i_TraceCnt != 0}
<div id="trace_{$i_ID}"
style="
display:none;
position:absolute;
left:0px;
top:0px;
right:0px;">
{$s_Trace}
</div>
{/if}
{foreach from=$dialogInfos item=dialog}
{if $i_Type == $smarty.const.INFO_DIALOG || $i_Type == $smarty.const.CONFIRM_DIALOG}
<div id="e_layer{$i_ID}" class="info msgdialog">
{elseif $i_Type == $smarty.const.WARNING_DIALOG}
<div id="e_layer{$i_ID}" class="notice msgdialog">
{else}
<div id="e_layer{$i_ID}" class="error msgdialog">
{/if}
<div id="e_layerTitle{$i_ID}" class="msgtitle">
<h2>
{if $i_Type == $smarty.const.ERROR_DIALOG}
<img src="geticon.php?context=status&amp;icon=dialog-error&amp;size=32" class="center" alt="{t}Error{/t}"/>
{elseif $i_Type == $smarty.const.WARNING_DIALOG}
<img src="geticon.php?context=status&amp;icon=dialog-warning&amp;size=32" class="center" alt="{t}Warning{/t}"/>
{elseif $i_Type == $smarty.const.INFO_DIALOG || $i_Type == $smarty.const.CONFIRM_DIALOG}
<img src="geticon.php?context=status&amp;icon=dialog-information&amp;size=32" class="center" alt="{t}Information{/t}"/>
{/if}
{$s_Title}
</h2>
{if ($dialog.trace != "")}
<div id="trace_{$dialog.id}"
class="msgtrace"
style="display:none;">
{$dialog.trace}
</div>
{/if}
<div style="z-index:250;width:100%;">
{$s_Message}
</div>
<div class="plugbottom">
{if $s_Trace != "" && $i_TraceCnt != 0}
<input type="button" id="Trace" name="Trace"
onClick="$('trace_{$i_ID}').toggle();" value="{t}Trace{/t}"/>
{/if}
<input type="button" id="MSG_OK{$i_ID}" name="MSG_OK{$i_ID}"
onClick="next_msg_dialog();" value="{t}Ok{/t}"/>
{if $i_Type == $smarty.const.CONFIRM_DIALOG}
<input type="button" name="MSG_CANCEL{$i_ID}"
onClick="next_msg_dialog();" value="{t}Cancel{/t}"/>
{/if}
{if $dialog.type == $smarty.const.INFO_DIALOG || $dialog.type == $smarty.const.CONFIRM_DIALOG}
<div id="e_layer{$dialog.id}" class="info msgdialog">
{elseif $dialog.type == $smarty.const.WARNING_DIALOG}
<div id="e_layer{$dialog.id}" class="notice msgdialog">
{else}
<div id="e_layer{$dialog.id}" class="error msgdialog">
{/if}
<div id="e_layerTitle{$dialog.id}" class="msgtitle">
<h2>
{if $dialog.type == $smarty.const.ERROR_DIALOG}
<img src="geticon.php?context=status&amp;icon=dialog-error&amp;size=32" class="center" alt="{t}Error{/t}"/>
{elseif $dialog.type == $smarty.const.WARNING_DIALOG}
<img src="geticon.php?context=status&amp;icon=dialog-warning&amp;size=32" class="center" alt="{t}Warning{/t}"/>
{elseif $dialog.type == $smarty.const.INFO_DIALOG || $dialog.type == $smarty.const.CONFIRM_DIALOG}
<img src="geticon.php?context=status&amp;icon=dialog-information&amp;size=32" class="center" alt="{t}Information{/t}"/>
{/if}
{$dialog.title}
</h2>
</div>
<div class="msgcontent">
{$dialog.message}
</div>
<div class="plugbottom">
{if ($dialog.trace != "")}
<input type="button" id="Trace" name="Trace"
onClick="$('trace_{$dialog.id}').toggle();" value="{t}Trace{/t}"/>
{/if}
<input type="button" id="MSG_OK{$dialog.id}" name="MSG_OK{$dialog.id}"
onClick="next_msg_dialog();" value="{t}Ok{/t}"/>
{if $dialog.type == $smarty.const.CONFIRM_DIALOG}
<input type="button" name="MSG_CANCEL{$dialog.id}"
onClick="next_msg_dialog();" value="{t}Cancel{/t}"/>
{/if}
</div>
</div>
</div>
<script type="text/javascript">
focus_field('MSG_OK{$i_ID}');
</script>
<script type="text/javascript">
focus_field('MSG_OK{$dialog.id}');
</script>
{/foreach}
{/if}
</div>
<input type="hidden" name="pending_msg_dialogs" id="pending_msg_dialogs" value="{','|implode:$dialogIds}"/>
<input type="hidden" name="closed_msg_dialogs" id="closed_msg_dialogs" value=""/>
<input type="hidden" name="current_msg_dialogs" id="current_msg_dialogs" value=""/>
<input type="hidden" name="js_debug" id="js_debug"/>
......@@ -2,7 +2,7 @@
/*
This code is part of FusionDirectory (http://www.fusiondirectory.org/)
Copyright (C) 2003-2010 Cajus Pollmeier
Copyright (C) 2011-2016 FusionDirectory
Copyright (C) 2011-2020 FusionDirectory
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
......@@ -37,32 +37,32 @@ define('FATAL_ERROR_DIALOG', 10006);
*/
class msg_dialog
{
private $s_Title = 'Undefined';
private $s_Message = 'Undefined';
private $i_Type = INFO_DIALOG;
private $i_ID = 0;
private $s_Title;
private $s_Message;
private $i_Type;
private $i_ID;
private $a_Trace = [];
/*!
* \brief Message dialog constructor
*
* \param string $s_title The title of the message dialog
* \param string $title The title of the message dialog
*
* \param string $s_message The message of the message dialog
* \param string $message The message of the message dialog
*
* \param string $i_type The type of the message dialog, by default = INFO_DIALOG
* \param string $type The type of the message dialog, by default = INFO_DIALOG
*/
public function __construct ($s_title, $s_message, $i_type)
public function __construct ($title, $message, $type = INFO_DIALOG)
{
if (!in_array($i_type, [INFO_DIALOG,WARNING_DIALOG,ERROR_DIALOG,CONFIRM_DIALOG,FATAL_ERROR_DIALOG])) {
if (!in_array($type, [INFO_DIALOG,WARNING_DIALOG,ERROR_DIALOG,CONFIRM_DIALOG,FATAL_ERROR_DIALOG])) {
trigger_error('Invalid msg_dialog type.');
$i_type = INFO_DIALOG;
$type = INFO_DIALOG;
}
$this->i_ID = preg_replace('/[^0-9]*/', '', microtime());
$this->s_Title = $s_title;
$this->s_Message = $s_message;
$this->i_Type = $i_type;
$this->i_ID = (int)preg_replace('/[^0-9]*/', '', microtime());
$this->s_Title = $title;
$this->s_Message = $message;
$this->i_Type = $type;
}
protected function show ()
......@@ -98,7 +98,7 @@ class msg_dialog
if ($this->i_Type == FATAL_ERROR_DIALOG) {
restore_error_handler();
error_reporting(E_ALL);
echo $this->execute();
echo $this->renderFatalErrorDialog();
} else {
if (session::is_set('msg_dialogs')) {
$msg_dialogs = session::get('msg_dialogs');
......@@ -113,15 +113,15 @@ class msg_dialog
/*!
* \brief Display a message dialog
*
* \param string $s_title The title of the message dialog
* \param string $title The title of the message dialog
*
* \param string $s_message The message of the message dialog
* \param string $message The message of the message dialog
*
* \param string $i_type The type of the message dialog, by default = INFO_DIALOG
* \param string $type The type of the message dialog, by default = INFO_DIALOG
*/
public static function display ($s_title, $s_message, $i_type = INFO_DIALOG)
public static function display ($title, $message, $type = INFO_DIALOG)
{
$dialog = new msg_dialog($s_title, $s_message, $i_type);
$dialog = new msg_dialog($title, $message, $type);
$dialog->show();
}
......@@ -142,7 +142,7 @@ class msg_dialog
*
* \return The identifier of the message dialog
*/
public function get_ID ()
public function getId (): int
{
return $this->i_ID;
}
......@@ -150,47 +150,35 @@ class msg_dialog
/*!
* \brief Run the message dialog
*/
public function execute ()
protected function renderFatalErrorDialog ()
{
global $config;
if ($this->i_Type == FATAL_ERROR_DIALOG) {
$display =
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html><head>
<title>FusionDirectory startup failed</title>
</head><body>';
if (isset($config) && is_object($config) &&
$config->get_cfg_value('displayerrors') == 'TRUE') {
list($trace, ) = html_trace();
$display .= $trace;
}
$display .=
'<table style="width:100%; border:2px solid red;">
<tr>
<td style="vertical-align:top;padding:10px">
<img src="geticon.php?context=status&amp;icon=dialog-error&amp;size=32" alt="'._('Error').'"/>
</td>
<td style="width:100%">
<b>'.$this->s_Title.'</b><br/>
'.$this->s_Message.'<br><br/>
'._('Please fix the above error and reload the page.').'
</td>
</tr>
</table></body></html>';
return $display;
} else {
$smarty = get_smarty();
$smarty->assign('s_Trace', print_a($this->a_Trace, TRUE));
$smarty->assign('i_TraceCnt', count($this->a_Trace));
$smarty->assign('i_Type', $this->i_Type);
$smarty->assign('s_Message', $this->s_Message);
$smarty->assign('s_Title', $this->s_Title);
$smarty->assign('i_ID', $this->i_ID);
$smarty->assign('frame', FALSE);
$smarty->assign('JS', TRUE);
return $smarty->fetch(get_template_path('msg_dialog.tpl'));
$display =
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html><head>
<title>FusionDirectory startup failed</title>
</head><body>';
if (isset($config) && is_object($config) &&
$config->get_cfg_value('displayerrors') == 'TRUE') {
list($trace, ) = html_trace();
$display .= $trace;
}
$display .=
'<table style="width:100%; border:2px solid red;">
<tr>
<td style="vertical-align:top;padding:10px">
<img src="geticon.php?context=status&amp;icon=dialog-error&amp;size=32" alt="'._('Error').'"/>
</td>
<td style="width:100%">
<b>'.$this->s_Title.'</b><br/>
'.$this->s_Message.'<br><br/>
'._('Please fix the above error and reload the page.').'
</td>
</tr>
</table></body></html>';
return $display;
}
/*!
......@@ -198,44 +186,50 @@ class msg_dialog
*
* \return True if is confirmed, else return false
*/
public function is_confirmed ()
public function is_confirmed (): bool
{
return isset($_POST['MSG_OK'.$this->i_ID]);
}
/*!
* \brief Accessor of the message dialog
* \brief Return an array with infos for the template
*/
public static function get_dialogs ()
protected function getDialogInfos (): array
{
$return = "";
$dialog_ids = "";
return [
'id' => $this->i_ID,
'type' => $this->i_Type,
'title' => $this->s_Title,
'message' => $this->s_Message,
'trace' => ((count($this->a_Trace) > 0) ? print_a($this->a_Trace, TRUE) : ''),
];
}
/*!
* \brief Accessor of the message dialog rendered HTML
*/
public static function get_dialogs (): string
{
if (session::is_set('msg_dialogs') &&
is_array(session::get('msg_dialogs')) &&
count(session::get('msg_dialogs'))) {
/* Get frame one */
$smarty = get_smarty();
$smarty->assign('frame', TRUE);
$return = $smarty->fetch(get_template_path('msg_dialog.tpl'));
$msg_dialogs = session::get('msg_dialogs');
$msg_dialogs = session::get('msg_dialogs');
$dialogInfos = [];
$dialogIds = [];
foreach ($msg_dialogs as $key => $dialog) {
if (!preg_match('/'.$dialog->get_ID().'/', '')) {
$return .= $dialog->execute();
$dialog_ids = $dialog->get_ID().','.$dialog_ids;
}
unset($msg_dialogs[$key]);
$dialogInfos[] = $dialog->getDialogInfos();
$dialogIds[] = $dialog->getId();
}
session::set('msg_dialogs', $msg_dialogs);
$dialog_ids = preg_replace('/,$/', '', $dialog_ids);
session::set('msg_dialogs', []);
$smarty->assign('dialogInfos', $dialogInfos);
$smarty->assign('dialogIds', $dialogIds);
$return .= '</div>'."\n";
$return .= '<input type="hidden" style="width:400px;" name="pending_msg_dialogs" id="pending_msg_dialogs" value="'.$dialog_ids.'"/>'."\n";
$return .= '<input type="hidden" style="width:400px;" name="closed_msg_dialogs" id="closed_msg_dialogs" value=""/>'."\n";
$return .= '<input type="hidden" style="width:400px;" name="current_msg_dialogs" id="current_msg_dialogs" value=""/>'."\n";
$return .= '<input type="hidden" style="width:700px;" name="js_debug" id="js_debug">'."\n";
return $smarty->fetch(get_template_path('msg_dialog.tpl'));
} else {
return '';
}
return $return;
}
}