From 31869d628d78e4d4dfe5f4f0534efa52b3e53153 Mon Sep 17 00:00:00 2001 From: David <33458145+davidmcpowell@users.noreply.github.com> Date: Thu, 4 Sep 2025 09:57:28 +0100 Subject: [PATCH] Merge pull request #28160 from overleaf/dp-integration-panel Add reference managers to integration panel GitOrigin-RevId: 8e838c33727c985212abd97f7c2fbecc7c439de0 --- .../web/frontend/extracted-translations.json | 10 ++++ .../integrations-panel/integration-card.tsx | 59 +++++++++++++------ .../frontend/js/shared/svgs/dropbox-logo.tsx | 1 - .../js/shared/svgs/git-logo-white.tsx | 29 --------- .../frontend/js/shared/svgs/mendeley-logo.tsx | 7 +-- .../frontend/js/shared/svgs/papers-logo.tsx | 6 +- .../frontend/js/shared/svgs/zotero-logo.tsx | 44 ++++++-------- .../components/integrations-panel.scss | 17 ++++++ .../pages/editor/references-search.scss | 32 ++++++++++ services/web/locales/en.json | 7 +++ 10 files changed, 129 insertions(+), 83 deletions(-) delete mode 100644 services/web/frontend/js/shared/svgs/git-logo-white.tsx diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 0d3d4d1d52..19e72d7c42 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -45,6 +45,7 @@ "accept_terms_and_conditions": "", "accepted_invite": "", "access_all_premium_features": "", + "access_all_premium_features_including_more_collaborators_real_time_track_changes_and_a_longer_compile_time": "", "access_denied": "", "access_edit_your_projects": "", "access_levels_changed": "", @@ -259,6 +260,9 @@ "choose_how_you_search_your_references": "", "choose_which_experiments": "", "citation": "", + "cite_a_reference_from_your_reference_manager_to_automatically_add_it_to_your_bib_file": "", + "cite_directly_or_import_references": "", + "cite_faster": "", "clear_cached_files": "", "clear_search": "", "click_here_to_view_sl_in_lng": "", @@ -422,6 +426,7 @@ "disconnected": "", "discount": "", "discount_of": "", + "discover_the_fastest_easiest_way_to_cite_in_app": "", "discover_the_fastest_way_to_search_and_cite": "", "display": "", "display_deleted_user": "", @@ -962,6 +967,7 @@ "link_to_mendeley": "", "link_to_papers": "", "link_to_zotero": "", + "link_to_zotero_mendeley_papers_to_see_search_results_from_your_libraries_without_importing_files": "", "linked_accounts": "", "linked_collabratec_description": "", "linked_file": "", @@ -1031,6 +1037,7 @@ "maybe_later": "", "members_added": "", "members_management": "", + "mendeley": "", "mendeley_dynamic_sync_description": "", "mendeley_groups_loading_error": "", "mendeley_groups_relink": "", @@ -1191,6 +1198,7 @@ "owner": "", "page_current": "", "pagination_navigation": "", + "papers": "", "papers_dynamic_sync_description": "", "papers_groups_loading_error": "", "papers_groups_relink": "", @@ -1492,6 +1500,7 @@ "search_all_project_files": "", "search_bib_files": "", "search_by_author_journal_title_and_more_link_to_zotero_mendeley_papers": "", + "search_by_citation_key_author_journal_title_year_and_date": "", "search_by_citekey_author_year_title": "", "search_command_find": "", "search_command_replace": "", @@ -2230,6 +2239,7 @@ "zoom_in": "", "zoom_out": "", "zoom_to": "", + "zotero": "", "zotero_dynamic_sync_description": "", "zotero_groups_loading_error": "", "zotero_groups_relink": "", diff --git a/services/web/frontend/js/features/ide-redesign/components/integrations-panel/integration-card.tsx b/services/web/frontend/js/features/ide-redesign/components/integrations-panel/integration-card.tsx index 81490781a2..fb0d64806f 100644 --- a/services/web/frontend/js/features/ide-redesign/components/integrations-panel/integration-card.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/integrations-panel/integration-card.tsx @@ -3,13 +3,15 @@ import MaterialIcon from '@/shared/components/material-icon' import { useTranslation } from 'react-i18next' export default function IntegrationCard({ + href, onClick, title, description, icon, showPaywallBadge, }: { - onClick: () => void + href?: string + onClick?: () => void title: string description: string icon: React.ReactNode @@ -17,26 +19,45 @@ export default function IntegrationCard({ }) { const { t } = useTranslation() + const content = ( +
+
{icon}
+
+
+
+ {title} +
+ {showPaywallBadge && ( + } + bg="light" + className="integrations-panel-card-premium-badge" + > + {t('premium')} + + )} +
+

{description}

+
+
+ ) + + if (href) { + return ( + + {content} + + ) + } + return ( ) } diff --git a/services/web/frontend/js/shared/svgs/dropbox-logo.tsx b/services/web/frontend/js/shared/svgs/dropbox-logo.tsx index e95a443d26..d944a2c9a1 100644 --- a/services/web/frontend/js/shared/svgs/dropbox-logo.tsx +++ b/services/web/frontend/js/shared/svgs/dropbox-logo.tsx @@ -7,7 +7,6 @@ function DropboxLogo({ size = 40 }: { size?: number }) { fill="none" xmlns="http://www.w3.org/2000/svg" > - - - - - - - - - - - ) -} - -export default GitLogoWhite diff --git a/services/web/frontend/js/shared/svgs/mendeley-logo.tsx b/services/web/frontend/js/shared/svgs/mendeley-logo.tsx index 8d16656115..4151fb14ab 100644 --- a/services/web/frontend/js/shared/svgs/mendeley-logo.tsx +++ b/services/web/frontend/js/shared/svgs/mendeley-logo.tsx @@ -1,13 +1,12 @@ -function MendeleyLogo() { +function MendeleyLogo({ size = 40 }: { size?: number }) { return ( - - - - - - - + + - + ) } diff --git a/services/web/frontend/stylesheets/components/integrations-panel.scss b/services/web/frontend/stylesheets/components/integrations-panel.scss index 2d72e53461..9b6510b8ab 100644 --- a/services/web/frontend/stylesheets/components/integrations-panel.scss +++ b/services/web/frontend/stylesheets/components/integrations-panel.scss @@ -27,6 +27,8 @@ .integrations-panel-card-button { all: unset; + display: block; + cursor: pointer; background-color: var(--integrations-panel-card-button-background); width: 100%; @@ -34,6 +36,10 @@ background-color: var( --integrations-panel-card-button-hover-background ) !important; + + .integrations-panel-card-icon { + background-color: var(--bg-light-secondary); + } } } @@ -45,6 +51,17 @@ border-bottom: 1px solid var(--integrations-panel-card-border); } +.integrations-panel-card-icon { + background-color: var(--bg-light-primary); + color: var(--content-primary); + border-radius: var(--border-radius-medium); + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + .integrations-panel-card-header { display: flex; justify-content: space-between; diff --git a/services/web/frontend/stylesheets/pages/editor/references-search.scss b/services/web/frontend/stylesheets/pages/editor/references-search.scss index 6a2fff33c6..461c078b38 100644 --- a/services/web/frontend/stylesheets/pages/editor/references-search.scss +++ b/services/web/frontend/stylesheets/pages/editor/references-search.scss @@ -74,3 +74,35 @@ } } } + +.write-and-cite-pros-list-wrapper { + max-width: 450px; + margin: 0 auto; +} + +.write-and-cite-pros-list li { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: var(--spacing-03); + font-size: var(--font-size-03); +} + +.write-and-cite-pros-check-icon { + align-self: start; + + & > span { + vertical-align: middle; + } + + flex: 0 0 auto; +} + +.write-and-cite-pro { + flex: 0 1 100%; +} + +.write-and-cite-upgrade-prompt-header { + font-size: var(--font-size-05); +} diff --git a/services/web/locales/en.json b/services/web/locales/en.json index c1ee256e31..fe9dbf23ad 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -49,6 +49,7 @@ "accepted_invite": "Accepted invite", "accepting_invite_as": "You are accepting this invite as", "access_all_premium_features": "Access all premium features, including more collaborators, full project history, and a longer compile time.", + "access_all_premium_features_including_more_collaborators_real_time_track_changes_and_a_longer_compile_time": "Access all premium features, including more collaborators, real-time track changes, and a longer compile time.", "access_denied": "Access Denied", "access_edit_your_projects": "Access and edit your projects", "access_levels_changed": "Access levels changed", @@ -331,6 +332,9 @@ "choose_which_experiments": "Choose which experiments you’d like to try.", "choose_your_plan": "Choose your plan", "citation": "Citation", + "cite_a_reference_from_your_reference_manager_to_automatically_add_it_to_your_bib_file": "Cite a reference from your reference manager to automatically add it to your .bib file", + "cite_directly_or_import_references": "Cite directly or import references", + "cite_faster": "Cite faster", "city": "City", "clear_cached_files": "Clear cached files", "clear_search": "clear search", @@ -549,6 +553,7 @@ "discount": "Discount", "discount_of": "Discount of __amount__", "discover_latex_templates_and_examples": "Discover LaTeX templates and examples to help with everything from writing a journal article to using a specific LaTeX package.", + "discover_the_fastest_easiest_way_to_cite_in_app": "Discover the fastest, easiest way to cite in __appName__", "discover_the_fastest_way_to_search_and_cite": "Discover the fastest way to search and cite", "discover_why_over_people_worldwide_trust_overleaf": "Discover why over __count__ million people worldwide trust Overleaf with their work.", "display": "Display", @@ -1245,6 +1250,7 @@ "link_to_mendeley": "Link to Mendeley", "link_to_papers": "Link to Papers", "link_to_zotero": "Link to Zotero", + "link_to_zotero_mendeley_papers_to_see_search_results_from_your_libraries_without_importing_files": "Link to Zotero, Mendeley, and Papers to see search results from your libraries without importing files", "link_your_accounts": "Link your accounts", "linked_accounts": "Linked accounts", "linked_collabratec_description": "Use Collabratec to manage your __appName__ projects.", @@ -1955,6 +1961,7 @@ "search_all_project_files": "Search all project files", "search_bib_files": "Search by author, title, year", "search_by_author_journal_title_and_more_link_to_zotero_mendeley_papers": "Search by author, journal, title, and more. Link to Zotero, Mendeley, or Papers to search and add references from your libraries directly in your project.", + "search_by_citation_key_author_journal_title_year_and_date": "Search by citation key, author, journal, title, year, and date.", "search_by_citekey_author_year_title": "Search by citation key, author, title, year", "search_command_find": "Find", "search_command_replace": "Replace",