oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

form tweaks

Browse Source 
* add small modifier for all form elements
* ditch bold font
* use small elements for edit mode
This commit is contained in:
Matthias Kretschmann 2019-04-24 17:46:53 +02:00
parent 583f15b6b3
commit d1ce2c1963
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 82 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
client/src/components/atoms/Form/Input.module.scss
View File

@ -39,7 +39,6 @@
.input {
font-size: $font-size-base;
font-family: $font-family-base;
font-weight: $font-weight-bold;
color: $brand-black;
border: none;
box-shadow: none;
@ -62,7 +61,6 @@
font-family: $font-family-base;
font-size: $font-size-base;
color: $brand-grey-light;
font-weight: $font-weight-base;
transition: .2s ease-out;
opacity: .7;
}
@ -86,6 +84,17 @@
// box-shadow: 0 0 0 1000px $brand-black inset;
// transition: background-color 5000s ease-in-out 0s;
// }
// Size modifiers
&.small {
font-size: $font-size-small;
min-height: 33px;
padding: $spacer / 4;
&::placeholder {
font-size: $font-size-small;
}
}
}
.select {
@ -114,6 +123,16 @@
outline: 0;
font-family: $font-family-base;
}
&.small {
height: 32px;
padding-right: 2rem;
// custom arrow
background-position: calc(100% - 14px) 1rem, calc(100% - 9px) 1rem,
100% 0;
background-size: 5px 5px, 5px 5px, 2rem 3rem;
}
}
.radioGroup {
@ -165,26 +184,3 @@
display: flex;
align-items: center;
}
// Size modifiers
.inputSmall {
composes: input;
font-size: $font-size-small;
min-height: 32px;
padding: $spacer / 4;
&::placeholder {
font-size: $font-size-small;
}
}
.selectSmall {
composes: select;
height: 32px;
padding-right: 2rem;
// custom arrow
background-position: calc(100% - 14px) 1rem, calc(100% - 9px) 1rem, 100% 0;
background-size: 5px 5px, 5px 5px, 2rem 3rem;
}

27
client/src/components/atoms/Form/Input.tsx
View File

@ -1,7 +1,7 @@
import cx from 'classnames'
import React, { PureComponent, FormEvent, ChangeEvent } from 'react'
import slugify from 'slugify'
import DatePicker from 'react-datepicker'
import cx from 'classnames'
import { ReactComponent as SearchIcon } from '../../../img/search.svg'
import Help from './Help'
import Label from './Label'
@ -31,6 +31,7 @@ interface InputProps {
group?: any
multiple?: boolean
disabled?: boolean
small?: boolean
}
interface InputState {
@ -82,6 +83,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
onChange,
value,
disabled
small
} = this.props
const wrapClass = this.inputWrapClasses()
@ -92,7 +94,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
<div className={wrapClass}>
<select
id={name}
className={styles.select}
className={cx(styles.select, small && styles.small)}
name={name}
required={required}
onFocus={this.toggleFocus}
@ -118,7 +120,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
<div className={wrapClass}>
<textarea
id={name}
className={styles.input}
className={cx(styles.input, small && styles.small)}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
{...this.props}
@ -162,7 +164,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
<DatePicker
selected={this.state.dateCreated}
onChange={this.handleDateChange}
className={styles.input}
className={cx(styles.input, small && styles.small)}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
id={name}
@ -179,7 +181,10 @@ export default class Input extends PureComponent<InputProps, InputState> {
<input
id={name}
type={type || 'text'}
className={styles.input}
className={cx(
styles.input,
small && styles.small
)}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
{...this.props}
@ -190,7 +195,10 @@ export default class Input extends PureComponent<InputProps, InputState> {
<input
id={name}
type={type || 'text'}
className={styles.input}
className={cx(
styles.input,
small && styles.small
)}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
{...this.props}
@ -210,12 +218,13 @@ export default class Input extends PureComponent<InputProps, InputState> {
required,
help,
additionalComponent,
multiple
multiple,
small
} = this.props
return (
<Row>
<Label htmlFor={name} required={required}>
<Row small={small}>
<Label htmlFor={name} required={required} small={small}>
{label}
</Label>

12
client/src/components/atoms/Form/Label.module.scss
View File

@ -7,11 +7,13 @@
line-height: 1.2;
display: block;
margin-bottom: $spacer / 6;
&.small {
font-size: $font-size-small;
}
}
.required {
composes: label;
&:after {
content: '*';
font-size: $font-size-base;
@ -19,4 +21,10 @@
display: inline-block;
margin-left: .1rem;
}
&.small {
&:after {
font-size: $font-size-small;
}
}
}

9
client/src/components/atoms/Form/Label.tsx
View File

@ -1,17 +1,24 @@
import React from 'react'
import cx from 'classnames'
import styles from './Label.module.scss'
const Label = ({
required,
children,
small,
...props
}: {
required?: boolean
children: string
htmlFor: string
small?: boolean
}) => (
<label
className={required ? styles.required : styles.label}
className={cx(
styles.label,
required && styles.required,
small && styles.small
)}
title={required ? 'Required' : ''}
{...props}
>

4
client/src/components/atoms/Form/Row.module.scss
View File

@ -2,4 +2,8 @@
.row {
margin-bottom: $spacer;
&.small {
margin-bottom: $spacer / 2;
}
}

5
client/src/components/atoms/Form/Row.tsx
View File

@ -1,8 +1,9 @@
import React from 'react'
import cx from 'classnames'
import styles from './Row.module.scss'
const Row = ({ children }: { children: any }) => (
<div className={styles.row}>{children}</div>
const Row = ({ children, small }: { children: any; small?: boolean }) => (
<div className={cx(styles.row, small && styles.small)}>{children}</div>
)
export default Row

15
client/src/data/form-styleguide.json
View File

@ -44,6 +44,21 @@
"placeholder": "e.g. 2019-08-12",
"type": "date",
"required": true
},
"name2": {
"label": "Your name",
"placeholder": "e.g. Jelly McJellyfish",
"type": "text",
"required": true,
"small": true,
"help": "Help me"
},
"industry2": {
"label": "Industry",
"type": "select",
"required": true,
"small": true,
"options": ["Automotive", "Technology"]
}
}
}

2
client/src/routes/Details/AssetDetails.tsx
View File

@ -152,6 +152,7 @@ export default class AssetDetails extends PureComponent<
onChange={this.inputChange}
value={value}
disabled={this.state.isLoading}
small
/>
) : (
<Moment date={value} format="L" interval={0} />
@ -169,6 +170,7 @@ export default class AssetDetails extends PureComponent<
options={steps[1].fields.categories.options}
value={value}
disabled={this.state.isLoading}
small
/>
) : (
// TODO: Make this link to search for respective category

1
client/src/routes/Styleguide.tsx
View File

@ -18,6 +18,7 @@ class Styleguide extends Component {
type={value.type}
help={value.help}
options={value.options}
small={value.small}
/>
))