From fdf8351adf5eec5236ae3879e36c50d2054de1bf Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Thu, 20 Oct 2022 00:52:56 +0200 Subject: [PATCH] some html optimizations --- .../available-version-item.component.css | 0 .../available-version-item.component.tsx | 43 +++++++++---------- .../available-versions-slide.component.tsx | 17 ++++---- .../available-versions-slider.component.tsx | 20 ++++----- .../components/modal/modal.component.tsx | 22 ++++++---- .../nav-bar/bs-version-item.component.tsx | 4 +- .../components/nav-bar/nav-bar.component.tsx | 12 +++--- .../notification-item.component.tsx | 16 +++---- .../notification-overlay.component.tsx | 6 +-- .../bsm-progress-bar.component.tsx | 6 +-- .../shared/bsm-dropdown-button.component.tsx | 6 +-- .../shared/tab-nav-bar.component.tsx | 10 ++--- .../launch/launch-mod-toogle.component.tsx | 2 +- .../pages/version-viewer.component.tsx | 2 +- 14 files changed, 85 insertions(+), 81 deletions(-) delete mode 100644 src/renderer/components/available-versions/available-version-item.component.css diff --git a/src/renderer/components/available-versions/available-version-item.component.css b/src/renderer/components/available-versions/available-version-item.component.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/renderer/components/available-versions/available-version-item.component.tsx b/src/renderer/components/available-versions/available-version-item.component.tsx index 900f5661..30c200b3 100644 --- a/src/renderer/components/available-versions/available-version-item.component.tsx +++ b/src/renderer/components/available-versions/available-version-item.component.tsx @@ -1,5 +1,4 @@ import { BSVersion } from 'shared/bs-version.interface'; -import './available-version-item.component.css'; import { useEffect, useState, memo } from "react"; import { BsDownloaderService } from "renderer/services/bs-downloader.service"; import { distinctUntilChanged } from "rxjs/operators"; @@ -38,25 +37,25 @@ export const AvailableVersionItem = memo(function AvailableVersionItem(props: {v } }, []) - return ( -
-
-
- - - -
-
- ) + return ( +
  • + +
    + + + +
    +
    • + ) }) diff --git a/src/renderer/components/available-versions/available-versions-slide.component.tsx b/src/renderer/components/available-versions/available-versions-slide.component.tsx index 9aa98b2a..ecfc970e 100644 --- a/src/renderer/components/available-versions/available-versions-slide.component.tsx +++ b/src/renderer/components/available-versions/available-versions-slide.component.tsx @@ -16,14 +16,15 @@ export function AvailableVersionsSlide(props: {year: string}) { }); }, []) +//w-full max-w-full max-h-full flex items-start justify-center overflow-x-hidden overflow-y-scroll content-start scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 - return ( -
    -
    - {availableVersions.map((version, index) => - - )} -
    -
    +//relative left-[2px] flex justify-center items-start content-start flex-wrap max-w-6xl + + return ( +
      + {availableVersions.map((version, index) => + + )} +
    ) } diff --git a/src/renderer/components/available-versions/available-versions-slider.component.tsx b/src/renderer/components/available-versions/available-versions-slider.component.tsx index 0a8f6ffe..aa5d1250 100644 --- a/src/renderer/components/available-versions/available-versions-slider.component.tsx +++ b/src/renderer/components/available-versions/available-versions-slider.component.tsx @@ -21,14 +21,14 @@ export function AvailableVersionsSlider() { }); }, []) - return ( -
    - -
    - { availableYears.map((year, index) => - - )} -
    -
    - ) + return ( +
    + +
      + { availableYears.map((year, index) => + + )} +
    +
    + ) } diff --git a/src/renderer/components/modal/modal.component.tsx b/src/renderer/components/modal/modal.component.tsx index ce667e9b..5a2c402a 100644 --- a/src/renderer/components/modal/modal.component.tsx +++ b/src/renderer/components/modal/modal.component.tsx @@ -17,6 +17,19 @@ export function Modal() { const modalType = useObservable(modalSevice.modalType$); const {firstColor, secondColor} = useThemeColor(); + const renderModal = () => { + const resolver = modalSevice.getResolver(); + if(modalType === ModalType.STEAM_LOGIN){ return } + if(modalType === ModalType.GUARD_CODE){ return } + if(modalType === ModalType.UNINSTALL){ return } + if(modalType === ModalType.INSTALLATION_FOLDER){ return } + if(modalType === ModalType.EDIT_VERSION){ return } + if(modalType === ModalType.CLONE_VERSION){ return } + if(modalType === ModalType.UNINSTALL_MOD){ return } + if(modalType === ModalType.UNINSTALL_ALL_MODS){ return } + return null; + } + return ( {modalType && ( @@ -25,14 +38,7 @@ export function Modal() {
    - {modalType === ModalType.STEAM_LOGIN && } - {modalType === ModalType.GUARD_CODE && } - {modalType === ModalType.UNINSTALL && } - {modalType === ModalType.INSTALLATION_FOLDER && } - {modalType === ModalType.EDIT_VERSION && } - {modalType === ModalType.CLONE_VERSION && } - {modalType === ModalType.UNINSTALL_MOD && } - {modalType === ModalType.UNINSTALL_ALL_MODS && } + {renderModal()}
    diff --git a/src/renderer/components/nav-bar/bs-version-item.component.tsx b/src/renderer/components/nav-bar/bs-version-item.component.tsx index 6c6e0451..a6c879b4 100644 --- a/src/renderer/components/nav-bar/bs-version-item.component.tsx +++ b/src/renderer/components/nav-bar/bs-version-item.component.tsx @@ -67,7 +67,7 @@ export function BsVersionItem(props: {version: BSVersion}) { return ( -
    +
  • {downloading &&
    }
    @@ -79,7 +79,7 @@ export function BsVersionItem(props: {version: BSVersion}) { {downloading && }
    -
    +
    • ) } \ No newline at end of file diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx index 638a155c..442f880e 100644 --- a/src/renderer/components/nav-bar/nav-bar.component.tsx +++ b/src/renderer/components/nav-bar/nav-bar.component.tsx @@ -13,13 +13,11 @@ export function NavBar() { const installedVersions = useObservable(bsVersionServoce.installedVersions$); return ( - + ) } diff --git a/src/renderer/components/notification/notification-item.component.tsx b/src/renderer/components/notification/notification-item.component.tsx index e80654b0..a4ad83c7 100644 --- a/src/renderer/components/notification/notification-item.component.tsx +++ b/src/renderer/components/notification/notification-item.component.tsx @@ -12,25 +12,25 @@ export function NotificationItem({resolver, notification}: {resolver?: (value: N const t = useTranslation(); - const renderImage = () => { + const renderImage = (() => { if(notification.type === NotificationType.SUCCESS){ return BeatRunningImg; } if(notification.type === NotificationType.WARNING){ return BeatWaitingImg; } if(notification.type === NotificationType.ERROR){ return BeatConflictImg; } return BeatImpatientImg; - } + })() - const renderNeonColors = () => { + const renderNeonColors = (() => { if(notification.type === NotificationType.SUCCESS){ return "bg-green-400 shadow-green-400"; } if(notification.type === NotificationType.WARNING){ return "bg-yellow-400 shadow-yellow-400"; } if(notification.type === NotificationType.ERROR){ return "bg-red-500 shadow-red-500"; } return "bg-gray-800 shadow-gray-800 dark:bg-white dark:shadow-white"; - } + })() return ( - +
    - +

    {t(notification.title)}

    {notification.desc &&

    {t(notification.desc)}

    } @@ -42,8 +42,8 @@ export function NotificationItem({resolver, notification}: {resolver?: (value: N
    )}
    - + resolver(NotificationResult.CLOSE)}/> - + ) } diff --git a/src/renderer/components/notification/notification-overlay.component.tsx b/src/renderer/components/notification/notification-overlay.component.tsx index 0795bd71..f46e29ce 100644 --- a/src/renderer/components/notification/notification-overlay.component.tsx +++ b/src/renderer/components/notification/notification-overlay.component.tsx @@ -1,7 +1,7 @@ import { useObservable } from "renderer/hooks/use-observable.hook" import { NotificationService } from "renderer/services/notification.service" import { NotificationItem } from "./notification-item.component"; -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence } from "framer-motion"; export function NotificationOverlay() { @@ -11,10 +11,10 @@ export function NotificationOverlay() { return ( - +
      {notifications?.map(n => )} - +
    ) } diff --git a/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx b/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx index 7040138d..d5150484 100644 --- a/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx +++ b/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx @@ -25,11 +25,11 @@ export function BsmProgressBar() { return ( { visible && -
    +
    { !!progressValue && ( -
    +
    - +
    {progressLabel}
    diff --git a/src/renderer/components/shared/bsm-dropdown-button.component.tsx b/src/renderer/components/shared/bsm-dropdown-button.component.tsx index a7cd79b7..9f809e51 100644 --- a/src/renderer/components/shared/bsm-dropdown-button.component.tsx +++ b/src/renderer/components/shared/bsm-dropdown-button.component.tsx @@ -18,10 +18,10 @@ export function BsmDropdownButton({className, items, align, withBar = true, icon return (
    setExpanded(!expanded)} className={buttonClassName ?? defaultButtonClassName} icon={icon} active={expanded} onClickOutside={() => {setExpanded(false)}} withBar={withBar}/> -
    +
    { items?.map((i, index) => !!i &&( -
    - {i.icon && } +
    + {i.icon && } {t(i.text)}
    ))} diff --git a/src/renderer/components/shared/tab-nav-bar.component.tsx b/src/renderer/components/shared/tab-nav-bar.component.tsx index d2ccd337..bef10bd5 100644 --- a/src/renderer/components/shared/tab-nav-bar.component.tsx +++ b/src/renderer/components/shared/tab-nav-bar.component.tsx @@ -15,16 +15,16 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function, cla } return ( -
    +
    + + ) } diff --git a/src/renderer/components/version-viewer/slides/launch/launch-mod-toogle.component.tsx b/src/renderer/components/version-viewer/slides/launch/launch-mod-toogle.component.tsx index 4b8637ca..6db616ca 100644 --- a/src/renderer/components/version-viewer/slides/launch/launch-mod-toogle.component.tsx +++ b/src/renderer/components/version-viewer/slides/launch/launch-mod-toogle.component.tsx @@ -10,7 +10,7 @@ export function LaunchModToogle({onClick, active, text, icon}: props) { return (
    onClick(!active)}>
    -
    +
    {t(text)}
    diff --git a/src/renderer/pages/version-viewer.component.tsx b/src/renderer/pages/version-viewer.component.tsx index 800015b5..3e0815f9 100644 --- a/src/renderer/pages/version-viewer.component.tsx +++ b/src/renderer/pages/version-viewer.component.tsx @@ -66,7 +66,7 @@ export function VersionViewer() {

    {state.name ? `${state.BSVersion} - ${state.name}` : state.BSVersion}

    - setCurrentTabIndex(i)}/> + setCurrentTabIndex(i)}/>