Make "Functions" toggle have a toggled state

ui/src/data_explorer/components/FieldListItem.js

@@ -47,6 +47,7 @@ const FieldListItem = React.createClass({
 
   render() {
     const {isKapacitorRule, fieldFunc, isSelected} = this.props
+    const {isOpen} = this.state
     const {field: fieldText} = fieldFunc
     const items = INFLUXQL_FUNCTIONS.map(text => {
       return {text}
@@ -88,13 +89,13 @@ const FieldListItem = React.createClass({
             {fieldText}
           </span>
           {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
               </div>
             : null
           }
         </div>
-        {this.state.isOpen
+        {(isSelected && isOpen)
           ? <FunctionSelector
               onApply={this.handleApplyFunctions}
               selectedItems={fieldFunc.funcs || []}

ui/src/style/components/function-selector.scss

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