zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

impove useThemeColor hook

Browse Source
This commit is contained in:
MathieuG-P
2022-07-23 11:32:05 +02:00
parent 15619fa937
commit 93fcea7ff1
6 changed files with 41 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/modal/modal.component.tsx
+2 -5
View File
@@ -6,17 +6,14 @@ import { UninstallModal } from "./modal-types/uninstall-modal.component";
import { InstallationFolderModal } from "./modal-types/installation-folder-modal.component";
import { EditVersionModal } from "./modal-types/edit-version-modal.component";
import { useObservable } from "renderer/hooks/use-observable.hook";
import { ConfigurationService } from "renderer/services/configuration.service";
import { DefaultConfigKey } from "renderer/config/default-configuration.config";
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
export function Modal() {
const modalSevice = ModalService.getInsance();
const configService = ConfigurationService.getInstance();
const modalType = useObservable(modalSevice.modalType$);
const firstColor = useObservable(configService.watch("first-color" as DefaultConfigKey));
const secondColor = useObservable(configService.watch("second-color" as DefaultConfigKey));
const {firstColor, secondColor} = useThemeColor();
return (
<AnimatePresence>
src/renderer/components/nav-bar/bs-version-item.component.tsx
+3 -12
View File
@@ -10,7 +10,6 @@ import { BSUninstallerService } from "renderer/services/bs-uninstaller.service";
import { BSVersionManagerService } from "renderer/services/bs-version-manager.service";
import { BsmIcon } from "../svgs/bsm-icon.component";
import { ReactFitty } from "react-fitty";
import { DefaultConfigKey } from 'renderer/config/default-configuration.config';
import { useThemeColor } from 'renderer/hooks/use-theme-color.hook';
export function BsVersionItem(props: {version: BSVersion}) {
@@ -25,9 +24,7 @@ export function BsVersionItem(props: {version: BSVersion}) {
const [downloading, setDownloading] = useState(false);
const [downloadPercent, setDownloadPercent] = useState(0);
const [color, setColor] = useState("");
const firstColor = useThemeColor("first-color");
const secondColor = useThemeColor("second-color");
const {firstColor, secondColor} = useThemeColor();
const isActive = (): boolean => {
return props.version?.BSVersion === state?.BSVersion && props?.version.steam === state?.steam && props?.version.name === state?.name;
@@ -65,23 +62,17 @@ export function BsVersionItem(props: {version: BSVersion}) {
}
});
subs.push(downloadSub);
if(props.version?.color){ setColor(props.version.color); }
else{
const colorSub = configService.watch<string>("second-color" as DefaultConfigKey).subscribe(color => setColor(color));
subs.push(colorSub);
}
return () => { subs.forEach(s => s.unsubscribe()); }
}, []);
return (
<div className={`outline-none relative p-[1px] overflow-hidden rounded-xl flex justify-center items-center mb-1 ${downloading && "nav-item-download"} active:translate-y-[1px]`}>
<div className="download-progress absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})`}}></div>
{downloading && <div className="download-progress absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})`}}/>}
<div className={`wrapper z-[1] px-1 py-[3px] w-full rounded-xl ${downloading && 'bg-black'} ${!downloading && "hover:bg-light-main-color-3 dark:hover:bg-main-color-3"} ${(isActive() && !downloading) && "bg-light-main-color-3 dark:bg-main-color-3"}`}>
<Link onDoubleClick={handleDoubleClick} to={`/bs-version/${props.version.BSVersion}`} state={props.version} title={props.version.name && `${props.version.BSVersion} - ${props.version.name}`} className="w-full flex items-center justify-start content-center max-w-full">
{props.version.steam && <BsmIcon icon="steam" className="w-[19px] h-[19px] mr-[5px] shrink-0"/>}
{!props.version.steam && <BsmIcon icon="bsNote" className="w-[19px] h-[19px] mr-[5px] shrink-0" style={{color: color}}/>}
{!props.version.steam && <BsmIcon icon="bsNote" className="w-[19px] h-[19px] mr-[5px] shrink-0" style={{color: props.version?.color ?? secondColor}}/>}
<div className="overflow-hidden whitespace-nowrap text-xl dark:text-gray-200 text-gray-800 font-bold tracking-wide">
<ReactFitty maxSize={19} minSize={9} className='align-middle pb-[2px] max-w-full overflow-hidden text-ellipsis'>{props.version.name || props.version.BSVersion}</ReactFitty>
</div>
src/renderer/components/nav-bar/nav-bar.component.tsx
+2 -5
View File
@@ -2,19 +2,16 @@ import './nav-bar.component.css'
import { BsVersionItem } from './bs-version-item.component';
import { BSVersionManagerService } from '../../services/bs-version-manager.service';
import { Link } from 'react-router-dom';
import { ConfigurationService } from 'renderer/services/configuration.service';
import { BsmIcon } from '../svgs/bsm-icon.component';
import { useObservable } from 'renderer/hooks/use-observable.hook';
import { useThemeColor } from 'renderer/hooks/use-theme-color.hook';
export function NavBar() {
const configService = ConfigurationService.getInstance();
const bsVersionServoce = BSVersionManagerService.getInstance();
const installedVersions = useObservable(bsVersionServoce.installedVersions$);
const firstColor = useObservable(configService.watch<string>("first-color"));
const secondColor = useObservable(configService.watch<string>("second-color"));
const {firstColor, secondColor} = useThemeColor();
return (
<div id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1 bg-light-main-color-1 dark:bg-main-color-1'>
src/renderer/components/progress-bar/bsm-progress-bar.component.tsx
+2 -3
View File
@@ -9,10 +9,9 @@ export function BsmProgressBar() {
const progressBarService = ProgressBarService.getInstance();
const progress= useObservable(progressBarService.progression$);
const progress = useObservable(progressBarService.progression$);
const visible = useObservable(progressBarService.visible$);
const firstColor = useThemeColor("first-color");
const secondColor = useThemeColor("second-color");
const {firstColor, secondColor} = useThemeColor();
return (
<AnimatePresence> { visible &&
src/renderer/hooks/use-theme-color.hook.ts
+30 -9
View File
@@ -1,22 +1,43 @@
import { useEffect, useState } from "react";
import { DefaultConfigKey } from "renderer/config/default-configuration.config";
import { ConfigurationService } from "renderer/services/configuration.service";
export function useThemeColor(themeColor: "first-color"|"second-color"){
export function useThemeColor(): {firstColor: string, secondColor: string};
export function useThemeColor(themeColor: "first-color"|"second-color"): string;
export function useThemeColor(themeColor?: "first-color"|"second-color"): string|{firstColor: string, secondColor: string}{
const configService = ConfigurationService.getInstance();
const [color, setColor] = useState("");
if(themeColor){
const [color, setColor] = useState("");
useEffect(() => {
const sub = configService.watch<string>(themeColor).subscribe(color => {
setColor(color);
})
return () => {
sub.unsubscribe();
}
}, []);
return color;
}
const [firstColor, setFirstColor] = useState("");
const [secondColor, setSecondColor] = useState("");
useEffect(() => {
const obs = configService.watch<string>(themeColor)
obs.subscribe(color => {
setColor(color);
})
const sub1 = configService.watch<string>("first-color" as DefaultConfigKey).subscribe(color => {
setFirstColor(color);
});
const sub2 = configService.watch<string>("second-color" as DefaultConfigKey).subscribe(color => {
setSecondColor(color);
});
return () => {
configService.stopWatch(color, obs);
obs.unsubscribe();
sub1.unsubscribe();
sub2.unsubscribe();
}
}, []);
return color;
return {firstColor, secondColor}
}
src/renderer/pages/settings-page.component.tsx
+2 -3
View File
@@ -6,7 +6,7 @@ import { BsmButton } from "renderer/components/shared/bsm-button.component";
import { BsmIconType } from "renderer/components/svgs/bsm-icon.component";
import { DefaultConfigKey, ThemeConfig } from "renderer/config/default-configuration.config";
import { useObservable } from "renderer/hooks/use-observable.hook";
import { useTranslation } from "renderer/hooks/use-translation.hook";
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
import { AuthUserService } from "renderer/services/auth-user.service";
import { BsDownloaderService } from "renderer/services/bs-downloader.service";
import { ConfigurationService } from "renderer/services/configuration.service"
@@ -29,8 +29,7 @@ export function SettingsPage() {
const notificationService: NotificationService = NotificationService.getInstance();
const i18nService: I18nService = I18nService.getInstance();
const firstColor = useObservable(configService.watch<string>("first-color"));
const secondColor = useObservable(configService.watch<string>("second-color"));
const {firstColor, secondColor} = useThemeColor();
const sessionExist = useObservable(authService.sessionExist$);
const themeItem: RadioItem[] = [