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

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

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

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

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