Merge pull request #28160 from overleaf/dp-integration-panel

Add reference managers to integration panel

GitOrigin-RevId: 8e838c33727c985212abd97f7c2fbecc7c439de0
This commit is contained in:
David
2025-09-04 09:57:28 +01:00
committed by Copybot
parent 77570e299a
commit 31869d628d
10 changed files with 129 additions and 83 deletions

View File

@@ -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": "",

View File

@@ -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 = (
<div className="integrations-panel-card-contents">
<div className="integrations-panel-card-icon">{icon}</div>
<div className="integrations-panel-card-inner">
<div className="integrations-panel-card-header">
<div className="integrations-panel-card-title" translate="no">
{title}
</div>
{showPaywallBadge && (
<OLBadge
prepend={<MaterialIcon type="star" />}
bg="light"
className="integrations-panel-card-premium-badge"
>
{t('premium')}
</OLBadge>
)}
</div>
<p className="integrations-panel-card-description">{description}</p>
</div>
</div>
)
if (href) {
return (
<a
href={href}
target="_blank"
rel="noreferrer"
className="integrations-panel-card-button"
>
{content}
</a>
)
}
return (
<button onClick={onClick} className="integrations-panel-card-button">
<div className="integrations-panel-card-contents">
{icon}
<div className="integrations-panel-card-inner">
<div className="integrations-panel-card-header">
<div className="integrations-panel-card-title">{title}</div>
{showPaywallBadge && (
<OLBadge
prepend={<MaterialIcon type="star" />}
bg="light"
className="integrations-panel-card-premium-badge"
>
{t('premium')}
</OLBadge>
)}
</div>
<p className="integrations-panel-card-description">{description}</p>
</div>
</div>
{content}
</button>
)
}

View File

@@ -7,7 +7,6 @@ function DropboxLogo({ size = 40 }: { size?: number }) {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="40" height="40" fill="none" />
<g clipPath="url(#clip0_10_138)">
<path
d="M10.8328 4.33334L1.6665 10.1732L10.8328 16.0131L20.0006 10.1732L10.8328 4.33334Z"

View File

@@ -1,29 +0,0 @@
function GitLogoWhite({ size = 40 }: { size?: number }) {
return (
<svg
width={size}
height={size}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 92 92"
>
<defs>
<clipPath id="a">
<path d="M0 .113h91.887V92H0Zm0 0" />
</clipPath>
</defs>
<g clipPath="url(#a)">
<path
style={{
stroke: 'none',
fillRule: 'nonzero',
fill: '#fff',
fillOpacity: 1,
}}
d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"
/>
</g>
</svg>
)
}
export default GitLogoWhite

View File

@@ -1,13 +1,12 @@
function MendeleyLogo() {
function MendeleyLogo({ size = 40 }: { size?: number }) {
return (
<svg
width="40"
height="40"
width={size}
height={size}
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="40" height="40" fill="white" />
<mask
id="mask0_10_136"
style={{ maskType: 'alpha' }}

View File

@@ -1,8 +1,8 @@
function PapersLogo() {
function PapersLogo({ size = 40 }: { size?: number }) {
return (
<svg
width="39"
height="40"
width={size * (47 / 48)}
height={size}
viewBox="0 0 47 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"

File diff suppressed because one or more lines are too long

View File

@@ -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;

View File

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

View File

@@ -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 youd 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",