feat: extend tooltips for scopes

onecx · Feb 21, 2025 · 4ed87f7 · 4ed87f7
1 parent 4131162
commit 4ed87f7
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 24 deletions.
diff --git a/src/app/_bm-mixins.scss b/src/app/_bm-mixins.scss
@@ -83,6 +83,14 @@
   }
 }
 
+@mixin word-break-all {
+  :host ::ng-deep {
+    .word-break-all {
+      word-break: break-all;
+    }
+  }
+}
+
 /* highlight */
 @mixin danger-action {
   :host ::ng-deep {

diff --git a/src/app/bookmark/bookmark-delete/bookmark-delete.component.html b/src/app/bookmark/bookmark-delete/bookmark-delete.component.html
@@ -12,8 +12,8 @@
           {{ 'BOOKMARK.SCOPES.PUBLIC' | translate }}
         </div>
       </div>
-      <div *ngIf="bookmark?.url" id="bm_delete_url" class="h-2rem font-italic text-xs">
-        {{ limitText(bookmark?.url, 140) }}
+      <div *ngIf="bookmark?.url" id="bm_delete_url" class="h-2rem font-italic text-xs word-break-all">
+        {{ limitText(bookmark?.url, 120) }}
       </div>
       <div *ngIf="bookmark?.productName" class="flex flex-row column-gap-2">
         <div class="w-4 text-right font-bold">{{ 'BOOKMARK.PRODUCT' | translate }}:</div>

diff --git a/src/app/bookmark/bookmark-delete/bookmark-delete.component.scss b/src/app/bookmark/bookmark-delete/bookmark-delete.component.scss
@@ -1,3 +1,4 @@
 @import '/src/app/_bm-mixins.scss';
 
 @include danger-action;
+@include word-break-all;
diff --git a/src/app/bookmark/bookmark-import/bookmark-import.component.scss b/src/app/bookmark/bookmark-import/bookmark-import.component.scss
@@ -1,6 +1,5 @@
 @import '/src/app/_bm-mixins.scss';
 
-@include danger-action;
 @include correct-file-upload;
 @include correct-select-button;
 @include search-criteria-select-button;

diff --git a/src/app/bookmark/bookmark-search/bookmark-search.component.html b/src/app/bookmark/bookmark-search/bookmark-search.component.html
@@ -53,13 +53,21 @@
             <p-selectButton
               inputid="bm_search_table_quick_filter"
               styleClass="data-view-control"
-              [options]="(quickFilterItems$ | async) ?? []"
+              [options]="quickFilterOptions"
               [(ngModel)]="quickFilterValue"
               (onChange)="onQuickFilterChange($event.value)"
               [attr.ariaLabel]="'BOOKMARK.SCOPE' | translate"
             >
               <ng-template let-item pTemplate
-                ><span [id]="'bm_search_table_quick_filter_' + item.value"> {{ item.label }}</span></ng-template
+                ><span
+                  [id]="'bm_search_table_quick_filter_' + item.value"
+                  [ariaLabel]="item.label | translate"
+                  [pTooltip]="item.title_key | translate"
+                  tooltipPosition="top"
+                  tooltipEvent="hover"
+                >
+                  {{ item.label | translate }}</span
+                ></ng-template
               >
             </p-selectButton>
           </div>

diff --git a/src/app/bookmark/bookmark-search/bookmark-search.component.ts b/src/app/bookmark/bookmark-search/bookmark-search.component.ts
@@ -23,7 +23,7 @@ import { BookmarkSearchViewModel } from './bookmark-search.viewmodel'
 import { selectBookmarkSearchViewModel } from './bookmark-search.selectors'
 import { bookmarkColumns } from './bookmark-search.columns'
 
-export type KeyValueType = { key: string; value: string }
+export type ExtendedSelectItem = SelectItem & { title_key: string }
 
 @Component({
   selector: 'app-bookmark-search',
@@ -49,9 +49,9 @@ export class BookmarkSearchComponent implements OnInit {
 
   @ViewChild('bookmarkFilter') bookmarkFilter: ElementRef | undefined
   private filterInit = false
-  public quickFilterOptions: KeyValueType[] = [
-    { key: 'BOOKMARK.SCOPES.PRIVATE', value: 'PRIVATE' },
-    { key: 'BOOKMARK.SCOPES.PUBLIC', value: 'PUBLIC' }
+  public quickFilterOptions: ExtendedSelectItem[] = [
+    { label: 'BOOKMARK.SCOPES.PRIVATE', title_key: 'BOOKMARK.SCOPES.TOOLTIPS.PRIVATE', value: 'PRIVATE' },
+    { label: 'BOOKMARK.SCOPES.PUBLIC', title_key: 'BOOKMARK.SCOPES.TOOLTIPS.PUBLIC', value: 'PUBLIC' }
   ]
   public quickFilterValue = this.quickFilterOptions[0].value
 
@@ -89,7 +89,6 @@ export class BookmarkSearchComponent implements OnInit {
   }
 
   public ngOnInit() {
-    this.prepareQuickFilterItems()
     this.prepareDialogTranslations()
     this.prepareRowActionButtons(this.quickFilterValue)
     this.onSearch()
@@ -286,15 +285,4 @@ export class BookmarkSearchComponent implements OnInit {
       }
     ]
   }
-
-  public prepareQuickFilterItems(): void {
-    this.quickFilterItems$ = this.translate.get(['BOOKMARK.SCOPES.PRIVATE', 'BOOKMARK.SCOPES.PUBLIC']).pipe(
-      map((data) => {
-        return [
-          { label: data['BOOKMARK.SCOPES.PRIVATE'], value: 'PRIVATE' },
-          { label: data['BOOKMARK.SCOPES.PUBLIC'], value: 'PUBLIC' }
-        ]
-      })
-    )
-  }
 }
diff --git a/src/app/bookmark/bookmark-search/bookmark-search.effects.ts b/src/app/bookmark/bookmark-search/bookmark-search.effects.ts
@@ -213,7 +213,7 @@ export class BookmarkSearchEffects {
         if (!dialogResult || dialogResult.button === 'secondary')
           return of(BookmarkSearchActions.importBookmarksCancelled())
         // wrong result
-        if (!dialogResult?.result || !dialogResult?.result.snapshot) {
+        if (!dialogResult?.result?.snapshot) {
           throw new Error('VALIDATION.ERRORS.RESULT_WRONG')
         }
         // execute

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -150,7 +150,11 @@
     "SCOPES": {
       "ALL": "Alle",
       "PRIVATE": "Privat",
-      "PUBLIC": "Öffentlich"
+      "PUBLIC": "Öffentlich",
+      "TOOLTIPS": {
+        "PRIVATE": "Meine Lesezeichen",
+        "PUBLIC": "Lesezeichen für alle Workspace Benutzer"
+      }
     },
     "URL": "URL",
     "URL_SEARCH": "URL",

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -150,7 +150,11 @@
     "SCOPES": {
       "ALL": "All",
       "PRIVATE": "Private",
-      "PUBLIC": "Public"
+      "PUBLIC": "Public",
+      "TOOLTIPS": {
+        "PRIVATE": "My Bookmarks",
+        "PUBLIC": "Bookmarks for all Workspace User"
+      }
     },
     "URL": "URL",
     "URL_SEARCH": "URL",