#11316 new modal help
This commit is contained in:
Daniel Cebrian
parent
47f4e5d325
commit
cc20640acd
|
|
@ -351,59 +351,37 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
|
|||
$header_autorefresh_counter .= '</div>';
|
||||
}
|
||||
|
||||
// Button for feedback pandora.
|
||||
if (enterprise_installed()) {
|
||||
$header_feedback = '<div id="feedback-icon-header">';
|
||||
$header_feedback .= '<div id="modal-feedback-form" class="invisible"></div>';
|
||||
$header_feedback .= '<div id="msg-header" class="invisible"></div>';
|
||||
$header_feedback .= html_print_image(
|
||||
'images/send_feedback@header.svg',
|
||||
true,
|
||||
[
|
||||
'class' => 'main_menu_icon invert_filter',
|
||||
'title' => __('Feedback'),
|
||||
'id' => 'feedback-header',
|
||||
'alt' => __('Feedback'),
|
||||
'style' => 'cursor: pointer;',
|
||||
]
|
||||
);
|
||||
$header_feedback .= '</div>';
|
||||
}
|
||||
|
||||
|
||||
// Support.
|
||||
if (enterprise_installed()) {
|
||||
$header_support_link = $config['custom_support_url'];
|
||||
$modal_box = '<div id="modal_help" class="invisible">
|
||||
<div id="modal-feedback-form" class="invisible"></div>
|
||||
<div id="msg-header" class="invisible"></div>
|
||||
<a href="https://pandorafms.com/manual" target="_blank">'.__('Pandora documentation').'</a>';
|
||||
if (enterprise_installed() === true) {
|
||||
$modal_box .= '<a href="https://support.pandorafms.com/" target="_blank">'.__('Enterprise support ').'</a>';
|
||||
$modal_box .= '<a href="#" id="feedback-header">'.__('Give us feedback').'</a>';
|
||||
} else {
|
||||
$header_support_link = 'https://pandorafms.com/forums/';
|
||||
$modal_box .= '<a href="https://pandorafms.com/community/forums/" target="_blank">'.__('Community Support').'</a>';
|
||||
}
|
||||
|
||||
$header_support = '<div id="header_support">';
|
||||
$header_support .= '<a href="'.ui_get_full_external_url($header_support_link).'" target="_blank">';
|
||||
$header_support .= html_print_image(
|
||||
'images/support@header.svg',
|
||||
true,
|
||||
[
|
||||
'title' => __('Go to support'),
|
||||
'class' => 'main_menu_icon bot invert_filter',
|
||||
'alt' => 'user',
|
||||
]
|
||||
);
|
||||
$header_support .= '</a></div>';
|
||||
$modal_box .= '<hr class="separator" />';
|
||||
$modal_box .= '<a href="https://github.com/pandorafms/pandorafms/issues" target="_blank">'.__('Open an issue in Github').'</a>';
|
||||
$modal_box .= '<a href="https://discord.com/invite/xVt2ruSxmr" target="_blank">'.__('Join discord community').'</a>';
|
||||
$modal_box .= '</div>';
|
||||
|
||||
// Documentation.
|
||||
$header_docu = '<div id="header_docu">';
|
||||
$header_docu .= '<a href="'.ui_get_full_external_url($config['custom_docs_url']).'" target="_blank">';
|
||||
$header_docu .= html_print_image(
|
||||
'images/documentation@header.svg',
|
||||
true,
|
||||
$modal_help = html_print_div(
|
||||
[
|
||||
'title' => __('Go to documentation'),
|
||||
'class' => 'main_menu_icon bot invert_filter',
|
||||
'alt' => 'user',
|
||||
]
|
||||
'id' => 'modal-help-content',
|
||||
'content' => html_print_image(
|
||||
'images/help@header.svg',
|
||||
true,
|
||||
[
|
||||
'title' => __('Help'),
|
||||
'class' => 'main_menu_icon bot invert_filter',
|
||||
'alt' => 'user',
|
||||
]
|
||||
).$modal_box,
|
||||
],
|
||||
true,
|
||||
);
|
||||
$header_docu .= '</a></div>';
|
||||
|
||||
|
||||
// User.
|
||||
|
|
@ -457,11 +435,11 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
|
|||
echo '</span>';
|
||||
echo '</div>';
|
||||
echo '<div class="header_center"></div>';
|
||||
echo '<div class="header_right">'.$header_support, $header_docu, $header_user, $header_logout.'</div>';
|
||||
echo '<div class="header_right">'.$modal_help, $header_user, $header_logout.'</div>';
|
||||
} else {
|
||||
echo '<div class="header_left"><span class="header_title">'.$config['custom_title_header'].'</span><span class="header_subtitle">'.$config['custom_subtitle_header'].'</span></div>
|
||||
<div class="header_center">'.$header_searchbar.'</div>
|
||||
<div class="header_right">'.$header_autorefresh, $header_autorefresh_counter, $header_discovery, $servers_list, $header_feedback, $header_support, $header_docu, $header_user, $header_logout.'</div>';
|
||||
<div class="header_right">'.$header_autorefresh, $header_autorefresh_counter, $header_discovery, $servers_list, $modal_help, $header_user, $header_logout.'</div>';
|
||||
}
|
||||
?>
|
||||
</div> <!-- Closes #table_header_inner -->
|
||||
|
|
@ -907,8 +885,6 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
|
|||
<?php if (enterprise_installed()) { ?>
|
||||
// Feedback.
|
||||
$("#feedback-header").click(function () {
|
||||
// Clean DOM.
|
||||
$("#feedback-header").empty();
|
||||
// Function charge Modal.
|
||||
show_feedback();
|
||||
});
|
||||
|
|
@ -1014,6 +990,22 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
|
|||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
$(document).click(function(event) {
|
||||
if (!$(event.target).closest('#modal-help-content').length &&
|
||||
$('#modal_help').hasClass('invisible') === false) {
|
||||
$('#modal_help').addClass('invisible');
|
||||
}
|
||||
});
|
||||
|
||||
$('#modal-help-content').on('click', (e) => {
|
||||
if($(e.target).prop('tagName') === 'A') {
|
||||
$('#modal_help').addClass('invisible');
|
||||
} else {
|
||||
$('#modal_help').removeClass('invisible');
|
||||
}
|
||||
});
|
||||
});
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>help_pandora</title>
|
||||
<g id="help_pandora" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M10,0 C15.4050388,0 20,1.5951272 20,5.39448104 L20,14.605519 C20,18.4048728 15.4050388,20 10,20 C4.59496118,20 0,18.4048728 0,14.605519 L0,5.39448104 C0,1.5951272 4.59496118,0 10,0 Z M9.79831933,13.1716621 C8.99159664,13.1716621 8.35294118,13.8092643 8.35294118,14.5940054 C8.35294118,15.3623978 8.99159664,16 9.79831933,16 C10.605042,16 11.2605042,15.3623978 11.2605042,14.5940054 C11.2605042,13.8092643 10.605042,13.1716621 9.79831933,13.1716621 Z M9.91596639,4 C7.46218487,4 6,5.61852861 6,7.53133515 C6,7.74386921 6.01680672,7.98910082 6.06722689,8.21798365 L8.42016807,8.29972752 C8.40336134,8.23433243 8.3697479,8.07084469 8.3697479,7.69482289 C8.3697479,6.92643052 8.94117647,6.15803815 9.91596639,6.15803815 C10.9243697,6.15803815 11.4117647,6.77929155 11.4117647,7.41689373 C11.4117647,7.84196185 11.2605042,8.23433243 10.8067227,8.5613079 L9.94957983,9.18256131 C8.99159664,9.88555858 8.67226891,10.719346 8.67226891,11.4877384 C8.67226891,11.7493188 8.68907563,11.9782016 8.7394958,12.2070845 L10.7394958,12.2070845 C10.7394958,11.4713896 11.1428571,11.0463215 11.7310924,10.6212534 L12.3697479,10.1634877 C13.3781513,9.42779292 14,8.52861035 14,7.22070845 C14,5.58583106 12.6386555,4 9.91596639,4 Z" id="Mask" fill="#3F3F3F"></path>
|
||||
<g id="?" transform="translate(6, 4)"></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -1517,7 +1517,45 @@ div#head {
|
|||
input.datos {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#modal_help {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: 32px;
|
||||
background: white;
|
||||
display: flex;
|
||||
min-width: 160px;
|
||||
flex-direction: column;
|
||||
filter: drop-shadow(1px 2px 2px #0000005e);
|
||||
padding: 10px 0px;
|
||||
}
|
||||
#modal-help-content {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
#modal_help a {
|
||||
margin: 3px 0px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
#modal_help a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
#modal_help .separator {
|
||||
width: 100%;
|
||||
opacity: 0.4;
|
||||
}
|
||||
#modal_help::before {
|
||||
content: "";
|
||||
border: 8px solid #0000;
|
||||
border-bottom: 8px solid white;
|
||||
left: auto;
|
||||
right: -16px;
|
||||
top: 5px;
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
#modal_help.invisible {
|
||||
display: none;
|
||||
}
|
||||
/*
|
||||
* ---------------------------------------------------------------------
|
||||
* - REPORTS -
|
||||
|
|
|
|||
Loading…
Reference in New Issue