github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #11958 from overleaf/ds-td-documentation-btn-refactor

Browse source 
Styling and HTML structure of the documentation button

GitOrigin-RevId: e643edbe05579c037ca1ec27fab765974e74d2c5
This commit is contained in:
Davinder Singh 2023-02-24 11:15:41 +00:00 committed by Copybot
parent cabc7f0f51
commit cc2d1a26e2
2 changed files with 39 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
services/web/frontend/js/features/outline/components/documentation-button.tsx
View file

@ -33,11 +33,11 @@ function DocumentationButton() {
function handleDocumentationLinkClick() { function handleDocumentationLinkClick() {
sendMB('file-tree-documentation-click') sendMB('file-tree-documentation-click')
} }
if (!showDocumentationButton) return null
return ( return (
<div className="outline-pane"> <div className="documentation-btn-container">
{showDocumentationButton ? (
<header className="outline-footer">
<div className="outline-header-expand-collapse-btn documentation-btn">
<a <a
href="/learn" href="/learn"
target="_blank" target="_blank"
@ -45,25 +45,17 @@ function DocumentationButton() {
className="documentation-link" className="documentation-link"
onClick={handleDocumentationLinkClick} onClick={handleDocumentationLinkClick}
> >
<Icon <Icon type="question-circle" className="outline-caret-icon" />
type="question-circle"
className="outline-caret-icon"
style={{ color: 'white' }}
/>
<h4 className="outline-header-name">{documentationButtonText}</h4> <h4 className="outline-header-name">{documentationButtonText}</h4>
</a> </a>
<Button bsStyle="link"> <Button bsStyle="link" className="documentation-close">
<Icon <Icon
style={{ color: 'white' }}
type="times" type="times"
onClick={handleCloseClick} onClick={handleCloseClick}
className="outline-caret-icon" className="outline-caret-icon "
/> />
</Button> </Button>
</div> </div>
</header>
) : null}
</div>
) )
} }

33
services/web/frontend/stylesheets/app/editor/outline.less
View file

@ -15,29 +15,32 @@
opacity: 0.5; 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 { .documentation-link {
display: flex; display: flex;
margin-left: 0.5em; flex: 1;
} }
.outline-header { .documentation-btn-container {
.toolbar-small-mixin; .toolbar-small-mixin;
.toolbar-alt-mixin; .toolbar-alt-mixin;
display: flex; display: flex;
flex-shrink: 0; align-items: center;
border-bottom: 1px solid @toolbar-border-color; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
border-top: 1px solid @toolbar-border-color; & *,
& :hover {
color: @white;
text-decoration: none;
}
&:hover {
background-color: @outline-header-hover-bg;
}
} }
.outline-footer {
.documentation-close {
padding: 0;
}
.outline-header {
.toolbar-small-mixin; .toolbar-small-mixin;
.toolbar-alt-mixin; .toolbar-alt-mixin;
display: flex; display: flex;