Toolbar with technique description added to checkboxes

monkey/monkey_island/cc/ui/src/components/attck/MatrixComponent.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import Form from 'react-jsonschema-form';
 import {Col, Nav, NavItem} from 'react-bootstrap';
-import CheckBox from '../ui-components/checkBox'
+import Checkbox from '../ui-components/checkbox'
+import Tooltip from 'react-tooltip-lite'
 import AuthComponent from '../AuthComponent';
-import 'filepond/dist/filepond.min.css';
 import ReactTable from "react-table";
+import 'filepond/dist/filepond.min.css';
+import '../../styles/Tooltip.scss';
 
 
 let renderTechnique = function (technique) {
@@ -12,7 +14,8 @@ let renderTechnique = function (technique) {
   if (technique == null){
     return (<div></div>)
   } else {
-    return (<CheckBox>{technique.title}</CheckBox>)
+    return (<Tooltip content={technique.description} direction="down"><Checkbox>
+      {technique.title}</Checkbox> </Tooltip>)
   }
 };
 

monkey/monkey_island/cc/ui/src/components/ui-components/checkbox.js

@@ -0,0 +1,61 @@
+import '../../styles/Checkbox.scss'
+import React from 'react';
+
+class Checkbox extends React.PureComponent {
+
+	constructor() {
+		super();
+
+		this.state = {
+			checked: false,
+			isAnimating: false,
+		};
+
+		this.toggleChecked = this.toggleChecked.bind(this);
+		this.ping = this.ping.bind(this);
+		this.composeStateClasses = this.composeStateClasses.bind(this);
+	}
+
+	//
+	toggleChecked() {
+		if (this.state.isAnimating) return false;
+		this.setState({
+			checked: !this.state.checked,
+			isAnimating: true,
+		});
+	}
+
+	//
+	ping() {
+		this.setState({ isAnimating: false })
+	}
+
+	//
+	composeStateClasses(core) {
+		let result = core;
+
+		if (this.state.checked) { result += ' is-checked'; }
+		else { result += ' is-unchecked' }
+
+		if (this.state.isAnimating) { result += ' do-ping'; }
+		return result;
+	}
+
+	//
+	render() {
+
+		const cl = this.composeStateClasses('ui-checkbox-btn');
+
+		return (
+			<div
+				className={ cl }
+				onClick={ this.toggleChecked }>
+					<input className="ui ui-checkbox" type="checkbox" checked={this.state.checked} />
+					<label className="text">{ this.props.children }</label>
+				<div className="ui-btn-ping" onTransitionEnd={this.ping}></div>
+			</div>
+		)
+	}
+}
+
+export default Checkbox;

monkey/monkey_island/cc/ui/src/styles/Checkbox.scss

@@ -1,14 +1,4 @@
-// readable
-$desired-line-height: 100%;
-$desired-height: 100%;
-$text-offset: 2px;
-
-// usable
-$dlh: $desired-line-height;
-$dh: $desired-height;
-$to: $text-offset;
-
-// coooolors
+// colors
 $light-grey: #EAF4F4;
 $medium-grey: #7B9EA8;
 $dark-grey: #7B9EA8;
@@ -23,16 +13,16 @@ $black: #000000;
   width: 100%;
   height: 100%;
 
-	input { display: none; } // turn off, but not forgotten
+	input { display: none; }
 
 	.icon,
 	.text {
 		display: inline-block;
-		vertical-align: top;
 		color: inherit;
 	}
 
 	.text {
+    padding-top: 4px;
 		font-size: 14px;
 	}
 

monkey/monkey_island/cc/ui/src/styles/Tooltip.scss

@@ -0,0 +1,8 @@
+$background: #000000;
+$font: #fff;
+
+.react-tooltip-lite {
+  background: $background;
+  color: $font;
+  max-width: 400px !important;
+}