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 {
display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
}
&__hint-text {
font-size: globals.$small-font-size;
font-size: 12px;
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;
}
&__header {
&__section {
display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
}
&__header-description {
font-weight: 400;
&__header {
display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
&-description {
font-weight: 400;
}
}
&__row {
display: flex;
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 { Button, Modal, TextField } from "@renderer/components";
import type { Game } from "@types";
import * as styles from "./game-options-modal.css";
import { gameDetailsContext } from "@renderer/context";
import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
import { useDownload, useToast, useUserDetails } from "@renderer/hooks";
@ -179,14 +178,12 @@ export function GameOptionsModal({
onClose={() => setShowDeleteModal(false)}
deleteGame={handleDeleteGame}
/>
<RemoveGameFromLibraryModal
visible={showRemoveGameModal}
onClose={() => setShowRemoveGameModal(false)}
removeGameFromLibrary={handleRemoveGameFromLibrary}
game={game}
/>
<ResetAchievementsModal
visible={showResetAchievementsModal}
onClose={() => setShowResetAchievementsModal(false)}
@ -201,58 +198,65 @@ export function GameOptionsModal({
large={true}
>
<div className="game-options-modal__container">
<div className="game-options-modal__header">
<h2>{t("executable_section_title")}</h2>
<h4 className="game-options-modal__header-description">
{t("executable_section_description")}
</h4>
<div className="game-options-modal__section">
<div className="game-options-modal__header">
<h2>{t("executable_section_title")}</h2>
<h4 className="game-options-modal__header-description">
{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>
<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 && (
<div className={styles.optionsContainer}>
<div className={styles.gameOptionHeader}>
<div className="game-options-modal__wine-prefix">
<div className="game-options-modal__header">
<h2>{t("wine_prefix")}</h2>
<h4 className={styles.gameOptionHeaderDescription}>
<h4 className="game-options-modal__header-description">
{t("wine_prefix_description")}
</h4>
</div>
@ -287,11 +291,13 @@ export function GameOptionsModal({
)}
{shouldShowLaunchOptionsConfiguration && (
<div className={styles.gameOptionHeader}>
<h2>{t("launch_options")}</h2>
<h4 className={styles.gameOptionHeaderDescription}>
{t("launch_options_description")}
</h4>
<div className="game-options-modal__launch-options">
<div className="game-options-modal__header">
<h2>{t("launch_options")}</h2>
<h4 className="game-options-modal__header-description">
{t("launch_options_description")}
</h4>
</div>
<TextField
value={launchOptions}
theme="dark"
@ -308,70 +314,74 @@ export function GameOptionsModal({
</div>
)}
<div className={styles.gameOptionHeader}>
<h2>{t("downloads_secion_title")}</h2>
<h4 className={styles.gameOptionHeaderDescription}>
{t("downloads_section_description")}
</h4>
<div className="game-options-modal__downloads">
<div className="game-options-modal__header">
<h2>{t("downloads_secion_title")}</h2>
<h4 className="game-options-modal__header-description">
{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 className={styles.gameOptionRow}>
<Button
onClick={() => setShowRepacksModal(true)}
theme="outline"
disabled={deleting || isGameDownloading || !repacks.length}
>
{t("open_download_options")}
</Button>
{game.downloadPath && (
<div className="game-options-modal__danger-zone">
<div className="game-options-modal__header">
<h2>{t("danger_zone_section_title")}</h2>
<h4 className="game-options-modal__danger-zone-description">
{t("danger_zone_section_description")}
</h4>
</div>
<div className="game-options-modal__danger-zone-buttons">
<Button
onClick={handleOpenDownloadFolder}
theme="outline"
onClick={() => setShowRemoveGameModal(true)}
theme="danger"
disabled={deleting}
>
{t("open_download_location")}
{t("remove_from_library")}
</Button>
)}
</div>
<div className={styles.gameOptionHeader}>
<h2>{t("danger_zone_section_title")}</h2>
<h4 className={styles.gameOptionHeaderDescription}>
{t("danger_zone_section_description")}
</h4>
</div>
<Button
onClick={() => setShowResetAchievementsModal(true)}
theme="danger"
disabled={
deleting ||
isDeletingAchievements ||
!hasAchievements ||
!userDetails
}
>
{t("reset_achievements")}
</Button>
<div className={styles.gameOptionRow}>
<Button
onClick={() => setShowRemoveGameModal(true)}
theme="danger"
disabled={deleting}
>
{t("remove_from_library")}
</Button>
<Button
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>
<Button
onClick={() => {
setShowDeleteModal(true);
}}
theme="danger"
disabled={isGameDownloading || deleting || !game.downloadPath}
>
{t("remove_files")}
</Button>
</div>
</div>
</div>
</Modal>