opf · Kharonus · Feb 2, 2023 · Nov 14, 2022 · Jan 31, 2023 · Feb 1, 2023
diff --git a/frontend/src/app/shared/components/header-project-select/insert-in-list.ts b/frontend/src/app/shared/components/header-project-select/insert-in-list.ts
@@ -11,7 +11,7 @@ export const insertInList = (
   list:IProjectData[],
   ancestors:IHalResourceLink[],
 ):IProjectData[] => {
-  // In a set of projects, some of the ancestors may be undisclosed. The client then knows of its existence
+  // In a set of projects, some ancestors may be undisclosed. The client then knows of its existence
   // but knows nothing more than that. Those projects receive an 'undisclosed' urn for their href. For building
   // the project hierarchy, they can be ignored.
   const visibleAncestors = ancestors.filter((ancestor) => ancestor.href !== UNDISCLOSED_ANCESTOR);
@@ -25,6 +25,7 @@ export const insertInList = (
         href: project._links.self.href,
         disabled: false,
         children: [],
+        position: 0,
       },
     ];
   }
@@ -55,6 +56,7 @@ export const insertInList = (
       href: ancestorProject._links.self.href,
       disabled: true,
       children: insertInList(projects, project, [], visibleAncestors.slice(1)),
+      position: 0,
     },
   ];
 };
diff --git a/frontend/src/app/shared/components/project-include/calculate-positions.ts b/frontend/src/app/shared/components/project-include/calculate-positions.ts
@@ -0,0 +1,40 @@
+// -- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) 2012-2023 the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { IProjectData } from 'core-app/shared/components/searchable-project-list/project-data';
+
+export const calculatePositions = (data:IProjectData[], start = 0):[IProjectData[], number] => {
+  let current = start;
+
+  return [data.map((value) => {
+    value.position = current;
+    current += 1;
+    [value.children, current] = calculatePositions(value.children, current);
+    return value;
+  }), current];
+};
diff --git a/frontend/src/app/shared/components/project-include/insert-in-list.ts b/frontend/src/app/shared/components/project-include/insert-in-list.ts
@@ -11,7 +11,7 @@ export const insertInList = (
   list:IProjectData[],
   ancestors:IHalResourceLink[],
 ):IProjectData[] => {
-  // In a set of projects, some of the ancestors may be undisclosed. The client then knows of its existence
+  // In a set of projects, some ancestors may be undisclosed. The client then knows of its existence
   // but knows nothing more than that. Those projects receive an 'undisclosed' urn for their href. For building
   // the project hierarchy, they can be ignored.
   const visibleAncestors = ancestors.filter((ancestor) => ancestor.href !== UNDISCLOSED_ANCESTOR);
@@ -25,6 +25,7 @@ export const insertInList = (
         href: project._links.self.href,
         disabled: false,
         children: [],
+        position: 0,
       },
     ];
   }
@@ -50,6 +51,7 @@ export const insertInList = (
       href: ancestorProject._links.self.href,
       disabled: true,
       children: insertInList(projects, project, [], visibleAncestors.slice(1)),
+      position: 0,
     },
   ];
 };
diff --git a/frontend/src/app/shared/components/project-include/list/project-include-list.component.html b/frontend/src/app/shared/components/project-include/list/project-include-list.component.html
@@ -1,14 +1,14 @@
 <li
   class="spot-list--item op-project-include-list--item"
-  *ngFor="let project of projects; index as i; first as isFirst"
+  *ngFor="let project of projects"
   data-qa-selector="op-project-include-list--item"
   [attr.data-list-selector]="projectListItemIdentifier"
 >
   <spot-tooltip
     class="op-project-include-list--tooltip"
-    [alignment]="getTooltipAlignment(isFirst)"
+    [alignment]="getTooltipAlignment(project)"
     [disabled]="!project.disabled"
-    [dark]="true"
+    [light]="true"
   >
     <ng-container slot="trigger">
       <label

diff --git a/frontend/src/app/shared/components/project-include/list/project-include-list.component.ts b/frontend/src/app/shared/components/project-include/list/project-include-list.component.ts
@@ -1,4 +1,31 @@
-import { I18nService } from 'core-app/core/i18n/i18n.service';
+// -- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) 2012-2023 the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -7,13 +34,18 @@ import {
   Input,
   Output,
 } from '@angular/core';
+
+import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
 import SpotDropAlignmentOption from 'core-app/spot/drop-alignment-options';
 import { IProjectData } from 'core-app/shared/components/searchable-project-list/project-data';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
-import { SearchableProjectListService } from 'core-app/shared/components/searchable-project-list/searchable-project-list.service';
+import {
+  SearchableProjectListService,
+} from 'core-app/shared/components/searchable-project-list/searchable-project-list.service';
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: '[op-project-include-list]',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './project-include-list.component.html',
@@ -81,12 +113,12 @@ export class OpProjectIncludeListComponent {
     }
   }
 
-  public getTooltipAlignment(isFirst:boolean):SpotDropAlignmentOption {
-    if (!this.root || !isFirst) {
-      return SpotDropAlignmentOption.TopLeft;
+  public getTooltipAlignment(project:IProjectData):SpotDropAlignmentOption {
+    if (project.position <= 1) {
+      return SpotDropAlignmentOption.BottomLeft;
     }
 
-    return SpotDropAlignmentOption.BottomLeft;
+    return SpotDropAlignmentOption.TopLeft;
   }
 
   extendedProjectUrl(projectId:string):string {

diff --git a/frontend/src/app/shared/components/project-include/project-include.component.sass b/frontend/src/app/shared/components/project-include/project-include.component.sass
@@ -14,4 +14,4 @@
   &--list
     // If there is only one item and it is disabled, we'll need to be able to view the
     // tooltip message. If we wouldn't have a default height here, the user would need to scroll
-    min-height: $spot-spacing-7
+    min-height: $spot-spacing-9
diff --git a/frontend/src/app/shared/components/project-include/project-include.component.ts b/frontend/src/app/shared/components/project-include/project-include.component.ts
@@ -1,14 +1,38 @@
-import { I18nService } from 'core-app/core/i18n/i18n.service';
+// -- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) 2012-2023 the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
 import {
   ChangeDetectionStrategy,
   Component,
   HostBinding,
   OnInit,
 } from '@angular/core';
-import {
-  BehaviorSubject,
-  combineLatest,
-} from 'rxjs';
+import { BehaviorSubject, combineLatest } from 'rxjs';
 import {
   debounceTime,
   distinctUntilChanged,
@@ -18,6 +42,8 @@ import {
   shareReplay,
   take,
 } from 'rxjs/operators';
+
+import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import {
   WorkPackageViewFiltersService,
@@ -37,6 +63,7 @@ import { IProjectData } from 'core-app/shared/components/searchable-project-list
 
 import { insertInList } from './insert-in-list';
 import { recursiveSort } from './recursive-sort';
+import { calculatePositions } from 'core-app/shared/components/project-include/calculate-positions';
 
 @Component({
   selector: 'op-project-include',
@@ -220,6 +247,7 @@ export class OpProjectIncludeComponent extends UntilDestroyedMixin implements On
       return projects.map((project) => setDisabledStatus(project, false));
     }),
     map((projects) => recursiveSort(projects)),
+    map((projects) => (calculatePositions(projects))[0]),
     shareReplay(),
   );
 

diff --git a/frontend/src/app/shared/components/searchable-project-list/project-data.ts b/frontend/src/app/shared/components/searchable-project-list/project-data.ts
@@ -6,4 +6,5 @@ export interface IProjectData {
   name:string;
   disabled:boolean;
   children:IProjectData[];
+  position:number;
 }
diff --git a/frontend/src/app/shared/components/storages/file-link-list-item/file-link-list-item.html b/frontend/src/app/shared/components/storages/file-link-list-item/file-link-list-item.html
@@ -1,6 +1,7 @@
 <spot-tooltip
   [disabled]="!disabled"
   [alignment]="tooltipAllignment"
+  [light]="true"
   class="spot-list--item-floating-wrapper op-file-list--item-floating-wrapper"
   [ngClass]="{ 'spot-list--item-floating-wrapper_disabled op-file-list--item-floating-wrapper__disabled': disabled }"
 >

diff --git a/...end/src/app/shared/components/storages/storage-file-list-item/storage-file-list-item.html b/...end/src/app/shared/components/storages/storage-file-list-item/storage-file-list-item.html
@@ -1,6 +1,7 @@
 <spot-tooltip
   [alignment]="getTooltipAlignment"
   [disabled]="!content.tooltip"
+  [light]="true"
 >
   <p
     slot="body"

diff --git a/frontend/src/app/spot/components/tooltip/tooltip.component.ts b/frontend/src/app/spot/components/tooltip/tooltip.component.ts
@@ -14,7 +14,7 @@ import SpotDropAlignmentOption from '../../drop-alignment-options';
 export class SpotTooltipComponent {
   @HostBinding('class.spot-tooltip') public className = true;
 
-  @Input() @HostBinding('class.spot-tooltip_dark') public dark = false;
+  @Input() @HostBinding('class.spot-tooltip_light') public light = false;
 
   /**
    * Whether the tooltip should be disabled.

diff --git a/frontend/src/app/spot/styles/sass/components/tooltip.sass b/frontend/src/app/spot/styles/sass/components/tooltip.sass
@@ -1,20 +1,28 @@
 .spot-tooltip
+  $hover-animation-distance: 10px
+
   position: relative
   display: inline-flex
 
   &--body
     @include spot-z-index("tooltip", 1)
     pointer-events: none
-    opacity: 0
-    width: calc(100% - #{$spot-spacing-2})
-    left: $spot-spacing-1
+    // This keeps the element rendered in the DOM and thus readable by screen readers
+    opacity: 0.001
+    width: 80%
+
+    transition-property: transform, opacity
+    transition-timing-function: ease
+    transition-duration: 0.2s
+    transition-delay: 0.2s
 
     position: absolute
     height: auto
 
     box-shadow: $spot-shadow-light-low
     background: $spot-color-basic-gray-1
     color: $spot-color-basic-white
+    border-radius: 5px
 
     display: flex
     flex-direction: column
@@ -33,15 +41,17 @@
     &_bottom-left
       top: 100%
       left: $spot-spacing-1
+      transform: translateY(-$hover-animation-distance)
 
     &_bottom-center
       top: 100%
       left: 50%
-      transform: translateX(-50%)
+      transform: translateX(-50%) translateY(-$hover-animation-distance)
 
     &_bottom-right
       top: 100%
       right: $spot-spacing-1
+      transform: translateY(-$hover-animation-distance)
 
     &_right-top
       left: 100%
@@ -57,15 +67,17 @@
     &_top-left
       bottom: 100%
       left: $spot-spacing-1
+      transform: translateY($hover-animation-distance)
 
     &_top-center
       bottom: 100%
       left: 50%
-      transform: translateX(-50%)
+      transform: translateX(-50%) translateY($hover-animation-distance)
 
     &_top-right
       bottom: 100%
       right: $spot-spacing-1
+      transform: translateY($hover-animation-distance)
 
     .spot-body-small
       &:first-child
@@ -77,6 +89,16 @@
   &:hover &--body
     opacity: 1
 
+  &:hover &--body_top-left,
+  &:hover &--body_top-right,
+  &:hover &--body_bottom-left,
+  &:hover &--body_bottom-right
+    transform: translateY(0)
+
+  &:hover &--body_top-center,
+  &:hover &--body_bottom-center
+      transform: translateX(-50%) translateY(0)
+
   &_light &--body
     color: $spot-color-basic-gray-1
     background: $spot-color-main-light