From 4f4ada8d54a8475fbfb774d4976ea64510817ba0 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Wed, 5 Jun 2024 22:43:03 -0300 Subject: [PATCH] show toast if game has no executable selected --- .../src/components/sidebar/sidebar.tsx | 12 ++++++++--- .../src/components/toast/toast.css.ts | 4 ++++ src/renderer/src/components/toast/toast.tsx | 5 ++++- src/renderer/src/hooks/use-toast.ts | 14 ++++++++++++- .../hero/hero-panel-actions.css.ts | 2 +- .../pages/game-details/hero/hero-panel.tsx | 3 ++- .../modals/game-options-modal.css.ts | 4 ++-- .../modals/game-options-modal.tsx | 21 ++++--------------- src/renderer/src/theme.css.ts | 1 + 9 files changed, 40 insertions(+), 26 deletions(-) diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx index faa77708..f3ab5c04 100644 --- a/src/renderer/src/components/sidebar/sidebar.tsx +++ b/src/renderer/src/components/sidebar/sidebar.tsx @@ -5,7 +5,7 @@ import { useLocation, useNavigate } from "react-router-dom"; import type { LibraryGame } from "@types"; import { TextField } from "@renderer/components"; -import { useDownload, useLibrary } from "@renderer/hooks"; +import { useDownload, useLibrary, useToast } from "@renderer/hooks"; import { routes } from "./routes"; @@ -36,6 +36,8 @@ export function Sidebar() { const { lastPacket, progress } = useDownload(); + const { showWarningToast } = useToast(); + useEffect(() => { updateLibrary(); }, [lastPacket?.game.id, updateLibrary]); @@ -131,8 +133,12 @@ export function Sidebar() { navigate(path); } - if (event.detail == 2 && game.executablePath) { - window.electron.openGame(game.id, game.executablePath); + if (event.detail == 2) { + if (game.executablePath) { + window.electron.openGame(game.id, game.executablePath); + } else { + showWarningToast("Jogo não possui executável selecionado"); + } } }; diff --git a/src/renderer/src/components/toast/toast.css.ts b/src/renderer/src/components/toast/toast.css.ts index 45e14b85..2f4e8d03 100644 --- a/src/renderer/src/components/toast/toast.css.ts +++ b/src/renderer/src/components/toast/toast.css.ts @@ -81,3 +81,7 @@ export const successIcon = style({ export const errorIcon = style({ color: vars.color.danger, }); + +export const warningIcon = style({ + color: vars.color.warning, +}); diff --git a/src/renderer/src/components/toast/toast.tsx b/src/renderer/src/components/toast/toast.tsx index 371befde..2aa57539 100644 --- a/src/renderer/src/components/toast/toast.tsx +++ b/src/renderer/src/components/toast/toast.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { + AlertIcon, CheckCircleFillIcon, XCircleFillIcon, XIcon, @@ -11,7 +12,7 @@ import { SPACING_UNIT } from "@renderer/theme.css"; export interface ToastProps { visible: boolean; message: string; - type: "success" | "error"; + type: "success" | "error" | "warning"; onClose: () => void; } @@ -84,6 +85,8 @@ export function Toast({ visible, message, type, onClose }: ToastProps) { )} {type === "error" && } + + {type === "warning" && } {message} diff --git a/src/renderer/src/hooks/use-toast.ts b/src/renderer/src/hooks/use-toast.ts index a35b6039..485470f0 100644 --- a/src/renderer/src/hooks/use-toast.ts +++ b/src/renderer/src/hooks/use-toast.ts @@ -29,5 +29,17 @@ export function useToast() { [dispatch] ); - return { showSuccessToast, showErrorToast }; + const showWarningToast = useCallback( + (message: string) => { + dispatch( + showToast({ + message, + type: "warning", + }) + ); + }, + [dispatch] + ); + + return { showSuccessToast, showErrorToast, showWarningToast }; } diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts b/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts index 7f56588a..cebee4be 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts +++ b/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts @@ -8,6 +8,6 @@ export const heroPanelAction = style({ export const separator = style({ width: "1px", - backgroundColor: vars.color.border, + backgroundColor: vars.color.muted, margin: `${SPACING_UNIT / 2}px 0`, }); diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.tsx b/src/renderer/src/pages/game-details/hero/hero-panel.tsx index 943658d2..12ed84d5 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel.tsx +++ b/src/renderer/src/pages/game-details/hero/hero-panel.tsx @@ -35,8 +35,9 @@ export function HeroPanel() { const getInfo = () => { if (isGameDeleting(game?.id ?? -1)) return

{t("deleting")}

; - if (game && (game.progress === 1 || !game.status)) + if (game && (game.progress === 1 || !game.status)) { return ; + } if (game?.status === "active") { if (lastPacket?.isDownloadingMetadata && isGameDownloading) { diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts b/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts index 03052d34..a6a854df 100644 --- a/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts +++ b/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts @@ -3,11 +3,11 @@ import { SPACING_UNIT } from "../../../theme.css"; export const optionsContainer = style({ display: "flex", - gap: `${SPACING_UNIT}px`, + gap: `${SPACING_UNIT * 2}px`, flexDirection: "column", }); -export const downloadSourceField = style({ +export const gameOptionRow = style({ display: "flex", gap: `${SPACING_UNIT}px`, }); diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx index e6e049c9..f549b767 100644 --- a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx +++ b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx @@ -1,12 +1,8 @@ import { useContext, useState } from "react"; import { useTranslation } from "react-i18next"; - import { Button, Modal, TextField } from "@renderer/components"; import type { Game } from "@types"; - import * as styles from "./game-options-modal.css"; - -import { SPACING_UNIT } from "../../../theme.css"; import { gameDetailsContext } from "../game-details.context"; import { FileDirectoryOpenFillIcon, @@ -80,15 +76,8 @@ export function GameOptionsModal({ deleteGame={handleDeleteGame} /> -
-
+
+
-
+
-
- {game.folderName && ( -
+