Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
|
|
||
| ::ng-deep #splitter { | ||
| border: 1px solid var(--dx-color-border); | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| ::ng-deep .pane-content { | ||
| padding: 12px; | ||
| } | ||
|
|
||
| ::ng-deep .pane-title { | ||
| font-weight: 600; | ||
| margin-bottom: 2px; | ||
| } | ||
|
|
||
| ::ng-deep .pane-state { | ||
| font-size: 12px; | ||
| font-weight: 400; | ||
| color: rgba(51, 51, 51, 0.7); | ||
| margin-bottom: 4px; | ||
| } | ||
|
|
||
| ::ng-deep .pane-option { | ||
| color: rgba(51, 51, 51, 1); | ||
| font-size: 14px; | ||
| font-weight: 600; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| <div *ngIf="isExpanded.getValue(); then expandedBlock; else collapsedBlock"></div> | ||
|
|
||
| <ng-template #collapsedBlock> | ||
| <dx-splitter id="splitter"> | ||
| <dxi-item | ||
| [resizable]="true" | ||
| template="Left Pane" | ||
| ></dxi-item> | ||
|
|
||
| <dxi-item [resizable]="true"> | ||
| <dx-splitter orientation="vertical"> | ||
| <dxi-item | ||
| [resizable]="true" | ||
| [collapsible]="true" | ||
| template="Nested Top Pane" | ||
| ></dxi-item> | ||
| <dxi-item | ||
| [resizable]="true" | ||
| [collapsible]="true" | ||
| template="Nested Bottom Pane" | ||
| ></dxi-item> | ||
|
|
||
| <ng-container *ngFor="let pane of paneContentTemplates"> | ||
| <div | ||
| *dxTemplate="let data of pane.name" | ||
| class="pane-content" | ||
| tabindex="0" | ||
| > | ||
| <ng-template | ||
| [ngTemplateOutlet]="customPaneTemplate" | ||
| [ngTemplateOutletContext]="{ data: data, title: pane.name }" | ||
| > | ||
| </ng-template> | ||
| </div> | ||
| </ng-container> | ||
| </dx-splitter> | ||
| </dxi-item> | ||
| <ng-container *ngFor="let pane of paneContentTemplates"> | ||
| <div *dxTemplate="let data of pane.name" class="pane-content" tabindex="0"> | ||
| <ng-template | ||
| [ngTemplateOutlet]="customPaneTemplate" | ||
| [ngTemplateOutletContext]="{ data: data, title: pane.name }" | ||
| > | ||
| </ng-template> | ||
| </div> | ||
| </ng-container> | ||
| </dx-splitter> | ||
|
|
||
| <ng-template #customPaneTemplate let-data="data" let-title="title"> | ||
| <div class="pane-title">{{ title }}</div> | ||
| <div class="pane-state">{{ getPaneState(data) }}</div> | ||
| </ng-template> | ||
| </ng-template> | ||
|
|
||
| <ng-template #expandedBlock> | ||
| <dx-splitter | ||
| id="splitter" | ||
| height="320px" | ||
| > | ||
| <dxi-item | ||
| [resizable]="true" | ||
| size="240px" | ||
| template="Left Pane" | ||
| ></dxi-item> | ||
| <dxi-item [resizable]="true"> | ||
| <dx-splitter orientation="vertical"> | ||
| <dxi-item | ||
| [resizable]="true" | ||
| [collapsible]="true" | ||
| template="Central Pane" | ||
| ></dxi-item> | ||
| <dxi-item [resizable]="true" [collapsible]="true"> | ||
| <dx-splitter> | ||
| <dxi-item | ||
| [resizable]="true" | ||
| [collapsible]="true" | ||
| size="30%" | ||
| template="Nested Left Pane" | ||
| ></dxi-item> | ||
| <dxi-item | ||
| [resizable]="true" | ||
| template="Nested Central Pane" | ||
| ></dxi-item> | ||
| <dxi-item | ||
| [resizable]="true" | ||
| [collapsible]="true" | ||
| size="30%" | ||
| template="Nested Right Pane" | ||
| ></dxi-item> | ||
|
|
||
| <ng-container *ngFor="let pane of paneContentTemplates"> | ||
| <div | ||
| *dxTemplate="let data of pane.name" | ||
| class="pane-content" | ||
| tabindex="0" | ||
| > | ||
| <ng-template | ||
| [ngTemplateOutlet]="customPaneTemplate" | ||
| [ngTemplateOutletContext]="{ data: data, title: pane.name }" | ||
| > | ||
| </ng-template> | ||
| </div> | ||
| </ng-container> | ||
| </dx-splitter> | ||
| </dxi-item> | ||
|
|
||
| <ng-container *ngFor="let pane of paneContentTemplates"> | ||
| <div | ||
| *dxTemplate="let data of pane.name" | ||
| class="pane-content" | ||
| tabindex="0" | ||
| > | ||
| <ng-template | ||
| [ngTemplateOutlet]="customPaneTemplate" | ||
| [ngTemplateOutletContext]="{ data: data, title: pane.name }" | ||
| > | ||
| </ng-template> | ||
| </div> | ||
| </ng-container> | ||
| </dx-splitter> | ||
| </dxi-item> | ||
| <dxi-item | ||
| [resizable]="false" | ||
| [collapsible]="false" | ||
| size="240px" | ||
| template="Right Pane" | ||
| ></dxi-item> | ||
|
|
||
| <ng-container *ngFor="let pane of paneContentTemplates"> | ||
| <div *dxTemplate="let data of pane.name" class="pane-content" tabindex="0"> | ||
| <ng-template | ||
| [ngTemplateOutlet]="customPaneTemplate" | ||
| [ngTemplateOutletContext]="{ data: data, title: pane.name }" | ||
| > | ||
| </ng-template> | ||
| </div> | ||
| </ng-container> | ||
| </dx-splitter> | ||
|
|
||
| <ng-template #customPaneTemplate let-data="data" let-title="title"> | ||
| <div class="pane-title">{{ title }}</div> | ||
| <div class="pane-state">{{ getPaneState(data) }}</div> | ||
| </ng-template> | ||
|
|
||
| </ng-template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { Component, OnDestroy } from '@angular/core'; | ||
| import { BehaviorSubject } from 'rxjs'; | ||
|
|
||
| interface PaneContentTemplate { | ||
| name: string; | ||
| data?: any; | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'app-splitter', | ||
| templateUrl: './splitter.component.html', | ||
| styleUrls: ['./splitter.component.css'] | ||
| }) | ||
| export class SplitterComponent implements OnDestroy { | ||
| isExpanded = new BehaviorSubject<boolean>(false); | ||
| widgetGroup = 'splitter'; | ||
| dimensionOptions = new Set(['size', 'minSize', 'maxSize']); | ||
|
|
||
| paneContentTemplates: PaneContentTemplate[] = [ | ||
| { name: 'Left Pane' }, | ||
| { name: 'Central Pane' }, | ||
| { name: 'Right Pane' }, | ||
| { name: 'Nested Left Pane' }, | ||
| { name: 'Nested Central Pane' }, | ||
| { name: 'Nested Right Pane' }, | ||
| { name: 'Nested Top Pane' }, | ||
| { name: 'Nested Bottom Pane' } | ||
| ]; | ||
|
|
||
| getPaneState(data: any): string { | ||
| if(data.resizable !== false && !data.collapsible) { | ||
| return 'Resizable only'; | ||
| } | ||
| const resizableText = data.resizable ? 'Resizable' : 'Non-resizable'; | ||
| const collapsibleText = data.collapsible ? 'collapsible' : 'non-collapsible'; | ||
|
|
||
| return `${resizableText} and ${collapsibleText}`; | ||
| } | ||
|
|
||
| filterDimensionOptions(data: any): { key: string; value: any }[] { | ||
| return Object.entries(data) | ||
| .reverse() | ||
| .filter(([key]) => this.dimensionOptions.has(key)) | ||
| .map(([key, value]) => ({ key, value })); | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.isExpanded.unsubscribe(); | ||
| } | ||
| } |