akai/readest
2
1
Fork 1
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Fix notebook width interfered by bookgrid with

Browse Source
This commit is contained in:
chrox
2024-11-11 18:26:17 +01:00
parent 7776788325
commit 00f0814474
7 changed files with 39 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src-tauri/tauri.conf.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
"productName": "Readest",
"version": "0.5.6",
"version": "0.5.7",
"identifier": "com.bilingify.digest",
"build": {
"frontendDist": "../out",
apps/readest-app/src/app/reader/components/BookGrid.tsx
+3 -5
View File
@@ -17,22 +17,19 @@ interface BookGridProps {
}
const BookGrid: React.FC<BookGridProps> = ({ bookKeys, onCloseBook }) => {
const { isSideBarPinned, isSideBarVisible, sideBarWidth } = useReaderStore();
const { getConfig, getProgress, getBookData, getViewState, getViewSettings } = useReaderStore();
const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useReaderStore();
const gridWidth = isSideBarPinned && isSideBarVisible ? `calc(100% - ${sideBarWidth})` : '100%';
const gridTemplate = getGridTemplate(bookKeys.length, window.innerWidth / window.innerHeight);
return (
<div
className='grid h-full'
className='grid h-full flex-grow'
style={{
width: gridWidth,
gridTemplateColumns: gridTemplate.columns,
gridTemplateRows: gridTemplate.rows,
}}
>
{bookKeys.map((bookKey) => {
{bookKeys.map((bookKey, index) => {
const bookData = getBookData(bookKey);
const config = getConfig(bookKey);
const progress = getProgress(bookKey);
@@ -54,6 +51,7 @@ const BookGrid: React.FC<BookGridProps> = ({ bookKeys, onCloseBook }) => {
<HeaderBar
bookKey={bookKey}
bookTitle={book.title}
isTopLeft={index === 0}
isHoveredAnim={bookKeys.length > 2}
onCloseBook={onCloseBook}
onSetSettingsDialogOpen={setFontLayoutSettingsDialogOpen}
apps/readest-app/src/app/reader/components/HeaderBar.tsx
+3 -1
View File
@@ -14,6 +14,7 @@ import ViewMenu from './ViewMenu';
interface HeaderBarProps {
bookKey: string;
bookTitle: string;
isTopLeft: boolean;
isHoveredAnim: boolean;
onCloseBook: (bookKey: string) => void;
onSetSettingsDialogOpen: (open: boolean) => void;
@@ -22,6 +23,7 @@ interface HeaderBarProps {
const HeaderBar: React.FC<HeaderBarProps> = ({
bookKey,
bookTitle,
isTopLeft,
isHoveredAnim,
onCloseBook,
onSetSettingsDialogOpen,
@@ -41,7 +43,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
ref={headerRef}
className={clsx(
`header-bar absolute top-0 z-10 flex h-11 w-full items-center pr-4`,
isFullScreen ? 'pl-4' : 'pl-16',
!isFullScreen && isTopLeft && !isSideBarVisible ? 'pl-16' : 'pl-4',
`shadow-xs bg-base-100 rounded-window-top-right transition-opacity duration-300`,
!isSideBarVisible && 'rounded-window-top-left',
isHoveredAnim && 'hover-bar-anim',
apps/readest-app/src/app/reader/components/ReaderContent.tsx
+4 -13
View File
@@ -18,9 +18,8 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) =>
const router = useRouter();
const { envConfig } = useEnv();
const { bookKeys, dismissBook, getNextBookKey, openSplitView } = useBooks();
const { sideBarBookKey, getConfig, setSideBarBookKey } = useReaderStore();
const { getView, getBookData, getViewState, clearViewState, saveConfig, saveSettings } =
useReaderStore();
const { sideBarBookKey, getView, getConfig, setSideBarBookKey } = useReaderStore();
const { getBookData, getViewState, clearViewState, saveConfig, saveSettings } = useReaderStore();
useBookShortcuts({ sideBarBookKey, bookKeys, openSplitView, getNextBookKey });
@@ -71,17 +70,9 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) =>
return (
<div className='flex h-screen'>
<SideBar
width={settings.globalReadSettings.sideBarWidth}
isPinned={settings.globalReadSettings.isSideBarPinned}
onGoToLibrary={handleCloseBooks}
onOpenSplitView={openSplitView}
/>
<SideBar onGoToLibrary={handleCloseBooks} onOpenSplitView={openSplitView} />
<BookGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
<Notebook
width={settings.globalReadSettings.notebookWidth}
isPinned={settings.globalReadSettings.isNotebookPinned}
/>
<Notebook />
</div>
);
};
apps/readest-app/src/app/reader/components/SectionInfo.tsx
+6 -1
View File
@@ -1,3 +1,4 @@
import { useReaderStore } from '@/store/readerStore';
import clsx from 'clsx';
import React from 'react';
@@ -7,9 +8,13 @@ interface SectionInfoProps {
}
const SectionInfo: React.FC<SectionInfoProps> = ({ chapter, gapLeft }) => {
const { isSideBarVisible } = useReaderStore();
return (
<div
className={clsx('pageinfo absolute right-0 top-0 flex h-[30px] items-end')}
className={clsx(
'pageinfo absolute right-0 top-0 flex items-end',
isSideBarVisible ? 'h-[30px]' : 'h-[44px]',
)}
style={{ left: gapLeft }}
>
<h2 className='text-center font-sans text-xs font-light text-slate-500'>{chapter || ''}</h2>
apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
+12 -12
View File
@@ -11,10 +11,10 @@ import { BookNote } from '@/types/book';
import { uniqueId } from '@/utils/misc';
import BooknoteItem from '../sidebar/BooknoteItem';
const MIN_NOTEBOOK_WIDTH = 0.05;
const MIN_NOTEBOOK_WIDTH = 0.15;
const MAX_NOTEBOOK_WIDTH = 0.45;
const Notebook: React.FC<{ width: string; isPinned: boolean }> = ({ width, isPinned }) => {
const Notebook: React.FC = ({}) => {
const { envConfig } = useEnv();
const { settings, sideBarBookKey, notebookWidth } = useReaderStore();
const { isNotebookVisible, isNotebookPinned } = useReaderStore();
@@ -23,6 +23,12 @@ const Notebook: React.FC<{ width: string; isPinned: boolean }> = ({ width, isPin
const { getConfig, saveConfig, getView, setNotebookVisible, updateBooknotes } = useReaderStore();
const { setNotebookNewAnnotation, setNotebookEditAnnotation } = useReaderStore();
useEffect(() => {
setNotebookWidth(settings.globalReadSettings.notebookWidth);
setNotebookPin(settings.globalReadSettings.isNotebookPinned);
setNotebookVisible(settings.globalReadSettings.isNotebookPinned);
}, []);
const handleNotebookResize = (newWidth: string) => {
setNotebookWidth(newWidth);
settings.globalReadSettings.notebookWidth = newWidth;
@@ -86,12 +92,6 @@ const Notebook: React.FC<{ width: string; isPinned: boolean }> = ({ width, isPin
setNotebookEditAnnotation(null);
};
useEffect(() => {
setNotebookWidth(width);
setNotebookPin(isPinned);
setNotebookVisible(isPinned);
}, []);
const { handleMouseDown } = useDragBar(handleDragMove);
const deleteNote = (note: BookNote) => {
if (!sideBarBookKey) return;
@@ -118,26 +118,26 @@ const Notebook: React.FC<{ width: string; isPinned: boolean }> = ({ width, isPin
return isNotebookVisible ? (
<>
{!isPinned && (
{!isNotebookPinned && (
<div className='overlay fixed inset-0 z-10 bg-black/20' onClick={handleClickOverlay} />
)}
<div
className={clsx(
'notebook-container bg-base-200 right-0 z-20 h-full min-w-60 select-none',
'rounded-window-top-right rounded-window-bottom-right',
!isPinned && 'shadow-2xl',
!isNotebookPinned && 'shadow-2xl',
)}
style={{
width: `${notebookWidth}`,
maxWidth: `${MAX_NOTEBOOK_WIDTH * 100}%`,
position: isPinned ? 'relative' : 'absolute',
position: isNotebookPinned ? 'relative' : 'absolute',
}}
>
<div
className='drag-bar absolute left-0 top-0 h-full w-0.5 cursor-col-resize'
onMouseDown={handleMouseDown}
/>
<NotebookHeader isPinned={isPinned} handleTogglePin={handleTogglePin} />
<NotebookHeader isPinned={isNotebookPinned} handleTogglePin={handleTogglePin} />
<div className='max-h-[calc(100vh-44px)] overflow-y-auto px-3'>
<div>{excerptNotes.length > 0 && <p className='pt-1 text-sm'>Excerpts</p>}</div>
<ul className=''>
apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+10 -8
View File
@@ -14,22 +14,24 @@ const MIN_SIDEBAR_WIDTH = 0.05;
const MAX_SIDEBAR_WIDTH = 0.45;
const SideBar: React.FC<{
width: string;
isPinned: boolean;
onGoToLibrary: () => void;
onOpenSplitView: () => void;
}> = ({ width, isPinned, onGoToLibrary, onOpenSplitView }) => {
}> = ({ onGoToLibrary, onOpenSplitView }) => {
const { envConfig } = useEnv();
const { sideBarBookKey, settings } = useReaderStore();
const { saveSettings, getBookData } = useReaderStore();
const [activeTab, setActiveTab] = useState(settings.globalReadSettings.sideBarTab);
const {
sideBarWidth,
isSideBarPinned,
isSideBarVisible,
setSideBarVisible,
handleSideBarResize,
handleSideBarTogglePin,
} = useSidebar(width, isPinned);
} = useSidebar(
settings.globalReadSettings.sideBarWidth,
settings.globalReadSettings.isSideBarPinned,
);
const handleDragMove = (e: MouseEvent) => {
const widthFraction = e.clientX / window.innerWidth;
@@ -62,16 +64,16 @@ const SideBar: React.FC<{
className={clsx(
'sidebar-container bg-base-200 z-20 h-full min-w-60 select-none',
'rounded-window-top-left rounded-window-bottom-left',
!isPinned && 'shadow-2xl',
!isSideBarPinned && 'shadow-2xl',
)}
style={{
width: `${sideBarWidth}`,
maxWidth: `${MAX_SIDEBAR_WIDTH * 100}%`,
position: isPinned ? 'relative' : 'absolute',
position: isSideBarPinned ? 'relative' : 'absolute',
}}
>
<SidebarHeader
isPinned={isPinned}
isPinned={isSideBarPinned}
onGoToLibrary={onGoToLibrary}
onOpenSplitView={onOpenSplitView}
handleTogglePin={handleSideBarTogglePin}
@@ -86,7 +88,7 @@ const SideBar: React.FC<{
onMouseDown={handleMouseDown}
></div>
</div>
{!isPinned && (
{!isSideBarPinned && (
<div className='overlay fixed inset-0 z-10 bg-black/20' onClick={handleClickOverlay} />
)}
</>