From c06128352f56b6675d5bf7ca2d3225e31473131b Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 16 Aug 2018 17:57:46 +0300
Subject: [PATCH] feat(visual): dashboard header
---
.../src/gridItems/Item.js | 3 +-
.../component-faraday-ui/src/gridItems/Row.js | 3 +-
.../src/gridItems/index.js | 2 +
packages/component-faraday-ui/src/index.js | 1 +
.../src/components/Dashboard/Dashboard.js | 43 +++++------------
.../components/Dashboard/DashboardFilters.js | 47 +++++--------------
packages/hindawi-theme/src/elements/Menu.js | 9 ++++
packages/xpub-faraday/app/FaradayApp.js | 1 +
8 files changed, 43 insertions(+), 66 deletions(-)
create mode 100644 packages/component-faraday-ui/src/gridItems/index.js
diff --git a/packages/component-faraday-ui/src/gridItems/Item.js b/packages/component-faraday-ui/src/gridItems/Item.js
index e978c8c14..77368ae96 100644
--- a/packages/component-faraday-ui/src/gridItems/Item.js
+++ b/packages/component-faraday-ui/src/gridItems/Item.js
@@ -1,3 +1,4 @@
+import { isNumber } from 'lodash'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
@@ -5,7 +6,7 @@ export default styled.div.attrs({
'data-test-id': props => props['data-test-id'] || 'item',
})`
display: flex;
- flex: ${({ flex }) => flex || 1};
+ flex: ${({ flex }) => (isNumber(flex) ? flex : 1)};
flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
margin-right: ${({ withRightMargin }) =>
diff --git a/packages/component-faraday-ui/src/gridItems/Row.js b/packages/component-faraday-ui/src/gridItems/Row.js
index 3df71dbf7..9c805a2da 100644
--- a/packages/component-faraday-ui/src/gridItems/Row.js
+++ b/packages/component-faraday-ui/src/gridItems/Row.js
@@ -1,11 +1,12 @@
import { get } from 'lodash'
-import styled, { css } from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
+import styled, { css } from 'styled-components'
export default styled.div.attrs({
'data-test-id': props => props['data-test-id'] || 'row',
})`
align-items: ${props => get(props, 'alignItems', 'flex-start')};
+ background-color: ${props => props.bgColor || 'transparent'};
display: flex;
flex-direction: row;
justify-content: ${({ justify }) => justify || 'space-evenly'};
diff --git a/packages/component-faraday-ui/src/gridItems/index.js b/packages/component-faraday-ui/src/gridItems/index.js
new file mode 100644
index 000000000..de8063f41
--- /dev/null
+++ b/packages/component-faraday-ui/src/gridItems/index.js
@@ -0,0 +1,2 @@
+export { default as Row } from './Row'
+export { default as Item } from './Item'
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index bcc278399..638da0a07 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -16,3 +16,4 @@ export { default as Text } from './Text'
// modals
export * from './modals'
+export * from './gridItems'
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
index aba6a0b19..f38b570b3 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.js
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -1,8 +1,8 @@
import React from 'react'
-import { Button } from '@pubsweet/ui'
import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
+import { Button, H1 } from '@pubsweet/ui'
import { compose, withProps } from 'recompose'
+import { Row } from 'pubsweet-component-faraday-ui'
import { DashboardItems, DashboardFilters } from './'
@@ -16,19 +16,17 @@ const Dashboard = ({
getDefaultFilterValue,
}) => (
<Root className="dashboard">
- <Header>
- <Heading>Manuscripts</Heading>
- <HeaderButtons>
- <Button
- data-test="new-manuscript"
- disabled={!canCreateDraft}
- onClick={createDraftSubmission}
- primary
- >
- New
- </Button>
- </HeaderButtons>
- </Header>
+ <Row alignItems="center" justify="space-between">
+ <H1>Dashboard</H1>
+ <Button
+ data-test="new-manuscript"
+ disabled={!canCreateDraft}
+ onClick={createDraftSubmission}
+ primary
+ >
+ New
+ </Button>
+ </Row>
<DashboardFilters
changeFilterValue={changeFilterValue}
getDefaultFilterValue={getDefaultFilterValue}
@@ -53,19 +51,4 @@ const Root = styled.div`
min-height: 50vh;
overflow: auto;
`
-
-const Header = styled.div`
- display: flex;
- justify-content: space-between;
-`
-
-const Heading = styled.div`
- color: ${th('colorPrimary')};
- font-size: 1.6em;
- text-transform: uppercase;
-`
-
-const HeaderButtons = styled.div`
- display: flex;
-`
// #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
index da71555de..63c06cf93 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
@@ -1,35 +1,35 @@
import React from 'react'
import { Menu } from '@pubsweet/ui'
-import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { compose, withHandlers } from 'recompose'
+import { Row, Item, Text, Label } from 'pubsweet-component-faraday-ui'
const DashboardFilters = ({
getFilterOptions,
changeFilterValue,
getDefaultFilterValue,
}) => (
- <FiltersContainer>
- <span>Filter view:</span>
- <FilterGroup>
- <span>Priority</span>
+ <Row alignItems="flex-end" justify="flex-start">
+ <FilterText secondary>Filters</FilterText>
+ <Item flex={0} vertical withRightMargin>
+ <Label>Priority</Label>
<Menu
inline
onChange={changeFilterValue('priority')}
options={getFilterOptions('priority')}
value={getDefaultFilterValue('priority')}
/>
- </FilterGroup>
- <FilterGroup>
- <span>Sort</span>
+ </Item>
+ <Item flex={0} vertical>
+ <Label>Sort</Label>
<Menu
inline
onChange={changeFilterValue('order')}
options={getFilterOptions('order')}
value={getDefaultFilterValue('order')}
/>
- </FilterGroup>
- </FiltersContainer>
+ </Item>
+ </Row>
)
export default compose(
@@ -41,29 +41,8 @@ export default compose(
)(DashboardFilters)
// #region styles
-const FiltersContainer = styled.div`
- align-items: center;
- border-bottom: ${th('borderDefault')};
- color: ${th('colorPrimary')};
- display: flex;
- justify-content: flex-start;
- margin: calc(${th('subGridUnit')} * 2) 0;
- padding-bottom: calc(${th('subGridUnit')} * 2);
-
- > span {
- align-self: flex-end;
- margin-bottom: calc(${th('subGridUnit')} * 2);
- padding: 0 calc(${th('subGridUnit')});
- }
-`
-
-const FilterGroup = styled.div`
- align-items: flex-start;
- display: flex;
- flex-direction: column;
- margin-left: calc(${th('subGridUnit')} * 2);
- > div {
- min-width: 200px;
- }
+const FilterText = Text.extend`
+ margin-right: ${th('gridUnit')};
+ padding-bottom: ${th('gridUnit')};
`
// #endregion
diff --git a/packages/hindawi-theme/src/elements/Menu.js b/packages/hindawi-theme/src/elements/Menu.js
index d01624200..248513efd 100644
--- a/packages/hindawi-theme/src/elements/Menu.js
+++ b/packages/hindawi-theme/src/elements/Menu.js
@@ -2,8 +2,13 @@ import { css } from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
export default {
+ Main: css`
+ height: calc(${th('gridUnit')} * 4);
+ min-width: 120px;
+ `,
Value: css`
border: none;
+ font-family: ${th('fontHeading')};
&:hover {
color: ${th('colorSecondary')};
@@ -15,6 +20,8 @@ export default {
Opener: css`
border-color: ${props =>
props.open ? th('menu.hoverColor') : th('colorBorder')};
+ height: calc(${th('gridUnit')} * 4);
+
&:hover {
border-color: ${th('menu.hoverColor')};
}
@@ -38,6 +45,8 @@ export default {
font-family: ${th('fontHeading')};
font-size: ${th('fontSizeBase')};
line-height: ${th('lineHeightBase')};
+ height: calc(${th('gridUnit')} * 4);
+ padding: ${th('gridUnit')};
&:hover {
background-color: ${th('menu.optionBackground')};
diff --git a/packages/xpub-faraday/app/FaradayApp.js b/packages/xpub-faraday/app/FaradayApp.js
index 2e128f500..ac5ac21ea 100644
--- a/packages/xpub-faraday/app/FaradayApp.js
+++ b/packages/xpub-faraday/app/FaradayApp.js
@@ -44,6 +44,7 @@ export default compose(
const Root = styled.div`
height: 100%;
+ overflow-y: scroll;
div[open] {
width: auto;
}
--
GitLab