From 322faa6a9274f56985d38d40cbabf611278d1c45 Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Tue, 1 Nov 2022 18:42:15 +0100 Subject: [PATCH] create page of shared maps and playlists --- src/renderer/App.tsx | 2 ++ .../maps-playlists-panel.component.tsx | 14 +++++++++ .../bs-version-item.component.tsx | 31 ++++++++----------- .../maps-nav-bar-item.component.tsx | 18 +++++++++++ .../nav-bar-items/nav-bar-item.component.tsx | 25 +++++++++++++++ .../nav-bar/nav-bar-spliter.component.tsx | 5 +++ .../components/nav-bar/nav-bar.component.tsx | 6 +++- .../shared/tab-nav-bar.component.tsx | 4 +-- .../slideshow/slideshow.component.tsx | 15 +++++++-- .../components/svgs/bsm-icon.component.tsx | 4 ++- .../bs-map-difficulty-icon.component.tsx | 10 ++++++ .../available-versions-list.components.tsx | 11 +------ src/renderer/pages/maps-page.component.tsx | 14 +++++++++ 13 files changed, 125 insertions(+), 34 deletions(-) create mode 100644 src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx rename src/renderer/components/nav-bar/{ => nav-bar-items}/bs-version-item.component.tsx (66%) create mode 100644 src/renderer/components/nav-bar/nav-bar-items/maps-nav-bar-item.component.tsx create mode 100644 src/renderer/components/nav-bar/nav-bar-items/nav-bar-item.component.tsx create mode 100644 src/renderer/components/nav-bar/nav-bar-spliter.component.tsx create mode 100644 src/renderer/components/svgs/icons/bs-map-difficulty-icon.component.tsx create mode 100644 src/renderer/pages/maps-page.component.tsx diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index e9826256..73b0aef7 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -10,6 +10,7 @@ import { useEffect } from "react"; import { ThemeService } from "./services/theme.service"; import { NotificationOverlay } from "./components/notification/notification-overlay.component"; import { PageStateService } from "./services/page-state.service"; +import MapsPage from "./pages/maps-page.component"; export default function App() { @@ -38,6 +39,7 @@ export default function App() {
}/> + }/> }/> }/> diff --git a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx new file mode 100644 index 00000000..390a7ccc --- /dev/null +++ b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx @@ -0,0 +1,14 @@ +import { BSVersion } from "shared/bs-version.interface" +import { TabNavBar } from "../shared/tab-nav-bar.component" + +type Props = { + version?: BSVersion +} + +export function MapsPlaylistsPanel({version}: Props) { + return ( +
+ {}}/> +
+ ) +} diff --git a/src/renderer/components/nav-bar/bs-version-item.component.tsx b/src/renderer/components/nav-bar/nav-bar-items/bs-version-item.component.tsx similarity index 66% rename from src/renderer/components/nav-bar/bs-version-item.component.tsx rename to src/renderer/components/nav-bar/nav-bar-items/bs-version-item.component.tsx index c7d8aa0a..f9e1f301 100644 --- a/src/renderer/components/nav-bar/bs-version-item.component.tsx +++ b/src/renderer/components/nav-bar/nav-bar-items/bs-version-item.component.tsx @@ -5,12 +5,12 @@ import { useEffect, useState } from "react"; import { combineLatest, Subscription } from "rxjs"; import { BSLauncherService, LaunchMods } from "renderer/services/bs-launcher.service"; import { ConfigurationService } from "renderer/services/configuration.service"; -import { BsmButton } from "../shared/bsm-button.component"; 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 { BsmIcon } from "../../svgs/bsm-icon.component"; import { ReactFitty } from "react-fitty"; import { useThemeColor } from 'renderer/hooks/use-theme-color.hook'; +import { NavBarItem } from './nav-bar-item.component'; export function BsVersionItem(props: {version: BSVersion}) { @@ -24,7 +24,7 @@ export function BsVersionItem(props: {version: BSVersion}) { const [downloading, setDownloading] = useState(false); const [downloadPercent, setDownloadPercent] = useState(0); - const {firstColor, secondColor} = useThemeColor(); + const secondColor = useThemeColor("second-color"); const isActive = (): boolean => { return props.version?.BSVersion === state?.BSVersion && props?.version.steam === state?.steam && props?.version.oculus === state?.oculus && props?.version.name === state?.name; @@ -77,19 +77,14 @@ export function BsVersionItem(props: {version: BSVersion}) { } - return ( -
  • - {downloading &&
    } -
    - - {renderIcon()} -
    - {props.version.name || props.version.BSVersion} -
    - - {downloading && } -
    -
    • - - ) + return ( + + + {renderIcon()} +
    + {props.version.name || props.version.BSVersion} +
    + +     + ) } \ No newline at end of file diff --git a/src/renderer/components/nav-bar/nav-bar-items/maps-nav-bar-item.component.tsx b/src/renderer/components/nav-bar/nav-bar-items/maps-nav-bar-item.component.tsx new file mode 100644 index 00000000..8d908bc6 --- /dev/null +++ b/src/renderer/components/nav-bar/nav-bar-items/maps-nav-bar-item.component.tsx @@ -0,0 +1,18 @@ +import { Link } from "react-router-dom"; +import { BsmIcon } from "renderer/components/svgs/bsm-icon.component"; +import { useThemeColor } from "renderer/hooks/use-theme-color.hook"; +import { NavBarItem } from "./nav-bar-item.component"; + +export function MapsNavBarItem() { + + const color = useThemeColor("first-color"); + + return ( + + + + Maps + + + ) +} diff --git a/src/renderer/components/nav-bar/nav-bar-items/nav-bar-item.component.tsx b/src/renderer/components/nav-bar/nav-bar-items/nav-bar-item.component.tsx new file mode 100644 index 00000000..91a47f11 --- /dev/null +++ b/src/renderer/components/nav-bar/nav-bar-items/nav-bar-item.component.tsx @@ -0,0 +1,25 @@ +import { useThemeColor } from "renderer/hooks/use-theme-color.hook"; +import { BsmButton } from "../../shared/bsm-button.component"; + +type Props = { + children: JSX.Element, + isDownloading?: boolean + progress?: number, + isActive?: boolean, + onCancel?: (e: React.MouseEvent) => void +} + +export function NavBarItem({progress, isDownloading, children, isActive, onCancel}: Props) { + + const {firstColor, secondColor} = useThemeColor(); + + return ( +
  • + {isDownloading &&
    } +
    + {children} + {isDownloading && } +
    +
    • + ) +} diff --git a/src/renderer/components/nav-bar/nav-bar-spliter.component.tsx b/src/renderer/components/nav-bar/nav-bar-spliter.component.tsx new file mode 100644 index 00000000..35521307 --- /dev/null +++ b/src/renderer/components/nav-bar/nav-bar-spliter.component.tsx @@ -0,0 +1,5 @@ +export function NavBarSpliter() { + return ( + + ) +} diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx index 2b2f73dd..f201cb35 100644 --- a/src/renderer/components/nav-bar/nav-bar.component.tsx +++ b/src/renderer/components/nav-bar/nav-bar.component.tsx @@ -1,10 +1,12 @@ import './nav-bar.component.css' -import { BsVersionItem } from './bs-version-item.component'; +import { BsVersionItem } from './nav-bar-items/bs-version-item.component'; import { BSVersionManagerService } from '../../services/bs-version-manager.service'; import { Link } from 'react-router-dom'; import { BsmIcon } from '../svgs/bsm-icon.component'; import { useObservable } from 'renderer/hooks/use-observable.hook'; import { BsManagerIcon } from './bsmanager-icon.component'; +import { MapsNavBarItem } from './nav-bar-items/maps-nav-bar-item.component'; +import { NavBarSpliter } from './nav-bar-spliter.component'; export function NavBar() { @@ -16,6 +18,8 @@ export function NavBar() {