mirror of https://github.com/Squidex/squidex.git
Browse Source
* Added nested categories minus proper filtering. * Added nested schema filtering counts. * Can now add nested categories from the UI form. * Moved nested category separator to a const. * Fixed schema name overflow in nested categories. * Some new tests for nested categories and a fix. Co-authored-by: Simon Pain <simon.pain@reedbusiness.com>pull/786/head
Simon Pain
4 years ago
committed by
GitHub
GitHub
10 changed files with 226 additions and 109 deletions
@ -0,0 +1,4 @@ |
|||||
|
::ng-deep sqx-schemas-page .panel2-main-inner.padded { |
||||
|
padding: .5rem; |
||||
|
padding-left: 0; |
||||
|
} |
||||
@ -1,62 +1,74 @@ |
|||||
<ul *ngIf="!forContent || schemas.length > 0" class="nav nav-light flex-column droppable" |
<ul [hidden]="forContent && visibleCount == 0" id="cat_{{schemaCategory.name}}" class="nav nav-light flex-column"> |
||||
cdkDropList |
|
||||
cdkDropListSortingDisabled |
<div class="droppable category" |
||||
[cdkDropListData]="schemaCategory.name" |
cdkDropList |
||||
(cdkDropListDropped)="changeCategory($event)"> |
cdkDropListSortingDisabled |
||||
|
[cdkDropListData]="schemaCategory.name" |
||||
<li class="nav-item nav-heading"> |
(cdkDropListDropped)="changeCategory($event)"> |
||||
<div class="row g-0 align-items-center mb-1"> |
|
||||
<div class="col-auto"> |
<li class="nav-item nav-heading"> |
||||
<button type="button" class="btn btn-sm btn-decent btn-text-secondary btn-toggle" (click)="toggle()"> |
<div class="row g-0 align-items-center mb-1"> |
||||
<i [class.icon-caret-right]="isCollapsed" [class.icon-caret-down]="!isCollapsed"></i> |
<div class="col-auto"> |
||||
</button> |
<button type="button" class="btn btn-sm btn-decent btn-text-secondary btn-toggle" (click)="toggle()"> |
||||
</div> |
<i [class.icon-caret-right]="isCollapsed" [class.icon-caret-down]="!isCollapsed"></i> |
||||
<div class="col"> |
|
||||
<div class="truncate"> |
|
||||
{{schemaCategory.displayName | sqxTranslate}} |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="col-auto"> |
|
||||
<ng-container *ngIf="schemas.length > 0; else noSchemas"> |
|
||||
<span class="badge rounded-pill badge-secondary">{{schemas.length}}</span> |
|
||||
</ng-container> |
|
||||
<ng-template #noSchemas> |
|
||||
<button type="button" class="btn btn-sm btn-text-secondary btn-remove" (click)="remove.emit()" *ngIf="schemaCategory.name"> |
|
||||
<i class="icon-bin2"></i> |
|
||||
</button> |
</button> |
||||
</ng-template> |
</div> |
||||
|
<div class="col"> |
||||
|
<div class="truncate"> |
||||
|
{{schemaCategory.displayName | sqxTranslate}} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-auto"> |
||||
|
<ng-container *ngIf="visibleCount > 0; else noSchemas"> |
||||
|
<span class="badge rounded-pill badge-secondary">{{visibleCount}}</span> |
||||
|
</ng-container> |
||||
|
<ng-template #noSchemas> |
||||
|
<button type="button" class="btn btn-sm btn-text-secondary btn-remove" (click)="remove.emit(schemaCategory.name)" *ngIf="schemaCategory.name"> |
||||
|
<i class="icon-bin2"></i> |
||||
|
</button> |
||||
|
</ng-template> |
||||
|
</div> |
||||
</div> |
</div> |
||||
|
</li> |
||||
|
|
||||
|
<div [hidden]="isCollapsed" @fade [style.height]="getContainerHeight()" class="nav-collapsed"> |
||||
|
<ng-container *ngIf="!forContent; else simpleMode"> |
||||
|
<li *ngFor="let schema of schemas; trackBy: trackBySchema" class="nav-item truncate" [style.height]="getItemHeight()" |
||||
|
cdkDrag |
||||
|
[cdkDragData]="schema" |
||||
|
(cdkDragStarted)="dragStarted($event)"> |
||||
|
|
||||
|
<a class="nav-link truncate" [routerLink]="schemaRoute(schema)" routerLinkActive="active" sqxStopDrag |
||||
|
title="{{schema.displayName}}" |
||||
|
titlePosition="top-left"> |
||||
|
<i cdkDragHandle class="icon-drag2 drag-handle"></i> |
||||
|
|
||||
|
<span class="item-published me-1" [class.unpublished]="!schema.isPublished" id="schema_{{schema.name}}"></span> {{schema.displayName}} |
||||
|
</a> |
||||
|
</li> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-template #simpleMode> |
||||
|
<li *ngFor="let schema of schemas; trackBy: trackBySchema" class="nav-item truncate"> |
||||
|
<a class="nav-link truncate drag-none" [routerLink]="schemaRoute(schema)" routerLinkActive="active" sqxStopDrag |
||||
|
title="{{schema.displayName}}" |
||||
|
titlePosition="top-left" |
||||
|
id="schema_{{schema.name}}"> |
||||
|
{{schema.displayName}} |
||||
|
</a> |
||||
|
</li> |
||||
|
</ng-template> |
||||
</div> |
</div> |
||||
</li> |
|
||||
|
<div class="drop-indicator"></div> |
||||
<div *ngIf="!isCollapsed" @fade [style.height]="getContainerHeight()" class="nav-collapsed"> |
|
||||
<ng-container *ngIf="!forContent; else simpleMode"> |
|
||||
<li *ngFor="let schema of schemas; trackBy: trackBySchema" class="nav-item truncate" [style.height]="getItemHeight()" |
|
||||
cdkDrag |
|
||||
cdkDragLockAxis="y" |
|
||||
[cdkDragData]="schema" |
|
||||
(cdkDragStarted)="dragStarted($event)"> |
|
||||
|
|
||||
<a class="nav-link truncate" [routerLink]="schemaRoute(schema)" routerLinkActive="active" sqxStopDrag |
|
||||
title="{{schema.displayName}}" |
|
||||
titlePosition="top-left"> |
|
||||
<i cdkDragHandle class="icon-drag2 drag-handle"></i> |
|
||||
|
|
||||
<span class="item-published me-1" [class.unpublished]="!schema.isPublished"></span> {{schema.displayName}} |
|
||||
</a> |
|
||||
</li> |
|
||||
</ng-container> |
|
||||
|
|
||||
<ng-template #simpleMode> |
|
||||
<li *ngFor="let schema of schemas; trackBy: trackBySchema" class="nav-item truncate"> |
|
||||
<a class="nav-link truncate drag-none" [routerLink]="schemaRoute(schema)" routerLinkActive="active" sqxStopDrag |
|
||||
title="{{schema.displayName}}" |
|
||||
titlePosition="top-left"> |
|
||||
{{schema.displayName}} |
|
||||
</a> |
|
||||
</li> |
|
||||
</ng-template> |
|
||||
</div> |
</div> |
||||
|
|
||||
<div class="drop-indicator"></div> |
<div class="nav nav-panel nav-dark nav-dark-bordered flex-column" [hidden]="isCollapsed" @fade> |
||||
|
<sqx-schema-category *ngFor="let category of schemaCategory.categories; trackBy: trackByCategory" |
||||
|
[schemaCategory]="category" |
||||
|
[forContent]="forContent" |
||||
|
(remove)="remove.emit($event)"> |
||||
|
</sqx-schema-category> |
||||
|
</div> |
||||
</ul> |
</ul> |
||||
|
|||||
Loading…
Reference in new issue