aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/fields
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/fields')
-rw-r--r--frontend/src/components/fields/ButtonField.js44
-rw-r--r--frontend/src/components/fields/ButtonField.scss119
-rw-r--r--frontend/src/components/fields/CheckField.js5
-rw-r--r--frontend/src/components/fields/ChoiceField.js59
-rw-r--r--frontend/src/components/fields/ChoiceField.scss69
-rw-r--r--frontend/src/components/fields/InputField.js7
-rw-r--r--frontend/src/components/fields/InputField.scss28
-rw-r--r--frontend/src/components/fields/TextField.js5
-rw-r--r--frontend/src/components/fields/TextField.scss25
-rw-r--r--frontend/src/components/fields/common.scss54
-rw-r--r--frontend/src/components/fields/extensions/ColorField.js63
-rw-r--r--frontend/src/components/fields/extensions/ColorField.scss39
-rw-r--r--frontend/src/components/fields/extensions/NumericField.js39
13 files changed, 499 insertions, 57 deletions
diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js
new file mode 100644
index 0000000..b32aee8
--- /dev/null
+++ b/frontend/src/components/fields/ButtonField.js
@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import './ButtonField.scss';
+import './common.scss';
+
+const classNames = require('classnames');
+
+class ButtonField extends Component {
+
+ constructor(props) {
+ super(props);
+ }
+
+ 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;
+ }
+
+ 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..933279e
--- /dev/null
+++ b/frontend/src/components/fields/ButtonField.scss
@@ -0,0 +1,119 @@
+@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-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
index 5cceac4..33f4f83 100644
--- a/frontend/src/components/fields/CheckField.js
+++ b/frontend/src/components/fields/CheckField.js
@@ -1,5 +1,6 @@
import React, {Component} from 'react';
import './CheckField.scss';
+import './common.scss';
import {randomClassName} from "../../utils";
const classNames = require('classnames');
@@ -23,10 +24,10 @@ class CheckField extends Component {
};
return (
- <div className={classNames( "check-field", {"field-checked" : checked}, {"field-small": small})}>
+ <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}</label>
+ <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + (name != null ? name : "")}</label>
</div>
</div>
);
diff --git a/frontend/src/components/fields/ChoiceField.js b/frontend/src/components/fields/ChoiceField.js
new file mode 100644
index 0000000..d409b21
--- /dev/null
+++ b/frontend/src/components/fields/ChoiceField.js
@@ -0,0 +1,59 @@
+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>
+ );
+
+ 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">
+ {((inline && name) ? (name + ": ") : "") + (this.props.value || "select a value")}
+ </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..7f32b0e
--- /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 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
index af3b3df..6cf967a 100644
--- a/frontend/src/components/fields/InputField.js
+++ b/frontend/src/components/fields/InputField.js
@@ -1,5 +1,6 @@
import React, {Component} from 'react';
import './InputField.scss';
+import './common.scss';
import {randomClassName} from "../../utils";
const classNames = require('classnames');
@@ -36,12 +37,12 @@ class InputField extends Component {
};
let inputProps = {};
if (type !== "file") {
- inputProps["value"] = value;
+ inputProps["value"] = value || this.props.initialValue;
}
return (
- <div className={classNames("input-field", {"field-active" : active}, {"field-invalid": invalid},
- {"field-small": small}, {"field-inline": inline})}>
+ <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">
diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss
index cdb8c9f..79e2b7e 100644
--- a/frontend/src/components/fields/InputField.scss
+++ b/frontend/src/components/fields/InputField.scss
@@ -14,42 +14,20 @@
position: relative;
.field-value {
- input, .file-label {
+ .file-label {
background-color: $color-primary-2;
+ margin: 0;
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;
- }
+ cursor: pointer;
}
input[type="file"] {
display: none;
}
- .file-label {
- margin: 0;
- }
-
.file-label:after {
content: "Browse";
position: absolute;
diff --git a/frontend/src/components/fields/TextField.js b/frontend/src/components/fields/TextField.js
index 86b98ed..de68c21 100644
--- a/frontend/src/components/fields/TextField.js
+++ b/frontend/src/components/fields/TextField.js
@@ -1,5 +1,6 @@
import React, {Component} from 'react';
import './TextField.scss';
+import './common.scss';
import {randomClassName} from "../../utils";
const classNames = require('classnames');
@@ -28,11 +29,11 @@ class TextField extends Component {
};
return (
- <div className={classNames("text-field", {"field-active": this.props.active},
+ <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} />
+ readOnly={this.props.readonly} value={this.props.value} ref={this.props.textRef} />
{error && <div className="field-error">error: {error}</div>}
</div>
);
diff --git a/frontend/src/components/fields/TextField.scss b/frontend/src/components/fields/TextField.scss
index 606f537..de831fb 100644
--- a/frontend/src/components/fields/TextField.scss
+++ b/frontend/src/components/fields/TextField.scss
@@ -10,32 +10,7 @@
}
textarea {
- background-color: $color-primary-2;
- width: 100%;
- border: none;
- color: $color-primary-4;
- border-radius: 5px;
- padding: 7px 10px;
resize: none;
-
- &: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;
- }
}
&.field-active {
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..edcb720
--- /dev/null
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+import {Button, ButtonGroup, Form, OverlayTrigger, Popover} from "react-bootstrap";
+import './ColorField.scss';
+import InputField from "../InputField";
+
+class ColorField extends Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ invalid: false
+ };
+
+ this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1",
+ "#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"];
+ }
+
+ render() {
+ const colorButtons = this.colors.map((color) =>
+ <span key={"button" + color} className="color-input"
+ style={{"backgroundColor": color, "borderColor": this.state.color === color ? "#fff" : color}}
+ onClick={() => {
+ this.setState({color: color});
+ 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>
+ );
+
+ return (
+ <div className="color-field">
+ <InputField {...this.props} name="color" />
+
+ <div className="color-picker">
+ <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
+ <Button variant="picker" size="sm">pick</Button>
+ </OverlayTrigger>
+ </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..c8f617c
--- /dev/null
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -0,0 +1,39 @@
+@import '../../../colors.scss';
+
+.color-field {
+ 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: 5.5px;
+
+ .btn-picker {
+ padding: 8.5px 15px;
+ border-bottom-right-radius: 5px;
+ border-top-right-radius: 5px;
+ background-color: $color-indigo;
+ }
+ }
+
+
+}
+
+.colors-container {
+ width: 600px;
+
+ .color-input {
+ display: inline-block;
+ width: 31px;
+ height: 31px;
+ cursor: pointer;
+ }
+} \ No newline at end of file
diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js
new file mode 100644
index 0000000..8823c42
--- /dev/null
+++ b/frontend/src/components/fields/extensions/NumericField.js
@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import InputField from "../InputField";
+
+class NumericField extends Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ invalid: false
+ };
+ }
+
+ render() {
+ const handler = (value) => {
+ value = value.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 (this.props.onChange) {
+ this.props.onChange(intValue);
+ }
+ };
+
+ return (
+ <InputField {...this.props} onChange={handler} initialValue={this.props.initialValue || 0}
+ invalid={this.state.invalid} />
+ );
+ }
+
+}
+
+export default NumericField;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-22 12:53:10 +0000