From 920aee223bbee6bdbc49bf031683c3ef6191ade0 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Tue, 4 Jul 2017 12:21:11 -0500 Subject: [PATCH 1/5] removed unused css file --- frontend/scenes/Flatpage/Flatpage.scss | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 frontend/scenes/Flatpage/Flatpage.scss diff --git a/frontend/scenes/Flatpage/Flatpage.scss b/frontend/scenes/Flatpage/Flatpage.scss deleted file mode 100644 index e69de29bb..000000000 From 53e4a94c079449d48bd78c974a23edb1b107daa7 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Tue, 4 Jul 2017 12:22:23 -0500 Subject: [PATCH 2/5] simplified CenteredContent and fixed alignment issues --- .../CenteredContent/CenteredContent.js | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/frontend/components/CenteredContent/CenteredContent.js b/frontend/components/CenteredContent/CenteredContent.js index 2d6cdd5a6..6f135e1e0 100644 --- a/frontend/components/CenteredContent/CenteredContent.js +++ b/frontend/components/CenteredContent/CenteredContent.js @@ -4,8 +4,6 @@ import styled from 'styled-components'; type Props = { children?: React.Element, - style?: Object, - maxWidth?: string, }; const Container = styled.div` @@ -13,20 +11,17 @@ const Container = styled.div` margin: 40px 20px; `; -const CenteredContent = ({ - children, - maxWidth = '740px', - style, - ...rest -}: Props) => { - const styles = { - maxWidth, - ...style, - }; +const Content = styled.div` + max-width: 740px; + margin: 0 auto; +`; +const CenteredContent = ({ children, ...rest }: Props) => { return ( - - {children} + + + {children} + ); }; From 8b3b3222b781cfcb0cfd6b45ecb2b9d75e4cb116 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Tue, 4 Jul 2017 20:15:01 -0700 Subject: [PATCH 3/5] Swapped Flex to homegrown component No more element prop warnings! --- frontend/components/Alert/Alert.js | 2 +- .../components/DocumentViews/DocumentViews.js | 2 +- .../DocumentViewers/DocumentViewers.js | 2 +- frontend/components/Flex/Flex.js | 64 +++++++++++++++++++ frontend/components/Flex/index.js | 3 + frontend/components/Input/Input.js | 2 +- frontend/components/Layout/Layout.js | 2 +- .../SidebarCollection/SidebarCollection.js | 2 +- .../SidebarCollectionList.js | 2 +- .../components/SidebarLink/SidebarLink.js | 2 +- .../PreviewLoading/PreviewLoading.js | 2 +- .../PublishingInfo/PublishingInfo.js | 2 +- frontend/index.js | 2 +- frontend/scenes/Document/Document.js | 2 +- frontend/scenes/Home/Home.js | 2 +- frontend/scenes/Search/Search.js | 2 +- .../components/SearchField/SearchField.js | 2 +- frontend/scenes/Settings/Settings.js | 2 +- package.json | 1 - 19 files changed, 83 insertions(+), 17 deletions(-) create mode 100644 frontend/components/Flex/Flex.js create mode 100644 frontend/components/Flex/index.js diff --git a/frontend/components/Alert/Alert.js b/frontend/components/Alert/Alert.js index 830227569..70c2081d5 100644 --- a/frontend/components/Alert/Alert.js +++ b/frontend/components/Alert/Alert.js @@ -1,6 +1,6 @@ // @flow import React, { PropTypes } from 'react'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import classNames from 'classnames/bind'; import styles from './Alert.scss'; diff --git a/frontend/components/DocumentViews/DocumentViews.js b/frontend/components/DocumentViews/DocumentViews.js index 7d0c67d0a..0ff1b2d16 100644 --- a/frontend/components/DocumentViews/DocumentViews.js +++ b/frontend/components/DocumentViews/DocumentViews.js @@ -5,7 +5,7 @@ import Popover from 'components/Popover'; import styled from 'styled-components'; import DocumentViewers from './components/DocumentViewers'; import DocumentViewersStore from './DocumentViewersStore'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; const Container = styled(Flex)` font-size: 13px; diff --git a/frontend/components/DocumentViews/components/DocumentViewers/DocumentViewers.js b/frontend/components/DocumentViews/components/DocumentViewers/DocumentViewers.js index ecd4289f8..e545a8d3c 100644 --- a/frontend/components/DocumentViews/components/DocumentViewers/DocumentViewers.js +++ b/frontend/components/DocumentViews/components/DocumentViewers/DocumentViewers.js @@ -1,6 +1,6 @@ // @flow import React, { Component } from 'react'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import styled from 'styled-components'; import map from 'lodash/map'; import Avatar from 'components/Avatar'; diff --git a/frontend/components/Flex/Flex.js b/frontend/components/Flex/Flex.js new file mode 100644 index 000000000..be6c9a94a --- /dev/null +++ b/frontend/components/Flex/Flex.js @@ -0,0 +1,64 @@ +// @flow +import React from 'react'; +import styled from 'styled-components'; + +type JustifyValues = + | 'center' + | 'space-around' + | 'space-between' + | 'flex-start' + | 'flex-end'; + +type AlignValues = + | 'stretch' + | 'center' + | 'baseline' + | 'flex-start' + | 'flex-end'; + +type Props = { + column?: ?boolean, + align?: AlignValues, + justify?: JustifyValues, + auto?: ?boolean, + className?: string, + children?: React.Element, +}; + +const Flex = (props: Props) => { + const { children, ...restProps } = props; + return {children}; +}; + +const Container = styled.div` + display: flex; + flex: ${({ auto }) => (auto ? '1 1 auto' : 'initial')}; + flex-direction: ${({ column }) => (column ? 'column' : 'row')}; + align-items: ${({ align }) => align}; + justify-content: ${({ justify }) => justify}; +`; + +export default Flex; + +// flex: React.PropTypes.bool, +// wrap: React.PropTypes.bool, +// flexColumn: React.PropTypes.bool, +// column: React.PropTypes.bool, +// align: React.PropTypes.oneOf([ +// 'stretch', +// 'center', +// 'baseline', +// 'flex-start', +// 'flex-end' +// ]), +// justify: React.PropTypes.oneOf([ +// 'center', +// 'space-around', +// 'space-between', +// 'flex-start', +// 'flex-end' +// ]), +// flexAuto: React.PropTypes.bool, +// auto: React.PropTypes.bool, +// flexNone: React.PropTypes.bool, +// order: React.PropTypes.number, diff --git a/frontend/components/Flex/index.js b/frontend/components/Flex/index.js new file mode 100644 index 000000000..d798e8cd8 --- /dev/null +++ b/frontend/components/Flex/index.js @@ -0,0 +1,3 @@ +// @flow +import Flex from './Flex'; +export default Flex; diff --git a/frontend/components/Input/Input.js b/frontend/components/Input/Input.js index da09d5417..9ac8641e6 100644 --- a/frontend/components/Input/Input.js +++ b/frontend/components/Input/Input.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import styled from 'styled-components'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import { size } from 'styles/constants'; const RealTextarea = styled.textarea` diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index fdc2e1792..cb0b7648a 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -6,7 +6,7 @@ import styled from 'styled-components'; import { observer, inject } from 'mobx-react'; import _ from 'lodash'; import keydown from 'react-keydown'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import { textColor } from 'styles/constants.scss'; import DropdownMenu, { MenuItem } from 'components/DropdownMenu'; diff --git a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js index ec197e6c3..3b9329e35 100644 --- a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js +++ b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js @@ -1,6 +1,6 @@ // @flow import React from 'react'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import styled from 'styled-components'; import SidebarLink from '../SidebarLink'; diff --git a/frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js b/frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js index 0115ec666..0f865e3dd 100644 --- a/frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js +++ b/frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import { observer, inject } from 'mobx-react'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import styled from 'styled-components'; import SidebarLink from '../SidebarLink'; diff --git a/frontend/components/Layout/components/SidebarLink/SidebarLink.js b/frontend/components/Layout/components/SidebarLink/SidebarLink.js index eed38e036..1e73d5e13 100644 --- a/frontend/components/Layout/components/SidebarLink/SidebarLink.js +++ b/frontend/components/Layout/components/SidebarLink/SidebarLink.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import { NavLink } from 'react-router-dom'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import styled from 'styled-components'; const activeStyle = { diff --git a/frontend/components/PreviewLoading/PreviewLoading.js b/frontend/components/PreviewLoading/PreviewLoading.js index 43ddae04e..4d6eec024 100644 --- a/frontend/components/PreviewLoading/PreviewLoading.js +++ b/frontend/components/PreviewLoading/PreviewLoading.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import styled, { keyframes } from 'styled-components'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import { randomInteger } from 'utils/random'; diff --git a/frontend/components/PublishingInfo/PublishingInfo.js b/frontend/components/PublishingInfo/PublishingInfo.js index 298e7ef64..98f2bda95 100644 --- a/frontend/components/PublishingInfo/PublishingInfo.js +++ b/frontend/components/PublishingInfo/PublishingInfo.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import moment from 'moment'; import styled from 'styled-components'; import type { User } from 'types'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; const Container = styled(Flex)` justify-content: space-between; diff --git a/frontend/index.js b/frontend/index.js index 22843cda3..065c1ff8a 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -8,7 +8,7 @@ import { Route, Redirect, } from 'react-router-dom'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import stores from 'stores'; import DocumentsStore from 'stores/DocumentsStore'; diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index c37c51727..f6598e62a 100644 --- a/frontend/scenes/Document/Document.js +++ b/frontend/scenes/Document/Document.js @@ -4,7 +4,7 @@ import get from 'lodash/get'; import styled from 'styled-components'; import { observer, inject } from 'mobx-react'; import { withRouter, Prompt } from 'react-router'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import Document from 'models/Document'; import UiStore from 'stores/UiStore'; diff --git a/frontend/scenes/Home/Home.js b/frontend/scenes/Home/Home.js index 022f1b943..549fb4435 100644 --- a/frontend/scenes/Home/Home.js +++ b/frontend/scenes/Home/Home.js @@ -2,7 +2,7 @@ import React from 'react'; import { observer, inject } from 'mobx-react'; import { Redirect } from 'react-router'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import styled from 'styled-components'; import AuthStore from 'stores/AuthStore'; diff --git a/frontend/scenes/Search/Search.js b/frontend/scenes/Search/Search.js index 34c35b22e..c94eaf4f1 100644 --- a/frontend/scenes/Search/Search.js +++ b/frontend/scenes/Search/Search.js @@ -3,7 +3,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { observer } from 'mobx-react'; import _ from 'lodash'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import { withRouter } from 'react-router'; import { searchUrl } from 'utils/routeHelpers'; import styled from 'styled-components'; diff --git a/frontend/scenes/Search/components/SearchField/SearchField.js b/frontend/scenes/Search/components/SearchField/SearchField.js index 9046e1dbc..785a3a49f 100644 --- a/frontend/scenes/Search/components/SearchField/SearchField.js +++ b/frontend/scenes/Search/components/SearchField/SearchField.js @@ -1,6 +1,6 @@ // @flow import React, { Component } from 'react'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import styled from 'styled-components'; import searchImg from 'assets/icons/search.svg'; diff --git a/frontend/scenes/Settings/Settings.js b/frontend/scenes/Settings/Settings.js index 9c27d69e6..38204d7e4 100644 --- a/frontend/scenes/Settings/Settings.js +++ b/frontend/scenes/Settings/Settings.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import { observer } from 'mobx-react'; -import { Flex } from 'reflexbox'; +import Flex from 'components/Flex'; import ApiKeyRow from './components/ApiKeyRow'; import styles from './Settings.scss'; diff --git a/package.json b/package.json index e50ef439b..d068d9d5b 100644 --- a/package.json +++ b/package.json @@ -146,7 +146,6 @@ "react-router-dom": "^4.1.1", "redis": "^2.6.2", "redis-lock": "^0.1.0", - "reflexbox": "^2.2.3", "rimraf": "^2.5.4", "safestart": "1.1.0", "sass-loader": "4.0.0", From fc4d9cb0b5f7e6917fb990d56e106ba2bb96d773 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Fri, 7 Jul 2017 00:03:59 -0700 Subject: [PATCH 4/5] removed comments --- frontend/components/Flex/Flex.js | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/frontend/components/Flex/Flex.js b/frontend/components/Flex/Flex.js index be6c9a94a..d14c0ce15 100644 --- a/frontend/components/Flex/Flex.js +++ b/frontend/components/Flex/Flex.js @@ -39,26 +39,3 @@ const Container = styled.div` `; export default Flex; - -// flex: React.PropTypes.bool, -// wrap: React.PropTypes.bool, -// flexColumn: React.PropTypes.bool, -// column: React.PropTypes.bool, -// align: React.PropTypes.oneOf([ -// 'stretch', -// 'center', -// 'baseline', -// 'flex-start', -// 'flex-end' -// ]), -// justify: React.PropTypes.oneOf([ -// 'center', -// 'space-around', -// 'space-between', -// 'flex-start', -// 'flex-end' -// ]), -// flexAuto: React.PropTypes.bool, -// auto: React.PropTypes.bool, -// flexNone: React.PropTypes.bool, -// order: React.PropTypes.number, From dbcfe1199e233238bb7ced12ed7fc93151f347e3 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Fri, 7 Jul 2017 00:14:00 -0700 Subject: [PATCH 5/5] Positioned document loading state with the document content --- frontend/components/PreviewLoading/PreviewLoading.js | 4 ++-- frontend/scenes/Document/Document.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/components/PreviewLoading/PreviewLoading.js b/frontend/components/PreviewLoading/PreviewLoading.js index 4d6eec024..150e1c8ef 100644 --- a/frontend/components/PreviewLoading/PreviewLoading.js +++ b/frontend/components/PreviewLoading/PreviewLoading.js @@ -11,7 +11,7 @@ const randomValues = Array.from( () => `${randomInteger(85, 100)}%` ); -export default () => { +export default (props: {}) => { return ( { transitionEnterTimeout={0} transitionLeaveTimeout={0} > - + diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index f6598e62a..e653ab27a 100644 --- a/frontend/scenes/Document/Document.js +++ b/frontend/scenes/Document/Document.js @@ -137,7 +137,7 @@ type Props = { {this.state.isLoading && } {isFetching && - + } {!isFetching && this.document && @@ -208,6 +208,10 @@ const Container = styled(Flex)` width: 100%; `; +const LoadingState = styled(PreviewLoading)` + margin: 80px 20px; +`; + const PagePadding = styled(Flex)` padding: 80px 20px; position: relative;