Skip to content
Snippets Groups Projects
Commit 7e5e1cad authored by Xiao Gui's avatar Xiao Gui
Browse files

chore: further simplify current layout

parent 12bd3a92
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 63 additions and 69 deletions
src/layouts/currentLayout/currentLayout.component.ts
+ 1
− 2
View file @ 7e5e1cad
......@@ -4,7 +4,6 @@ import { Observable } from "rxjs";
import { startWith } from "rxjs/operators";
import { SUPPORTED_PANEL_MODES } from "src/services/state/ngViewerState.store";
import { ngViewerSelectorPanelMode } from "src/services/state/ngViewerState/selectors";
import { IavRootStoreInterface } from "src/services/stateStore.service";
@Component({
selector: 'current-layout',
......@@ -20,7 +19,7 @@ export class CurrentLayout {
public panelMode$: Observable<string>
constructor(
private store$: Store<IavRootStoreInterface>,
private store$: Store<any>,
) {
this.panelMode$ = this.store$.pipe(
select(ngViewerSelectorPanelMode),
......
src/layouts/currentLayout/currentLayout.style.css
+ 6
− 0
View file @ 7e5e1cad
:host
{
width: 100%;
height: 100%;
display: block;
}
\ No newline at end of file
src/layouts/currentLayout/currentLayout.template.html
+ 34
− 34
View file @ 7e5e1cad
<div [ngSwitch]="panelMode$ | async" class="w-100 h-100 d-flex flex-row">
<ng-container [ngSwitch]="panelMode$ | async">
<layout-four-panel
*ngSwitchCase="supportedPanelModes[0]"
class="d-block w-100 h-100">
<div class="w-100 h-100" cell-i>
<ng-container cell-i>
<ng-content *ngTemplateOutlet="celli"></ng-content>
</div>
<div class="w-100 h-100" cell-ii>
</ng-container>
<ng-container cell-ii>
<ng-content *ngTemplateOutlet="cellii"></ng-content>
</div>
<div class="w-100 h-100" cell-iii>
</ng-container>
<ng-container cell-iii>
<ng-content *ngTemplateOutlet="celliii"></ng-content>
</div>
<div class="w-100 h-100" cell-iv>
</ng-container>
<ng-container cell-iv>
<ng-content *ngTemplateOutlet="celliv"></ng-content>
</div>
</ng-container>
</layout-four-panel>
<layout-horizontal-one-three
*ngSwitchCase="supportedPanelModes[1]"
class="d-block w-100 h-100">
<div class="w-100 h-100" cell-i>
<ng-container cell-i>
<ng-content *ngTemplateOutlet="celli"></ng-content>
</div>
<div class="w-100 h-100" cell-ii>
</ng-container>
<ng-container cell-ii>
<ng-content *ngTemplateOutlet="cellii"></ng-content>
</div>
<div class="w-100 h-100" cell-iii>
</ng-container>
<ng-container cell-iii>
<ng-content *ngTemplateOutlet="celliii"></ng-content>
</div>
<div class="w-100 h-100" cell-iv>
</ng-container>
<ng-container cell-iv>
<ng-content *ngTemplateOutlet="celliv"></ng-content>
</div>
</ng-container>
</layout-horizontal-one-three>
<layout-vertical-one-three
*ngSwitchCase="supportedPanelModes[2]"
class="d-block w-100 h-100">
<div class="w-100 h-100" cell-i>
<ng-container cell-i>
<ng-content *ngTemplateOutlet="celli"></ng-content>
</div>
<div class="w-100 h-100" cell-ii>
</ng-container>
<ng-container cell-ii>
<ng-content *ngTemplateOutlet="cellii"></ng-content>
</div>
<div class="w-100 h-100" cell-iii>
</ng-container>
<ng-container cell-iii>
<ng-content *ngTemplateOutlet="celliii"></ng-content>
</div>
<div class="w-100 h-100" cell-iv>
</ng-container>
<ng-container cell-iv>
<ng-content *ngTemplateOutlet="celliv"></ng-content>
</div>
</ng-container>
</layout-vertical-one-three>
<layout-single-panel
*ngSwitchCase="supportedPanelModes[3]"
class="d-block w-100 h-100">
<div class="w-100 h-100" cell-i>
<ng-container cell-i>
<ng-content *ngTemplateOutlet="celli"></ng-content>
</div>
<div class="w-100 h-100" cell-ii>
</ng-container>
<ng-container cell-ii>
<ng-content *ngTemplateOutlet="cellii"></ng-content>
</div>
<div class="w-100 h-100" cell-iii>
</ng-container>
<ng-container cell-iii>
<ng-content *ngTemplateOutlet="celliii"></ng-content>
</div>
<div class="w-100 h-100" cell-iv>
</ng-container>
<ng-container cell-iv>
<ng-content *ngTemplateOutlet="celliv"></ng-content>
</div>
</ng-container>
</layout-single-panel>
<div *ngSwitchDefault>
A panel mode which I have never seen before ...
</div>
</div>
</ng-container>
<ng-template #celli>
<ng-content select="[cell-i]"></ng-content>
......
src/layouts/layouts/fourPanel/fourPanel.style.css
+ 8
− 0
View file @ 7e5e1cad
.four-panel-cell
{
flex: 0 0 50%;
}
.four-panel-container
{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
height: 100%;
}
\ No newline at end of file
src/layouts/layouts/fourPanel/fourPanel.template.html
+ 11
− 15
View file @ 7e5e1cad
<div class="w-100 h-100 d-flex flex-column justify-content-center align-items-stretch">
<div class="d-flex flex-row flex-grow-1 flex-shrink-1">
<div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
<ng-content select="[cell-i]"></ng-content>
</div>
<div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
<ng-content select="[cell-ii]"></ng-content>
</div>
<div class="four-panel-container">
<div>
<ng-content select="[cell-i]"></ng-content>
</div>
<div class="d-flex flex-row flex-grow-1 flex-shrink-1">
<div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
<ng-content select="[cell-iii]"></ng-content>
</div>
<div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
<ng-content select="[cell-iv]"></ng-content>
</div>
<div>
<ng-content select="[cell-ii]"></ng-content>
</div>
<div>
<ng-content select="[cell-iii]"></ng-content>
</div>
<div>
<ng-content select="[cell-iv]"></ng-content>
</div>
</div>
src/layouts/layouts/single/single.template.html
+ 3
− 18
View file @ 7e5e1cad
<div class="w-100 h-100 d-flex flex-row justify-content-center align-items-stretch">
<div class="d-flex flex-column major-column">
<div class="overflow-hidden flex-grow-1 d-flex align-items-center justify-content-center">
<ng-content select="[cell-i]"></ng-content>
</div>
</div>
<div class="d-flex flex-column minor-column">
<div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
<ng-content select="[cell-ii]"></ng-content>
</div>
<div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
<ng-content select="[cell-iii]"></ng-content>
</div>
<div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
<ng-content select="[cell-iv]"></ng-content>
</div>
</div>
</div>
\ No newline at end of file
<div class="w-100 h-100">
<ng-content select="[cell-i]"></ng-content>
</div>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment