@allurereport/web-allure2 3.0.0-beta.9

package/src/components/language-select/styles.scss

@@ -0,0 +1,34 @@
+@import "../../variables.scss";
+
+.language-select {
+  z-index: 1;
+  &.popover {
+    padding: 0;
+  }
+  &__menu {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+  &__item {
+    padding: 0.5em 0.8em;
+    border-bottom: 1px solid $border-color;
+    cursor: pointer;
+    &::before {
+      content: " ";
+      display: inline-block;
+      background: url(checkmark.svg?inline) center no-repeat;
+      background-size: contain;
+      width: 0.8em;
+      height: 0.8em;
+      margin-right: 0.5em;
+      visibility: hidden;
+    }
+    &_active::before {
+      visibility: visible;
+    }
+    &:hover {
+      background: $hover-color;
+    }
+  }
+}

package/src/components/loader/LoaderView.hbs

@@ -0,0 +1,6 @@
+<div class="loader__mask">
+    <div class="loader">
+        {{spinner}}
+        <p class="loader__text">{{text}}</p>
+    </div>
+</div>

package/src/components/loader/LoaderView.js

@@ -0,0 +1,21 @@
+import { View } from "backbone.marionette";
+import { options } from "@/decorators/index.js";
+import template from "./LoaderView.hbs";
+import "./styles.scss";
+
+@options({
+  text: "Loading...",
+})
+class LoaderView extends View {
+  template = template;
+
+  initialize(opts) {
+    this.options = opts;
+  }
+
+  serializeData() {
+    return this.options;
+  }
+}
+
+export default LoaderView;

package/src/components/loader/styles.scss

@@ -0,0 +1,26 @@
+@import "../../variables.scss";
+
+.loader {
+  margin: auto;
+  text-align: center;
+  &__mask {
+    position: relative;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+  }
+  &__text {
+    font-size: 14px;
+    margin-top: 1em;
+  }
+}
+
+.loader_container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -19px;
+  margin-top: -19px;
+}

package/src/components/marks-toggle/MarksToggleView.hbs

@@ -0,0 +1,14 @@
+<div class="{{b 'marks-toggle' 'items'}}">
+    {{t 'component.tree.filter-marks'}}:
+    {{#each marks}}
+        <div class="{{b 'marks-toggle' 'item'}}">
+        {{#if active}}
+            <span class="{{b 'marks-toggle' 'mark' y=true}} y-label-mark y-label_mark_{{mark}}" data-mark="{{mark}}"
+                    data-tooltip="{{t 'component.markToggle.hideCases' mark=markName}}">{{allure-icon mark noTooltip=true width="18px" height="18px"}}</span>
+        {{else}}
+            <span class="{{b 'marks-toggle' 'mark' n=true}} n-label-mark n-label_mark_{{mark}}" data-mark="{{mark}}"
+                    data-tooltip="{{t 'component.markToggle.showCases' mark=markName}}">{{allure-icon mark noTooltip=true width="18px" height="18px"}}</span>
+        {{/if}}
+        </div>
+    {{/each}}
+</div>

package/src/components/marks-toggle/MarksToggleView.js

@@ -0,0 +1,41 @@
+import { View } from "backbone.marionette";
+import { className, on } from "@/decorators/index.js";
+import translate from "@/helpers/t.js";
+import gtag from "@/utils/gtag.js";
+import { values } from "@/utils/marks.js";
+import template from "./MarksToggleView.hbs";
+import "./styles.scss";
+
+@className("marks-toggle")
+class MarksToggleView extends View {
+  template = template;
+
+  initialize({ settings }) {
+    this.settings = settings;
+    this.listenTo(settings, "change", this.render);
+  }
+
+  serializeData() {
+    const marks = this.settings.getVisibleMarks();
+    return {
+      marks: values.map((mark) => ({
+        mark,
+        markName: translate(`marks.${mark}`, {}),
+        active: !!marks[mark],
+        count: this.statistic ? this.statistic[status.toLowerCase()] : 0,
+      })),
+    };
+  }
+
+  @on("click .y-label-mark, .n-label-mark")
+  onToggleMark(e) {
+    const el = this.$(e.currentTarget);
+    const name = el.data("mark");
+    const checked = el.hasClass("n-label-mark");
+    const marks = this.settings.getVisibleMarks();
+    this.settings.setVisibleMarks(Object.assign({}, marks, { [name]: checked }));
+    gtag("marks_toggle_click", { status: name, checked });
+  }
+}
+
+export default MarksToggleView;

package/src/components/marks-toggle/styles.scss

@@ -0,0 +1,38 @@
+.marks-toggle {
+  &__items {
+    display: flex;
+    align-items: center;
+    gap: 0 4px;
+    user-select: none;
+    word-break: break-word;
+  }
+
+  &__item {
+    flex: 0 0 24px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    white-space: nowrap;
+    position: relative;
+  }
+
+  &__mark {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    border-width: 1px;
+    border-style: solid;
+
+    &_y {
+      background: #97cc64;
+      border-color: #97cc64;
+      color: #fff;
+    }
+
+    &_n {
+    }
+  }
+}

package/src/components/modal/ModalView.hbs

@@ -0,0 +1,13 @@
+<div class="modal__background">
+    <div class="modal__window">
+        <h2 class="{{b cls 'title'}}">
+            <span>{{title}}</span>
+            <span class="{{b cls 'close'}}" data-tooltip="Close">
+                {{allure-icon "close" noTooltip=true width="16px" height="16px"}}
+            </span>
+        </h2>
+        <div class="modal__content"></div>
+        <br>
+    </div>
+
+</div>

package/src/components/modal/ModalView.js

@@ -0,0 +1,43 @@
+import { View } from "backbone.marionette";
+import $ from "jquery";
+import { className, on, regions } from "@/decorators/index.js";
+import template from "./ModalView.hbs";
+import "./styles.scss";
+
+@className("modal")
+@regions({
+  content: ".modal__content",
+})
+class ModalView extends View {
+  template = template;
+  static container = $(document.body);
+
+  show() {
+    this.constructor.container.append(this.$el);
+    this.showChildView("content", this.options.childView);
+    $("#content").toggleClass("blur", true);
+  }
+
+  onDestroy() {
+    $("#content").toggleClass("blur", false);
+  }
+
+  @on("click .modal__content")
+  onKeepOpen(e) {
+    e.stopPropagation();
+  }
+
+  @on("click .modal__background, .modal__close")
+  onClose() {
+    this.destroy();
+  }
+
+  serializeData() {
+    return {
+      cls: this.className,
+      title: this.options.title,
+    };
+  }
+}
+
+export default ModalView;

package/src/components/modal/styles.scss

@@ -0,0 +1,31 @@
+@import "../../variables.scss";
+
+.modal {
+  &__background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    margin: 0 auto;
+    overflow: auto;
+    background-color: rgba(235, 235, 235, 0.7);
+    z-index: 1000;
+  }
+  &__title {
+    display: flex;
+  }
+  &__close {
+    margin-left: auto;
+  }
+  &__window {
+    position: absolute;
+    width: 90%;
+    margin-left: 5%;
+    top: 0;
+    z-index: 1001;
+  }
+}
+
+.blur {
+  filter: blur(3px);
+}

package/src/components/node-search/NodeSearchView.hbs

@@ -0,0 +1,4 @@
+<div class="search__container">
+    <input class="search__input"
+           type="text"/>
+</div>

package/src/components/node-search/NodeSearchView.js

@@ -0,0 +1,32 @@
+import { View } from "backbone.marionette";
+import { className, on } from "@/decorators/index.js";
+import gtag from "@/utils/gtag.js";
+import template from "./NodeSearchView.hbs";
+import "./styles.scss";
+
+export const SEARCH_QUERY_KEY = "searchQuery";
+
+@className("search")
+class NodeSearchView extends View {
+  template = template;
+
+  initialize({ state }) {
+    this.state = state;
+  }
+
+  onRender() {
+    this.$("input").val(this.state.get(SEARCH_QUERY_KEY));
+  }
+
+  @on("input input")
+  onChangeSorting(e) {
+    this.state.set(SEARCH_QUERY_KEY, e.target.value);
+    gtag("search");
+  }
+
+  close() {
+    this.state.set(SEARCH_QUERY_KEY, "");
+  }
+}
+
+export default NodeSearchView;

package/src/components/node-search/styles.scss

@@ -0,0 +1,29 @@
+@import "../../variables.scss";
+
+.search {
+  &__container {
+    width: 100%;
+    max-width: 350px;
+    float: right;
+  }
+  &__input {
+    width: 100%;
+    height: 32px;
+    font-size: 0.8em;
+    display: inline-block;
+    padding: 0 30px 0 10px;
+    border: 1px solid $border-accent-color;
+    line-height: 20px;
+    background: no-repeat right 8px center;
+    &:hover {
+      border-color: #888;
+    }
+    &:focus {
+      border-color: #51a7e8;
+      outline: none;
+      box-shadow:
+        inset 0 1px 2px rgba(0, 0, 0, 0.075),
+        0 0 5px rgba(81, 167, 232, 0.5);
+    }
+  }
+}

package/src/components/node-sorter/NodeSorterView.hbs

@@ -0,0 +1,22 @@
+<div class="sorter">
+{{#each sorters}}
+    <div class="{{b 'sorter' 'item'}}"
+         data-name="{{name}}"
+         data-asc="{{asc}}"
+         data-ga4-event="sort_click"
+         data-ga4-param-name="{{name}}">
+        <span class="{{b 'sorter' enabled=(or asc desc)}} {{b 'sorter' 'name'}}">{{t name}}</span>
+        <svg width="16px" height="16px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g clip-path="url(#clip0_7_44)">
+            <path class="{{b 'sorter' enabled=asc}}" data-asc="true" d="M16 28L9 21L10.41 19.59L16 25.17L21.59 19.59L23 21L16 28Z" fill="currentColor"/>
+            <path class="{{b 'sorter' enabled=desc}}" data-desc="true" d="M16 4L23 11L21.59 12.41L16 6.83L10.41 12.41L9 11L16 4Z" fill="currentColor"/>
+          </g>
+          <defs>
+            <clipPath id="clip0_7_44">
+              <rect width="32" height="32" fill="white"/>
+            </clipPath>
+          </defs>
+        </svg>
+    </div>
+{{/each}}
+</div>

package/src/components/node-sorter/NodeSorterView.js

@@ -0,0 +1,43 @@
+import { View } from "backbone.marionette";
+import { className, on } from "@/decorators/index.js";
+import template from "./NodeSorterView.hbs";
+import "./styles.scss";
+
+const AVAILABLE_SORTERS = ["sorter.order", "sorter.name", "sorter.duration", "sorter.status"];
+
+@className("sorter")
+class NodeSorterView extends View {
+  template = template;
+
+  initialize({ settings }) {
+    this.settings = settings;
+  }
+
+  @on("click .sorter__item")
+  onChangeSorting(e) {
+    const el = this.$(e.currentTarget);
+    this.settings.setTreeSorting({
+      sorter: el.data("name"),
+      ascending: !el.data("asc"),
+    });
+
+    const ascending = el.data("asc");
+    this.$(".sorter_enabled").toggleClass("sorter_enabled");
+    el.data("asc", !ascending);
+    el.find(".sorter__name").toggleClass("sorter_enabled");
+    el.find(ascending ? "[data-asc]" : "[data-desc]").toggleClass("sorter_enabled");
+  }
+
+  serializeData() {
+    const sortSettings = this.settings.getTreeSorting();
+    return {
+      sorters: AVAILABLE_SORTERS.map((sorter) => ({
+        name: sorter,
+        asc: sortSettings.sorter === sorter && sortSettings.ascending,
+        desc: sortSettings.sorter === sorter && !sortSettings.ascending,
+      })),
+    };
+  }
+}
+
+export default NodeSorterView;

package/src/components/node-sorter/styles.scss

@@ -0,0 +1,26 @@
+@import "../../variables.scss";
+
+.sorter {
+  overflow: hidden;
+  color: $text-muted-color;
+  user-select: none;
+
+  &_enabled {
+    color: $text-color;
+  }
+
+  &__item {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    padding-right: $gap-size;
+  }
+
+  &__icon {
+    display: none;
+
+    &_visible {
+      display: block;
+    }
+  }
+}

package/src/components/popover/PopoverView.js

@@ -0,0 +1,8 @@
+import TooltipView from "@/components/tooltip/TooltipView.js";
+import { className } from "@/decorators/index.js";
+import "./styles.scss";
+
+@className("popover")
+class PopoverView extends TooltipView {}
+
+export default PopoverView;

package/src/components/popover/styles.scss

@@ -0,0 +1,32 @@
+@import "../../variables.scss";
+
+.popover {
+  position: absolute;
+  background: $pane-bg-color;
+  color: $text-color;
+  border: 1px solid $border-accent-color;
+  padding: 8px;
+  font-size: 14px;
+  &::before,
+  &::after {
+    content: " ";
+    position: absolute;
+    border: 8px solid transparent;
+    top: 50%;
+    margin-top: -8px;
+  }
+  &_position_right {
+    &::before {
+      left: -16px;
+      border-right-color: $border-accent-color;
+    }
+    &::after {
+      left: -15px;
+      border-right-color: $pane-bg-color;
+    }
+  }
+  &__list {
+    margin: 0.5em 0;
+    padding-left: 20px;
+  }
+}

package/src/components/side-by-side/SideBySideView.hbs

@@ -0,0 +1,2 @@
+<div class="side-by-side__left"></div>
+<div class="side-by-side__right"></div>

package/src/components/side-by-side/SideBySideView.js

@@ -0,0 +1,42 @@
+import { View } from "backbone.marionette";
+import split from "split.js";
+import { className, regions } from "@/decorators/index.js";
+import gtag from "@/utils/gtag.js";
+import settings from "@/utils/settings.js";
+import template from "./SideBySideView.hbs";
+import "./styles.scss";
+
+@className("side-by-side")
+@regions({
+  left: ".side-by-side__left",
+  right: ".side-by-side__right",
+})
+class SideBySideView extends View {
+  template = template;
+
+  onAttach() {
+    const splitter = split([".side-by-side__left", ".side-by-side__right"], {
+      gutterSize: 7,
+      sizes: settings.getSideBySidePosition(),
+      onDragEnd: function () {
+        const sizes = splitter.getSizes();
+        settings.setSideBySidePosition(sizes);
+        gtag("side-by-side-resize", { sizes });
+      },
+    });
+  }
+
+  onRender() {
+    const { left, right } = this.options;
+    this.showChildView("left", left);
+    this.showChildView("right", right);
+  }
+
+  templateContext() {
+    return {
+      cls: "side-by-side",
+    };
+  }
+}
+
+export default SideBySideView;

package/src/components/side-by-side/styles.scss

@@ -0,0 +1,59 @@
+@import "../../variables.scss";
+
+.side-by-side {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  position: absolute;
+}
+
+[dir="ltr"] .side-by-side {
+  direction: ltr;
+  flex-direction: row;
+
+  &__left {
+    overflow: auto;
+    flex: 0 0 auto;
+  }
+
+  &__right {
+    overflow: auto;
+    flex: 1 1 auto;
+  }
+}
+
+[dir="rtl"] .side-by-side {
+  direction: ltr;
+  box-orient: horizontal;
+  flex-direction: row-reverse;
+
+  &__left {
+    direction: rtl;
+    overflow: auto;
+    flex: 0 0 auto;
+  }
+
+  &__right {
+    direction: rtl;
+    overflow: auto;
+    flex: 1 1 auto;
+  }
+}
+
+[dir="rtl"] .tree__ctrl {
+  overflow: hidden;
+}
+
+.gutter {
+  background: $border-color no-repeat 50%;
+  &:hover {
+    cursor: ew-resize;
+  }
+}
+
+.gutter-horizontal {
+  background-image: url("vertical.png");
+}

package/src/components/side-nav/SideNavView.hbs

@@ -0,0 +1,39 @@
+<div class="{{b 'side-nav' 'head'}}">
+    <a href="#" class="{{b 'side-nav' 'brand'}}" data-ga4-event="home_click">
+        {{allure-icon "allureLogo" noTooltip=true width="40px" height="40px"}}
+        <span class="{{b 'side-nav' 'brand-text'}}">Allure</span>
+    </a>
+</div>
+<ul class="{{b 'side-nav' 'menu'}}">
+    {{#each tabs}}
+        <li class="{{b 'side-nav' 'item'}}"
+            data-tooltip="{{t title}}"
+            data-ga4-event="tab_click"
+            data-ga4-param-tab="{{tabName}}">
+            <a href="#{{tabName}}" class="{{b 'side-nav' 'link' active=active}}">
+                <span class="{{b 'side-nav' 'icon'}}">
+                  {{allure-icon icon noTooltip=true width="22px" height="22px"}}
+                </span>
+                <div class="{{b 'side-nav' 'text'}}">{{t title}}</div>
+            </a>
+        </li>
+    {{/each}}
+</ul>
+<div class="{{b 'side-nav' 'strut'}}"></div>
+<div class="{{b 'side-nav' 'footer'}}">
+    <div class="{{b 'side-nav' 'item'}}" data-tooltip="{{t 'controls.language'}}">
+        <button class="{{b 'button'}} {{b 'button' inverse=true}} {{b 'side-nav' 'language-small' lang=language.id}}"
+                data-ga4-event="language_menu_click">
+            {{language.id}}
+        </button>
+    </div>
+
+    <div class="{{b 'side-nav' 'item'}} " data-tooltip="{{t 'controls.expand'}}" data-ga4-event="expand_menu_click">
+        <div class="{{b 'side-nav' 'collapse'}}">
+            <span class="{{b 'side-nav' 'icon'}}">
+                {{allure-icon "chevronLeft" noTooltip=true width="20px" height="20px"}}
+            </span>
+            <span class="{{b 'side-nav' 'text'}}">{{t 'controls.collapse'}}</span>
+        </div>
+    </div>
+</div>