Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make "Functions" toggle have a toggled state

pull/10616/head
Alex P 2017-05-04 15:55:01 -07:00
parent 19897ae4f9
commit 76766bd93b
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/data_explorer/components/FieldListItem.js
View File

@ -47,6 +47,7 @@ const FieldListItem = React.createClass({
render() { render() {
const {isKapacitorRule, fieldFunc, isSelected} = this.props const {isKapacitorRule, fieldFunc, isSelected} = this.props
const {isOpen} = this.state
const {field: fieldText} = fieldFunc const {field: fieldText} = fieldFunc
const items = INFLUXQL_FUNCTIONS.map(text => { const items = INFLUXQL_FUNCTIONS.map(text => {
return {text} return {text}
@ -88,13 +89,13 @@ const FieldListItem = React.createClass({
{fieldText} {fieldText}
</span> </span>
{isSelected {isSelected
? <div className="btn btn-xs btn-info" onClick={this.toggleFunctionsMenu}> ? <div className={classNames('btn btn-xs btn-info', {'function-selector--toggled': isOpen})} onClick={this.toggleFunctionsMenu}>
Functions Functions
</div> </div>
: null : null
} }
</div> </div>
{this.state.isOpen {(isSelected && isOpen)
? <FunctionSelector ? <FunctionSelector
onApply={this.handleApplyFunctions} onApply={this.handleApplyFunctions}
selectedItems={fieldFunc.funcs || []} selectedItems={fieldFunc.funcs || []}

7
ui/src/style/components/function-selector.scss
View File

@ -63,3 +63,10 @@ $function-selector--text-active: $g20-white;
color: $function-selector--text-active; color: $function-selector--text-active;
} }
} }
.btn.function-selector--toggled {
&, &:hover, &:active, &:hover:active {
background-color: $g7-graphite !important;
color: $g20-white !important;
}
}