diff --git a/index.html b/index.html index e0d1c84..22f6ccf 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,7 @@ - - Vite + React + TS
diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..996d216 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,22 @@ +{ + "name": "Markdown Home Tab", + "short_name": "Markdown New Tab", + "version": "0.0.0", + "description": "Makdown editor on your new tab", + "manifest_version": 2, + "permissions": ["storage"], + "chrome_url_overrides": { + "newtab": "index.html" + }, + "author": "Grogiriy Chervoplyas (muerwre)", + "icons": { + "16": "static/icon/icon16.png", + "48": "static/icon/icon48.png", + "128": "static/icon/icon128.png" + }, + "applications": { + "gecko": { + "id": "gotham48@gmail.com" + } + } +} diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/modules/layout/components/GridLayout/index.tsx b/src/modules/layout/components/GridLayout/index.tsx index 3aa5a31..20b99ea 100644 --- a/src/modules/layout/components/GridLayout/index.tsx +++ b/src/modules/layout/components/GridLayout/index.tsx @@ -1,23 +1,55 @@ import { DockviewReact, IDockviewPanelProps } from "dockview"; import { useGridLayoutPersistance } from "./hooks/useGridLayoutPersistance"; -import { FC, createElement, useMemo } from "react"; +import { FC, createElement, useCallback, useMemo } from "react"; import { GridLayoutComponentProps } from "../../types"; +import { GridLayoutItemWrapper } from "../GridLayoutItemWrapper"; +import { splitLayoutVertical } from "./utils/splitLayoutVertical"; +import { splitLayoutHorizontal } from "./utils/splitLayoutHorizontal"; +import styles from "./styles.module.scss"; export interface GridLayoutProps { component: FC; } +interface DefaultLayoutProps { + panelProps: IDockviewPanelProps<{ title: string }>; + component: FC; +} +const DefaultLayout = ({ component, panelProps }: DefaultLayoutProps) => { + const splitVertical = useCallback(() => { + splitLayoutVertical(panelProps.api.id, panelProps.containerApi); + }, [panelProps.api.id, panelProps.containerApi]); + + const splitHorizontal = useCallback(() => { + splitLayoutHorizontal(panelProps.api.id, panelProps.containerApi); + }, [panelProps.api.id, panelProps.containerApi]); + + const remove = useCallback(() => { + panelProps.api.close(); + }, [panelProps.api]); + + return ( + + {createElement(component, { + id: panelProps.api.id, + title: panelProps.params.title, + })} + + ); +}; + export const GridLayout: FC = ({ component }) => { const { onReady } = useGridLayoutPersistance(); const components = useMemo( () => ({ - default: (props: IDockviewPanelProps<{ title: string }>) => { - return createElement(component, { - id: props.api.id, - title: props.params.title, - }); - }, + default: (props: IDockviewPanelProps<{ title: string }>) => ( + + ), }), [component] ); @@ -26,7 +58,7 @@ export const GridLayout: FC = ({ component }) => { ); }; diff --git a/src/modules/layout/components/GridLayout/styles.module.scss b/src/modules/layout/components/GridLayout/styles.module.scss new file mode 100644 index 0000000..8808e4f --- /dev/null +++ b/src/modules/layout/components/GridLayout/styles.module.scss @@ -0,0 +1,11 @@ +.layout { + :global { + .vertical .sash { + border-top: 1px solid var(--color-border); + } + + .horizontal .sash { + border-right: 1px solid var(--color-border); + } + } +} diff --git a/src/modules/layout/components/GridLayout/utils/createDefaultLayout.ts b/src/modules/layout/components/GridLayout/utils/createDefaultLayout.ts index d059503..d6adad7 100644 --- a/src/modules/layout/components/GridLayout/utils/createDefaultLayout.ts +++ b/src/modules/layout/components/GridLayout/utils/createDefaultLayout.ts @@ -2,15 +2,15 @@ import { DockviewApi } from "dockview"; import { v4 } from "uuid"; export const createDefaultLayout = (api: DockviewApi) => { - api.addPanel({ + const panel = api.addPanel({ id: v4(), component: "default", - title: "New editor", + title: "", params: { - title: "Panel 1", + title: "", }, }); // panel.group.locked = true; - // panel.group.header.hidden = true; + panel.group.header.hidden = true; }; diff --git a/src/modules/layout/components/GridLayout/utils/splitLayoutHorizontal.ts b/src/modules/layout/components/GridLayout/utils/splitLayoutHorizontal.ts new file mode 100644 index 0000000..5bab0f1 --- /dev/null +++ b/src/modules/layout/components/GridLayout/utils/splitLayoutHorizontal.ts @@ -0,0 +1,23 @@ +import { DockviewApi } from "dockview"; +import { v4 } from "uuid"; + +export const splitLayoutHorizontal = ( + referencePanel: string, + api: DockviewApi +) => { + const panel = api.addPanel({ + id: v4(), + component: "default", + title: "", + params: { + title: "", + }, + position: { + referencePanel, + direction: "below", + }, + }); + + // panel.group.locked = true; + panel.group.header.hidden = true; +}; diff --git a/src/modules/layout/components/GridLayout/utils/splitLayoutVertical.ts b/src/modules/layout/components/GridLayout/utils/splitLayoutVertical.ts new file mode 100644 index 0000000..516f18d --- /dev/null +++ b/src/modules/layout/components/GridLayout/utils/splitLayoutVertical.ts @@ -0,0 +1,23 @@ +import { DockviewApi } from "dockview"; +import { v4 } from "uuid"; + +export const splitLayoutVertical = ( + referencePanel: string, + api: DockviewApi +) => { + const panel = api.addPanel({ + id: v4(), + component: "default", + title: "", + params: { + title: "", + }, + position: { + referencePanel, + direction: "right", + }, + }); + + // panel.group.locked = true; + panel.group.header.hidden = true; +}; diff --git a/src/modules/layout/components/GridLayoutItemWrapper/index.tsx b/src/modules/layout/components/GridLayoutItemWrapper/index.tsx new file mode 100644 index 0000000..5dcef1e --- /dev/null +++ b/src/modules/layout/components/GridLayoutItemWrapper/index.tsx @@ -0,0 +1,33 @@ +import { FC, PropsWithChildren } from "react"; +import styles from "./styles.module.scss"; + +type GridLayoutItemWrapperProps = PropsWithChildren & { + splitVertical: () => void; + splitHorizontal: () => void; + remove: () => void; +}; + +const GridLayoutItemWrapper: FC = ({ + children, + splitVertical, + splitHorizontal, + remove, +}) => ( +
+
+ + + +
+ + {children} +
+); + +export { GridLayoutItemWrapper }; diff --git a/src/modules/layout/components/GridLayoutItemWrapper/styles.module.scss b/src/modules/layout/components/GridLayoutItemWrapper/styles.module.scss new file mode 100644 index 0000000..d1b9f18 --- /dev/null +++ b/src/modules/layout/components/GridLayoutItemWrapper/styles.module.scss @@ -0,0 +1,11 @@ +.wrapper { + width: 100%; + height: 100%; + position: relative; +} + +.menu { + position: absolute; + top: 0; + right: 0; +} diff --git a/src/styles/_dark.scss b/src/styles/_dark.scss new file mode 100644 index 0000000..97c4981 --- /dev/null +++ b/src/styles/_dark.scss @@ -0,0 +1,5 @@ +:root { + --color-border: #333333; + --color-background: #111111; + --color-text: #ffffff; +} diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/main.scss b/src/styles/main.scss index ff209ae..d188433 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,9 +1,13 @@ @import "dockview/dist/styles/dockview.css"; +@import "reset.scss"; +@import "dark.scss"; html, body { padding: 0; margin: 0; + color: var(--color-text); + background: var(--color-background); } #root {