From 3d4d1d32d9cae26a73375d3932fd618cbca2e3ab Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Mon, 26 Jul 2021 00:09:59 +0530 Subject: [PATCH] Modify design according to the design team --- res/css/views/dialogs/_ExportDialog.scss | 49 +++++ src/components/views/dialogs/ExportDialog.tsx | 170 ++++++++++-------- src/i18n/strings/en_EN.json | 8 +- src/utils/exportUtils/Exporter.ts | 10 +- src/utils/exportUtils/HtmlExport.tsx | 4 +- src/utils/exportUtils/exportUtils.ts | 2 +- 6 files changed, 154 insertions(+), 89 deletions(-) diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss index d3af6c843b..03b7b2a8d3 100644 --- a/res/css/views/dialogs/_ExportDialog.scss +++ b/res/css/views/dialogs/_ExportDialog.scss @@ -9,6 +9,34 @@ margin-bottom: 12px; } + &.mx_ExportDialog_Exporting .mx_ExportDialog_options { + pointer-events: none; + } + + .mx_ExportDialog_progress { + .mx_Dialog_buttons { + margin-top: unset; + margin-left: 18px; + } + .mx_ExportDialog_spinner { + animation: mx_rotate 2s linear infinite; + z-index: 2; + position: relative; + margin-right: 10px; + width: 24px; + height: 24px; + & .mx_ExportDialog_spinner_path { + stroke: #0dbd8b; + stroke-linecap: round; + animation: mx_dash 1.5s ease-in-out infinite; + } + } + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + } + .mx_RadioButton > .mx_RadioButton_content { margin-top: 5px; margin-bottom: 5px; @@ -22,3 +50,24 @@ padding: 9px 10px; } } + +@keyframes mx_rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes mx_dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx index b1de882950..570308edc1 100644 --- a/src/components/views/dialogs/ExportDialog.tsx +++ b/src/components/views/dialogs/ExportDialog.tsx @@ -197,6 +197,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { ); }); + let messageCount = null; if (exportType === exportTypes.LAST_N_MESSAGES) { messageCount = ( @@ -254,72 +255,6 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { /> ); - } else if (!isExporting) { - // Display export settings - return ( - -

- { _t("Select from the options below to export chats from your timeline") } -

- - { _t("Format") } - - setExportFormat(exportFormats[key])} - definitions={exportFormatOptions} - /> - - { _t("Messages") } - - { - setExportType(exportTypes[e.target.value]); - }} - > - { exportTypeOptions } - - { messageCount } - - { _t("Size Limit") } - - setSizeLimit(parseInt(e.target.value))} - /> - - - setAttachments((e.target as HTMLInputElement).checked) - } - > - { _t("Include Attachments") } - - - onFinished(false)} - /> - - ); } else if (displayCancel) { // Display cancel warning return ( @@ -346,23 +281,104 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { ); } else { - // Display progress dialog + // Display export settings return ( -

- +

+ { _t( + "Select from the options below to export chats from your timeline", + ) } +

+ + + { _t("Format") } + + +
+ setExportFormat(exportFormats[key])} + definitions={exportFormatOptions} + /> + + + { _t("Messages") } + + + { + setExportType(exportTypes[e.target.value]); + }} + > + { exportTypeOptions } + + { messageCount } + + + { _t("Size Limit") } + + + setSizeLimit(parseInt(e.target.value))} + /> + + + setAttachments( + (e.target as HTMLInputElement).checked, + ) + } + > + { _t("Include Attachments") } + +
+ { isExporting ? ( +
+ + + +

+ { _t("Processing...") } +

+ +
+ ) : ( + onFinished(false)} + /> + ) } ); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index d69b368550..01485741ef 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -730,7 +730,7 @@ "JSON": "JSON", "Plain Text": "Plain Text", "From the beginning": "From the beginning", - "For a number of messages": "For a number of messages", + "Specify a number of messages": "Specify a number of messages", "Current Timeline": "Current Timeline", "Media omitted": "Media omitted", "Media omitted - file size limit exceeded": "Media omitted - file size limit exceeded", @@ -2272,15 +2272,15 @@ "Okay": "Okay", "Export Successful": "Export Successful", "Your messages were successfully exported": "Your messages were successfully exported", + "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.", + "Stop": "Stop", "Export Chat": "Export Chat", "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline", "Format": "Format", "Size Limit": "Size Limit", "Include Attachments": "Include Attachments", + "Processing...": "Processing...", "Export": "Export", - "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.", - "Stop": "Stop", - "Exporting your data...": "Exporting your data...", "Feedback sent": "Feedback sent", "Rate %(brand)s": "Rate %(brand)s", "Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.", diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts index 5366436dab..d43f937c7b 100644 --- a/src/utils/exportUtils/Exporter.ts +++ b/src/utils/exportUtils/Exporter.ts @@ -44,7 +44,7 @@ export default abstract class Exporter { protected updateProgress(progress: string, log = true, show = true): void { if (log) console.log(progress); - if (show) this.exportProgressRef.current.innerText = progress; + if (show && this.exportProgressRef.current) this.exportProgressRef.current.innerText = progress; } protected addFile(filePath: string, blob: Blob): void { @@ -64,7 +64,7 @@ export default abstract class Exporter { // Create a writable stream to the directory this.fileStream = streamSaver.createWriteStream(filename); - if (!this.cancelled) this.updateProgress("Generating a ZIP..."); + if (!this.cancelled) this.updateProgress("Generating a ZIP"); else return this.cleanUp(); this.writer = this.fileStream.getWriter(); @@ -79,7 +79,7 @@ export default abstract class Exporter { if (this.cancelled) return this.cleanUp(); - this.updateProgress("Writing to the file system..."); + this.updateProgress("Writing to the file system"); const reader = readableZipStream.getReader(); await this.pumpToFileStream(reader); @@ -186,8 +186,8 @@ export default abstract class Exporter { } this.updateProgress( ("Fetched " + events.length + " events ") + (this.exportType === exportTypes.LAST_N_MESSAGES - ? `out of ${this.exportOptions.numberOfMessages}...` - : "so far..."), + ? `out of ${this.exportOptions.numberOfMessages}` + : "so far"), ); prevToken = res.end; } diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx index 6f2394242c..3f98b4c92a 100644 --- a/src/utils/exportUtils/HtmlExport.tsx +++ b/src/utils/exportUtils/HtmlExport.tsx @@ -361,8 +361,8 @@ export default class HTMLExporter extends Exporter { } public async export() { - this.updateProgress("Starting export process...", true, false); - this.updateProgress("Fetching events..."); + this.updateProgress("Starting export process", true, false); + this.updateProgress("Fetching events"); const fetchStart = performance.now(); const res = await this.getRequiredEvents(); diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts index 6fa5ab9869..3e281269bf 100644 --- a/src/utils/exportUtils/exportUtils.ts +++ b/src/utils/exportUtils/exportUtils.ts @@ -29,7 +29,7 @@ export const textForType = (type: string): string => { case exportTypes.BEGINNING: return _t("From the beginning"); case exportTypes.LAST_N_MESSAGES: - return _t("For a number of messages"); + return _t("Specify a number of messages"); case exportTypes.TIMELINE: return _t("Current Timeline"); // case exportTypes.START_DATE: