Add backup attachment restore idle state
This commit is contained in:
		
					parent
					
						
							
								56ccd02232
							
						
					
				
			
			
				commit
				
					
						8601baa7f5
					
				
			
		
					 13 changed files with 122 additions and 17 deletions
				
			
		| 
						 | 
				
			
			@ -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),
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue