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" |
|||
cdkDropList |
|||
cdkDropListSortingDisabled |
|||
[cdkDropListData]="schemaCategory.name" |
|||
(cdkDropListDropped)="changeCategory($event)"> |
|||
|
|||
<li class="nav-item nav-heading"> |
|||
<div class="row g-0 align-items-center mb-1"> |
|||
<div class="col-auto"> |
|||
<button type="button" class="btn btn-sm btn-decent btn-text-secondary btn-toggle" (click)="toggle()"> |
|||
<i [class.icon-caret-right]="isCollapsed" [class.icon-caret-down]="!isCollapsed"></i> |
|||
</button> |
|||
</div> |
|||
<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> |
|||
<ul [hidden]="forContent && visibleCount == 0" id="cat_{{schemaCategory.name}}" class="nav nav-light flex-column"> |
|||
|
|||
<div class="droppable category" |
|||
cdkDropList |
|||
cdkDropListSortingDisabled |
|||
[cdkDropListData]="schemaCategory.name" |
|||
(cdkDropListDropped)="changeCategory($event)"> |
|||
|
|||
<li class="nav-item nav-heading"> |
|||
<div class="row g-0 align-items-center mb-1"> |
|||
<div class="col-auto"> |
|||
<button type="button" class="btn btn-sm btn-decent btn-text-secondary btn-toggle" (click)="toggle()"> |
|||
<i [class.icon-caret-right]="isCollapsed" [class.icon-caret-down]="!isCollapsed"></i> |
|||
</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> |
|||
</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> |
|||
</li> |
|||
|
|||
<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 class="drop-indicator"></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> |
|||
|
|||
Loading…
Reference in new issue