mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Small UI fixes for left pane dialogs

Browse source
This commit is contained in:
Fedor Indutny 2021-09-17 15:20:49 -07:00 • committed by GitHub
parent 6c906d5da8
commit f3715411c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 298 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

182
ts/components/DialogUpdate.tsx
View file

@ -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')}
/>
);
};