PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-02 16:23:48 +03:00
Code Issues Actions 1 Packages Projects Releases 1 Wiki Activity

refactor: fix some styles in game details modals

Browse Source
This commit is contained in:
Hachi-R 2025-01-21 17:41:58 -03:00
parent c7bc868fbb
commit 28a2f1dda5
3 changed files with 189 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/renderer/src/pages/game-details/modals/download-settings-modal.scss
View File

@ -10,11 +10,12 @@
&__downloads-path-field { &__downloads-path-field {
display: flex; display: flex;
flex-direction: column;
gap: globals.$spacing-unit; gap: globals.$spacing-unit;
} }
&__hint-text { &__hint-text {
font-size: globals.$small-font-size; font-size: 12px;
color: globals.$body-color; color: globals.$body-color;
} }

68
src/renderer/src/pages/game-details/modals/game-options-modal.scss
View File

@ -7,18 +7,80 @@
flex-direction: column; flex-direction: column;
} }
&__header { &__section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: globals.$spacing-unit; gap: globals.$spacing-unit;
} }
&__header-description { &__header {
font-weight: 400; display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
&-description {
font-weight: 400;
}
} }
&__row { &__row {
display: flex; display: flex;
gap: globals.$spacing-unit; gap: globals.$spacing-unit;
} }
&__executable-field {
display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
&-input {
width: 100%;
}
&-buttons {
display: flex;
gap: globals.$spacing-unit;
}
}
&__wine-prefix {
display: flex;
flex-direction: column;
gap: calc(globals.$spacing-unit * 2);
&-input {
width: 100%;
}
}
&__launch-options {
display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
&-input {
width: 100%;
}
}
&__downloads {
display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
}
&__danger-zone {
display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
&-description {
font-weight: 400;
}
&-buttons {
display: flex;
gap: globals.$spacing-unit;
}
}
} }

234
src/renderer/src/pages/game-details/modals/game-options-modal.tsx
View File

@ -2,7 +2,6 @@ import { useContext, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Button, Modal, TextField } from "@renderer/components"; import { Button, Modal, TextField } from "@renderer/components";
import type { Game } from "@types"; import type { Game } from "@types";
import * as styles from "./game-options-modal.css";
import { gameDetailsContext } from "@renderer/context"; import { gameDetailsContext } from "@renderer/context";
import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal"; import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
import { useDownload, useToast, useUserDetails } from "@renderer/hooks"; import { useDownload, useToast, useUserDetails } from "@renderer/hooks";
@ -179,14 +178,12 @@ export function GameOptionsModal({
onClose={() => setShowDeleteModal(false)} onClose={() => setShowDeleteModal(false)}
deleteGame={handleDeleteGame} deleteGame={handleDeleteGame}
/> />
<RemoveGameFromLibraryModal <RemoveGameFromLibraryModal
visible={showRemoveGameModal} visible={showRemoveGameModal}
onClose={() => setShowRemoveGameModal(false)} onClose={() => setShowRemoveGameModal(false)}
removeGameFromLibrary={handleRemoveGameFromLibrary} removeGameFromLibrary={handleRemoveGameFromLibrary}
game={game} game={game}
/> />
<ResetAchievementsModal <ResetAchievementsModal
visible={showResetAchievementsModal} visible={showResetAchievementsModal}
onClose={() => setShowResetAchievementsModal(false)} onClose={() => setShowResetAchievementsModal(false)}
@ -201,58 +198,65 @@ export function GameOptionsModal({
large={true} large={true}
> >
<div className="game-options-modal__container"> <div className="game-options-modal__container">
<div className="game-options-modal__header"> <div className="game-options-modal__section">
<h2>{t("executable_section_title")}</h2> <div className="game-options-modal__header">
<h4 className="game-options-modal__header-description"> <h2>{t("executable_section_title")}</h2>
{t("executable_section_description")} <h4 className="game-options-modal__header-description">
</h4> {t("executable_section_description")}
</h4>
</div>
<div className="game-options-modal__executable-field">
<TextField
value={game.executablePath || ""}
readOnly
theme="dark"
disabled
placeholder={t("no_executable_selected")}
rightContent={
<>
<Button
type="button"
theme="outline"
onClick={handleChangeExecutableLocation}
>
<FileIcon />
{t("select_executable")}
</Button>
{game.executablePath && (
<Button
onClick={handleClearExecutablePath}
theme="outline"
>
{t("clear")}
</Button>
)}
</>
}
/>
{game.executablePath && (
<div className="game-options-modal__executable-field-buttons">
<Button
type="button"
theme="outline"
onClick={handleOpenGameExecutablePath}
>
{t("open_folder")}
</Button>
<Button onClick={handleCreateShortcut} theme="outline">
{t("create_shortcut")}
</Button>
</div>
)}
</div>
</div> </div>
<TextField
value={game.executablePath || ""}
readOnly
theme="dark"
disabled
placeholder={t("no_executable_selected")}
rightContent={
<>
<Button
type="button"
theme="outline"
onClick={handleChangeExecutableLocation}
>
<FileIcon />
{t("select_executable")}
</Button>
{game.executablePath && (
<Button onClick={handleClearExecutablePath} theme="outline">
{t("clear")}
</Button>
)}
</>
}
/>
{game.executablePath && (
<div className={styles.gameOptionRow}>
<Button
type="button"
theme="outline"
onClick={handleOpenGameExecutablePath}
>
{t("open_folder")}
</Button>
<Button onClick={handleCreateShortcut} theme="outline">
{t("create_shortcut")}
</Button>
</div>
)}
{shouldShowWinePrefixConfiguration && ( {shouldShowWinePrefixConfiguration && (
<div className={styles.optionsContainer}> <div className="game-options-modal__wine-prefix">
<div className={styles.gameOptionHeader}> <div className="game-options-modal__header">
<h2>{t("wine_prefix")}</h2> <h2>{t("wine_prefix")}</h2>
<h4 className={styles.gameOptionHeaderDescription}> <h4 className="game-options-modal__header-description">
{t("wine_prefix_description")} {t("wine_prefix_description")}
</h4> </h4>
</div> </div>
@ -287,11 +291,13 @@ export function GameOptionsModal({
)} )}
{shouldShowLaunchOptionsConfiguration && ( {shouldShowLaunchOptionsConfiguration && (
<div className={styles.gameOptionHeader}> <div className="game-options-modal__launch-options">
<h2>{t("launch_options")}</h2> <div className="game-options-modal__header">
<h4 className={styles.gameOptionHeaderDescription}> <h2>{t("launch_options")}</h2>
{t("launch_options_description")} <h4 className="game-options-modal__header-description">
</h4> {t("launch_options_description")}
</h4>
</div>
<TextField <TextField
value={launchOptions} value={launchOptions}
theme="dark" theme="dark"
@ -308,70 +314,74 @@ export function GameOptionsModal({
</div> </div>
)} )}
<div className={styles.gameOptionHeader}> <div className="game-options-modal__downloads">
<h2>{t("downloads_secion_title")}</h2> <div className="game-options-modal__header">
<h4 className={styles.gameOptionHeaderDescription}> <h2>{t("downloads_secion_title")}</h2>
{t("downloads_section_description")} <h4 className="game-options-modal__header-description">
</h4> {t("downloads_section_description")}
</h4>
</div>
<div className="game-options-modal__row">
<Button
onClick={() => setShowRepacksModal(true)}
theme="outline"
disabled={deleting || isGameDownloading || !repacks.length}
>
{t("open_download_options")}
</Button>
{game.downloadPath && (
<Button
onClick={handleOpenDownloadFolder}
theme="outline"
disabled={deleting}
>
{t("open_download_location")}
</Button>
)}
</div>
</div> </div>
<div className={styles.gameOptionRow}> <div className="game-options-modal__danger-zone">
<Button <div className="game-options-modal__header">
onClick={() => setShowRepacksModal(true)} <h2>{t("danger_zone_section_title")}</h2>
theme="outline" <h4 className="game-options-modal__danger-zone-description">
disabled={deleting || isGameDownloading || !repacks.length} {t("danger_zone_section_description")}
> </h4>
{t("open_download_options")} </div>
</Button>
{game.downloadPath && ( <div className="game-options-modal__danger-zone-buttons">
<Button <Button
onClick={handleOpenDownloadFolder} onClick={() => setShowRemoveGameModal(true)}
theme="outline" theme="danger"
disabled={deleting} disabled={deleting}
> >
{t("open_download_location")} {t("remove_from_library")}
</Button> </Button>
)}
</div>
<div className={styles.gameOptionHeader}> <Button
<h2>{t("danger_zone_section_title")}</h2> onClick={() => setShowResetAchievementsModal(true)}
<h4 className={styles.gameOptionHeaderDescription}> theme="danger"
{t("danger_zone_section_description")} disabled={
</h4> deleting ||
</div> isDeletingAchievements ||
!hasAchievements ||
!userDetails
}
>
{t("reset_achievements")}
</Button>
<div className={styles.gameOptionRow}> <Button
<Button onClick={() => {
onClick={() => setShowRemoveGameModal(true)} setShowDeleteModal(true);
theme="danger" }}
disabled={deleting} theme="danger"
> disabled={isGameDownloading || deleting || !game.downloadPath}
{t("remove_from_library")} >
</Button> {t("remove_files")}
</Button>
<Button </div>
onClick={() => setShowResetAchievementsModal(true)}
theme="danger"
disabled={
deleting ||
isDeletingAchievements ||
!hasAchievements ||
!userDetails
}
>
{t("reset_achievements")}
</Button>
<Button
onClick={() => {
setShowDeleteModal(true);
}}
theme="danger"
disabled={isGameDownloading || deleting || !game.downloadPath}
>
{t("remove_files")}
</Button>
</div> </div>
</div> </div>
</Modal> </Modal>