Merged PR 975: #2413 Bookmark Tooltips angepasst, Page-Tooltip durch UI-Tooltip ersetzt

#2413 Bookmark Tooltips angepasst, Page-Tooltip durch UI-Tooltip ersetzt

Related work items: #2413

apps/page/catalog/src/lib/article-details/article-details.component.html

@@ -2,13 +2,14 @@
   <ng-container *ngIf="store.item$ | async; let item">
     <div class="product-details">
       <div class="bookmark" *ngIf="item?.features && (item?.features)[0]?.key === 'PFO'">
-        <button class="bookmark-badge" (click)="showTooltip = !showTooltip">
+        <button [uiOverlayTrigger]="subscribtionTooltip" class="bookmark-badge">
           <img src="/assets/images/bookmark_subscription.svg" alt="Fortsetzungsartikel Badge" />
         </button>
-        <page-tooltip *ngIf="showTooltip" (close)="showTooltip = false"
-          >Dieser Artikel ist nur über die Abo <br />
-          Abteilung bestellbar.</page-tooltip
-        >
+        <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #subscribtionTooltip [closeable]="true"
+          >Artikel ist ein Fortsetzungsartikel,<br />
+          Artikel muss über eine Aboabteilung<br />
+          bestellt werden.
+        </ui-tooltip>
       </div>
 
       <div class="product-image">

apps/page/catalog/src/lib/article-details/article-details.component.scss

@@ -258,9 +258,3 @@
 .autor {
   @apply text-active-customer !important font-bold no-underline;
 }
-
-page-tooltip {
-  @apply relative;
-  bottom: 35px;
-  left: 15px;
-}

apps/page/catalog/src/lib/article-details/article-details.component.ts

@@ -58,7 +58,6 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
   ]).pipe(map(([digDelivery, b2bDelivery]) => b2bDelivery && !digDelivery));
 
   contributors$ = this.store.item$.pipe(map((item) => item?.product?.contributors?.split(';').map((m) => m.trim())));
-  showTooltip = false;
 
   constructor(
     private applicationService: ApplicationService,

apps/page/catalog/src/lib/article-details/article-details.module.ts

@@ -7,11 +7,22 @@ import { RouterModule } from '@angular/router';
 import { UiStarsModule } from '@ui/stars';
 import { UiSliderModule } from '@ui/slider';
 import { ArticleRecommendationsComponent } from './recommendations/article-recommendations.component';
-import { TooltipModule } from '../shared/tooltip/tooltip.module';
 import { PipesModule } from '../shared/pipes/pipes.module';
+import { UiTooltipModule } from '@ui/tooltip';
+import { UiCommonModule } from '@ui/common';
 
 @NgModule({
-  imports: [CommonModule, ProductImageModule, UiIconModule, RouterModule, UiStarsModule, UiSliderModule, TooltipModule, PipesModule],
+  imports: [
+    CommonModule,
+    ProductImageModule,
+    UiIconModule,
+    RouterModule,
+    UiStarsModule,
+    UiSliderModule,
+    UiCommonModule,
+    UiTooltipModule,
+    PipesModule,
+  ],
   exports: [ArticleDetailsComponent, ArticleRecommendationsComponent],
   declarations: [ArticleDetailsComponent, ArticleRecommendationsComponent],
 })

apps/page/catalog/src/lib/article-search/containers/article-searchbox/article-searchbox.component.html

@@ -49,14 +49,14 @@
       </ui-searchbox-autocomplete>
     </ui-searchbox>
     <ng-container *ngIf="isFilter$ | async">
-      <button class="info-tooltip-button" (click)="showTooltip = !showTooltip" type="button">
+      <button class="info-tooltip-button" [uiOverlayTrigger]="infoTooltip" type="button">
         i
       </button>
-      <page-tooltip *ngIf="showTooltip" (close)="showTooltip = false"
+      <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #infoTooltip [closeable]="true"
         >Um Begriffe auszuschließen, geben Sie diese <br />
         mit einem ! oder ~ davor in das Suchfeld ein. <br />
         Um exakt einen Begriff zu suchen, wählen <br />
-        Sie &bdquo;Exakt&ldquo; aus.</page-tooltip
+        Sie &bdquo;Exakt&ldquo; aus.</ui-tooltip
       >
     </ng-container>
   </div>

apps/page/catalog/src/lib/article-search/containers/article-searchbox/article-searchbox.module.ts

@@ -5,12 +5,12 @@ import { UiCommonModule } from '@ui/common';
 import { UiIconModule } from '@ui/icon';
 import { UiInputModule } from '@ui/input';
 import { UiSearchboxModule } from '@ui/searchbox';
-import { TooltipModule } from '../../../shared/tooltip/tooltip.module';
+import { UiTooltipModule } from '@ui/tooltip';
 
 import { ArticleSearchboxComponent } from './article-searchbox.component';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, UiIconModule, UiSearchboxModule, UiInputModule, UiCommonModule, TooltipModule],
+  imports: [CommonModule, FormsModule, UiIconModule, UiSearchboxModule, UiInputModule, UiCommonModule, UiTooltipModule],
   exports: [ArticleSearchboxComponent],
   declarations: [ArticleSearchboxComponent],
   providers: [],

apps/page/catalog/src/lib/shared/tooltip/tooltip.component.html

@@ -1,12 +0,0 @@
-<div (click)="close.emit(true)" class="backdrop"></div>
-<div class="info-tooltip-box">
-  <button class="close-btn" (click)="close.emit(true)">
-    <ui-icon icon="close" size="15px"></ui-icon>
-  </button>
-  <div class="info-tooltip">
-    <p>
-      <ng-content></ng-content>
-    </p>
-  </div>
-  <div class="info-tooltip-triangle"></div>
-</div>

apps/page/catalog/src/lib/shared/tooltip/tooltip.component.scss

@@ -1,37 +0,0 @@
-:host {
-  @apply flex self-center;
-}
-
-.backdrop {
-  @apply fixed w-screen h-screen z-tooltip left-0 top-0;
-}
-
-.info-tooltip-box {
-  @apply absolute z-modal;
-
-  .close-btn {
-    @apply bg-transparent border-none text-white relative cursor-pointer z-modal;
-    bottom: 115px;
-    left: 50px;
-  }
-
-  .info-tooltip {
-    @apply relative bg-dark-cerulean rounded-card p-4;
-    width: 375px;
-    left: -325px;
-    top: -146px;
-
-    p {
-      @apply m-0 text-white font-bold text-base;
-    }
-  }
-
-  .info-tooltip-triangle {
-    @apply relative bg-dark-cerulean;
-    transform: rotate(45deg);
-    width: 20px;
-    height: 20px;
-    top: -159px;
-    left: 6px;
-  }
-}

apps/page/catalog/src/lib/shared/tooltip/tooltip.component.ts

@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core';
-
-@Component({
-  selector: 'page-tooltip',
-  templateUrl: 'tooltip.component.html',
-  styleUrls: ['tooltip.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TooltipComponent implements OnInit {
-  @Output() close = new EventEmitter<boolean>();
-  isOpen = false;
-  constructor() {}
-
-  ngOnInit() {}
-}

apps/page/catalog/src/lib/shared/tooltip/tooltip.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { UiIconModule } from '@ui/icon';
-
-import { TooltipComponent } from './tooltip.component';
-
-@NgModule({
-  imports: [CommonModule, UiIconModule],
-  exports: [TooltipComponent],
-  declarations: [TooltipComponent],
-  providers: [],
-})
-export class TooltipModule {}

apps/page/customer/src/lib/customer-details/customer-details.module.ts

@@ -32,6 +32,7 @@ import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module';
 import { HistoryModule } from '@modal/history';
 import { CantSelectGuestModalModule } from '../modals/cant-select-guest/cant-select-guest-modal.module';
 import { UiScrollContainerModule } from '@ui/scroll-container';
+import { UiTooltipModule } from '@ui/tooltip';
 @NgModule({
   imports: [
     CommonModule,
@@ -45,6 +46,7 @@ import { UiScrollContainerModule } from '@ui/scroll-container';
     FormsModule,
     UiRadioModule,
     UiCommonModule,
+    UiTooltipModule,
     UiScrollContainerModule,
     UiSpinnerModule,
     HistoryModule,

apps/page/customer/src/lib/customer-details/customer-order-details/order-item-card/customer-order-item-card.component.html

@@ -1,5 +1,14 @@
 <div class="tags">
-  <img class="tag preorder" src="/assets/images/tag_icon_preorder.svg" alt="Vorbesteller" *ngIf="hasPrebooked" />
+  <img
+    *ngIf="hasPrebooked"
+    [uiOverlayTrigger]="prebookedTooltip"
+    class="tag preorder"
+    src="/assets/images/tag_icon_preorder.svg"
+    alt="Vorbesteller"
+  />
+  <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #prebookedTooltip [closeable]="true">
+    Artikel wird für Sie vorgemerkt.
+  </ui-tooltip>
 </div>
 
 <div class="row">

apps/shared/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.html

@@ -1,6 +1,11 @@
 <ng-container *ngIf="orderItem$ | async; let orderItem">
   <div class="goods-in-out-order-details-features">
-    <img *ngIf="orderItem?.features?.prebooked" src="/assets/images/tag_icon_preorder.svg" [alt]="orderItem?.features?.prebooked" />
+    <ng-container *ngIf="orderItem?.features?.prebooked">
+      <img [uiOverlayTrigger]="prebookedTooltip" src="/assets/images/tag_icon_preorder.svg" [alt]="orderItem?.features?.prebooked" />
+      <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #prebookedTooltip [closeable]="true">
+        Artikel wird für Sie vorgemerkt.
+      </ui-tooltip>
+    </ng-container>
     <ng-container *ngIf="notificationsSent$ | async; let notificationsSent">
       <ng-container *ngIf="notificationsSent?.NOTIFICATION_EMAIL">
         <img [uiOverlayTrigger]="emailTooltip" src="/assets/images/email_bookmark.svg" />