mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-06 00:11:24 +00:00
Merge pull request #11653 from overleaf/ds-documentation-btn-on-editor
Adding documentation button on the editor GitOrigin-RevId: e03fd7b931eb0fe7273e6e9d0185c81c384df916
This commit is contained in:
Davinder Singh
Copybot
parent
ce1c9713bd
commit
de245c288a
8 changed files with 165 additions and 35 deletions
|
|
@ -1051,6 +1051,21 @@ const ProjectController = {
|
|||
}
|
||||
)
|
||||
},
|
||||
editorDocumentationButton(cb) {
|
||||
SplitTestHandler.getAssignment(
|
||||
req,
|
||||
res,
|
||||
'documentation-on-editor',
|
||||
(error, assignment) => {
|
||||
// do not fail editor load if assignment fails
|
||||
if (error) {
|
||||
cb(null, { variant: 'default' })
|
||||
} else {
|
||||
cb(null, assignment)
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
richTextAssignment(cb) {
|
||||
SplitTestHandler.getAssignment(
|
||||
req,
|
||||
|
|
|
|||
|
|
@ -1,38 +1,42 @@
|
|||
aside.editor-sidebar.full-size(
|
||||
ng-show="ui.view != 'history'"
|
||||
vertical-resizable-panes="outline-resizer"
|
||||
vertical-resizable-panes-toggled-externally-on="outline-toggled"
|
||||
vertical-resizable-panes-default-size="350"
|
||||
vertical-resizable-panes-min-size="32"
|
||||
vertical-resizable-panes-max-size="'75%'"
|
||||
vertical-resizable-panes-resize-on="left-pane-resize-all"
|
||||
)
|
||||
aside.editor-sidebar.full-size
|
||||
|
||||
.file-tree(
|
||||
ng-controller="ReactFileTreeController"
|
||||
vertical-resizable-top
|
||||
.resizable-side-bar(
|
||||
ng-show="ui.view != 'history'"
|
||||
vertical-resizable-panes="outline-resizer"
|
||||
vertical-resizable-panes-toggled-externally-on="outline-toggled"
|
||||
vertical-resizable-panes-default-size="350"
|
||||
vertical-resizable-panes-min-size="32"
|
||||
vertical-resizable-panes-max-size="'75%'"
|
||||
vertical-resizable-panes-resize-on="left-pane-resize-all"
|
||||
)
|
||||
file-tree-root(
|
||||
on-select="onSelect"
|
||||
on-init="onInit"
|
||||
is-connected="isConnected"
|
||||
ref-providers="refProviders"
|
||||
reindex-references="reindexReferences"
|
||||
set-ref-provider-enabled="setRefProviderEnabled"
|
||||
set-started-free-trial="setStartedFreeTrial"
|
||||
)
|
||||
|
||||
.outline-container(
|
||||
vertical-resizable-bottom
|
||||
ng-controller="OutlineController"
|
||||
)
|
||||
outline-pane(
|
||||
is-tex-file="isTexFile"
|
||||
outline="outline"
|
||||
project-id="project_id"
|
||||
jump-to-line="jumpToLine"
|
||||
on-toggle="onToggle"
|
||||
event-tracking="eventTracking"
|
||||
highlighted-line="highlightedLine"
|
||||
show="show"
|
||||
.file-tree(
|
||||
ng-controller="ReactFileTreeController"
|
||||
vertical-resizable-top
|
||||
)
|
||||
file-tree-root(
|
||||
on-select="onSelect"
|
||||
on-init="onInit"
|
||||
is-connected="isConnected"
|
||||
ref-providers="refProviders"
|
||||
reindex-references="reindexReferences"
|
||||
set-ref-provider-enabled="setRefProviderEnabled"
|
||||
set-started-free-trial="setStartedFreeTrial"
|
||||
)
|
||||
|
||||
.outline-container(
|
||||
vertical-resizable-bottom
|
||||
ng-controller="OutlineController"
|
||||
)
|
||||
outline-pane(
|
||||
is-tex-file="isTexFile"
|
||||
outline="outline"
|
||||
project-id="project_id"
|
||||
jump-to-line="jumpToLine"
|
||||
on-toggle="onToggle"
|
||||
event-tracking="eventTracking"
|
||||
highlighted-line="highlightedLine"
|
||||
show="show"
|
||||
)
|
||||
|
||||
documentation-button
|
||||
|
|
@ -238,7 +238,12 @@ aside#left-menu.full-size(
|
|||
)
|
||||
if showSupport
|
||||
li
|
||||
a(href='/learn', target="_blank")
|
||||
a(
|
||||
href='/learn', target="_blank"
|
||||
event-tracking="left-menu-documentation-click "
|
||||
event-tracking-mb="true"
|
||||
event-tracking-trigger="click"
|
||||
)
|
||||
i.fa.fa-book.fa-fw
|
||||
| #{translate('documentation')}
|
||||
li
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
import { useState } from 'react'
|
||||
import Icon from '../../../shared/components/icon'
|
||||
import { useSplitTestContext } from '../../../shared/context/split-test-context'
|
||||
import { sendMB } from '../../../infrastructure/event-tracking'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Button } from 'react-bootstrap'
|
||||
|
||||
function DocumentationButton() {
|
||||
const { splitTestVariants } = useSplitTestContext({
|
||||
splitTestVariants: PropTypes.object,
|
||||
})
|
||||
const documentationButtonVariant =
|
||||
splitTestVariants['documentation-on-editor']
|
||||
|
||||
let documentationButtonText = ''
|
||||
|
||||
if (documentationButtonVariant === 'latex-help')
|
||||
documentationButtonText = 'LaTeX help'
|
||||
else if (documentationButtonVariant === 'documentation')
|
||||
documentationButtonText = 'Documentation'
|
||||
else if (documentationButtonVariant === 'help-guides')
|
||||
documentationButtonText = 'Help guides'
|
||||
const [showDocumentationButton, setShowDocumentationButton] = useState(
|
||||
!(documentationButtonVariant === 'default')
|
||||
)
|
||||
|
||||
function handleCloseClick() {
|
||||
sendMB('file-tree-documentation-dismiss ')
|
||||
|
||||
setShowDocumentationButton(false)
|
||||
}
|
||||
|
||||
function handleDocumentationLinkClick() {
|
||||
sendMB('file-tree-documentation-click')
|
||||
}
|
||||
return (
|
||||
<div className="outline-pane">
|
||||
{showDocumentationButton ? (
|
||||
<header className="outline-footer">
|
||||
<div className="outline-header-expand-collapse-btn documentation-btn">
|
||||
<a
|
||||
href="/learn"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="documentation-link"
|
||||
onClick={handleDocumentationLinkClick}
|
||||
>
|
||||
<Icon
|
||||
type="question-circle"
|
||||
className="outline-caret-icon"
|
||||
style={{ color: 'white' }}
|
||||
/>
|
||||
<h4 className="outline-header-name">{documentationButtonText}</h4>
|
||||
</a>
|
||||
<Button bsStyle="link">
|
||||
<Icon
|
||||
style={{ color: 'white' }}
|
||||
type="times"
|
||||
onClick={handleCloseClick}
|
||||
className="outline-caret-icon"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DocumentationButton
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { react2angular } from 'react2angular'
|
||||
import DocumentationButton from '../components/documentation-button'
|
||||
import { rootContext } from '../../../../../frontend/js/shared/context/root-context'
|
||||
import App from '../../../../../frontend/js/base'
|
||||
|
||||
App.component(
|
||||
'documentationButton',
|
||||
react2angular(rootContext.use(DocumentationButton), [])
|
||||
)
|
||||
|
|
@ -66,6 +66,7 @@ import './features/share-project-modal/controllers/react-share-project-modal-con
|
|||
import './features/source-editor/controllers/editor-switch-controller'
|
||||
import './features/source-editor/controllers/cm6-switch-away-survey-controller'
|
||||
import './features/source-editor/controllers/grammarly-warning-controller'
|
||||
import './features/outline/controllers/documentation-button-controller'
|
||||
import { cleanupServiceWorker } from './utils/service-worker-cleanup'
|
||||
import { reportCM6Perf } from './infrastructure/cm6-performance'
|
||||
import { reportAcePerf } from './ide/editor/ace-performance'
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@
|
|||
background-color: @file-tree-bg;
|
||||
}
|
||||
|
||||
.resizable-side-bar {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.file-tree {
|
||||
display: flex !important; // To work around jQuery layout's inline styles
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,20 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.documentation-btn.outline-header-expand-collapse-btn {
|
||||
justify-content: space-between;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.documentation-btn .btn {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.documentation-link {
|
||||
display: flex;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.outline-header {
|
||||
.toolbar-small-mixin;
|
||||
.toolbar-alt-mixin;
|
||||
|
|
@ -23,6 +37,14 @@
|
|||
border-bottom: 1px solid @toolbar-border-color;
|
||||
border-top: 1px solid @toolbar-border-color;
|
||||
}
|
||||
.outline-footer {
|
||||
.toolbar-small-mixin;
|
||||
.toolbar-alt-mixin;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid @toolbar-border-color;
|
||||
border-top: 1px solid @toolbar-border-color;
|
||||
}
|
||||
|
||||
.outline-header-expand-collapse-btn {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in a new issue