This commit is contained in:
2023-05-26 13:31:28 +08:00
parent d8bebc32a2
commit ee9c54af61
9 changed files with 133 additions and 42 deletions

View File

@@ -1,5 +1,5 @@
import { asset } from "$fresh/runtime.ts";
import { Component, ContextType, RenderableProps } from "preact";
import { Component, ContextType } from "preact";
import { GlobalCtx } from "./GlobalContext.tsx";
export type StyleSheetType = {

24
deno.lock generated
View File

@@ -194,6 +194,8 @@
"https://deno.land/x/[email protected]/lib/z-worker-inline.js": "df83d91413a2e79f76924f39f26f59e6efbe8f5487d3a91b7e92b6d64236927c",
"https://deno.land/x/[email protected]/lib/zip-fs.js": "a733360302f5fbec9cc01543cb9fcfe7bae3f35a50d0006626ce42fe8183b63f",
"https://esm.sh/*[email protected]": "88ec8d8706b6a3f1e0fdad3862a2690dcd9b350d87bdc8e7bd0e27fbc0f7d29e",
"https://esm.sh/[email protected]/Icon": "e15153f88485e448a8d5ee9d1399205717b41d9cb72bd5824c3b42e1dc463cf6",
"https://esm.sh/[email protected]/List": "5eefaedd7a0f66843c1a1de658f4058b6fc1bbdcd0af1ec627c0f9412f4510c5",
"https://esm.sh/[email protected]/TopAppBar": "e418485020aecb866d9cc44216cd52c5ac1ff120bd1ad422b318428c274b3474",
"https://esm.sh/[email protected]": "ae382301328ab874e2c42bee76e261bb8d094673fe76ca7eb71917636d43d8ad",
"https://esm.sh/[email protected]/hooks": "1813f80c6d648f8137a62569e35972b0716f92539f192d6db66d45b7aafea43a",
@@ -202,6 +204,7 @@
"https://esm.sh/stable/[email protected]/deno/jsx-runtime.js": "7c8e1b8f272996846cbac0837dcb71f6f8cfc82611b3f7819501d07c37383dc0",
"https://esm.sh/stable/[email protected]/deno/preact.mjs": "9b73545225d0ed274c89f39aee524a2857c81a73060e80c2c4bdc2a6de7bec26",
"https://esm.sh/stable/[email protected]/deno/preact.mjs": "f51b1a99f29fa9879d70dc283bb8f42ce9beef99aa93dd6ca969f297e101e964",
"https://esm.sh/stable/[email protected]/deno/preact.mjs": "a5ce3f9331d537fb190ea0655f77fb1923e606799fb63bf7964c8ce6bd253baf",
"https://esm.sh/[email protected]": "e6db0352eb940ca8cdbf129fe4520809916d002b8ccc2e2fc7f8551138f7a161",
"https://esm.sh/[email protected]/sheets": "3472c3c28394aa25c026ff81a393361e71aca014b3b8db5d6c67396e60f87cc9",
"https://esm.sh/v118/[email protected]/hooks/src/index.d.ts": "5c29febb624fc25d71cb0e125848c9b711e233337a08f7eacfade38fd4c14cc3",
@@ -210,6 +213,8 @@
"https://esm.sh/v118/[email protected]/src/jsx.d.ts": "fde41cfb4944bcc5005e653c989ef8f85deb1cbb5364a1726654993937cd08d0",
"https://esm.sh/v118/[email protected]/src/index.d.ts": "65398710de6aa0a07412da79784e05e6e96763f51c7c91b77344d2d0af06385c",
"https://esm.sh/v118/[email protected]/src/jsx.d.ts": "de467cd980f79a13bf3026146afed7173a3634e7d6415d349184663c67174c0c",
"https://esm.sh/v118/[email protected]/src/index.d.ts": "65398710de6aa0a07412da79784e05e6e96763f51c7c91b77344d2d0af06385c",
"https://esm.sh/v118/[email protected]/src/jsx.d.ts": "1b91f662e58a27ec1af166842ac814c8665404d3789a76ff1e3248f009a29de6",
"https://esm.sh/v122/@babel/[email protected]/deno/helpers/classCallCheck.js": "678d4a1fc837f06947628e73a957e1f017fe30c77e8500008ec9a5977563c4f9",
"https://esm.sh/v122/@babel/[email protected]/deno/helpers/createClass.js": "4205e44f1238343af0a0e0ebc92cfb043382600f54c3e53aa4e6801c9bec7a44",
"https://esm.sh/v122/@babel/[email protected]/deno/helpers/get.js": "2021a8fa9d0d4880ece83c1d93266ac1d7414430f4f4671691a336ef3aa25dbe",
@@ -230,10 +235,29 @@
"https://esm.sh/v122/[email protected]/deno/bind-decorator.mjs": "21a126bdebaca6e38120139d903c3485c4f57e15487646666e79c1b5c15d0e44",
"https://esm.sh/v122/[email protected]/Base/MaterialComponent.d.ts": "af619a28f2d2f76113e29e952308a2ce46577438f7ed40531458b880ff9a141f",
"https://esm.sh/v122/[email protected]/Base/types.d.ts": "4ec93636595145b9c5cdd628111f28e66148821c23c8ef6273f84bb84a6b8eb8",
"https://esm.sh/v122/[email protected]/List/index.d.ts": "b4159279b6622abbf057385c2b155875dc7e80bdd4403def72d1c0cf58324c73",
"https://esm.sh/v122/[email protected]/TopAppBar/index.d.ts": "d921bd9336541339b0fff19e0769cea149b798bc172d261a7b7a1595f6b90266",
"https://esm.sh/v122/[email protected]/deno/Base/MaterialComponent.js": "7dca052dee2ab5010232055eac4a3159c8455e9b2857870525f7002cb50160bd",
"https://esm.sh/v122/[email protected]/deno/Icon.js": "44e17e354a08a2421fffcca3493efa60cc92e2357d410ed387e40f5d34da0ee2",
"https://esm.sh/v122/[email protected]/deno/List.js": "6e908d2bac752351683097bcc22ea26d8e46009c60bc3cee2312728af2f60776",
"https://esm.sh/v122/[email protected]/deno/TopAppBar.js": "ab7ec4fa168d7867961b9fd818e10d138ffb075c20ea4b11f6d231318d897145",
"https://esm.sh/v124/@babel/[email protected]/deno/helpers/classCallCheck.js": "678d4a1fc837f06947628e73a957e1f017fe30c77e8500008ec9a5977563c4f9",
"https://esm.sh/v124/@babel/[email protected]/deno/helpers/createClass.js": "4205e44f1238343af0a0e0ebc92cfb043382600f54c3e53aa4e6801c9bec7a44",
"https://esm.sh/v124/@babel/[email protected]/deno/helpers/getPrototypeOf.js": "41e694838de6926a04a013646f2b3915afa24a57a9301f3e226eadc78fa32e76",
"https://esm.sh/v124/@babel/[email protected]/deno/helpers/inherits.js": "09429b866edd8b9dd67dab992f9ad8865c19e15ffecde5ff632e4929755e2807",
"https://esm.sh/v124/@babel/[email protected]/deno/helpers/interopRequireDefault.js": "273ebefd452416883e9e517a620b46197b732a9ee384dfcb2ef33f731b7293d4",
"https://esm.sh/v124/@babel/[email protected]/deno/helpers/possibleConstructorReturn.js": "c48587b6a4194dac1f823e4706c67a286187cec9f29d35aac06df940443baa51",
"https://esm.sh/v124/@babel/[email protected]/deno/helpers/typeof.js": "ea8e5723c88f83ac7cfbb5728d38e20449f7387093b2825e6c8c81fdc50a7f32",
"https://esm.sh/v124/@material/[email protected]/deno/component.js": "aca74f4f0a80339f5bbba649c24b374ded56762679ea161a3db9563de595cec2",
"https://esm.sh/v124/@material/[email protected]/deno/foundation.js": "4edd0737b3601305ffe599556e98e4861542210744da83af19194c8c4f50c0e0",
"https://esm.sh/v124/@material/[email protected]/deno/ripple.mjs": "df299ee5ebdca82a60414bd942f39bd08eddb47071b7e8e1bcb2ae87f73f2c94",
"https://esm.sh/v124/[email protected]/deno/bind-decorator.mjs": "21a126bdebaca6e38120139d903c3485c4f57e15487646666e79c1b5c15d0e44",
"https://esm.sh/v124/[email protected]/index.d.ts": "4c68749a564a6facdf675416d75789ee5a557afda8960e0803cf6711fa569288",
"https://esm.sh/v124/[email protected]/Base/MaterialComponent.d.ts": "2ea7a1ffbff6c43619f3f85d69a9e9a3c62575f409fc93ad651f6906adba47d0",
"https://esm.sh/v124/[email protected]/Base/types.d.ts": "4ec93636595145b9c5cdd628111f28e66148821c23c8ef6273f84bb84a6b8eb8",
"https://esm.sh/v124/[email protected]/Icon/index.d.ts": "b2c27c8b912f07f20025951d9d05b2e4fb07c773d43db567b930e59b1c444f1c",
"https://esm.sh/v124/[email protected]/deno/Base/MaterialComponent.js": "a1ec4698c20561f82924708a3d728cdd4ba2c8b3cd895fe3b060c17911528c5c",
"https://esm.sh/v124/[email protected]/deno/Icon.js": "9d5ff5fb97a2a4005cf7bb2091e716ca77f920363c68c84108f1dc5e77bb7b7d",
"https://esm.sh/v124/[email protected]/X-ZS8q/deno/preact-render-to-string.mjs": "672116885c5e5072207c527a0ec663f5bc52774a0868ec487985109520382a55",
"https://esm.sh/v124/[email protected]/X-ZS8q/src/index.d.ts": "b1d73703252c8570fdf2952475805f5808ba3511fefbd93a3e7bd8406de7dcd0",
"https://esm.sh/v124/[email protected]/deno/style-vendorizer.mjs": "fb725497dd9621a84f552f9b6a4f3df82af5989ff18c40e972de1bdf475c9765",

View File

@@ -2,7 +2,11 @@ import { dirname, join } from "std/path/mod.ts";
import { sure_dir } from "./utils.ts";
const map = JSON.parse(await Deno.readTextFile("./import_map.json")).imports;
const LIST: string[] = ["preact-material-components/TopAppBar/style.css"];
const LIST: string[] = [
"preact-material-components/TopAppBar/style.css",
"preact-material-components/List/style.css",
"preact-material-components/Icon/style.css",
];
function get_url(i: string) {
for (const v of Object.getOwnPropertyNames(map)) {

View File

@@ -5,7 +5,8 @@
import config from "./deno.json" assert { type: "json" };
import * as $0 from "./routes/api/task/list.ts";
import * as $1 from "./routes/index.tsx";
import * as $$0 from "./islands/Menu.tsx";
import * as $$0 from "./islands/Container.tsx";
import * as $$1 from "./islands/Settings.tsx";
const manifest = {
routes: {
@@ -13,7 +14,8 @@ const manifest = {
"./routes/index.tsx": $1,
},
islands: {
"./islands/Menu.tsx": $$0,
"./islands/Container.tsx": $$0,
"./islands/Settings.tsx": $$1,
},
baseUrl: import.meta.url,
config,

70
islands/Container.tsx Normal file
View File

@@ -0,0 +1,70 @@
import { Head } from "$fresh/runtime.ts";
import { Component, ContextType } from "preact";
import { useState } from "preact/hooks";
import Icon from "preact-material-components/Icon";
import List from "preact-material-components/List";
import TopAppBar from "preact-material-components/TopAppBar";
import StyleSheet from "../components/StyleSheet.tsx";
import { GlobalCtx } from "../components/GlobalContext.tsx";
import Settings from "./Settings.tsx";
export default class Container extends Component {
static contextType = GlobalCtx;
declare context: ContextType<typeof GlobalCtx>;
render() {
const [display, set_display] = useState(false);
const [show_settings, set_show_settings] = useState(false);
const close_all = () => {
set_display(false);
set_show_settings(false);
};
return (
<div>
<Head>
<GlobalCtx.Provider value={this.context}>
<StyleSheet href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<StyleSheet href="preact-material-components/TopAppBar/style.css" />
<StyleSheet href="preact-material-components/List/style.css" />
<StyleSheet href="preact-material-components/Icon/style.css" />
<StyleSheet href="common.css" />
</GlobalCtx.Provider>
</Head>
<TopAppBar onNav={() => set_display(true)}>
<TopAppBar.Row>
<TopAppBar.Section align-start>
<TopAppBar.Icon navigation>menu</TopAppBar.Icon>
<TopAppBar.Title>
EH Downloader
</TopAppBar.Title>
</TopAppBar.Section>
<TopAppBar.Section align-end>
<TopAppBar.Icon>more_vert</TopAppBar.Icon>
</TopAppBar.Section>
</TopAppBar.Row>
</TopAppBar>
<List
class="nav-menu"
style={{ display: display ? "block" : "none" }}
>
<List.Item onClick={() => set_display(false)}>
<Icon>close</Icon>
</List.Item>
<List.Item onClick={close_all}>
<Icon>home</Icon>
</List.Item>
<List.Item
onClick={() => {
close_all();
set_show_settings(true);
}}
>
<Icon>settings</Icon>
</List.Item>
</List>
<div class="main">
<Settings show={show_settings} />
</div>
</div>
);
}
}

View File

@@ -1,36 +0,0 @@
import { Head } from "$fresh/runtime.ts";
import { Component } from "preact";
import { ContextType } from "preact";
import TopAppBar from "preact-material-components/TopAppBar";
import StyleSheet from "../components/StyleSheet.tsx";
import { GlobalCtx } from "../components/GlobalContext.tsx";
export default class Menu extends Component {
static contextType = GlobalCtx;
declare context: ContextType<typeof GlobalCtx>;
render() {
return (
<div>
<Head>
<GlobalCtx.Provider value={this.context}>
<StyleSheet href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<StyleSheet href="preact-material-components/TopAppBar/style.css" />
</GlobalCtx.Provider>
</Head>
<TopAppBar onNav={() => {}}>
<TopAppBar.Row>
<TopAppBar.Section align-start>
<TopAppBar.Icon navigation>menu</TopAppBar.Icon>
<TopAppBar.Title>
EH Downloader
</TopAppBar.Title>
</TopAppBar.Section>
<TopAppBar.Section align-end>
<TopAppBar.Icon>more_vert</TopAppBar.Icon>
</TopAppBar.Section>
</TopAppBar.Row>
</TopAppBar>
</div>
);
}
}

15
islands/Settings.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { Component, ContextType } from "preact";
import { GlobalCtx } from "../components/GlobalContext.tsx";
export type SettingsProps = {
show: boolean;
};
export default class Settings extends Component<SettingsProps> {
static contextType = GlobalCtx;
declare context: ContextType<typeof GlobalCtx>;
render() {
if (!this.props.show) return;
return <div>Settings</div>;
}
}

View File

@@ -1,6 +1,6 @@
import { Head } from "$fresh/runtime.ts";
import GlobalContext from "../components/GlobalContext.tsx";
import Menu from "../islands/Menu.tsx";
import Container from "../islands/Container.tsx";
export default function Index() {
return (
@@ -9,7 +9,7 @@ export default function Index() {
<Head>
<title>EH Downloader</title>
</Head>
<Menu></Menu>
<Container />
</GlobalContext>
</body>
);

12
static/common.css Normal file
View File

@@ -0,0 +1,12 @@
.nav-menu {
z-index: 100;
position: fixed;
background-color: white;
box-sizing: border-box;
display: none;
}
.main {
position: fixed;
top: 64px;
}