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 background to item

Browse source
This commit is contained in:
Hydra 2024-05-03 19:51:13 +01:00
parent f6072eeb5c
commit 1f2f269736
No known key found for this signature in database
20 changed files with 77 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/index.html
View file

@ -6,7 +6,7 @@
<title>Hydra</title>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com; media-src 'self' data: https://cdn2.steamgriddb.com;"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: hydra: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com;"
/>
</head>
<body style="background-color: #1c1c1c">

29
src/renderer/src/components/sidebar/sidebar.css.ts
View file

@ -52,7 +52,7 @@ export const menu = style({
listStyle: "none",
padding: "0",
margin: "0",
gap: `${SPACING_UNIT * 2}px`,
gap: `${SPACING_UNIT / 2}px`,
display: "flex",
flexDirection: "column",
overflow: "hidden",
@ -64,16 +64,16 @@ export const menuItem = recipe({
cursor: "pointer",
textWrap: "nowrap",
display: "flex",
opacity: "0.9",
color: vars.color.muted,
borderRadius: "4px",
":hover": {
opacity: "1",
backgroundColor: "rgba(255, 255, 255, 0.15)",
},
},
variants: {
active: {
true: {
opacity: "1",
backgroundColor: "rgba(255, 255, 255, 0.1)",
fontWeight: "bold",
},
},
@ -96,6 +96,7 @@ export const menuItemButton = style({
cursor: "pointer",
overflow: "hidden",
width: "100%",
padding: `9px ${SPACING_UNIT}px`,
selectors: {
[`${menuItem({ active: true }).split(" ")[1]} &`]: {
fontWeight: "bold",
@ -120,20 +121,12 @@ export const sectionTitle = style({
fontWeight: "bold",
});
export const section = recipe({
base: {
padding: `${SPACING_UNIT * 2}px 0`,
gap: `${SPACING_UNIT * 2}px`,
display: "flex",
flexDirection: "column",
},
variants: {
hasBorder: {
true: {
borderBottom: `solid 1px ${vars.color.border}`,
},
},
},
export const section = style({
padding: `${SPACING_UNIT * 2}px 0`,
gap: `${SPACING_UNIT * 2}px`,
display: "flex",
flexDirection: "column",
paddingBottom: `${SPACING_UNIT}px`,
});
export const sidebarFooter = style({

12
src/renderer/src/components/sidebar/sidebar.tsx
View file

@ -6,7 +6,6 @@ import type { Game } from "@types";
import { AsyncImage, TextField } from "@renderer/components";
import { useDownload, useLibrary } from "@renderer/hooks";
import { SPACING_UNIT } from "../../theme.css";
import { routes } from "./routes";
@ -15,6 +14,7 @@ import DiscordLogo from "@renderer/assets/discord-icon.svg?react";
import XLogo from "@renderer/assets/x-icon.svg?react";
import * as styles from "./sidebar.css";
import { vars } from "@renderer/theme.css";
const SIDEBAR_MIN_WIDTH = 200;
const SIDEBAR_INITIAL_WIDTH = 250;
@ -95,7 +95,7 @@ export function Sidebar() {
}, [library]);
useEffect(() => {
window.onmousemove = (event) => {
window.onmousemove = (event: MouseEvent) => {
if (isResizing) {
const cursorXDelta = event.screenX - cursorPos.current.x;
const newWidth = Math.max(
@ -165,11 +165,9 @@ export function Sidebar() {
macos: window.electron.platform === "darwin",
})}
>
{window.electron.platform === "darwin" && (
<h2 style={{ marginBottom: SPACING_UNIT }}>Hydra</h2>
)}
{window.electron.platform === "darwin" && <h2>Hydra</h2>}
<section className={styles.section({ hasBorder: false })}>
<section className={styles.section}>
<ul className={styles.menu}>
{routes.map(({ nameKey, path, render }) => (
<li
@ -191,7 +189,7 @@ export function Sidebar() {
</ul>
</section>
<section className={styles.section({ hasBorder: false })}>
<section className={styles.section}>
<small className={styles.sectionTitle}>{t("my_library")}</small>
<TextField

2
src/renderer/src/pages/game-details/game-details-skeleton.tsx
View file

@ -13,7 +13,7 @@ export function GameDetailsSkeleton() {
<div className={styles.hero}>
<Skeleton className={styles.heroImageSkeleton} />
</div>
<div className={styles.descriptionHeader}>
<div className={styles.heroPanelSkeleton}>
<section className={styles.descriptionHeaderInfo}>
<Skeleton width={155} />
<Skeleton width={135} />

11
src/renderer/src/pages/game-details/game-details.css.ts
View file

@ -174,7 +174,6 @@ export const descriptionHeader = style({
justifyContent: "space-between",
alignItems: "center",
backgroundColor: vars.color.background,
borderBottom: `solid 1px ${vars.color.border}`,
height: "72px",
});
@ -233,6 +232,16 @@ export const randomizerButton = style({
},
});
export const heroPanelSkeleton = style({
width: "100%",
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
display: "flex",
alignItems: "center",
backgroundColor: vars.color.background,
height: "72px",
borderBottom: `solid 1px ${vars.color.border}`,
});
globalStyle(".bb_tag", {
marginTop: `${SPACING_UNIT * 2}px`,
marginBottom: `${SPACING_UNIT * 2}px`,

1
src/renderer/src/pages/game-details/hero/hero-panel.css.ts
View file

@ -10,7 +10,6 @@ export const panel = style({
justifyContent: "space-between",
transition: "all ease 0.2s",
borderBottom: `solid 1px ${vars.color.border}`,
color: "#8e919b",
boxShadow: "0px 0px 15px 0px #000000",
});

2
src/renderer/src/pages/game-details/installation-guides/dodi-installation-guide.tsx
View file

@ -21,7 +21,7 @@ export function DODIInstallationGuide({
}: DODIInstallationGuideProps) {
const { t } = useTranslation("game_details");
const [dontShowAgain, setDontShowAgain] = useState(true);
const [dontShowAgain, setDontShowAgain] = useState(false);
const handleClose = () => {
if (dontShowAgain) {

2
src/renderer/src/pages/game-details/installation-guides/online-fix-installation-guide.tsx
View file

@ -22,7 +22,7 @@ export function OnlineFixInstallationGuide({
const [clipboardLocked, setClipboardLocked] = useState(false);
const { t } = useTranslation("game_details");
const [dontShowAgain, setDontShowAgain] = useState(true);
const [dontShowAgain, setDontShowAgain] = useState(false);
const handleCopyToClipboard = () => {
setClipboardLocked(true);

15
src/renderer/src/pages/game-details/repacks-modal.tsx
View file

@ -44,12 +44,17 @@ export function RepacksModal({
};
const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
const term = event.target.value.toLocaleLowerCase();
setFilteredRepacks(
gameDetails.repacks.filter((repack) =>
repack.title
.toLowerCase()
.includes(event.target.value.toLocaleLowerCase())
)
gameDetails.repacks.filter((repack) => {
const lowerCaseTitle = repack.title.toLowerCase();
const lowerCaseRepacker = repack.repacker.toLowerCase();
return [lowerCaseTitle, lowerCaseRepacker].some((value) =>
value.includes(term)
);
})
);
};

2
src/renderer/src/pages/home/search-results.tsx
View file

@ -4,7 +4,7 @@ import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import type { CatalogueEntry } from "@types";
import type { DebouncedFunc } from "lodash";
import { debounce } from "lodash-es";
import { debounce } from "lodash";
import { InboxIcon } from "@primer/octicons-react";
import { clearSearch } from "@renderer/features";