From 997f27d416652153c6aa08afca74d882715919e0 Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.ag@gmail.com>
Date: Tue, 14 Nov 2023 09:29:19 +0100
Subject: [PATCH] feat: u#2883 user info

---
 .../story-detail-assign.component.css         |  3 +-
 .../story-detail-assign.component.html        | 39 +++++++------
 .../story-detail/story-detail.component.css   |  3 +-
 .../story-detail/story-detail.component.html  | 56 ++++++++++---------
 .../story-detail/story-detail.component.ts    |  2 +
 5 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-assign/story-detail-assign.component.css b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-assign/story-detail-assign.component.css
index b013ee5cf..670f67468 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-assign/story-detail-assign.component.css
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-assign/story-detail-assign.component.css
@@ -71,7 +71,8 @@ Copyright (c) 2023-present Kaleidos INC
     padding: 0;
   }
 
-  & .assigned-user {
+  & .assigned-user,
+  & .assigned-user-tooltip-wrapper {
     align-items: center;
     display: flex;
     gap: var(--spacing-8);
diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-assign/story-detail-assign.component.html b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-assign/story-detail-assign.component.html
index 0f0d39679..4d0ef1a38 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-assign/story-detail-assign.component.html
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-assign/story-detail-assign.component.html
@@ -59,24 +59,27 @@
               trackBy: trackByIndex;
               index as i
             ">
-            <tg-user-avatar
-              size="m"
-              class="assigned-user-avatar"
-              [color]="assignedUser.color"
-              [user]="assignedUser"
-              type="light"
-              [rounded]="true"
-              aria-hidden="true"
-              [tgUiTooltip]="assignedUser.fullName"
-              tgUiTooltipPosition="bottom-right"></tg-user-avatar>
-            <label
-              class="assigned-name"
-              [innerHtml]="
-                vm.currentUser.username === assignedUser.username
-                  ? t('commons.your_user', { name: assignedUser.fullName })
-                  : assignedUser.fullName || assignedUser.username
-              ">
-            </label>
+            <div
+              class="assigned-user-tooltip-wrapper"
+              [tgUiTooltip]="'@' + assignedUser.username"
+              tgUiTooltipPosition="bottom">
+              <tg-user-avatar
+                size="m"
+                class="assigned-user-avatar"
+                [color]="assignedUser.color"
+                [user]="assignedUser"
+                type="light"
+                [rounded]="true"
+                aria-hidden="true"></tg-user-avatar>
+              <label
+                class="assigned-name"
+                [innerHtml]="
+                  vm.currentUser.username === assignedUser.username
+                    ? t('commons.your_user', { name: assignedUser.fullName })
+                    : assignedUser.fullName || assignedUser.username
+                ">
+              </label>
+            </div>
             <button
               #assigned
               *hasPermission="['modify']; entity: 'story'"
diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.css b/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.css
index 5dec1d9f3..89cb988d7 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.css
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.css
@@ -70,7 +70,8 @@ Copyright (c) 2023-present Kaleidos INC
   }
 }
 
-.creation-info {
+.creation-info,
+.creation-info-tooltip-wrapper {
   align-items: baseline;
   display: flex;
   gap: var(--spacing-4);
diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html b/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html
index 636c9489e..7c8da44cb 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html
@@ -45,38 +45,42 @@
                   <div
                     class="creation-info"
                     [class.no-user]="!vm.story.createdBy">
-                    <ng-container *ngIf="vm.story.createdBy">
-                      <tg-user-avatar
-                        size="m"
-                        class="no-border"
-                        [user]="vm.story.createdBy"
-                        [color]="vm.story.createdBy.color"
-                        type="light"
-                        [rounded]="true"
-                        aria-hidden="true"></tg-user-avatar>
-                    </ng-container>
-                    <tg-nouser-avatar
-                      *ngIf="!vm.story.createdBy"
-                      class="former-user-avatar"></tg-nouser-avatar>
-                    <div>
+                    <div
+                      class="creation-info-tooltip-wrapper"
+                      [tgUiTooltip]="'@' + vm.story.createdBy?.username"
+                      [tgUiTooltipDisabled]="!vm.story.createdBy"
+                      tgUiTooltipPosition="bottom">
+                      <ng-container *ngIf="vm.story.createdBy">
+                        <tg-user-avatar
+                          size="m"
+                          class="no-border"
+                          [user]="vm.story.createdBy"
+                          [color]="vm.story.createdBy.color"
+                          type="light"
+                          [rounded]="true"
+                          aria-hidden="true"></tg-user-avatar>
+                      </ng-container>
+                      <tg-nouser-avatar
+                        *ngIf="!vm.story.createdBy"
+                        class="former-user-avatar"></tg-nouser-avatar>
                       <span
                         *ngIf="vm.story.createdBy"
                         class="creation-info-fullname">
                         {{ vm.story.createdBy.fullName }}
                       </span>
-                      <span
-                        *ngIf="!vm.story.createdBy"
-                        class="former-user-text">
-                        {{ t('commons.former_user') }}
-                      </span>
-                      <span>∙</span>
-                      <span
-                        *ngIf="vm.story.createdAt"
-                        [title]="vm.story.createdAt | date: 'medium'"
-                        class="creation-info-date">
-                        {{ vm.story.createdAt | dateDistance }}
-                      </span>
                     </div>
+                    <span
+                      *ngIf="!vm.story.createdBy"
+                      class="former-user-text">
+                      {{ t('commons.former_user') }}
+                    </span>
+                    <span>∙</span>
+                    <span
+                      *ngIf="vm.story.createdAt"
+                      [title]="vm.story.createdAt | date: 'medium'"
+                      class="creation-info-date">
+                      {{ vm.story.createdAt | dateDistance }}
+                    </span>
                   </div>
                   <tg-story-detail-description
                     [form]="form"
diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.ts b/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.ts
index 324b6978d..4e506c4d6 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.ts
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.ts
@@ -99,6 +99,7 @@ import {
 import { StoryCommentsPaginationDirective } from './directives/story-comments-pagination.directive';
 import { StoryDetaiImageUploadService } from './story-detail-image-upload.service';
 import { MovedWorkflowService } from '../feature-kanban/services/moved-workflow.service';
+import { TooltipDirective } from '@taiga/ui/tooltip';
 
 export interface StoryDetailState {
   project: Project;
@@ -177,6 +178,7 @@ export interface StoryDetailForm {
     DatePipe,
     DateDistancePipe,
     StoryDetailWorkflowComponent,
+    TooltipDirective,
   ],
 })
 export class StoryDetailComponent {