resources: smoother collections (fixes #7928) (#7932)

Co-authored-by: mutugiii <[email protected]>
Co-authored-by: dogi <[email protected]>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.9",
+  "version": "0.16.10",
   "myplanet": {
     "latest": "v0.21.42",
     "min": "v0.20.42"

src/app/shared/forms/planet-tag-selected-input.component.ts

@@ -1,11 +1,13 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges, HostListener } from '@angular/core';
 import { TagsService } from './tags.service';
+import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 
 @Component({
   template: `
     <span [ngSwitch]="selectedIds.length" class="small margin-lr-5">
       <span *ngSwitchCase="0" i18n>No collections selected</span>
-      <span *ngSwitchCase="1"><span i18n>Selected:</span>{{' ' + tooltipLabels}}</span>
+      <span *ngSwitchCase="1"><span i18n>Selected:</span>
+        {{ truncatedTooltip }}
       <span *ngSwitchDefault [matTooltip]="tooltipLabels" i18n>Hover to see selected collections</span>
     </span>
   `,
@@ -17,18 +19,33 @@ export class PlanetTagSelectedInputComponent implements OnChanges {
   @Input() allTags: any[] = [];
 
   tooltipLabels = '';
+  deviceType: DeviceType;
+  deviceTypes: typeof DeviceType = DeviceType;
 
   constructor(
-    private tagsService: TagsService
+    private tagsService: TagsService,
+    private deviceInfoService: DeviceInfoService
   ) {}
 
   ngOnChanges() {
     this.setTooltipLabels(this.selectedIds, this.allTags);
   }
 
+  @HostListener('window:resize') OnResize() {
+      this.deviceType = this.deviceInfoService.getDeviceType();
+    }
+
   setTooltipLabels(selectedIds, allTags) {
     const tagsNames = selectedIds.map((tag: any) => this.tagsService.findTag(tag, allTags).name);
     this.tooltipLabels = tagsNames.join(', ');
   }
 
+  get truncatedTooltip(): string {
+    const maxLength = this.deviceType === this.deviceTypes.DESKTOP ? 50 :
+                      this.deviceType === this.deviceTypes.TABLET ? 35 : 20;
+    return this.tooltipLabels.length > maxLength
+      ? this.tooltipLabels.slice(0, maxLength) + '...'
+      : this.tooltipLabels;
+  }
+
 }