From e83a6bbe2b4d0480cfe04eeaadf0144f9c9ee767 Mon Sep 17 00:00:00 2001 From: monoid Date: Thu, 1 Jun 2023 23:07:58 +0900 Subject: [PATCH] add: comic reader page up/down btn --- src/client/component/headline.tsx | 11 +-- src/client/component/pagepad.tsx | 5 ++ src/client/page/404.tsx | 5 +- src/client/page/contentinfo.tsx | 11 ++- src/client/page/difference.tsx | 3 + src/client/page/gallery.tsx | 6 +- src/client/page/login.tsx | 67 ++++++++-------- src/client/page/profile.tsx | 122 +++++++++++++++--------------- src/client/page/reader/comic.tsx | 35 ++++++--- src/client/page/setting.tsx | 9 ++- src/client/page/tags.tsx | 5 +- 11 files changed, 163 insertions(+), 116 deletions(-) create mode 100644 src/client/component/pagepad.tsx diff --git a/src/client/component/headline.tsx b/src/client/component/headline.tsx index 86311e6..2e5dc86 100644 --- a/src/client/component/headline.tsx +++ b/src/client/component/headline.tsx @@ -198,8 +198,7 @@ export const Headline = (prop: { } }} value={search} - > - + /> {isLogin ? ( @@ -250,12 +249,10 @@ export const Headline = (prop: { display: "flex", flexFlow: "column", flexGrow: 1, - padding: theme.spacing(3), - marginTop: theme.spacing(6), + padding: "0px", + marginTop: "64px", }} - > -
- {prop.children} + >{prop.children} ); diff --git a/src/client/component/pagepad.tsx b/src/client/component/pagepad.tsx new file mode 100644 index 0000000..93cf098 --- /dev/null +++ b/src/client/component/pagepad.tsx @@ -0,0 +1,5 @@ +import { styled } from "@mui/material"; + +export const PagePad = styled("div")(({theme})=>({ + padding: theme.spacing(3) +})) \ No newline at end of file diff --git a/src/client/page/404.tsx b/src/client/page/404.tsx index d5a0cc8..b3a94c3 100644 --- a/src/client/page/404.tsx +++ b/src/client/page/404.tsx @@ -2,12 +2,15 @@ import { ArrowBack as ArrowBackIcon } from "@mui/icons-material"; import { Typography } from "@mui/material"; import React from "react"; import { BackItem, CommonMenuList, Headline, NavList } from "../component/mod"; +import { PagePad } from "../component/pagepad"; export const NotFoundPage = () => { const menu = CommonMenuList(); return ( - 404 Not Found + + 404 Not Found + ); }; diff --git a/src/client/page/contentinfo.tsx b/src/client/page/contentinfo.tsx index e4df29c..5fb857d 100644 --- a/src/client/page/contentinfo.tsx +++ b/src/client/page/contentinfo.tsx @@ -6,6 +6,7 @@ import { LoadingCircle } from "../component/loading"; import { CommonMenuList, ContentInfo, Headline } from "../component/mod"; import { NotFoundPage } from "./404"; import { getPresenter } from "./reader/reader"; +import { PagePad } from "../component/pagepad"; export const makeContentInfoUrl = (id: number) => `/doc/${id}`; export const makeComicReaderUrl = (id: number) => `/doc/${id}/reader`; @@ -79,7 +80,7 @@ export const DocumentAbout = (prop?: {}) => { if (match == null) { throw new Error("unreachable"); } - const id = Number.parseInt(match.id); + const id = Number.parseInt(match.id ?? "NaN"); const [info, setInfo] = useState({ doc: undefined, notfound: false }); const menu_list = (link?: string) => ; @@ -95,25 +96,33 @@ export const DocumentAbout = (prop?: {}) => { if (isNaN(id)) { return ( + Oops. Invalid ID + ); } else if (info.notfound) { return ( + Content has been removed. + ); } else if (info.doc === undefined) { return ( + + ); } else { return ( + + ); } diff --git a/src/client/page/difference.tsx b/src/client/page/difference.tsx index 2fbfb27..11ce2b4 100644 --- a/src/client/page/difference.tsx +++ b/src/client/page/difference.tsx @@ -3,6 +3,7 @@ import { Stack } from "@mui/material"; import React, { useContext, useEffect, useState } from "react"; import { CommonMenuList, Headline } from "../component/mod"; import { UserContext } from "../state"; +import { PagePad } from "../component/pagepad"; const useStyles = (theme: Theme) => ({ paper: { @@ -127,6 +128,7 @@ export function DifferencePage() { const menu = CommonMenuList(); return ( + {(ctx.username == "admin") ? (
@@ -136,6 +138,7 @@ export function DifferencePage() {
) : Not Allowed : please login as an admin} + ); } diff --git a/src/client/page/gallery.tsx b/src/client/page/gallery.tsx index 361614a..5a7e126 100644 --- a/src/client/page/gallery.tsx +++ b/src/client/page/gallery.tsx @@ -8,6 +8,7 @@ import { toQueryString } from "../accessor/util"; import { useLocation } from "react-router-dom"; import { QueryStringToMap } from "../accessor/util"; import { useIsElementInViewport } from "./reader/reader"; +import { PagePad } from "../component/pagepad"; export type GalleryProp = { option?: QueryListOption; @@ -70,8 +71,7 @@ export const GalleryInfo = (props: GalleryProp) => { )} {props.option.allow_tag !== undefined && props.option.allow_tag.map(x => ( - - + ))} )} @@ -126,7 +126,9 @@ export const Gallery = () => { option.limit = typeof query["limit"] === "string" ? parseInt(query["limit"]) : undefined; return ( + + ); }; diff --git a/src/client/page/login.tsx b/src/client/page/login.tsx index 2f03e1e..82d0720 100644 --- a/src/client/page/login.tsx +++ b/src/client/page/login.tsx @@ -16,6 +16,7 @@ import { useNavigate } from "react-router-dom"; import { CommonMenuList, Headline } from "../component/mod"; import { UserContext } from "../state"; import { doLogin as doSessionLogin } from "../state"; +import { PagePad } from "../component/pagepad"; export const LoginPage = () => { const theme = useTheme(); @@ -48,39 +49,41 @@ export const LoginPage = () => { const menu = CommonMenuList(); return ( - - Login -
-
- setUserLoginInfo({ ...userLoginInfo, username: e.target.value ?? "" })} - > - - { - if (e.key === "Enter") doLogin(); - }} - onChange={(e) => setUserLoginInfo({ ...userLoginInfo, password: e.target.value ?? "" })} - /> + + + Login
-
- - -
- - - - Login Failed - - detail : {openDialog.message} - - - - - +
+ setUserLoginInfo({ ...userLoginInfo, username: e.target.value ?? "" })} + > + + { + if (e.key === "Enter") doLogin(); + }} + onChange={(e) => setUserLoginInfo({ ...userLoginInfo, password: e.target.value ?? "" })} + /> +
+
+ + +
+ +
+ + Login Failed + + detail : {openDialog.message} + + + + + + ); }; diff --git a/src/client/page/profile.tsx b/src/client/page/profile.tsx index 66211f0..8df722e 100644 --- a/src/client/page/profile.tsx +++ b/src/client/page/profile.tsx @@ -16,6 +16,7 @@ import { import React, { useContext, useState } from "react"; import { CommonMenuList, Headline } from "../component/mod"; import { UserContext } from "../state"; +import { PagePad } from "../component/pagepad"; const useStyles = (theme: Theme) => ({ paper: { @@ -77,71 +78,74 @@ export function ProfilePage() { }; return ( - - - - {userctx.username} + + + + + + {userctx.username} + + + + Permission + + + {permission_list.length == 0 ? "-" : permission_list} + + + + - - - Permission - - - {permission_list.length == 0 ? "-" : permission_list} - - - - - - - - Password Reset - - type the old and new password -
- {(!isElectronContent) && ( + + + Password Reset + + type the old and new password +
+ {(!isElectronContent) && ( + setOldpw(e.target.value)} + > + + )} setOldpw(e.target.value)} + label="new password" + value={newpw} + onChange={e => setNewpw(e.target.value)} > - )} - setNewpw(e.target.value)} - > - - setNewpwch(e.target.value)} - > - -
- - - - - - - set_msg_dialog({ opened: false, msg: "" })}> - Alert! - - {msg_dialog.msg} - - - - - + setNewpwch(e.target.value)} + > + +
+ + + + + + + set_msg_dialog({ opened: false, msg: "" })}> + Alert! + + {msg_dialog.msg} + + + + + + ); } diff --git a/src/client/page/reader/comic.tsx b/src/client/page/reader/comic.tsx index f3b057c..5211e6c 100644 --- a/src/client/page/reader/comic.tsx +++ b/src/client/page/reader/comic.tsx @@ -1,4 +1,4 @@ -import { Typography, useTheme } from "@mui/material"; +import { Typography, styled } from "@mui/material"; import React, { useEffect, useState } from "react"; import { Document } from "../../accessor/document"; @@ -13,6 +13,21 @@ export type PresentableTag = { tags: string[]; }; +const ViewMain = styled("div")(({ theme }) => ({ + overflow: "hidden", + width: "100%", + height: "calc(100vh - 64px)", + position: "relative", +})); +const CurrentView = styled("img")(({theme})=>({ + maxWidth: "100%", + maxHeight: "100%", + top:"50%", + left:"50%", + transform: "translate(-50%,-50%)", + position: "absolute" +})); + export const ComicReader = (props: { doc: Document }) => { const additional = props.doc.additional; const [curPage, setCurPage] = useState(0); @@ -21,13 +36,13 @@ export const ComicReader = (props: { doc: Document }) => { return Error. DB error. page restriction; } const PageDown = () => setCurPage(Math.max(curPage - 1, 0)); - const PageUP = () => setCurPage(Math.min(curPage + 1, page - 1)); + const PageUp = () => setCurPage(Math.min(curPage + 1, page - 1)); const page: number = additional["page"] as number; const onKeyUp = (e: KeyboardEvent) => { if (e.code === "ArrowLeft") { PageDown(); } else if (e.code === "ArrowRight") { - PageUP(); + PageUp(); } }; useEffect(() => { @@ -38,14 +53,14 @@ export const ComicReader = (props: { doc: Document }) => { }); // theme.mixins.toolbar.minHeight; return ( -
- +
+ - -
+ > +
+ ); }; diff --git a/src/client/page/setting.tsx b/src/client/page/setting.tsx index d40f19a..b4f7eda 100644 --- a/src/client/page/setting.tsx +++ b/src/client/page/setting.tsx @@ -2,14 +2,17 @@ import { ArrowBack as ArrowBackIcon } from "@mui/icons-material"; import { Paper, Typography } from "@mui/material"; import React from "react"; import { BackItem, CommonMenuList, Headline, NavList } from "../component/mod"; +import { PagePad } from "../component/pagepad"; export const SettingPage = () => { const menu = CommonMenuList(); return ( - - Setting - + + + Setting + + ); }; diff --git a/src/client/page/tags.tsx b/src/client/page/tags.tsx index 9b14f4a..9c65cea 100644 --- a/src/client/page/tags.tsx +++ b/src/client/page/tags.tsx @@ -3,6 +3,7 @@ import { DataGrid, GridColDef } from "@mui/x-data-grid"; import React, { useEffect, useState } from "react"; import { LoadingCircle } from "../component/loading"; import { CommonMenuList, Headline } from "../component/mod"; +import { PagePad } from "../component/pagepad"; type TagCount = { tag_name: string; @@ -67,7 +68,9 @@ export const TagsPage = () => { const menu = CommonMenuList(); return ( - + + + ); };