Now history.timeline is vertical
This commit is contained in:
xdrm-brackets
parent
57d7abb7b6
commit
20baf93bf3
|
|
@ -9,9 +9,9 @@
|
|||
|
||||
class main extends i_view{
|
||||
|
||||
public $id_history;
|
||||
private $timeline = [];
|
||||
private $entry = [];
|
||||
public $id_history;
|
||||
public $timeline = [];
|
||||
public $entry = [];
|
||||
|
||||
|
||||
/* (1) Constructor
|
||||
|
|
@ -56,8 +56,6 @@
|
|||
|
||||
/* (2) Format timeline data to svg render
|
||||
*
|
||||
* @timeline<array> Timeline data
|
||||
*
|
||||
* @return svg<String> SVG raw render
|
||||
*
|
||||
---------------------------------------------------------*/
|
||||
|
|
@ -75,102 +73,86 @@
|
|||
$c = 0;
|
||||
$cl = count($this->timeline);
|
||||
|
||||
/* (4) Create ranges of size 15 */
|
||||
$r_size = 10; // set the number of actions by line
|
||||
$rl = floor( $cl / $r_size ); // calculate the number of whole lines
|
||||
$lrl = $cl % $r_size; // calculate the number of actions in the last line
|
||||
$y_range_diff = 100;
|
||||
$total_height = ($lrl == 0 ) ? $y_range_diff*$rl : $y_range_diff*($rl+1); // total height (number of entries + last if not empty)
|
||||
|
||||
/* (4) Useful variables */
|
||||
$y_pad = 80; // padding between each node
|
||||
$line_pad = 50; // padding on each LINE end
|
||||
$line_height = ( $cl + 1 ) * $y_pad; // line height (each node * @y_pad + @y_pad)
|
||||
$height = $line_height + 2*$line_pad; // svg height
|
||||
$width = 100; // svg width
|
||||
$x = $width/2; // center width
|
||||
|
||||
/* (5) Svg tag */
|
||||
$RAW .= "<svg width='1000' height='$total_height' viewBox='0 0 1000 $total_height' class='timeline'>";
|
||||
$RAW .= "<svg width='$width' height='$height' viewBox='0 0 $width $height' class='timeline'>";
|
||||
|
||||
/* (6) Start CIRCLE */
|
||||
$RAW .= "<circle cx='50' cy='50' r='6' fill='#edf0f5' class='tstart'/>";
|
||||
$RAW .= "<circle cx='50' cy='50' r='4' fill='#555' class='tstart'/>";
|
||||
$RAW .= "<circle cx='$x' cy='$line_pad' r='7' fill='#edf0f5' class='tstart'/>";
|
||||
$RAW .= "<circle cx='$x' cy='$line_pad' r='4' fill='#555' class='tstart'/>";
|
||||
|
||||
|
||||
for( $r = 0 ; $r <= $rl ; $r++ ){
|
||||
/* (2) Build barebone
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Default TIMELINE */
|
||||
$line_end_y = $line_height + $line_pad;
|
||||
$RAW .= "<path d='m$x $line_pad L$x $line_end_y' style='stroke-dasharray: 3px;' stroke='#444' class='timeline line'/>";
|
||||
|
||||
// if last line is empty -> stop here
|
||||
if( $r == $rl && $lrl == 0 )
|
||||
break;
|
||||
|
||||
$y = $y_range_diff*$r + 50;
|
||||
/* (3) Build each action
|
||||
---------------------------------------------------------*/
|
||||
for( $c = 0 ; $c < $cl ; $c++ ){
|
||||
|
||||
/* (2) Build barebone
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Default TIMELINE */
|
||||
if( $r < $rl ){
|
||||
/* (1) Calculate X */
|
||||
$y = $line_pad + $y_pad + $c*$y_pad;
|
||||
|
||||
$RAW .= "<path d='m50 $y L900 $y' style='stroke-dasharray: 3px;' stroke='#444' class='timeline line'/>";
|
||||
/* (2) Get entry data */
|
||||
$entry = $this->timeline[$c];
|
||||
|
||||
/* (2) Last TIMELINE (can be shorter) */
|
||||
}else{ // if last line -> trace timeline until last element +1
|
||||
/* (3) Get useful data */
|
||||
$action_class = strtolower($entry['action_name']);
|
||||
$icon_uri = '/src/static/timeline/'.$action_class.'@'.$this->get_action_color($action_class).'.svg';
|
||||
$data_user = "data-user='".$entry['user_name']."'";
|
||||
$data_machine = " data-machine='".$entry['machine_name']."'";
|
||||
$data_action = " data-action='".$entry['action_name']."'";
|
||||
$data_time = " data-time='".date('H:i:s d/m/Y', $entry['timestamp'])."'";
|
||||
$data_tags = $data_user.$data_machine.$data_action.$data_time;
|
||||
|
||||
$len = 100 + $lrl*800/$r_size;
|
||||
$RAW .= "<path d='m50 $y L$len $y' style='stroke-dasharray: 3px;' stroke='#444' class='timeline line'/>";
|
||||
$y_img = $y - 5.5;
|
||||
|
||||
/* (4) Draw entry circles */
|
||||
$RAW .= "<circle cx='$x' cy='$y' r='15' class='timeline around $action_class' $data_tags />";
|
||||
$RAW .= "<circle cx='$x' cy='$y' r='12' class='timeline center $action_class' />";
|
||||
|
||||
/* (5) Draw entry icon (action) */
|
||||
$x_decal = $x - 5.5;
|
||||
$RAW .= "\t<image x='$x_decal' y='$y_img' 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'] ){
|
||||
$x_decal = $x - 21;
|
||||
$RAW .= "<circle cx='$x_decal' cy='$y' r='2' class='timeline below $action_class' />";
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* (3) Build each action
|
||||
---------------------------------------------------------*/
|
||||
$el_len = ( $r == $rl ) ? $lrl : $r_size ;// number of elements on the line
|
||||
for( $c = 0 ; $c < $el_len ; $c++ ){
|
||||
|
||||
/* (1) Display nothing if last entry and is empty */
|
||||
if( !isset($this->timeline[$r*$r_size+$c]) )
|
||||
break;
|
||||
|
||||
/* (2) Get entry data */
|
||||
$entry = $this->timeline[$r*$r_size+$c];
|
||||
|
||||
/* (3) Get useful data */
|
||||
$action_class = strtolower($entry['action_name']);
|
||||
$icon_uri = '/src/static/timeline/'.$action_class.'@'.$this->get_action_color($action_class).'.svg';
|
||||
$x_offset = 100 + $c*800/$r_size;
|
||||
$x_img_offset = $x_offset - 5.5;
|
||||
$data_user = "data-user='".$entry['id_user']."'";
|
||||
$data_machine = " data-machine='".$entry['id_machine']."'";
|
||||
$data_action = " data-action='".$entry['id_action']."'";
|
||||
$data_time = " data-time='".date('H:i:s d/m/Y', $entry['timestamp'])."'";
|
||||
$data_tags = $data_user.$data_machine.$data_action.$data_time;
|
||||
|
||||
/* (4) Draw entry circles */
|
||||
$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 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' />";
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (4) Close SVG
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Stop CIRCLE */
|
||||
$x_offset = 100 + $c*800/$r_size;
|
||||
$RAW .= "<circle cx='$x_offset' cy='$y' r='6' fill='#edf0f5' class='tstop' />";
|
||||
$RAW .= "<circle cx='$x_offset' cy='$y' r='4' fill='#555' class='tstop' />";
|
||||
$y = $line_height + $line_pad;
|
||||
$RAW .= "<circle cx='$x' cy='$y' r='6' fill='#edf0f5' class='tstop' />";
|
||||
$RAW .= "<circle cx='$x' cy='$y' r='4' fill='#555' class='tstop' />";
|
||||
|
||||
/* (2) Close SVG tag */
|
||||
$RAW .= "</svg>";
|
||||
|
||||
|
||||
/* (5) Create invisible infobox (for now)
|
||||
---------------------------------------------------------*/
|
||||
$RAW .= "<div class='timeline infobox'></div>";
|
||||
|
||||
|
||||
|
||||
return $RAW;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<!-- <span class='in-dev'>In development.. This feature will soon be available.</span> -->
|
||||
|
||||
{{ core.svg() | raw }}
|
||||
<article class='timeline container' data-length='{{ core.timeline | length }}'>
|
||||
{{ core.svg() | raw }}
|
||||
</article>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ $form-grey-color: #8d8d8d;
|
|||
|
||||
/* GESTION DES LONGUEURS */
|
||||
$menu-side-width: 4em;
|
||||
$sub-menu-side-width: 7.5em;
|
||||
|
||||
|
||||
// POUR RESOURCE_DISPATCHER
|
||||
|
|
|
|||
|
|
@ -458,149 +458,189 @@
|
|||
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* [4] Tableau à cocher
|
||||
=========================================================*/
|
||||
article.check-table{
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
|
||||
& > div{
|
||||
/* [4] Tableau à cocher
|
||||
=========================================================*/
|
||||
article.check-table{
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
flex: 100%;
|
||||
padding: .8em 0;
|
||||
|
||||
color: #333;
|
||||
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
transition: background .2s ease-in-out;
|
||||
|
||||
&:nth-child(2n){
|
||||
background: #fdfdfd;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
|
||||
& > span{
|
||||
flex: 100%;
|
||||
& > div{
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
|
||||
flex: 100%;
|
||||
padding: .8em 0;
|
||||
|
||||
/* (1) Gestion du checkbox hack */
|
||||
input[type='checkbox']{ display: none; }
|
||||
color: #333;
|
||||
|
||||
input[type='checkbox'] + label[for]{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
// border-radius: 50% / 50%;
|
||||
transition: background .2s ease-in-out;
|
||||
|
||||
background: url('/src/static/container/checkbox@999999.svg') center center no-repeat;
|
||||
background-size: 100% auto;;
|
||||
|
||||
transition: box-shadow .2s ease-in-out;
|
||||
|
||||
cursor: pointer;
|
||||
&:nth-child(2n){
|
||||
background: #fdfdfd;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked + label[for]{
|
||||
background-image: url('/src/static/container/checkbox@checked@007dd8.svg');
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
& > span{
|
||||
flex: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
/* (1) Gestion du checkbox hack */
|
||||
input[type='checkbox']{ display: none; }
|
||||
|
||||
input[type='checkbox'] + label[for]{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
|
||||
// border-radius: 50% / 50%;
|
||||
|
||||
background: url('/src/static/container/checkbox@999999.svg') center center no-repeat;
|
||||
background-size: 100% auto;;
|
||||
|
||||
transition: box-shadow .2s ease-in-out;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked + label[for]{
|
||||
background-image: url('/src/static/container/checkbox@checked@007dd8.svg');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* [5] Timeline SVG
|
||||
=========================================================*/
|
||||
article.timeline.container{
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: calc( 100vw - #{$menu-side-width} - #{$sub-menu-side-width} - 11em );
|
||||
flex: 1em;
|
||||
|
||||
overflow: hidden;
|
||||
// overflow-x: auto;
|
||||
|
||||
svg.timeline{
|
||||
|
||||
/* (1) svg circles -> set right transform-origin */
|
||||
& circle.timeline{
|
||||
|
||||
-webkit-transform-origin: 50% 50% 0;
|
||||
transform-origin: 50% 50% 0;
|
||||
|
||||
transition: transform .2s ease-in-out;
|
||||
|
||||
/* (2) Set cursor to pointer */
|
||||
&.around{
|
||||
cursor: pointer;
|
||||
|
||||
/* (3) Dispatch event to next nodes */
|
||||
&:hover + .center{ // center node
|
||||
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
|
||||
}
|
||||
|
||||
&:hover + .center + image + .below{ // below node
|
||||
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* (4) Remove center circle event */
|
||||
&.center{
|
||||
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
/* (5) Set colors according to action type */
|
||||
&.around, &.center, &.below{
|
||||
|
||||
&.start{ fill: #2cde8b; }
|
||||
&.stop{ fill: #3a3a3a; }
|
||||
&.lock{ fill: #e04343; }
|
||||
&.unlock{ fill: #af1c1c; }
|
||||
&.signal{ fill: #3258d8; }
|
||||
&.unsignal{ fill: #2041ab; }
|
||||
|
||||
}
|
||||
|
||||
/* (6) Make around circles a bit transparent */
|
||||
&.around{ opacity: .6; }
|
||||
|
||||
}
|
||||
|
||||
/* (7) Avoid icons inside center circles to block :hover */
|
||||
image{
|
||||
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* (8) Timeline infobox */
|
||||
div.timeline.infobox{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
padding: .5em 1em;
|
||||
|
||||
border: 1px solid #b1b6c0;
|
||||
border-radius: 3px;
|
||||
|
||||
background: #d8deea;
|
||||
color: #444;
|
||||
|
||||
&.active{
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* [4] Timeline SVG
|
||||
=========================================================*/
|
||||
svg.timeline{
|
||||
|
||||
/* (1) svg circles -> set right transform-origin */
|
||||
& circle.timeline{
|
||||
|
||||
-webkit-transform-origin: 50% 50% 0;
|
||||
transform-origin: 50% 50% 0;
|
||||
|
||||
transition: transform .2s ease-in-out;
|
||||
|
||||
/* (2) Set cursor to pointer */
|
||||
&.around{
|
||||
cursor: pointer;
|
||||
|
||||
/* (3) Dispatch event to next nodes */
|
||||
&:hover + .center{ // center node
|
||||
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
|
||||
}
|
||||
|
||||
&:hover + .center + image + .below{ // below node
|
||||
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* (4) Remove center circle event */
|
||||
&.center{
|
||||
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
/* (5) Set colors according to action type */
|
||||
&.around, &.center, &.below{
|
||||
|
||||
&.start{ fill: #2cde8b; }
|
||||
&.stop{ fill: #3a3a3a; }
|
||||
&.lock{ fill: #e04343; }
|
||||
&.unlock{ fill: #af1c1c; }
|
||||
&.signal{ fill: #3258d8; }
|
||||
&.unsignal{ fill: #2041ab; }
|
||||
|
||||
}
|
||||
|
||||
/* (6) Make around circles a bit transparent */
|
||||
&.around{ opacity: .6; }
|
||||
|
||||
}
|
||||
|
||||
/* (7) Avoid icons inside center circles to block :hover */
|
||||
image{
|
||||
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
overflow-x: none;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,10 @@
|
|||
/* [2] INLINE-BOX pour afficher les listes de donnees
|
||||
=========================================================*/
|
||||
/* [2-2] INLINE-ROW pour afficher des lignes
|
||||
=========================================================*/
|
||||
/* [4] Tableau à cocher
|
||||
=========================================================*/
|
||||
/* [5] Timeline SVG
|
||||
=========================================================*/ }
|
||||
#WRAPPER > #CONTAINER > section {
|
||||
display: none;
|
||||
|
|
@ -539,93 +543,108 @@
|
|||
#WRAPPER > #CONTAINER > section > .inline-row button {
|
||||
flex: auto;
|
||||
width: 5em; }
|
||||
|
||||
/* [4] Tableau à cocher
|
||||
=========================================================*/
|
||||
article.check-table {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd; }
|
||||
article.check-table > div {
|
||||
#WRAPPER > #CONTAINER article.check-table {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
flex: 100%;
|
||||
padding: .8em 0;
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: background .2s ease-in-out;
|
||||
overflow: hidden; }
|
||||
article.check-table > div:nth-child(2n) {
|
||||
background: #fdfdfd; }
|
||||
article.check-table > div > span {
|
||||
flex: 100%;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd; }
|
||||
#WRAPPER > #CONTAINER article.check-table > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
/* (1) Gestion du checkbox hack */ }
|
||||
article.check-table > div > span input[type='checkbox'] {
|
||||
display: none; }
|
||||
article.check-table > div > span input[type='checkbox'] + label[for] {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
background: url("/src/static/container/checkbox@999999.svg") center center no-repeat;
|
||||
background-size: 100% auto;
|
||||
transition: box-shadow .2s ease-in-out;
|
||||
cursor: pointer; }
|
||||
article.check-table > div > span input[type='checkbox']:checked + label[for] {
|
||||
background-image: url("/src/static/container/checkbox@checked@007dd8.svg"); }
|
||||
|
||||
/* [4] Timeline SVG
|
||||
=========================================================*/
|
||||
svg.timeline {
|
||||
/* (1) svg circles -> set right transform-origin */
|
||||
/* (7) Avoid icons inside center circles to block :hover */ }
|
||||
svg.timeline circle.timeline {
|
||||
-webkit-transform-origin: 50% 50% 0;
|
||||
transform-origin: 50% 50% 0;
|
||||
transition: transform .2s ease-in-out;
|
||||
/* (2) Set cursor to pointer */
|
||||
/* (4) Remove center circle event */
|
||||
/* (5) Set colors according to action type */
|
||||
/* (6) Make around circles a bit transparent */ }
|
||||
svg.timeline circle.timeline.around {
|
||||
cursor: pointer;
|
||||
/* (3) Dispatch event to next nodes */ }
|
||||
svg.timeline circle.timeline.around:hover + .center {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2); }
|
||||
svg.timeline circle.timeline.around:hover + .center + image + .below {
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%); }
|
||||
svg.timeline circle.timeline.center {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none; }
|
||||
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.below.stop {
|
||||
fill: #3a3a3a; }
|
||||
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.below.unlock {
|
||||
fill: #af1c1c; }
|
||||
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.below.unsignal {
|
||||
fill: #2041ab; }
|
||||
svg.timeline circle.timeline.around {
|
||||
opacity: .6; }
|
||||
svg.timeline image {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none; }
|
||||
justify-content: space-between;
|
||||
flex: 100%;
|
||||
padding: .8em 0;
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: background .2s ease-in-out;
|
||||
overflow: hidden; }
|
||||
#WRAPPER > #CONTAINER article.check-table > div:nth-child(2n) {
|
||||
background: #fdfdfd; }
|
||||
#WRAPPER > #CONTAINER article.check-table > div > span {
|
||||
flex: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
/* (1) Gestion du checkbox hack */ }
|
||||
#WRAPPER > #CONTAINER article.check-table > div > span input[type='checkbox'] {
|
||||
display: none; }
|
||||
#WRAPPER > #CONTAINER article.check-table > div > span input[type='checkbox'] + label[for] {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
background: url("/src/static/container/checkbox@999999.svg") center center no-repeat;
|
||||
background-size: 100% auto;
|
||||
transition: box-shadow .2s ease-in-out;
|
||||
cursor: pointer; }
|
||||
#WRAPPER > #CONTAINER article.check-table > div > span input[type='checkbox']:checked + label[for] {
|
||||
background-image: url("/src/static/container/checkbox@checked@007dd8.svg"); }
|
||||
#WRAPPER > #CONTAINER article.timeline.container {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: calc( 100vw - 4em - 7.5em - 11em);
|
||||
flex: 1em;
|
||||
overflow: hidden;
|
||||
/* (8) Timeline infobox */ }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline {
|
||||
/* (1) svg circles -> set right transform-origin */
|
||||
/* (7) Avoid icons inside center circles to block :hover */ }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline {
|
||||
-webkit-transform-origin: 50% 50% 0;
|
||||
transform-origin: 50% 50% 0;
|
||||
transition: transform .2s ease-in-out;
|
||||
/* (2) Set cursor to pointer */
|
||||
/* (4) Remove center circle event */
|
||||
/* (5) Set colors according to action type */
|
||||
/* (6) Make around circles a bit transparent */ }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around {
|
||||
cursor: pointer;
|
||||
/* (3) Dispatch event to next nodes */ }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around:hover + .center {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2); }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around:hover + .center + image + .below {
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%); }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.start, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.start, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.start {
|
||||
fill: #2cde8b; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.stop, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.stop, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.stop {
|
||||
fill: #3a3a3a; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.lock, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.lock, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.lock {
|
||||
fill: #e04343; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.unlock, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.unlock, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.unlock {
|
||||
fill: #af1c1c; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.signal, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.signal, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.signal {
|
||||
fill: #3258d8; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.unsignal, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.unsignal, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.unsignal {
|
||||
fill: #2041ab; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around {
|
||||
opacity: .6; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline image {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container div.timeline.infobox {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: .5em 1em;
|
||||
border: 1px solid #b1b6c0;
|
||||
border-radius: 3px;
|
||||
background: #d8deea;
|
||||
color: #444; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container div.timeline.infobox.active {
|
||||
display: block; }
|
||||
|
||||
|
||||
/*# sourceMappingURL= container.css.map */
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
padding: 1em;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
overflow-x: none;
|
||||
overflow: hidden;
|
||||
overflow-y: auto; }
|
||||
#WRAPPER > #POPUP {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
& > span[data-sublink]{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 7.5em;
|
||||
width: $sub-menu-side-width;
|
||||
|
||||
padding: .3em 1em .3em 2em;
|
||||
margin: 1em;
|
||||
|
|
|
|||
|
|
@ -105,14 +105,6 @@ Element.prototype.anim = function(className, timeout){
|
|||
};
|
||||
|
||||
|
||||
// RECUPERATION DE LA POSITION ABSOLUE D'UN ENFANT PAR RAPPORT A UN PARENT
|
||||
Element.prototype.get_parent_abs = function(parent_node){
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* DEFINITION DES FORMATS UTILES POUR INPUT-CHECKER
|
||||
*
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
/* [3] Archive -> Archivage des logs
|
||||
=========================================================*/
|
||||
|
||||
echo "<section data-sublink='archive'>";
|
||||
echo "<section data-sublink='archive' class='fstart'>";
|
||||
|
||||
$view = View::load('history.archive');
|
||||
echo $view->render();
|
||||
|
|
|
|||
|
|
@ -165,26 +165,64 @@ if( section.details.element != null ){
|
|||
|
||||
/* (1) Get useful DOM Elements
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Get parent */
|
||||
section.details.parent = {
|
||||
text: section.details.text+'article.timeline.container ',
|
||||
element: document.querySelector( section.details.text+'article.timeline.container ' )
|
||||
};
|
||||
|
||||
/* (2) Get SVG tag */
|
||||
section.details.svg = {
|
||||
text: section.details.parent.text+'svg.timeline ',
|
||||
element: document.querySelector( section.details.parent.text+'svg.timeline ' )
|
||||
};
|
||||
|
||||
/* (3) Get each event node */
|
||||
section.details.event = {
|
||||
// svg parent
|
||||
parent: {
|
||||
text: section.details.text+' svg ',
|
||||
element: document.querySelector( section.details.text+' svg ' )
|
||||
},
|
||||
|
||||
// each node
|
||||
text: section.details.text+' svg circle.around ',
|
||||
element: document.querySelectorAll( section.details.text+' svg circle.around ' )
|
||||
text: section.details.svg.text+'circle.around ',
|
||||
list: document.querySelectorAll( section.details.svg.text+'circle.around ' )
|
||||
};
|
||||
|
||||
/* (2) Function: show infobox on click on event
|
||||
/* (4) Get infobox node */
|
||||
section.details.info = {
|
||||
text: section.details.parent.text+'div.timeline.infobox ',
|
||||
element: document.querySelector( section.details.parent.text+'div.timeline.infobox ' )
|
||||
};
|
||||
|
||||
/* (5) Bind infobox sub-elements */
|
||||
section.details.info.input = {
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
/* (2) Function: scroll-x on mouse hover
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Bind slider event */
|
||||
section.details.parent.element.addEventListener('mousemove', function(e){
|
||||
|
||||
var container = e.target.parentNode;
|
||||
|
||||
console.log(e.clientX-container.offsetLeft, e.clientY-container.offsetTop);
|
||||
|
||||
}, false);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* (3) Function: show infobox on click on event
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Set click handler */
|
||||
section.details.event.handler = function(target){
|
||||
|
||||
section.details.info.element.addClass('active');
|
||||
console.log('show infobox on element', target);
|
||||
|
||||
};
|
||||
|
||||
/* (n) Trigger event */
|
||||
section.details.event.parent.element.addEventListener('click', function(e){
|
||||
/* (2) Trigger event */
|
||||
section.details.svg.element.addEventListener('click', function(e){
|
||||
|
||||
// {1} Trigger function only if element is an 'around circle' //
|
||||
if( e.target.nodeName && e.target.getData('user') && e.target.getData('machine') && e.target.getData('action') && e.target.getData('time') )
|
||||
|
|
|
|||
Loading…
Reference in New Issue