resources: smoother subcollections (fixes #7948) (#7958)

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

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.10",
+  "version": "0.16.11",
   "myplanet": {
-    "latest": "v0.21.42",
-    "min": "v0.20.42"
+    "latest": "v0.21.43",
+    "min": "v0.20.43"
   },
   "scripts": {
     "ng": "ng",

src/app/shared/forms/planet-tag-input-dialog.component.html

@@ -68,7 +68,7 @@
       <ng-container *ngIf="subcollectionIsOpen.get(tag._id)">
         <mat-list-item *ngFor="let subTag of tag.subTags" (click)="selectOne(subTag._id || subTag.name)">
           <mat-icon>subdirectory_arrow_right</mat-icon>
-          {{subTag.name + ' (' + (subTag.count || 0) + ')'}}
+          {{ truncateTagName(subTag) }}
           <span class="toolbar-fill"></span>
           <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,subTag)" i18n>Edit</button>
           <button mat-stroked-button *ngIf="isUserAdmin" (click)="deleteTag($event,subTag)" i18n>Delete</button>

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

@@ -1,11 +1,12 @@
-import { Component, Inject, Input } from '@angular/core';
+import { Component, Inject, Input, HostListener } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { TagsService } from './tags.service';
 import { PlanetMessageService } from '../planet-message.service';
 import { ValidatorService } from '../../validators/validator.service';
 import { DialogsFormService } from '../dialogs/dialogs-form.service';
 import { UserService } from '../user.service';
+import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 import { CustomValidators } from '../../validators/custom-validators';
 import { mapToArray, isInMap } from '../utils';
 import { DialogsLoadingService } from '../../shared/dialogs/dialogs-loading.service';
@@ -52,6 +53,8 @@ export class PlanetTagInputDialogComponent {
   get okClickValue() {
     return { wasOkClicked: true, indeterminate: this.indeterminate ? mapToArray(this.indeterminate, true) : [] };
   }
+  deviceType: DeviceType;
+  deviceTypes: typeof DeviceType = DeviceType;
 
   constructor(
     public dialogRef: MatDialogRef<PlanetTagInputDialogComponent>,
@@ -63,7 +66,8 @@ export class PlanetTagInputDialogComponent {
     private dialogsFormService: DialogsFormService,
     private userService: UserService,
     private dialogsLoadingService: DialogsLoadingService,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private deviceInfoService: DeviceInfoService,
   ) {
     this.dataInit();
     // April 17, 2019: Removing selectMany toggle, but may revisit later
@@ -80,8 +84,13 @@ export class PlanetTagInputDialogComponent {
       attachedTo: [ [] ]
     });
     this.isUserAdmin = this.userService.get().isUserAdmin;
+    this.deviceType = this.deviceInfoService.getDeviceType();
   }
 
+  @HostListener('window:resize') OnResize() {
+      this.deviceType = this.deviceInfoService.getDeviceType();
+    }
+
   dataInit() {
     this.tags = this.filterTags(this.filterValue);
     this.mode = this.data.mode;
@@ -268,6 +277,12 @@ export class PlanetTagInputDialogComponent {
     return checkValue(this.selected.entries());
   }
 
+  truncateTagName(subTag: { name: string; count?: number }, maxLength: number): string {
+    if (this.deviceType === this.deviceTypes.DESKTOP) { maxLength = 50; } else { maxLength = 25; }
+    const truncatedName = subTag.name.length > maxLength ? subTag.name.slice(0, maxLength) + '...' : subTag.name;
+    return `${truncatedName} (${subTag.count || 0})`;
+  }
+
 }
 
 @Component({