From aa6be6b5997b12a337f0450a2b6de4eecdc3a996 Mon Sep 17 00:00:00 2001 From: Guilherme Viana Date: Thu, 23 May 2024 09:15:38 -0300 Subject: [PATCH] fix/add-context-menu: resolve conflicts --- src/locales/pl/translation.json | 6 +- src/locales/ru/translation.json | 2 +- .../events/library/change-executable-path.ts | 4 +- src/main/events/library/open-game-folder.ts | 4 +- src/renderer/src/assets/discord-icon.svg | 1 + .../src/components/sidebar/sidebar.css.ts | 33 ++++ .../src/components/sidebar/sidebar.tsx | 173 +++++++----------- src/renderer/src/declaration.d.ts | 2 +- src/renderer/src/hooks/use-download.ts | 3 +- .../game-details/hero/hero-panel-actions.tsx | 6 - 10 files changed, 110 insertions(+), 124 deletions(-) create mode 100644 src/renderer/src/assets/discord-icon.svg diff --git a/src/locales/pl/translation.json b/src/locales/pl/translation.json index 333e2e42b..4a4fe0262 100644 --- a/src/locales/pl/translation.json +++ b/src/locales/pl/translation.json @@ -21,8 +21,7 @@ "delete_installation_files": "Usuń pliki instalacyjne", "change_exe_path": "Zmień ścieżkę wykonywalną", "open_archive_path": "Otwórz lokalizację pliku", - "game_executable": "Plik wykonywalny gry" - "home": "Główna", + "game_executable": "Plik wykonywalny gry", "discord": "Dołącz nasz Discord", "telegram": "Dołącz nasz Telegram", "x": "Śledź na X", @@ -92,7 +91,6 @@ "change": "Zmień", "repacks_modal_description": "Wybierz repack, który chcesz pobrać", "select_folder_hint": "Aby zmienić domyślny folder, przejdź do", - "download_now": "Pobierz teraz", "installation_instructions": "Instrukcja instalacji", "installation_instructions_description": "Do zainstalowania tej gry wymagane są dodatkowe kroki", "online_fix_instruction": "Gry OnlineFix wymagają hasła do wyodrębnienia. W razie potrzeby użyj następującego hasła:", @@ -107,7 +105,7 @@ "previous_screenshot": "Poprzedni zrzut ekranu", "next_screenshot": "Następny zrzut ekranu", "screenshot": "Zrzut ekranu {{number}}", - "open_screenshot": "Otwórz zrzut ekranu {{number}}" + "open_screenshot": "Otwórz zrzut ekranu {{number}}", "settings": "Ustawienia Hydra", "download_now": "Pobierz teraz", "game_executable": "Plik wykonywalny gry" diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json index 9d7a6cc60..eae78f1d0 100644 --- a/src/locales/ru/translation.json +++ b/src/locales/ru/translation.json @@ -155,7 +155,7 @@ "behavior": "Поведение", "enable_real_debrid": "Включить Real Debrid", "real_debrid": "Real Debrid", - "real_debrid_api_token_hint": "API ключ можно получить <0>здесь.",, + "real_debrid_api_token_hint": "API ключ можно получить <0>здесь.", "save_changes": "Сохранить изменения" }, "notifications": { diff --git a/src/main/events/library/change-executable-path.ts b/src/main/events/library/change-executable-path.ts index ffe0bf0dd..2df7a83f2 100644 --- a/src/main/events/library/change-executable-path.ts +++ b/src/main/events/library/change-executable-path.ts @@ -17,6 +17,4 @@ const changeExecutablePath = async ( ); }; -registerEvent(changeExecutablePath, { - name: "changeExecutablePath", -}); +registerEvent("changeExecutablePath", changeExecutablePath); diff --git a/src/main/events/library/open-game-folder.ts b/src/main/events/library/open-game-folder.ts index 11d7b3389..e65b4aea6 100644 --- a/src/main/events/library/open-game-folder.ts +++ b/src/main/events/library/open-game-folder.ts @@ -26,6 +26,4 @@ const openGameFolder = async ( shell.openPath(gamePath); }; -registerEvent(openGameFolder, { - name: "openGameFolder", -}); +registerEvent("openGameFolder", openGameFolder); diff --git a/src/renderer/src/assets/discord-icon.svg b/src/renderer/src/assets/discord-icon.svg new file mode 100644 index 000000000..2fba46cd3 --- /dev/null +++ b/src/renderer/src/assets/discord-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/components/sidebar/sidebar.css.ts b/src/renderer/src/components/sidebar/sidebar.css.ts index 59bfbf87d..c74ab6c30 100644 --- a/src/renderer/src/components/sidebar/sidebar.css.ts +++ b/src/renderer/src/components/sidebar/sidebar.css.ts @@ -176,3 +176,36 @@ export const contextMenuItemIcon = style({ width: "14px", height: "14px", }); + +export const sidebarFooter = style({ + marginTop: "auto", + padding: `${SPACING_UNIT * 2}px`, + display: "flex", + alignItems: "center", + justifyContent: "space-between", +}); + +export const footerSocialsContainer = style({ + display: "flex", + alignItems: "center", + gap: `${SPACING_UNIT * 1.5}px`, +}); + +export const footerSocialsItem = style({ + color: vars.color.bodyText, + backgroundColor: vars.color.darkBackground, + width: "16px", + height: "16px", + display: "flex", + alignItems: "center", + transition: "all ease 0.2s", + cursor: "pointer", + ":hover": { + opacity: "0.75", + }, +}); + +export const footerText = style({ + color: vars.color.bodyText, + fontSize: "12px", +}); diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx index de6bce604..59f17532e 100644 --- a/src/renderer/src/components/sidebar/sidebar.tsx +++ b/src/renderer/src/components/sidebar/sidebar.tsx @@ -9,10 +9,20 @@ import { useDownload, useLibrary } from "@renderer/hooks"; import { routes } from "./routes"; - +import { + FileDirectoryIcon, + FileDirectorySymlinkIcon, + MarkGithubIcon, + TrashIcon, +} from "@primer/octicons-react"; +import { GameStatus, GameStatusHelper } from "@shared"; import { DeleteModal } from "./delete-modal"; import * as styles from "./sidebar.css"; +import DiscordLogo from "@renderer/assets/discord-icon.svg?react"; +import SteamLogo from "@renderer/assets/steam-logo.svg?react"; +import XLogo from "@renderer/assets/x-icon.svg?react"; + const SIDEBAR_MIN_WIDTH = 200; const SIDEBAR_INITIAL_WIDTH = 250; const SIDEBAR_MAX_WIDTH = 450; @@ -20,38 +30,50 @@ const SIDEBAR_MAX_WIDTH = 450; const initialSidebarWidth = window.localStorage.getItem("sidebarWidth"); export function Sidebar() { + const navigate = useNavigate(); + const location = useLocation(); const { t } = useTranslation("sidebar"); const { library, updateLibrary } = useLibrary(); - const navigate = useNavigate(); + const { game: gameDownloading, progress } = useDownload(); const [filteredLibrary, setFilteredLibrary] = useState([]); - const [isResizing, setIsResizing] = useState(false); const [sidebarWidth, setSidebarWidth] = useState( initialSidebarWidth ? Number(initialSidebarWidth) : SIDEBAR_INITIAL_WIDTH ); - const [isContextMenuOpen, setIsContextMenuOpen] = useState(false); const [axisCoordinates, setAxisCoordinates] = useState({ x: 0, y: 0, }); - const [showDeleteModal, setShowDeleteModal] = useState(false); const [currentGame, setCurrentGame] = useState(); - const location = useLocation(); - - const { game: gameDownloading, progress } = useDownload(); + const sidebarRef = useRef(null); + const cursorPos = useRef({ x: 0 }); + const sidebarInitialWidth = useRef(0); const isDownloading = library.some((game) => GameStatusHelper.isDownloading(game.status) ); - const sidebarRef = useRef(null); - - const cursorPos = useRef({ x: 0 }); - const sidebarInitialWidth = useRef(0); + const socials = [ + { + url: "https://discord.gg/hydralauncher", + icon: , + label: t("discord"), + }, + { + url: "https://twitter.com/hydralauncher", + icon: , + label: t("x"), + }, + { + url: "https://github.com/hydralauncher/hydra", + icon: , + label: t("github"), + }, + ]; const selectGameExecutable = async () => { const { filePaths } = await window.electron.showOpenDialog({ @@ -97,6 +119,28 @@ export function Sidebar() { updateLibrary(); }); + const getGameTitle = (game: Game) => { + if (game.status === GameStatus.Paused) + return t("paused", { title: game.title }); + + if (gameDownloading?.id === game.id) { + const isVerifying = GameStatusHelper.isVerifying(gameDownloading.status); + + if (isVerifying) + return t(gameDownloading.status!, { + title: game.title, + percentage: progress, + }); + + return t("downloading", { + title: game.title, + percentage: progress, + }); + } + + return game.title; + }; + const handleMouseDown: React.MouseEventHandler = ( event ) => { @@ -121,29 +165,6 @@ export function Sidebar() { setIsContextMenuOpen(false); }; - const getGameTitle = (game: Game) => { - if (game.status === "paused") return t("paused", { title: game.title }); - - if (gameDownloading?.id === game.id) { - const isVerifying = ["downloading_metadata", "checking_files"].includes( - gameDownloading?.status - ); - - if (isVerifying) - return t(gameDownloading.status, { - title: game.title, - percentage: progress, - }); - - return t("downloading", { - title: game.title, - percentage: progress, - }); - } - - return game.title; - }; - const handleSidebarItemClick = (path: string) => { if (path !== location.pathname) { navigate(path); @@ -193,33 +214,6 @@ export function Sidebar() { window.removeEventListener("click", handleClick); }; }, []); - const getGameTitle = (game: Game) => { - if (game.status === GameStatus.Paused) - return t("paused", { title: game.title }); - - if (gameDownloading?.id === game.id) { - const isVerifying = GameStatusHelper.isVerifying(gameDownloading.status); - - if (isVerifying) - return t(gameDownloading.status!, { - title: game.title, - percentage: progress, - }); - - return t("downloading", { - title: game.title, - percentage: progress, - }); - } - - return game.title; - }; - - const handleSidebarItemClick = (path: string) => { - if (path !== location.pathname) { - navigate(path); - } - }; return ( <> @@ -300,11 +294,16 @@ export function Sidebar() { ) } > - {game.title} + {game.iconUrl ? ( + {game.title} + ) : ( + + )} + {getGameTitle(game)} @@ -384,42 +383,6 @@ export function Sidebar() { /> -
    - {filteredLibrary.map((game) => ( -
  • - -
    • - ))} -
- -