From 1d04aa0315d2127cc792853370fce1da3dd661a3 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Wed, 1 Feb 2023 09:32:10 -0700 Subject: [PATCH] Editor file uploader design update (#11447) * Redesign the styling of conflict state for file upload in the editor * Change overwrite button style from primary (green) to danger (red) * Change the idle state and dragging state styling to match the error state new design: *remove the double border; only keep the dashed border * on idle state, change border color * Add hardcoded texts to translation file * Add padding to prevent text is becoming too near to the border when multiple files appear in the conflict file list * Apply custom file uploader style to smaller screen GitOrigin-RevId: 266e60bb8575a02c02c1ed1d7fa04cdb101f3dd1 --- .../web/frontend/extracted-translations.json | 3 ++ .../modes/file-tree-upload-doc.js | 26 +++++++------- .../stylesheets/app/editor/file-tree.less | 34 +++++++++++++++++-- .../frontend/stylesheets/core/variables.less | 3 ++ services/web/locales/en.json | 3 ++ 5 files changed, 54 insertions(+), 15 deletions(-) diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 3fe02cb5d3..b19eef35f5 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -151,6 +151,7 @@ "disable_stop_on_first_error": "", "dismiss": "", "dismiss_error_popup": "", + "do_you_want_to_overwrite_them": "", "documentation": "", "doesnt_match": "", "doing_this_allow_log_in_through_institution": "", @@ -470,6 +471,7 @@ "overall_theme": "", "overleaf": "", "overleaf_labs": "", + "overwrite": "", "owned_by_x": "", "owner": "", "page_current": "", @@ -690,6 +692,7 @@ "tex_live_version": "", "thank_you_exclamation": "", "thanks_settings_updated": "", + "the_following_files_already_exist_in_this_project": "", "this_action_cannot_be_undone": "", "this_grants_access_to_features_2": "", "this_project_is_public": "", diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.js b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.js index 92f1b86096..f9942242f6 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.js +++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.js @@ -1,5 +1,5 @@ -import { Trans } from 'react-i18next' -import { Alert, Button } from 'react-bootstrap' +import { Trans, useTranslation } from 'react-i18next' +import { Button } from 'react-bootstrap' import { useCallback, useEffect, useState } from 'react' import PropTypes from 'prop-types' import Uppy from '@uppy/core' @@ -225,13 +225,15 @@ UploadErrorMessage.propTypes = { } function UploadConflicts({ cancel, conflicts, handleOverwrite }) { + const { t } = useTranslation() + return ( - -

- The following files already exist in this project: +

+

+ {t('the_following_files_already_exist_in_this_project')}

-
    +
      {conflicts.map((conflict, index) => (
    • {conflict.meta.name} @@ -240,19 +242,19 @@ function UploadConflicts({ cancel, conflicts, handleOverwrite }) {

    - Do you want to overwrite them? + {t('do_you_want_to_overwrite_them')}

    -   -

    - +
) } UploadConflicts.propTypes = { diff --git a/services/web/frontend/stylesheets/app/editor/file-tree.less b/services/web/frontend/stylesheets/app/editor/file-tree.less index fd500ca5ee..d6d928634e 100644 --- a/services/web/frontend/stylesheets/app/editor/file-tree.less +++ b/services/web/frontend/stylesheets/app/editor/file-tree.less @@ -477,6 +477,18 @@ padding-top: 20px; } +.modal-new-file--body-conflict { + background-color: @red-10; + border: 1px dashed @red-50; + min-height: 400px; + border-radius: 3px; + color: @neutral-90; + display: flex; + flex-direction: column; + justify-content: center; + padding: @padding-sm; +} + .modal-footer { .approaching-file-limit { font-weight: bold; @@ -491,8 +503,24 @@ font-family: inherit; } -.modal-new-file--body-upload .uppy-size--md { - .uppy-Dashboard-AddFiles-title { - font-size: inherit; +.modal-new-file--body-upload .uppy-Dashboard { + .uppy-Dashboard-inner { + border: none; + } + + .uppy-Dashboard-dropFilesHereHint { + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + .uppy-Dashboard-AddFiles { + margin: 0; + border: 1px dashed @neutral-60; + height: 100%; + .uppy-Dashboard-AddFiles-title { + font-size: inherit; + } } } diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less index abea268ddb..3cf68360e2 100644 --- a/services/web/frontend/stylesheets/core/variables.less +++ b/services/web/frontend/stylesheets/core/variables.less @@ -43,6 +43,9 @@ @orange-dark: #9e5e04; @pink: #c3325f; @purple: #7a43b6; +@red-10: #f9f1f1; +@red-50: #b83a33; +@neutral-60: #677283; @brand-primary: @ol-green; @brand-secondary: @ol-dark-green; diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 1d5c347a87..4d04aa4ac4 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -334,6 +334,7 @@ "dismiss_error_popup": "Dismiss first error alert", "do_not_have_acct_or_do_not_want_to_link": "If you don’t have an __appName__ account, or if you don’t want to link to your __institutionName__ account, please click __clickText__.", "do_not_link_accounts": "Don’t link accounts", + "do_you_want_to_overwrite_them": "Do you want to overwrite them?", "document_history": "Document history", "documentation": "Documentation", "does_not_contain_or_significantly_match_your_email": "Does not contain or significantly match your email", @@ -1015,6 +1016,7 @@ "overleaf_history_system": "Overleaf History System", "overleaf_labs": "Overleaf Labs", "overview": "Overview", + "overwrite": "Overwrite", "owned_by_x": "owned by __x__", "owner": "Owner", "page_current": "Page __page__, Current Page", @@ -1444,6 +1446,7 @@ "thanks_settings_updated": "Thanks, your settings have been updated.", "the_easy_online_collab_latex_editor": "The easy to use, online, collaborative LaTeX editor", "the_file_supplied_is_of_an_unsupported_type ": "The link to open this content on Overleaf pointed to the wrong kind of file. Valid file types are .tex documents and .zip files. If this keeps happening for links on a particular site, please report this to them.", + "the_following_files_already_exist_in_this_project": "The following files already exist in this project:", "the_overleaf_student_plan_is_for_students_using_overleaf_during_their_studies": "The Overleaf Student plan is for <0>students using Overleaf during their studies", "the_project_that_contains_this_file_is_not_shared_with_you": "The project that contains this file is not shared with you", "the_requested_conversion_job_was_not_found": "The link to open this content on Overleaf specified a conversion job that could not be found. It’s possible that the job has expired and needs to be run again. If this keeps happening for links on a particular site, please report this to them.",