diff options
Diffstat (limited to 'frontend/src/components/fields')
| -rw-r--r-- | frontend/src/components/fields/TagField.js | 29 | ||||
| -rw-r--r-- | frontend/src/components/fields/TagField.scss | 99 | ||||
| -rw-r--r-- | frontend/src/components/fields/common.scss | 1 |
3 files changed, 82 insertions, 47 deletions
diff --git a/frontend/src/components/fields/TagField.js b/frontend/src/components/fields/TagField.js index f1a48bd..89445b6 100644 --- a/frontend/src/components/fields/TagField.js +++ b/frontend/src/components/fields/TagField.js @@ -26,50 +26,47 @@ const _ = require('lodash'); class TagField extends Component { + state = {}; + constructor(props) { super(props); this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; } - state = { - - }; - onAddition = (tag) => { if (typeof this.props.onChange === "function") { - const tags = [].concat(this.wrappedTags(), tag); - this.props.onChange(tags.map(t => t.name), true, tag); // true == addition + this.props.onChange([].concat(this.props.tags, tag), true, tag); // true == addition } }; onDelete = (i) => { if (typeof this.props.onChange === "function") { - const tags = this.wrappedTags(); + const tags = _.clone(this.props.tags); const tag = tags[i]; tags.splice(i, 1); - this.props.onChange(tags.map(t => t.name), true, tag); // false == delete + this.props.onChange(tags, true, tag); // false == delete } }; - wrappedTags = () => this.props.tags.map(t => new Object({"name": t})); render() { const small = this.props.small || false; const name = this.props.name || null; return ( - <div className={classNames( "field", "tag-field", {"field-small": small})}> - { name && + <div className={classNames("field", "tag-field", {"field-small": small}, + {"field-inline": this.props.inline})}> + {name && <div className="field-name"> <label>{name}:</label> </div> } - <ReactTags tags={this.wrappedTags() || []} - autoresize={false} - allowNew={this.props.allowNew || true} - onDelete={this.onDelete} onAddition={this.onAddition} - minQueryLength={this.props.min} placeholderText={this.props.placeholder || ""} /> + <div className="field-input"> + <ReactTags {...this.props} tags={this.props.tags || []} autoresize={false} + onDelete={this.onDelete} onAddition={this.onAddition} + placeholderText={this.props.placeholder || ""}/> + </div> </div> ); } diff --git a/frontend/src/components/fields/TagField.scss b/frontend/src/components/fields/TagField.scss index e77db97..737f11f 100644 --- a/frontend/src/components/fields/TagField.scss +++ b/frontend/src/components/fields/TagField.scss @@ -1,31 +1,68 @@ @import "../../colors.scss"; .tag-field { + font-size: 0.9em; + margin: 5px 0; + + .field-name { + label { + margin: 0; + } + } + + &.field-small { + font-size: 0.8em; + } + + &.field-inline { + display: flex; + + .field-name { + padding: 6px 0 6px 7px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + background-color: $color-primary-2; + } + + .field-input { + flex: 1; + + .react-tags { + padding-left: 3px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + &:focus-within .field-name { + background-color: $color-primary-1; + } + } + .react-tags { - font-size: 12px; position: relative; - z-index: 10; - padding: 0 6px; - cursor: text; + display: flex; border-radius: 4px; background-color: $color-primary-2; - } - .react-tags.is-focused { - border-color: #b1b1b1; + &:focus-within, + &:focus-within .react-tags__search-input { + background-color: $color-primary-1; + } } .react-tags__selected { - display: inline; + display: inline-block; + flex: 0 1; + margin: 6px 0; + white-space: nowrap; } .react-tags__selected-tag { - font-size: 11px; - display: inline-block; - margin: 0 6px 6px 0; + font-size: 0.75em; + margin: 0 3px; padding: 2px 4px; color: $color-primary-3; - border: none; border-radius: 2px; background: $color-primary-4; } @@ -39,12 +76,15 @@ .react-tags__selected-tag:hover, .react-tags__selected-tag:focus { border-color: #b1b1b1; + background-color: $color-primary-0; + + &::after { + color: $color-primary-4; + } } .react-tags__search { - display: inline-block; - max-width: 100%; - padding: 7px 10px; + flex: 1 0; } @media screen and (min-width: 30em) { @@ -54,14 +94,7 @@ } .react-tags__search-input { - font-size: inherit; - line-height: inherit; - max-width: 100%; - margin: 0; - padding: 0; color: $color-primary-4; - border: 0; - outline: none; background-color: $color-primary-2; } @@ -71,6 +104,7 @@ .react-tags__suggestions { position: absolute; + z-index: 50; top: 100%; left: 0; width: 100%; @@ -87,30 +121,33 @@ margin: 4px -1px; padding: 0; list-style: none; - color: $color-primary-1; - border-radius: 2px; - background: $color-primary-4; + border-radius: 3px; + background: $color-primary-2; } .react-tags__suggestions li { - padding: 3px 5px; - border-bottom: 1px solid #ddd; + padding: 5px 10px; } .react-tags__suggestions li mark { font-weight: 600; - text-decoration: underline; + padding: 0; + color: $color-primary-4; background: none; } .react-tags__suggestions li:hover { cursor: pointer; - color: $color-primary-4; - background: $color-primary-0; + border-radius: 3px; + background: $color-primary-1; + + mark { + color: $color-primary-4; + } } .react-tags__suggestions li.is-active { - background: #b7cfe0; + background: $color-primary-3; } .react-tags__suggestions li.is-disabled { diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss index 8fbef0d..e5dc65c 100644 --- a/frontend/src/components/fields/common.scss +++ b/frontend/src/components/fields/common.scss @@ -3,6 +3,7 @@ .field { input, textarea { + font-family: "Fira Code", monospace; width: 100%; padding: 7px 10px; color: $color-primary-4; |