Add backup attachment restore idle state

This commit is contained in:
trevor-signal 2024-10-24 16:21:02 -04:00 committed by GitHub
parent 56ccd02232
commit 8601baa7f5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 122 additions and 17 deletions

View file

@ -14,6 +14,7 @@ export type PropsType = Readonly<{
i18n: LocalizerType;
downloadedBytes: number;
totalBytes: number;
isIdle: boolean;
isPaused: boolean;
handleCancel: VoidFunction;
handleClose: VoidFunction;
@ -25,6 +26,7 @@ export function BackupMediaDownloadProgress({
i18n,
downloadedBytes,
totalBytes,
isIdle,
isPaused,
handleCancel: handleConfirmedCancel,
handleClose,
@ -45,31 +47,57 @@ export function BackupMediaDownloadProgress({
downloadedBytes / totalBytes
);
const closeButton = (
<button
type="button"
onClick={handleClose}
className="BackupMediaDownloadProgress__button-close"
aria-label={i18n('icu:close')}
/>
);
let content: JSX.Element | undefined;
let icon: JSX.Element | undefined;
let actionButton: JSX.Element | undefined;
if (fractionComplete === 1) {
icon = <div className="BackupMediaDownloadProgress__icon--complete" />;
icon = (
<div className="BackupMediaDownloadProgress__icon BackupMediaDownloadProgress__icon--complete" />
);
content = (
<>
<div className="BackupMediaDownloadProgress__title">
{i18n('icu:BackupMediaDownloadProgress__title-complete')}
</div>
<div className="BackupMediaDownloadProgress__progressbar-hint">
<div className="BackupMediaDownloadProgress__description">
{formatFileSize(downloadedBytes)}
</div>
</>
);
actionButton = (
<button
type="button"
onClick={handleClose}
className="BackupMediaDownloadProgress__button-close"
aria-label={i18n('icu:close')}
/>
actionButton = closeButton;
} else if (isIdle && !isPaused) {
icon = (
<div className="BackupMediaDownloadProgress__icon BackupMediaDownloadProgress__icon--idle" />
);
content = (
<>
<div className="BackupMediaDownloadProgress__title">
{i18n('icu:BackupMediaDownloadProgress__title-idle', {
currentSize: formatFileSize(downloadedBytes),
totalSize: formatFileSize(totalBytes),
})}
</div>
<div className="BackupMediaDownloadProgress__description">
{i18n('icu:BackupMediaDownloadProgress__description-idle')}
</div>
</>
);
actionButton = closeButton;
} else {
icon = <ProgressCircle fractionComplete={fractionComplete} />;
icon = (
<div className="BackupMediaDownloadProgress__icon">
<ProgressCircle fractionComplete={fractionComplete} />
</div>
);
if (isPaused) {
content = (
@ -94,7 +122,7 @@ export function BackupMediaDownloadProgress({
{i18n('icu:BackupMediaDownloadProgress__title-in-progress')}
</div>
<div className="BackupMediaDownloadProgress__progressbar-hint">
<div className="BackupMediaDownloadProgress__description">
{i18n('icu:BackupMediaDownloadProgress__progressbar-hint', {
currentSize: formatFileSize(downloadedBytes),
totalSize: formatFileSize(totalBytes),