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

fix: style tweaks for Windows (#707)

Browse Source
This commit is contained in:
Huang Xin
2025-03-26 01:58:23 +08:00
committed by GitHub
parent 3f3c6983ba
commit 835ed443a5
13 changed files with 82 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src-tauri/src/lib.rs
+16 -2
View File
@@ -63,6 +63,15 @@ fn set_window_open_with_files(app: &AppHandle, files: Vec<PathBuf>) {
}
}
#[cfg(desktop)]
fn set_rounded_window(app: &AppHandle, rounded: bool) {
let window = app.get_webview_window("main").unwrap();
let script = format!("window.IS_ROUNDED = {};", rounded);
if let Err(e) = window.eval(&script) {
eprintln!("Failed to set IS_ROUNDED variable: {}", e);
}
}
#[command]
async fn start_server(window: Window) -> Result<u16, String> {
start(move |url| {
@@ -185,6 +194,12 @@ pub fn run() {
app_handle.get_webview_window("main").unwrap()
.eval("window.__READEST_CLI_ACCESS = true; window.__READEST_UPDATER_ACCESS = true;")
.expect("Failed to set cli access config");
set_rounded_window(&app_handle, true);
#[cfg(target_os = "windows")]
if tauri_plugin_os::version() <= tauri_plugin_os::Version::from_string("10.0.19045") {
set_rounded_window(&app_handle, false);
}
});
}
@@ -225,8 +240,7 @@ pub fn run() {
.title("Readest");
if cfg!(target_os = "windows") {
let version = tauri_plugin_os::version();
if version <= tauri_plugin_os::Version::from_string("10.0.19045") {
if tauri_plugin_os::version() <= tauri_plugin_os::Version::from_string("10.0.19045") {
win_builder = win_builder.shadow(false);
} else {
win_builder = win_builder.shadow(true);
apps/readest-app/src/app/auth/page.tsx
+25 -12
View File
@@ -23,6 +23,7 @@ import { openUrl } from '@tauri-apps/plugin-opener';
import { handleAuthCallback } from '@/helpers/auth';
import { getAppleIdAuth, Scope } from './utils/appleIdAuth';
import { authWithSafari } from './utils/safariAuth';
import WindowButtons from '@/components/WindowButtons';
type OAuthProvider = 'google' | 'apple' | 'azure' | 'github';
@@ -47,11 +48,11 @@ const ProviderLogin: React.FC<ProviderLoginProp> = ({ provider, handleSignIn, Ic
onClick={() => handleSignIn(provider)}
className={clsx(
'mb-2 flex w-64 items-center justify-center rounded border p-2.5',
'bg-base-100 border-gray-300 shadow-sm transition hover:bg-gray-50',
'bg-base-100 border-base-300 hover:bg-base-200 shadow-sm transition',
)}
>
<Icon />
<span className='text-neutral-content/70 px-2 text-sm'>{label}</span>
<span className='text-base-content/75 px-2 text-sm'>{label}</span>
</button>
);
};
@@ -67,6 +68,8 @@ export default function AuthPage() {
const isOAuthServerRunning = useRef(false);
const [isMounted, setIsMounted] = useState(false);
const headerRef = useRef<HTMLDivElement>(null);
const getTauriRedirectTo = (isOAuth: boolean) => {
if (process.env.NODE_ENV === 'production' || appService?.isMobile) {
if (appService?.isIOSApp) {
@@ -298,21 +301,31 @@ export default function AuthPage() {
return isTauriAppPlatform() ? (
<div
className={clsx(
'mt-6 flex',
'bg-base-100 border-base-200 flex h-dvh w-full select-none flex-col items-center border',
appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
appService?.hasTrafficLight && 'pt-11',
)}
>
<button
onClick={handleGoBack}
<div
ref={headerRef}
className={clsx(
'btn btn-ghost fixed left-4 h-8 min-h-8 w-8 p-0',
appService?.hasSafeAreaInset && 'top-[calc(env(safe-area-inset-top)+16px)]',
appService?.hasTrafficLight && 'top-11',
'flex w-full items-center justify-between py-2 pe-6 ps-4',
appService?.hasTrafficLight && 'pt-11',
)}
>
<IoArrowBack className='text-base-content' />
</button>
<button onClick={handleGoBack} className={clsx('btn btn-ghost h-8 min-h-8 w-8 p-0')}>
<IoArrowBack className='text-base-content' />
</button>
{appService?.hasWindowBar && (
<WindowButtons
headerRef={headerRef}
showMinimize={appService?.hasWindowBar}
showMaximize={appService?.hasWindowBar}
showClose={appService?.hasWindowBar}
onClose={handleGoBack}
/>
)}
</div>
<div style={{ maxWidth: '420px', margin: 'auto', padding: '2rem' }}>
<ProviderLogin
provider='google'
@@ -332,7 +345,7 @@ export default function AuthPage() {
Icon={FaGithub}
label={_('Sign in with GitHub')}
/>
<hr className='my-3 mt-6 w-64 border-t border-gray-200' />
<hr className='border-base-300 my-3 mt-6 w-64 border-t' />
<Auth
supabaseClient={supabase}
appearance={{ theme: ThemeSupa }}
apps/readest-app/src/app/library/components/LibraryHeader.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
<div
ref={headerRef}
className={clsx(
'titlebar h-13 z-10 flex w-full items-center py-2 pr-4 sm:pr-6',
'titlebar z-10 flex w-full items-center py-2 pr-4 sm:pr-6',
appService?.hasSafeAreaInset && 'mt-[env(safe-area-inset-top)]',
isTrafficLightVisible ? 'pl-16' : 'pl-0 sm:pl-2',
)}
apps/readest-app/src/app/library/components/SettingsMenu.tsx
+1 -3
View File
@@ -163,9 +163,7 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
onClick={toggleScreenWakeLock}
/>
<hr className='border-base-200 my-1' />
{appService?.hasRoundedWindow && (
<MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />
)}
{appService?.hasWindow && <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />}
<MenuItem label={_('Reload Page')} onClick={handleReloadPage} />
<hr className='border-base-200 my-1' />
{isWebApp && <MenuItem label={_('Download Readest')} onClick={downloadReadest} />}
apps/readest-app/src/app/library/page.tsx
+1 -1
View File
@@ -508,7 +508,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
<div
ref={containerRef}
className={clsx(
'scroll-container drop-zone mt-12 flex-grow overflow-auto px-4 sm:px-2',
'scroll-container drop-zone mt-12 flex-grow overflow-y-auto px-4 sm:px-2',
appService?.hasSafeAreaInset && 'mt-[calc(48px+env(safe-area-inset-top))]',
appService?.hasSafeAreaInset && 'pb-[calc(env(safe-area-inset-bottom))]',
isDragging && 'drag-over',
apps/readest-app/src/app/reader/components/ViewMenu.tsx
+1 -3
View File
@@ -132,9 +132,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
<hr className='border-base-300 my-1' />
{appService?.hasRoundedWindow && (
<MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />
)}
{appService?.hasWindow && <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />}
<MenuItem
label={
themeMode === 'dark'
apps/readest-app/src/app/user/page.tsx
+23 -10
View File
@@ -1,7 +1,7 @@
'use client';
import clsx from 'clsx';
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { IoArrowBack } from 'react-icons/io5';
@@ -17,6 +17,7 @@ import { navigateToLibrary } from '@/utils/nav';
import { deleteUser } from '@/libs/user';
import { eventDispatcher } from '@/utils/event';
import { Toast } from '@/components/Toast';
import WindowButtons from '@/components/WindowButtons';
import Quota from '@/components/Quota';
const ProfilePage = () => {
@@ -29,6 +30,8 @@ const ProfilePage = () => {
const [quotas, setQuotas] = React.useState<QuotaType[]>([]);
const [showConfirmDelete, setShowConfirmDelete] = useState(false);
const headerRef = useRef<HTMLDivElement>(null);
useTheme();
useEffect(() => {
@@ -154,21 +157,31 @@ const ProfilePage = () => {
return (
<div
className={clsx(
'mt-6 flex justify-center',
'bg-base-100 border-base-200 flex h-dvh w-full select-none flex-col items-center border',
appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
appService?.hasTrafficLight && 'pt-11',
)}
>
<button
onClick={handleGoBack}
<div
ref={headerRef}
className={clsx(
'btn btn-ghost fixed left-4 h-8 min-h-8 w-8 p-0',
appService?.hasSafeAreaInset && 'top-[calc(env(safe-area-inset-top)+16px)]',
appService?.hasTrafficLight && 'top-11',
'flex w-full items-center justify-between py-2 pe-6 ps-4',
appService?.hasTrafficLight && 'pt-11',
)}
>
<IoArrowBack className='text-base-content' />
</button>
<button onClick={handleGoBack} className={clsx('btn btn-ghost h-8 min-h-8 w-8 p-0')}>
<IoArrowBack className='text-base-content' />
</button>
{appService?.hasWindowBar && (
<WindowButtons
headerRef={headerRef}
showMinimize={appService?.hasWindowBar}
showMaximize={appService?.hasWindowBar}
showClose={appService?.hasWindowBar}
onClose={handleGoBack}
/>
)}
</div>
<div className='w-full max-w-4xl px-4 py-10'>
<div className='bg-base-200 overflow-hidden rounded-lg p-2 shadow-md sm:p-6'>
<div className='p-2 sm:p-6'>
apps/readest-app/src/components/Toast.tsx
+2 -2
View File
@@ -64,8 +64,8 @@ export const Toast = () => {
>
<span
className={clsx(
'max-h-[50vh] min-w-[30vw] max-w-80',
'overflow-scroll whitespace-normal break-words text-center',
'max-h-[50vh] min-w-32 max-w-80',
'overflow-y-auto whitespace-normal break-words text-center',
messageClass.current,
)}
>
apps/readest-app/src/services/appService.ts
+1
View File
@@ -49,6 +49,7 @@ export abstract class BaseAppService implements AppService {
abstract isAndroidApp: boolean;
abstract isIOSApp: boolean;
abstract hasTrafficLight: boolean;
abstract hasWindow: boolean;
abstract hasWindowBar: boolean;
abstract hasContextMenu: boolean;
abstract hasRoundedWindow: boolean;
apps/readest-app/src/services/nativeAppService.ts
+8 -1
View File
@@ -23,6 +23,12 @@ import { isValidURL } from '@/utils/misc';
import { BaseAppService } from './appService';
import { LOCAL_BOOKS_SUBDIR } from './constants';
declare global {
interface Window {
IS_ROUNDED?: boolean;
}
}
const OS_TYPE = osType();
const resolvePath = (fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } => {
@@ -122,9 +128,10 @@ export class NativeAppService extends BaseAppService {
isAndroidApp = OS_TYPE === 'android';
isIOSApp = OS_TYPE === 'ios';
hasTrafficLight = OS_TYPE === 'macos';
hasWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
hasWindowBar = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
hasContextMenu = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
hasRoundedWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
hasRoundedWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android') && !!window.IS_ROUNDED;
hasSafeAreaInset = OS_TYPE === 'ios' || OS_TYPE === 'android';
hasHaptics = OS_TYPE === 'ios' || OS_TYPE === 'android';
hasSysFontsList = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
apps/readest-app/src/services/webAppService.ts
+1
View File
@@ -184,6 +184,7 @@ export class WebAppService extends BaseAppService {
isAndroidApp = false;
isIOSApp = false;
hasTrafficLight = false;
hasWindow = false;
hasWindowBar = false;
hasContextMenu = false;
hasRoundedWindow = false;
apps/readest-app/src/styles/globals.css
+1 -1
View File
@@ -209,7 +209,7 @@ foliate-view {
}
.scroll-container {
overflow-y: scroll;
overflow-y: auto;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
apps/readest-app/src/types/system.ts
+1
View File
@@ -25,6 +25,7 @@ export interface AppService {
osPlatform: string;
appPlatform: AppPlatform;
hasTrafficLight: boolean;
hasWindow: boolean;
hasWindowBar: boolean;
hasContextMenu: boolean;
hasRoundedWindow: boolean;