diff options
Diffstat (limited to 'frontend/src')
3 files changed, 40 insertions, 19 deletions
diff --git a/frontend/src/components/modals/MultiplePluginsInstallModal.tsx b/frontend/src/components/modals/MultiplePluginsInstallModal.tsx index e5c1c647..4a386997 100644 --- a/frontend/src/components/modals/MultiplePluginsInstallModal.tsx +++ b/frontend/src/components/modals/MultiplePluginsInstallModal.tsx @@ -1,9 +1,10 @@ -import { ConfirmModal, Navigation, ProgressBarWithInfo, QuickAccessTab } from '@decky/ui'; +import { ConfirmModal, Navigation, QuickAccessTab } from '@decky/ui'; import { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { FaCheck, FaDownload } from 'react-icons/fa'; import { DisabledPlugin, InstallType, InstallTypeTranslationMapping } from '../../plugin'; +import PluginInstallProgress from './PluginInstallProgress'; interface MultiplePluginsInstallModalProps { requests: { name: string; version: string; hash: string; install_type: InstallType }[]; @@ -132,15 +133,12 @@ const MultiplePluginsInstallModal: FC<MultiplePluginsInstallModalProps> = ({ ); })} </ul> - {/* TODO: center the progress bar and make it 80% width */} {loading && ( - <ProgressBarWithInfo + <PluginInstallProgress // when the key changes, react considers this a new component so resets the progress without the smoothing animation key={pluginInProgress} - bottomSeparator="none" - focusable={false} - nProgress={percentage} - sOperationText={downloadInfo} + percentage={percentage} + operationText={downloadInfo} /> )} </div> diff --git a/frontend/src/components/modals/PluginInstallModal.tsx b/frontend/src/components/modals/PluginInstallModal.tsx index 0075fce5..012d0982 100644 --- a/frontend/src/components/modals/PluginInstallModal.tsx +++ b/frontend/src/components/modals/PluginInstallModal.tsx @@ -1,8 +1,9 @@ -import { ConfirmModal, Navigation, ProgressBarWithInfo, QuickAccessTab } from '@decky/ui'; +import { ConfirmModal, Navigation, QuickAccessTab } from '@decky/ui'; import { FC, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { InstallType, InstallTypeTranslationMapping } from '../../plugin'; +import PluginInstallProgress from './PluginInstallProgress'; interface PluginInstallModalProps { artifact: string; @@ -66,7 +67,7 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ await onCancel(); }} strTitle={ - <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%' }}> + <div> { // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work // t('PluginInstallModal.install.title') @@ -76,16 +77,6 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ // t('PluginInstallModal.overwrite.title') t(`PluginInstallModal.${installTypeTranslationKey}.title`, { artifact: artifact }) } - {loading && ( - <div style={{ marginLeft: 'auto' }}> - <ProgressBarWithInfo - layout="inline" - bottomSeparator="none" - nProgress={percentage} - sOperationText={downloadInfo} - /> - </div> - )} </div> } strOKButtonText={ @@ -128,6 +119,7 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ } </div> {hash == 'False' && <span style={{ color: 'red' }}>{t('PluginInstallModal.no_hash')}</span>} + {loading && <PluginInstallProgress percentage={percentage} operationText={downloadInfo} />} </ConfirmModal> ); }; diff --git a/frontend/src/components/modals/PluginInstallProgress.tsx b/frontend/src/components/modals/PluginInstallProgress.tsx new file mode 100644 index 00000000..14fe9f34 --- /dev/null +++ b/frontend/src/components/modals/PluginInstallProgress.tsx @@ -0,0 +1,31 @@ +import { Field, ProgressBar } from '@decky/ui'; +import { FC } from 'react'; + +interface PluginInstallProgressProps { + percentage: number; + operationText: string | null; +} + +const PluginInstallProgress: FC<PluginInstallProgressProps> = ({ percentage, operationText }) => { + return ( + <div style={{ width: '100%', margin: '16px 0 0' }}> + <Field bottomSeparator="none" childrenLayout="below" focusable={false} padding="standard"> + <div style={{ width: '100%' }}> + <div + style={{ + minHeight: '22px', + width: '100%', + textAlign: 'left', + textTransform: 'uppercase', + }} + > + {operationText} + </div> + <ProgressBar focusable={false} nProgress={percentage} /> + </div> + </Field> + </div> + ); +}; + +export default PluginInstallProgress; |