From 8d536a600d5b927cb2b2625c561bae8a92abd6af Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 16 Aug 2018 13:48:39 +0300
Subject: [PATCH] feat(dashboard): add appbar from hindawi ui
---
packages/component-faraday-ui/package.json | 6 +--
packages/component-faraday-ui/src/AppBar.js | 4 +-
packages/component-faraday-ui/src/AppBar.md | 12 ++++--
.../component-faraday-ui/src/AppBarMenu.js | 4 +-
packages/component-faraday-ui/src/index.js | 18 +++++++++
.../component-faraday-ui/src/modals/index.js | 2 +
packages/hindawi-theme/src/index.js | 2 +-
packages/xpub-faraday/app/FaradayApp.js | 39 +++++++++++--------
8 files changed, 59 insertions(+), 28 deletions(-)
create mode 100644 packages/component-faraday-ui/src/index.js
create mode 100644 packages/component-faraday-ui/src/modals/index.js
diff --git a/packages/component-faraday-ui/package.json b/packages/component-faraday-ui/package.json
index e7dd2ab38..4e2c1dafb 100644
--- a/packages/component-faraday-ui/package.json
+++ b/packages/component-faraday-ui/package.json
@@ -1,7 +1,7 @@
{
- "name": "component-faraday-ui",
- "version": "1.0.0",
- "main": "index.js",
+ "name": "pubsweet-component-faraday-ui",
+ "version": "0.0.1",
+ "main": "src",
"license": "MIT",
"dependencies": {
"@pubsweet/ui": "^8.3.0",
diff --git a/packages/component-faraday-ui/src/AppBar.js b/packages/component-faraday-ui/src/AppBar.js
index 22e54a393..8c4d28442 100644
--- a/packages/component-faraday-ui/src/AppBar.js
+++ b/packages/component-faraday-ui/src/AppBar.js
@@ -9,14 +9,14 @@ const AppBar = ({
menu: Menu,
fixed = true,
autosave: Autosave,
- journal: { backgroundImage, name },
+ journal: { metadata: { backgroundImage, nameText } },
}) => (
<Root fixed={fixed}>
{backgroundImage && <JournalBackground img={backgroundImage} />}
<LogoContainer>
<Logo />
</LogoContainer>
- <H2>{name}</H2>
+ <H2>{nameText}</H2>
<RightContainer>
<Autosave />
<Menu />
diff --git a/packages/component-faraday-ui/src/AppBar.md b/packages/component-faraday-ui/src/AppBar.md
index 998fc578b..6ff9d430f 100644
--- a/packages/component-faraday-ui/src/AppBar.md
+++ b/packages/component-faraday-ui/src/AppBar.md
@@ -2,8 +2,8 @@ A sticky app bar. For demo purposes it's not fixed to the top at the moment.
```js
const currentUser = {
- admin: true,
user: {
+ admin: true,
username: 'cocojambo',
firstName: 'Alex',
lastName: 'Munteanu'
@@ -36,8 +36,10 @@ const AutosaveComponent = () => <AutosaveIndicator
logo={HindawiLogo}
menu={MenuComponent}
journal={{
- name:'Chemistry Awesomeness',
+ metadata: {
+ nameText:'Chemistry Awesomeness',
backgroundImage: 'https://images.hindawi.com/journals/jchem/jchem.banner.jpg'
+ },
}}
fixed={false}
/>
@@ -47,8 +49,8 @@ Without a journal background.
```js
const currentUser = {
- admin: true,
user: {
+ admin: true,
username: 'cocojambo',
firstName: 'Alex',
lastName: 'Munteanu'
@@ -82,7 +84,9 @@ const AutosaveComponent = () => <AutosaveIndicator
logo={HindawiLogo}
menu={MenuComponent}
journal={{
- name:'Chemistry Awesomeness',
+ metadata: {
+ nameText:'Chemistry Awesomeness',
+ },
}}
fixed={false}
/>
diff --git a/packages/component-faraday-ui/src/AppBarMenu.js b/packages/component-faraday-ui/src/AppBarMenu.js
index 935917798..7ab755a7b 100644
--- a/packages/component-faraday-ui/src/AppBarMenu.js
+++ b/packages/component-faraday-ui/src/AppBarMenu.js
@@ -32,7 +32,7 @@ const AppBarMenu = ({
{expanded && (
<Dropdown>
<DropdownOption onClick={goTo('/profile')}>My profile</DropdownOption>
- {currentUser.admin && (
+ {currentUser.user.admin && (
<DropdownOption onClick={goTo('/admin')}>
Admin dashboard
</DropdownOption>
@@ -97,7 +97,7 @@ const DropdownOption = styled.div`
font-size: ${th('fontSizeBase')};
line-height: ${th('lineHeightBase')};
- height: calc(${th('gridUnit')} * 2);
+ height: calc(${th('gridUnit')} * 3);
padding: ${th('gridUnit')};
&:hover {
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
new file mode 100644
index 000000000..bcc278399
--- /dev/null
+++ b/packages/component-faraday-ui/src/index.js
@@ -0,0 +1,18 @@
+export { default as AppBar } from './AppBar'
+export { default as AppBarMenu } from './AppBarMenu'
+export { default as AuthorCard } from './AuthorCard'
+export { default as AuthorTag } from './AuthorTag'
+export { default as AuthorTagList } from './AuthorTagList'
+export { default as AutosaveIndicator } from './AutosaveIndicator'
+export { default as ContextualBox } from './ContextualBox'
+export { default as File } from './File'
+export { default as IconButton } from './IconButton'
+export { default as Label } from './Label'
+export { default as Logo } from './Logo'
+export { default as ManuscriptCard } from './ManuscriptCard'
+export { default as PersonInfo } from './PersonInfo'
+export { default as Tag } from './Tag'
+export { default as Text } from './Text'
+
+// modals
+export * from './modals'
diff --git a/packages/component-faraday-ui/src/modals/index.js b/packages/component-faraday-ui/src/modals/index.js
new file mode 100644
index 000000000..54028bc35
--- /dev/null
+++ b/packages/component-faraday-ui/src/modals/index.js
@@ -0,0 +1,2 @@
+export { default as MultiAction } from './MultiAction'
+export { default as SingleActionModal } from './SingleActionModal'
diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js
index 95183e51b..c315a2991 100644
--- a/packages/hindawi-theme/src/index.js
+++ b/packages/hindawi-theme/src/index.js
@@ -42,7 +42,7 @@ const hindawiTheme = {
appBar: {
colorBackground: '#ffffff',
height: '60px',
- boxShadow: '0 1px 2px 1px #dbdbdb',
+ boxShadow: '0 2px 3px 0 rgba(25, 102, 141, 0.19)',
},
accordion: {
diff --git a/packages/xpub-faraday/app/FaradayApp.js b/packages/xpub-faraday/app/FaradayApp.js
index 59270cab7..2e128f500 100644
--- a/packages/xpub-faraday/app/FaradayApp.js
+++ b/packages/xpub-faraday/app/FaradayApp.js
@@ -1,24 +1,26 @@
import React from 'react'
-import { compose } from 'recompose'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { actions } from 'pubsweet-client'
import { withJournal } from 'xpub-journal'
-import { AppBar } from 'pubsweet-components-faraday/src/components'
+import { withRouter } from 'react-router-dom'
+import { compose, withHandlers } from 'recompose'
+import { AppBar, Logo, AppBarMenu } from 'pubsweet-component-faraday-ui'
-const App = ({
- journal,
- children,
- logoutUser,
- currentUser,
- isAuthenticated,
-}) => (
+const App = ({ journal, goTo, children, logout, currentUser }) => (
<Root className="faraday-root">
<AppBar
- brand={journal.metadata.name}
- isAuthenticated={isAuthenticated}
- onLogoutClick={logoutUser}
- user={currentUser}
+ journal={journal}
+ logo={() => (
+ <Logo
+ onClick={() => goTo('/')}
+ src={journal.metadata.logo}
+ title="Hindawi"
+ />
+ )}
+ menu={() => (
+ <AppBarMenu currentUser={currentUser} goTo={goTo} logout={logout} />
+ )}
/>
<MainContainer className="faraday-main">{children}</MainContainer>
</Root>
@@ -27,12 +29,17 @@ const App = ({
export default compose(
connect(
state => ({
- currentUser: state.currentUser.user,
- isAuthenticated: state.currentUser.isAuthenticated,
+ currentUser: state.currentUser,
}),
- { logoutUser: actions.logoutUser },
+ { logout: actions.logoutUser },
),
withJournal,
+ withRouter,
+ withHandlers({
+ goTo: ({ history }) => path => {
+ history.push(path)
+ },
+ }),
)(App)
const Root = styled.div`
--
GitLab