composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-19 15:22:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2844 Migrate Impact Analysis to new design

Browse Source
This commit is contained in:
Stephen Abello
2021-02-24 14:45:50 +01:00
parent 99cb5ffb37
commit 61b5a3924e
4 changed files with 135 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
core/displayablegraph.class.inc.php
View File

@@ -15,6 +15,9 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with iTop. If not, see <http://www.gnu.org/licenses/>
use Combodo\iTop\Application\UI\Base\Component\MedallionIcon\MedallionIcon;
use Combodo\iTop\Application\UI\Base\Component\Panel\Panel;
use Combodo\iTop\Renderer\BlockRenderer;
/**
* Special kind of Graph for producing some nice output
@@ -1450,15 +1453,15 @@ class DisplayableGraph extends SimpleGraph
$sSftShort = Dict::S('UI:ElementsDisplayed');
$sSearchToggle = Dict::S('UI:Search:Toggle');
$oP->add("<div class=\"not-printable\">\n");
$oP->add(
$oUiSearchBlock = new Panel($sSftShort, [],Panel::ENUM_COLOR_CYAN, 'ds_flash');
$oUiSearchBlock->SetCSSClasses(["ibo-search-form-panel", "display_block"]);
$oUiHtmlBlock = new Combodo\iTop\Application\UI\Base\Component\Html\Html(
<<<EOF
<div id="ds_flash" class="search_box">
<form id="dh_flash" class="search_form_handler closed">
<h2 class="sf_title"><span class="sft_long">$sSftShort</span><span class="sft_short">$sSftShort</span><span class="sft_toggler fas fa-caret-down pull-right" title="$sSearchToggle"></span></h2>
<div id="ds_flash" class="search_box ibo-display-graph--search-box">
<div id="dh_flash_criterion_outer" class="sf_criterion_area"><div class="sf_criterion_row">
EOF
);
$oP->add_ready_script(
<<<EOF
$("#dh_flash > .sf_title").click( function() {
@@ -1481,14 +1484,20 @@ EOF
$idx = 0;
foreach($aSortedElements as $sSubClass => $sClassName)
{
$oP->add("<span style=\"padding-right:2em; white-space:nowrap;\"><input type=\"checkbox\" id=\"exclude_$idx\" name=\"excluded[]\" value=\"$sSubClass\" checked onChange=\"$('#ReloadMovieBtn').button('enable')\"><label for=\"exclude_$idx\">&nbsp;".MetaModel::GetClassIcon($sSubClass)."&nbsp;$sClassName</label></span> ");
$oUiHtmlBlock->AddHtml("<div><input type=\"checkbox\" id=\"exclude_$idx\" name=\"excluded[]\" value=\"$sSubClass\" checked onChange=\"$('#ReloadMovieBtn').button('enable')\"><label for=\"exclude_$idx\">");
$oUiMedallionBlock= new MedallionIcon(MetaModel::GetClassIcon($sSubClass, false));
$oUiMedallionBlock->SetDescription($sClassName);
$oUiHtmlBlock->AddHtml(BlockRenderer::RenderBlockTemplates($oUiMedallionBlock));
$oUiHtmlBlock->AddHtml("</label></div>");
$idx++;
}
$oP->add("<p style=\"text-align:right\"><button type=\"button\" id=\"ReloadMovieBtn\" onClick=\"DoReload()\">".Dict::S('UI:Button:Refresh')."</button></p>");
$oP->add("</div></div></form>");
$oP->add("</div>\n");
$oP->add("</div>\n"); // class="not-printable"
$oUiHtmlBlock->AddHtml("</div>");
$oUiHtmlBlock->AddHtml("<button type=\"button\" id=\"ReloadMovieBtn\" class=\"ibo-button ibo-is-neutral ibo-is-regular\" onClick=\"DoReload()\">".Dict::S('UI:Button:Refresh')."</button></div></form>");
$oUiHtmlBlock->AddHtml("</div>\n");
$oUiHtmlBlock->AddHtml("</div>\n"); // class="not-printable"
$oUiSearchBlock->AddSubBlock($oUiHtmlBlock);
$oP->AddUiBlock($oUiSearchBlock);
$aAdditionalContexts = array();
foreach($aContextDefs as $sKey => $aDefinition)
{

3
css/backoffice/pages/_all.scss
View File

@@ -18,4 +18,5 @@
@import "base";
@import "preferences";
@import "attachments";
@import "attachments";
@import "impact-analysis";

93
css/backoffice/pages/_impact-analysis.scss Normal file
View File

@@ -0,0 +1,93 @@
$ibo-impact-analysis--graph-zoom-slider--height: 1.1em !default;
$ibo-impact-analysis--graph-zoom-slider--width: 10em !default;
$ibo-impact-analysis--graph-zoom-plus-minus--margin-x: 0.5em !default;
$ibo-simple-graph--grouping-threshold-additional-context--container--margin-right: 0.3em !default;
$ibo-simple-graph--grouping-threshold-additional-context--content--margin-right: 1em !default;
$ibo-impact-analysis--graph-zoom-slider--width: 10em !default;
$ibo-display-graph--search-box--criterion--content--padding-y: 0 !default;
$ibo-display-graph--search-box--criterion--content--padding-x: 15px !default;
$ibo-display-graph--search-box--criterion--content--checkbox--margin-right: 10px !default;
.graph_zoom {
display: flex;
float: right;
align-items: center;
}
.graph_zoom_slider {
height: $ibo-impact-analysis--graph-zoom-slider--height;
display: inline-block;
width: $ibo-impact-analysis--graph-zoom-slider--width;
}
.graph_zoom_plus, .graph_zoom_minus {
cursor: pointer;
display: inline-block;
margin-left: $ibo-impact-analysis--graph-zoom-plus-minus--margin-x;
margin-right:$ibo-impact-analysis--graph-zoom-plus-minus--margin-x;
}
.graph_config{
display: flex;
align-items: center;
flex-wrap: wrap;
.toolkit_menu.graph{
>ul ul {
z-index: 1;
position: absolute;
display:none;
@extend .ibo-popover-menu;
li{
@extend .ibo-popover-menu--item
}
}
}
}
.graph_separator{
flex-grow: 1;
}
.ibo-simple-graph--grouping-threshold--container, .ibo-simple-graph--additional-context--container{
margin-right: $ibo-simple-graph--grouping-threshold-additional-context--container--margin-right;
display: flex;
align-items: center;
>*{
margin-right: $ibo-simple-graph--grouping-threshold-additional-context--content--margin-right;
}
}
#graph_grouping_threshold{
width: auto;
padding-right: 0;
}
.ibo-display-graph--search-box {
.sf_criterion_row {
display: flex;
flex-wrap: wrap;
align-items: center;
> div {
align-items: center;
display: flex;
padding: $ibo-display-graph--search-box--criterion--content--padding-y $ibo-display-graph--search-box--criterion--content--padding-x;
> input {
margin-right: $ibo-display-graph--search-box--criterion--content--checkbox--margin-right;
}
.ibo-medallion-icon {
display: flex;
align-items: center;
}
}
}
#ReloadMovieBtn {
float: right;
}
}

101
js/simple_graph.js
View File

@@ -466,22 +466,28 @@ $(function()
var sPopupMenuId = 'tk_graph'+this.element.attr('id');
var sHtml = '<div class="graph_config">';
var sId = this.element.attr('id');
sHtml += this.options.labels.grouping_threshold+'&nbsp;<input type="text" name="g" value="'+this.options.grouping_threshold+'" id="'+sId+'_grouping_threshold" size="2">';
sHtml += '<div class="ibo-simple-graph--grouping-threshold--container"><label for="'+sId+'_grouping_threshold">'+this.options.labels.grouping_threshold+'</label><input type="number" name="g" value="'+this.options.grouping_threshold+'" id="'+sId+'_grouping_threshold" size="2" class="ibo-input"></div>';
if (this.options.additional_contexts.length > 0)
{
sHtml += '&nbsp;'+this.options.labels.additional_context_info+' <select id="'+sId+'_contexts" name="contexts" class="multiselect" multiple size="1">';
sHtml += '<div class="ibo-simple-graph--additional-context--container"><label for="'+sId+'_contexts">'+this.options.labels.additional_context_info+'</label><div class="ibo-input-select-wrapper"><select id="'+sId+'_contexts" name="contexts" class="multiselect ibo-input' +
' ibo-input-select" multiple size="1">';
for(var k in this.options.additional_contexts)
{
sSelected = (this.options.additional_contexts[k]['default']) ? 'selected' : '';
var sSelected = (this.options.additional_contexts[k]['default']) ? 'selected' : '';
sHtml += '<option value="'+k+'" '+sSelected+'>'+this.options.additional_contexts[k].label+'</option>';
}
sHtml += '</select>'
sHtml += '</select></div></div>'
}
sHtml += '&nbsp;<button type="button" id="'+sId+'_refresh_btn">'+this.options.labels.refresh+'</button>';
sHtml += '<div class="itop_popup toolkit_menu graph" style="font-size: 12px;" id="'+sPopupMenuId+'"><ul><li><i class="fas fa-tools"></i><i class="fas fa-caret-down"></i><ul>';
sHtml += '<button type="button" id="'+sId+'_refresh_btn" class="ibo-button ibo-is-neutral ibo-is-regular">'+this.options.labels.refresh+'</button>';
sHtml += '<div class="graph_separator"></div>';
sHtml += '<div class="graph_zoom"><label for"'+sId+'_zoom">'+this.options.labels.zoom+'</label>';
sHtml += '<div id="'+sId+'_zoom_minus" class="graph_zoom_minus ui-icon ui-icon-circle-minus"><i class="fas fa-search-minus"></i></div>';
sHtml += '<div id="'+sId+'_zoom" class="graph_zoom_slider"></div>';
sHtml += '<div id="'+sId+'_zoom_plus" class="graph_zoom_plus ui-icon ui-icon-circle-plus"><i class="fas fa-search-plus"></i></div>';
sHtml += '<div class="itop_popup toolkit_menu graph" id="'+sPopupMenuId+'"><ul><li><i class="fas fa-tools"></i><i class="fas fa-caret-down"></i><ul>';
if (this.options.export_as_pdf != null)
{
sHtml += '<li><a href="#" id="'+sPopupMenuId+'_pdf">'+this.options.export_as_pdf.label+'</a></li>';
sHtml += '<li><a href="#" id="'+sPopupMenuId+'_pdf">'+this.options.export_as_pdf.label+'</a></li>';
}
if (this.options.export_as_attachment != null)
{
@@ -489,11 +495,7 @@ $(function()
}
//sHtml += '<li><a href="#" id="'+sPopupMenuId+'_reload">Refresh</a></li>';
sHtml += '</ul></li></ul></div>';
sHtml += '<span class="graph_zoom"><span>'+this.options.labels.zoom+'</span>';
sHtml += '<div id="'+sId+'_zoom_minus" class="graph_zoom_minus ui-icon ui-icon-circle-minus"></div>';
sHtml += '<div id="'+sId+'_zoom" class="graph_zoom_slider"></div>';
sHtml += '<div id="'+sId+'_zoom_plus" class="graph_zoom_plus ui-icon ui-icon-circle-plus"></div>';
sHtml += '</span>';
sHtml += '</div>';
sHtml += '</div>';
@@ -504,7 +506,6 @@ $(function()
var me = this;
$('#'+sPopupMenuId+'_pdf').click(function() { me.export_as_pdf(); });
$('#'+sPopupMenuId+'_attachment').click(function() { me.export_as_attachment(); });
$('#'+sId+'_grouping_threshold').spinner({ min: 2});
$('#'+sId+'_zoom').slider({ min: 0, max: 5, value: 1, step: 0.25, change: function() { me._on_zoom_change( $(this).slider('value')); } });
$('#'+sId+'_zoom_plus').click(function() { $('#'+sId+'_zoom').slider('value', 0.25 + $('#'+sId+'_zoom').slider('value')); return false; });
$('#'+sId+'_zoom_minus').click(function() { $('#'+sId+'_zoom').slider('value', $('#'+sId+'_zoom').slider('value') - 0.25); return false; });
@@ -890,69 +891,13 @@ $(function()
_make_tooltips: function()
{
var me = this;
$( ".popupMenuTarget" ).tooltip({
content: function() {
var sDataId = $(this).attr('data-id');
var sTooltipContent = '<div class="tooltip-close-button" data-id="'+sDataId+'" style="display:inline-block; float:right; cursor:pointer; padding-left:0.25em;">×</div>';
sTooltipContent += me._get_tooltip_content(sDataId);
return sTooltipContent;
},
items: '.popupMenuTarget',
classes: {
'ui-tooltip': 'tooltip-simple-graph'
},
position: {
using: function( position, feedback ) {
$(this).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.appendTo( this );
}
}
})
.off( "mouseover mouseout" )
.on( "mouseover", function(event){
event.stopImmediatePropagation();
var jMe = $('text[data-id="'+$(this).attr('data-id')+'"]');
jMe.data('openTimeoutId', setTimeout(function() {
var sDataId = jMe.attr('data-id');
if (jMe.tooltip())
{
jMe.data('openTimeoutId', 0);
jMe.tooltip('open');
}
}, 1000));
})
.on( "mouseout", function(event){
event.stopImmediatePropagation();
clearTimeout($('text[data-id="'+$(this).attr('data-id')+'"]').data('openTimeoutId'));
});
/* Happens at every on_drag_end !!!
.on( "click", function(){
$( ".popupMenuTarget" ).each(function(){
var sDataId = $(this).attr('data-id');
if ($('.tooltip-close-button[data-id="'+sDataId+'"]').length == 0)
{
$(this).tooltip( 'open' );
}
else
{
$(this).tooltip( 'close' );
}
$( this ).unbind( "mouseleave" );
return false;
});
*/
$('body').on('click', '.tooltip-close-button', function() {
var sDataId = $(this).attr('data-id');
$('.popupMenuTarget[data-id="'+sDataId+'"]').tooltip('close');
});
this.element.on("click", ":not(.tooltip-simple-graph *,.tooltip-simple-graph)", function(){
$('.popupMenuTarget').each(function (i) {
clearTimeout($(this).data('openTimeoutId'));
$(this).data('openTimeoutId', 0);
$(this).tooltip("close");
});
var sTooltipContent = me._get_tooltip_content(sDataId);
$(this).attr('data-tooltip-content', sTooltipContent);
$(this).attr('data-tooltip-html-enabled', 'true');
$(this).attr('data-tooltip-hide-delay', '1500');
CombodoTooltip.InitTooltipFromMarkup($(this));
});
},
_get_tooltip_content: function(sNodeId)
@@ -966,11 +911,7 @@ $(function()
},
_close_all_tooltips: function()
{
this.element.find('.popupMenuTarget').each(function() {
clearTimeout($(this).data('openTimeoutId'));
$(this).data('openTimeoutId', 0);
$(this).tooltip('close');
});
//obsolete
},
_on_background_drag_start: function(x, y, event)
{