logauth
/
SMMP
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Now a little circle 'below' the event circle when same user

This commit is contained in:
xdrm-brackets 2017-11-12 14:53:33 +01:00
parent bc1df78120
commit 0390bdf7ad
3 changed files with 24 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
build/generic/view/history/details/main.php
View File

@ -143,15 +143,18 @@
$RAW .= "<circle cx='$x_offset' cy='$y' r='15' class='timeline around $action_class' $data_tags />";
$RAW .= "<circle cx='$x_offset' cy='$y' r='12' class='timeline center $action_class' />";
/* (5) Draw circle around if not current user */
if( $this->entry['id_user'] != $entry['id_user'] )
$RAW .= "<circle cx='$x_offset' cy='$y' r='18' class='timeline user' />";
/* (6) Draw entry icon (action) */
/* (5) Draw entry icon (action) */
$y_decal = $y - 5.5;
$RAW .= "\t<image x='$x_img_offset' y='$y_decal' width='12' height='12' xlink:href='$icon_uri' class='icon' />";
/* (6) Draw circle below if current user */
if( $this->entry['id_user'] == $entry['id_user'] ){
$y_decal = $y + 21;
$RAW .= "<circle cx='$x_offset' cy='$y_decal' r='2' class='timeline below $action_class' />";
}
}
}

26
public_html/css/container.scss
View File

@ -562,10 +562,10 @@ svg.timeline{
}
&:hover + .center + .user{ // user node
&:hover + .center + image + .below{ // below node
-webkit-transform: scale(.8);
transform: scale(.8);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
@ -580,7 +580,7 @@ svg.timeline{
}
/* (5) Set colors according to action type */
&.around, &.center{
&.around, &.center, &.below{
&.start{ fill: #2cde8b; }
&.stop{ fill: #3a3a3a; }
@ -594,25 +594,9 @@ svg.timeline{
/* (6) Make around circles a bit transparent */
&.around{ opacity: .6; }
/* (7) User circles */
&.user{
fill: none;
stroke-width: 1.5px;
stroke: #777;
stroke-opacity: .3;
}
/* (8) Set user colors according to action type */
&.center.start + .user{ stroke: #2cde8b; }
&.center.stop + .user{ stroke: #3a3a3a; }
&.center.lock + .user{ stroke: #e04343; }
&.center.unlock + .user{ stroke: #af1c1c; }
&.center.signal + .user{ stroke: #3258d8; }
&.center.unsignal + .user{ stroke: #2041ab; }
}
/* (9) Avoid icons inside center circles to block :hover */
/* (7) Avoid icons inside center circles to block :hover */
image{
-webkit-pointer-events: none;

53
public_html/css/min/container.css
View File

@ -700,7 +700,7 @@ article.check-table > div > span input[type='checkbox']:checked + label[for] {
=========================================================*/
svg.timeline {
/* (1) svg circles -> set right transform-origin */
/* (9) Avoid icons inside center circles to block :hover */
/* (7) Avoid icons inside center circles to block :hover */
}
svg.timeline circle.timeline {
@ -711,8 +711,6 @@ svg.timeline circle.timeline {
/* (4) Remove center circle event */
/* (5) Set colors according to action type */
/* (6) Make around circles a bit transparent */
/* (7) User circles */
/* (8) Set user colors according to action type */
}
svg.timeline circle.timeline.around {
@ -725,9 +723,9 @@ svg.timeline circle.timeline.around:hover + .center {
transform: scale(1.2);
}
svg.timeline circle.timeline.around:hover + .center + .user {
-webkit-transform: scale(0.8);
transform: scale(0.8);
svg.timeline circle.timeline.around:hover + .center + image + .below {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
svg.timeline circle.timeline.center {
@ -735,27 +733,27 @@ svg.timeline circle.timeline.center {
pointer-events: none;
}
svg.timeline circle.timeline.around.start, svg.timeline circle.timeline.center.start {
svg.timeline circle.timeline.around.start, svg.timeline circle.timeline.center.start, svg.timeline circle.timeline.below.start {
fill: #2cde8b;
}
svg.timeline circle.timeline.around.stop, svg.timeline circle.timeline.center.stop {
svg.timeline circle.timeline.around.stop, svg.timeline circle.timeline.center.stop, svg.timeline circle.timeline.below.stop {
fill: #3a3a3a;
}
svg.timeline circle.timeline.around.lock, svg.timeline circle.timeline.center.lock {
svg.timeline circle.timeline.around.lock, svg.timeline circle.timeline.center.lock, svg.timeline circle.timeline.below.lock {
fill: #e04343;
}
svg.timeline circle.timeline.around.unlock, svg.timeline circle.timeline.center.unlock {
svg.timeline circle.timeline.around.unlock, svg.timeline circle.timeline.center.unlock, svg.timeline circle.timeline.below.unlock {
fill: #af1c1c;
}
svg.timeline circle.timeline.around.signal, svg.timeline circle.timeline.center.signal {
svg.timeline circle.timeline.around.signal, svg.timeline circle.timeline.center.signal, svg.timeline circle.timeline.below.signal {
fill: #3258d8;
}
svg.timeline circle.timeline.around.unsignal, svg.timeline circle.timeline.center.unsignal {
svg.timeline circle.timeline.around.unsignal, svg.timeline circle.timeline.center.unsignal, svg.timeline circle.timeline.below.unsignal {
fill: #2041ab;
}
@ -763,37 +761,6 @@ svg.timeline circle.timeline.around {
opacity: .6;
}
svg.timeline circle.timeline.user {
fill: none;
stroke-width: 1.5px;
stroke: #777;
stroke-opacity: .3;
}
svg.timeline circle.timeline.center.start + .user {
stroke: #2cde8b;
}
svg.timeline circle.timeline.center.stop + .user {
stroke: #3a3a3a;
}
svg.timeline circle.timeline.center.lock + .user {
stroke: #e04343;
}
svg.timeline circle.timeline.center.unlock + .user {
stroke: #af1c1c;
}
svg.timeline circle.timeline.center.signal + .user {
stroke: #3258d8;
}
svg.timeline circle.timeline.center.unsignal + .user {
stroke: #2041ab;
}
svg.timeline image {
-webkit-pointer-events: none;
pointer-events: none;