diff --git a/public/locales/en/gamepage.json b/public/locales/en/gamepage.json index f18c112488..859cfb6051 100644 --- a/public/locales/en/gamepage.json +++ b/public/locales/en/gamepage.json @@ -198,7 +198,9 @@ "title": "Select components to Install" }, "setting": { + "show-wine-settings": "Show Wine settings", "use-default-wine-settings": "Use Default Wine Settings", + "warn-use-default-wine-settings": "Only use this option if you know what you are doing.Sharing the same prefix for multiple games can create problems if their dependencies are incompatible.", "winecrossoverbottle": "CrossOver Bottle" }, "sideload": { diff --git a/src/frontend/components/UI/PathSelectionBox/index.tsx b/src/frontend/components/UI/PathSelectionBox/index.tsx index 6c55725f0b..a63cb830a8 100644 --- a/src/frontend/components/UI/PathSelectionBox/index.tsx +++ b/src/frontend/components/UI/PathSelectionBox/index.tsx @@ -27,6 +27,7 @@ interface Props { noDeleteButton?: boolean label?: string afterInput?: ReactNode + disabled?: boolean } const PathSelectionBox = ({ @@ -41,7 +42,8 @@ const PathSelectionBox = ({ noDeleteButton = false, htmlId, label, - afterInput + afterInput, + disabled = false }: Props) => { const { t } = useTranslation() // We only send `onPathChange` updates when the user is done editing, so we @@ -83,7 +85,7 @@ const PathSelectionBox = ({ onIconClick={handleIconClick} placeholder={placeholder} icon={!noDeleteButton && path ? : } - disabled={!canEditPath} + disabled={!canEditPath || disabled} htmlId={htmlId} label={label} afterInput={afterInput} diff --git a/src/frontend/components/UI/TextInputField/index.css b/src/frontend/components/UI/TextInputField/index.css index 173e5c4622..c3088da7c8 100644 --- a/src/frontend/components/UI/TextInputField/index.css +++ b/src/frontend/components/UI/TextInputField/index.css @@ -24,6 +24,11 @@ -moz-box-sizing: border-box; box-sizing: border-box; min-width: 100px; + + &:disabled { + opacity: 0.7; + cursor: not-allowed; + } } .textInputFieldWrapper label { @@ -45,6 +50,12 @@ background: none; color: var(--text-default); padding: var(--space-3xs) var(--space-2xs); + &:disabled { + opacity: 0.7; + .MuiSvgIcon-root { + cursor: not-allowed; + } + } } .textInputFieldWrapper .inputIcon ~ input { diff --git a/src/frontend/components/UI/TextInputWithIconField/index.tsx b/src/frontend/components/UI/TextInputWithIconField/index.tsx index fd088f4ef1..22aa2ce7e4 100644 --- a/src/frontend/components/UI/TextInputWithIconField/index.tsx +++ b/src/frontend/components/UI/TextInputWithIconField/index.tsx @@ -19,13 +19,19 @@ interface TextInputWithIconFieldProps { const TextInputWithIconField = ({ icon, onIconClick, + disabled = false, ...props }: TextInputWithIconFieldProps) => { return ( + {icon} } diff --git a/src/frontend/screens/Library/components/InstallModal/DownloadDialog/index.tsx b/src/frontend/screens/Library/components/InstallModal/DownloadDialog/index.tsx index af160403d7..ad9410cac2 100644 --- a/src/frontend/screens/Library/components/InstallModal/DownloadDialog/index.tsx +++ b/src/frontend/screens/Library/components/InstallModal/DownloadDialog/index.tsx @@ -654,7 +654,6 @@ export default function DownloadDialog({ /> )} - {children} {(haveDLCs || haveSDL) && ( {t('sdl.title', 'Select components to Install')}: @@ -686,6 +685,7 @@ export default function DownloadDialog({ setDlcsToInstall={setDlcsToInstall} /> )} + {children} - setUseDefaultSettings(!useDefaultSettings)} - description={description} - /> - {!useDefaultSettings && ( + + + {t('setting.show-wine-settings', 'Show Wine settings')} + <> + setUseDefaultSettings(!useDefaultSettings)} + description={description} + /> + {useDefaultSettings && ( + + + + Only use this option if you know what you are doing. + + Sharing the same prefix for multiple games can create problems + if their dependencies are incompatible. + + + )} {showPrefix && ( )} {showBottle && ( @@ -104,6 +125,7 @@ export default function WineSelector({ htmlId="crossoverBottle" value={crossoverBottle} onChange={(event) => setCrossoverBottle(event.target.value)} + disabled={useDefaultSettings} /> )} @@ -111,6 +133,7 @@ export default function WineSelector({ label={`${t('install.wineversion')}:`} htmlId="wineVersion" value={wineVersion?.name || ''} + disabled={useDefaultSettings} onChange={(e) => setWineVersion( wineVersionList.find( @@ -127,7 +150,7 @@ export default function WineSelector({ ))} > - )} + > ) } diff --git a/src/frontend/screens/Library/components/InstallModal/index.scss b/src/frontend/screens/Library/components/InstallModal/index.scss index f52d99e847..d3fa3af1c3 100644 --- a/src/frontend/screens/Library/components/InstallModal/index.scss +++ b/src/frontend/screens/Library/components/InstallModal/index.scss @@ -4,6 +4,17 @@ max-height: 90vh; min-width: fit-content; max-width: 80vw; + + .infoBox { + max-width: 630px; // kidna magic number, TODO: find a better way to limit this width + svg { + margin-inline-end: 0.5rem; + } + } + + & summary { + font-size: var(--text-lg); + } } .InstallModal__dialog > .anticheatInfo {