From 899b63797977b74ae5d167409020c4ffd7e4911c Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 1 Jul 2018 09:16:38 -0700 Subject: [PATCH 1/4] wip --- app/components/Actions/Actions.js | 4 +- app/components/Collaborators/Collaborators.js | 19 +- app/models/Document.js | 12 +- app/scenes/Document/Document.js | 10 +- app/scenes/Document/components/Actions.js | 130 ----------- app/scenes/Document/components/Breadcrumb.js | 61 +++++ app/scenes/Document/components/Header.js | 212 ++++++++++++++++++ shared/styles/theme.js | 4 +- 8 files changed, 295 insertions(+), 157 deletions(-) delete mode 100644 app/scenes/Document/components/Actions.js create mode 100644 app/scenes/Document/components/Breadcrumb.js create mode 100644 app/scenes/Document/components/Header.js diff --git a/app/components/Actions/Actions.js b/app/components/Actions/Actions.js index b1b56ec1d..ae0a7cac1 100644 --- a/app/components/Actions/Actions.js +++ b/app/components/Actions/Actions.js @@ -7,6 +7,7 @@ export const Action = styled(Flex)` justify-content: center; align-items: center; padding: 0 0 0 12px; + font-size: 15px; a { color: ${props => props.theme.text}; @@ -37,8 +38,7 @@ const Actions = styled(Flex)` ${breakpoint('tablet')` left: auto; - padding: ${props => props.theme.vpadding} ${props => - props.theme.hpadding} 8px 8px; + padding: ${props => props.theme.vpadding} ${props => props.theme.hpadding}; `}; `; diff --git a/app/components/Collaborators/Collaborators.js b/app/components/Collaborators/Collaborators.js index 463e08c1a..0fbeaf1c2 100644 --- a/app/components/Collaborators/Collaborators.js +++ b/app/components/Collaborators/Collaborators.js @@ -31,22 +31,21 @@ const Collaborators = ({ document }: Props) => { return ( - - {collaborators.map(user => ( - + {collaborators.map(user => ( + 1 ? user.name : tooltip} + placement="bottom" + key={user.id} + > + - ))} - + + ))} ); }; -const StyledTooltip = styled(Tooltip)` - display: flex; - flex-direction: row-reverse; -`; - const AvatarWrapper = styled.div` width: 24px; height: 24px; diff --git a/app/models/Document.js b/app/models/Document.js index 0b9c9cfad..65b5c953f 100644 --- a/app/models/Document.js +++ b/app/models/Document.js @@ -8,7 +8,7 @@ import UiStore from 'stores/UiStore'; import parseTitle from '../../shared/utils/parseTitle'; import unescape from '../../shared/utils/unescape'; -import type { User } from 'types'; +import type { NavigationNode, User } from 'types'; import BaseModel from './BaseModel'; import Collection from './Collection'; @@ -52,17 +52,11 @@ class Document extends BaseModel { } @computed - get pathToDocument(): Array<{ id: string, title: string }> { + get pathToDocument(): NavigationNode[] { let path; const traveler = (nodes, previousPath) => { nodes.forEach(childNode => { - const newPath = [ - ...previousPath, - { - id: childNode.id, - title: childNode.title, - }, - ]; + const newPath = [...previousPath, childNode]; if (childNode.id === this.id) { path = newPath; return; diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js index 23ef41cf8..ef5147934 100644 --- a/app/scenes/Document/Document.js +++ b/app/scenes/Document/Document.js @@ -21,7 +21,7 @@ import { uploadFile } from 'utils/uploadFile'; import isInternalUrl from 'utils/isInternalUrl'; import Document from 'models/Document'; -import Actions from './components/Actions'; +import Header from './components/Header'; import DocumentMove from './components/DocumentMove'; import UiStore from 'stores/UiStore'; import AuthStore from 'stores/AuthStore'; @@ -248,7 +248,7 @@ class DocumentScene extends React.Component { }; render() { - const { location, match } = this.props; + const { location, match, ui } = this.props; const Editor = this.editorComponent; const isMoving = match.path === matchDocumentMove; const document = this.document; @@ -269,7 +269,7 @@ class DocumentScene extends React.Component { } return ( - + {isMoving && document && } {titleText && } {(this.isUploading || this.isSaving) && } @@ -290,6 +290,7 @@ class DocumentScene extends React.Component { )} { {document && !isShare && ( - { history={this.props.history} onDiscard={this.onDiscard} onSave={this.onSave} + editMode={ui.editMode} /> )} diff --git a/app/scenes/Document/components/Actions.js b/app/scenes/Document/components/Actions.js deleted file mode 100644 index dd90aa88a..000000000 --- a/app/scenes/Document/components/Actions.js +++ /dev/null @@ -1,130 +0,0 @@ -// @flow -import * as React from 'react'; -import styled from 'styled-components'; -import { NewDocumentIcon } from 'outline-icons'; -import Document from 'models/Document'; -import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers'; - -import DocumentMenu from 'menus/DocumentMenu'; -import Collaborators from 'components/Collaborators'; -import Actions, { Action, Separator } from 'components/Actions'; - -type Props = { - document: Document, - isDraft: boolean, - isEditing: boolean, - isSaving: boolean, - isPublishing: boolean, - savingIsDisabled: boolean, - onDiscard: () => *, - onSave: ({ - done?: boolean, - publish?: boolean, - autosave?: boolean, - }) => *, - history: Object, -}; - -class DocumentActions extends React.Component { - handleNewDocument = () => { - this.props.history.push(documentNewUrl(this.props.document)); - }; - - handleEdit = () => { - this.props.history.push(documentEditUrl(this.props.document)); - }; - - handleSave = () => { - this.props.onSave({ done: true }); - }; - - handlePublish = () => { - this.props.onSave({ done: true, publish: true }); - }; - - render() { - const { - document, - isEditing, - isDraft, - isPublishing, - isSaving, - savingIsDisabled, - } = this.props; - - return ( - - {!isDraft && !isEditing && } - {isDraft && ( - - - {isPublishing ? 'Publishing…' : 'Publish'} - - - )} - {isEditing && ( - - - - {isSaving && !isPublishing ? 'Saving…' : 'Save'} - - - {isDraft && } - - )} - {!isEditing && ( - - Edit - - )} - {isEditing && ( - - - {document.hasPendingChanges ? 'Discard' : 'Done'} - - - )} - {!isEditing && ( - - - - )} - {!isEditing && - !isDraft && ( - - - - - - - - - )} - - ); - } -} - -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 DocumentActions; diff --git a/app/scenes/Document/components/Breadcrumb.js b/app/scenes/Document/components/Breadcrumb.js new file mode 100644 index 000000000..72b3e5b8b --- /dev/null +++ b/app/scenes/Document/components/Breadcrumb.js @@ -0,0 +1,61 @@ +// @flow +import * as React from 'react'; +import styled from 'styled-components'; +import { Link } from 'react-router-dom'; +import { CollectionIcon, GoToIcon } from 'outline-icons'; + +import { collectionUrl } from 'utils/routeHelpers'; +import Flex from 'shared/components/Flex'; +import Document from 'models/Document'; + +type Props = { + document: Document, +}; + +const Breadcrumb = ({ document }: Props) => { + const path = document.pathToDocument.slice(0, -1); + + return ( + + + {' '} + {document.collection.name} + + {path.map(n => ( + + {n.title} + + ))} + + ); +}; + +const Wrapper = styled(Flex)` + width: 33.3%; +`; + +const Slash = styled(GoToIcon)` + opacity: 0.25; +`; + +const Crumb = styled(Link)` + color: ${props => props.theme.text}; + font-size: 15px; + height: 24px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + &:hover { + text-decoration: underline; + } +`; + +const CollectionName = styled(Link)` + color: ${props => props.theme.text}; + font-size: 15px; + display: flex; + font-weight: 500; +`; + +export default Breadcrumb; diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js new file mode 100644 index 000000000..0d064d31e --- /dev/null +++ b/app/scenes/Document/components/Header.js @@ -0,0 +1,212 @@ +// @flow +import * as React from 'react'; +import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; +import { observable } from 'mobx'; +import { observer } from 'mobx-react'; +import styled from 'styled-components'; +import breakpoint from 'styled-components-breakpoint'; +import { NewDocumentIcon } from 'outline-icons'; +import Document from 'models/Document'; +import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers'; + +import Flex from 'shared/components/Flex'; +import Breadcrumb from './Breadcrumb'; +import DocumentMenu from 'menus/DocumentMenu'; +import Collaborators from 'components/Collaborators'; +import { Action, Separator } from 'components/Actions'; + +type Props = { + document: Document, + isDraft: boolean, + isEditing: boolean, + isSaving: boolean, + isPublishing: boolean, + savingIsDisabled: boolean, + editMode: boolean, + onDiscard: () => *, + onSave: ({ + done?: boolean, + publish?: boolean, + autosave?: boolean, + }) => *, + history: Object, +}; + +@observer +class Header extends React.Component { + @observable isScrolled = false; + + componentWillMount() { + this.handleScroll(); + } + + componentDidMount() { + window.addEventListener('scroll', this.handleScroll); + } + + componentWillUnmount() { + window.removeEventListener('scroll', this.handleScroll); + } + + handleScroll = () => { + this.isScrolled = window.scrollY > 75; + }; + + handleNewDocument = () => { + this.props.history.push(documentNewUrl(this.props.document)); + }; + + handleEdit = () => { + this.props.history.push(documentEditUrl(this.props.document)); + }; + + handleSave = () => { + this.props.onSave({ done: true }); + }; + + handlePublish = () => { + this.props.onSave({ done: true, publish: true }); + }; + + render() { + const { + document, + isEditing, + isDraft, + isPublishing, + isSaving, + savingIsDisabled, + editMode, + } = this.props; + + return ( + + + {document.title} + + {!isDraft && !isEditing && } + {isDraft && ( + + + {isPublishing ? 'Publishing…' : 'Publish'} + + + )} + {isEditing && ( + + + {isSaving && !isPublishing && Saving…} + + Done + + + {isDraft && } + + )} + {!isEditing && ( + + Edit + + )} + {isEditing && + !isSaving && + document.hasPendingChanges && ( + + Discard + + )} + {!isEditing && ( + + + + )} + {!isEditing && + !isDraft && ( + + + + + + + + + )} + + + ); + } +} + +const Status = styled.div` + color: ${props => props.theme.slate}; + margin-right: 12px; +`; + +const Wrapper = styled(Flex)` + width: 33.3%; +`; + +const Actions = styled(Flex)` + position: fixed; + top: 0; + right: 0; + left: ${props => (props.editMode ? '0' : props.theme.sidebarWidth)}; + background: rgba(255, 255, 255, 0.9); + border-bottom: 1px solid + ${props => (props.isCompact ? props.theme.smoke : 'transparent')}; + padding: 12px; + transition: all 100ms ease-out; + -webkit-backdrop-filter: blur(20px); + + @media print { + display: none; + } + + ${breakpoint('tablet')` + padding: ${props => + props.isCompact ? '12px' : `${props.theme.padding} 0`}; + `}; +`; + +const Title = styled.div` + width: 33.3%; + font-size: 16px; + font-weight: 600; + text-align: center; + justify-content: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + transition: opacity 100ms ease-in-out; + opacity: ${props => (props.isHidden ? '0' : '1')}; +`; + +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 Header; diff --git a/shared/styles/theme.js b/shared/styles/theme.js index 7c71623ff..e301fea2b 100644 --- a/shared/styles/theme.js +++ b/shared/styles/theme.js @@ -27,8 +27,8 @@ const theme = { black: '#000000', blackLight: '#2f3336', - padding: '1.5vw 1.875vw', - vpadding: '1.5vw', + padding: '1.6vw 1.875vw', + vpadding: '1.6vw', hpadding: '1.875vw', sidebarWidth: '280px', sidebarMinWidth: '250px', From dc33cc97342cdd7ba713282cb6cabf98783ec6ff Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 1 Jul 2018 10:20:57 -0700 Subject: [PATCH 2/4] position sticky --- app/components/Sidebar/Sidebar.js | 4 +- app/scenes/Document/Document.js | 43 ++++++++--------- app/scenes/Document/components/Breadcrumb.js | 6 +++ app/scenes/Document/components/Header.js | 50 +++++++++++++------- 4 files changed, 62 insertions(+), 41 deletions(-) diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js index 1b0a89102..f69ac1620 100644 --- a/app/components/Sidebar/Sidebar.js +++ b/app/components/Sidebar/Sidebar.js @@ -59,7 +59,7 @@ const Container = styled(Flex)` background: ${props => props.theme.smoke}; transition: left 100ms ease-out; margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')}; - z-index: 1; + z-index: 2; @media print { display: none; @@ -101,7 +101,7 @@ const Toggle = styled.a` left: ${props => (props.mobileSidebarVisible ? 'auto' : 0)}; right: ${props => (props.mobileSidebarVisible ? 0 : 'auto')}; z-index: 1; - margin: 16px; + margin: 12px; ${breakpoint('tablet')` display: none; diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js index ef5147934..87fa7ff1e 100644 --- a/app/scenes/Document/Document.js +++ b/app/scenes/Document/Document.js @@ -269,7 +269,7 @@ class DocumentScene extends React.Component { } return ( - + {isMoving && document && } {titleText && } {(this.isUploading || this.isSaving) && } @@ -278,7 +278,7 @@ class DocumentScene extends React.Component { ) : ( - + {this.isEditing && ( { )} + {document && + !isShare && ( +
+ )} { toc /> - {document && - !isShare && ( -
- )} - + )} ); @@ -330,13 +328,14 @@ class DocumentScene extends React.Component { } const MaxWidth = styled(Flex)` - padding: 0 20px; + padding: 0 16px; max-width: 100vw; + width: 100%; height: 100%; ${breakpoint('tablet')` - padding: 0; - margin: 60px; + padding: 0 24px; + margin: 60px auto; max-width: 46em; `}; `; diff --git a/app/scenes/Document/components/Breadcrumb.js b/app/scenes/Document/components/Breadcrumb.js index 72b3e5b8b..352a1f005 100644 --- a/app/scenes/Document/components/Breadcrumb.js +++ b/app/scenes/Document/components/Breadcrumb.js @@ -1,5 +1,6 @@ // @flow import * as React from 'react'; +import breakpoint from 'styled-components-breakpoint'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; import { CollectionIcon, GoToIcon } from 'outline-icons'; @@ -32,6 +33,11 @@ const Breadcrumb = ({ document }: Props) => { const Wrapper = styled(Flex)` width: 33.3%; + display: none; + + ${breakpoint('tablet')` + display: flex; + `}; `; const Slash = styled(GoToIcon)` diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js index 0d064d31e..b3a7b28cf 100644 --- a/app/scenes/Document/components/Header.js +++ b/app/scenes/Document/components/Header.js @@ -1,6 +1,6 @@ // @flow import * as React from 'react'; -import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; +import { throttle } from 'lodash'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; import styled from 'styled-components'; @@ -22,7 +22,6 @@ type Props = { isSaving: boolean, isPublishing: boolean, savingIsDisabled: boolean, - editMode: boolean, onDiscard: () => *, onSave: ({ done?: boolean, @@ -36,10 +35,6 @@ type Props = { class Header extends React.Component { @observable isScrolled = false; - componentWillMount() { - this.handleScroll(); - } - componentDidMount() { window.addEventListener('scroll', this.handleScroll); } @@ -48,10 +43,12 @@ class Header extends React.Component { window.removeEventListener('scroll', this.handleScroll); } - handleScroll = () => { + updateIsScrolled = () => { this.isScrolled = window.scrollY > 75; }; + handleScroll = throttle(this.updateIsScrolled, 50); + handleNewDocument = () => { this.props.history.push(documentNewUrl(this.props.document)); }; @@ -68,6 +65,13 @@ class Header extends React.Component { this.props.onSave({ done: true, publish: true }); }; + handleClickTitle = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }; + render() { const { document, @@ -76,19 +80,19 @@ class Header extends React.Component { isPublishing, isSaving, savingIsDisabled, - editMode, } = this.props; return ( - {document.title} + + {document.title} + {!isDraft && !isEditing && } {isDraft && ( @@ -160,19 +164,25 @@ const Status = styled.div` `; const Wrapper = styled(Flex)` - width: 33.3%; + width: 100%; + align-self: flex-end; + + ${breakpoint('tablet')` + width: 33.3%; + `}; `; const Actions = styled(Flex)` - position: fixed; + position: sticky; top: 0; right: 0; - left: ${props => (props.editMode ? '0' : props.theme.sidebarWidth)}; + left: 0; + z-index: 1; background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid ${props => (props.isCompact ? props.theme.smoke : 'transparent')}; padding: 12px; - transition: all 100ms ease-out; + transition: padding 100ms ease-out; -webkit-backdrop-filter: blur(20px); @media print { @@ -180,13 +190,11 @@ const Actions = styled(Flex)` } ${breakpoint('tablet')` - padding: ${props => - props.isCompact ? '12px' : `${props.theme.padding} 0`}; + padding: ${props => (props.isCompact ? '12px' : `24px 24px 0`)}; `}; `; const Title = styled.div` - width: 33.3%; font-size: 16px; font-weight: 600; text-align: center; @@ -196,6 +204,14 @@ const Title = styled.div` overflow: hidden; transition: opacity 100ms ease-in-out; opacity: ${props => (props.isHidden ? '0' : '1')}; + cursor: ${props => (props.isHidden ? 'default' : 'pointer')}; + display: none; + width: 0; + + ${breakpoint('tablet')` + display: block; + width: 33.3%; + `}; `; const Link = styled.a` From 0e940741f6db499101930b28dc0591578d1f79b9 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 1 Jul 2018 11:54:24 -0700 Subject: [PATCH 3/4] Mobile styling --- app/scenes/Document/Document.js | 4 +++- app/scenes/Document/components/Breadcrumb.js | 25 +++++++++++++------- app/scenes/Document/components/Header.js | 11 +++++---- 3 files changed, 27 insertions(+), 13 deletions(-) diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js index 87fa7ff1e..519aee49b 100644 --- a/app/scenes/Document/Document.js +++ b/app/scenes/Document/Document.js @@ -26,6 +26,7 @@ import DocumentMove from './components/DocumentMove'; import UiStore from 'stores/UiStore'; import AuthStore from 'stores/AuthStore'; import DocumentsStore from 'stores/DocumentsStore'; +import CollectionsStore from 'stores/CollectionsStore'; import LoadingPlaceholder from 'components/LoadingPlaceholder'; import LoadingIndicator from 'components/LoadingIndicator'; import CenteredContent from 'components/CenteredContent'; @@ -50,6 +51,7 @@ type Props = { history: Object, location: Location, documents: DocumentsStore, + collections: CollectionsStore, newDocument?: boolean, auth: AuthStore, ui: UiStore, @@ -248,7 +250,7 @@ class DocumentScene extends React.Component { }; render() { - const { location, match, ui } = this.props; + const { location, match } = this.props; const Editor = this.editorComponent; const isMoving = match.path === matchDocumentMove; const document = this.document; diff --git a/app/scenes/Document/components/Breadcrumb.js b/app/scenes/Document/components/Breadcrumb.js index 352a1f005..914b4bea8 100644 --- a/app/scenes/Document/components/Breadcrumb.js +++ b/app/scenes/Document/components/Breadcrumb.js @@ -1,26 +1,31 @@ // @flow import * as React from 'react'; +import { observer, inject } from 'mobx-react'; import breakpoint from 'styled-components-breakpoint'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; import { CollectionIcon, GoToIcon } from 'outline-icons'; +import Document from 'models/Document'; +import CollectionsStore from 'stores/CollectionsStore'; import { collectionUrl } from 'utils/routeHelpers'; import Flex from 'shared/components/Flex'; -import Document from 'models/Document'; type Props = { document: Document, + collections: CollectionsStore, }; -const Breadcrumb = ({ document }: Props) => { +const Breadcrumb = observer(({ document, collections }: Props) => { const path = document.pathToDocument.slice(0, -1); + const collection = + collections.getById(document.collection.id) || document.collection; return ( - - {' '} - {document.collection.name} + + {' '} + {collection.name} {path.map(n => ( @@ -29,7 +34,7 @@ const Breadcrumb = ({ document }: Props) => { ))} ); -}; +}); const Wrapper = styled(Flex)` width: 33.3%; @@ -41,6 +46,7 @@ const Wrapper = styled(Flex)` `; const Slash = styled(GoToIcon)` + flex-shrink: 0; opacity: 0.25; `; @@ -58,10 +64,13 @@ const Crumb = styled(Link)` `; const CollectionName = styled(Link)` + display: flex; + flex-shrink: 0; color: ${props => props.theme.text}; font-size: 15px; - display: flex; font-weight: 500; + white-space: nowrap; + overflow: hidden; `; -export default Breadcrumb; +export default inject('collections')(Breadcrumb); diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js index b3a7b28cf..6428f66fb 100644 --- a/app/scenes/Document/components/Header.js +++ b/app/scenes/Document/components/Header.js @@ -95,6 +95,12 @@ class Header extends React.Component { {!isDraft && !isEditing && } + {isSaving && + !isPublishing && ( + + Saving… + + )} {isDraft && ( { {isEditing && ( - {isSaving && !isPublishing && Saving…} { isSaving={isSaving} highlight={!isDraft} > - Done + {isDraft ? 'Save Draft' : 'Done'} - {isDraft && } )} {!isEditing && ( @@ -160,7 +164,6 @@ class Header extends React.Component { const Status = styled.div` color: ${props => props.theme.slate}; - margin-right: 12px; `; const Wrapper = styled(Flex)` From f41e186da3aab721f54f056bcb2d9c8f1892f0c9 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 1 Jul 2018 11:57:17 -0700 Subject: [PATCH 4/4] :shirt: --- app/components/Actions/Actions.js | 4 ++-- app/scenes/Document/Document.js | 2 -- shared/styles/theme.js | 4 ++-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/app/components/Actions/Actions.js b/app/components/Actions/Actions.js index ae0a7cac1..3ac624b85 100644 --- a/app/components/Actions/Actions.js +++ b/app/components/Actions/Actions.js @@ -29,7 +29,7 @@ const Actions = styled(Flex)` left: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.9); - padding: 16px; + padding: 12px; -webkit-backdrop-filter: blur(20px); @media print { @@ -38,7 +38,7 @@ const Actions = styled(Flex)` ${breakpoint('tablet')` left: auto; - padding: ${props => props.theme.vpadding} ${props => props.theme.hpadding}; + padding: 24px; `}; `; diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js index 519aee49b..937ccf08c 100644 --- a/app/scenes/Document/Document.js +++ b/app/scenes/Document/Document.js @@ -26,7 +26,6 @@ import DocumentMove from './components/DocumentMove'; import UiStore from 'stores/UiStore'; import AuthStore from 'stores/AuthStore'; import DocumentsStore from 'stores/DocumentsStore'; -import CollectionsStore from 'stores/CollectionsStore'; import LoadingPlaceholder from 'components/LoadingPlaceholder'; import LoadingIndicator from 'components/LoadingIndicator'; import CenteredContent from 'components/CenteredContent'; @@ -51,7 +50,6 @@ type Props = { history: Object, location: Location, documents: DocumentsStore, - collections: CollectionsStore, newDocument?: boolean, auth: AuthStore, ui: UiStore, diff --git a/shared/styles/theme.js b/shared/styles/theme.js index e301fea2b..7c71623ff 100644 --- a/shared/styles/theme.js +++ b/shared/styles/theme.js @@ -27,8 +27,8 @@ const theme = { black: '#000000', blackLight: '#2f3336', - padding: '1.6vw 1.875vw', - vpadding: '1.6vw', + padding: '1.5vw 1.875vw', + vpadding: '1.5vw', hpadding: '1.875vw', sidebarWidth: '280px', sidebarMinWidth: '250px',