Line data    Source code

       1           1 : <template lang="pug">
       2           5 : .row.w-100.h-100.position-relative.no-gutters
       3           5 :   .col-12(v-if='property')
       4           5 :     BaseAnimationBlock(anim='height')
       5           5 :       InfoAlert.position.w-100(key='info' v-if='showInfo')
       6             :         p
       7             :           | The #[strong Timeline] allows to manipulate a #[a(href='https://mro-dev.web.cern.ch/docs/std/ssvg-specification.html#name-the-property-element-2' target="_blank" rel="noopener") SSVG property]
       8             :           | selected in #[tt Properties card] #[span.small (top-left)].
       9             :         p Drag &amp; drop the arrows to modify SSVG current state for the selected property.
      10             :         p
      11             :           | #[strong Note:] when a
      12             :           | #[a(href='https://mro-dev.web.cern.ch/docs/std/ssvg-specification.html#name-the-relation-element-2' target="_blank" rel="noopener") relation]
      13             :           | is selected, its #[tt key-times] are represented on the Timeline.
      14             :         p #[strong Note:] hovering elements displays additional information (key-times, value ...).
      15             :   .col-12.x-control(v-if='property')
      16             :     TimeLine
      17             :     .position-absolute(style='top: 2px; right: 2px;')
      18             :       button.btn.btn-sm.btn-outline-info.mx-1(title='info' @click='showInfo = !showInfo')
      19             :         | #[i.fa.fa-question-circle]
      20             : </template>
      21             : <script src='./SSVGControl.vue.js' />
      22             : <style>
      23             : .x-control {
      24             :   min-height: 100px;
      25             :   height: 10vh;
      26             : }
      27             : </style>