mirror of
https://github.com/muerwre/markdown-home-tab.git
synced 2025-04-24 16:36:41 +07:00
added themes, extension manifest and layout splits
This commit is contained in:
Fedor Katurov
parent
9a4eb6ef58
commit
1377d25403
13 changed files with 176 additions and 15 deletions
|
|
@ -2,9 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
22
public/manifest.json
Normal file
22
public/manifest.json
Normal 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 +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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -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<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 }) => {
|
||||
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 }>) => (
|
||||
<DefaultLayout panelProps={props} component={component} />
|
||||
),
|
||||
}),
|
||||
[component]
|
||||
);
|
||||
|
|
@ -26,7 +58,7 @@ export const GridLayout: FC<GridLayoutProps> = ({ component }) => {
|
|||
<DockviewReact
|
||||
components={components}
|
||||
onReady={onReady}
|
||||
className="dockview-theme-abyss"
|
||||
className={styles.layout}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
11
src/modules/layout/components/GridLayout/styles.module.scss
Normal file
11
src/modules/layout/components/GridLayout/styles.module.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -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 };
|
||||
|
|
@ -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
5
src/styles/_dark.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
:root {
|
||||
--color-border: #333333;
|
||||
--color-background: #111111;
|
||||
--color-text: #ffffff;
|
||||
}
|
||||
0
src/styles/_reset.scss
Normal file
0
src/styles/_reset.scss
Normal file
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue