truncating the pages title when its too long #410

nie-ine · Nov 19, 2020 · 5ced548 · 5ced548
1 parent 4999b79
commit 5ced548
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/src/app/app-engine/page/menu-item/nested-menu.html b/src/app/app-engine/page/menu-item/nested-menu.html
@@ -1,7 +1,8 @@
 <mat-menu #childMenu="matMenu" [overlapTrigger]="false">
     <span *ngFor="let child of pages">
       <button class="mat-menu-item" style="display: inline-block" mat-button>
-          <span class="pm-menu-item" style="width: 80%" (click)="navigateToOtherView(child.page._id)"> {{ child.page.title }}
+          <span class="pm-menu-item" style="width: 80%" (click)="navigateToOtherView(child.page._id)">
+            {{ (child.page.title.length>25)? (child.page.title | slice:0:25)+'..':(child.page.title) }}
           <i style="vertical-align: middle" class="material-icons pm-menu-icon-right" *ngIf="child.subPages.length!==0 ||addSubPages"  (click)="$event.stopPropagation();" [matMenuTriggerFor]="submenu.menu"> keyboard_arrow_right</i>
         </span>
       </button>

diff --git a/src/app/app-engine/page/page/page.component.html b/src/app/app-engine/page/page/page.component.html
@@ -97,7 +97,10 @@
 
         <button class="mat-menu-item" mat-menu-item >
                  <!--[matMenuTriggerFor]="submenu.menu"-->
-          <span class="pm-menu-item" (click)="navigateToOtherView(page.page)"> {{ page.page.title }}</span>
+
+          <span class="pm-menu-item"  (click)="navigateToOtherView(page.page)">
+            {{ (page.page.title.length>25)? (page.page.title | slice:0:25)+'..':(page.page.title) }}
+            </span>
           <i style="vertical-align: middle" class="material-icons pm-menu-icon-right" *ngIf="page.subPages.length!==0 ||addSubPages" (click)="$event.stopPropagation();" [matMenuTriggerFor]="submenu.menu"> keyboard_arrow_right</i>
         </button>
         <!--

diff --git a/...pp/user-action-engine/page-set/page-set-landing-page/page-set-landing-page.component.html b/...pp/user-action-engine/page-set/page-set-landing-page/page-set-landing-page.component.html
@@ -51,7 +51,8 @@ <h2>
           <li class="mat-tree-node">
           <span>
           <button *ngIf="!preview" mat-button [matMenuTriggerFor]="menuSettings" ><mat-icon>settings</mat-icon>
-          <a (click)="goToPage(  page.page )" style="font-size: 25px; cursor: pointer; margin-left: 20%" >{{ page.page.title}}</a>
+          <a (click)="goToPage(  page.page )" style="font-size: 25px; cursor: pointer; margin-left: 20%" >
+             {{ (page.page.title.length>25)? (page.page.title | slice:0:25)+'..':(page.page.title) }}</a>
             <!--i style="vertical-align: middle" class="material-icons pm-menu-icon-right" *ngIf="page.subPages.length!==0"  (click)="$event.stopPropagation();" [matMenuTriggerFor]="subMenu.menu"> keyboard_arrow_right</i-->
           </button>
         <br>
@@ -76,7 +77,8 @@ <h2>
           <button *ngIf="!preview" mat-button [matMenuTriggerFor]="menuSettings" ><mat-icon>settings</mat-icon> </button>
                 <button mat-icon-button matTreeNodeToggle style="font-size: 25px; cursor: pointer;"
                     [attr.aria-label]="'Toggle ' + page.page.title">
-                  <a (click)="goToPage(  page.page )" style="font-size: 25px; cursor: pointer; margin-left: 20%" >{{ page.page.title }}</a>
+                  <a (click)="goToPage(  page.page )" style="font-size: 25px; cursor: pointer; margin-left: 20%" >
+                    {{ (page.page.title.length>25)? (page.page.title | slice:0:25)+'..':(page.page.title) }}</a>
                 <mat-icon class="mat-icon-rtl-mirror">
                   {{treeControl.isExpanded(page) ? 'expand_more' : 'chevron_right'}}
                 </mat-icon>

diff --git a/src/app/user-action-engine/page-set/sub-page-list/sub-page-list.component.html b/src/app/user-action-engine/page-set/sub-page-list/sub-page-list.component.html
@@ -1,7 +1,7 @@
 <mat-menu #childMenu="matMenu" [overlapTrigger]="false" >
  <span *ngFor="let child of pages" >
     <button class="mat-menu-item" style="display: inline-block" mat-button (click)="addPage( child.page)" > <mat-icon *ngIf="child.page._id !==pageToMove">add_circle</mat-icon>
-          {{ child.page.title }}
+      {{ (child.page.title.length>25)? (child.page.title | slice:0:25)+'..':(child.page.title) }}
             <i style="vertical-align: middle" class="material-icons pm-menu-icon-right" *ngIf="child.subPages.length!==0"  (click)="$event.stopPropagation();" [matMenuTriggerFor]="submenu.menu"> keyboard_arrow_right</i>
       </button>
      <app-sub-page-list #submenu="subPageList" [firstCall]="false" [pageSet]="pageSet" [allPages]="allPages" [actionIDInput]="actionIDInput" [pages]="child.subPages" [pageToMove]="pageToMove" [preview]="preview"  > <!--(actionIDOutput)="$event"-->