external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: adding auto refresh of download sources

Browse source
This commit is contained in:
Chubby Granny Chaser 2024-06-03 21:39:37 +01:00
parent 3da751a67b
commit 0ea2cd39db
No known key found for this signature in database
19 changed files with 241 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/src/components/badge/badge.css.ts Normal file
View file

@ -0,0 +1,12 @@
import { style } from "@vanilla-extract/css";
import { SPACING_UNIT } from "../../theme.css";
export const badge = style({
color: "#c0c1c7",
fontSize: "10px",
padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT}px`,
border: "solid 1px #c0c1c7",
borderRadius: "4px",
display: "flex",
alignItems: "center",
});

14
src/renderer/src/components/badge/badge.tsx Normal file
View file

@ -0,0 +1,14 @@
import React from "react";
import * as styles from "./badge.css";
export interface BadgeProps {
children: React.ReactNode;
}
export function Badge({ children }: BadgeProps) {
return (
<div className={styles.badge}>
<span>{children}</span>
</div>
);
}

11
src/renderer/src/components/game-card/game-card.css.ts
View file

@ -69,16 +69,7 @@ export const downloadOptions = style({
padding: "0",
gap: `${SPACING_UNIT}px`,
flexWrap: "wrap",
});
export const downloadOption = style({
color: "#c0c1c7",
fontSize: "10px",
padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT}px`,
border: "solid 1px #c0c1c7",
borderRadius: "4px",
display: "flex",
alignItems: "center",
listStyle: "none",
});
export const specifics = style({

5
src/renderer/src/components/game-card/game-card.tsx
View file

@ -5,6 +5,7 @@ import SteamLogo from "@renderer/assets/steam-logo.svg?react";
import * as styles from "./game-card.css";
import { useTranslation } from "react-i18next";
import { Badge } from "../badge/badge";
export interface GameCardProps
extends React.DetailedHTMLProps<
@ -39,8 +40,8 @@ export function GameCard({ game, ...props }: GameCardProps) {
{uniqueRepackers.length > 0 ? (
<ul className={styles.downloadOptions}>
{uniqueRepackers.map((repacker) => (
<li key={repacker} className={styles.downloadOption}>
<span>{repacker}</span>
<li key={repacker}>
<Badge>{repacker}</Badge>
</li>
))}
</ul>

1
src/renderer/src/components/index.ts
View file

@ -10,3 +10,4 @@ export * from "./checkbox-field/checkbox-field";
export * from "./link/link";
export * from "./select-field/select-field";
export * from "./toast/toast";
export * from "./badge/badge";

10
src/renderer/src/pages/downloads/downloads.css.ts
View file

@ -21,16 +21,6 @@ export const downloadTitle = style({
},
});
export const downloaderName = style({
color: "#c0c1c7",
fontSize: "10px",
padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT}px`,
border: "solid 1px #c0c1c7",
borderRadius: "4px",
display: "flex",
alignItems: "center",
});
export const downloads = style({
width: "100%",
gap: `${SPACING_UNIT * 2}px`,

6
src/renderer/src/pages/downloads/downloads.tsx
View file

@ -1,7 +1,7 @@
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { Button, TextField } from "@renderer/components";
import { Badge, Button, TextField } from "@renderer/components";
import {
buildGameDetailsPath,
formatDownloadProgress,
@ -255,9 +255,7 @@ export function Downloads() {
/>
<div className={styles.downloadCoverContent}>
<small className={styles.downloaderName}>
{DOWNLOADER_NAME[game.downloader]}
</small>
<Badge>{DOWNLOADER_NAME[game.downloader]}</Badge>
</div>
</div>
</div>

1
src/renderer/src/pages/settings/add-download-source-modal.tsx
View file

@ -75,6 +75,7 @@ export function AddDownloadSourceModal({
<Button
type="button"
theme="outline"
style={{ alignSelf: "flex-end" }}
onClick={handleValidateDownloadSource}
disabled={isLoading || !value}

15
src/renderer/src/pages/settings/settings-download-sources.css.ts
View file

@ -6,6 +6,13 @@ export const downloadSourceField = style({
gap: `${SPACING_UNIT}px`,
});
export const downloadSources = style({
padding: "0",
gap: `${SPACING_UNIT * 2}px`,
display: "flex",
flexDirection: "column",
});
export const downloadSourceItem = style({
display: "flex",
flexDirection: "column",
@ -20,5 +27,11 @@ export const downloadSourceItemHeader = style({
marginBottom: `${SPACING_UNIT}px`,
display: "flex",
flexDirection: "column",
gap: `${SPACING_UNIT / 2}px`,
gap: `${SPACING_UNIT}px`,
});
export const downloadSourceItemTitle = style({
display: "flex",
gap: `${SPACING_UNIT}px`,
alignItems: "center",
});

70
src/renderer/src/pages/settings/settings-download-sources.tsx
View file

@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { TextField, Button } from "@renderer/components";
import { TextField, Button, Badge } from "@renderer/components";
import { useTranslation } from "react-i18next";
import * as styles from "./settings-download-sources.css";
@ -62,38 +62,46 @@ export function SettingsDownloadSources() {
{t("add_download_source")}
</Button>
{downloadSources.map((downloadSource) => (
<div key={downloadSource.id} className={styles.downloadSourceItem}>
<div className={styles.downloadSourceItemHeader}>
<h3>{downloadSource.name}</h3>
<small>
{t("download_options", {
count: downloadSource.repackCount,
countFormatted: downloadSource.repackCount.toLocaleString(),
})}
</small>
</div>
<ul className={styles.downloadSources}>
{downloadSources.map((downloadSource) => (
<li key={downloadSource.id} className={styles.downloadSourceItem}>
<div className={styles.downloadSourceItemHeader}>
<div className={styles.downloadSourceItemTitle}>
<h2>{downloadSource.name}</h2>
<div className={styles.downloadSourceField}>
<TextField
label={t("download_source_url")}
value={downloadSource.url}
readOnly
disabled
/>
<Badge>{downloadSource.status}</Badge>
</div>
<Button
type="button"
theme="outline"
style={{ alignSelf: "flex-end" }}
onClick={() => handleRemoveSource(downloadSource.id)}
>
<NoEntryIcon />
{t("remove_download_source")}
</Button>
</div>
</div>
))}
<small>
{t("download_options", {
count: downloadSource.repackCount,
countFormatted: downloadSource.repackCount.toLocaleString(),
})}
</small>
</div>
<div className={styles.downloadSourceField}>
<TextField
label={t("download_source_url")}
value={downloadSource.url}
readOnly
theme="dark"
disabled
/>
<Button
type="button"
theme="outline"
style={{ alignSelf: "flex-end" }}
onClick={() => handleRemoveSource(downloadSource.id)}
>
<NoEntryIcon />
{t("remove_download_source")}
</Button>
</div>
</li>
))}
</ul>
</>
);
}