From 025694c52e7c888ce8245615ad376ea33b5aa53c Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Fri, 5 Jun 2020 11:52:41 +0200
Subject: [PATCH] chore: small styling fixes
---
app/components/App.js | 17 ++-
app/components/Menu.js | 111 ++++++++++++++++++
.../src/components/FormBuilderLayout.jsx | 34 +++---
.../src/components/atoms/Columns.js | 12 +-
.../src/components/FormTemplate.js | 4 +-
app/theme/elements/GlobalStyle.js | 8 +-
app/theme/elements/TextField.js | 3 -
7 files changed, 157 insertions(+), 32 deletions(-)
create mode 100644 app/components/Menu.js
diff --git a/app/components/App.js b/app/components/App.js
index d25ef3ac92..17c90fdba0 100644
--- a/app/components/App.js
+++ b/app/components/App.js
@@ -6,22 +6,32 @@ import { useQuery, useApolloClient } from '@apollo/react-hooks'
import { withRouter, matchPath, Router } from 'react-router-dom'
-import { Action, AppBar } from '@pubsweet/ui'
+import { Action } from '@pubsweet/ui'
+import { grid } from '@pubsweet/ui-toolkit'
import { JournalContext } from './xpub-journal'
import { XpubContext } from './xpub-with-context'
+import GlobalStyle from '../theme/elements/GlobalStyle'
import queries from '../graphql/'
+import Menu from './Menu'
+
const getParams = routerPath => {
const path = '/journals/:journal/versions/:version'
return matchPath(routerPath, path).params
}
const MainPage = styled.div`
- margin-top: 20px;
+ padding: ${grid(2)};
+ overflow-y: scroll;
+ height: 100vh;
`
const Root = styled.div`
+ display: grid;
+ grid-template-columns: 200px auto;
+ grid-template-areas: 'menu main';
+ overflow: hidden;
${({ converting }) =>
converting &&
`
@@ -100,7 +110,8 @@ const App = ({ authorized, children, history, match }) => {
return (
<Root converting={conversion.converting}>
- <AppBar
+ <GlobalStyle />
+ <Menu
brand={journal.metadata.name}
brandLink="/dashboard"
loginLink="/login?next=/dashboard"
diff --git a/app/components/Menu.js b/app/components/Menu.js
new file mode 100644
index 0000000000..1d77887060
--- /dev/null
+++ b/app/components/Menu.js
@@ -0,0 +1,111 @@
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import { override, th } from '@pubsweet/ui-toolkit'
+
+import { Icon, Action } from '@pubsweet/ui'
+
+// #region styled-components
+const Root = styled.nav`
+ grid-area: menu;
+ padding: calc(${th('gridUnit')} * 2);
+ // display: flex;
+ // align-items: center;
+ // justify-content: space-between;
+ max-height: 100vh;
+ ${override('ui.AppBar')};
+`
+
+const Section = styled.div`
+ // display: flex;
+ // align-items: center;
+`
+
+const Logo = styled.span`
+ // margin: calc(${th('gridUnit')} * 2) 1rem calc(${th('gridUnit')} * 2) 1rem;
+
+ ${override('ui.AppBar.Logo')};
+`
+
+const LogoLink = styled(Action)`
+ & > * {
+ height: calc(${th('gridUnit')} * 6);
+ }
+
+ ${override('ui.AppBar.LogoLink')};
+`
+
+const Item = styled.div`
+ // align-items: center;
+ // display: inline-flex;
+ // margin: calc(${th('gridUnit')} * 3) 1rem calc(${th('gridUnit')} * 3) 0;
+`
+// #endregion
+
+const AppBar = ({
+ brandLink = '/',
+ brand,
+ className,
+ loginLink = '/login',
+ onLogoutClick,
+ navLinkComponents,
+ user,
+}) => (
+ <Root className={className}>
+ <Section>
+ {brand && (
+ <Logo>
+ <LogoLink to={brandLink}>{brand}</LogoLink>
+ </Logo>
+ )}
+ <UserComponent
+ loginLink={loginLink}
+ onLogoutClick={onLogoutClick}
+ user={user}
+ />
+
+ {navLinkComponents &&
+ navLinkComponents.map((NavLinkComponent, idx) => (
+ <span key={NavLinkComponent.props.to}>
+ <Item>{NavLinkComponent}</Item>
+ </span>
+ ))}
+ </Section>
+ </Root>
+)
+
+const UserComponent = ({ user, onLogoutClick, loginLink }) => (
+ <Section>
+ {user && (
+ <Item>
+ <Icon size={2}>user</Icon>
+ {user.username}
+ {user.admin ? ' (admin)' : ''}
+ </Item>
+ )}
+
+ {user && (
+ <Item>
+ {/* <Icon size={2}>power</Icon> */}
+ <Action onClick={onLogoutClick}>Logout</Action>
+ </Item>
+ )}
+
+ {!user && (
+ <Item>
+ <Action to={loginLink}>Login</Action>
+ </Item>
+ )}
+ </Section>
+)
+
+AppBar.propTypes = {
+ brandLink: PropTypes.string,
+ brand: PropTypes.node,
+ loginLink: PropTypes.string,
+ onLogoutClick: PropTypes.func,
+ user: PropTypes.object,
+ navLinkComponents: PropTypes.arrayOf(PropTypes.element),
+}
+
+export default AppBar
diff --git a/app/components/component-xpub-formbuilder/src/components/FormBuilderLayout.jsx b/app/components/component-xpub-formbuilder/src/components/FormBuilderLayout.jsx
index 84d4c667ca..350ef84cfc 100644
--- a/app/components/component-xpub-formbuilder/src/components/FormBuilderLayout.jsx
+++ b/app/components/component-xpub-formbuilder/src/components/FormBuilderLayout.jsx
@@ -2,7 +2,7 @@ import React from 'react'
import { forEach } from 'lodash'
import styled from 'styled-components'
import { Tabs, Action } from '@pubsweet/ui'
-import { Columns, Admin } from './atoms/Columns'
+import { Columns, Details, Form } from './atoms/Columns'
import ComponentProperties from './ComponentProperties'
import FormBuilder from './FormBuilder'
import FormProperties from './FormProperties'
@@ -12,7 +12,7 @@ const DeleteIcon = styled(Action)`
line-height: 1.15;
`
-const AdminStyled = styled(Admin)`
+const DetailsStyled = styled(Details)`
border-left: 1px solid black;
padding-left: 40px;
`
@@ -70,26 +70,28 @@ const FormBuilderLayout = ({
})
return (
<Columns>
- <Tabs
- activeKey={`${activeTab}`}
- onChange={tab => {
- changeProperties({
- type: 'form',
- properties: getForms[tab],
- })
- changeTabs(tab)
- }}
- sections={Sections}
- title="builder"
- />
- <AdminStyled>
+ <Form>
+ <Tabs
+ activeKey={`${activeTab}`}
+ onChange={tab => {
+ changeProperties({
+ type: 'form',
+ properties: getForms[tab],
+ })
+ changeTabs(tab)
+ }}
+ sections={Sections}
+ title="builder"
+ />
+ </Form>
+ <DetailsStyled>
<ComponentProperties
changeTabs={changeTabs}
key={`${properties.type}-${(properties.properties || {}).id}`}
onSubmitFn={properties.type === 'form' ? updateForm : updateElements}
properties={properties}
/>
- </AdminStyled>
+ </DetailsStyled>
</Columns>
)
}
diff --git a/app/components/component-xpub-formbuilder/src/components/atoms/Columns.js b/app/components/component-xpub-formbuilder/src/components/atoms/Columns.js
index d51800fd26..c550c32179 100644
--- a/app/components/component-xpub-formbuilder/src/components/atoms/Columns.js
+++ b/app/components/component-xpub-formbuilder/src/components/atoms/Columns.js
@@ -3,20 +3,20 @@ import styled from 'styled-components'
const Columns = styled.div`
display: grid;
grid-column-gap: 2em;
- grid-template-areas: 'manuscript admin';
+ grid-template-areas: 'form details';
grid-template-columns: minmax(200px, 70ch) minmax(200px, 60ch);
justify-content: center;
`
-const Manuscript = styled.div`
- grid-area: manuscript;
+const Form = styled.div`
+ grid-area: form;
`
-const Admin = styled.div`
- grid-area: admin;
+const Details = styled.div`
+ grid-area: details;
border-left: 1px solid black;
padding-left: 40px;
`
-export { Columns, Manuscript, Admin }
+export { Columns, Form, Details }
diff --git a/app/components/component-xpub-submit/src/components/FormTemplate.js b/app/components/component-xpub-submit/src/components/FormTemplate.js
index 984e1c24cd..9440974a71 100644
--- a/app/components/component-xpub-submit/src/components/FormTemplate.js
+++ b/app/components/component-xpub-submit/src/components/FormTemplate.js
@@ -313,14 +313,14 @@ export default ({
{values.status !== 'submitted' && form.haspopup === 'false' && (
<Button onClick={handleSubmit} primary type="submit">
- Submit your manuscript
+ Submit your research object
</Button>
)}
{values.status !== 'submitted' && form.haspopup === 'true' && (
<div>
<Button onClick={toggleConfirming} primary type="button">
- Submit your manuscript
+ Submit your research object
</Button>
</div>
)}
diff --git a/app/theme/elements/GlobalStyle.js b/app/theme/elements/GlobalStyle.js
index 5883f0ca25..1585b6267f 100644
--- a/app/theme/elements/GlobalStyle.js
+++ b/app/theme/elements/GlobalStyle.js
@@ -1,6 +1,10 @@
-import { css } from 'styled-components'
+import { createGlobalStyle } from 'styled-components'
+
+export default createGlobalStyle`
+ html {
+ overflow: hidden;
+ }
-export default css`
body {
height: 100vh;
}
diff --git a/app/theme/elements/TextField.js b/app/theme/elements/TextField.js
index 987979f1fa..208da5b828 100644
--- a/app/theme/elements/TextField.js
+++ b/app/theme/elements/TextField.js
@@ -6,8 +6,6 @@ export default {
// -- input padding: breaking the grid?
// -- small placeholder text? maybe by default?
Input: css`
- border-width: 0 0 1px 0;
- border-style: dashed;
border-color: ${props => {
switch (props.validationStatus) {
case 'success':
@@ -32,7 +30,6 @@ export default {
return 'inherit'
}
}};
- height: calc(${th('gridUnit')} * 8);
outline: 0;
padding: 0 0 0 2px;
transition: ${th('transitionDuration')} ${th('transitionTimingFunction')};
--
GitLab