Small UI fixes for left pane dialogs
This commit is contained in:
parent
6c906d5da8
commit
f3715411c6
7 changed files with 298 additions and 226 deletions
|
@ -5,8 +5,9 @@ import React from 'react';
|
|||
import formatFileSize from 'filesize';
|
||||
|
||||
import { DialogType } from '../types/Dialogs';
|
||||
import { Intl } from './Intl';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
import { Intl } from './Intl';
|
||||
import { LeftPaneDialog } from './LeftPaneDialog';
|
||||
|
||||
export type PropsType = {
|
||||
dialogType: DialogType;
|
||||
|
@ -48,132 +49,99 @@ export const DialogUpdate = ({
|
|||
|
||||
if (dialogType === DialogType.Cannot_Update) {
|
||||
return (
|
||||
<div className="LeftPaneDialog LeftPaneDialog--warning">
|
||||
<div className="LeftPaneDialog__message">
|
||||
<h3>{i18n('cannotUpdate')}</h3>
|
||||
<span>
|
||||
<Intl
|
||||
components={[
|
||||
<a
|
||||
key="signal-download"
|
||||
href="https://signal.org/download/"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
https://signal.org/download/
|
||||
</a>,
|
||||
]}
|
||||
i18n={i18n}
|
||||
id="cannotUpdateDetail"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<LeftPaneDialog type="warning" title={i18n('cannotUpdate')}>
|
||||
<span>
|
||||
<Intl
|
||||
components={[
|
||||
<a
|
||||
key="signal-download"
|
||||
href="https://signal.org/download/"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
https://signal.org/download/
|
||||
</a>,
|
||||
]}
|
||||
i18n={i18n}
|
||||
id="cannotUpdateDetail"
|
||||
/>
|
||||
</span>
|
||||
</LeftPaneDialog>
|
||||
);
|
||||
}
|
||||
|
||||
if (dialogType === DialogType.MacOS_Read_Only) {
|
||||
return (
|
||||
<div className="LeftPaneDialog LeftPaneDialog--warning">
|
||||
<div className="LeftPaneDialog__container">
|
||||
<div className="LeftPaneDialog__message">
|
||||
<h3>{i18n('cannotUpdate')}</h3>
|
||||
<span>
|
||||
<Intl
|
||||
components={{
|
||||
app: <strong key="app">Signal.app</strong>,
|
||||
folder: <strong key="folder">/Applications</strong>,
|
||||
}}
|
||||
i18n={i18n}
|
||||
id="readOnlyVolume"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="LeftPaneDialog__container-close">
|
||||
<button
|
||||
aria-label={i18n('close')}
|
||||
className="LeftPaneDialog__close-button"
|
||||
onClick={dismissDialog}
|
||||
tabIndex={0}
|
||||
type="button"
|
||||
<LeftPaneDialog
|
||||
type="warning"
|
||||
title={i18n('cannotUpdate')}
|
||||
hasXButton
|
||||
closeLabel={i18n('close')}
|
||||
onClose={dismissDialog}
|
||||
>
|
||||
<span>
|
||||
<Intl
|
||||
components={{
|
||||
app: <strong key="app">Signal.app</strong>,
|
||||
folder: <strong key="folder">/Applications</strong>,
|
||||
}}
|
||||
i18n={i18n}
|
||||
id="readOnlyVolume"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</LeftPaneDialog>
|
||||
);
|
||||
}
|
||||
|
||||
let size: string | undefined;
|
||||
let title = i18n('autoUpdateNewVersionTitle');
|
||||
|
||||
if (
|
||||
downloadSize &&
|
||||
(dialogType === DialogType.DownloadReady ||
|
||||
dialogType === DialogType.Downloading)
|
||||
) {
|
||||
size = `(${formatFileSize(downloadSize, { round: 0 })})`;
|
||||
}
|
||||
|
||||
let updateSubText: JSX.Element;
|
||||
if (dialogType === DialogType.DownloadReady) {
|
||||
updateSubText = (
|
||||
<button
|
||||
className="LeftPaneDialog__action-text"
|
||||
onClick={startUpdate}
|
||||
type="button"
|
||||
>
|
||||
{i18n('downloadNewVersionMessage')}
|
||||
</button>
|
||||
);
|
||||
} else if (dialogType === DialogType.Downloading) {
|
||||
const width = Math.ceil(
|
||||
((downloadedSize || 1) / (downloadSize || 1)) * 100
|
||||
);
|
||||
|
||||
updateSubText = (
|
||||
<div className="LeftPaneDialog__progress--container">
|
||||
<div
|
||||
className="LeftPaneDialog__progress--bar"
|
||||
style={{ width: `${width}%` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
updateSubText = (
|
||||
<button
|
||||
className="LeftPaneDialog__action-text"
|
||||
onClick={startUpdate}
|
||||
type="button"
|
||||
>
|
||||
{i18n('autoUpdateNewVersionMessage')}
|
||||
</button>
|
||||
);
|
||||
title += ` (${formatFileSize(downloadSize, { round: 0 })})`;
|
||||
}
|
||||
|
||||
const versionTitle = version
|
||||
? i18n('DialogUpdate--version-available', [version])
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="LeftPaneDialog" title={versionTitle}>
|
||||
<div className="LeftPaneDialog__container">
|
||||
<div className="LeftPaneDialog__icon LeftPaneDialog__icon--update" />
|
||||
<div className="LeftPaneDialog__message">
|
||||
<h3>
|
||||
{i18n('autoUpdateNewVersionTitle')} {size}
|
||||
</h3>
|
||||
{updateSubText}
|
||||
</div>
|
||||
</div>
|
||||
<div className="LeftPaneDialog__container-close">
|
||||
{dialogType !== DialogType.Downloading && (
|
||||
<button
|
||||
aria-label={i18n('close')}
|
||||
className="LeftPaneDialog__close-button"
|
||||
onClick={snoozeUpdate}
|
||||
tabIndex={0}
|
||||
type="button"
|
||||
if (dialogType === DialogType.Downloading) {
|
||||
const width = Math.ceil(
|
||||
((downloadedSize || 1) / (downloadSize || 1)) * 100
|
||||
);
|
||||
|
||||
return (
|
||||
<LeftPaneDialog icon="update" title={title} hoverText={versionTitle}>
|
||||
<div className="LeftPaneDialog__progress--container">
|
||||
<div
|
||||
className="LeftPaneDialog__progress--bar"
|
||||
style={{ width: `${width}%` }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LeftPaneDialog>
|
||||
);
|
||||
}
|
||||
|
||||
let clickLabel: string;
|
||||
if (dialogType === DialogType.DownloadReady) {
|
||||
clickLabel = i18n('downloadNewVersionMessage');
|
||||
} else {
|
||||
clickLabel = i18n('autoUpdateNewVersionMessage');
|
||||
}
|
||||
|
||||
return (
|
||||
<LeftPaneDialog
|
||||
icon="update"
|
||||
title={title}
|
||||
hoverText={versionTitle}
|
||||
hasAction
|
||||
onClick={startUpdate}
|
||||
clickLabel={clickLabel}
|
||||
hasXButton
|
||||
onClose={snoozeUpdate}
|
||||
closeLabel={i18n('autoUpdateIgnoreButtonLabel')}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue