diff options
Diffstat (limited to 'frontend/src/components')
| -rw-r--r-- | frontend/src/components/Form/Input.js | 9 | ||||
| -rw-r--r-- | frontend/src/components/Form/mixins.js | 25 | ||||
| -rw-r--r-- | frontend/src/components/Inputs/Code.js | 40 | ||||
| -rw-r--r-- | frontend/src/components/Inputs/Dropdown.js | 57 | ||||
| -rw-r--r-- | frontend/src/components/Inputs/Password.js | 4 | ||||
| -rw-r--r-- | frontend/src/components/Inputs/Text.js | 4 | ||||
| -rw-r--r-- | frontend/src/components/Inputs/shared.js | 24 | ||||
| -rw-r--r-- | frontend/src/components/Watermark.js | 1 | ||||
| -rw-r--r-- | frontend/src/components/decorators/FloatingLabel.js | 44 |
9 files changed, 115 insertions, 93 deletions
diff --git a/frontend/src/components/Form/Input.js b/frontend/src/components/Form/Input.js index 86af7d1..4dbc002 100644 --- a/frontend/src/components/Form/Input.js +++ b/frontend/src/components/Form/Input.js @@ -1,3 +1,10 @@ -import {RelPositioning} from "../Inputs/shared"; import React from "react"; +import styled from 'styled-components' +import {Border, DropShadow, InputLike, Rounded} from "./mixins"; +export const Input = styled.input` + ${Border} + ${Rounded} + ${DropShadow} + ${InputLike} +`
\ No newline at end of file diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js index dd26f7e..55d6259 100644 --- a/frontend/src/components/Form/mixins.js +++ b/frontend/src/components/Form/mixins.js @@ -1,16 +1,22 @@ import {css} from 'styled-components'; -export const Dropshadow = css` +export const DropShadow = css` box-shadow: 0 14px 28px rgba(27, 33, 48,0.06), 0 10px 10px rgba(27, 33, 48,0.02); ` +export const Rounded = css` + border-radius: 3px; +` + +export const Border = css` + border: 1px solid ${p => p.theme.colors.border}; +` + export const InputLike = css` - width: 100%; font-family: 'JetBrains Mono', monospace; + width: 100%; font-size: 0.8em; - padding: calc(0.8em - 1px); - border-radius: 3px; - border: 1px solid ${p => p.theme.colors.border}; + padding: 0.6em; outline: none; margin: 1.7em 0; ` @@ -21,13 +27,4 @@ export const ButtonLike = css` padding: 0.8em 2em; margin: 2em 0; outline: 0; - - ${p => p.primary ? ` - color: #faf9f5; - background-color: #111111; - ` : ` - color: #faf9f5; - background-color: #111111; - `} - `
\ No newline at end of file diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js index 1353d95..0fd6240 100644 --- a/frontend/src/components/Inputs/Code.js +++ b/frontend/src/components/Inputs/Code.js @@ -1,8 +1,7 @@ import React, {useEffect, useRef} from "react"; import * as indentation from "indent-textarea"; -import FloatingLabel from "../decorators/FloatingLabel"; import CharLimit from "../decorators/CharLimit"; -import {RelPositioning} from "./shared"; +import {Labelled} from "./shared"; export const Code = ({content, ...props}) => { const textInput = useRef(null); @@ -12,24 +11,23 @@ export const Code = ({content, ...props}) => { }, [textInput]) return ( - <RelPositioning> - <FloatingLabel - label="content" - id={props.id} - value={content} /> - <textarea - name="content" - readOnly={props.readOnly} - placeholder="Paste your text here" - value={content} - id={props.id} - ref={textInput} - required - onChange={props.onChange} - className="lt-shadow" /> - <CharLimit - content={content} - maxLength={props.maxLength} /> - </RelPositioning> + <Labelled + label="content" + id={props.id} + value={content}> + <textarea + name="content" + readOnly={props.readOnly} + placeholder="Paste your text here" + value={content} + id={props.id} + ref={textInput} + required + onChange={props.onChange} + className="lt-shadow" /> + <CharLimit + content={content} + maxLength={props.maxLength} /> + </Labelled> ); }
\ No newline at end of file diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js index c467408..a3f3b48 100644 --- a/frontend/src/components/Inputs/Dropdown.js +++ b/frontend/src/components/Inputs/Dropdown.js @@ -1,8 +1,50 @@ import Dropdown from "react-dropdown"; import FloatingLabel from "../decorators/FloatingLabel"; import React from "react"; +import styled from 'styled-components'; import {LANGS, THEMES} from "../renderers/Code"; -import {FlexChild} from "./shared"; +import {Labelled} from "./shared"; +import {Border, InputLike, Rounded} from "../Form/mixins"; + +const StyledDropdown = styled(Dropdown)` + ${Border} + ${Rounded} + ${InputLike} + cursor: pointer; + + & .Dropdown-root { + cursor: pointer; + + &:hover, &.is-open { + opacity: 1; + } + + & + label { + opacity: 1; + top: -0.1em; + } + } + + & .Dropdown-placeholder { + width: 5.5em; + } + + & .Dropdown-menu { + border-top: 1px solid ${p => p.theme.colors.text}; + margin-top: 0.5em; + bottom: auto; + } + + & .Dropdown-option { + margin-top: 0.5em; + transition: all 0.5s cubic-bezier(.25,.8,.25,1); + + &:hover { + font-weight: 700; + opacity: 0.4; + } + } +` const GenericDropdown = (props) => { function _onSelect(option) { @@ -15,18 +57,17 @@ const GenericDropdown = (props) => { } return ( - <FlexChild> - <Dropdown + <Labelled + label={props.label} + id={props.id} + value={props.value}> + <StyledDropdown options={props.options} onChange={_onSelect} value={props.value} placeholder={props.placeholder} id={props.id} /> - <FloatingLabel - label={props.label} - id={props.id} - value={props.value} /> - </FlexChild> + </Labelled> ); } diff --git a/frontend/src/components/Inputs/Password.js b/frontend/src/components/Inputs/Password.js index 7311832..ca00f27 100644 --- a/frontend/src/components/Inputs/Password.js +++ b/frontend/src/components/Inputs/Password.js @@ -1,10 +1,10 @@ import React from "react"; import {Labelled} from "./shared"; +import {Input} from "../Form/Input"; export const Password = (props) => <Labelled label="password"> - <input + <Input name="pass" - className="lt-shadow" placeholder="password" type="password" autoComplete="off" diff --git a/frontend/src/components/Inputs/Text.js b/frontend/src/components/Inputs/Text.js index 866da91..0a26d42 100644 --- a/frontend/src/components/Inputs/Text.js +++ b/frontend/src/components/Inputs/Text.js @@ -1,15 +1,15 @@ import CharLimit from "../decorators/CharLimit"; import React from "react"; import {Labelled} from "./shared"; +import {Input} from "../Form/Input"; export const Text = React.forwardRef(({label, id, readOnly, onChange, value, maxLength, autoFocus}, ref) => { return ( <Labelled label={label} value={value}> - <input + <Input ref={ref} name={label} readOnly={readOnly} - className="lt-shadow" placeholder="Title" id={id} type="text" diff --git a/frontend/src/components/Inputs/shared.js b/frontend/src/components/Inputs/shared.js index 18ba164..4239e89 100644 --- a/frontend/src/components/Inputs/shared.js +++ b/frontend/src/components/Inputs/shared.js @@ -2,24 +2,14 @@ import styled from "styled-components"; import React from "react"; import FloatingLabel from "../decorators/FloatingLabel"; -export const RelPositioning = styled.div` - position: relative; - height: calc(100% - 4em); -` - -export const FlexChild = styled.div` +export const Wrapper = styled.div` display: block; margin-left: 2em; ` -export const Labelled = ({label, value, children}) => { - console.log(children) - return (<FlexChild> - <RelPositioning> - <FloatingLabel label={label} value={value} > - <span>{label}</span> - {children} - </FloatingLabel> - </RelPositioning> - </FlexChild>) -}
\ No newline at end of file +export const Labelled = ({label, value, children}) => <Wrapper> + <FloatingLabel label={label} value={value} > + <span>{label}</span> + {children} + </FloatingLabel> +</Wrapper>
\ No newline at end of file diff --git a/frontend/src/components/Watermark.js b/frontend/src/components/Watermark.js index 027aeb6..1b7863d 100644 --- a/frontend/src/components/Watermark.js +++ b/frontend/src/components/Watermark.js @@ -14,7 +14,6 @@ const Logo = styled.h1` text-decoration: none; position: relative; color: ${p => p.theme.colors.text}; - } &:hover { diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js index 1e5a427..ddd963d 100644 --- a/frontend/src/components/decorators/FloatingLabel.js +++ b/frontend/src/components/decorators/FloatingLabel.js @@ -1,32 +1,22 @@ import React from 'react'; -import styled, { css } from 'styled-components' +import styled from 'styled-components' const StyledLabel = styled.label` - & > span { - position: absolute; - top: 0.5em; - font-weight: 700; - font-size: 1em; - opacity: 0.5; - transition: all 0.5s cubic-bezier(.25,.8,.25,1); - - ${props => - (props.value?.length > 0) && - css` - opacity: 1 - `}; - } + position: relative; + & > span { + position: absolute; + transform: translateY(-0.2em); + font-weight: 700; + font-size: 1em; + opacity: 0.5; + transition: opacity 0.5s cubic-bezier(.25,.8,.25,1); + } + + &:hover > span { + opacity: 1; + } ` -const FloatingLabel = (props) => { - return ( - <StyledLabel - label={props.label} - value={props.value} - > - {props.children} - </StyledLabel> - ); -} - -export default FloatingLabel
\ No newline at end of file +export default (props) => <StyledLabel label={props.label}> + {props.children} +</StyledLabel> |