From 7e5e1cadd5c47412ba23978d6e84da2da773b1a8 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Mon, 25 Oct 2021 15:29:16 +0200
Subject: [PATCH] chore: further simplify current layout
---
.../currentLayout/currentLayout.component.ts | 3 +-
.../currentLayout/currentLayout.style.css | 6 ++
.../currentLayout/currentLayout.template.html | 68 +++++++++----------
.../layouts/fourPanel/fourPanel.style.css | 8 +++
.../layouts/fourPanel/fourPanel.template.html | 26 +++----
.../layouts/single/single.template.html | 21 +-----
6 files changed, 63 insertions(+), 69 deletions(-)
diff --git a/src/layouts/currentLayout/currentLayout.component.ts b/src/layouts/currentLayout/currentLayout.component.ts
index 313f1cd93..be31bf003 100644
--- a/src/layouts/currentLayout/currentLayout.component.ts
+++ b/src/layouts/currentLayout/currentLayout.component.ts
@@ -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),
diff --git a/src/layouts/currentLayout/currentLayout.style.css b/src/layouts/currentLayout/currentLayout.style.css
index e69de29bb..a633460dc 100644
--- a/src/layouts/currentLayout/currentLayout.style.css
+++ b/src/layouts/currentLayout/currentLayout.style.css
@@ -0,0 +1,6 @@
+:host
+{
+ width: 100%;
+ height: 100%;
+ display: block;
+}
\ No newline at end of file
diff --git a/src/layouts/currentLayout/currentLayout.template.html b/src/layouts/currentLayout/currentLayout.template.html
index f3d04c104..9575932ed 100644
--- a/src/layouts/currentLayout/currentLayout.template.html
+++ b/src/layouts/currentLayout/currentLayout.template.html
@@ -1,72 +1,72 @@
-<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>
diff --git a/src/layouts/layouts/fourPanel/fourPanel.style.css b/src/layouts/layouts/fourPanel/fourPanel.style.css
index 03169dfb4..c967cad95 100644
--- a/src/layouts/layouts/fourPanel/fourPanel.style.css
+++ b/src/layouts/layouts/fourPanel/fourPanel.style.css
@@ -1,4 +1,12 @@
.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
diff --git a/src/layouts/layouts/fourPanel/fourPanel.template.html b/src/layouts/layouts/fourPanel/fourPanel.template.html
index ddb10f1f6..9e747c2a9 100644
--- a/src/layouts/layouts/fourPanel/fourPanel.template.html
+++ b/src/layouts/layouts/fourPanel/fourPanel.template.html
@@ -1,18 +1,14 @@
-<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>
diff --git a/src/layouts/layouts/single/single.template.html b/src/layouts/layouts/single/single.template.html
index 561a6363b..fcf3a11e3 100644
--- a/src/layouts/layouts/single/single.template.html
+++ b/src/layouts/layouts/single/single.template.html
@@ -1,18 +1,3 @@
-<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>
--
GitLab