Help feedback style improved

This commit is contained in:
fbsanchez 2019-11-07 17:26:32 +01:00
parent 613e5741fb
commit 763ec6772c
4 changed files with 145 additions and 139 deletions

View File

@ -91,6 +91,7 @@ class HelpFeedBack extends Wizard
*/
public function run()
{
ui_require_css_File('discovery');
ui_require_css_file('help_feedback');
$help_url = get_parameter('url', null);
@ -123,8 +124,6 @@ class HelpFeedBack extends Wizard
{
global $config;
ui_require_css_file('helper');
$form = [
'action' => '#',
'id' => 'feedback_form',
@ -134,35 +133,38 @@ class HelpFeedBack extends Wizard
$inputs = [
[
'wrapper' => 'div',
'block_id' => 'btn_section',
'class' => 'btn_section',
'block_id' => 'flex-row-baseline w100p',
'class' => 'flex-row-baseline w100p',
'direct' => 1,
'block_content' => [
[
'arguments' => [
'label' => __('Sugesstion'),
'type' => 'button',
'attributes' => 'class="btn_sug"',
'name' => 'option_1',
'id' => 'option_1',
'script' => 'change_option1()',
'type' => 'radio_button',
'attributes' => 'class="btn"',
'name' => 'suggestion',
'id' => 'suggestion',
'script' => 'disableRadio(\'report\')',
'return' => true,
],
],
[
'arguments' => [
'label' => __('Something is not quite right'),
'type' => 'button',
'attributes' => 'class="btn_something"',
'name' => 'option_2',
'id' => 'option_2',
'script' => 'change_option2()',
'type' => 'radio_button',
'attributes' => 'class="btn"',
'name' => 'report',
'id' => 'report',
'script' => 'disableRadio(\'suggestion\')',
'return' => true,
],
],
],
],
[
'label' => __('What Happend?'),
'label' => __('What happened?'),
'class' => 'explain',
'arguments' => [
'class' => 'textarea_feedback',
'id' => 'feedback_text',
@ -192,21 +194,22 @@ class HelpFeedBack extends Wizard
],
];
$output = ui_toggle(
$this->printForm(
[
'form' => $form,
'inputs' => $inputs,
],
true
),
__('Feedback'),
'',
'',
true,
false,
'',
'no-border'
$output = ui_print_toggle(
[
'content' => $this->printForm(
[
'form' => $form,
'inputs' => $inputs,
],
true
),
'name' => __('Feedback'),
'return' => true,
'class' => 'no-border',
'img_a' => 'images/arrow_down_white.png',
'img_b' => 'images/arrow_up_white.png',
]
);
$output .= $this->loadJS();
@ -254,24 +257,10 @@ class HelpFeedBack extends Wizard
ob_start();
?>
<script type="text/javascript">
var option_selected = "";
function change_option1() {
option_selected = "<?php echo __('Suggestion'); ?>";
document.getElementById("button-option_1").className = "btn_sug_not_selected";
document.getElementById("button-option_2").className = "btn_sug";
;
function disableRadio(id) {
$('#'+id).prop('checked', false)
}
function change_option2() {
option_selected = "<?php echo __('Something is not quite rigth'); ?>";
document.getElementById("button-option_2").className = "btn_sug_not_selected";
document.getElementById("button-option_1").className = "btn_sug";
}
// Set values to data.
$("#feedback_form").on('submit', function() {
// Make the AJAX call to send mails.
@ -282,7 +271,7 @@ class HelpFeedBack extends Wizard
data: {
page: "<?php echo $this->ajaxController; ?>",
method: 'sendMailMethod',
feedback_option: option_selected,
type: $('#suggestion').checked(),
feedback_text: $("textarea[name=feedback_text]").val(),
feedback_email: $("input[name=feedback_email]").val()
},
@ -307,4 +296,3 @@ class HelpFeedBack extends Wizard
}

View File

@ -2189,33 +2189,47 @@ function html_print_table(&$table, $return=false)
/**
* Render a radio button input. Extended version, use html_print_radio_button() to simplify.
* Render a radio button input. Extended version, use html_print_input()
* to simplify.
*
* @param string Input name.
* @param string Input value.
* @param string Set the button to be marked (optional, unmarked by default).
* @param bool Disable the button (optional, button enabled by default).
* @param string Script to execute when onClick event is triggered (optional).
* @param string Optional HTML attributes. It's a free string which will be
inserted into the HTML tag, use it carefully (optional).
* @param bool Whether to return an output string or echo now (optional, echo by default).
* @param string $name Input name.
* @param string $value Input value.
* @param string $label Set the button to be marked (optional, unmarked by default).
* @param string $checkedvalue Checked value.
* @param string $disabled Disable the button (optional, button enabled by default).
* @param string $script Script to execute when onClick event is triggered (optional).
* @param string $attributes Optional HTML attributes. It's a free string which will be inserted tag, use it carefully (optional).
* @param string $returnparam Whether to return an output string or echo now (optional, echo by default).
* @param string $modalparam Modal param.
* @param string $message Message.
* @param string $id Use custom id.
*
* @return string HTML code if return parameter is true.
*/
/*
Hello there! :)
We added some of what seems to be "buggy" messages to the openSource version recently. This is not to force open-source users to move to the enterprise version, this is just to inform people using Pandora FMS open source that it requires skilled people to maintain and keep it running smoothly without professional support. This does not imply open-source version is limited in any way. If you check the recently added code, it contains only warnings and messages, no limitations except one: we removed the option to add custom logo in header. In the Update Manager section, it warns about the 'danger of applying automated updates without a proper backup, remembering in the process that the Enterprise version comes with a human-tested package. Maintaining an OpenSource version with more than 500 agents is not so easy, that's why someone using a Pandora with 8000 agents should consider asking for support. It's not a joke, we know of many setups with a huge number of agents, and we hate to hear that “its becoming unstable and slow” :(
You can of course remove the warnings, that's why we include the source and do not use any kind of trick. And that's why we added here this comment, to let you know this does not reflect any change in our opensource mentality of does the last 14 years.
*/
function html_print_radio_button_extended($name, $value, $label, $checkedvalue, $disabled, $script, $attributes, $return=false, $modal=false, $message='visualmodal')
{
function html_print_radio_button_extended(
$name,
$value,
$label,
$checkedvalue,
$disabled,
$script,
$attributes,
$return=false,
$modal=false,
$message='visualmodal',
$id=null
) {
static $idcounter = 0;
$output = '';
$output = '<input type="radio" name="'.$name.'" value="'.$value.'"';
$htmlid = 'radiobtn'.sprintf('%04d', ++$idcounter);
if (empty($id) === false) {
$htmlid = $id;
} else {
$htmlid = 'radiobtn'.sprintf('%04d', ++$idcounter);
}
$output .= ' id="'.$htmlid.'"';
if ($value == $checkedvalue) {
@ -3369,6 +3383,21 @@ function html_print_input($data, $wrapper='div', $input_only=false)
);
break;
case 'radio_button':
$output .= html_print_radio_button_extended(
$data['name'],
$data['value'],
$data['label'],
((isset($data['checkedvalue']) === true) ? $data['checkedvalue'] : 1),
((isset($data['disabled']) === true) ? $data['disabled'] : ''),
((isset($data['script']) === true) ? $data['script'] : ''),
((isset($data['attributes']) === true) ? $data['attributes'] : true),
((isset($data['return']) === true) ? $data['return'] : false),
((isset($data['modal']) === true) ? $data['modal'] : false),
((isset($data['message']) === true) ? $data['message'] : 'visualmodal'),
((isset($data['id']) === true) ? $data['id'] : null)
);
default:
// Ignore.
break;

View File

@ -3521,6 +3521,8 @@ function ui_print_event_priority(
* @param string $toggle_class Toggle class.
* @param string $container_class Container class.
* @param string $main_class Main object class.
* @param string $img_a Image (closed).
* @param string $img_b Image (opened).
*
* @return string HTML.
*/
@ -3533,20 +3535,22 @@ function ui_toggle(
$return=false,
$toggle_class='',
$container_class='white-box-content',
$main_class='box-shadow white_table_graph'
$main_class='box-shadow white_table_graph',
$img_a='images/arrow_down_green.png',
$img_b='images/arrow_right_green.png'
) {
// Generate unique Id.
$uniqid = uniqid('');
$image_a = html_print_image('images/arrow_down_green.png', true, false, true);
$image_b = html_print_image('images/arrow_right_green.png', true, false, true);
$image_a = html_print_image($img_a, true, false, true);
$image_b = html_print_image($img_b, true, false, true);
// Options.
if ($hidden_default) {
$style = 'display:none';
$original = 'images/arrow_right_green.png';
$original = $img_b;
} else {
$style = '';
$original = 'images/arrow_down_green.png';
$original = $img_a;
}
// Link to toggle.
@ -3599,6 +3603,31 @@ function ui_toggle(
}
/**
* Simplified way of ui_toggle ussage.
*
* @param array $data Arguments.
*
* @return string HTML code with toggle content.
*/
function ui_print_toggle($data)
{
return ui_toggle(
$data['content'],
$data['name'],
(isset($data['title']) === true) ? $data['title'] : '',
(isset($data['id']) === true) ? $data['id'] : '',
(isset($data['hidden_default']) === true) ? $data['hidden_default'] : true,
(isset($data['return']) === true) ? $data['return'] : false,
(isset($data['toggle_class']) === true) ? $data['toggle_class'] : '',
(isset($data['container_class']) === true) ? $data['container_class'] : 'white-box-content',
(isset($data['main_class']) === true) ? $data['main_class'] : 'box-shadow white_table_graph',
(isset($data['img_a']) === true) ? $data['img_a'] : 'images/arrow_down_green.png',
(isset($data['img_b']) === true) ? $data['img_b'] : 'images/arrow_right_green.png'
);
}
/**
* Construct and return the URL to be used in order to refresh the current page correctly.
*

View File

@ -7,61 +7,40 @@ body {
div.help_feedback {
position: fixed;
bottom: 0;
background: white;
height: auto;
width: 365px;
padding-left: 10px;
padding-right: 10px;
background-color: #fff;
}
.btn_sug {
margin-right: 10px;
margin-top: 10px;
margin-left: 10px;
.help_feedback label {
font-weight: normal;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 1.2em;
background-repeat: no-repeat;
background-position: 92% 10px;
color: #000;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
border: none;
font-family: "lato", "Open Sans", sans-serif;
cursor: pointer;
padding-right: 30px;
}
.btn_something {
margin-top: 10px;
margin-left: 10px;
.help_feedback * {
font-family: "lato", "courier", sans-serif;
font-size: 8pt;
}
font-weight: normal;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 1.2em;
background-repeat: no-repeat;
background-position: 92% 10px;
color: #000;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
border: none;
font-family: "lato", "Open Sans", sans-serif;
cursor: pointer;
padding-right: 30px;
.help_feedback .white_table_graph_header {
background: #82b92e;
color: #fff;
}
.help_feedback .white_table_graph {
margin-bottom: 0;
box-shadow: 0px 5px 6px 2px #888;
}
.help_feedback .white-box-content form {
margin-bottom: 0;
padding: 0;
}
.help_feedback .explain {
margin: 10px auto;
}
.textarea_feedback {
margin-left: 11px;
max-width: 200px;
margin-top: 10px;
font-weight: bolder;
}
.email_feedback {
@ -73,33 +52,14 @@ div.help_feedback {
}
.btn_submit_feed_back {
margin-right: 50px;
margin-top: 5px;
margin-bottom: 10px;
margin: 15px 0 0 0;
}
.btn_sug_not_selected {
font-weight: normal;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 1.2em;
background-repeat: no-repeat;
background-position: 92% 10px;
color: #000;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
border: 1px solid #888;
font-family: "lato", "Open Sans", sans-serif;
.btn {
margin: 0 auto;
cursor: pointer;
margin-right: 20px;
margin-top: 10px;
margin-left: 10px;
background-image: url(../../images/input_tick.png);
padding-right: 30px;
}
.btn_section {
display: flex;
.flex-row-baseline.w100p label {
cursor: pointer;
}