timeline.html 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!--
  2. /**
  3. * Copyright © Magento, Inc. All rights reserved.
  4. * See COPYING.txt for license details.
  5. */
  6. -->
  7. <div class="timeline">
  8. <svg
  9. version="1.1"
  10. xmlns="http://www.w3.org/2000/svg"
  11. xmlns:xlink="http://www.w3.org/1999/xlink"
  12. style="position: absolute; width: 0; height: 0;"
  13. width="0"
  14. height="0">
  15. <defs>
  16. <symbol id="svg-ending" viewBox="0 0 28 36">
  17. <path
  18. class="g__timeline-ending"
  19. d="
  20. M2.864,0.456
  21. h1.189 l14.625,17.55
  22. L4.054,35.557
  23. H2.681"/>
  24. <path
  25. class="g__timeline-arrow"
  26. fill="currentColor"
  27. d="
  28. M9.175,0.04
  29. h4.002l15.006,18.007
  30. L13.177,36.055
  31. H9.175 l15.006-18.008
  32. L9.175,0.04z"/>
  33. </symbol>
  34. </defs>
  35. </svg>
  36. <div class="timeline-content"
  37. css="'_from-now': hasToday(),
  38. '_no-records': !hasData()">
  39. <div class="timeline-past" if="hasToday()">
  40. <time class="timeline-date" translate="'Past'"/>
  41. </div>
  42. <ul class="timeline-units">
  43. <li class="timeline-unit" repeat="foreach: updateRange().days, item: '$date'">
  44. <div tooltip="
  45. trigger: '[data-tooltip-trigger=' + $index + ']',
  46. action: 'hover',
  47. delay: 300,
  48. track: true,
  49. position: 'top',
  50. closeButton: false
  51. ">
  52. <text args="isToday($date()) ? $t('Today') \: formatHeader($date())"/>
  53. </div>
  54. <time attr="'data-tooltip-trigger': $index" class="timeline-date">
  55. <!-- NOTE: needs to be replaced by the date binding -->
  56. <text args="isToday($date()) ? $t('Today') \: formatHeader($date())"/>
  57. </time>
  58. </li>
  59. </ul>
  60. <ul class="timeline-items">
  61. <if args="hasData()">
  62. <li class="timeline-item"
  63. repeat="foreach: rows, item: '$row'"
  64. attr="'data-tooltip-search-scope': 'search-scope-' + $index"
  65. css="
  66. _active: isActive($row()),
  67. _permanent: isPermanent($row())
  68. "
  69. render="recordTmpl"/>
  70. </if>
  71. <ifnot args="hasData()">
  72. <li class="timeline-item" data-role="no-data-msg">
  73. <div class="timeline-event">
  74. <span class="timeline-event-title"
  75. translate="'We couldn\'t find any records.'"/>
  76. <div class="timeline-event-info"/>
  77. </div>
  78. </li>
  79. </ifnot>
  80. </ul>
  81. </div>
  82. <div class="timeline-scale">
  83. <div class="data-slider"
  84. range="
  85. value: ko.getObservable($data, 'scale'),
  86. min: minScale,
  87. max: maxScale,
  88. step: scaleStep
  89. ">
  90. <span class="data-slider-from" text="daysToWeeks(minScale) + 'w'"/>
  91. <span class="data-slider-to" text="daysToWeeks(maxScale) + 'w'"/>
  92. </div>
  93. </div>
  94. </div>