From 3c9f69d4950aeeefb72481359a4954be577447d5 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Mon, 4 Sep 2017 12:14:18 -0700 Subject: [PATCH 1/5] Feather icons --- .../DocumentPreview/DocumentPreview.js | 15 ++++---- frontend/components/Layout/Layout.js | 37 +++++++++++-------- .../SidebarCollection/SidebarCollection.js | 4 +- .../SidebarCollectionList.js | 4 +- package.json | 1 + yarn.lock | 4 ++ 6 files changed, 37 insertions(+), 28 deletions(-) diff --git a/frontend/components/DocumentPreview/DocumentPreview.js b/frontend/components/DocumentPreview/DocumentPreview.js index 91d8bff18..ee33b6464 100644 --- a/frontend/components/DocumentPreview/DocumentPreview.js +++ b/frontend/components/DocumentPreview/DocumentPreview.js @@ -2,11 +2,11 @@ import React, { Component } from 'react'; import { observer } from 'mobx-react'; import { Link } from 'react-router-dom'; +import { Star as StarIcon } from 'react-feather'; import Document from 'models/Document'; import styled from 'styled-components'; import { color } from 'styles/constants'; import PublishingInfo from './components/PublishingInfo'; -import StarIcon from 'components/Icon/StarIcon'; type Props = { document: Document, @@ -21,11 +21,6 @@ const StyledStar = styled(StarIcon)` margin-left: 4px; opacity: ${props => (props.solid ? '1 !important' : 0)}; transition: opacity 100ms ease-in-out; - - svg { - width: 1em; - height: 1em; - } `; const DocumentLink = styled(Link)` @@ -87,8 +82,12 @@ const DocumentLink = styled(Link)`

{document.title} {document.starred - ? - : } + ? + + + : + + }

- Home - Search - Starred + + Home + + + Search + + + Starred + {collections.active ? - + : - + } {collections.active ? Date: Mon, 4 Sep 2017 13:23:20 -0700 Subject: [PATCH 2/5] Remove unused icons --- .../DocumentPreview/DocumentPreview.js | 15 ++++--- .../components/MoreIcon/MoreIcon.js | 16 ------- .../components/MoreIcon/MoreIcon.scss | 4 -- .../components/MoreIcon/assets/more.svg | 1 - .../DropdownMenu/components/MoreIcon/index.js | 3 -- frontend/components/DropdownMenu/index.js | 4 +- .../Toolbar/components/LinkToolbar.js | 4 +- frontend/components/Icon/AddIcon.js | 21 --------- frontend/components/Icon/CheckIcon.js | 21 --------- frontend/components/Icon/CloseIcon.js | 21 --------- frontend/components/Icon/Icon.js | 32 ++++++++++++-- frontend/components/Icon/Icon.scss | 9 ---- frontend/components/Icon/MoreIcon.js | 21 --------- frontend/components/Icon/QuoteIcon.js | 21 --------- frontend/components/Icon/StarIcon.js | 43 ------------------- frontend/components/Layout/Layout.js | 20 +++------ frontend/components/Modal/Modal.js | 7 +-- frontend/scenes/Document/components/Menu.js | 9 ++-- .../components/SearchField/SearchField.js | 29 ++++++------- 19 files changed, 68 insertions(+), 233 deletions(-) delete mode 100644 frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js delete mode 100644 frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.scss delete mode 100644 frontend/components/DropdownMenu/components/MoreIcon/assets/more.svg delete mode 100644 frontend/components/DropdownMenu/components/MoreIcon/index.js delete mode 100644 frontend/components/Icon/AddIcon.js delete mode 100644 frontend/components/Icon/CheckIcon.js delete mode 100644 frontend/components/Icon/CloseIcon.js delete mode 100644 frontend/components/Icon/Icon.scss delete mode 100644 frontend/components/Icon/MoreIcon.js delete mode 100644 frontend/components/Icon/QuoteIcon.js delete mode 100644 frontend/components/Icon/StarIcon.js diff --git a/frontend/components/DocumentPreview/DocumentPreview.js b/frontend/components/DocumentPreview/DocumentPreview.js index ee33b6464..f82bb1424 100644 --- a/frontend/components/DocumentPreview/DocumentPreview.js +++ b/frontend/components/DocumentPreview/DocumentPreview.js @@ -2,10 +2,10 @@ import React, { Component } from 'react'; import { observer } from 'mobx-react'; import { Link } from 'react-router-dom'; -import { Star as StarIcon } from 'react-feather'; import Document from 'models/Document'; import styled from 'styled-components'; import { color } from 'styles/constants'; +import Icon from 'components/Icon'; import PublishingInfo from './components/PublishingInfo'; type Props = { @@ -15,9 +15,10 @@ type Props = { innerRef?: Function, }; -const StyledStar = styled(StarIcon)` - top: 2px; - position: relative; +const StyledStar = styled(Icon).attrs({ + type: 'Star', + color: color.text, +})` margin-left: 4px; opacity: ${props => (props.solid ? '1 !important' : 0)}; transition: opacity 100ms ease-in-out; @@ -41,7 +42,7 @@ const DocumentLink = styled(Link)` outline: none; ${StyledStar} { - opacity: .25; + opacity: .5; &:hover { opacity: 1; @@ -83,10 +84,10 @@ const DocumentLink = styled(Link)` {document.title} {document.starred ? - + : - + } { - return ( - More - ); -}; - -export default MoreIcon; diff --git a/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.scss b/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.scss deleted file mode 100644 index 328840769..000000000 --- a/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.scss +++ /dev/null @@ -1,4 +0,0 @@ -.icon { - width: 21px; - margin-top: 6px; -} diff --git a/frontend/components/DropdownMenu/components/MoreIcon/assets/more.svg b/frontend/components/DropdownMenu/components/MoreIcon/assets/more.svg deleted file mode 100644 index f6e12e971..000000000 --- a/frontend/components/DropdownMenu/components/MoreIcon/assets/more.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/frontend/components/DropdownMenu/components/MoreIcon/index.js b/frontend/components/DropdownMenu/components/MoreIcon/index.js deleted file mode 100644 index a4d1358e6..000000000 --- a/frontend/components/DropdownMenu/components/MoreIcon/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// @flow -import MoreIcon from './MoreIcon'; -export default MoreIcon; diff --git a/frontend/components/DropdownMenu/index.js b/frontend/components/DropdownMenu/index.js index fd1562125..11e84f9cb 100644 --- a/frontend/components/DropdownMenu/index.js +++ b/frontend/components/DropdownMenu/index.js @@ -1,4 +1,2 @@ // @flow -import { DropdownMenu, DropdownMenuItem } from './DropdownMenu'; -import MoreIcon from './components/MoreIcon'; -export { DropdownMenu, DropdownMenuItem, MoreIcon }; +export { DropdownMenu, DropdownMenuItem } from './DropdownMenu'; diff --git a/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js b/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js index c02f727fe..badee913d 100644 --- a/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js +++ b/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import type { State } from '../../../types'; import keydown from 'react-keydown'; import styles from '../Toolbar.scss'; -import CloseIcon from 'components/Icon/CloseIcon'; +import Icon from 'components/Icon'; @keydown export default class LinkToolbar extends Component { @@ -58,7 +58,7 @@ export default class LinkToolbar extends Component { autoFocus /> ); diff --git a/frontend/components/Icon/AddIcon.js b/frontend/components/Icon/AddIcon.js deleted file mode 100644 index 688202cfc..000000000 --- a/frontend/components/Icon/AddIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow -import React from 'react'; -import Icon from './Icon'; -import type { Props } from './Icon'; - -export default function AddIcon(props: Props) { - return ( - - - - - - - ); -} diff --git a/frontend/components/Icon/CheckIcon.js b/frontend/components/Icon/CheckIcon.js deleted file mode 100644 index ab6ea35e3..000000000 --- a/frontend/components/Icon/CheckIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow -import React from 'react'; -import Icon from './Icon'; -import type { Props } from './Icon'; - -export default function CheckIcon(props: Props) { - return ( - - - - - - - ); -} diff --git a/frontend/components/Icon/CloseIcon.js b/frontend/components/Icon/CloseIcon.js deleted file mode 100644 index c93cc6bd3..000000000 --- a/frontend/components/Icon/CloseIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow -import React from 'react'; -import Icon from './Icon'; -import type { Props } from './Icon'; - -export default function CloseIcon(props: Props) { - return ( - - - - - - - ); -} diff --git a/frontend/components/Icon/Icon.js b/frontend/components/Icon/Icon.js index 11e26a2d3..44811b1ec 100644 --- a/frontend/components/Icon/Icon.js +++ b/frontend/components/Icon/Icon.js @@ -1,9 +1,11 @@ // @flow import React from 'react'; import styled from 'styled-components'; +import * as Icons from 'react-feather'; export type Props = { className?: string, + type?: string, light?: boolean, }; @@ -11,16 +13,40 @@ type BaseProps = { children?: React$Element, }; -export default function Icon({ children, ...rest }: Props & BaseProps) { +export default function Icon({ + children, + light, + type, + ...rest +}: Props & BaseProps) { + if (type) { + children = React.createElement(Icons[type], { + size: '1em', + color: light ? '#FFFFFF' : undefined, + ...rest, + }); + + return ( + + {children} + + ); + } + return ( - + {children} ); } +const FeatherWrapper = styled.span` + position: relative; + top: .1em; +`; + const Wrapper = styled.span` svg { - fill: ${props => (props.light ? '#fff' : '#000')}; + fill: ${props => (props.light ? '#FFF' : '#000')} } `; diff --git a/frontend/components/Icon/Icon.scss b/frontend/components/Icon/Icon.scss deleted file mode 100644 index 7fd441749..000000000 --- a/frontend/components/Icon/Icon.scss +++ /dev/null @@ -1,9 +0,0 @@ -.icon { - -} - -.light { - svg { - fill: #fff; - } -} diff --git a/frontend/components/Icon/MoreIcon.js b/frontend/components/Icon/MoreIcon.js deleted file mode 100644 index 5e8126ff0..000000000 --- a/frontend/components/Icon/MoreIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow -import React from 'react'; -import Icon from './Icon'; -import type { Props } from './Icon'; - -export default function MoreIcon(props: Props) { - return ( - - - - - - - ); -} diff --git a/frontend/components/Icon/QuoteIcon.js b/frontend/components/Icon/QuoteIcon.js deleted file mode 100644 index 6b80497a6..000000000 --- a/frontend/components/Icon/QuoteIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow -import React from 'react'; -import Icon from './Icon'; -import type { Props } from './Icon'; - -export default function QuoteIcon(props: Props) { - return ( - - - - - - - ); -} diff --git a/frontend/components/Icon/StarIcon.js b/frontend/components/Icon/StarIcon.js deleted file mode 100644 index 9939785e9..000000000 --- a/frontend/components/Icon/StarIcon.js +++ /dev/null @@ -1,43 +0,0 @@ -// @flow -import React from 'react'; -import Icon from './Icon'; -import type { Props } from './Icon'; - -export default function StarIcon(props: Props & { solid?: boolean }) { - let icon; - - if (props.solid) { - icon = ( - - - - - - ); - } else { - icon = ( - - - - - ); - } - - return ( - - {icon} - - ); -} diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index db4e73c23..485926455 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -16,13 +16,7 @@ import Avatar from 'components/Avatar'; import { LoadingIndicatorBar } from 'components/LoadingIndicator'; import Scrollable from 'components/Scrollable'; import Modal from 'components/Modal'; -import { - Home as HomeIcon, - Search as SearchIcon, - Star as StarIcon, - PlusCircle as AddIcon, - MoreHorizontal as MoreIcon, -} from 'react-feather'; +import Icon from 'components/Icon'; import CollectionNew from 'scenes/CollectionNew'; import CollectionEdit from 'scenes/CollectionEdit'; import KeyboardShortcuts from 'scenes/KeyboardShortcuts'; @@ -162,22 +156,22 @@ type Props = { - Home + Home - Search + Search - Starred + Starred {collections.active ? - + : - + } {collections.active ? {title &&

{title}

} - + {children} @@ -68,6 +68,7 @@ const Close = styled.a` top: 3rem; right: 3rem; opacity: .5; + color: ${color.text}; &:hover { opacity: 1; diff --git a/frontend/scenes/Document/components/Menu.js b/frontend/scenes/Document/components/Menu.js index ae315d82c..9bae6f0b8 100644 --- a/frontend/scenes/Document/components/Menu.js +++ b/frontend/scenes/Document/components/Menu.js @@ -5,11 +5,8 @@ import get from 'lodash/get'; import { withRouter } from 'react-router-dom'; import { observer } from 'mobx-react'; import Document from 'models/Document'; -import { - DropdownMenu, - DropdownMenuItem, - MoreIcon, -} from 'components/DropdownMenu'; +import Icon from 'components/Icon'; +import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; type Props = { history: Object, @@ -65,7 +62,7 @@ type Props = { collection.documents.length > 1; return ( - }> + }> {collection &&
diff --git a/frontend/scenes/Search/components/SearchField/SearchField.js b/frontend/scenes/Search/components/SearchField/SearchField.js index 785a3a49f..6b2f6577d 100644 --- a/frontend/scenes/Search/components/SearchField/SearchField.js +++ b/frontend/scenes/Search/components/SearchField/SearchField.js @@ -1,8 +1,9 @@ // @flow import React, { Component } from 'react'; +import Icon from 'components/Icon'; import Flex from 'components/Flex'; +import { color } from 'styles/constants'; import styled from 'styled-components'; -import searchImg from 'assets/icons/search.svg'; const Field = styled.input` width: 100%; @@ -12,17 +13,10 @@ const Field = styled.input` outline: none; border: 0; - ::-webkit-input-placeholder { color: #ccc; } - :-moz-placeholder { color: #ccc; } - ::-moz-placeholder { color: #ccc; } - :-ms-input-placeholder { color: #ccc; } -`; - -const Icon = styled.img` - width: 38px; - margin-bottom: -5px; - margin-right: 10px; - opacity: 0.15; + ::-webkit-input-placeholder { color: ${color.slate}; } + :-moz-placeholder { color: ${color.slate}; } + ::-moz-placeholder { color: ${color.slate}; } + :-ms-input-placeholder { color: ${color.slate}; } `; class SearchField extends Component { @@ -45,13 +39,18 @@ class SearchField extends Component { render() { return ( - - + + From e72d33e4ece30e3a442fca5b0e5819cd23a5dc13 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Mon, 4 Sep 2017 14:23:08 -0700 Subject: [PATCH 3/5] Cleanup, document menu --- .../components/Collaborators/Collaborators.js | 1 - .../components/HeaderAction/HeaderAction.js | 16 -------- .../components/HeaderAction/HeaderAction.scss | 11 ------ .../Layout/components/HeaderAction/index.js | 3 -- frontend/components/Layout/index.js | 3 +- frontend/scenes/Document/Document.js | 38 +++++++++++++++---- 6 files changed, 31 insertions(+), 41 deletions(-) delete mode 100644 frontend/components/Layout/components/HeaderAction/HeaderAction.js delete mode 100644 frontend/components/Layout/components/HeaderAction/HeaderAction.scss delete mode 100644 frontend/components/Layout/components/HeaderAction/index.js diff --git a/frontend/components/Collaborators/Collaborators.js b/frontend/components/Collaborators/Collaborators.js index 487921fdd..ae62fd1b4 100644 --- a/frontend/components/Collaborators/Collaborators.js +++ b/frontend/components/Collaborators/Collaborators.js @@ -36,7 +36,6 @@ const Collaborators = function({ document }: { document: Document }) { const Avatars = styled(Flex)` flex-direction: row-reverse; - margin-right: 10px; height: 26px; `; diff --git a/frontend/components/Layout/components/HeaderAction/HeaderAction.js b/frontend/components/Layout/components/HeaderAction/HeaderAction.js deleted file mode 100644 index c49806c4a..000000000 --- a/frontend/components/Layout/components/HeaderAction/HeaderAction.js +++ /dev/null @@ -1,16 +0,0 @@ -// @flow -import React from 'react'; - -import styles from './HeaderAction.scss'; - -type Props = { onClick?: ?Function, children?: ?React.Element }; - -const HeaderAction = (props: Props) => { - return ( -
- {props.children} -
- ); -}; - -export default HeaderAction; diff --git a/frontend/components/Layout/components/HeaderAction/HeaderAction.scss b/frontend/components/Layout/components/HeaderAction/HeaderAction.scss deleted file mode 100644 index cc5013907..000000000 --- a/frontend/components/Layout/components/HeaderAction/HeaderAction.scss +++ /dev/null @@ -1,11 +0,0 @@ -.container { - display: flex; - justify-content: center; - align-items: center; - min-height: 43px; - padding: 0 0.5rem; - - a { - color: #171B35; - } -} diff --git a/frontend/components/Layout/components/HeaderAction/index.js b/frontend/components/Layout/components/HeaderAction/index.js deleted file mode 100644 index e231db11a..000000000 --- a/frontend/components/Layout/components/HeaderAction/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// @flow -import HeaderAction from './HeaderAction'; -export default HeaderAction; diff --git a/frontend/components/Layout/index.js b/frontend/components/Layout/index.js index 38c7a426f..fb7b105d1 100644 --- a/frontend/components/Layout/index.js +++ b/frontend/components/Layout/index.js @@ -1,8 +1,7 @@ // @flow import Layout from './Layout'; import Title from './components/Title'; -import HeaderAction from './components/HeaderAction'; export default Layout; -export { Title, HeaderAction }; +export { Title }; diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index 531d289fd..dd7d78e05 100644 --- a/frontend/scenes/Document/Document.js +++ b/frontend/scenes/Document/Document.js @@ -5,7 +5,7 @@ import styled from 'styled-components'; import { observer, inject } from 'mobx-react'; import { withRouter, Prompt } from 'react-router'; import Flex from 'components/Flex'; -import { layout } from 'styles/constants'; +import { color, layout } from 'styles/constants'; import Document from 'models/Document'; import UiStore from 'stores/UiStore'; @@ -13,9 +13,10 @@ import DocumentsStore from 'stores/DocumentsStore'; import Menu from './components/Menu'; import SaveAction from './components/SaveAction'; import LoadingPlaceholder from 'components/LoadingPlaceholder'; +import Button from 'components/Button'; import Editor from 'components/Editor'; +import Icon from 'components/Icon'; import DropToImport from 'components/DropToImport'; -import { HeaderAction } from 'components/Layout'; import LoadingIndicator from 'components/LoadingIndicator'; import Collaborators from 'components/Collaborators'; import CenteredContent from 'components/CenteredContent'; @@ -215,13 +216,22 @@ type Props = { } isNew={!!isNew} /> - : Edit} + : + Edit + } + + + {isEditing + ? undefined + : + New + } + + + {isEditing + ? Cancel + : } - {isEditing && - - Cancel - } - {!isEditing && } @@ -231,6 +241,18 @@ type Props = { } } +const HeaderAction = styled(Flex)` + justify-content: center; + align-items: center; + min-height: 43px; + color: ${color.text}; + padding: 0 0 0 16px; + + a { + color: ${color.text}; + } +`; + const DropHere = styled(Flex)` pointer-events: none; position: fixed; From 73ff473b49944197319d4da6588a488c1e446db8 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Tue, 5 Sep 2017 20:37:46 -0700 Subject: [PATCH 4/5] Cleanup --- frontend/assets/icons/menu.svg | 1 - frontend/assets/icons/search.svg | 1 - frontend/components/Button/Button.js | 60 ++++++++++++++++--- .../components/DropdownMenu/DropdownMenu.js | 2 - frontend/scenes/Document/Document.js | 27 +++++---- 5 files changed, 66 insertions(+), 25 deletions(-) delete mode 100644 frontend/assets/icons/menu.svg delete mode 100644 frontend/assets/icons/search.svg diff --git a/frontend/assets/icons/menu.svg b/frontend/assets/icons/menu.svg deleted file mode 100644 index 4523b5a1b..000000000 --- a/frontend/assets/icons/menu.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/frontend/assets/icons/search.svg b/frontend/assets/icons/search.svg deleted file mode 100644 index f974b540a..000000000 --- a/frontend/assets/icons/search.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/components/Button/Button.js b/frontend/components/Button/Button.js index d0b3afffd..20ecb553c 100644 --- a/frontend/components/Button/Button.js +++ b/frontend/components/Button/Button.js @@ -1,17 +1,18 @@ // @flow import React from 'react'; import styled from 'styled-components'; -import { size, color } from 'styles/constants'; -import { darken } from 'polished'; +import { color } from 'styles/constants'; +import { darken, lighten } from 'polished'; const RealButton = styled.button` display: inline-block; - margin: 0 ${size.medium} ${size.large} 0; + margin: 0; padding: 0; border: 0; - background: ${props => (props.neutral ? color.slate : props.danger ? color.danger : color.primary)}; + background: ${color.primary}; color: ${color.white}; border-radius: 4px; + font-size: 15px; min-width: 32px; min-height: 32px; text-decoration: none; @@ -23,30 +24,70 @@ const RealButton = styled.button` border: 0; } &:hover { - background: ${props => darken(0.05, props.neutral ? color.slate : props.danger ? color.danger : color.primary)}; + background: ${darken(0.05, color.primary)}; } + + svg { + position: relative; + top: .05em; + } + + ${props => props.light && ` + color: ${color.text}; + background: ${lighten(0.08, color.slateLight)}; + + &:hover { + background: ${color.slateLight}; + } + `} + + ${props => props.neutral && ` + background: ${color.slate}; + + &:hover { + background: ${darken(0.05, color.slate)}; + } + `} + + ${props => props.danger && ` + background: ${color.danger}; + + &:hover { + background: ${darken(0.05, color.danger)}; + } + `} + &:disabled { background: ${color.slateLight}; } `; const Label = styled.span` - padding: 4px 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - font-weight: 500; + + ${props => props.hasIcon && 'padding-left: 2px;'} `; const Inner = styled.span` + padding: 4px 16px; display: flex; line-height: 28px; justify-content: center; + align-items: center; + + ${props => props.small && ` + padding: 1px 10px; + `} + + ${props => props.hasIcon && (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')} `; export type Props = { type?: string, value?: string, + small?: boolean, icon?: React$Element, className?: string, children?: React$Element, @@ -56,6 +97,7 @@ export default function Button({ type = 'text', icon, children, + small, value, ...rest }: Props) { @@ -64,9 +106,9 @@ export default function Button({ return ( - + {hasIcon && icon} - {hasText && } + {hasText && } ); diff --git a/frontend/components/DropdownMenu/DropdownMenu.js b/frontend/components/DropdownMenu/DropdownMenu.js index 69874c0ad..0e1cd9c9b 100644 --- a/frontend/components/DropdownMenu/DropdownMenu.js +++ b/frontend/components/DropdownMenu/DropdownMenu.js @@ -64,9 +64,7 @@ const Label = styled(Flex).attrs({ justify: 'center', align: 'center', })` - cursor: pointer; z-index: 1000; - min-height: 43px; `; const MenuContainer = styled.div` diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index dd7d78e05..fafd5260a 100644 --- a/frontend/scenes/Document/Document.js +++ b/frontend/scenes/Document/Document.js @@ -216,21 +216,24 @@ type Props = { } isNew={!!isNew} /> - : - Edit - } - - - {isEditing - ? undefined - : - New - } + : } {isEditing ? Cancel - : } + : } @@ -246,7 +249,7 @@ const HeaderAction = styled(Flex)` align-items: center; min-height: 43px; color: ${color.text}; - padding: 0 0 0 16px; + padding: 0 0 0 10px; a { color: ${color.text}; From dcbad23cb1ff48ebd2ceaaf7fceea8181b0e0543 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Fri, 8 Sep 2017 22:06:47 -0700 Subject: [PATCH 5/5] Styling document actions more inline with medium --- .../components/DropdownMenu/DropdownMenu.js | 1 + .../SidebarCollection/SidebarCollection.js | 4 +- .../SidebarCollectionList.js | 8 ++-- .../components/SidebarLink/SidebarLink.js | 14 ++++--- frontend/scenes/Document/Document.js | 40 +++++++++++++------ frontend/styles/constants.js | 2 +- 6 files changed, 43 insertions(+), 26 deletions(-) diff --git a/frontend/components/DropdownMenu/DropdownMenu.js b/frontend/components/DropdownMenu/DropdownMenu.js index 0e1cd9c9b..20ecf1ce8 100644 --- a/frontend/components/DropdownMenu/DropdownMenu.js +++ b/frontend/components/DropdownMenu/DropdownMenu.js @@ -65,6 +65,7 @@ const Label = styled(Flex).attrs({ align: 'center', })` z-index: 1000; + cursor: pointer; `; const MenuContainer = styled.div` diff --git a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js index af5910798..9d1cefdda 100644 --- a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js +++ b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js @@ -18,8 +18,8 @@ type Props = { }; const activeStyle = { - color: '#000', - background: '#E1E1E1', + color: color.black, + background: color.slateDark, }; @observer class SidebarCollection extends React.Component { diff --git a/frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js b/frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js index c763fceaf..9318e4370 100644 --- a/frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js +++ b/frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js @@ -3,7 +3,7 @@ import React from 'react'; import { observer, inject } from 'mobx-react'; import Flex from 'components/Flex'; import styled from 'styled-components'; -import { color, layout } from 'styles/constants'; +import { color, layout, fontWeight } from 'styles/constants'; import SidebarLink from '../SidebarLink'; import DropToImport from 'components/DropToImport'; @@ -16,8 +16,8 @@ type Props = { }; const activeStyle = { - color: '#000', - background: '#E1E1E1', + color: color.black, + background: color.slateDark, }; const SidebarCollectionList = observer(({ history, collections }: Props) => { @@ -42,7 +42,7 @@ const SidebarCollectionList = observer(({ history, collections }: Props) => { const Header = styled(Flex)` font-size: 11px; - font-weight: 500; + font-weight: ${fontWeight.semiBold}; text-transform: uppercase; color: ${color.slate}; letter-spacing: 0.04em; diff --git a/frontend/components/Layout/components/SidebarLink/SidebarLink.js b/frontend/components/Layout/components/SidebarLink/SidebarLink.js index d09f85c3f..cb6f2b0e1 100644 --- a/frontend/components/Layout/components/SidebarLink/SidebarLink.js +++ b/frontend/components/Layout/components/SidebarLink/SidebarLink.js @@ -1,26 +1,28 @@ // @flow import React from 'react'; import { NavLink } from 'react-router-dom'; -import { layout, color } from 'styles/constants'; -import { darken } from 'polished'; +import { layout, color, fontWeight } from 'styles/constants'; import styled from 'styled-components'; const activeStyle = { - color: '#000000', + color: color.black, + fontWeight: fontWeight.semiBold, }; function SidebarLink(props: Object) { - return ; + return ; } const StyledNavLink = styled(NavLink)` display: block; - padding: 5px ${layout.hpadding}; + overflow: hidden; + text-overflow: ellipsis; + margin: 5px ${layout.hpadding}; color: ${color.slateDark}; font-size: 15px; &:hover { - color: ${darken(0.1, color.slateDark)}; + color: ${color.text}; } `; diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index fafd5260a..24e48b9a5 100644 --- a/frontend/scenes/Document/Document.js +++ b/frontend/scenes/Document/Document.js @@ -13,9 +13,7 @@ import DocumentsStore from 'stores/DocumentsStore'; import Menu from './components/Menu'; import SaveAction from './components/SaveAction'; import LoadingPlaceholder from 'components/LoadingPlaceholder'; -import Button from 'components/Button'; import Editor from 'components/Editor'; -import Icon from 'components/Icon'; import DropToImport from 'components/DropToImport'; import LoadingIndicator from 'components/LoadingIndicator'; import Collaborators from 'components/Collaborators'; @@ -105,6 +103,11 @@ type Props = { this.props.history.push(url); }; + onClickNew = () => { + if (!this.document) return; + this.props.history.push(`${this.document.collection.url}/new`); + }; + onSave = async (redirect: boolean = false) => { if (this.document && !this.document.allowSave) return; let document = this.document; @@ -216,24 +219,21 @@ type Props = { } isNew={!!isNew} /> - : } + } {isEditing ? Cancel - : } + } @@ -244,15 +244,29 @@ type Props = { } } +const Separator = styled.div` + margin-left: 12px; + width: 1px; + height: 20px; + background: ${color.slateLight}; +`; + const HeaderAction = styled(Flex)` justify-content: center; align-items: center; min-height: 43px; color: ${color.text}; - padding: 0 0 0 10px; + padding: 0 0 0 14px; - a { + a, + svg { color: ${color.text}; + opacity: .8; + transition: opacity 100ms ease-in-out; + + &:hover { + opacity: 1; + } } `; diff --git a/frontend/styles/constants.js b/frontend/styles/constants.js index 56bf05aa1..bfdf50e50 100644 --- a/frontend/styles/constants.js +++ b/frontend/styles/constants.js @@ -31,7 +31,7 @@ export const fontWeight = { light: 300, regular: 400, medium: 500, - demiBold: 600, + semiBold: 600, bold: 700, heavy: 800, };