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

Using singe <TopBar/>

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-09-09 11:40:24 +03:00
parent b9aec3ad9f
commit e86fe7736e
5 changed files with 63 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/renderer/components/+catalog/catalog.tsx
View File

@ -43,7 +43,6 @@ import { catalogURL, CatalogViewRouteParam } from "../../../common/routes";
import { CatalogMenu } from "./catalog-menu"; import { CatalogMenu } from "./catalog-menu";
import { HotbarIcon } from "../hotbar/hotbar-icon"; import { HotbarIcon } from "../hotbar/hotbar-icon";
import { RenderDelay } from "../render-delay/render-delay"; import { RenderDelay } from "../render-delay/render-delay";
import { TopBar } from "../layout/topbar";
export const previousActiveTab = createAppStorage("catalog-previous-active-tab", ""); export const previousActiveTab = createAppStorage("catalog-previous-active-tab", "");
@ -245,28 +244,25 @@ export class Catalog extends React.Component<Props> {
} }
return ( return (
<> <MainLayout sidebar={this.renderNavigation()}>
<TopBar/> <div className="p-6 h-full">
<MainLayout sidebar={this.renderNavigation()}> { this.renderList() }
<div className="p-6 h-full"> </div>
{ this.renderList() } {
</div> this.catalogEntityStore.selectedItem
{ ? <CatalogEntityDetails
this.catalogEntityStore.selectedItem item={this.catalogEntityStore.selectedItem}
? <CatalogEntityDetails hideDetails={() => this.catalogEntityStore.selectedItemId = null}
item={this.catalogEntityStore.selectedItem} />
hideDetails={() => this.catalogEntityStore.selectedItemId = null} : (
/> <RenderDelay>
: ( <CatalogAddButton
<RenderDelay> category={this.catalogEntityStore.activeCategory}
<CatalogAddButton />
category={this.catalogEntityStore.activeCategory} </RenderDelay>
/> )
</RenderDelay> }
) </MainLayout>
}
</MainLayout>
</>
); );
} }
} }

86
src/renderer/components/+welcome/welcome.tsx
View File

@ -27,7 +27,6 @@ import { Icon } from "../icon";
import { productName, slackUrl } from "../../../common/vars"; import { productName, slackUrl } from "../../../common/vars";
import { WelcomeMenuRegistry } from "../../../extensions/registries"; import { WelcomeMenuRegistry } from "../../../extensions/registries";
import { WelcomeBannerRegistry } from "../../../extensions/registries"; import { WelcomeBannerRegistry } from "../../../extensions/registries";
import { TopBar } from "../layout/topbar";
export const defaultWidth = 320; export const defaultWidth = 320;
@ -48,56 +47,53 @@ export class Welcome extends React.Component {
}, defaultWidth); }, defaultWidth);
return ( return (
<> <div className="flex justify-center Welcome align-center">
<TopBar/> <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
<div className="flex justify-center Welcome align-center"> {welcomeBanner.length > 0 ? (
<div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container"> <Carousel
{welcomeBanner.length > 0 ? ( stopAutoPlayOnHover={true}
<Carousel indicators={welcomeBanner.length > 1}
stopAutoPlayOnHover={true} autoPlay={true}
indicators={welcomeBanner.length > 1} navButtonsAlwaysInvisible={true}
autoPlay={true} indicatorIconButtonProps={{
navButtonsAlwaysInvisible={true} style: {
indicatorIconButtonProps={{ color: "var(--iconActiveBackground)"
style: { }
color: "var(--iconActiveBackground)" }}
} activeIndicatorIconButtonProps={{
}} style: {
activeIndicatorIconButtonProps={{ color: "var(--iconActiveColor)"
style: { }
color: "var(--iconActiveColor)" }}
} interval={8000}
}} >
interval={8000} {welcomeBanner.map((item, index) =>
> <item.Banner key={index} />
{welcomeBanner.map((item, index) => )}
<item.Banner key={index} /> </Carousel>
)} ) : <Icon svg="logo-lens" className="logo" />}
</Carousel>
) : <Icon svg="logo-lens" className="logo" />}
<div className="flex justify-center"> <div className="flex justify-center">
<div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container"> <div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
<h2>Welcome to {productName} 5!</h2> <h2>Welcome to {productName} 5!</h2>
<p> <p>
To get you started we have auto-detected your clusters in your kubeconfig file and added them to the catalog, your centralized view for managing all your cloud-native resources. To get you started we have auto-detected your clusters in your kubeconfig file and added them to the catalog, your centralized view for managing all your cloud-native resources.
<br /><br /> <br /><br />
If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer" className="link">Lens Community slack channel</a>. If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer" className="link">Lens Community slack channel</a>.
</p> </p>
<ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container"> <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
{WelcomeMenuRegistry.getInstance().getItems().map((item, index) => ( {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
<li key={index} className="flex grid-12" onClick={() => item.click()}> <li key={index} className="flex grid-12" onClick={() => item.click()}>
<Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" /> <Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
</li> </li>
))} ))}
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> </div>
</> </div>
); );
} }
} }

2
src/renderer/components/cluster-manager/cluster-manager.scss
View File

@ -24,7 +24,7 @@
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"menu topbar" "topbar topbar"
"menu main" "menu main"
"bottom-bar bottom-bar"; "bottom-bar bottom-bar";
grid-template-rows: auto 1fr min-content; grid-template-rows: auto 1fr min-content;

2
src/renderer/components/cluster-manager/cluster-manager.tsx
View File

@ -38,6 +38,7 @@ import * as routes from "../../../common/routes";
import { reaction } from "mobx"; import { reaction } from "mobx";
import { navigation } from "../../navigation"; import { navigation } from "../../navigation";
import { setEntityOnRouteMatch } from "../../../main/catalog-sources/helpers/general-active-sync"; import { setEntityOnRouteMatch } from "../../../main/catalog-sources/helpers/general-active-sync";
import { TopBar } from "../layout/topbar";
@observer @observer
export class ClusterManager extends React.Component { export class ClusterManager extends React.Component {
@ -50,6 +51,7 @@ export class ClusterManager extends React.Component {
render() { render() {
return ( return (
<div className="ClusterManager"> <div className="ClusterManager">
<TopBar/>
<main> <main>
<div id="lens-views"/> <div id="lens-views"/>
<Switch> <Switch>

2
src/renderer/components/cluster-manager/cluster-view.tsx
View File

@ -34,7 +34,6 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
import { navigate } from "../../navigation"; import { navigate } from "../../navigation";
import { catalogURL, ClusterViewRouteParams } from "../../../common/routes"; import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
import { previousActiveTab } from "../+catalog"; import { previousActiveTab } from "../+catalog";
import { TopBar } from "../layout/topbar";
interface Props extends RouteComponentProps<ClusterViewRouteParams> { interface Props extends RouteComponentProps<ClusterViewRouteParams> {
} }
@ -105,7 +104,6 @@ export class ClusterView extends React.Component<Props> {
render() { render() {
return ( return (
<div className="ClusterView flex column align-center"> <div className="ClusterView flex column align-center">
<TopBar/>
{this.renderStatus()} {this.renderStatus()}
</div> </div>
); );