diff options
Diffstat (limited to 'frontend/src/components/fields')
7 files changed, 43 insertions, 17 deletions
diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js index b32aee8..f2f02fd 100644 --- a/frontend/src/components/fields/ButtonField.js +++ b/frontend/src/components/fields/ButtonField.js @@ -31,6 +31,15 @@ class ButtonField extends Component { 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})}> diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss index 933279e..aabe80f 100644 --- a/frontend/src/components/fields/ButtonField.scss +++ b/frontend/src/components/fields/ButtonField.scss @@ -9,6 +9,10 @@ &.field-small { font-size: 0.8em; + + button { + padding: 4px 12px; + } } .button-variant-red { diff --git a/frontend/src/components/fields/CheckField.scss b/frontend/src/components/fields/CheckField.scss index 7b0ac5f..ab932b4 100644 --- a/frontend/src/components/fields/CheckField.scss +++ b/frontend/src/components/fields/CheckField.scss @@ -31,5 +31,9 @@ &.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 index d409b21..73e950d 100644 --- a/frontend/src/components/fields/ChoiceField.js +++ b/frontend/src/components/fields/ChoiceField.js @@ -38,15 +38,24 @@ class ChoiceField extends Component { <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"> - {((inline && name) ? (name + ": ") : "") + (this.props.value || "select a value")} - </div> + <div className="field-value">{fieldValue}</div> <div className="field-options"> {options} </div> diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss index 7f32b0e..e7683b7 100644 --- a/frontend/src/components/fields/ChoiceField.scss +++ b/frontend/src/components/fields/ChoiceField.scss @@ -16,7 +16,7 @@ border: none; color: $color-primary-4; border-radius: 5px; - padding: 7px 10px; + padding: 7px 25px 7px 10px; cursor: pointer; &:after { diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js index edcb720..c1c210f 100644 --- a/frontend/src/components/fields/extensions/ColorField.js +++ b/frontend/src/components/fields/extensions/ColorField.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import {Button, ButtonGroup, Form, OverlayTrigger, Popover} from "react-bootstrap"; +import {OverlayTrigger, Popover} from "react-bootstrap"; import './ColorField.scss'; import InputField from "../InputField"; @@ -9,7 +9,6 @@ class ColorField extends Component { super(props); this.state = { - invalid: false }; this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1", @@ -18,8 +17,7 @@ class ColorField extends Component { render() { const colorButtons = this.colors.map((color) => - <span key={"button" + color} className="color-input" - style={{"backgroundColor": color, "borderColor": this.state.color === color ? "#fff" : color}} + <span key={"button" + color} className="color-input" style={{"backgroundColor": color}} onClick={() => { this.setState({color: color}); if (typeof this.props.onChange === "function") { @@ -44,16 +42,19 @@ class ColorField extends Component { </Popover> ); + let buttonStyles = {}; + if (this.state.color) { + buttonStyles["backgroundColor"] = this.state.color; + } + return ( - <div className="color-field"> + <div className="field 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> + <button type="button" className="picker-button" style={buttonStyles}>pick</button> </OverlayTrigger> </div> - </div> ); } diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss index c8f617c..1c3931f 100644 --- a/frontend/src/components/fields/extensions/ColorField.scss +++ b/frontend/src/components/fields/extensions/ColorField.scss @@ -16,15 +16,14 @@ .color-picker { margin-bottom: 5.5px; - .btn-picker { - padding: 8.5px 15px; + .picker-button { + font-size: 0.8em; + padding: 8px 15px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; - background-color: $color-indigo; + background-color: $color-primary-1; } } - - } .colors-container { |