mirror of https://github.com/MISP/MISP
chg: [galaxyMatrix:popup] Layout improvement. Make it scrollable!
mokaddem
parent
4fbe857f90
commit
eb81e03a64
|
|
@ -101,12 +101,12 @@ foreach($tabs as $tabName => $column):
|
|||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div id="matrix_container" class="fixed-table-container-inner" style="max-height: 670px;" data-picking-mode="<?php echo $pickingMode ? 'true' : 'false'; ?>">
|
||||
<div id="matrix_container" class="fixed-table-container-inner" style="" data-picking-mode="<?php echo $pickingMode ? 'true' : 'false'; ?>">
|
||||
<div class="tab-content">
|
||||
<?php foreach($tabs as $tabName => $column): ?>
|
||||
<div class="tab-pane <?php echo $tabName==$defaultTabName ? "active" : ""; ?>" id="tabMatrix-<?php echo h($tabName); ?>">
|
||||
<div class="header-background"></div>
|
||||
<div class="fixed-table-container-inner" style="max-height: 670px;">
|
||||
<div class="fixed-table-container-inner" style="">
|
||||
<table class="table table-condensed matrix-table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -197,5 +197,5 @@ foreach($tabs as $tabName => $column):
|
|||
</select>
|
||||
</div>
|
||||
<div class="templateChoiceButton btn-matrix-submit submit-container hide"><?php echo __('Submit'); ?></div>
|
||||
<div role="button" tabindex="0" aria-label="<?php echo __('Cancel');?>" title="<?php echo __('Cancel');?>" class="templateChoiceButton templateChoiceButtonLast" onClick="cancelPopoverForm('#popover_form_large');"><?php echo __('Cancel'); ?></div>
|
||||
<div role="button" tabindex="0" aria-label="<?php echo __('Cancel');?>" title="<?php echo __('Cancel');?>" class="templateChoiceButton templateChoiceButtonLast" onClick="cancelPopoverForm('#popover_matrix');"><?php echo __('Cancel'); ?></div>
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@
|
|||
<body>
|
||||
<div id="popover_form" class="ajax_popover_form"></div>
|
||||
<div id="popover_form_large" class="ajax_popover_form ajax_popover_form_large"></div>
|
||||
<div id="popover_matrix" class="ajax_popover_form ajax_popover_matrix"></div>
|
||||
<div id="popover_box" class="popover_box"></div>
|
||||
<div id="screenshot_box" class="screenshot_box"></div>
|
||||
<div id="confirmation_box" class="confirmation_box"></div>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ td.matrix-interaction.cell-picked {
|
|||
.fixed-table-container-inner {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 670px;
|
||||
max-height: calc(80vh - 100px);
|
||||
}
|
||||
|
||||
.extra-wrap {
|
||||
|
|
|
|||
|
|
@ -846,6 +846,14 @@ a.proposal_link_red:hover {
|
|||
left: calc(50% - 700px);
|
||||
}
|
||||
|
||||
.ajax_popover_matrix {
|
||||
width: 96vw;
|
||||
min-width: 1400px;
|
||||
left: 2vw;
|
||||
max-height: 80vh;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.popover_box {
|
||||
display:none;
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -13,13 +13,6 @@
|
|||
|
||||
$('#attack-matrix-tabscontroller span').off('click.tab').on('click.tab', function (e) {
|
||||
$(this).tab('show');
|
||||
var jfilter = '.info_container_eventgraph_network';
|
||||
var colNum = $(jfilter+' .matrix-table > thead > tr > th :visible').length;
|
||||
$('#attackmatrix_div').css('min-width', 100*colNum);
|
||||
jfilter = '.ajax_popover_form';
|
||||
var colNum = $(jfilter+' .matrix-table > thead > tr > th :visible').length;
|
||||
$('#popover_form_large').css('min-width', 100*colNum);
|
||||
adapt_position_from_viewport(100*colNum);
|
||||
});
|
||||
|
||||
// form
|
||||
|
|
@ -31,7 +24,7 @@
|
|||
|
||||
$('.ajax_popover_form .btn-matrix-submit').click(function() {
|
||||
makeTagging(pickedGalaxies);
|
||||
cancelPopoverForm('#popover_form_large');
|
||||
cancelPopoverForm('#popover_matrix');
|
||||
});
|
||||
var scoredCells = $('.ajax_popover_form .heatCell').filter(function() {
|
||||
return $(this).attr('data-score') > 0;
|
||||
|
|
@ -177,24 +170,8 @@
|
|||
$(jfilter + ' #matrix-heatmap-legend-caret-value').text(score);
|
||||
}
|
||||
|
||||
function adapt_position_from_viewport(minOverwrite) {
|
||||
minOverwrite = minOverwrite !== undefined ? minOverwrite : minWidth;
|
||||
minOverwrite = minWidth > minOverwrite ? minWidth : minOverwrite;
|
||||
if($(window).width()*0.5+700 <= minOverwrite) {
|
||||
var topOff = $('#popover_form_large').offset().top;
|
||||
savedTopOffset = topOff >= $(document).scrollTop() ? topOff - $(document).scrollTop() : topOff;
|
||||
$('#popover_form_large').css({
|
||||
position: 'absolute',
|
||||
left: '10px',
|
||||
top: savedTopOffset+$(document).scrollTop()+'px'
|
||||
});
|
||||
} else {
|
||||
$('#popover_form_large').css({
|
||||
position: 'absolute',
|
||||
left: '',
|
||||
top: savedTopOffset
|
||||
});
|
||||
}
|
||||
function adapt_position_from_viewport() {
|
||||
$('#popover_matrix').css('top', document.documentElement.scrollTop + 120 + 'px');
|
||||
}
|
||||
|
||||
function matrixContextualMenu(cell, x, y, tagName, tagId, func_name) {
|
||||
|
|
|
|||
|
|
@ -1456,20 +1456,23 @@ function templateElementFileCategoryChange(category) {
|
|||
}
|
||||
}
|
||||
|
||||
function openPopup(id) {
|
||||
var window_height = $(window).height();
|
||||
var popup_height = $(id).height();
|
||||
if (window_height < popup_height) {
|
||||
$(id).css("top", 50);
|
||||
$(id).css("height", window_height);
|
||||
$(id).addClass('vertical-scroll');
|
||||
} else {
|
||||
if (window_height > (300 + popup_height)) {
|
||||
var top_offset = ((window_height - popup_height) / 2) - 150;
|
||||
function openPopup(id, adjust_layout) {
|
||||
adjust_layout = adjust_layout === undefined ? true : adjust_layout;
|
||||
if (adjust_layout) {
|
||||
var window_height = $(window).height();
|
||||
var popup_height = $(id).height();
|
||||
if (window_height < popup_height) {
|
||||
$(id).css("top", 50);
|
||||
$(id).css("height", window_height);
|
||||
$(id).addClass('vertical-scroll');
|
||||
} else {
|
||||
var top_offset = (window_height - popup_height) / 2;
|
||||
if (window_height > (300 + popup_height)) {
|
||||
var top_offset = ((window_height - popup_height) / 2) - 150;
|
||||
} else {
|
||||
var top_offset = (window_height - popup_height) / 2;
|
||||
}
|
||||
$(id).css("top", top_offset + 'px');
|
||||
}
|
||||
$(id).css("top", top_offset + 'px');
|
||||
}
|
||||
$("#gray_out").fadeIn();
|
||||
$(id).fadeIn();
|
||||
|
|
@ -1555,7 +1558,7 @@ function openPopover(clicked, data, hover, placement) {
|
|||
|
||||
function getMatrixPopup(scope, scope_id, galaxy_id) {
|
||||
cancelPopoverForm();
|
||||
getPopup(scope_id + '/' + galaxy_id + '/' + scope, 'events', 'viewGalaxyMatrix', '', '#popover_form_large');
|
||||
getPopup(scope_id + '/' + galaxy_id + '/' + scope, 'events', 'viewGalaxyMatrix', '', '#popover_matrix');
|
||||
}
|
||||
|
||||
function getPopup(id, context, target, admin, popupType) {
|
||||
|
|
@ -1578,7 +1581,7 @@ function getPopup(id, context, target, admin, popupType) {
|
|||
success:function (data, textStatus) {
|
||||
$(".loading").hide();
|
||||
$(popupType).html(data);
|
||||
openPopup(popupType);
|
||||
openPopup(popupType, false);
|
||||
},
|
||||
error:function() {
|
||||
$(".loading").hide();
|
||||
|
|
@ -3702,6 +3705,7 @@ $(document).keyup(function(e){
|
|||
$("#gray_out").fadeOut();
|
||||
$("#popover_form").fadeOut();
|
||||
$("#popover_form_large").fadeOut();
|
||||
$("#popover_matrix").fadeOut();
|
||||
$("#screenshot_box").fadeOut();
|
||||
$("#popover_box").fadeOut();
|
||||
$("#confirmation_box").fadeOut();
|
||||
|
|
|
|||
Loading…
Reference in New Issue