chore(refactor): story detail

javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-header/story-detail-header.component.css

@@ -0,0 +1,112 @@
+/*
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+Copyright (c) 2023-present Kaleidos INC
+*/
+
+@import url("tools/typography.css");
+@import url("shared/option-list.css");
+
+/* Rotate arrows in RTL */
+:host-context([dir="rtl"]) {
+  & .story-navigation-arrow {
+    transform: rotate(180deg);
+  }
+}
+
+.view-options-list {
+  @mixin option-list;
+}
+
+.story-options-list {
+  @mixin option-list;
+}
+
+.story-header {
+  display: flex;
+  justify-content: space-between;
+  margin-block: var(--spacing-8);
+  margin-inline: var(--spacing-8);
+
+  & .start {
+    align-items: center;
+    display: flex;
+    margin-inline-start: var(--spacing-8);
+  }
+
+  & .end {
+    column-gap: var(--spacing-8);
+    display: flex;
+
+    &.no-close {
+      grid-template-columns: 32px 32px 40px 32px;
+    }
+  }
+
+  & .change-view {
+    margin-inline-start: var(--spacing-8);
+    position: relative;
+
+    &::before {
+      block-size: var(--spacing-24);
+      border-inline-start: solid 1px var(--color-gray20);
+      content: "";
+      inset-block: 0;
+      inset-inline-start: calc(var(--spacing-8) * -1);
+      margin-block: auto;
+      position: absolute;
+    }
+  }
+}
+
+.workflow {
+  @mixin font-inline;
+
+  color: var(--color-secondary);
+  font-weight: var(--font-weight-medium);
+  position: relative;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.chevron-right-icon {
+  block-size: var(--spacing-8);
+  color: var(--color-gray60);
+  inline-size: var(--spacing-8);
+  margin-block: 0;
+  margin-inline: var(--spacing-4);
+}
+
+.story-ref {
+  @mixin font-inline;
+
+  color: var(--color-gray80);
+  font-weight: var(--font-weight-medium);
+  margin-inline-end: var(--spacing-4);
+
+  &::ng-deep .hash {
+    color: var(--color-secondary50);
+    margin-inline-start: var(--spacing-4);
+  }
+}
+
+.copy-link {
+  &::ng-deep tui-svg {
+    block-size: var(--spacing-12);
+    inline-size: var(--spacing-12);
+  }
+
+  &.copied {
+    &::ng-deep [tuiWrapper] {
+      background-color: var(--color-ok10);
+    }
+
+    & tui-svg {
+      color: var(--color-ok);
+    }
+  }
+}

javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-header/story-detail-header.component.html

@@ -0,0 +1,198 @@
+<!--
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+Copyright (c) 2023-present Kaleidos INC
+-->
+
+<ng-container *transloco="let t">
+  <ng-container *ngIf="model$ | async as vm">
+    <div class="story-header">
+      <div class="start">
+        <ng-container *ngIf="vm.selectedStoryView === 'full-view'">
+          <a
+            href="#"
+            class="workflow"
+            >{{ vm.story.workflow.name }}</a
+          >
+          <tui-svg
+            aria-hidden="true"
+            class="chevron-right-icon"
+            src="chevron-right"></tui-svg>
+        </ng-container>
+        <span
+          #storyRef
+          tabindex="0"
+          [attr.aria-label]="
+            t('story.story_sr', {
+              storyRef: vm.story.ref,
+              storyTitle: vm.story.title
+            })
+          "
+          class="story-ref story-detail-focus"
+          [innerHtml]="t('story.story', { storyRef: vm.story.ref })"></span>
+        <button
+          [attr.aria-label]="t('story.copy_story')"
+          [icon]="linkCopied ? 'check' : 'link'"
+          appearance="action-button-2"
+          [class.copied]="linkCopied"
+          class="copy-link"
+          tuiIconButton
+          [tgUiTooltip]="
+            linkCopied ? t('story.link_copied') : t('story.click_to_copy')
+          "
+          [tgManual]="hintShown"
+          type="button"
+          (click)="getStoryLink()"
+          (mouseenter)="displayHint()"
+          (focus)="displayHint()"
+          (focusout)="resetCopyLink('fast')"
+          (mouseleave)="resetCopyLink('slow')"></button>
+      </div>
+      <div
+        class="end"
+        [class.no-close]="vm.selectedStoryView === 'full-view'">
+        <button
+          #previousStory
+          [disabled]="!vm.story.prev"
+          [attr.aria-label]="
+            vm.story.prev
+              ? t('story.previous_story', {
+                  story: vm.story.prev!.title
+                })
+              : null
+          "
+          icon="chevron-left"
+          appearance="tertiary"
+          class="story-navigation-arrow"
+          tuiIconButton
+          tgUiTooltipPosition="top-right"
+          [tgUiTooltip]="t('story.previous')"
+          (click)="navigateToPreviousStory(vm.story.prev!.ref)"
+          type="button"></button>
+        <button
+          #nextStory
+          [disabled]="!vm.story.next"
+          [attr.aria-label]="
+            vm.story.next
+              ? t('story.next_story', {
+                  story: vm.story.next!.title
+                })
+              : null
+          "
+          icon="chevron-right"
+          appearance="tertiary"
+          class="story-navigation-arrow"
+          tuiIconButton
+          tgUiTooltipPosition="top-right"
+          [tgUiTooltip]="t('story.next')"
+          (click)="navigateToNextStory(vm.story.next!.ref)"
+          type="button"></button>
+
+        <tui-hosted-dropdown
+          [tuiDropdownAlign]="'right'"
+          [content]="changeView"
+          [(open)]="dropdownState">
+          <button
+            role="menu"
+            aria-haspopup="true"
+            [attr.aria-expanded]="dropdownState"
+            tabindex="0"
+            [attr.aria-label]="
+              t('story.change_view_sr', {
+                currentView: t(getCurrentViewTranslation)
+              })
+            "
+            [icon]="vm.selectedStoryView"
+            appearance="tertiary"
+            class="change-view"
+            tuiIconButton
+            type="button"
+            tgUiTooltipPosition="top-right"
+            [tgUiTooltip]="t('story.change_view')"
+            (click)="(!dropdownState)"></button>
+        </tui-hosted-dropdown>
+        <tui-hosted-dropdown
+          [tuiDropdownAlign]="'right'"
+          [content]="storyOptions"
+          [(open)]="storyOptionsState">
+          <button
+            role="menu"
+            aria-haspopup="true"
+            [attr.aria-expanded]="storyOptionsState"
+            tabindex="0"
+            [attr.aria-label]="t('story.story_actions')"
+            [tgUiTooltip]="t('story.story_actions')"
+            tgUiTooltipPosition="top-right"
+            icon="more-vertical"
+            data-test="story-options"
+            appearance="tertiary"
+            tuiIconButton
+            type="button"
+            (click)="(storyOptionsState)"></button>
+        </tui-hosted-dropdown>
+        <button
+          *ngIf="vm.selectedStoryView !== 'full-view'"
+          [attr.aria-label]="t('story.close')"
+          icon="close"
+          appearance="action-button"
+          (click)="closeStory.next()"
+          tuiIconButton
+          class="close-button"
+          [tgUiTooltip]="t('story.close')"
+          tgUiTooltipPosition="top-right"
+          type="button"></button>
+      </div>
+      <ng-template #changeView>
+        <tui-data-list
+          class="view-options-list"
+          [attr.aria-label]="t('story.change_view')">
+          <button
+            *ngFor="let viewOption of storyViewOptions; trackBy: trackByIndex"
+            role="menuitem"
+            [attr.aria-checked]="viewOption.id === vm.selectedStoryView"
+            class="option-btn"
+            [class.selected]="viewOption.id === vm.selectedStoryView"
+            tuiOption
+            type="button"
+            (click)="selectStoryView(viewOption.id)">
+            <div class="option-container">
+              <tui-svg
+                aria-hidden="true"
+                class="option-icon"
+                [src]="viewOption.id"></tui-svg>
+              <span class="option-name">{{ t(viewOption.translation) }}</span>
+            </div>
+            <span class="shortcut">{{ t('story.ctrl_x') }}</span>
+          </button>
+        </tui-data-list>
+      </ng-template>
+      <ng-template #storyOptions>
+        <tui-data-list
+          class="story-options-list"
+          data-test="story-options-list"
+          [attr.aria-label]="t('story.story_actions')">
+          <button
+            role="menuitem"
+            data-test="delete-story-button"
+            class="option-btn"
+            *hasPermission="['delete']; entity: 'story'"
+            tuiOption
+            type="button"
+            (click)="deleteStoryConfirmModal()">
+            <div class="option-container">
+              <tui-svg
+                aria-hidden="true"
+                class="option-icon"
+                src="trash"></tui-svg>
+              <span class="option-name">{{
+                t('story.delete.delete_story')
+              }}</span>
+            </div>
+          </button>
+        </tui-data-list>
+      </ng-template>
+    </div>
+  </ng-container>
+</ng-container>