Compare commits
No commits in common. "55d499e1180932eb9ec3f6ce0a6f9f16beb49da1" and "31fb8521b893bc35f167e16289bf753c3a5a5177" have entirely different histories.
55d499e118
...
31fb8521b8
@ -51,12 +51,11 @@
|
||||
"icons/icon.icns",
|
||||
"icons/icon.ico"
|
||||
],
|
||||
"identifier": "xyz.archgrid.comic-viewer",
|
||||
"identifier": "xyz.archgrid.comic_viewer",
|
||||
"targets": "all"
|
||||
},
|
||||
"security": {
|
||||
"devCsp": "default-src 'self'; img-src 'self' asset: https://asset.localhost",
|
||||
"csp": null
|
||||
"csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
|
||||
},
|
||||
"updater": {
|
||||
"active": false
|
||||
|
@ -1,4 +1,3 @@
|
||||
//@ts-nocheck
|
||||
import { Stack, useMantineTheme } from '@mantine/core';
|
||||
import { ifElse, path, propEq } from 'ramda';
|
||||
import { FC, useMemo } from 'react';
|
||||
|
@ -1,4 +1,3 @@
|
||||
//@ts-nocheck
|
||||
import { Box } from '@mantine/core';
|
||||
import { equals } from 'ramda';
|
||||
import { FC, useLayoutEffect } from 'react';
|
||||
|
@ -1,4 +1,3 @@
|
||||
//@ts-nocheck
|
||||
import EventEmitter from 'events';
|
||||
import { indexOf, isEmpty, length, map, mergeLeft, pluck, range } from 'ramda';
|
||||
import { FC, useCallback, useContext, useMemo, useRef } from 'react';
|
||||
|
@ -1,4 +1,3 @@
|
||||
//@ts-nocheck
|
||||
import { Box, Center, Text } from '@mantine/core';
|
||||
import EventEmitter from 'events';
|
||||
import { includes, isEmpty, map, not, pipe, sort } from 'ramda';
|
||||
|
@ -1,4 +1,3 @@
|
||||
//@ts-nocheck
|
||||
import { Button, Group, Tooltip } from '@mantine/core';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { IconFolder } from '@tabler/icons-react';
|
||||
|
@ -1,4 +1,3 @@
|
||||
//@ts-nocheck
|
||||
import {
|
||||
ActionIcon,
|
||||
Group,
|
||||
|
@ -1,70 +1,5 @@
|
||||
//@ts-nocheck
|
||||
import EventEmitter from 'events';
|
||||
import { find, gt, head, indexOf, isNil, lt, max, pluck, propEq } from 'ramda';
|
||||
import { BaseSyntheticEvent, FC, useCallback, useContext, useMemo } from 'react';
|
||||
import { useLifecycles, useMeasure } from 'react-use';
|
||||
import { EventBusContext } from '../EventBus';
|
||||
import { useFileListStore } from '../states/files';
|
||||
import { useZoomState } from '../states/zoom';
|
||||
import { FC } from 'react';
|
||||
|
||||
export const SingleView: FC = () => {
|
||||
const files = useFileListStore.use.files();
|
||||
const actives = useFileListStore.use.actives();
|
||||
const zoom = useZoomState.use.currentZoom();
|
||||
const viewHeight = useZoomState.use.viewHeight();
|
||||
const updateActives = useFileListStore.use.updateActiveFiles();
|
||||
const ebus = useContext<EventEmitter>(EventBusContext);
|
||||
const [pageConRef, { width: pageConWidth }] = useMeasure();
|
||||
const activeFile = useMemo(() => {
|
||||
let firstFile = head(actives);
|
||||
return find(propEq('filename', firstFile), files);
|
||||
}, [files, actives]);
|
||||
const largerThanView = useMemo(() => {
|
||||
if (isNil(activeFile)) return false;
|
||||
let imageHeightAfterZoom = activeFile?.height * (zoom / 100);
|
||||
return gt(imageHeightAfterZoom, viewHeight);
|
||||
}, [activeFile, viewHeight, zoom]);
|
||||
const handlePaginationAction = useCallback(
|
||||
(event: BaseSyntheticEvent) => {
|
||||
let middle = pageConWidth / 2;
|
||||
let pagingDirection = lt(event.nativeEvent.offsetX, middle) ? -1 : 1;
|
||||
let targetIndex = indexOf(activeFile?.filename, pluck('filename', files)) + pagingDirection;
|
||||
updateActives([files[max(0, targetIndex)].filename]);
|
||||
},
|
||||
[files, activeFile, pageConWidth]
|
||||
);
|
||||
|
||||
useLifecycles(
|
||||
() => {
|
||||
ebus?.addListener('navigate_offset', ({ filename }) => {
|
||||
updateActives([filename]);
|
||||
});
|
||||
},
|
||||
() => {
|
||||
ebus?.removeAllListeners('navigate_offset');
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ position: 'relative', overflow: 'auto', contain: 'strict', height: '100%' }}
|
||||
onClick={handlePaginationAction}
|
||||
ref={pageConRef}
|
||||
>
|
||||
{!isNil(activeFile) && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: largerThanView ? 'flex-start' : 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: largerThanView ? '100%' : viewHeight
|
||||
}}
|
||||
>
|
||||
<img src={activeFile.path} style={{ width: `${zoom}%` }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return <div></div>;
|
||||
};
|
||||
|
@ -1,4 +1,3 @@
|
||||
//@ts-nocheck
|
||||
import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
|
||||
import { useColorScheme } from '@mantine/hooks';
|
||||
import { Notifications } from '@mantine/notifications';
|
||||
|
39
src/theme.ts
39
src/theme.ts
@ -1,20 +1,17 @@
|
||||
//@ts-nocheck
|
||||
import { MantineTheme } from '@mantine/core';
|
||||
import { useColorScheme } from '@mantine/hooks';
|
||||
import { ifElse, path, propEq } from 'ramda';
|
||||
|
||||
const bgColorSelectFn = (lightIndex: number, darkIndex: number) =>
|
||||
ifElse(
|
||||
propEq('colorScheme', 'light'),
|
||||
path(['colors', 'cbg', lightIndex]),
|
||||
path(['colors', 'cbg', darkIndex])
|
||||
);
|
||||
const fgColorSelectFn = (lightIndex: number, darkIndex: number) =>
|
||||
ifElse(
|
||||
propEq('colorScheme', 'light'),
|
||||
path(['colors', 'cfg', lightIndex]),
|
||||
path(['colors', 'cfg', darkIndex])
|
||||
);
|
||||
const bgColorSelectFn = ifElse(
|
||||
propEq('colorScheme', 'light'),
|
||||
path(['colors', 'cbg', 8]),
|
||||
path(['colors', 'cbg', 0])
|
||||
);
|
||||
const fgColorSelectFn = ifElse(
|
||||
propEq('colorScheme', 'light'),
|
||||
path(['colors', 'cfg', 0]),
|
||||
path(['colors', 'cfg', 8])
|
||||
);
|
||||
|
||||
export function useAppTheme(): Partial<MantineTheme> {
|
||||
const colorScheme = useColorScheme();
|
||||
@ -53,23 +50,11 @@ export function useAppTheme(): Partial<MantineTheme> {
|
||||
globalStyles: theme => ({
|
||||
'html, body': {
|
||||
height: '100vh',
|
||||
color: fgColorSelectFn(0, 8)(theme),
|
||||
backgroundColor: bgColorSelectFn(8, 0)(theme)
|
||||
color: fgColorSelectFn(theme),
|
||||
backgroundColor: bgColorSelectFn(theme)
|
||||
},
|
||||
'#root': {
|
||||
height: '100%'
|
||||
},
|
||||
'::-webkit-scrollbar': {
|
||||
width: 4,
|
||||
backgroundColor: bgColorSelectFn(6, 2)(theme)
|
||||
},
|
||||
'::-webkit-scrollbar-track': {
|
||||
borderRadius: 2,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
'::-webkit-scrollbar-thumb': {
|
||||
borderRadius: 2,
|
||||
backgroundColor: bgColorSelectFn(4, 4)(theme)
|
||||
}
|
||||
})
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user