Now history.timeline is vertical
This commit is contained in:
parent
57d7abb7b6
commit
20baf93bf3
|
@ -9,9 +9,9 @@
|
||||||
|
|
||||||
class main extends i_view{
|
class main extends i_view{
|
||||||
|
|
||||||
public $id_history;
|
public $id_history;
|
||||||
private $timeline = [];
|
public $timeline = [];
|
||||||
private $entry = [];
|
public $entry = [];
|
||||||
|
|
||||||
|
|
||||||
/* (1) Constructor
|
/* (1) Constructor
|
||||||
|
@ -56,8 +56,6 @@
|
||||||
|
|
||||||
/* (2) Format timeline data to svg render
|
/* (2) Format timeline data to svg render
|
||||||
*
|
*
|
||||||
* @timeline<array> Timeline data
|
|
||||||
*
|
|
||||||
* @return svg<String> SVG raw render
|
* @return svg<String> SVG raw render
|
||||||
*
|
*
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
|
@ -75,102 +73,86 @@
|
||||||
$c = 0;
|
$c = 0;
|
||||||
$cl = count($this->timeline);
|
$cl = count($this->timeline);
|
||||||
|
|
||||||
/* (4) Create ranges of size 15 */
|
/* (4) Useful variables */
|
||||||
$r_size = 10; // set the number of actions by line
|
$y_pad = 80; // padding between each node
|
||||||
$rl = floor( $cl / $r_size ); // calculate the number of whole lines
|
$line_pad = 50; // padding on each LINE end
|
||||||
$lrl = $cl % $r_size; // calculate the number of actions in the last line
|
$line_height = ( $cl + 1 ) * $y_pad; // line height (each node * @y_pad + @y_pad)
|
||||||
$y_range_diff = 100;
|
$height = $line_height + 2*$line_pad; // svg height
|
||||||
$total_height = ($lrl == 0 ) ? $y_range_diff*$rl : $y_range_diff*($rl+1); // total height (number of entries + last if not empty)
|
$width = 100; // svg width
|
||||||
|
$x = $width/2; // center width
|
||||||
|
|
||||||
/* (5) Svg tag */
|
/* (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 */
|
/* (6) Start CIRCLE */
|
||||||
$RAW .= "<circle cx='50' cy='50' r='6' fill='#edf0f5' class='tstart'/>";
|
$RAW .= "<circle cx='$x' cy='$line_pad' r='7' fill='#edf0f5' class='tstart'/>";
|
||||||
$RAW .= "<circle cx='50' cy='50' r='4' fill='#555' 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) Calculate X */
|
||||||
---------------------------------------------------------*/
|
$y = $line_pad + $y_pad + $c*$y_pad;
|
||||||
/* (1) Default TIMELINE */
|
|
||||||
if( $r < $rl ){
|
|
||||||
|
|
||||||
$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) */
|
/* (3) Get useful data */
|
||||||
}else{ // if last line -> trace timeline until last element +1
|
$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;
|
$y_img = $y - 5.5;
|
||||||
$RAW .= "<path d='m50 $y L$len $y' style='stroke-dasharray: 3px;' stroke='#444' class='timeline line'/>";
|
|
||||||
|
|
||||||
|
/* (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
|
/* (4) Close SVG
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
/* (1) Stop CIRCLE */
|
/* (1) Stop CIRCLE */
|
||||||
$x_offset = 100 + $c*800/$r_size;
|
$y = $line_height + $line_pad;
|
||||||
$RAW .= "<circle cx='$x_offset' cy='$y' r='6' fill='#edf0f5' class='tstop' />";
|
$RAW .= "<circle cx='$x' cy='$y' r='6' fill='#edf0f5' class='tstop' />";
|
||||||
$RAW .= "<circle cx='$x_offset' cy='$y' r='4' fill='#555' class='tstop' />";
|
$RAW .= "<circle cx='$x' cy='$y' r='4' fill='#555' class='tstop' />";
|
||||||
|
|
||||||
/* (2) Close SVG tag */
|
/* (2) Close SVG tag */
|
||||||
$RAW .= "</svg>";
|
$RAW .= "</svg>";
|
||||||
|
|
||||||
|
|
||||||
|
/* (5) Create invisible infobox (for now)
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
$RAW .= "<div class='timeline infobox'></div>";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return $RAW;
|
return $RAW;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
<!-- <span class='in-dev'>In development.. This feature will soon be available.</span> -->
|
<!-- <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 */
|
/* GESTION DES LONGUEURS */
|
||||||
$menu-side-width: 4em;
|
$menu-side-width: 4em;
|
||||||
|
$sub-menu-side-width: 7.5em;
|
||||||
|
|
||||||
|
|
||||||
// POUR RESOURCE_DISPATCHER
|
// 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;
|
display: flex;
|
||||||
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
flex: 100%;
|
border-radius: 3px;
|
||||||
padding: .8em 0;
|
border: 1px solid #ddd;
|
||||||
|
|
||||||
color: #333;
|
|
||||||
|
|
||||||
background: #f8f8f8;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
transition: background .2s ease-in-out;
|
|
||||||
|
|
||||||
&:nth-child(2n){
|
|
||||||
background: #fdfdfd;
|
|
||||||
}
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
|
|
||||||
& > span{
|
& > div{
|
||||||
flex: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
flex: 100%;
|
||||||
|
padding: .8em 0;
|
||||||
|
|
||||||
/* (1) Gestion du checkbox hack */
|
color: #333;
|
||||||
input[type='checkbox']{ display: none; }
|
|
||||||
|
|
||||||
input[type='checkbox'] + label[for]{
|
background: #f8f8f8;
|
||||||
display: inline-block;
|
border-bottom: 1px solid #eee;
|
||||||
position: absolute;
|
|
||||||
width: 1.2em;
|
|
||||||
height: 1.2em;
|
|
||||||
|
|
||||||
// border-radius: 50% / 50%;
|
transition: background .2s ease-in-out;
|
||||||
|
|
||||||
background: url('/src/static/container/checkbox@999999.svg') center center no-repeat;
|
&:nth-child(2n){
|
||||||
background-size: 100% auto;;
|
background: #fdfdfd;
|
||||||
|
|
||||||
transition: box-shadow .2s ease-in-out;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type='checkbox']:checked + label[for]{
|
overflow: hidden;
|
||||||
background-image: url('/src/static/container/checkbox@checked@007dd8.svg');
|
|
||||||
|
|
||||||
|
& > 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{
|
||||||
|
|
||||||
/* [4] Timeline SVG
|
display: block;
|
||||||
=========================================================*/
|
position: absolute;
|
||||||
svg.timeline{
|
width: calc( 100vw - #{$menu-side-width} - #{$sub-menu-side-width} - 11em );
|
||||||
|
flex: 1em;
|
||||||
|
|
||||||
/* (1) svg circles -> set right transform-origin */
|
overflow: hidden;
|
||||||
& circle.timeline{
|
// overflow-x: auto;
|
||||||
|
|
||||||
-webkit-transform-origin: 50% 50% 0;
|
svg.timeline{
|
||||||
transform-origin: 50% 50% 0;
|
|
||||||
|
|
||||||
transition: transform .2s ease-in-out;
|
/* (1) svg circles -> set right transform-origin */
|
||||||
|
& circle.timeline{
|
||||||
|
|
||||||
/* (2) Set cursor to pointer */
|
-webkit-transform-origin: 50% 50% 0;
|
||||||
&.around{
|
transform-origin: 50% 50% 0;
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
/* (3) Dispatch event to next nodes */
|
transition: transform .2s ease-in-out;
|
||||||
&:hover + .center{ // center node
|
|
||||||
|
|
||||||
-webkit-transform: scale(1.2);
|
/* (2) Set cursor to pointer */
|
||||||
transform: scale(1.2);
|
&.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; }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover + .center + image + .below{ // below node
|
/* (7) Avoid icons inside center circles to block :hover */
|
||||||
|
image{
|
||||||
|
|
||||||
-webkit-transform: translateY(100%);
|
-webkit-pointer-events: none;
|
||||||
transform: translateY(100%);
|
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) 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;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
overflow-x: none;
|
overflow: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,6 +10,10 @@
|
||||||
/* [2] INLINE-BOX pour afficher les listes de donnees
|
/* [2] INLINE-BOX pour afficher les listes de donnees
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* [2-2] INLINE-ROW pour afficher des lignes
|
/* [2-2] INLINE-ROW pour afficher des lignes
|
||||||
|
=========================================================*/
|
||||||
|
/* [4] Tableau à cocher
|
||||||
|
=========================================================*/
|
||||||
|
/* [5] Timeline SVG
|
||||||
=========================================================*/ }
|
=========================================================*/ }
|
||||||
#WRAPPER > #CONTAINER > section {
|
#WRAPPER > #CONTAINER > section {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -539,93 +543,108 @@
|
||||||
#WRAPPER > #CONTAINER > section > .inline-row button {
|
#WRAPPER > #CONTAINER > section > .inline-row button {
|
||||||
flex: auto;
|
flex: auto;
|
||||||
width: 5em; }
|
width: 5em; }
|
||||||
|
#WRAPPER > #CONTAINER article.check-table {
|
||||||
/* [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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex: 100%;
|
border-radius: 3px;
|
||||||
padding: .8em 0;
|
border: 1px solid #ddd; }
|
||||||
color: #333;
|
#WRAPPER > #CONTAINER article.check-table > div {
|
||||||
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%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
/* (1) Gestion du checkbox hack */ }
|
flex: 100%;
|
||||||
article.check-table > div > span input[type='checkbox'] {
|
padding: .8em 0;
|
||||||
display: none; }
|
color: #333;
|
||||||
article.check-table > div > span input[type='checkbox'] + label[for] {
|
background: #f8f8f8;
|
||||||
display: inline-block;
|
border-bottom: 1px solid #eee;
|
||||||
position: absolute;
|
transition: background .2s ease-in-out;
|
||||||
width: 1.2em;
|
overflow: hidden; }
|
||||||
height: 1.2em;
|
#WRAPPER > #CONTAINER article.check-table > div:nth-child(2n) {
|
||||||
background: url("/src/static/container/checkbox@999999.svg") center center no-repeat;
|
background: #fdfdfd; }
|
||||||
background-size: 100% auto;
|
#WRAPPER > #CONTAINER article.check-table > div > span {
|
||||||
transition: box-shadow .2s ease-in-out;
|
flex: 100%;
|
||||||
cursor: pointer; }
|
display: flex;
|
||||||
article.check-table > div > span input[type='checkbox']:checked + label[for] {
|
flex-direction: row;
|
||||||
background-image: url("/src/static/container/checkbox@checked@007dd8.svg"); }
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
/* [4] Timeline SVG
|
/* (1) Gestion du checkbox hack */ }
|
||||||
=========================================================*/
|
#WRAPPER > #CONTAINER article.check-table > div > span input[type='checkbox'] {
|
||||||
svg.timeline {
|
display: none; }
|
||||||
/* (1) svg circles -> set right transform-origin */
|
#WRAPPER > #CONTAINER article.check-table > div > span input[type='checkbox'] + label[for] {
|
||||||
/* (7) Avoid icons inside center circles to block :hover */ }
|
display: inline-block;
|
||||||
svg.timeline circle.timeline {
|
position: absolute;
|
||||||
-webkit-transform-origin: 50% 50% 0;
|
width: 1.2em;
|
||||||
transform-origin: 50% 50% 0;
|
height: 1.2em;
|
||||||
transition: transform .2s ease-in-out;
|
background: url("/src/static/container/checkbox@999999.svg") center center no-repeat;
|
||||||
/* (2) Set cursor to pointer */
|
background-size: 100% auto;
|
||||||
/* (4) Remove center circle event */
|
transition: box-shadow .2s ease-in-out;
|
||||||
/* (5) Set colors according to action type */
|
cursor: pointer; }
|
||||||
/* (6) Make around circles a bit transparent */ }
|
#WRAPPER > #CONTAINER article.check-table > div > span input[type='checkbox']:checked + label[for] {
|
||||||
svg.timeline circle.timeline.around {
|
background-image: url("/src/static/container/checkbox@checked@007dd8.svg"); }
|
||||||
cursor: pointer;
|
#WRAPPER > #CONTAINER article.timeline.container {
|
||||||
/* (3) Dispatch event to next nodes */ }
|
display: block;
|
||||||
svg.timeline circle.timeline.around:hover + .center {
|
position: absolute;
|
||||||
-webkit-transform: scale(1.2);
|
width: calc( 100vw - 4em - 7.5em - 11em);
|
||||||
transform: scale(1.2); }
|
flex: 1em;
|
||||||
svg.timeline circle.timeline.around:hover + .center + image + .below {
|
overflow: hidden;
|
||||||
-webkit-transform: translateY(100%);
|
/* (8) Timeline infobox */ }
|
||||||
transform: translateY(100%); }
|
#WRAPPER > #CONTAINER article.timeline.container svg.timeline {
|
||||||
svg.timeline circle.timeline.center {
|
/* (1) svg circles -> set right transform-origin */
|
||||||
-webkit-pointer-events: none;
|
/* (7) Avoid icons inside center circles to block :hover */ }
|
||||||
pointer-events: none; }
|
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline {
|
||||||
svg.timeline circle.timeline.around.start, svg.timeline circle.timeline.center.start, svg.timeline circle.timeline.below.start {
|
-webkit-transform-origin: 50% 50% 0;
|
||||||
fill: #2cde8b; }
|
transform-origin: 50% 50% 0;
|
||||||
svg.timeline circle.timeline.around.stop, svg.timeline circle.timeline.center.stop, svg.timeline circle.timeline.below.stop {
|
transition: transform .2s ease-in-out;
|
||||||
fill: #3a3a3a; }
|
/* (2) Set cursor to pointer */
|
||||||
svg.timeline circle.timeline.around.lock, svg.timeline circle.timeline.center.lock, svg.timeline circle.timeline.below.lock {
|
/* (4) Remove center circle event */
|
||||||
fill: #e04343; }
|
/* (5) Set colors according to action type */
|
||||||
svg.timeline circle.timeline.around.unlock, svg.timeline circle.timeline.center.unlock, svg.timeline circle.timeline.below.unlock {
|
/* (6) Make around circles a bit transparent */ }
|
||||||
fill: #af1c1c; }
|
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around {
|
||||||
svg.timeline circle.timeline.around.signal, svg.timeline circle.timeline.center.signal, svg.timeline circle.timeline.below.signal {
|
cursor: pointer;
|
||||||
fill: #3258d8; }
|
/* (3) Dispatch event to next nodes */ }
|
||||||
svg.timeline circle.timeline.around.unsignal, svg.timeline circle.timeline.center.unsignal, svg.timeline circle.timeline.below.unsignal {
|
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around:hover + .center {
|
||||||
fill: #2041ab; }
|
-webkit-transform: scale(1.2);
|
||||||
svg.timeline circle.timeline.around {
|
transform: scale(1.2); }
|
||||||
opacity: .6; }
|
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around:hover + .center + image + .below {
|
||||||
svg.timeline image {
|
-webkit-transform: translateX(-100%);
|
||||||
-webkit-pointer-events: none;
|
transform: translateX(-100%); }
|
||||||
pointer-events: none; }
|
#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 */
|
/*# sourceMappingURL= container.css.map */
|
|
@ -51,7 +51,7 @@
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
overflow-x: none;
|
overflow: hidden;
|
||||||
overflow-y: auto; }
|
overflow-y: auto; }
|
||||||
#WRAPPER > #POPUP {
|
#WRAPPER > #POPUP {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
& > span[data-sublink]{
|
& > span[data-sublink]{
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 7.5em;
|
width: $sub-menu-side-width;
|
||||||
|
|
||||||
padding: .3em 1em .3em 2em;
|
padding: .3em 1em .3em 2em;
|
||||||
margin: 1em;
|
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
|
/* DEFINITION DES FORMATS UTILES POUR INPUT-CHECKER
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -72,7 +72,7 @@
|
||||||
/* [3] Archive -> Archivage des logs
|
/* [3] Archive -> Archivage des logs
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
|
|
||||||
echo "<section data-sublink='archive'>";
|
echo "<section data-sublink='archive' class='fstart'>";
|
||||||
|
|
||||||
$view = View::load('history.archive');
|
$view = View::load('history.archive');
|
||||||
echo $view->render();
|
echo $view->render();
|
||||||
|
|
|
@ -165,26 +165,64 @@ if( section.details.element != null ){
|
||||||
|
|
||||||
/* (1) Get useful DOM Elements
|
/* (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 = {
|
section.details.event = {
|
||||||
// svg parent
|
text: section.details.svg.text+'circle.around ',
|
||||||
parent: {
|
list: document.querySelectorAll( section.details.svg.text+'circle.around ' )
|
||||||
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 ' )
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/* (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.event.handler = function(target){
|
||||||
|
|
||||||
|
section.details.info.element.addClass('active');
|
||||||
console.log('show infobox on element', target);
|
console.log('show infobox on element', target);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/* (n) Trigger event */
|
/* (2) Trigger event */
|
||||||
section.details.event.parent.element.addEventListener('click', function(e){
|
section.details.svg.element.addEventListener('click', function(e){
|
||||||
|
|
||||||
// {1} Trigger function only if element is an 'around circle' //
|
// {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') )
|
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