From 68e4612f47ebbe780ae1c104c5f4eddae7f6d6d5 Mon Sep 17 00:00:00 2001 From: Guilherme Viana Date: Fri, 19 Apr 2024 08:51:52 -0300 Subject: [PATCH 1/3] feat/sidebar-socials: add socials to sidebar footer --- src/locales/en/translation.json | 5 +- src/locales/es/translation.json | 3 +- src/locales/fr/translation.json | 3 +- src/locales/pt/translation.json | 3 +- src/main/events/index.ts | 37 +++++++-------- src/main/events/misc/open-external-url.ts | 19 ++++++++ src/preload.ts | 1 + src/renderer/assets/discord-icon.svg | 1 + src/renderer/assets/x-icon.svg | 1 + .../bottom-panel/bottom-panel.css.ts | 7 +-- .../components/sidebar/sidebar.css.ts | 34 ++++++++++++++ src/renderer/components/sidebar/sidebar.tsx | 46 ++++++++++++++++++- src/renderer/declaration.d.ts | 13 +++--- 13 files changed, 139 insertions(+), 34 deletions(-) create mode 100644 src/main/events/misc/open-external-url.ts create mode 100644 src/renderer/assets/discord-icon.svg create mode 100644 src/renderer/assets/x-icon.svg diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 6c5aa32c..f59f1e87 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -7,7 +7,6 @@ "no_results": "No results found" }, "sidebar": { - "home": "Home", "catalogue": "Catalogue", "downloads": "Downloads", "settings": "Settings", @@ -16,7 +15,9 @@ "checking_files": "{{title}} ({{percentage}} - Checking files…)", "paused": "{{title}} (Paused)", "downloading": "{{title}} ({{percentage}} - Downloading…)", - "filter": "Filter library" + "filter": "Filter library", + "follow_us": "Follow us", + "home": "Home" }, "header": { "search": "Search", diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json index 4cc90d15..9ac401bf 100644 --- a/src/locales/es/translation.json +++ b/src/locales/es/translation.json @@ -16,7 +16,8 @@ "paused": "{{title}} (Pausado)", "downloading": "{{title}} ({{percentage}} - Descargando…)", "filter": "Filtrar biblioteca", - "home": "Hogar" + "home": "Hogar", + "follow_us": "Síganos" }, "header": { "search": "Buscar", diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json index f4250be2..c83a825b 100644 --- a/src/locales/fr/translation.json +++ b/src/locales/fr/translation.json @@ -16,7 +16,8 @@ "paused": "{{title}} (En pause)", "downloading": "{{title}} ({{percentage}} - Téléchargement en cours…)", "filter": "Filtrer la bibliothèque", - "home": "Maison" + "home": "Maison", + "follow_us": "Suivez-nous" }, "header": { "search": "Recherche", diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index a19ca24a..145163b4 100644 --- a/src/locales/pt/translation.json +++ b/src/locales/pt/translation.json @@ -16,7 +16,8 @@ "paused": "{{title}} (Pausado)", "downloading": "{{title}} ({{percentage}} - Baixando…)", "filter": "Filtrar biblioteca", - "home": "Início" + "home": "Início", + "follow_us": "Acompanhe-nos" }, "header": { "search": "Buscar", diff --git a/src/main/events/index.ts b/src/main/events/index.ts index 866f8317..0de70377 100644 --- a/src/main/events/index.ts +++ b/src/main/events/index.ts @@ -1,30 +1,31 @@ -import { app, ipcMain } from "electron"; import { defaultDownloadsPath } from "@main/constants"; +import { app, ipcMain } from "electron"; -import "./library/add-game-to-library"; -import "./catalogue/search-games"; -import "./catalogue/get-game-shop-details"; import "./catalogue/get-catalogue"; -import "./library/get-library"; +import "./catalogue/get-game-shop-details"; +import "./catalogue/get-games"; +import "./catalogue/get-how-long-to-beat"; +import "./catalogue/get-random-game"; +import "./catalogue/search-games"; import "./hardware/get-disk-free-space"; +import "./library/add-game-to-library"; +import "./library/close-game"; +import "./library/delete-game-folder"; +import "./library/get-game-by-object-id"; +import "./library/get-library"; +import "./library/get-repackers-friendly-names"; +import "./library/open-game"; +import "./library/open-game-installer"; +import "./library/remove-game"; +import "./misc/get-or-cache-image"; +import "./misc/open-external-url"; +import "./misc/show-open-dialog"; import "./torrenting/cancel-game-download"; import "./torrenting/pause-game-download"; import "./torrenting/resume-game-download"; import "./torrenting/start-game-download"; -import "./misc/get-or-cache-image"; -import "./user-preferences/update-user-preferences"; import "./user-preferences/get-user-preferences"; -import "./library/get-repackers-friendly-names"; -import "./library/get-game-by-object-id"; -import "./library/open-game-installer"; -import "./library/open-game"; -import "./library/close-game"; -import "./misc/show-open-dialog"; -import "./library/remove-game"; -import "./library/delete-game-folder"; -import "./catalogue/get-random-game"; -import "./catalogue/get-how-long-to-beat"; -import "./catalogue/get-games"; +import "./user-preferences/update-user-preferences"; ipcMain.handle("ping", () => "pong"); ipcMain.handle("getVersion", () => app.getVersion()); diff --git a/src/main/events/misc/open-external-url.ts b/src/main/events/misc/open-external-url.ts new file mode 100644 index 00000000..748e580a --- /dev/null +++ b/src/main/events/misc/open-external-url.ts @@ -0,0 +1,19 @@ +import { BrowserWindow, app, shell } from "electron"; +import { registerEvent } from "../register-event"; + +let mainWindow: BrowserWindow | null = null; + +app.on("ready", () => { + mainWindow = new BrowserWindow({}); + + mainWindow.loadURL("file://" + __dirname + "/index.html"); +}); + +const openExternalUrl = async ( + _event: Electron.IpcMainInvokeEvent, + url: string +) => shell.openExternal(url); + +registerEvent(openExternalUrl, { + name: "openExternalUrl", +}); \ No newline at end of file diff --git a/src/preload.ts b/src/preload.ts index db765453..9d1202d0 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -86,6 +86,7 @@ contextBridge.exposeInMainWorld("electron", { ping: () => ipcRenderer.invoke("ping"), getVersion: () => ipcRenderer.invoke("getVersion"), getDefaultDownloadsPath: () => ipcRenderer.invoke("getDefaultDownloadsPath"), + openExternalUrl: (url: string) => ipcRenderer.invoke("openExternalUrl", url), showOpenDialog: (options: Electron.OpenDialogOptions) => ipcRenderer.invoke("showOpenDialog", options), platform: process.platform, diff --git a/src/renderer/assets/discord-icon.svg b/src/renderer/assets/discord-icon.svg new file mode 100644 index 00000000..2fba46cd --- /dev/null +++ b/src/renderer/assets/discord-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/x-icon.svg b/src/renderer/assets/x-icon.svg new file mode 100644 index 00000000..f594427b --- /dev/null +++ b/src/renderer/assets/x-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/components/bottom-panel/bottom-panel.css.ts b/src/renderer/components/bottom-panel/bottom-panel.css.ts index 632e1bff..f251d1c0 100644 --- a/src/renderer/components/bottom-panel/bottom-panel.css.ts +++ b/src/renderer/components/bottom-panel/bottom-panel.css.ts @@ -1,5 +1,5 @@ -import { SPACING_UNIT, vars } from "../../theme.css"; import { style } from "@vanilla-extract/css"; +import { SPACING_UNIT, vars } from "../../theme.css"; export const bottomPanel = style({ width: "100%", @@ -14,9 +14,10 @@ export const bottomPanel = style({ }); export const downloadsButton = style({ - cursor: "pointer", color: vars.color.bodyText, + borderBottom: "1px solid transparent", ":hover": { - textDecoration: "underline", + borderBottom: `1px solid ${vars.color.bodyText}`, + cursor: "pointer", }, }); diff --git a/src/renderer/components/sidebar/sidebar.css.ts b/src/renderer/components/sidebar/sidebar.css.ts index 8bf62781..e4ff22f8 100644 --- a/src/renderer/components/sidebar/sidebar.css.ts +++ b/src/renderer/components/sidebar/sidebar.css.ts @@ -6,6 +6,7 @@ export const sidebar = recipe({ base: { backgroundColor: vars.color.darkBackground, color: "#c0c1c7", + flexDirection: "column", display: "flex", transition: "opacity ease 0.2s", borderRight: `solid 1px ${vars.color.borderColor}`, @@ -134,3 +135,36 @@ export const section = recipe({ }, }, }); + +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.15s", + ":hover": { + opacity: 0.75, + cursor: "pointer", + }, +}); + +export const footerText = style({ + color: vars.color.bodyText, + fontSize: "12px", +}); diff --git a/src/renderer/components/sidebar/sidebar.tsx b/src/renderer/components/sidebar/sidebar.tsx index 962ecdfe..8c58b78f 100644 --- a/src/renderer/components/sidebar/sidebar.tsx +++ b/src/renderer/components/sidebar/sidebar.tsx @@ -4,12 +4,15 @@ import { useLocation, useNavigate } from "react-router-dom"; import type { Game } from "@types"; -import { useDownload, useLibrary } from "@renderer/hooks"; import { AsyncImage, TextField } from "@renderer/components"; +import { useDownload, useLibrary } from "@renderer/hooks"; import { SPACING_UNIT } from "@renderer/theme.css"; -import * as styles from "./sidebar.css"; +import { MarkGithubIcon } from "@primer/octicons-react"; +import DiscordLogo from "../../assets/discord-icon.svg"; +import XLogo from "../../assets/x-icon.svg"; import { routes } from "./routes"; +import * as styles from "./sidebar.css"; const SIDEBAR_MIN_WIDTH = 200; const SIDEBAR_INITIAL_WIDTH = 250; @@ -212,6 +215,45 @@ export function Sidebar() { className={styles.handle} onMouseDown={handleMouseDown} /> + + ); } diff --git a/src/renderer/declaration.d.ts b/src/renderer/declaration.d.ts index 3db1a7c0..86da7fa4 100644 --- a/src/renderer/declaration.d.ts +++ b/src/renderer/declaration.d.ts @@ -1,12 +1,12 @@ import type { - CatalogueEntry, - GameShop, - Game, CatalogueCategory, - TorrentProgress, - ShopDetails, - UserPreferences, + CatalogueEntry, + Game, + GameShop, HowLongToBeatCategory, + ShopDetails, + TorrentProgress, + UserPreferences, } from "@types"; import type { DiskSpace } from "check-disk-space"; @@ -78,6 +78,7 @@ declare global { /* Misc */ getOrCacheImage: (url: string) => Promise; + openExternalUrl: (url: string) => void; getVersion: () => Promise; ping: () => string; getDefaultDownloadsPath: () => Promise; From 3ed9c367ea386bf6ffa2add8f000541bd441c25d Mon Sep 17 00:00:00 2001 From: Guilherme Viana Date: Fri, 19 Apr 2024 16:47:07 -0300 Subject: [PATCH 2/3] refactor/sidebar-socials: refactor & adjust code --- src/main/events/index.ts | 2 +- src/main/events/misc/open-external-url.ts | 19 ------ src/main/events/misc/open-external.ts | 9 +++ src/preload.ts | 2 +- src/renderer/components/sidebar/sidebar.tsx | 65 ++++++++++----------- src/renderer/declaration.d.ts | 2 +- 6 files changed, 42 insertions(+), 57 deletions(-) delete mode 100644 src/main/events/misc/open-external-url.ts create mode 100644 src/main/events/misc/open-external.ts diff --git a/src/main/events/index.ts b/src/main/events/index.ts index 0de70377..5eaceff5 100644 --- a/src/main/events/index.ts +++ b/src/main/events/index.ts @@ -18,7 +18,7 @@ import "./library/open-game"; import "./library/open-game-installer"; import "./library/remove-game"; import "./misc/get-or-cache-image"; -import "./misc/open-external-url"; +import "./misc/open-external"; import "./misc/show-open-dialog"; import "./torrenting/cancel-game-download"; import "./torrenting/pause-game-download"; diff --git a/src/main/events/misc/open-external-url.ts b/src/main/events/misc/open-external-url.ts deleted file mode 100644 index 748e580a..00000000 --- a/src/main/events/misc/open-external-url.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { BrowserWindow, app, shell } from "electron"; -import { registerEvent } from "../register-event"; - -let mainWindow: BrowserWindow | null = null; - -app.on("ready", () => { - mainWindow = new BrowserWindow({}); - - mainWindow.loadURL("file://" + __dirname + "/index.html"); -}); - -const openExternalUrl = async ( - _event: Electron.IpcMainInvokeEvent, - url: string -) => shell.openExternal(url); - -registerEvent(openExternalUrl, { - name: "openExternalUrl", -}); \ No newline at end of file diff --git a/src/main/events/misc/open-external.ts b/src/main/events/misc/open-external.ts new file mode 100644 index 00000000..3d693c23 --- /dev/null +++ b/src/main/events/misc/open-external.ts @@ -0,0 +1,9 @@ +import { shell } from "electron"; +import { registerEvent } from "../register-event"; + +const openExternal = async (_event: Electron.IpcMainInvokeEvent, src: string) => + shell.openExternal(src); + +registerEvent(openExternal, { + name: "openExternal", +}); diff --git a/src/preload.ts b/src/preload.ts index 9d1202d0..93acde24 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -86,7 +86,7 @@ contextBridge.exposeInMainWorld("electron", { ping: () => ipcRenderer.invoke("ping"), getVersion: () => ipcRenderer.invoke("getVersion"), getDefaultDownloadsPath: () => ipcRenderer.invoke("getDefaultDownloadsPath"), - openExternalUrl: (url: string) => ipcRenderer.invoke("openExternalUrl", url), + openExternal: (src: string) => ipcRenderer.invoke("openExternal", src), showOpenDialog: (options: Electron.OpenDialogOptions) => ipcRenderer.invoke("showOpenDialog", options), platform: process.platform, diff --git a/src/renderer/components/sidebar/sidebar.tsx b/src/renderer/components/sidebar/sidebar.tsx index 8c58b78f..4c8ed0e1 100644 --- a/src/renderer/components/sidebar/sidebar.tsx +++ b/src/renderer/components/sidebar/sidebar.tsx @@ -8,12 +8,28 @@ import { AsyncImage, TextField } from "@renderer/components"; import { useDownload, useLibrary } from "@renderer/hooks"; import { SPACING_UNIT } from "@renderer/theme.css"; -import { MarkGithubIcon } from "@primer/octicons-react"; -import DiscordLogo from "../../assets/discord-icon.svg"; -import XLogo from "../../assets/x-icon.svg"; import { routes } from "./routes"; + +import { MarkGithubIcon } from "@primer/octicons-react"; +import DiscordLogo from "@renderer/assets/discord-icon.svg"; +import XLogo from "@renderer/assets/x-icon.svg"; import * as styles from "./sidebar.css"; +const socials = [ + { + url: "https://discord.gg/hydralauncher", + icon: , + }, + { + url: "https://twitter.com/hydralauncher", + icon: , + }, + { + url: "https://github.com/hydralauncher/hydra", + icon: , + }, +]; + const SIDEBAR_MIN_WIDTH = 200; const SIDEBAR_INITIAL_WIDTH = 250; const SIDEBAR_MAX_WIDTH = 450; @@ -220,38 +236,17 @@ export function Sidebar() {
{t("follow_us")}
- - - - - + {socials.map((item, i) => { + return ( + + ); + })} diff --git a/src/renderer/declaration.d.ts b/src/renderer/declaration.d.ts index 86da7fa4..cceed299 100644 --- a/src/renderer/declaration.d.ts +++ b/src/renderer/declaration.d.ts @@ -78,7 +78,7 @@ declare global { /* Misc */ getOrCacheImage: (url: string) => Promise; - openExternalUrl: (url: string) => void; + openExternal: (src: string) => Promise; getVersion: () => Promise; ping: () => string; getDefaultDownloadsPath: () => Promise; From d41192632ec018a67affd242fa22c6e7b9af2088 Mon Sep 17 00:00:00 2001 From: Guilherme Viana Date: Fri, 19 Apr 2024 16:49:29 -0300 Subject: [PATCH 3/3] fix/sidebar-socials: fix something wrong --- src/renderer/components/sidebar/sidebar.tsx | 4 ++-- src/renderer/pages/patch-notes/patch-notes-skeleton.tsx | 0 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 src/renderer/pages/patch-notes/patch-notes-skeleton.tsx diff --git a/src/renderer/components/sidebar/sidebar.tsx b/src/renderer/components/sidebar/sidebar.tsx index 4c8ed0e1..ad1bcdf3 100644 --- a/src/renderer/components/sidebar/sidebar.tsx +++ b/src/renderer/components/sidebar/sidebar.tsx @@ -236,10 +236,10 @@ export function Sidebar() {
{t("follow_us")}
- {socials.map((item, i) => { + {socials.map((item) => { return (