Merge pull request #32280 from overleaf/mj-editor-redesign-tutorial
[web] Tear down new editor intro GitOrigin-RevId: 40e1abef5983c3ab2c877520d0e8f92b82b834e5
This commit is contained in:
committed by
Copybot
parent
6377624d25
commit
c9c129af40
@@ -258,7 +258,6 @@
|
||||
"change": "",
|
||||
"change_currency": "",
|
||||
"change_email_address": "",
|
||||
"change_how_you_see_the_editor": "",
|
||||
"change_language": "",
|
||||
"change_owner": "",
|
||||
"change_password": "",
|
||||
@@ -606,7 +605,6 @@
|
||||
"expires": "",
|
||||
"expires_in_days": "",
|
||||
"expires_on": "",
|
||||
"explore_what_s_new": "",
|
||||
"export_csv": "",
|
||||
"export_project_to_github": "",
|
||||
"failed_to_consent_to_workbench_terms": "",
|
||||
@@ -643,13 +641,11 @@
|
||||
"filter_projects": "",
|
||||
"find": "",
|
||||
"find_and_check_citations": "",
|
||||
"find_and_fix_errors_faster": "",
|
||||
"find_out_more": "",
|
||||
"find_out_more_about_institution_login": "",
|
||||
"find_out_more_about_the_file_outline": "",
|
||||
"find_out_more_nt": "",
|
||||
"finding_a_fix": "",
|
||||
"finish": "",
|
||||
"first_name": "",
|
||||
"fit_to_height": "",
|
||||
"fit_to_width": "",
|
||||
@@ -778,7 +774,6 @@
|
||||
"good_news_you_already_purchased_this_add_on": "",
|
||||
"good_news_you_are_already_receiving_this_add_on_via_writefull": "",
|
||||
"got_it": "",
|
||||
"got_questions": "",
|
||||
"group_admin": "",
|
||||
"group_audit_logs": "",
|
||||
"group_has_no_licenses_available_error": "",
|
||||
@@ -930,7 +925,6 @@
|
||||
"integrations": "",
|
||||
"integrations_like_github": "",
|
||||
"interested_in_cheaper_personal_plan": "",
|
||||
"introducing_overleafs_new_look": "",
|
||||
"invalid_confirmation_code": "",
|
||||
"invalid_email": "",
|
||||
"invalid_file_name": "",
|
||||
@@ -1173,7 +1167,6 @@
|
||||
"neither_agree_nor_disagree": "",
|
||||
"new_compile_domain_notice": "",
|
||||
"new_compiles_in_this_project_will_automatically_use_the_newest_version": "",
|
||||
"new_error_logs_make_it_easier_to_find_whats_wrong": "",
|
||||
"new_file": "",
|
||||
"new_folder": "",
|
||||
"new_name": "",
|
||||
@@ -1457,7 +1450,6 @@
|
||||
"reactivating": "",
|
||||
"read_lines_from_path": "",
|
||||
"read_more": "",
|
||||
"read_more_about_the_new_editor_or_explore_our_documentation_for_tips_and_tricks": "",
|
||||
"read_only_dropbox_sync_message": "",
|
||||
"read_only_token": "",
|
||||
"read_write_token": "",
|
||||
@@ -1717,7 +1709,6 @@
|
||||
"sidebar": "",
|
||||
"sign_up": "",
|
||||
"simple_search_mode": "",
|
||||
"simplified_working_starts_here": "",
|
||||
"single_sign_on_sso": "",
|
||||
"size": "",
|
||||
"skip": "",
|
||||
@@ -1852,9 +1843,7 @@
|
||||
"sure_you_want_to_change_plan": "",
|
||||
"sure_you_want_to_delete": "",
|
||||
"sure_you_want_to_leave_group": "",
|
||||
"switch_between_dark_and_light_mode": "",
|
||||
"switch_compile_mode_for_faster_draft_compilation": "",
|
||||
"switch_easily_between_your_files_comments_track_changes_and_more": "",
|
||||
"switch_to_editor": "",
|
||||
"switch_to_pdf": "",
|
||||
"switch_to_standard_plan": "",
|
||||
@@ -1914,7 +1903,6 @@
|
||||
"the_home_of_research_writing": "",
|
||||
"the_latex_engine_used_for_compiling": "",
|
||||
"the_link_may_be_broken_or_you_may_not_have_access_rights": "",
|
||||
"the_new_and_improved_overleaf_editor_design": "",
|
||||
"the_next_payment_will_be_collected_on": "",
|
||||
"the_original_text_has_changed": "",
|
||||
"the_overleaf_color_scheme": "",
|
||||
@@ -2252,7 +2240,6 @@
|
||||
"were_performing_maintenance": "",
|
||||
"weve_given_your_dashboard_a_sleek_new_dark_theme_for_more_comfortable_late_night_research_prefer_the_light_switch_back_anytime_right_here": "",
|
||||
"weve_hit_a_problem_try_starting_a_new_chat": "",
|
||||
"weve_made_it_easier_to_find_and_use_the_tools_you_need_today": "",
|
||||
"weve_matched_your_dashboard_theme_to_your_editor_preferences_but_you_can_change_that_here_anytime": "",
|
||||
"weve_set_your_dashboard_to_dark_mode_to_help_you_stay_focused_if_youre_a_fan_of_a_lighter_look_you_can_easily_switch_themes_here": "",
|
||||
"what_did_you_find_most_helpful": "",
|
||||
|
||||
@@ -2,7 +2,6 @@ import { memo } from 'react'
|
||||
import ForceDisconnected from '@/features/ide-react/components/modals/force-disconnected'
|
||||
import { UnsavedDocs } from '@/features/ide-react/components/unsaved-docs/unsaved-docs'
|
||||
import SystemMessages from '@/shared/components/system-messages'
|
||||
import NewEditorOptOutIntroModal from '@/features/ide-redesign/components/new-editor-opt-out-intro-modal'
|
||||
import ViewOnlyAccessModal from '@/features/share-project-modal/components/view-only-access-modal'
|
||||
|
||||
export const Modals = memo(() => {
|
||||
@@ -11,7 +10,6 @@ export const Modals = memo(() => {
|
||||
<ForceDisconnected />
|
||||
<UnsavedDocs />
|
||||
<SystemMessages />
|
||||
<NewEditorOptOutIntroModal />
|
||||
<ViewOnlyAccessModal />
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { FC, RefObject, useCallback, useEffect, useMemo, useRef } from 'react'
|
||||
import { FC, RefObject, useCallback, useEffect, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Nav, TabContainer } from 'react-bootstrap'
|
||||
import { useLayoutContext } from '@/shared/context/layout-context'
|
||||
@@ -30,10 +30,7 @@ import RailResizeHandle from './rail-resize-handle'
|
||||
import RailModals from './rail-modals'
|
||||
import RailOverflowDropdown from './rail-overflow-dropdown'
|
||||
import useRailOverflow from '@/features/ide-react/hooks/use-rail-overflow'
|
||||
import EditorTourRailTooltip from '@/features/ide-redesign/components/editor-tour/editor-tour-rail-tooltip'
|
||||
import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
|
||||
import EditorTourThemeTooltip from '@/features/ide-redesign/components/editor-tour/editor-tour-theme-tooltip'
|
||||
import EditorTourGotQuestionsTooltip from '@/features/ide-redesign/components/editor-tour/editor-tour-got-questions'
|
||||
import { shouldIncludeElement } from '@/features/ide-react/util/rail-utils'
|
||||
import { useEditorContext } from '@/shared/context/editor-context'
|
||||
import useEventListener from '@/shared/hooks/use-event-listener'
|
||||
@@ -75,9 +72,6 @@ export const RailLayout = () => {
|
||||
|
||||
const isHistoryView = view === 'history'
|
||||
|
||||
const fileTreeRef = useRef<HTMLButtonElement>(null)
|
||||
const settingsRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
useEventListener(
|
||||
'ui:select-rail-tab',
|
||||
useCallback(
|
||||
@@ -105,7 +99,6 @@ export const RailLayout = () => {
|
||||
// NOTE: We always need to mount the file tree on first load
|
||||
// since it is responsible for opening the initial document.
|
||||
mountOnFirstLoad: true,
|
||||
ref: fileTreeRef,
|
||||
},
|
||||
{
|
||||
key: 'full-project-search',
|
||||
@@ -167,7 +160,6 @@ export const RailLayout = () => {
|
||||
sendEvent('rail-click', { tab: 'settings' })
|
||||
setLeftMenuShown(true)
|
||||
},
|
||||
ref: settingsRef,
|
||||
},
|
||||
],
|
||||
[setLeftMenuShown, t, sendEvent]
|
||||
@@ -305,9 +297,6 @@ export const RailLayout = () => {
|
||||
</nav>
|
||||
</Nav>
|
||||
</nav>
|
||||
<EditorTourRailTooltip target={fileTreeRef.current} />
|
||||
<EditorTourThemeTooltip target={settingsRef.current} />
|
||||
<EditorTourGotQuestionsTooltip target={settingsRef.current} />
|
||||
{moduleRailPopovers
|
||||
.filter(shouldIncludeElement)
|
||||
.map(({ key, Component, ref }) => (
|
||||
|
||||
@@ -29,7 +29,6 @@ import { UserProvider } from '@/shared/context/user-context'
|
||||
import { UserFeaturesProvider } from '@/shared/context/user-features-context'
|
||||
import { UserSettingsProvider } from '@/shared/context/user-settings-context'
|
||||
import { CommandRegistryProvider } from './command-registry-context'
|
||||
import { NewEditorTourProvider } from '@/features/ide-redesign/contexts/new-editor-tour-context'
|
||||
import { EditorSelectionProvider } from '@/shared/context/editor-selection-context'
|
||||
import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
|
||||
import { TutorialProvider } from '@/shared/context/tutorial-context'
|
||||
@@ -75,7 +74,6 @@ export const ReactContextRoot: FC<
|
||||
UserSettingsProvider,
|
||||
CommandRegistryProvider,
|
||||
UserFeaturesProvider,
|
||||
NewEditorTourProvider,
|
||||
EditorSelectionProvider,
|
||||
TutorialProvider,
|
||||
...providers,
|
||||
@@ -114,35 +112,33 @@ export const ReactContextRoot: FC<
|
||||
<Providers.PermissionsProvider>
|
||||
<Providers.RailProvider>
|
||||
<Providers.LayoutProvider>
|
||||
<Providers.NewEditorTourProvider>
|
||||
<Providers.ProjectSettingsProvider>
|
||||
<Providers.EditorManagerProvider>
|
||||
<Providers.ReferencesProvider>
|
||||
<Providers.LocalCompileProvider>
|
||||
<Providers.DetachCompileProvider>
|
||||
<Providers.ChatProvider>
|
||||
<Providers.FileTreeOpenProvider>
|
||||
<Providers.OnlineUsersProvider>
|
||||
<Providers.MetadataProvider>
|
||||
<Providers.OutlineProvider>
|
||||
<Providers.CommandRegistryProvider>
|
||||
<Providers.EditorSelectionProvider>
|
||||
{
|
||||
childrenWrappedWithDynamicProviders
|
||||
}
|
||||
</Providers.EditorSelectionProvider>
|
||||
</Providers.CommandRegistryProvider>
|
||||
</Providers.OutlineProvider>
|
||||
</Providers.MetadataProvider>
|
||||
</Providers.OnlineUsersProvider>
|
||||
</Providers.FileTreeOpenProvider>
|
||||
</Providers.ChatProvider>
|
||||
</Providers.DetachCompileProvider>
|
||||
</Providers.LocalCompileProvider>
|
||||
</Providers.ReferencesProvider>
|
||||
</Providers.EditorManagerProvider>
|
||||
</Providers.ProjectSettingsProvider>
|
||||
</Providers.NewEditorTourProvider>
|
||||
<Providers.ProjectSettingsProvider>
|
||||
<Providers.EditorManagerProvider>
|
||||
<Providers.ReferencesProvider>
|
||||
<Providers.LocalCompileProvider>
|
||||
<Providers.DetachCompileProvider>
|
||||
<Providers.ChatProvider>
|
||||
<Providers.FileTreeOpenProvider>
|
||||
<Providers.OnlineUsersProvider>
|
||||
<Providers.MetadataProvider>
|
||||
<Providers.OutlineProvider>
|
||||
<Providers.CommandRegistryProvider>
|
||||
<Providers.EditorSelectionProvider>
|
||||
{
|
||||
childrenWrappedWithDynamicProviders
|
||||
}
|
||||
</Providers.EditorSelectionProvider>
|
||||
</Providers.CommandRegistryProvider>
|
||||
</Providers.OutlineProvider>
|
||||
</Providers.MetadataProvider>
|
||||
</Providers.OnlineUsersProvider>
|
||||
</Providers.FileTreeOpenProvider>
|
||||
</Providers.ChatProvider>
|
||||
</Providers.DetachCompileProvider>
|
||||
</Providers.LocalCompileProvider>
|
||||
</Providers.ReferencesProvider>
|
||||
</Providers.EditorManagerProvider>
|
||||
</Providers.ProjectSettingsProvider>
|
||||
</Providers.LayoutProvider>
|
||||
</Providers.RailProvider>
|
||||
</Providers.PermissionsProvider>
|
||||
|
||||
-38
@@ -1,38 +0,0 @@
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import EditorTourTooltip from './editor-tour-tooltip'
|
||||
|
||||
export default function EditorTourGotQuestionsTooltip({
|
||||
target,
|
||||
}: {
|
||||
target: HTMLElement | null
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<EditorTourTooltip
|
||||
target={target}
|
||||
placement="right-end"
|
||||
stage="got-questions"
|
||||
header={t('got_questions')}
|
||||
>
|
||||
<Trans
|
||||
i18nKey="read_more_about_the_new_editor_or_explore_our_documentation_for_tips_and_tricks"
|
||||
components={[
|
||||
/* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
|
||||
<a
|
||||
href="https://www.overleaf.com/blog/introducing-overleafs-new-look"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
key="link"
|
||||
/>,
|
||||
/* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
|
||||
<a
|
||||
href="https://docs.overleaf.com/getting-started/how-do-i-use-overleaf/redesigned-overleaf-editor"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
key="link"
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
</EditorTourTooltip>
|
||||
)
|
||||
}
|
||||
-21
@@ -1,21 +0,0 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import EditorTourTooltip from './editor-tour-tooltip'
|
||||
|
||||
export default function EditorTourLogsTooltip({
|
||||
target,
|
||||
}: {
|
||||
target: HTMLElement | null
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<EditorTourTooltip
|
||||
target={target}
|
||||
placement="bottom"
|
||||
stage="logs"
|
||||
header={t('find_and_fix_errors_faster')}
|
||||
>
|
||||
{t('new_error_logs_make_it_easier_to_find_whats_wrong')}
|
||||
</EditorTourTooltip>
|
||||
)
|
||||
}
|
||||
-21
@@ -1,21 +0,0 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import EditorTourTooltip from './editor-tour-tooltip'
|
||||
|
||||
export default function EditorTourRailTooltip({
|
||||
target,
|
||||
}: {
|
||||
target: HTMLElement | null
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<EditorTourTooltip
|
||||
target={target}
|
||||
placement="right-start"
|
||||
stage="rail"
|
||||
header={t('simplified_working_starts_here')}
|
||||
>
|
||||
{t('switch_easily_between_your_files_comments_track_changes_and_more')}
|
||||
</EditorTourTooltip>
|
||||
)
|
||||
}
|
||||
-24
@@ -1,24 +0,0 @@
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import EditorTourTooltip from './editor-tour-tooltip'
|
||||
|
||||
export default function EditorTourThemeTooltip({
|
||||
target,
|
||||
}: {
|
||||
target: HTMLElement | null
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<EditorTourTooltip
|
||||
target={target}
|
||||
placement="right-end"
|
||||
stage="theme"
|
||||
header={t('switch_between_dark_and_light_mode')}
|
||||
>
|
||||
<Trans
|
||||
i18nKey="change_how_you_see_the_editor"
|
||||
components={{ strong: <strong /> }}
|
||||
/>
|
||||
</EditorTourTooltip>
|
||||
)
|
||||
}
|
||||
-77
@@ -1,77 +0,0 @@
|
||||
import { Overlay, OverlayProps, Popover } from 'react-bootstrap'
|
||||
import {
|
||||
NewEditorTourStage,
|
||||
useNewEditorTourContext,
|
||||
} from '../../contexts/new-editor-tour-context'
|
||||
import Close from '@/shared/components/close'
|
||||
import OLButton from '@/shared/components/ol/ol-button'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useEffect } from 'react'
|
||||
import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
|
||||
|
||||
export default function EditorTourTooltip({
|
||||
children,
|
||||
target,
|
||||
header,
|
||||
stage,
|
||||
placement,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
target: HTMLElement | null
|
||||
header: string
|
||||
stage: NewEditorTourStage
|
||||
placement?: OverlayProps['placement']
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
shouldShowTourStage,
|
||||
dismissTour,
|
||||
goToNextStage,
|
||||
stageNumber,
|
||||
totalStages,
|
||||
finishTour,
|
||||
} = useNewEditorTourContext()
|
||||
const { sendEvent } = useEditorAnalytics()
|
||||
|
||||
const show = shouldShowTourStage(stage)
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
sendEvent('new-editor-tour-shown', { stage: stageNumber })
|
||||
}
|
||||
}, [show, stageNumber, sendEvent])
|
||||
|
||||
const isFinalStage = stageNumber === totalStages
|
||||
|
||||
if (!show) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Overlay show placement={placement} target={target} onHide={dismissTour}>
|
||||
<Popover className="editor-tour-tooltip">
|
||||
<Popover.Header>
|
||||
{header}
|
||||
<Close variant="dark" onDismiss={dismissTour} />
|
||||
</Popover.Header>
|
||||
<Popover.Body>
|
||||
{children}
|
||||
<div className="editor-tour-tooltip-footer">
|
||||
<div>
|
||||
{stageNumber}/{totalStages}
|
||||
</div>
|
||||
{isFinalStage ? (
|
||||
<OLButton onClick={finishTour} variant="link">
|
||||
{t('finish')}
|
||||
</OLButton>
|
||||
) : (
|
||||
<OLButton onClick={goToNextStage} variant="link">
|
||||
{t('next')}
|
||||
</OLButton>
|
||||
)}
|
||||
</div>
|
||||
</Popover.Body>
|
||||
</Popover>
|
||||
</Overlay>
|
||||
)
|
||||
}
|
||||
-76
@@ -1,76 +0,0 @@
|
||||
import {
|
||||
OLModal,
|
||||
OLModalBody,
|
||||
OLModalFooter,
|
||||
OLModalHeader,
|
||||
OLModalTitle,
|
||||
} from '@/shared/components/ol/ol-modal'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import useTutorial from '@/shared/hooks/promotions/use-tutorial'
|
||||
import OLButton from '@/shared/components/ol/ol-button'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useIsNewToNewEditor } from '../utils/new-editor-utils'
|
||||
import { useNewEditorTourContext } from '../contexts/new-editor-tour-context'
|
||||
import promoVideo from './new-editor-promo-video.mp4'
|
||||
|
||||
const TUTORIAL_KEY = 'new-editor-intro-2'
|
||||
|
||||
export default function NewEditorOptOutIntroModal() {
|
||||
const {
|
||||
tryShowingPopup,
|
||||
showPopup: showModal,
|
||||
dismissTutorial,
|
||||
completeTutorial,
|
||||
clearPopup,
|
||||
checkCompletion,
|
||||
} = useTutorial(TUTORIAL_KEY, {
|
||||
name: TUTORIAL_KEY,
|
||||
})
|
||||
const { startTour } = useNewEditorTourContext()
|
||||
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [hasShown, setHasShown] = useState(false)
|
||||
const isNewToNewEditor = useIsNewToNewEditor()
|
||||
|
||||
useEffect(() => {
|
||||
if (isNewToNewEditor && !hasShown && !checkCompletion()) {
|
||||
tryShowingPopup('notification-prompt')
|
||||
setHasShown(true)
|
||||
}
|
||||
}, [tryShowingPopup, checkCompletion, isNewToNewEditor, hasShown])
|
||||
|
||||
const startProductTour = useCallback(() => {
|
||||
completeTutorial({ event: 'notification-click', action: 'complete' })
|
||||
startTour()
|
||||
clearPopup()
|
||||
}, [completeTutorial, startTour, clearPopup])
|
||||
|
||||
const closeModal = useCallback(() => {
|
||||
dismissTutorial('notification-dismiss')
|
||||
clearPopup()
|
||||
}, [dismissTutorial, clearPopup])
|
||||
|
||||
return (
|
||||
<OLModal show={showModal} onHide={closeModal}>
|
||||
<OLModalHeader>
|
||||
<OLModalTitle>{t('introducing_overleafs_new_look')}</OLModalTitle>
|
||||
</OLModalHeader>
|
||||
<OLModalBody className="new-editor-intro-modal-body">
|
||||
<div>{t('the_new_and_improved_overleaf_editor_design')}</div>
|
||||
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
|
||||
<video autoPlay loop muted>
|
||||
<source src={promoVideo} type="video/mp4" />
|
||||
</video>
|
||||
<div>
|
||||
{t('weve_made_it_easier_to_find_and_use_the_tools_you_need_today')}
|
||||
</div>
|
||||
</OLModalBody>
|
||||
<OLModalFooter>
|
||||
<OLButton onClick={startProductTour} variant="primary">
|
||||
{t('explore_what_s_new')}
|
||||
</OLButton>
|
||||
</OLModalFooter>
|
||||
</OLModal>
|
||||
)
|
||||
}
|
||||
Binary file not shown.
@@ -1,117 +0,0 @@
|
||||
import { useLayoutContext } from '@/shared/context/layout-context'
|
||||
import {
|
||||
createContext,
|
||||
FC,
|
||||
useCallback,
|
||||
useContext,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
|
||||
export type NewEditorTourStage = 'rail' | 'logs' | 'theme' | 'got-questions'
|
||||
|
||||
const NewEditorTourContext = createContext<
|
||||
| {
|
||||
stage: NewEditorTourStage
|
||||
stageNumber: number
|
||||
totalStages: number
|
||||
isShowing: boolean
|
||||
shouldShowTourStage: (tourStage: NewEditorTourStage) => boolean
|
||||
startTour: () => void
|
||||
goToNextStage: () => void
|
||||
finishTour: () => void
|
||||
dismissTour: () => void
|
||||
}
|
||||
| undefined
|
||||
>(undefined)
|
||||
|
||||
const STAGES: NewEditorTourStage[] = ['rail', 'logs', 'theme', 'got-questions']
|
||||
const EDITOR_ONLY_STAGES: NewEditorTourStage[] = [
|
||||
'rail',
|
||||
'theme',
|
||||
'got-questions',
|
||||
]
|
||||
|
||||
export const NewEditorTourProvider: FC<React.PropsWithChildren> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [stage, setStage] = useState<NewEditorTourStage>('rail')
|
||||
const [showTour, setShowTour] = useState(false)
|
||||
const { view, pdfLayout } = useLayoutContext()
|
||||
const pdfIsOpen = pdfLayout === 'sideBySide' || view === 'pdf'
|
||||
|
||||
const stagesToShow = useMemo(
|
||||
() => (pdfIsOpen ? STAGES : EDITOR_ONLY_STAGES),
|
||||
[pdfIsOpen]
|
||||
)
|
||||
|
||||
const startTour = useCallback(() => {
|
||||
setShowTour(true)
|
||||
}, [])
|
||||
|
||||
const stageNumber = useMemo(
|
||||
() => stagesToShow.indexOf(stage) + 1,
|
||||
[stage, stagesToShow]
|
||||
)
|
||||
const totalStages = stagesToShow.length
|
||||
|
||||
const goToNextStage = useCallback(() => {
|
||||
setStage(stagesToShow[stageNumber])
|
||||
}, [stageNumber, stagesToShow])
|
||||
|
||||
const dismissTour = useCallback(() => {
|
||||
setShowTour(false)
|
||||
}, [])
|
||||
|
||||
const finishTour = useCallback(() => {
|
||||
setShowTour(false)
|
||||
}, [])
|
||||
|
||||
const shouldShowTourStage = useCallback(
|
||||
(tourStage: NewEditorTourStage) => {
|
||||
return showTour && stage === tourStage
|
||||
},
|
||||
[showTour, stage]
|
||||
)
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
stage,
|
||||
stageNumber,
|
||||
totalStages,
|
||||
shouldShowTourStage,
|
||||
startTour,
|
||||
goToNextStage,
|
||||
finishTour,
|
||||
dismissTour,
|
||||
isShowing: showTour,
|
||||
}),
|
||||
[
|
||||
stage,
|
||||
stageNumber,
|
||||
totalStages,
|
||||
shouldShowTourStage,
|
||||
startTour,
|
||||
goToNextStage,
|
||||
finishTour,
|
||||
dismissTour,
|
||||
showTour,
|
||||
]
|
||||
)
|
||||
|
||||
return (
|
||||
<NewEditorTourContext.Provider value={value}>
|
||||
{children}
|
||||
</NewEditorTourContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export const useNewEditorTourContext = () => {
|
||||
const context = useContext(NewEditorTourContext)
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
'useNewEditorTourContext is only available inside RailProvider'
|
||||
)
|
||||
}
|
||||
return context
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 8C0 3.58172 3.58172 0 8 0H28C32.4183 0 36 3.58172 36 8V28C36 32.4183 32.4183 36 28 36H8C3.58172 36 0 32.4183 0 28V8Z" fill="#EAF6EF"/>
|
||||
<path d="M14.8 16.95L16.95 14.775L15.55 13.35L15.15 13.75C14.9667 13.9333 14.7333 14.0333 14.45 14.05C14.1833 14.05 13.95 13.95 13.75 13.75C13.55 13.55 13.45 13.3167 13.45 13.05C13.45 12.7667 13.55 12.525 13.75 12.325L14.125 11.95L13 10.825L10.825 13L14.8 16.95ZM23 25.175L25.175 23L24.05 21.875L23.65 22.25C23.45 22.45 23.2167 22.55 22.95 22.55C22.6833 22.55 22.45 22.45 22.25 22.25C22.05 22.05 21.95 21.8167 21.95 21.55C21.95 21.2833 22.05 21.05 22.25 20.85L22.625 20.45L21.2 19.05L19.05 21.2L23 25.175ZM22.225 12.425L23.625 13.825L25.025 12.425L23.6 11L22.225 12.425ZM10 27C9.71667 27 9.475 26.9083 9.275 26.725C9.09167 26.525 9 26.2833 9 26V23.175C9 23.0417 9.025 22.9167 9.075 22.8C9.125 22.6667 9.2 22.55 9.3 22.45L13.375 18.375L9.05 14.05C8.76667 13.7667 8.625 13.4167 8.625 13C8.625 12.5833 8.76667 12.2333 9.05 11.95L11.95 9.05C12.2333 8.76667 12.5833 8.63333 13 8.65C13.4167 8.65 13.7667 8.79167 14.05 9.075L18.4 13.4L22.175 9.6C22.375 9.4 22.6 9.25 22.85 9.15C23.1 9.05 23.3583 9 23.625 9C23.8917 9 24.15 9.05 24.4 9.15C24.65 9.25 24.875 9.4 25.075 9.6L26.4 10.95C26.6 11.15 26.75 11.375 26.85 11.625C26.95 11.875 27 12.1333 27 12.4C27 12.6667 26.95 12.925 26.85 13.175C26.75 13.4083 26.6 13.625 26.4 13.825L22.625 17.625L26.95 21.95C27.2333 22.2333 27.375 22.5833 27.375 23C27.375 23.4167 27.2333 23.7667 26.95 24.05L24.05 26.95C23.7667 27.2333 23.4167 27.375 23 27.375C22.5833 27.375 22.2333 27.2333 21.95 26.95L17.625 22.625L13.55 26.7C13.45 26.8 13.3333 26.875 13.2 26.925C13.0833 26.975 12.9583 27 12.825 27H10Z" fill="#195936"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
@@ -1,6 +0,0 @@
|
||||
import { useUserSettingsContext } from '@/shared/context/user-settings-context'
|
||||
|
||||
export const useIsNewToNewEditor = () => {
|
||||
const { userSettings } = useUserSettingsContext()
|
||||
return !userSettings.enableNewEditorLegacy
|
||||
}
|
||||
+2
-12
@@ -1,4 +1,4 @@
|
||||
import { memo, useCallback, useState } from 'react'
|
||||
import { memo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import OLButtonToolbar from '@/shared/components/ol/ol-button-toolbar'
|
||||
import PdfCompileButton from '@/features/pdf-preview/components/pdf-compile-button'
|
||||
@@ -6,18 +6,9 @@ import PdfHybridDownloadButton from '@/features/pdf-preview/components/pdf-hybri
|
||||
import { DetachedSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control'
|
||||
import SwitchToEditorButton from '@/features/pdf-preview/components/switch-to-editor-button'
|
||||
import PdfHybridLogsButton from '@/features/pdf-preview/components/pdf-hybrid-logs-button'
|
||||
import EditorTourLogsTooltip from '../../ide-redesign/components/editor-tour/editor-tour-logs-tooltip'
|
||||
|
||||
function PdfPreviewHybridToolbar() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [logsButtonElt, setLogsButtonElt] = useState<HTMLElement | null>(null)
|
||||
const logsButtonRef = useCallback((node: HTMLButtonElement) => {
|
||||
if (node !== null) {
|
||||
setLogsButtonElt(node)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// TODO: add detached pdf logic
|
||||
return (
|
||||
<OLButtonToolbar
|
||||
@@ -26,9 +17,8 @@ function PdfPreviewHybridToolbar() {
|
||||
>
|
||||
<div className="toolbar-pdf-left">
|
||||
<PdfCompileButton />
|
||||
<PdfHybridLogsButton ref={logsButtonRef} />
|
||||
<PdfHybridLogsButton />
|
||||
<PdfHybridDownloadButton />
|
||||
<EditorTourLogsTooltip target={logsButtonElt} />
|
||||
</div>
|
||||
<div className="toolbar-pdf-right">
|
||||
<div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
@import 'editor/math-preview';
|
||||
@import 'editor/references-search';
|
||||
@import 'editor/editor-survey';
|
||||
@import 'editor/editor-tour-tooltip';
|
||||
@import 'editor/themed-tooltip';
|
||||
@import 'editor/new-editor-promo-modal';
|
||||
@import 'error-pages';
|
||||
@import 'website-redesign';
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
.editor-tour-tooltip {
|
||||
--bs-popover-bg: var(--bg-light-primary);
|
||||
--bs-popover-header-bg: var(--bg-light-primary);
|
||||
--bs-popover-body-color: var(--content-primary);
|
||||
--bs-popover-header-color: var(--content-primary);
|
||||
--editor-tour-tooltip-link-color: var(--link-ui);
|
||||
--editor-tour-tooltip-link-hover-color: var(--link-ui-hover);
|
||||
--editor-tour-tooltip-link-visited-color: var(--link-ui-visited);
|
||||
|
||||
.material-symbols {
|
||||
color: var(--bs-popover-header-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--editor-tour-tooltip-link-color);
|
||||
|
||||
&:visited {
|
||||
color: var(--editor-tour-tooltip-link-hover-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--editor-tour-tooltip-link-visited-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
.editor-tour-tooltip {
|
||||
--bs-popover-bg: var(--bg-dark-primary);
|
||||
--bs-popover-header-bg: var(--bg-dark-primary);
|
||||
--bs-popover-body-color: var(--content-primary-dark);
|
||||
--bs-popover-header-color: var(--content-primary-dark);
|
||||
--editor-tour-tooltip-link-color: var(--link-ui-dark);
|
||||
--editor-tour-tooltip-link-hover-color: var(--link-ui-hover-dark);
|
||||
--editor-tour-tooltip-link-visited-color: var(--link-ui-visited-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.editor-tour-tooltip-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.btn-link {
|
||||
color: var(--bs-popover-body-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.themed-tooltip {
|
||||
--bs-popover-bg: var(--bg-light-primary);
|
||||
--bs-popover-header-bg: var(--bg-light-primary);
|
||||
--bs-popover-body-color: var(--content-primary);
|
||||
--bs-popover-header-color: var(--content-primary);
|
||||
|
||||
.material-symbols {
|
||||
color: var(--bs-popover-header-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
.themed-tooltip {
|
||||
@include dark-bg;
|
||||
|
||||
--bs-popover-bg: var(--bg-dark-primary);
|
||||
--bs-popover-header-bg: var(--bg-dark-primary);
|
||||
--bs-popover-body-color: var(--content-primary-dark);
|
||||
--bs-popover-header-color: var(--content-primary-dark);
|
||||
}
|
||||
}
|
||||
@@ -324,7 +324,6 @@
|
||||
"change": "Change",
|
||||
"change_currency": "Change currency",
|
||||
"change_email_address": "Change email address",
|
||||
"change_how_you_see_the_editor": "Change how you see the editor using the updated <strong>Appearance</strong> settings.",
|
||||
"change_language": "Change language",
|
||||
"change_owner": "Change owner",
|
||||
"change_password": "Change password",
|
||||
@@ -776,7 +775,6 @@
|
||||
"expires_on": "Expires: __date__",
|
||||
"expiry": "Expiry Date",
|
||||
"explore_all_plans": "Explore all plans",
|
||||
"explore_what_s_new": "Explore what’s new",
|
||||
"export_csv": "Export CSV",
|
||||
"export_project_to_github": "Export Project to GitHub",
|
||||
"failed_to_consent_to_workbench_terms": "Failed to consent to workbench terms. Please try again later.",
|
||||
@@ -823,7 +821,6 @@
|
||||
"filters": "Filters",
|
||||
"find": "Find",
|
||||
"find_and_check_citations": "Find and check citations",
|
||||
"find_and_fix_errors_faster": "Find and fix errors faster",
|
||||
"find_out_more": "Find out More",
|
||||
"find_out_more_about_institution_login": "Find out more about institutional login",
|
||||
"find_out_more_about_the_file_outline": "Find out more about the file outline",
|
||||
@@ -988,7 +985,6 @@
|
||||
"good_news_you_already_purchased_this_add_on": "Good news! You already have this add-on, so no need to pay again.",
|
||||
"good_news_you_are_already_receiving_this_add_on_via_writefull": "Good news! You already have this add-on via your Writefull subscription. No need to pay again.",
|
||||
"got_it": "Got it",
|
||||
"got_questions": "Got questions?",
|
||||
"great_for_getting_started": "Great for getting started",
|
||||
"great_for_small_teams_and_departments": "Great for small teams and departments",
|
||||
"group": "Group",
|
||||
@@ -1168,7 +1164,6 @@
|
||||
"integrations": "Integrations",
|
||||
"integrations_like_github": "Integrations like GitHub Sync",
|
||||
"interested_in_cheaper_personal_plan": "Would you be interested in the cheaper <0>__price__</0> Personal plan?",
|
||||
"introducing_overleafs_new_look": "Introducing __appName__’s new look",
|
||||
"invalid_certificate": "Invalid certificate. Please check the certificate and try again.",
|
||||
"invalid_confirmation_code": "That didn’t work. Please check the code and try again.",
|
||||
"invalid_email": "An email address is invalid",
|
||||
@@ -1506,7 +1501,6 @@
|
||||
"neither_agree_nor_disagree": "Neither agree nor disagree",
|
||||
"new_compile_domain_notice": "Something might be blocking your browser from accessing Overleaf’s PDF download location, <0>__compilesUserContentDomain__</0>. This could be caused by network blocking or a strict browser plugin rule. Please follow our <1>troubleshooting guide</1>.",
|
||||
"new_compiles_in_this_project_will_automatically_use_the_newest_version": "New compiles in this project will automatically use the newest version. <0>Learn how to change compiler settings</0>",
|
||||
"new_error_logs_make_it_easier_to_find_whats_wrong": "New error logs make it easier to find what’s wrong and fix your document, so you can get compiling again.",
|
||||
"new_file": "New file",
|
||||
"new_folder": "New folder",
|
||||
"new_name": "New name",
|
||||
@@ -1877,7 +1871,6 @@
|
||||
"reactivating": "Reactivating",
|
||||
"read_lines_from_path": "Read lines from __path__",
|
||||
"read_more": "Read more",
|
||||
"read_more_about_the_new_editor_or_explore_our_documentation_for_tips_and_tricks": "<0>Read more</0> about the new editor, or <1>explore our documentation</1> for tips and tricks.",
|
||||
"read_only_dropbox_sync_message": "As a read-only viewer you can sync the current project version to Dropbox, but changes made in Dropbox will <0>not</0> sync back to Overleaf.",
|
||||
"read_only_token": "Read-Only Token",
|
||||
"read_write_token": "Read-Write Token",
|
||||
@@ -2194,7 +2187,6 @@
|
||||
"sign_up_for_free": "Sign up for free",
|
||||
"sign_up_for_free_account": "Sign up for a free account and receive regular updates",
|
||||
"simple_search_mode": "Simple search",
|
||||
"simplified_working_starts_here": "Simplified working starts here",
|
||||
"single_sign_on_sso": "Single Sign-On (SSO)",
|
||||
"site_description": "An online LaTeX editor that’s easy to use. No installation, real-time collaboration, version control, hundreds of LaTeX templates, and more.",
|
||||
"site_wide_option_available": "Site-wide option available",
|
||||
@@ -2356,9 +2348,7 @@
|
||||
"sure_you_want_to_delete": "Are you sure you want to permanently delete the following files?",
|
||||
"sure_you_want_to_leave_group": "Are you sure you want to leave this group?",
|
||||
"sv": "Swedish",
|
||||
"switch_between_dark_and_light_mode": "Switch between dark and light mode",
|
||||
"switch_compile_mode_for_faster_draft_compilation": "Switch compile mode for faster draft compilation",
|
||||
"switch_easily_between_your_files_comments_track_changes_and_more": "Switch easily between your files, comments, track changes, and more in the new left-hand menu.",
|
||||
"switch_to_editor": "Switch to editor",
|
||||
"switch_to_pdf": "Switch to PDF",
|
||||
"switch_to_standard_plan": "Switch to Standard plan",
|
||||
@@ -2439,7 +2429,6 @@
|
||||
"the_home_of_research_writing": "The home of research writing.",
|
||||
"the_latex_engine_used_for_compiling": "The LaTeX engine used for compiling",
|
||||
"the_link_may_be_broken_or_you_may_not_have_access_rights": "The link may be broken or you may not have access rights.",
|
||||
"the_new_and_improved_overleaf_editor_design": "The new and improved __appName__ editor design brings you a cleaner, less cluttered interface to help you focus on what matters—your work.",
|
||||
"the_next_payment_will_be_collected_on": "The next payment will be collected on <strong>__date__</strong>.",
|
||||
"the_original_text_has_changed": "The original text has changed, so this suggestion can’t be applied",
|
||||
"the_overleaf_color_scheme": "The __appName__ color scheme",
|
||||
@@ -2813,7 +2802,6 @@
|
||||
"were_performing_maintenance": "We’re performing maintenance on Overleaf and you need to wait a moment. Sorry for any inconvenience. The editor will refresh automatically in __seconds__ seconds.",
|
||||
"weve_given_your_dashboard_a_sleek_new_dark_theme_for_more_comfortable_late_night_research_prefer_the_light_switch_back_anytime_right_here": "We’ve given your dashboard a sleek new dark theme for more comfortable late-night research. Prefer the light? Switch back anytime right here.",
|
||||
"weve_hit_a_problem_try_starting_a_new_chat": "We’ve hit a problem. Try starting a new chat.",
|
||||
"weve_made_it_easier_to_find_and_use_the_tools_you_need_today": "The new editor design makes it easier to find and use the tools you need today, while making space for the new features you’ll love tomorrow.",
|
||||
"weve_matched_your_dashboard_theme_to_your_editor_preferences_but_you_can_change_that_here_anytime": "We’ve matched your dashboard theme to your editor preferences, but you can change that here anytime.",
|
||||
"weve_set_your_dashboard_to_dark_mode_to_help_you_stay_focused_if_youre_a_fan_of_a_lighter_look_you_can_easily_switch_themes_here": "We’ve set your dashboard to dark mode to help you stay focused. If you’re a fan of a lighter look, you can easily switch themes here.",
|
||||
"what_did_you_find_most_helpful": "What did you find most helpful?",
|
||||
|
||||
Reference in New Issue
Block a user