agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-23 17:19:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

[web] Allow OVERLEAF_NAV_TITLE and OVERLEAF_HEADER_IMAGE_URL to be used at the same time (#28445)

Browse Source 
* Remove unused navbar-website-redesign.pug

* Add custom logo and title to the navbar settings

* Update navbar-header so it handles logo+title, and without overflowing

* Revert "Add custom logo and title to the navbar settings"

This reverts commit a860fca916714fa34befa231a0b7f43fcbcc3aee.

GitOrigin-RevId: 4d87b47a5c6f64130fe2b57c57ee8f808baef271
This commit is contained in:
Antoine Clausse
2025-09-22 09:37:48 +02:00
committed by Copybot
parent d5f11f54be
commit 2eb483faab
5 changed files with 65 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
services/web/app/views/layout/navbar-marketing.pug
View File

@@ -9,16 +9,13 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(
)
.container-fluid.navbar-container
.navbar-header
if settings.nav.custom_logo
a.navbar-brand(
href='/'
aria-label=settings.appName
style='background-image:url("' + settings.nav.custom_logo + '")'
)
else if nav.title
a.navbar-title(href='/' aria-label=settings.appName) #{nav.title}
else
a.navbar-brand(href='/' aria-label=settings.appName)
a.navbar-brand(href='/' aria-label=settings.appName)
if settings.nav.custom_logo
.navbar-logo(style=`background-image:url("${settings.nav.custom_logo}")`)
if nav.title
.navbar-title #{nav.title}
if !nav.title && !settings.nav.custom_logo
.navbar-logo
- var enableUpgradeButton = projectDashboardReact && usersBestSubscription && (usersBestSubscription.type === 'free' || usersBestSubscription.type === 'standalone-ai-add-on')
if enableUpgradeButton

213
services/web/app/views/layout/navbar-website-redesign.pug
View File

@@ -1,213 +0,0 @@
nav.navbar.navbar-default.navbar-main.website-redesign-navbar(
aria-label=translate('primary')
)
.container-fluid
.navbar-header
if typeof suppressNavbarRight == 'undefined'
button#navbar-toggle-btn.navbar-toggle.collapsed(
type='button'
data-toggle='collapse'
data-target='#navbar-main-collapse'
aria-label='Toggle ' + translate('navigation')
)
i.fa.fa-bars(aria-hidden='true')
- var enableUpgradeButton = projectDashboardReact && usersBestSubscription && (usersBestSubscription.type === 'free' || usersBestSubscription.type === 'standalone-ai-add-on')
if enableUpgradeButton
a.btn.btn-primary.float-end.me-2.visible-xs(
href='/user/subscription/plans'
event-tracking='upgrade-button-click'
event-tracking-mb='true'
event-tracking-label='upgrade'
event-tracking-trigger='click'
event-segmentation={
source: 'dashboard-top',
projectDashboardReact: 'enabled',
isDashboardSidebarHidden: 'true',
isScreenWidthLessThan768px: 'true',
}
) #{translate("upgrade")}
if settings.nav.custom_logo
a.navbar-brand(
href='/'
aria-label=settings.appName
style='background-image:url("' + settings.nav.custom_logo + '")'
)
else if nav.title
a.navbar-title(href='/' aria-label=settings.appName) #{nav.title}
else
a.navbar-brand(href='/' aria-label=settings.appName)
- var canDisplayAdminMenu = hasAdminAccess()
- var canDisplayAdminRedirect = canRedirectToAdminDomain()
- var canDisplaySplitTestMenu = hasFeature('saas') && ((canDisplayAdminMenu && hasAdminCapability('view-split-test')) || (getSessionUser() && getSessionUser().staffAccess && (getSessionUser().staffAccess.splitTestMetrics || getSessionUser().staffAccess.splitTestManagement)))
- var canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu && hasAdminCapability('manage-survey', false)
- var canDisplayScriptLogMenu = hasFeature('saas') && hasAdminCapability('view-script-log', false) && canDisplayAdminMenu
if typeof suppressNavbarRight == 'undefined'
#navbar-main-collapse.navbar-collapse.collapse
ul.nav.navbar-nav.navbar-right
if canDisplayAdminMenu || canDisplayAdminRedirect || canDisplaySplitTestMenu
li.dropdown.subdued
a.dropdown-toggle(
href='#'
role='button'
aria-haspopup='true'
aria-expanded='false'
data-toggle='dropdown'
event-tracking='menu-expand'
event-tracking-mb='true'
event-tracking-trigger='click'
event-segmentation={item: 'admin', location: 'top-menu'}
)
| Admin
span.caret
ul.dropdown-menu
if canDisplayAdminMenu
li
a(href='/admin') Manage Site
li
a(href='/admin/user') Manage Users
li
a(href='/admin/project') Project URL Lookup
if canDisplayAdminRedirect
li
a(href=settings.adminUrl) Switch to Admin
if canDisplaySplitTestMenu
li
a(href='/admin/split-test') Manage Feature Flags
if canDisplaySurveyMenu
li
a(href='/admin/survey') Manage Surveys
if canDisplayScriptLogMenu
li
a(href='/admin/script-logs') View Script Logs
// loop over header_extras
each item in nav.header_extras
-
if ((item.only_when_logged_in && getSessionUser())
|| (item.only_when_logged_out && (!getSessionUser()))
|| (!item.only_when_logged_out && !item.only_when_logged_in && !item.only_content_pages)
|| (item.only_content_pages && (typeof(suppressNavContentLinks) == "undefined" || !suppressNavContentLinks))
){
var showNavItem = true
} else {
var showNavItem = false
}
if showNavItem
if item.dropdown
li.dropdown(class=item.class)
a.dropdown-toggle(
href='#'
role='button'
aria-haspopup='true'
aria-expanded='false'
data-toggle='dropdown'
event-tracking='menu-expand'
event-tracking-mb='true'
event-tracking-trigger='click'
event-segmentation={item: item.trackingKey, location: 'top-menu'}
)
| !{translate(item.text)}
span.caret
ul.dropdown-menu
each child in item.dropdown
if child.divider
li.divider
else if child.isContactUs
li
a(
data-ol-open-contact-form-modal='contact-us'
href
event-tracking='menu-click'
event-tracking-mb='true'
event-tracking-trigger='click'
event-segmentation={item: 'contact', location: 'top-menu'}
)
span
| #{translate("contact_us")}
else
li
if child.url
a(
href=child.url
class=child.class
event-tracking='menu-click'
event-tracking-mb='true'
event-tracking-trigger='click'
event-segmentation={item: child.trackingKey, location: 'top-menu'}
) !{translate(child.text)}
else
| !{translate(child.text)}
else
li(class=item.class)
if item.url
a(
href=item.url
class=item.class
event-tracking='menu-click'
event-tracking-mb='true'
event-tracking-trigger='click'
event-segmentation={item: item.trackingKey, location: 'top-menu'}
) !{translate(item.text)}
else
| !{translate(item.text)}
// logged out
if !getSessionUser()
// register link
if hasFeature('registration-page')
li.primary
a(
href='/register'
event-tracking='menu-click'
event-tracking-action='clicked'
event-tracking-trigger='click'
event-tracking-mb='true'
event-segmentation={page: currentUrl, item: 'register', location: 'top-menu'}
) #{translate('sign_up')}
// login link
li.secondary
a(
href='/login'
event-tracking='menu-click'
event-tracking-action='clicked'
event-tracking-trigger='click'
event-tracking-mb='true'
event-segmentation={page: currentUrl, item: 'login', location: 'top-menu'}
) #{translate('log_in')}
// projects link and account menu
if getSessionUser()
li.secondary
a(href='/project') #{translate('Projects')}
li.secondary.dropdown
a.dropdown-toggle(
href='#'
role='button'
aria-haspopup='true'
aria-expanded='false'
data-toggle='dropdown'
event-tracking='menu-expand'
event-tracking-mb='true'
event-tracking-trigger='click'
event-segmentation={item: 'account', location: 'top-menu'}
)
| #{translate('Account')}
span.caret
ul.dropdown-menu
li
.subdued #{getSessionUser().email}
li.divider.hidden-xs.hidden-sm
li
a(href='/user/settings') #{translate('account_settings')}
if nav.showSubscriptionLink
li
a(href='/user/subscription') #{translate('subscription')}
li.divider.hidden-xs.hidden-sm
li
form(method='POST' action='/logout')
input(name='_csrf' type='hidden' value=csrfToken)
button.btn-link.text-left.dropdown-menu-button #{translate('log_out')}

45
services/web/frontend/js/shared/components/navbar/header-logo-or-title.tsx
View File

@@ -9,33 +9,20 @@ export default function HeaderLogoOrTitle({
overleafLogo?: string
}) {
const { appName } = getMeta('ol-ExposedSettings')
if (customLogo) {
return (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href="/"
aria-label={appName}
className="navbar-brand"
style={{ backgroundImage: `url("${customLogo}")` }}
/>
)
} else if (title) {
return (
<a href="/" aria-label={appName} className="navbar-title">
{title}
</a>
)
} else {
const style = overleafLogo
? {
style: {
backgroundImage: `url("${overleafLogo}")`,
},
}
: null
return (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a href="/" aria-label={appName} className="navbar-brand" {...style} />
)
}
const logoUrl = customLogo ?? overleafLogo
return (
<a href="/" aria-label={appName} className="navbar-brand">
{(customLogo || !title) && (
<div
className="navbar-logo"
style={logoUrl ? { backgroundImage: `url("${logoUrl}")` } : {}}
/>
)}
{title && (
<div className="navbar-title">
<span>{title}</span>
</div>
)}
</a>
)
}

51
services/web/frontend/stylesheets/components/navbar.scss
View File

@@ -5,6 +5,8 @@
// Default navbar
.navbar-default {
--bs-navbar-brand-padding-y: 0;
background-color: var(--navbar-bg);
border-color: var(--navbar-border);
padding: var(--navbar-padding);
@@ -22,27 +24,48 @@
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
flex: 1 1 0;
min-width: 0;
}
.navbar-brand {
width: var(--navbar-brand-width);
height: $header-height;
padding: 0;
background: var(--navbar-brand-image-url) no-repeat left center;
background-size: contain;
}
.navbar-title {
display: inline-block;
font-size: var(--navbar-title-font-size);
color: var(--navbar-title-color);
text-decoration: none;
z-index: 15;
display: flex;
gap: var(--spacing-08);
max-width: 100%;
min-width: 0;
&:hover,
&:active,
&:focus {
color: var(--navbar-title-color-hover);
text-decoration: none;
}
.navbar-logo {
flex: 0 0 auto;
width: var(--navbar-brand-width);
height: $header-height;
padding: 0;
background: var(--navbar-brand-image-url) no-repeat left center;
background-size: contain;
}
.navbar-title {
display: inline-block;
font-size: var(--navbar-title-font-size);
color: var(--navbar-title-color);
text-decoration: none;
align-self: center;
text-overflow: ellipsis;
overflow: hidden;
&:hover,
&:active,
&:focus {
color: var(--navbar-title-color-hover);
}
}
}
@@ -130,6 +153,10 @@
.navbar-form {
border-color: var(--navbar-border);
}
.navbar-collapse:not(.show, .collapsing) {
flex: 0 0 auto; // allow navbar title to expand without overflowing
}
}
@include media-breakpoint-only(lg) {

14
services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
View File

@@ -18,18 +18,10 @@
--navbar-toggler-expanded-bg: none;
--navbar-toggler-expanded-color: var(--content-secondary);
.navbar-header > a {
position: relative;
z-index: 15;
.navbar-header .navbar-logo {
@include media-breakpoint-up(md) {
&.navbar-brand {
top: var(--spacing-05);
}
&.navbar-title {
padding-top: var(--spacing-05);
}
position: relative;
top: var(--spacing-05);
}
}