akai-tools/readest
2
0
Fork 0
forked from akai/readest
Code Pull Requests Activity

mobile: some UI tweaks and add system fonts (#233)

Browse Source
This commit is contained in:
Huang Xin
2025-01-23 16:53:42 +01:00
committed by GitHub
parent d757555fcb
commit 58d3e7b221
7 changed files with 67 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/app/layout.tsx
+7 -1
View File
@@ -36,6 +36,7 @@ export const viewport = {
initialScale: 1, initialScale: 1,
maximumScale: 1, maximumScale: 1,
userScalable: false, userScalable: false,
viewportFit: 'cover',
themeColor: 'white', themeColor: 'white',
}; };
@@ -44,9 +45,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<html> <html>
<head> <head>
<title>{title}</title> <title>{title}</title>
<meta
name='viewport'
content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/>
<meta name='mobile-web-app-capable' content='yes' /> <meta name='mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='default' /> <meta name='apple-mobile-web-app-status-bar-style' content='default' />
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' /> <meta name='apple-mobile-web-app-title' content='Readest' />
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' /> <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
<link rel='icon' href='/favicon.ico' /> <link rel='icon' href='/favicon.ico' />
<link rel='manifest' href='/manifest.json' /> <link rel='manifest' href='/manifest.json' />
apps/readest-app/src/app/reader/components/ViewMenu.tsx
+2 -2
View File
@@ -117,7 +117,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
</button> </button>
</div> </div>
<hr className='border-base-200 my-1' /> <hr className='border-base-300 my-1' />
<MenuItem label={_('Font & Layout')} shortcut='Shift+F' onClick={openFontLayoutMenu} /> <MenuItem label={_('Font & Layout')} shortcut='Shift+F' onClick={openFontLayoutMenu} />
@@ -128,7 +128,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
onClick={toggleScrolledMode} onClick={toggleScrolledMode}
/> />
<hr className='border-base-200 my-1' /> <hr className='border-base-300 my-1' />
<MenuItem <MenuItem
label={ label={
apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx
+3 -3
View File
@@ -36,7 +36,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
</button> </button>
<ul <ul
tabIndex={0} tabIndex={0}
className='dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-0 z-[1] mt-4 w-44 shadow' className='dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-[-32px] z-[1] mt-4 w-44 shadow sm:right-0'
> >
{options.map((option) => ( {options.map((option) => (
<li key={option} onClick={() => onSelect(option)}> <li key={option} onClick={() => onSelect(option)}>
@@ -51,7 +51,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
{moreOptions && moreOptions.length > 0 && ( {moreOptions && moreOptions.length > 0 && (
<li className='dropdown dropdown-left dropdown-top'> <li className='dropdown dropdown-left dropdown-top'>
<div className='flex items-center px-0'> <div className='flex items-center px-0'>
<span style={{ minWidth: `${iconSize16}px` }}> <span style={{ minWidth: `${defaultIconSize}px` }}>
<FiChevronLeft size={iconSize16} /> <FiChevronLeft size={iconSize16} />
</span> </span>
<span>{_('System Fonts')}</span> <span>{_('System Fonts')}</span>
@@ -60,7 +60,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
tabIndex={0} tabIndex={0}
className={clsx( className={clsx(
'dropdown-content bgcolor-base-200 menu rounded-box relative z-[1] overflow-y-scroll shadow', 'dropdown-content bgcolor-base-200 menu rounded-box relative z-[1] overflow-y-scroll shadow',
'!mr-5 mb-[-46px] inline max-h-80 w-[220px] overflow-y-scroll', '!mr-5 mb-[-46px] inline max-h-80 w-[200px] overflow-y-scroll',
)} )}
> >
{moreOptions.map((option) => ( {moreOptions.map((option) => (
apps/readest-app/src/app/reader/components/settings/FontPanel.tsx
+8
View File
@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
import NumberInput from './NumberInput'; import NumberInput from './NumberInput';
import FontDropdown from './FontDropDown'; import FontDropdown from './FontDropDown';
import { import {
ANDROID_FONTS,
IOS_FONTS,
LINUX_FONTS, LINUX_FONTS,
MACOS_FONTS, MACOS_FONTS,
MONOSPACE_FONTS, MONOSPACE_FONTS,
@@ -76,6 +78,12 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
case 'linux': case 'linux':
moreFonts = LINUX_FONTS; moreFonts = LINUX_FONTS;
break; break;
case 'ios':
moreFonts = IOS_FONTS;
break;
case 'android':
moreFonts = ANDROID_FONTS;
break;
default: default:
break; break;
} }
apps/readest-app/src/components/Dialog.tsx
+1 -1
View File
@@ -99,7 +99,7 @@ const Dialog: React.FC<DialogProps> = ({
<div <div
className={clsx( className={clsx(
'text-base-content my-2 flex-grow overflow-y-auto px-[10%]', 'text-base-content my-2 flex-grow overflow-y-auto px-6 sm:px-[10%]',
contentClassName, contentClassName,
)} )}
> >
apps/readest-app/src/components/MenuItem.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
> >
<div className='flex items-center'> <div className='flex items-center'>
{!noIcon && <span style={{ minWidth: `${iconSize}px` }}>{icon}</span>} {!noIcon && <span style={{ minWidth: `${iconSize}px` }}>{icon}</span>}
<span className={clsx('ml-2 max-w-32 truncate', labelClass)}>{label}</span> <span className={clsx('ml-2 truncate sm:max-w-32', labelClass)}>{label}</span>
</div> </div>
{shortcut && <span className='text-neutral-content hidden text-sm sm:flex'>{shortcut}</span>} {shortcut && <span className='text-neutral-content hidden text-sm sm:flex'>{shortcut}</span>}
</button> </button>
apps/readest-app/src/services/constants.ts
+45
View File
@@ -295,6 +295,51 @@ export const LINUX_FONTS = [
'WenQuanYi Zen Hei', 'WenQuanYi Zen Hei',
]; ];
export const IOS_FONTS = [
'Avenir',
'Avenir Next',
'Courier',
'Courier New',
'Georgia',
'Helvetica',
'Helvetica Neue',
'Hiragino Mincho',
'Hiragino Sans',
'Kaiti',
'Palatino',
'PingFang SC',
'PingFang TC',
'San Francisco',
'SF Pro Display',
'SF Pro Rounded',
'SF Pro Text',
'Songti',
'Times New Roman',
'Verdana',
];
export const ANDROID_FONTS = [
'Arial',
'Droid Sans',
'Droid Serif',
'FZLanTingHei',
'Georgia',
'Noto Sans',
'Noto Sans CJK',
'Noto Sans JP',
'Noto Serif',
'Noto Serif CJK',
'Noto Serif JP',
'PingFang SC',
'Roboto',
'Source Han Sans',
'Source Han Serif',
'STHeiti',
'STSong',
'Tahoma',
'Verdana',
];
export const ONE_COLUMN_MAX_INLINE_SIZE = 9999; export const ONE_COLUMN_MAX_INLINE_SIZE = 9999;
export const BOOK_IDS_SEPARATOR = '+'; export const BOOK_IDS_SEPARATOR = '+';