Add real buttons to document header
Fixed: Incorrect page title when starting a new doc Fixed: Linting error
This commit is contained in:
parent
f80e4ab04c
commit
18859bec3d
|
@ -14,7 +14,7 @@ const RealButton = styled.button`
|
|||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
height: ${props => (props.small ? 24 : 36)}px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
flex-shrink: 0;
|
||||
|
@ -69,9 +69,9 @@ const Label = styled.span`
|
|||
`;
|
||||
|
||||
const Inner = styled.span`
|
||||
padding: 0 12px;
|
||||
padding: 0 ${props => (props.small ? 8 : 12)}px;
|
||||
display: flex;
|
||||
line-height: 28px;
|
||||
line-height: ${props => (props.small ? 24 : 28)}px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
@ -86,6 +86,7 @@ export type Props = {
|
|||
icon?: React.Node,
|
||||
className?: string,
|
||||
children?: React.Node,
|
||||
small?: boolean,
|
||||
};
|
||||
|
||||
export default function Button({
|
||||
|
@ -93,14 +94,15 @@ export default function Button({
|
|||
icon,
|
||||
children,
|
||||
value,
|
||||
small,
|
||||
...rest
|
||||
}: Props) {
|
||||
const hasText = children !== undefined || value !== undefined;
|
||||
const hasIcon = icon !== undefined;
|
||||
|
||||
return (
|
||||
<RealButton {...rest}>
|
||||
<Inner hasIcon={hasIcon}>
|
||||
<RealButton small={small} {...rest}>
|
||||
<Inner hasIcon={hasIcon} small={small}>
|
||||
{hasIcon && icon}
|
||||
{hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
|
||||
</Inner>
|
||||
|
|
|
@ -46,7 +46,8 @@ const Modal = ({
|
|||
<Content column>
|
||||
{title && <h1>{title}</h1>}
|
||||
<Close onClick={onRequestClose}>
|
||||
<CloseIcon size={32} />
|
||||
<CloseIcon size={40} />
|
||||
<Esc>esc</Esc>
|
||||
</Close>
|
||||
{children}
|
||||
</Content>
|
||||
|
@ -80,6 +81,13 @@ const StyledModal = styled(ReactModal)`
|
|||
outline: none;
|
||||
`;
|
||||
|
||||
const Esc = styled.span`
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: -10px;
|
||||
font-size: 13px;
|
||||
`;
|
||||
|
||||
const Close = styled.a`
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
|
|
|
@ -4,7 +4,6 @@ import { observable } from 'mobx';
|
|||
import { observer } from 'mobx-react';
|
||||
import styled from 'styled-components';
|
||||
import { CloseIcon } from 'outline-icons';
|
||||
import Button from './Button';
|
||||
import Tooltip from './Tooltip';
|
||||
import Flex from 'shared/components/Flex';
|
||||
|
||||
|
|
|
@ -300,7 +300,9 @@ class DocumentScene extends React.Component<Props> {
|
|||
if (!document || !Editor) {
|
||||
return (
|
||||
<Container column auto>
|
||||
<PageTitle title={location.state ? location.state.title : ''} />
|
||||
<PageTitle
|
||||
title={location.state ? location.state.title : 'Untitled'}
|
||||
/>
|
||||
<CenteredContent>
|
||||
<LoadingState />
|
||||
</CenteredContent>
|
||||
|
@ -330,7 +332,7 @@ class DocumentScene extends React.Component<Props> {
|
|||
)}
|
||||
/>
|
||||
<PageTitle
|
||||
title={document.title.replace(document.emoji, '')}
|
||||
title={document.title.replace(document.emoji, '') || 'Untitled'}
|
||||
favicon={document.emoji ? emojiToUrl(document.emoji) : undefined}
|
||||
/>
|
||||
{(this.isUploading || this.isSaving) && <LoadingIndicator />}
|
||||
|
|
|
@ -15,6 +15,7 @@ import Breadcrumb from './Breadcrumb';
|
|||
import DocumentMenu from 'menus/DocumentMenu';
|
||||
import NewChildDocumentMenu from 'menus/NewChildDocumentMenu';
|
||||
import DocumentShare from 'scenes/DocumentShare';
|
||||
import Button from 'components/Button';
|
||||
import Modal from 'components/Modal';
|
||||
import Collaborators from 'components/Collaborators';
|
||||
import { Action, Separator } from 'components/Actions';
|
||||
|
@ -126,45 +127,53 @@ class Header extends React.Component<Props> {
|
|||
<Status>Saving…</Status>
|
||||
</Action>
|
||||
)}
|
||||
{isDraft && (
|
||||
<Action>
|
||||
<Link
|
||||
onClick={this.handlePublish}
|
||||
title="Publish document (Cmd+Enter)"
|
||||
disabled={savingIsDisabled}
|
||||
highlight
|
||||
>
|
||||
{isPublishing ? 'Publishing…' : 'Publish'}
|
||||
</Link>
|
||||
</Action>
|
||||
)}
|
||||
{!isDraft &&
|
||||
!isEditing &&
|
||||
canShareDocuments && (
|
||||
<Action>
|
||||
<Link onClick={this.handleShareLink} title="Share document">
|
||||
<Button
|
||||
onClick={this.handleShareLink}
|
||||
title="Share document"
|
||||
neutral
|
||||
small
|
||||
>
|
||||
Share
|
||||
</Link>
|
||||
</Button>
|
||||
</Action>
|
||||
)}
|
||||
{isEditing && (
|
||||
<React.Fragment>
|
||||
<Action>
|
||||
<Link
|
||||
<Button
|
||||
onClick={this.handleSave}
|
||||
title="Save changes (Cmd+Enter)"
|
||||
disabled={savingIsDisabled}
|
||||
isSaving={isSaving}
|
||||
highlight={!isDraft}
|
||||
neutral={isDraft}
|
||||
small
|
||||
>
|
||||
{isDraft ? 'Save Draft' : 'Done'}
|
||||
</Link>
|
||||
{isDraft ? 'Save Draft' : 'Done Editing'}
|
||||
</Button>
|
||||
</Action>
|
||||
</React.Fragment>
|
||||
)}
|
||||
{isDraft && (
|
||||
<Action>
|
||||
<Button
|
||||
onClick={this.handlePublish}
|
||||
title="Publish document (Cmd+Enter)"
|
||||
disabled={savingIsDisabled}
|
||||
small
|
||||
>
|
||||
{isPublishing ? 'Publishing…' : 'Publish'}
|
||||
</Button>
|
||||
</Action>
|
||||
)}
|
||||
{!isEditing && (
|
||||
<Action>
|
||||
<Link onClick={this.handleEdit}>Edit</Link>
|
||||
<Button onClick={this.handleEdit} neutral small>
|
||||
Edit
|
||||
</Button>
|
||||
</Action>
|
||||
)}
|
||||
{!isEditing && (
|
||||
|
@ -250,15 +259,4 @@ const Title = styled.div`
|
|||
`};
|
||||
`;
|
||||
|
||||
const Link = styled.a`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: ${props => (props.highlight ? 500 : 'inherit')};
|
||||
color: ${props =>
|
||||
props.highlight ? `${props.theme.primary} !important` : 'inherit'};
|
||||
opacity: ${props => (props.disabled ? 0.5 : 1)};
|
||||
pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
|
||||
cursor: ${props => (props.disabled ? 'default' : 'pointer')};
|
||||
`;
|
||||
|
||||
export default inject('auth')(Header);
|
||||
|
|
Reference in New Issue