hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

fix issue main area missing issue, add mobx observer to TabLayout

Browse Source 
Signed-off-by: Yangjun Wang <yangjun.wang@wartsila.com>
This commit is contained in:
Yangjun Wang 2020-09-19 21:54:15 +03:00
parent b54322080e
commit 49160da710
4 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/renderer/components/layout/main-layout.scss
View File

@ -1,14 +1,18 @@
.MainLayout { .MainLayout {
--sidebar-max-size: 200px; --sidebar-max-size: 200px;
display: grid; display: grid;
grid-template-areas: "aside header" "aside main" "aside footer"; grid-template-areas:
grid-template-rows: [header] var(--main-layout-header) [main] 1fr [footer] auto; "aside header"
"aside tabs"
"aside main"
"aside footer";
grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr; grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
height: 100%; height: 100%;
header { > header {
grid-area: header; grid-area: header;
background: $layoutBackground; background: $layoutBackground;
padding: $padding $padding * 2; padding: $padding $padding * 2;
@ -23,7 +27,7 @@
} }
} }
aside { > aside {
grid-area: aside; grid-area: aside;
position: relative; position: relative;
background: $sidebarBackground; background: $sidebarBackground;
@ -43,15 +47,19 @@
&.accessible:hover { &.accessible:hover {
width: var(--sidebar-max-size); width: var(--sidebar-max-size);
transition-delay: 750ms; transition-delay: 750ms;
box-shadow: 3px 3px 16px rgba(0, 0, 0, .35); box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.35);
z-index: $zIndex-sidebar-hover; z-index: $zIndex-sidebar-hover;
} }
} }
} }
> main {
display: contents;
}
footer { footer {
position: relative; position: relative;
grid-area: footer; grid-area: footer;
min-width: 0; // restrict size when overflow content (e.g. <Dock> tabs scrolling) min-width: 0; // restrict size when overflow content (e.g. <Dock> tabs scrolling)
} }
} }

4
src/renderer/components/layout/main-layout.tsx
View File

@ -50,7 +50,9 @@ export class MainLayout extends React.Component<Props> {
<Sidebar className="box grow" isPinned={this.isPinned} toggle={this.toggleSidebar} /> <Sidebar className="box grow" isPinned={this.isPinned} toggle={this.toggleSidebar} />
</aside> </aside>
<ErrorBoundary>{children}</ErrorBoundary> <main>
<ErrorBoundary>{children}</ErrorBoundary>
</main>
<footer className={footerClass}>{footer === undefined ? <Dock /> : footer}</footer> <footer className={footerClass}>{footer === undefined ? <Dock /> : footer}</footer>
</div> </div>

5
src/renderer/components/layout/tab-layout.scss
View File

@ -1,9 +1,6 @@
.TabLayout { .TabLayout {
display: grid; display: contents;
grid-template-areas: "tabs" "main";
grid-template-rows: [tabs] min-content [main] 1fr;
height: 100%;
> .Tabs { > .Tabs {
grid-area: tabs; grid-area: tabs;

5
src/renderer/components/layout/tab-layout.tsx
View File

@ -2,6 +2,7 @@ import "./tab-layout.scss";
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { matchPath, RouteProps } from "react-router-dom"; import { matchPath, RouteProps } from "react-router-dom";
import { observer } from "mobx-react";
import { cssNames } from "../../utils"; import { cssNames } from "../../utils";
import { Tab, Tabs } from "../tabs"; import { Tab, Tabs } from "../tabs";
import { ErrorBoundary } from "../error-boundary"; import { ErrorBoundary } from "../error-boundary";
@ -20,7 +21,7 @@ interface Props {
contentClass?: string; contentClass?: string;
} }
export const TabLayout = ({ className, contentClass, tabs, children }: Props) => { export const TabLayout = observer(({ className, contentClass, tabs, children }: Props) => {
const routePath = navigation.location.pathname; const routePath = navigation.location.pathname;
const cluster = getHostedCluster(); const cluster = getHostedCluster();
if (!cluster) { if (!cluster) {
@ -41,4 +42,4 @@ export const TabLayout = ({ className, contentClass, tabs, children }: Props) =>
</main> </main>
</div> </div>
); );
}; });