muerwre/markdown-home-tab
1
0
Fork 0
mirror of https://github.com/muerwre/markdown-home-tab.git synced 2025-04-25 00:46:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

added themes, extension manifest and layout splits

Browse source
This commit is contained in:
Fedor Katurov 2023-04-24 21:46:13 +06:00
parent 9a4eb6ef58
commit 1377d25403
13 changed files with 176 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -2,9 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

22
public/manifest.json Normal file
View file

@ -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"
}
}
}

1
public/vite.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

48
src/modules/layout/components/GridLayout/index.tsx
View file

@ -1,23 +1,55 @@
import { DockviewReact, IDockviewPanelProps } from "dockview"; import { DockviewReact, IDockviewPanelProps } from "dockview";
import { useGridLayoutPersistance } from "./hooks/useGridLayoutPersistance"; import { useGridLayoutPersistance } from "./hooks/useGridLayoutPersistance";
import { FC, createElement, useMemo } from "react"; import { FC, createElement, useCallback, useMemo } from "react";
import { GridLayoutComponentProps } from "../../types"; 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 { export interface GridLayoutProps {
component: FC<GridLayoutComponentProps>; component: FC<GridLayoutComponentProps>;
} }
interface DefaultLayoutProps {
panelProps: IDockviewPanelProps<{ title: string }>;
component: FC<GridLayoutComponentProps>;
}
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 (
<GridLayoutItemWrapper
splitVertical={splitVertical}
splitHorizontal={splitHorizontal}
remove={remove}
>
{createElement(component, {
id: panelProps.api.id,
title: panelProps.params.title,
})}
</GridLayoutItemWrapper>
);
};
export const GridLayout: FC<GridLayoutProps> = ({ component }) => { export const GridLayout: FC<GridLayoutProps> = ({ component }) => {
const { onReady } = useGridLayoutPersistance(); const { onReady } = useGridLayoutPersistance();
const components = useMemo( const components = useMemo(
() => ({ () => ({
default: (props: IDockviewPanelProps<{ title: string }>) => { default: (props: IDockviewPanelProps<{ title: string }>) => (
return createElement(component, { <DefaultLayout panelProps={props} component={component} />
id: props.api.id, ),
title: props.params.title,
});
},
}), }),
[component] [component]
); );
@ -26,7 +58,7 @@ export const GridLayout: FC<GridLayoutProps> = ({ component }) => {
<DockviewReact <DockviewReact
components={components} components={components}
onReady={onReady} onReady={onReady}
className="dockview-theme-abyss" className={styles.layout}
/> />
); );
}; };

11
src/modules/layout/components/GridLayout/styles.module.scss Normal file
View file

@ -0,0 +1,11 @@
.layout {
:global {
.vertical .sash {
border-top: 1px solid var(--color-border);
}
.horizontal .sash {
border-right: 1px solid var(--color-border);
}
}
}

8
src/modules/layout/components/GridLayout/utils/createDefaultLayout.ts
View file

@ -2,15 +2,15 @@ import { DockviewApi } from "dockview";
import { v4 } from "uuid"; import { v4 } from "uuid";
export const createDefaultLayout = (api: DockviewApi) => { export const createDefaultLayout = (api: DockviewApi) => {
api.addPanel({ const panel = api.addPanel({
id: v4(), id: v4(),
component: "default", component: "default",
title: "New editor", title: "",
params: { params: {
title: "Panel 1", title: "",
}, },
}); });
// panel.group.locked = true; // panel.group.locked = true;
// panel.group.header.hidden = true; panel.group.header.hidden = true;
}; };

23
src/modules/layout/components/GridLayout/utils/splitLayoutHorizontal.ts Normal file
View file

@ -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;
};

23
src/modules/layout/components/GridLayout/utils/splitLayoutVertical.ts Normal file
View file

@ -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;
};

33
src/modules/layout/components/GridLayoutItemWrapper/index.tsx Normal file
View file

@ -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<GridLayoutItemWrapperProps> = ({
children,
splitVertical,
splitHorizontal,
remove,
}) => (
<div className={styles.wrapper}>
<div className={styles.menu}>
<button onClick={splitVertical} role="button">
v
</button>
<button onClick={splitHorizontal} role="button">
h
</button>
<button onClick={remove} role="button">
d
</button>
</div>
{children}
</div>
);
export { GridLayoutItemWrapper };

11
src/modules/layout/components/GridLayoutItemWrapper/styles.module.scss Normal file
View file

@ -0,0 +1,11 @@
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
.menu {
position: absolute;
top: 0;
right: 0;
}

5
src/styles/_dark.scss Normal file
View file

@ -0,0 +1,5 @@
:root {
--color-border: #333333;
--color-background: #111111;
--color-text: #ffffff;
}

0
src/styles/_reset.scss Normal file
View file

4
src/styles/main.scss
View file

@ -1,9 +1,13 @@
@import "dockview/dist/styles/dockview.css"; @import "dockview/dist/styles/dockview.css";
@import "reset.scss";
@import "dark.scss";
html, html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
color: var(--color-text);
background: var(--color-background);
} }
#root { #root {