mirror of https://github.com/MISP/MISP
chg: [UI] Nicer pivots
Jakub Onderka
parent
37f1e1c498
commit
65fb06fccf
|
|
@ -1,14 +1,7 @@
|
|||
<?php
|
||||
echo $this->Html->css('tree');
|
||||
?>
|
||||
<?= $this->Html->css('tree'); ?>
|
||||
<div>
|
||||
<div class="tree">
|
||||
<span style="white-space:nowrap;">
|
||||
<?php
|
||||
echo $this->Pivot->convertPivotToHTML($pivot, $event['Event']['id']);
|
||||
?>
|
||||
</span>
|
||||
</div>
|
||||
<div style="clear:both">
|
||||
<?= $this->Pivot->convertPivotToHTML($pivot, $event['Event']['id']); ?>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,82 +1,77 @@
|
|||
<?php
|
||||
App::uses('AppHelper', 'View/Helper');
|
||||
|
||||
class PivotHelper extends AppHelper {
|
||||
|
||||
private function __doConvert($pivot, $currentEvent, $activeText=false) {
|
||||
$data = null;
|
||||
$text = $pivot['id'] . ': ';
|
||||
$active = '';
|
||||
$pivot['info'] = h($pivot['info']);
|
||||
// Truncate string if longer than (11 - length of event id) chars to fit the pivot bubble
|
||||
if (strlen($pivot['info']) > (11 - strlen((string)$pivot['id'])) && strlen($pivot['info']) > 9) {
|
||||
$text .= mb_substr($pivot['info'], 0, 6) . '...';
|
||||
} else {
|
||||
$text .= $pivot['info'];
|
||||
}
|
||||
|
||||
// Colour the text white if it is a highlighted pivot element
|
||||
$pivotType = 'pivotText';
|
||||
$pivotSpanType = '';
|
||||
if ($activeText) {
|
||||
$pivotType = 'pivotTextBlue';
|
||||
$pivotSpanType = 'pivotSpanBlue';
|
||||
}
|
||||
|
||||
$data[] = '<span class ="'.$pivotSpanType.'">';
|
||||
if ($pivot['deletable']) {
|
||||
$data[] = '<a class="pivotDelete icon-remove" href="' . h(Configure::read('MISP.baseurl')) . '/events/removePivot/' . $pivot['id'] . '/' . $currentEvent . '" title="' . __('Remove pivot') . ' "></a>';
|
||||
}
|
||||
$data[] = '<a class="' . $pivotType . '" href="' . h(Configure::read('MISP.baseurl')) . '/events/view/' . $pivot['id'] . '/1/' . $currentEvent . '" title="' . h($pivot['info']) . ' (' . $pivot['date'] . ')">' . h($text) . '</a>';
|
||||
$data[] = '</span>';
|
||||
if (!empty($pivot['children'])) {
|
||||
foreach ($pivot['children'] as $k => $v) {
|
||||
$extra = '';
|
||||
if ($v['id'] == $currentEvent) {
|
||||
$active = ' activePivot';
|
||||
}
|
||||
if ($k > 0) {
|
||||
$pixelDifference = $pivot['children'][$k]['height'] - $pivot['children'][$k-1]['height'];
|
||||
$lineDifference = $pixelDifference / 50;
|
||||
$extra = ' distance' . $lineDifference;
|
||||
}
|
||||
$data[] = '<div class="pivotElement' . $extra . $active . '" style="top:' . $pivot['children'][$k]['height'] . 'px;">';
|
||||
if ($active != '') $temp = $this->__doConvert($v, $currentEvent, true);
|
||||
else $temp = $this->__doConvert($v, $currentEvent);
|
||||
$data = array_merge($data, $temp);
|
||||
$data[] = '</div>';
|
||||
$active = '';
|
||||
}
|
||||
}
|
||||
return $data;
|
||||
class PivotHelper extends AppHelper
|
||||
{
|
||||
public function convertPivotToHTML(array $pivot, $currentEvent)
|
||||
{
|
||||
$lookingAtRoot = false;
|
||||
$pivotType = '';
|
||||
if ($pivot['id'] == $currentEvent) {
|
||||
$lookingAtRoot = true;
|
||||
$pivotType = ' activePivot';
|
||||
}
|
||||
|
||||
public function convertPivotToHTML($pivot, $currentEvent) {
|
||||
$lookingAtRoot = false;
|
||||
$pivotType = '';
|
||||
if ($pivot['id'] == $currentEvent) {
|
||||
$lookingAtRoot = true;
|
||||
$pivotType = ' activePivot';
|
||||
}
|
||||
$temp = $this->__doConvert($pivot, $currentEvent, $lookingAtRoot);
|
||||
$height = $this->__findMaxHeight($pivot);
|
||||
$height = $height + 50;
|
||||
$data = array('<div class="pivotElement firstPivot ' . $pivotType . '" style="height:' . $height . 'px;">');
|
||||
$data = array_merge($data, $temp);
|
||||
$data = array_merge($data, array('</div>'));
|
||||
foreach ($data as $k => $v) {
|
||||
echo ($v);
|
||||
}
|
||||
}
|
||||
|
||||
private function __findMaxHeight($pivot) {
|
||||
$height = $pivot['height'];
|
||||
$heightToAdd = 0;
|
||||
$temp = 0;
|
||||
foreach ($pivot['children'] as $k => $v) {
|
||||
$temp = $this->__findMaxHeight($v);
|
||||
if ($temp > $heightToAdd) $heightToAdd = $temp;
|
||||
}
|
||||
return $height + $heightToAdd;
|
||||
$temp = $this->__doConvert($pivot, $currentEvent, $lookingAtRoot);
|
||||
$height = $this->__findMaxHeight($pivot);
|
||||
$height = $height + 50;
|
||||
echo '<div class="pivotElement firstPivot ' . $pivotType . '" style="height:' . $height . 'px;">';
|
||||
foreach ($temp as $v) {
|
||||
echo $v;
|
||||
}
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
private function __doConvert($pivot, $currentEvent, $activeText=false)
|
||||
{
|
||||
$data = null;
|
||||
$info = h($pivot['info']);
|
||||
$text = $pivot['id'] . ': ' . $info;
|
||||
$active = '';
|
||||
|
||||
// Colour the text white if it is a highlighted pivot element
|
||||
$pivotType = 'pivotText';
|
||||
$pivotSpanType = '';
|
||||
if ($activeText) {
|
||||
$pivotType = 'pivotTextBlue';
|
||||
$pivotSpanType = 'pivotSpanBlue';
|
||||
}
|
||||
|
||||
$data[] = '<span class="'.$pivotSpanType.'">';
|
||||
if ($pivot['deletable']) {
|
||||
$data[] = '<a class="pivotDelete fa fa-times" href="' . h(Configure::read('MISP.baseurl')) . '/events/removePivot/' . $pivot['id'] . '/' . $currentEvent . '" title="' . __('Remove pivot') . '"></a>';
|
||||
}
|
||||
$data[] = '<a class="' . $pivotType . '" href="' . h(Configure::read('MISP.baseurl')) . '/events/view/' . $pivot['id'] . '/1/' . $currentEvent . '" title="' . $info . ' (' . $pivot['date'] . ')">' . $text . '</a>';
|
||||
$data[] = '</span>';
|
||||
if (!empty($pivot['children'])) {
|
||||
foreach ($pivot['children'] as $k => $v) {
|
||||
$extra = '';
|
||||
if ($v['id'] == $currentEvent) {
|
||||
$active = ' activePivot';
|
||||
}
|
||||
if ($k > 0) {
|
||||
$pixelDifference = $pivot['children'][$k]['height'] - $pivot['children'][$k-1]['height'];
|
||||
$lineDifference = $pixelDifference / 50;
|
||||
$extra = ' distance' . $lineDifference;
|
||||
}
|
||||
$data[] = '<div class="pivotElement' . $extra . $active . '" style="top:' . $pivot['children'][$k]['height'] . 'px;">';
|
||||
if ($active != '') $temp = $this->__doConvert($v, $currentEvent, true);
|
||||
else $temp = $this->__doConvert($v, $currentEvent);
|
||||
$data = array_merge($data, $temp);
|
||||
$data[] = '</div>';
|
||||
$active = '';
|
||||
}
|
||||
}
|
||||
return $data;
|
||||
}
|
||||
|
||||
private function __findMaxHeight(array $pivot)
|
||||
{
|
||||
$height = $pivot['height'];
|
||||
$heightToAdd = 0;
|
||||
foreach ($pivot['children'] as $v) {
|
||||
$temp = $this->__findMaxHeight($v);
|
||||
if ($temp > $heightToAdd) $heightToAdd = $temp;
|
||||
}
|
||||
return $height + $heightToAdd;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.tree {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tree div:not(:nth-of-type(1))::before {
|
||||
|
|
@ -8,8 +9,8 @@
|
|||
position: absolute;
|
||||
left: -15px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 0px solid #ccc;
|
||||
border-right: 0px solid #ccc;
|
||||
border-top: 0 solid #ccc;
|
||||
border-right: 0 solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
width: 15px;
|
||||
}
|
||||
|
|
@ -49,10 +50,10 @@
|
|||
height: 350px;
|
||||
}
|
||||
|
||||
.distance8::before {
|
||||
.distance8::before {
|
||||
top: -385px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.distance9::before {
|
||||
top: -435px;
|
||||
|
|
@ -66,15 +67,15 @@
|
|||
|
||||
.tree div:last-of-type::before {
|
||||
border-bottom-left-radius: 7px;
|
||||
-webkit-bottom-left-border-radius: 7px;
|
||||
-moz-border-bottom-left-radius: 7px;
|
||||
}
|
||||
|
||||
.tree div:first-of-type::before {
|
||||
content: '';
|
||||
position: absolute; top: 15px; left: -34px;
|
||||
position: absolute;
|
||||
top: 15px; left: -34px;
|
||||
border-top: 1px solid #ccc;
|
||||
width: 35px; height: 20px;
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.firstPivot::before {
|
||||
|
|
@ -82,31 +83,27 @@
|
|||
}
|
||||
|
||||
.firstPivot {
|
||||
left:0px;
|
||||
top:0px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tree div span{
|
||||
.tree div span {
|
||||
border: 1px solid #ccc;
|
||||
padding-left:5px;
|
||||
padding-right:5px;
|
||||
padding-top:4px;
|
||||
padding-bottom:2px;
|
||||
width: 105px;
|
||||
|
||||
padding: 4px 5px 2px;
|
||||
width: 130px;
|
||||
display: inline-block;
|
||||
border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tree .pivotElement div{
|
||||
.tree .pivotElement div {
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
left: 175px;
|
||||
}
|
||||
|
||||
.pivotDelete {
|
||||
vertical-align: text-top;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.pivotText {
|
||||
|
|
@ -126,6 +123,9 @@
|
|||
.pivotSpanBlue {
|
||||
background-color: #0088cc;
|
||||
border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pivotSpanBlue a, .pivotSpanBlue a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue