diff options
Diffstat (limited to 'frontend/src/components/fields')
| -rw-r--r-- | frontend/src/components/fields/ButtonField.js | 49 | ||||
| -rw-r--r-- | frontend/src/components/fields/ButtonField.scss | 123 | ||||
| -rw-r--r-- | frontend/src/components/fields/CheckField.js | 37 | ||||
| -rw-r--r-- | frontend/src/components/fields/CheckField.scss | 39 | ||||
| -rw-r--r-- | frontend/src/components/fields/ChoiceField.js | 68 | ||||
| -rw-r--r-- | frontend/src/components/fields/ChoiceField.scss | 69 | ||||
| -rw-r--r-- | frontend/src/components/fields/InputField.js | 78 | ||||
| -rw-r--r-- | frontend/src/components/fields/InputField.scss | 125 | ||||
| -rw-r--r-- | frontend/src/components/fields/TextField.js | 43 | ||||
| -rw-r--r-- | frontend/src/components/fields/TextField.scss | 54 | ||||
| -rw-r--r-- | frontend/src/components/fields/common.scss | 54 | ||||
| -rw-r--r-- | frontend/src/components/fields/extensions/ColorField.js | 82 | ||||
| -rw-r--r-- | frontend/src/components/fields/extensions/ColorField.scss | 46 | ||||
| -rw-r--r-- | frontend/src/components/fields/extensions/NumericField.js | 45 |
14 files changed, 912 insertions, 0 deletions
diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js new file mode 100644 index 0000000..cc32b0f --- /dev/null +++ b/frontend/src/components/fields/ButtonField.js @@ -0,0 +1,49 @@ +import React, {Component} from 'react'; +import './ButtonField.scss'; +import './common.scss'; + +const classNames = require('classnames'); + +class ButtonField extends Component { + + render() { + const handler = () => { + if (typeof this.props.onClick === "function") { + this.props.onClick(); + } + }; + + let buttonClassnames = { + "button-bordered": this.props.bordered, + }; + if (this.props.variant) { + buttonClassnames[`button-variant-${this.props.variant}`] = true; + } + + let buttonStyle = {}; + if (this.props.color) { + buttonStyle["backgroundColor"] = this.props.color; + } + if (this.props.border) { + buttonStyle["borderColor"] = this.props.border; + } + if (this.props.fullSpan) { + buttonStyle["width"] = "100%"; + } + if (this.props.rounded) { + buttonStyle["borderRadius"] = "3px"; + } + if (this.props.inline) { + buttonStyle["marginTop"] = "8px"; + } + + return ( + <div className={classNames( "field", "button-field", {"field-small": this.props.small})}> + <button type="button" className={classNames(classNames(buttonClassnames))} + onClick={handler} style={buttonStyle}>{this.props.name}</button> + </div> + ); + } +} + +export default ButtonField; diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss new file mode 100644 index 0000000..cfd20ff --- /dev/null +++ b/frontend/src/components/fields/ButtonField.scss @@ -0,0 +1,123 @@ +@import '../../colors.scss'; + +.button-field { + font-size: 0.9em; + + .button-bordered { + border-bottom: 5px solid $color-primary-1; + } + + &.field-small { + font-size: 0.8em; + + button { + padding: 3px 12px; + } + } + + .button-variant-red { + color: $color-red-light; + background-color: $color-red; + + &.button-bordered { + border-bottom: 5px solid $color-red-dark; + } + + &:hover, + &:active { + color: $color-red-light; + background-color: $color-red-dark; + } + } + + .button-variant-pink { + color: $color-pink-light; + background-color: $color-pink; + + &.button-bordered { + border-bottom: 5px solid $color-pink-dark; + } + + &:hover, + &:active { + color: $color-pink-light; + background-color: $color-pink-dark; + } + } + + .button-variant-purple { + color: $color-purple-light; + background-color: $color-purple; + + &.button-bordered { + border-bottom: 5px solid $color-purple-dark; + } + + &:hover, + &:active { + color: $color-purple-light; + background-color: $color-purple-dark; + } + } + + .button-variant-deep-purple { + color: $color-deep-purple-light; + background-color: $color-deep-purple; + + &.button-bordered { + border-bottom: 5px solid $color-deep-purple-dark; + } + + &:hover, + &:active { + color: $color-deep-purple-light; + background-color: $color-deep-purple-dark; + } + } + + .button-variant-indigo { + color: $color-indigo-light; + background-color: $color-indigo; + + &.button-bordered { + border-bottom: 5px solid $color-indigo-dark; + } + + &:hover, + &:active { + color: $color-indigo-light; + background-color: $color-indigo-dark; + } + } + + .button-variant-blue { + color: $color-blue-light; + background-color: $color-blue; + + &.button-bordered { + border-bottom: 5px solid $color-blue-dark; + } + + &:hover, + &:active { + color: $color-blue-light; + background-color: $color-blue-dark; + } + } + + .button-variant-green { + color: $color-green-light; + background-color: $color-green; + + &.button-bordered { + border-bottom: 5px solid $color-green-dark; + } + + &:hover, + &:active { + color: $color-green-light; + background-color: $color-green-dark; + } + } + +} diff --git a/frontend/src/components/fields/CheckField.js b/frontend/src/components/fields/CheckField.js new file mode 100644 index 0000000..33f4f83 --- /dev/null +++ b/frontend/src/components/fields/CheckField.js @@ -0,0 +1,37 @@ +import React, {Component} from 'react'; +import './CheckField.scss'; +import './common.scss'; +import {randomClassName} from "../../utils"; + +const classNames = require('classnames'); + +class CheckField extends Component { + + constructor(props) { + super(props); + + this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; + } + + render() { + const checked = this.props.checked || false; + const small = this.props.small || false; + const name = this.props.name || null; + const handler = () => { + if (this.props.onChange) { + this.props.onChange(!checked); + } + }; + + return ( + <div className={classNames( "field", "check-field", {"field-checked" : checked}, {"field-small": small})}> + <div className="field-input"> + <input type="checkbox" id={this.id} checked={checked} onChange={handler} /> + <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + (name != null ? name : "")}</label> + </div> + </div> + ); + } +} + +export default CheckField; diff --git a/frontend/src/components/fields/CheckField.scss b/frontend/src/components/fields/CheckField.scss new file mode 100644 index 0000000..ab932b4 --- /dev/null +++ b/frontend/src/components/fields/CheckField.scss @@ -0,0 +1,39 @@ +@import '../../colors.scss'; + +.check-field { + font-size: 0.9em; + margin: 5px 0; + + .field-input { + border-radius: 5px; + width: fit-content; + background-color: $color-primary-2; + + input { + display: none; + } + + label { + margin: 0; + padding: 6px 15px; + cursor: pointer; + } + + &:hover { + background-color: $color-primary-1; + } + } + + &.field-checked .field-input { + background-color: $color-primary-4 !important; + color: $color-primary-3; + } + + &.field-small { + font-size: 0.8em; + + .field-input label { + padding: 7px 15px; + } + } +} diff --git a/frontend/src/components/fields/ChoiceField.js b/frontend/src/components/fields/ChoiceField.js new file mode 100644 index 0000000..73e950d --- /dev/null +++ b/frontend/src/components/fields/ChoiceField.js @@ -0,0 +1,68 @@ +import React, {Component} from 'react'; +import './ChoiceField.scss'; +import './common.scss'; +import {randomClassName} from "../../utils"; + +const classNames = require('classnames'); + +class ChoiceField extends Component { + + constructor(props) { + super(props); + + this.state = { + expanded: false + }; + + this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; + } + + render() { + const name = this.props.name || null; + const inline = this.props.inline; + + const collapse = () => this.setState({expanded: false}); + const expand = () => this.setState({expanded: true}); + + const handler = (key) => { + collapse(); + if (this.props.onChange) { + this.props.onChange(key); + } + }; + + const keys = this.props.keys || []; + const values = this.props.values || []; + + const options = keys.map((key, i) => + <span className="field-option" key={key} onClick={() => handler(key)}>{values[i]}</span> + ); + + let fieldValue = ""; + if (inline && name) { + fieldValue = name; + } + if (!this.props.onlyName && inline && name) { + fieldValue += ": "; + } + if (!this.props.onlyName) { + fieldValue += this.props.value || "select a value"; + } + + return ( + <div className={classNames( "field", "choice-field", {"field-inline" : inline}, + {"field-small": this.props.small})}> + {!inline && name && <label className="field-name">{name}:</label>} + <div className={classNames("field-select", {"select-expanded": this.state.expanded})} + tabIndex={0} onBlur={collapse} onClick={() => this.state.expanded ? collapse() : expand()}> + <div className="field-value">{fieldValue}</div> + <div className="field-options"> + {options} + </div> + </div> + </div> + ); + } +} + +export default ChoiceField; diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss new file mode 100644 index 0000000..e7683b7 --- /dev/null +++ b/frontend/src/components/fields/ChoiceField.scss @@ -0,0 +1,69 @@ +@import '../../colors.scss'; + +.choice-field { + font-size: 0.9em; + + .field-name { + margin: 0; + } + + .field-select { + position: relative; + margin-top: 5px; + + .field-value { + background-color: $color-primary-2; + border: none; + color: $color-primary-4; + border-radius: 5px; + padding: 7px 25px 7px 10px; + cursor: pointer; + + &:after { + content: "⋎"; + position: absolute; + right: 10px; + } + } + + .field-options { + position: absolute; + top: 35px; + width: 100%; + z-index: 20; + border-top: 3px solid $color-primary-0; + border-radius: 5px; + background-color: $color-primary-2; + display: none; + + .field-option { + display: block; + padding: 5px 10px; + cursor: pointer; + border-radius: 5px; + } + + .field-option:hover { + background-color: $color-primary-1; + } + } + + &:focus { + outline: none; + } + } + + .field-select.select-expanded { + .field-options { + display: block; + } + + .field-value:after { + content: "⋏"; + } + } + + &.field-small { + font-size: 0.8em; + } +} diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js new file mode 100644 index 0000000..84c981b --- /dev/null +++ b/frontend/src/components/fields/InputField.js @@ -0,0 +1,78 @@ +import React, {Component} from 'react'; +import './InputField.scss'; +import './common.scss'; +import {randomClassName} from "../../utils"; + +const classNames = require('classnames'); + +class InputField extends Component { + + constructor(props) { + super(props); + + this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; + } + + render() { + const active = this.props.active || false; + const invalid = this.props.invalid || false; + const small = this.props.small || false; + const inline = this.props.inline || false; + const name = this.props.name || null; + const value = this.props.value || ""; + const defaultValue = this.props.defaultValue || ""; + const type = this.props.type || "text"; + const error = this.props.error || null; + + const handler = (e) => { + if (typeof this.props.onChange === "function") { + if (type === "file") { + let file = e.target.files[0]; + this.props.onChange(file); + } else if (e == null) { + this.props.onChange(defaultValue); + } else { + this.props.onChange(e.target.value); + } + } + }; + let inputProps = {}; + if (type !== "file") { + inputProps["value"] = value || defaultValue; + } + + return ( + <div className={classNames("field", "input-field", {"field-active" : active}, + {"field-invalid": invalid}, {"field-small": small}, {"field-inline": inline})}> + <div className="field-wrapper"> + { name && + <div className="field-name"> + <label>{name}:</label> + </div> + } + <div className="field-input"> + <div className="field-value"> + { type === "file" && <label for={this.id} className={"file-label"}> + {value.name || this.props.placeholder}</label> } + <input type={type} placeholder={this.props.placeholder} id={this.id} + aria-describedby={this.id} onChange={handler} {...inputProps} + readOnly={this.props.readonly} /> + </div> + { type !== "file" && value !== "" && + <div className="field-clear"> + <span onClick={() => handler(null)}>del</span> + </div> + } + </div> + </div> + {error && + <div className="field-error"> + error: {error} + </div> + } + </div> + ); + } +} + +export default InputField; diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss new file mode 100644 index 0000000..79e2b7e --- /dev/null +++ b/frontend/src/components/fields/InputField.scss @@ -0,0 +1,125 @@ +@import '../../colors.scss'; + +.input-field { + font-size: 0.9em; + margin: 5px 0; + + .field-name { + label { + margin: 0; + } + } + + .field-input { + position: relative; + + .field-value { + .file-label { + background-color: $color-primary-2; + margin: 0; + width: 100%; + color: $color-primary-4; + border-radius: 5px; + padding: 7px 10px; + cursor: pointer; + } + + input[type="file"] { + display: none; + } + + .file-label:after { + content: "Browse"; + position: absolute; + right: 0; + top: 0; + padding: 7px 10px 7px 12px; + background-color: $color-primary-1; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; + } + } + } + + &.field-active { + &.field-inline .field-name { + background-color: $color-primary-4 !important; + color: $color-primary-3 !important; + } + + .field-value input, .field-value .file-label { + background-color: $color-primary-4 !important; + color: $color-primary-3 !important; + } + + .file-label:after { + background-color: $color-secondary-4 !important; + } + } + + &.field-invalid { + &.field-inline .field-name { + background-color: $color-secondary-2 !important; + color: $color-primary-4 !important; + } + + .field-value input, .field-value .file-label { + background-color: $color-secondary-2 !important; + color: $color-primary-4 !important; + } + + .file-label:after { + background-color: $color-secondary-1 !important; + } + } + + &.field-small { + font-size: 0.8em; + } + + &.field-inline .field-wrapper { + display: flex; + + .field-name { + background-color: $color-primary-2; + padding: 6px 7px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + + .field-input { + width: 100%; + + input, .file-label { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + padding-left: 3px; + } + } + + &:focus-within .field-name { + background-color: $color-primary-1; + } + } + + .field-clear { + position: absolute; + right: 8px; + top: 8px; + z-index: 10; + font-size: 0.9em; + font-weight: 600; + letter-spacing: -0.5px; + cursor: pointer; + } + + &.field-active .field-clear { + color: $color-primary-2; + } + + .field-error { + padding: 5px 10px; + font-size: 0.9em; + color: $color-secondary-0; + } +} diff --git a/frontend/src/components/fields/TextField.js b/frontend/src/components/fields/TextField.js new file mode 100644 index 0000000..de68c21 --- /dev/null +++ b/frontend/src/components/fields/TextField.js @@ -0,0 +1,43 @@ +import React, {Component} from 'react'; +import './TextField.scss'; +import './common.scss'; +import {randomClassName} from "../../utils"; + +const classNames = require('classnames'); + +class TextField extends Component { + + constructor(props) { + super(props); + + this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; + } + + render() { + const name = this.props.name || null; + const error = this.props.error || null; + const rows = this.props.rows || 3; + + const handler = (e) => { + if (this.props.onChange) { + if (e == null) { + this.props.onChange(""); + } else { + this.props.onChange(e.target.value); + } + } + }; + + return ( + <div className={classNames("field", "text-field", {"field-active": this.props.active}, + {"field-invalid": this.props.invalid}, {"field-small": this.props.small})}> + {name && <label htmlFor={this.id}>{name}:</label>} + <textarea id={this.id} placeholder={this.props.defaultValue} onChange={handler} rows={rows} + readOnly={this.props.readonly} value={this.props.value} ref={this.props.textRef} /> + {error && <div className="field-error">error: {error}</div>} + </div> + ); + } +} + +export default TextField; diff --git a/frontend/src/components/fields/TextField.scss b/frontend/src/components/fields/TextField.scss new file mode 100644 index 0000000..de831fb --- /dev/null +++ b/frontend/src/components/fields/TextField.scss @@ -0,0 +1,54 @@ +@import '../../colors.scss'; + +.text-field { + font-size: 0.9em; + margin: 5px 0; + + label { + display: block; + margin: 0; + } + + textarea { + resize: none; + } + + &.field-active { + textarea { + background-color: $color-primary-4 !important; + color: $color-primary-3 !important; + } + } + + &.field-invalid { + textarea { + background-color: $color-secondary-2 !important; + color: $color-primary-4 !important; + } + } + + &.field-small { + font-size: 0.8em; + } + + .field-clear { + position: absolute; + right: 8px; + top: 8px; + z-index: 10; + font-size: 0.9em; + font-weight: 600; + letter-spacing: -0.5px; + cursor: pointer; + } + + &.field-active .field-clear { + color: $color-primary-2; + } + + .field-error { + padding: 5px 10px; + font-size: 0.9em; + color: $color-secondary-0; + } +} diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss new file mode 100644 index 0000000..f83a988 --- /dev/null +++ b/frontend/src/components/fields/common.scss @@ -0,0 +1,54 @@ +@import '../../colors.scss'; + +.field { + + input, textarea { + background-color: $color-primary-2; + width: 100%; + border: none; + color: $color-primary-4; + border-radius: 5px; + padding: 7px 10px; + + &:focus { + background-color: $color-primary-1; + color: $color-primary-4; + box-shadow: none; + outline: none; + } + + &[readonly] { + background-color: $color-primary-2; + border: none; + color: $color-primary-4; + } + + &[readonly]:focus { + background-color: $color-primary-1; + color: $color-primary-4; + box-shadow: none; + } + } + + button { + border-radius: 0; + background-color: $color-primary-2; + border: none; + color: $color-primary-4; + outline: none; + padding: 5px 12px; + font-weight: 500; + + &:hover, + &:active { + background-color: $color-primary-1; + color: $color-primary-4; + } + + &:focus, + &:active { + outline: none !important; + box-shadow: none !important; + } + } +} diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js new file mode 100644 index 0000000..96ebc49 --- /dev/null +++ b/frontend/src/components/fields/extensions/ColorField.js @@ -0,0 +1,82 @@ +import React, {Component} from 'react'; +import {OverlayTrigger, Popover} from "react-bootstrap"; +import './ColorField.scss'; +import InputField from "../InputField"; +import validation from "../../../validation"; + +class ColorField extends Component { + + constructor(props) { + super(props); + + this.state = { + }; + + this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1", + "#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"]; + } + + componentDidUpdate(prevProps, prevState, snapshot) { + if (prevProps.value !== this.props.value) { + this.onChange(this.props.value); + } + } + + onChange = (value) => { + this.setState({invalid: value !== "" && !validation.isValidColor(value)}); + + if (typeof this.props.onChange === "function") { + this.props.onChange(value); + } + }; + + render() { + const colorButtons = this.colors.map((color) => + <span key={"button" + color} className="color-input" style={{"backgroundColor": color}} + onClick={() => { + if (typeof this.props.onChange === "function") { + this.props.onChange(color); + } + document.body.click(); // magic to close popup + }} />); + + const popover = ( + <Popover id="popover-basic"> + <Popover.Title as="h3">choose a color</Popover.Title> + <Popover.Content> + <div className="colors-container"> + <div className="colors-row"> + {colorButtons.slice(0, 8)} + </div> + <div className="colors-row"> + {colorButtons.slice(8, 18)} + </div> + </div> + </Popover.Content> + </Popover> + ); + + let buttonStyles = {}; + if (this.props.value) { + buttonStyles["backgroundColor"] = this.props.value; + } + + return ( + <div className="field color-field"> + <div className="color-input"> + <InputField {...this.props} onChange={this.onChange} invalid={this.state.invalid} name="color" + error={null} /> + <div className="color-picker"> + <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose> + <button type="button" className="picker-button" style={buttonStyles}>pick</button> + </OverlayTrigger> + </div> + </div> + {this.props.error && <div className="color-error">{this.props.error}</div>} + </div> + ); + } + +} + +export default ColorField; diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss new file mode 100644 index 0000000..6eabbda --- /dev/null +++ b/frontend/src/components/fields/extensions/ColorField.scss @@ -0,0 +1,46 @@ +@import '../../../colors.scss'; + +.color-field { + .color-input { + display: flex; + align-items: flex-end; + + .input-field { + flex: 1; + + input { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; + } + } + + .color-picker { + margin-bottom: 5px; + + .picker-button { + font-size: 0.8em; + padding: 8px 15px; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; + background-color: $color-primary-1; + } + } + } + + .color-error { + font-size: 0.8em; + color: $color-secondary-0; + margin-left: 10px; + } +} + +.colors-container { + width: 600px; + + .color-input { + display: inline-block; + width: 31px; + height: 31px; + cursor: pointer; + } +} diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js new file mode 100644 index 0000000..ed81ed7 --- /dev/null +++ b/frontend/src/components/fields/extensions/NumericField.js @@ -0,0 +1,45 @@ +import React, {Component} from 'react'; +import InputField from "../InputField"; + +class NumericField extends Component { + + constructor(props) { + super(props); + + this.state = { + invalid: false + }; + } + + componentDidUpdate(prevProps, prevState, snapshot) { + if (prevProps.value !== this.props.value) { + this.onChange(this.props.value); + } + } + + onChange = (value) => { + value = value.toString().replace(/[^\d]/gi, ''); + let intValue = 0; + if (value !== "") { + intValue = parseInt(value); + } + const valid = + (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) && + (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) && + (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max)); + this.setState({invalid: !valid}); + if (typeof this.props.onChange === "function") { + this.props.onChange(intValue); + } + }; + + render() { + return ( + <InputField {...this.props} onChange={this.onChange} defaultValue={this.props.defaultValue || "0"} + invalid={this.state.invalid} /> + ); + } + +} + +export default NumericField; |