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

The new Dock

Browse Source 
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2023-04-12 12:00:48 +03:00
parent bbb7764103
commit 685548cc4b
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
8 changed files with 167 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/business-features/dock/index.ts
View File

@ -1 +1,3 @@
export { DockHost } from "./src/dock/dock-host";
export { dockFeature } from "./src/feature";

7
packages/business-features/dock/package.json
View File

@ -24,18 +24,19 @@
"license": "MIT",
"homepage": "https://github.com/lensapp/lens",
"scripts": {
"buildasd": "webpack",
"devasdasd": "webpack --mode=development --watch",
"build": "webpack",
"test:unit": "jest --coverage --runInBand",
"lint": "lens-lint",
"lint:fix": "lens-lint --fix"
},
"peerDependencies": {
"@k8slens/feature-core": "^6.5.0-alpha.0",
"@k8slens/ui-components": "^1.0.0-alpha.0",
"@ogre-tools/injectable": "^15.1.2",
"@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
"@ogre-tools/fp": "^15.1.2",
"lodash": "^4.17.21"
"lodash": "^4.17.21",
"react": "^17"
},
"devDependencies": {
"@async-fn/jest": "^1.6.4",

63
packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap Normal file
View File

@ -0,0 +1,63 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`dock when rendered renders 1`] = `
<body>
<div>
<div
class="Dock isOpen"
>
<div
class="flex align-center tabs-container"
>
<div
class="Tab flex gaps align-center"
>
<div
class="label"
>
<div
class="flex align-center"
>
<span
class="overflow-hidden text-ellipsis"
>
Some title
</span>
</div>
</div>
</div>
<div
class="Tab flex gaps align-center"
>
<div
class="label"
>
<div
class="flex align-center"
>
<span
class="overflow-hidden text-ellipsis"
>
Some other title
</span>
</div>
</div>
</div>
</div>
<div
class="flex align-center toolbar gaps box grow pl-0"
>
<div
class="dock-menu box grow"
/>
</div>
<div
class="tab-content"
style="flex-basis: 420px;"
>
Some content
</div>
</div>
</div>
</body>
`;

29
packages/business-features/dock/src/dock.test.tsx Normal file
View File

@ -0,0 +1,29 @@
import { createContainer, DiContainer } from "@ogre-tools/injectable";
import { renderFor } from "@k8slens/test-utils";
import { DockHost } from "./dock/dock-host";
import React from "react";
import type { RenderResult } from "@testing-library/react";
describe("dock", () => {
let di: DiContainer;
beforeEach(() => {
di = createContainer("some-container");
// registerFeature(di, dockFeature);
});
describe("when rendered", () => {
let rendered: RenderResult;
beforeEach(() => {
const render = renderFor(di);
rendered = render(<DockHost />);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
});

37
packages/business-features/dock/src/dock/dock-host.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import { Tab } from "./tab";
import { Div, Span } from "@k8slens/ui-components";
export const DockHost = () => (
<Div _className={["Dock", { isOpen: true }]}>
<Div _flexParent={{ centeredVertically: true }} className="tabs-container">
<Tab>
<Div _flexParent={{ centeredVertically: true }}>
<Span _wordWrap>Some title</Span>
</Div>
</Tab>
<Tab>
<Div _flexParent={{ centeredVertically: true }}>
<Span _wordWrap>Some other title</Span>
</Div>
</Tab>
</Div>
<Div
_flexParent={{ centeredVertically: true }}
_className={[
"toolbar gaps box grow",
{
"pl-0": true,
},
]}
>
<div className="dock-menu box grow"></div>
</Div>
<div className={`tab-content`} style={{ flexBasis: 420 }}>
Some content
</div>
</Div>
);

8
packages/business-features/dock/src/dock/dock.scss
View File

@ -1,8 +1,8 @@
.Dock {
position: relative;
background: var(--dockHeadBackground);
display: flex;
flex-direction: column;
//position: relative;
//background: var(--dockHeadBackground);
//display: flex;
//flex-direction: column;
&:not(:focus-within) .DockTab.active {
&::after {

14
packages/business-features/dock/src/dock/tab.tsx Normal file
View File

@ -0,0 +1,14 @@
import { Div } from "@k8slens/ui-components";
import React from "react";
export interface TabProps {
children: React.ReactNode;
}
export const Tab = ({ children }: TabProps) => {
return (
<Div _className="Tab flex gaps align-center">
<div className="label">{children}</div>
</Div>
);
};

14
packages/business-features/dock/styles.d.ts vendored Normal file
View File

@ -0,0 +1,14 @@
// Support import for custom module extensions
// https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations
declare module "*.module.scss";
declare module "*.module.css" {
const classes: { [key: string]: string };
export default classes;
}
declare module "*.scss" {
const content: string;
export = content;
}