agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-12 13:13:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enable themed modals

Browse Source
This commit is contained in:
yu-i-i
2026-09-27 18:11:28 +02:00
parent f0ac2f4051
commit 7bc2c7f2fa
18 changed files with 122 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/config/settings.defaults.js
+1
View File
@@ -1238,6 +1238,7 @@ module.exports = {
},
splitTestOverrides: {
'themed-modals': 'enabled',
...(process.env.ENABLE_EDITOR_TABS?.toLowerCase() === 'true' ? {
'editor-tabs': 'enabled',
} : {}),
services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export default function ShareProjectModalContent({
projectName,
}: ShareProjectModalContentProps) {
return (
<OLModal show={show} onShow={onShow} onHide={cancel} animation={animation}>
<OLModal show={show} onShow={onShow} onHide={cancel} animation={animation} themed="true">
<ShareProjectModalContentInnerWithErrorBoundary
inFlight={inFlight}
error={error}
services/web/frontend/stylesheets/components/modal.scss
+53 -3
View File
@@ -37,6 +37,18 @@
.modal-header .btn-close {
--bs-btn-close-bg: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414%27/%3e%3c/svg%3e');
}
.form-control:disabled {
background-color: var(--bg-disabled);
color: var(--content-disabled);
}
@import 'table';
.table,
.table-container {
@include dark-table;
}
}
.modal-backdrop-themed {
@@ -100,12 +112,43 @@
margin: 0;
}
}
.modal-body {
hr {
border-color: var(--border-divider-themed);
}
.form-group {
.form-label {
color: var(--content-secondary-themed);
}
.form-select:disabled {
color: var(--content-disabled-themed);
background-color: var(--bg-disabled-themed);
}
}
button.btn-link, a {
color: var(--link-ui-themed) !important;
&:hover {
color: var(--link-ui-hover-themed) !important;
}
}
.card {
--bs-card-bg: var(--bg-secondary-themed);
--bs-card-color: var(--content-primary-themed);
.card-header {
color: var(--content-primary-themed);
}
.card-body .text-muted {
color: var(--content-primary-themed) !important;
}
}
}
}
// Git bridge modal
.git-bridge-copy {
background: var(--bg-light-secondary);
color: var(--content-primary);
background: var(--bg-secondary-themed);
color: var(--content-primary-themed);
padding: var(--spacing-05);
border-radius: var(--border-radius-base);
display: flex;
@@ -114,8 +157,15 @@
align-items: center;
margin: var(--spacing-09) 0;
.copy-button {
color: var(--content-primary-themed);
&:hover {
background-color: var(--bg-tertiary-themed);
}
}
& code {
color: var(--content-primary);
color: var(--content-primary-themed);
word-break: break-word;
}
}
services/web/frontend/stylesheets/pages/editor/references-search.scss
+2 -2
View File
@@ -54,7 +54,7 @@
cursor: pointer;
}
border-bottom: 1px solid var(--border-divider);
border-bottom: 1px solid var(--border-divider-themed);
padding: var(--spacing-04);
&:last-child {
@@ -64,7 +64,7 @@
border-left: var(--spacing-02) solid transparent;
&.selected-search-result-hit {
color: var(--content-positive);
color: var(--content-positive-themed);
}
.hit-title {
services/web/frontend/stylesheets/pages/editor/share.scss
+6 -3
View File
@@ -53,7 +53,7 @@
}
.public-access-level.public-access-level-notice {
background-color: var(--neutral-10);
background-color: var(--bg-secondary-themed);
border-bottom: none;
margin-top: var(--spacing-07);
padding-top: var(--spacing-07);
@@ -62,7 +62,7 @@
.project-member,
.project-invite {
&:hover {
background-color: var(--neutral-10);
background-color: var(--bg-secondary-themed);
}
}
@@ -74,7 +74,7 @@
margin-left: auto;
.select-trigger {
color: var(--neutral-70);
color: var(--bs-modal);
border: none;
background-color: transparent;
text-align: right;
@@ -130,6 +130,9 @@
&:last-child {
margin-bottom: 0;
}
.form-text {
color: var(--content-secondary-themed);
}
}
.privileges {
services/web/frontend/stylesheets/pages/editor/tags-input.scss
+4 -1
View File
@@ -19,13 +19,15 @@
overflow: hidden;
word-wrap: break-word;
cursor: text;
background-color: var(--white);
background-color: var(--bg-primary-themed);
height: 100%;
display: flex;
flex-wrap: wrap;
.badge-tag {
margin: var(--spacing-01);
color: var(--content-primary-themed);
background-color: var(--bg-tertiary-themed) !important;
.badge-tag-content {
max-width: initial;
@@ -64,6 +66,7 @@
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
background-color: var(--bg-primary-themed);
&::placeholder {
color: $input-placeholder-color;
services/web/modules/admin-tools/frontend/js/project-list/components/modals/projects-action-modal.tsx
+1
View File
@@ -104,6 +104,7 @@ function ProjectsActionModal({
show={showModal}
onHide={handleCloseModal}
id="admin-action-project-modal"
themed="true"
backdrop="static"
>
<OLModalHeader>
services/web/modules/admin-tools/frontend/js/project-list/components/modals/transfer-project-modal.tsx
+10 -11
View File
@@ -93,8 +93,7 @@ function TransferProjectModal({
>
<p>{t('ownership_of_projects_will_be_transferred')}</p>
<ProjectsList projects={projects} projectsToDisplay={projectsToDisplay} />
<OLForm className="add-collabs">
<OLForm id="ownership-form">
<OLFormGroup>
<SelectOwnerForm
loading={!potentialOwners}
@@ -104,15 +103,15 @@ function TransferProjectModal({
/>
</OLFormGroup>
<OLFormGroup controlId="send_notification_emails_checkbox">
<OLFormCheckbox
autoComplete="off"
onChange={handleCheckboxChange}
name="sendEmails"
label={t('send_notification_emails_to_users')}
checked={sendEmails}
/>
</OLFormGroup>
<OLFormGroup controlId="send_notification_emails_checkbox">
<OLFormCheckbox
autoComplete="off"
onChange={handleCheckboxChange}
name="sendEmails"
label={t('send_notification_emails_to_users')}
checked={sendEmails}
/>
</OLFormGroup>
</OLForm>
</ProjectsActionModal>
)
services/web/modules/admin-tools/frontend/js/user-list/components/create-account-button/create-account-modal.tsx
+1
View File
@@ -13,6 +13,7 @@ function CreateAccountModal({ onHide }: CreateAccountModalProps) {
onHide={onHide}
id="blank-user-modal"
backdrop="static"
themed="true"
>
<ModalContentNewUserForm handleCloseModal={onHide} />
</OLModal>
services/web/modules/admin-tools/frontend/js/user-list/components/modals/update-user-modal.tsx
-1
View File
@@ -4,7 +4,6 @@ import getMeta from '@/utils/meta'
import UsersActionModal from './users-action-modal'
import UsersList from './users-list'
import Notification from '@/shared/components/notification'
import OLForm from '@/shared/components/ol/ol-form'
import OLFormLabel from '@/shared/components/ol/ol-form-label'
import OLFormControl from '@/shared/components/ol/ol-form-control'
import OLFormGroup from '@/shared/components/ol/ol-form-group'
services/web/modules/admin-tools/frontend/js/user-list/components/modals/users-action-modal.tsx
+7 -1
View File
@@ -4,6 +4,7 @@ import * as eventTracking from '@/infrastructure/event-tracking'
import { isSmallDevice } from '@/infrastructure/event-tracking'
import { getUserFacingMessage } from '@/infrastructure/fetch-json'
import useIsMounted from '@/shared/hooks/use-is-mounted'
import OLForm from '@/shared/components/ol/ol-form'
import OLButton from '@/shared/components/ol/ol-button'
import {
OLModal,
@@ -97,12 +98,17 @@ function UsersActionModal({
onHide={handleCloseModal}
id="action-user-modal"
backdrop="static"
themed="true"
>
<OLModalHeader>
<OLModalTitle>{title}</OLModalTitle>
</OLModalHeader>
<OLModalBody>
<OLForm
id="action-user-form"
>
{children}
</OLForm>
{!isProcessing &&
errors.length > 0 &&
errors.map((error, i) => (
@@ -122,8 +128,8 @@ function UsersActionModal({
</OLButton>
)}
<OLButton
variant={variant}
onClick={() => handleActionForUsers(users, options)}
variant={variant}
disabled={isProcessing || actionIsDisabled}
>
{actionLabel}
services/web/modules/git-bridge/frontend/js/card/components/git-modal.tsx
+1
View File
@@ -32,6 +32,7 @@ export default function GitModal({
id="git-sync-modal"
backdrop="static"
size="lg"
themed="true"
>
<OLModalHeader closeButton>
services/web/modules/github-sync/frontend/js/components/import-from-github-modal-wrapper.tsx
+1
View File
@@ -211,6 +211,7 @@ export default function ImportFromGitHubModal({ onHide }: { onHide: () => void }
size="lg"
onHide={onHide}
backdrop="static"
themed="true"
>
<ImportFromGitHubModalContent handleHide={onHide} />
</OLModal>
services/web/modules/github-sync/frontend/js/components/modals/git-sync-modal.tsx
+1 -1
View File
@@ -128,7 +128,7 @@ const {
}, [show, modalStatus, projectId, runAsyncConn, runAsync])
return (
<OLModal show={show} onHide={handleHide} backdrop="static">
<OLModal show={show} onHide={handleHide} backdrop="static" themed="true">
<OLModalHeader closeButton>
<OLModalTitle>{t('sync_with_github')}</OLModalTitle>
</OLModalHeader>
services/web/modules/reference-picker/frontend/components/reference-picker-modal.tsx
+1 -1
View File
@@ -299,7 +299,7 @@ const scrollToReference = useCallback((key: string) => {
}, [focusArea, focusedIndex])
return (
<OLModal show={show} onHide={onClose} size="lg">
<OLModal show={show} onHide={onClose} size="lg" themed="true">
<OLModalHeader>
<OLModalTitle>{t('references_picker_title')}</OLModalTitle>
</OLModalHeader>
services/web/modules/reference-picker/frontend/styles/reference-picker.scss
+29 -6
View File
@@ -1,3 +1,21 @@
:root {
--badge-bg-color-existing: var(--ds-color-green-900);
--badge-bg-color-nonexistent: var(--ds-color-red-950);
--badge-bg-color-existing-hover: var(--ds-color-green-800);
--badge-close-color: var(--content-primary-dark);
--badge-close-bg-color-hover: var(--bg-dark-tertiary);
--search-result-at-focus-bg-color: var(--ds-color-teal-950);
}
@include theme('light') {
--badge-bg-color-existing: var(--ds-color-green-50);
--badge-bg-color-nonexistent: var(--ds-color-red-50);
--badge-bg-color-existing-hover: var(--ds-color-green-100);
--badge-close-color: var(--content-primary);
--badge-close-bg-color-hover: var(--bg-light-tertiary);
--search-result-at-focus-bg-color: var(--ds-color-teal-50);
}
.references-search-modal {
.selected-key-tags {
position: relative;
@@ -11,26 +29,31 @@
font-size: var(--font-size-02);
margin-top: -10px;
margin-bottom: 8px;
box-shadow: 0 1px 0 var(--ds-color-neutral-100);
box-shadow: 0 1px 0 var(--border-divider-themed);
padding-bottom: 6px;
}
.selected-key-tags .existing-key-tag .badge-tag {
background-color: var(--ds-color-green-50) !important;
background-color: var(--badge-bg-color-existing) !important;
}
.selected-key-tags .nonexistent-key-tag .badge-tag {
background-color: var(--ds-color-red-50) !important;
background-color: var(--badge-bg-color-nonexistent) !important;
}
.existing-key-tag .badge-tag-content-btn:hover {
background-color: var(--ds-color-green-100);
background-color: var(--badge-bg-color-existing-hover);
}
.nonexistent-key-tag .badge-tag-content-btn:hover {
background-color: transparent;
}
.badge-close {
color: var(--badge-close-color);
}
.badge-close:hover,
.badge-close:focus {
background-color: var(--ds-color-neutral-100);
background-color: var(--badge-close-bg-color-hover);
}
.search-results {
.search-results-scroll-container {
max-height: calc(100vh - 330px);
@@ -38,7 +61,7 @@
}
.search-result-hit {
&:focus {
background: var(--ds-color-yellow-50);
background: var(--search-result-at-focus-bg-color);
outline: none;
}
}
services/web/modules/zotero/frontend/js/components/zotero-link-info-modal.tsx
+2 -4
View File
@@ -43,8 +43,7 @@ const ZoteroLinkInfoModal = ({ show, isError, handleHide }: ZoteroLinkInfoModalP
}, [show])
return (
<>
<OLModal show={show} onHide={handleHide} backdrop="static">
<OLModal show={show} onHide={handleHide} backdrop="static" themed="true">
<OLModalHeader closeButton>
<OLModalTitle>{t('zotero_integration')}</OLModalTitle>
</OLModalHeader>
@@ -101,8 +100,7 @@ const ZoteroLinkInfoModal = ({ show, isError, handleHide }: ZoteroLinkInfoModalP
{t('close')}
</OLButton>
</OLModalFooter>
</OLModal>
</>
</OLModal>
)
}
services/web/modules/zotero/frontend/js/components/zotero-widget.tsx
+1
View File
@@ -143,6 +143,7 @@ export const ZoteroWidget = function ZoteroWidget() {
show={showUnlinkModal}
onHide={() => setShowUnlinkModal(false)}
backdrop="static"
themed="true"
>
<OLModalHeader>
<OLModalTitle>