diff --git a/packages/components-faraday/src/components/Admin/Admin.js b/packages/components-faraday/src/components/Admin/Admin.js index c4c87bee08b9c563c28af71716628fcc3f5e00ff..023333aa86afe52d50e160e46185793e4cb59428 100644 --- a/packages/components-faraday/src/components/Admin/Admin.js +++ b/packages/components-faraday/src/components/Admin/Admin.js @@ -4,102 +4,6 @@ import { Icon, Menu } from '@pubsweet/ui' import { Pagination } from './' -const AddButton = styled.button` - align-items: center; - border: none; - cursor: pointer; - display: flex; - font-family: Helvetica; - font-size: 12px; - text-align: left; - color: #667080; - - &:active, - &:focus { - outline: none; - } -` - -const Header = styled.div` - display: flex; - flex-direction: row; - align-items: center; - - & span { - font-family: Helvetica; - font-size: 24px; - font-weight: bold; - text-align: left; - color: #667080; - } -` - -const SubHeader = styled.div` - align-items: center; - border-bottom: 1px solid #667080; - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 20px; - padding-bottom: 10px; - - > div:first-child { - display: flex; - align-items: center; - } - - span { - font-family: Helvetica; - font-size: 14px; - text-align: left; - color: #667080; - } -` - -const Table = styled.table` - border-spacing: 0; - border-collapse: collapse; - margin-top: 10px; - width: 100vw; - - & thead tr { - height: 40px; - border-bottom: 1px solid #667080; - font-family: Helvetica; - font-size: 14px; - font-weight: bold; - text-align: left; - color: #667080; - } -` - -const Row = styled.tr` - border-bottom: 1px solid #667080; - color: #667080; - font-family: Helvetica; - font-size: 14px; - height: 40px; - text-align: left; -` - -const Status = styled.td` - & span { - border: solid 1px #667080; - text-transform: uppercase; - font-family: Helvetica; - font-size: 12px; - font-weight: bold; - text-align: left; - color: #667080; - padding: 2px 10px; - } -` - -const Input = styled.input` - height: 20px; - width: 20px; -` - const TableRow = ({ toggleUser, selected, email, username, type }) => ( <Row> <td> @@ -196,9 +100,98 @@ const Admin = ({ export default Admin -const Root = styled.div` +const AddButton = styled.button` + align-items: center; + border: none; + cursor: pointer; + display: flex; + font-family: Helvetica; + font-size: 12px; + text-align: left; + color: #667080; + + &:active, + &:focus { + outline: none; + } +` + +const Header = styled.div` display: flex; - flex-direction: column; - margin: auto; - max-width: 60em; + flex-direction: row; + align-items: center; + + & span { + font-family: Helvetica; + font-size: 24px; + font-weight: bold; + text-align: left; + color: #667080; + } +` + +const SubHeader = styled.div` + align-items: center; + border-bottom: 1px solid #667080; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 20px; + padding-bottom: 10px; + + > div:first-child { + display: flex; + align-items: center; + } + + span { + font-family: Helvetica; + font-size: 14px; + text-align: left; + color: #667080; + } +` + +const Table = styled.table` + border-spacing: 0; + border-collapse: collapse; + margin-top: 10px; + width: 100vw; + + & thead tr { + height: 40px; + border-bottom: 1px solid #667080; + font-family: Helvetica; + font-size: 14px; + font-weight: bold; + text-align: left; + color: #667080; + } +` + +const Row = styled.tr` + border-bottom: 1px solid #667080; + color: #667080; + font-family: Helvetica; + font-size: 14px; + height: 40px; + text-align: left; +` + +const Status = styled.td` + & span { + border: solid 1px #667080; + text-transform: uppercase; + font-family: Helvetica; + font-size: 12px; + font-weight: bold; + text-align: left; + color: #667080; + padding: 2px 10px; + } +` + +const Input = styled.input` + height: 20px; + width: 20px; ` diff --git a/packages/components-faraday/src/components/Admin/AdminDashboard.js b/packages/components-faraday/src/components/Admin/AdminDashboard.js new file mode 100644 index 0000000000000000000000000000000000000000..c158ada275d31b30da07ed2d1a520d9c8733b958 --- /dev/null +++ b/packages/components-faraday/src/components/Admin/AdminDashboard.js @@ -0,0 +1,76 @@ +import React from 'react' +import { Icon } from '@pubsweet/ui' +import styled from 'styled-components' +import { withRouter } from 'react-router-dom' + +const AdminDashboard = ({ history }) => ( + <Root> + <Title>Admin Dashboard</Title> + <CardContainer> + <Card> + <Icon color="#667080" size={32}> + edit + </Icon> + <span>Journal configuration</span> + </Card> + <Card onClick={() => history.push('/admin/users')}> + <Icon color="#667080" size={32}> + users + </Icon> + <span>Users</span> + </Card> + <Card> + <Icon color="#667080" size={32}> + settings + </Icon> + <span>Roles</span> + </Card> + </CardContainer> + </Root> +) + +const Root = styled.div` + display: flex; + flex-direction: column; + padding: 0 12px; +` + +const Title = styled.span` + color: #667080; + font-family: Helvetica; + font-size: 24px; + font-weight: bold; + text-align: left; +` + +const CardContainer = styled.div` + display: flex; + flex-wrap: wrap; + margin-top: 24px; +` + +const Card = styled.div` + align-items: center; + border: 1px solid #979797; + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: center; + height: 160px; + margin: 0 25px 25px 0; + width: 210px; + + &:hover { + background-color: #ddd; + } + + > span { + color: #667080; + font-family: Helvetica; + font-size: 18px; + margin-top: 10px; + text-align: center; + } +` + +export default withRouter(AdminDashboard) diff --git a/packages/components-faraday/src/components/Admin/index.js b/packages/components-faraday/src/components/Admin/index.js index 4f1e2831e6e6710d184684b30b4257f9493ea47a..d57c7f72d0204105e10c497c80f16609581eb012 100644 --- a/packages/components-faraday/src/components/Admin/index.js +++ b/packages/components-faraday/src/components/Admin/index.js @@ -1,4 +1,3 @@ -import AdminPage from './AdminPage' - -export default AdminPage +export { default as AdminUsers } from './AdminPage' export { default as Pagination } from './Pagination' +export { default as AdminDashboard } from './AdminDashboard' diff --git a/packages/components-faraday/src/components/AppBar/AppBar.js b/packages/components-faraday/src/components/AppBar/AppBar.js index 3ca92d4e133e27f84d3dd2c592248498b38d8d8c..585a9c1179292476496e988cdebd487cd8266313 100644 --- a/packages/components-faraday/src/components/AppBar/AppBar.js +++ b/packages/components-faraday/src/components/AppBar/AppBar.js @@ -6,7 +6,9 @@ import { withState, withHandlers, compose } from 'recompose' const AppBar = ({ expanded, toggleMenu, brand, user, goTo }) => ( <Root> - {brand} + {React.cloneElement(brand, { + onClick: goTo('/'), + })} {user && ( <User> <div onClick={toggleMenu}> diff --git a/packages/components-faraday/src/components/UIComponents/Logo.js b/packages/components-faraday/src/components/UIComponents/Logo.js index 3f1557e5409e81d88ee5390e59679a898dd290e5..c13036c24def5a3eeb234d2ce9b288973d0e25a1 100644 --- a/packages/components-faraday/src/components/UIComponents/Logo.js +++ b/packages/components-faraday/src/components/UIComponents/Logo.js @@ -1,7 +1,9 @@ import React from 'react' -const Logo = ({ srcUrl }) => ( - <img alt="Hindawi" height="36" src={srcUrl} title="Hindawi" /> +const Logo = ({ srcUrl, onClick }) => ( + <div onClick={onClick}> + <img alt="Hindawi" height="36" src={srcUrl} title="Hindawi" /> + </div> ) export default Logo diff --git a/packages/xpub-faraday/app/FaradayApp.js b/packages/xpub-faraday/app/FaradayApp.js index b0d85d593e9c724617969260771a2fd07000812b..0ceec8097357dbede9310136caf0dd82869d2972 100644 --- a/packages/xpub-faraday/app/FaradayApp.js +++ b/packages/xpub-faraday/app/FaradayApp.js @@ -9,15 +9,6 @@ import { AppBar } from 'pubsweet-components-faraday/src/components' const App = ({ children, currentUser, journal }) => ( <Root> <AppBar brand={journal.metadata.name} user={currentUser} /> - {/* <AppBar - brandLink="/" - brandName={journal.metadata.name} - loginLink="/login" - logo={journal.metadata.logo} - logoutLink="/logout" - userName={currentUser ? currentUser.username : null} - /> */} - <MainContainer>{children}</MainContainer> </Root> ) @@ -28,7 +19,7 @@ const Root = styled.div` const MainContainer = styled.div` padding: 8px; - margin-top: 50px; + margin-top: 20px; ` export default compose( diff --git a/packages/xpub-faraday/app/routes.js b/packages/xpub-faraday/app/routes.js index d1306d2c9de26adf2454cb74db0f3ddd05b0dd39..290a73e113619d66173385177aab5484cbba5254 100644 --- a/packages/xpub-faraday/app/routes.js +++ b/packages/xpub-faraday/app/routes.js @@ -14,7 +14,10 @@ import { Wizard } from 'pubsweet-component-wizard/src/components' import ManuscriptPage from 'pubsweet-component-xpub-manuscript/src/components/ManuscriptPage' import ConfirmationPage from 'pubsweet-components-faraday/src/components/UIComponents/ConfirmationPage' import NotFound from 'pubsweet-components-faraday/src/components/UIComponents/NotFound' -import AdminPage from 'pubsweet-components-faraday/src/components/Admin' +import { + AdminDashboard, + AdminUsers, +} from 'pubsweet-components-faraday/src/components/Admin' import AddEditUser from 'pubsweet-components-faraday/src/components/Admin/AddEditUser' import FaradayApp from './FaradayApp' @@ -30,7 +33,8 @@ const Routes = () => ( exact path="/confirmation-page" /> - <PrivateRoute component={AdminPage} exact path="/admin" /> + <PrivateRoute component={AdminDashboard} exact path="/admin" /> + <PrivateRoute component={AdminUsers} exact path="/admin/users" /> <PrivateRoute component={AddEditUser} exact path="/admin/users/add" /> <PrivateRoute component={AddEditUser}