From 4524ea61e013625530f94ce493ecbd6af9b00e85 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Mon, 20 Aug 2018 09:20:54 +0300
Subject: [PATCH] feat(styleguide): modify the default draghandle, add
draghandle to author card
---
.../component-faraday-ui/src/AuthorCard.js | 38 ++++++++++++-------
.../component-faraday-ui/src/AuthorCard.md | 15 ++++++++
.../component-faraday-ui/src/DragHandle.js | 2 +-
.../component-faraday-ui/src/FileSection.js | 13 +++++--
.../src/ManuscriptCard.md | 2 +-
.../component-faraday-ui/src/SortableList.js | 5 +++
.../component-faraday-ui/src/SortableList.md | 5 +++
packages/hindawi-theme/src/elements/Menu.js | 1 +
.../hindawi-theme/src/elements/TextField.js | 7 ++--
packages/styleguide/styleguide.config.js | 6 +--
10 files changed, 69 insertions(+), 25 deletions(-)
create mode 100644 packages/component-faraday-ui/src/SortableList.js
create mode 100644 packages/component-faraday-ui/src/SortableList.md
diff --git a/packages/component-faraday-ui/src/AuthorCard.js b/packages/component-faraday-ui/src/AuthorCard.js
index 1c4307d34..f99341d55 100644
--- a/packages/component-faraday-ui/src/AuthorCard.js
+++ b/packages/component-faraday-ui/src/AuthorCard.js
@@ -7,12 +7,7 @@ import { required } from 'xpub-validators'
import { H3, ValidatedField, TextField, Checkbox } from '@pubsweet/ui'
import { compose, setDisplayName, withStateHandlers } from 'recompose'
-import Tag from './Tag'
-import Label from './Label'
-import Row from './gridItems/Row'
-import Item from './gridItems/Item'
-import PersonInfo from './PersonInfo'
-import IconButton from './IconButton'
+import { Tag, Label, Row, Item, PersonInfo, IconButton } from './'
// #region AuthorTitle
const AuthorTitle = ({
@@ -83,7 +78,7 @@ const AuthorEdit = ({
handleSubmit,
toggleEditMode,
}) => (
- <Fragment>
+ <AuthorContainer>
<AuthorTitle
editMode={editMode}
isCorresponding={author.isCorresponding}
@@ -126,7 +121,7 @@ const AuthorEdit = ({
/>
</Item>
</Row>
- </Fragment>
+ </AuthorContainer>
)
// #endregion
@@ -138,7 +133,7 @@ const EnhancedAuthorEdit = compose(
)(AuthorEdit)
const Author = ({ author, listIndex, toggleEditMode }) => (
- <Fragment>
+ <AuthorContainer>
<AuthorTitle
isCorresponding={author.isCorresponding}
isSubmitting={author.isSubmitting}
@@ -146,11 +141,19 @@ const Author = ({ author, listIndex, toggleEditMode }) => (
toggleEditMode={toggleEditMode}
/>
<PersonInfo person={author} />
- </Fragment>
+ </AuthorContainer>
)
-const AuthorCard = ({ editMode, toggleEditMode, listIndex = null, author }) => (
+const AuthorCard = ({
+ author,
+ editMode,
+ dragHandle,
+ toggleEditMode,
+ listIndex = null,
+}) => (
<Root>
+ {!editMode &&
+ (typeof dragHandle === 'function' ? dragHandle() : dragHandle)}
{editMode ? (
<EnhancedAuthorEdit
author={author}
@@ -174,7 +177,7 @@ export default compose(
{ editMode: false },
{
toggleEditMode: ({ editMode }, { onEdit }) => () => {
- onEdit()
+ typeof onEdit === 'function' && onEdit()
return {
editMode: !editMode,
}
@@ -194,10 +197,19 @@ const AuthorTags = styled.div`
}
`
+const AuthorContainer = styled.div`
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ padding: ${th('gridUnit')};
+`
+
const Root = styled.div`
+ align-items: center;
border-radius: ${th('borderRadius')};
box-shadow: ${th('boxShadow')};
- padding: calc(${th('gridUnit')} * 2);
+ display: flex;
+ justify-content: flex-start;
margin-bottom: ${th('gridUnit')};
position: relative;
diff --git a/packages/component-faraday-ui/src/AuthorCard.md b/packages/component-faraday-ui/src/AuthorCard.md
index 6b65a6068..7b9aa3c86 100644
--- a/packages/component-faraday-ui/src/AuthorCard.md
+++ b/packages/component-faraday-ui/src/AuthorCard.md
@@ -20,3 +20,18 @@ const author = {
<AuthorCard onEdit={() => console.log('s-a dat click pe edit')} listIndex={2} author={author} />
</div>
```
+
+Author card with drag handle (used for sortable lists).
+
+```js
+const author = {
+ email: 'author.here@gmail.com',
+ firstName: 'Sebastian',
+ lastName: 'Teodorescu',
+ affiliation: 'PSD',
+ isSubmitting: true,
+ isCorresponding: true,
+};
+
+<AuthorCard author={author} dragHandle={DragHandle} />
+```
diff --git a/packages/component-faraday-ui/src/DragHandle.js b/packages/component-faraday-ui/src/DragHandle.js
index ed000999f..196408247 100644
--- a/packages/component-faraday-ui/src/DragHandle.js
+++ b/packages/component-faraday-ui/src/DragHandle.js
@@ -21,6 +21,7 @@ export default DragHandle
// #region styles
const Handle = styled.div`
+ align-self: stretch;
align-items: center;
background-color: transparent;
border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
@@ -29,7 +30,6 @@ const Handle = styled.div`
flex-direction: column;
justify-content: center;
- height: 100%;
width: calc(${th('gridUnit')} * 4);
span {
diff --git a/packages/component-faraday-ui/src/FileSection.js b/packages/component-faraday-ui/src/FileSection.js
index 63ca11924..b5aaa0421 100644
--- a/packages/component-faraday-ui/src/FileSection.js
+++ b/packages/component-faraday-ui/src/FileSection.js
@@ -1,5 +1,6 @@
import React from 'react'
import { th } from '@pubsweet/ui-toolkit'
+import { FilePicker } from '@pubsweet/ui'
import styled, { css } from 'styled-components'
import { compose, withProps } from 'recompose'
@@ -18,14 +19,20 @@ const FileSection = ({
isFirst,
required,
supportedFormats,
+ allowedFileExtensions,
}) => (
<Root isFirst={isFirst} isLast={isLast}>
<Row alignItems="center">
<Item>
<Label required={required}>{title}</Label>
- <ActionLink icon="plus" size="small">
- UPLOAD FILE
- </ActionLink>
+ <FilePicker
+ allowedFileExtensions={allowedFileExtensions}
+ onUpload={file => console.log('uploaded ', file)}
+ >
+ <ActionLink icon="plus" size="small">
+ UPLOAD FILE
+ </ActionLink>
+ </FilePicker>
</Item>
{supportedFormats && (
<Item justify="flex-end">
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.md b/packages/component-faraday-ui/src/ManuscriptCard.md
index aa5588a21..5be191d9d 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.md
+++ b/packages/component-faraday-ui/src/ManuscriptCard.md
@@ -92,7 +92,7 @@ const collection = {
}
const fragment = {
- authors: [],
+ authors,
created: new Date(),
metadata: {
journal: 'Awesomeness',
diff --git a/packages/component-faraday-ui/src/SortableList.js b/packages/component-faraday-ui/src/SortableList.js
new file mode 100644
index 000000000..294df130b
--- /dev/null
+++ b/packages/component-faraday-ui/src/SortableList.js
@@ -0,0 +1,5 @@
+import React from 'react'
+
+const SortableList = () => <div>sortable items inside</div>
+
+export default SortableList
diff --git a/packages/component-faraday-ui/src/SortableList.md b/packages/component-faraday-ui/src/SortableList.md
new file mode 100644
index 000000000..3302a88e0
--- /dev/null
+++ b/packages/component-faraday-ui/src/SortableList.md
@@ -0,0 +1,5 @@
+A list with drag and drop support.
+
+```js
+<SortableList />
+```
\ No newline at end of file
diff --git a/packages/hindawi-theme/src/elements/Menu.js b/packages/hindawi-theme/src/elements/Menu.js
index 248513efd..101824db4 100644
--- a/packages/hindawi-theme/src/elements/Menu.js
+++ b/packages/hindawi-theme/src/elements/Menu.js
@@ -3,6 +3,7 @@ import { th } from '@pubsweet/ui-toolkit'
export default {
Main: css`
+ background: ${th('colorBackgroundHue')};
height: calc(${th('gridUnit')} * 4);
min-width: 120px;
`,
diff --git a/packages/hindawi-theme/src/elements/TextField.js b/packages/hindawi-theme/src/elements/TextField.js
index 80169c539..05d04a5b4 100644
--- a/packages/hindawi-theme/src/elements/TextField.js
+++ b/packages/hindawi-theme/src/elements/TextField.js
@@ -10,15 +10,14 @@ const textColor = ({ theme, validationStatus = 'default' }) =>
}[validationStatus])
export default {
- Root: css`
- height: 30px;
- `,
Input: css`
border: ${th('borderWidth')} ${th('borderStyle')} ${validationColor};
+ color: ${textColor};
+
font-family: ${th('fontReading')};
font-size: ${th('fontSizeBase')};
line-height: ${th('lineHeightBase')};
- color: ${textColor};
+ height: calc(${th('gridUnit')} * 4);
&:active,
&:focus {
diff --git a/packages/styleguide/styleguide.config.js b/packages/styleguide/styleguide.config.js
index 9d38e49c4..74f9330bd 100644
--- a/packages/styleguide/styleguide.config.js
+++ b/packages/styleguide/styleguide.config.js
@@ -4,15 +4,15 @@ module.exports = {
sections: [
{
name: 'Hinadwi UI',
- components: ['../component-faraday-ui/src/*.js'],
+ components: ['../component-faraday-ui/src/[A-Z]*.js'],
},
{
name: 'Modals',
- components: ['../component-faraday-ui/src/modals/*.js'],
+ components: ['../component-faraday-ui/src/modals/[A-Z]*.js'],
},
{
name: 'Grid Items',
- components: ['../component-faraday-ui/src/gridItems/*.js'],
+ components: ['../component-faraday-ui/src/gridItems/[A-Z]*.js'],
},
],
styleguideComponents: {
--
GitLab