[UX] Simplify install dialog hiding wine settings by default. Warn ab…

…out shared wine directory (#3547) * Simplify install dialog hiding wine settings by default. Warn about shared wine directory. * Add width limit to infoBox * Use details element instead of toggle, move wine to the bottom
Heroic-Games-Launcher · Feb 12, 2024 · 11100d2 · 11100d2
1 parent 47f97e7
commit 11100d2
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 18 deletions.
diff --git 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.<br/>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
@@ -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 ? <Backspace /> : <Folder />}
-      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
@@ -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
@@ -19,13 +19,19 @@ interface TextInputWithIconFieldProps {
 const TextInputWithIconField = ({
   icon,
   onIconClick,
+  disabled = false,
   ...props
 }: TextInputWithIconFieldProps) => {
   return (
     <TextInputField
       {...props}
+      disabled={disabled}
       inputIcon={
-        <SvgButton onClick={onIconClick} className="inputIcon">
+        <SvgButton
+          disabled={disabled}
+          onClick={onIconClick}
+          className="inputIcon"
+        >
           {icon}
         </SvgButton>
       }

diff --git 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({
             />
           </div>
         )}
-        {children}
         {(haveDLCs || haveSDL) && (
           <div className="InstallModal__sectionHeader">
             {t('sdl.title', 'Select components to Install')}:
@@ -686,6 +685,7 @@ export default function DownloadDialog({
             setDlcsToInstall={setDlcsToInstall}
           />
         )}
+        {children}
       </DialogContent>
       <DialogFooter>
         <button

diff --git a/src/frontend/screens/Library/components/InstallModal/WineSelector/index.tsx b/src/frontend/screens/Library/components/InstallModal/WineSelector/index.tsx
@@ -6,8 +6,10 @@ import {
 } from 'frontend/components/UI'
 import React from 'react'
 import { WineInstallation } from 'common/types'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { removeSpecialcharacters } from 'frontend/helpers'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faWarning } from '@fortawesome/free-solid-svg-icons'
 
 type Props = {
   setWineVersion: React.Dispatch<
@@ -32,7 +34,7 @@ export default function WineSelector({
   crossoverBottle,
   setCrossoverBottle
 }: Props) {
-  const { t } = useTranslation('gamepage')
+  const { t, i18n } = useTranslation('gamepage')
 
   const [useDefaultSettings, setUseDefaultSettings] = React.useState(false)
   const [description, setDescription] = React.useState('')
@@ -75,18 +77,36 @@ export default function WineSelector({
 
   return (
     <>
-      <ToggleSwitch
-        htmlId="use-wine-defaults"
-        title={t(
-          'setting.use-default-wine-settings',
-          'Use Default Wine Settings'
-        )}
-        value={useDefaultSettings}
-        handleChange={() => setUseDefaultSettings(!useDefaultSettings)}
-        description={description}
-      />
-      {!useDefaultSettings && (
+      <details>
+        <summary>
+          {t('setting.show-wine-settings', 'Show Wine settings')}
+        </summary>
         <>
+          <ToggleSwitch
+            htmlId="use-wine-defaults"
+            title={t(
+              'setting.use-default-wine-settings',
+              'Use Default Wine Settings'
+            )}
+            value={useDefaultSettings}
+            handleChange={() => setUseDefaultSettings(!useDefaultSettings)}
+            description={description}
+          />
+          {useDefaultSettings && (
+            <div className="infoBox">
+              <FontAwesomeIcon icon={faWarning} />
+              <Trans
+                i18n={i18n}
+                i18nKey="setting.warn-use-default-wine-settings"
+                ns="gamepage"
+              >
+                Only use this option if you know what you are doing.
+                <br />
+                Sharing the same prefix for multiple games can create problems
+                if their dependencies are incompatible.
+              </Trans>
+            </div>
+          )}
           {showPrefix && (
             <PathSelectionBox
               type="directory"
@@ -96,6 +116,7 @@ export default function WineSelector({
               label={t('install.wineprefix', 'WinePrefix')}
               htmlId="setinstallpath"
               noDeleteButton
+              disabled={useDefaultSettings}
             />
           )}
           {showBottle && (
@@ -104,13 +125,15 @@ export default function WineSelector({
               htmlId="crossoverBottle"
               value={crossoverBottle}
               onChange={(event) => setCrossoverBottle(event.target.value)}
+              disabled={useDefaultSettings}
             />
           )}
 
           <SelectField
             label={`${t('install.wineversion')}:`}
             htmlId="wineVersion"
             value={wineVersion?.name || ''}
+            disabled={useDefaultSettings}
             onChange={(e) =>
               setWineVersion(
                 wineVersionList.find(
@@ -127,7 +150,7 @@ export default function WineSelector({
               ))}
           </SelectField>
         </>
-      )}
+      </details>
     </>
   )
 }
diff --git 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 {