css for overlay

src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/index.jsx

@@ -10,29 +10,49 @@ class SlideSelector extends Component {
 		this.renderOptions = this.renderOptions.bind(this);
 		this.renderOption = this.renderOption.bind(this);
 		this.optionClass = this.optionClass.bind(this);
+		this.optionClass = this.optionClass.bind(this);
+
+		this.state = {
+			selected: this.props.default || 1
+		}
+	}
+
+	componentDidMount() {
+		this.initDraggable.call(this);
 	}
 
 	initDraggable() {
-		var element = this.refs.sliderBall;
+		var element = this.sliderBall;
 		var options = {
-			limit: this.refs.slider,
+			limit: this.slider,
+			grid: this.props.options.count,
 			onDrag: this.onDrag
 		};
 
-		new Draggable (element, options);
+		new Draggable(element, options);
 	}
 
-	onDrag(x, y) {
+	getClosestOption(x, y) {
 
 	}
 
+	onDrag(x, y) {
+		const selected = this.getClosestOption(x, y);
+
+		this.props.onChange(selected);
+
+		this.setState({
+			selected: selected
+		})
+	}
+
 	optionClass(optionId) {
 		return this.props.selected === optionId ? 'selected' : '';
 	}
 
-	renderOption(optionId) {
+	renderOption(optionId, idx) {
 		return (
-			<li className={this.optionClass(optionId)}>
+			<li className={this.optionClass(optionId)} key={idx}>
 				{this.props.options[optionId]}
 			</li>
 		);
@@ -44,16 +64,24 @@ class SlideSelector extends Component {
 
 	render() {
 		return (
-			<div styleName='SlideSelector'>
+			<div className='slideselector' styleName='SlideSelector'>
 				<div className='slider' ref={ slider => { this.slider = slider }}>
 					<div className='sliderBall' ref={ sliderBall => { this.sliderBall = sliderBall }}/>
 				</div>
 
-				{this.renderOptions()}
+				<ul>
+					{this.renderOptions()}
+				</ul>
 			</div>
 		);
 	}
 }
 
+SlideSelector.propTypes = {
+	options: React.PropTypes.object.isRequired,
+	onChange: React.PropTypes.func.isRequired,
+	default: React.PropTypes.number
+}
+
 
 export default CSSModules(SlideSelector, styles);

src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/styles.scss

@@ -1,17 +1,28 @@
 @import "./src/styles/base";
 
 :local(.SlideSelector) {
-	width: 100%;
-	height: 100%;
+	display: flex;
 
 	.slider {
-		width: 1rem;
+		width: .76rem;
+		background: white;
+		border-radius: 10px;
+		margin-right: .5rem;
+		padding: 3px;
 	}
 
 	.sliderBall {
-		width: 100%;
-		height: auto;
+		width: .8rem;
+	  height: .8rem;
 		border-radius: 50%;
 		background-color: $color-dark;
 	}
+
+	li {
+		margin-bottom: .5rem;
+
+		&:last-of-type {
+			margin-bottom:0;
+		}
+	}
 }

src/Main/Toolbox/Keyboard/Panel/KeyOverlay/index.jsx

@@ -5,23 +5,24 @@ import styles from './styles.scss';
 import SlideSelector from './SlideSelector';
 
 class KeyOverlay extends Component {
-	formatSliderOptions() {
-
+	sliderOptions() {
+		return {
+			1: 'boethian',
+			2: 'qwerty',
+			3: 'none'
+		}
+	}
+
+	onChange() {
+
 	}
 
 	render() {
 		return (
 			<div styleName='KeyOverlay'>
 				<label>overlay</label>
-				<div>
-					<SlideSelector options={this.formatSliderOptions()}/>
-
-					<ul>
-						<li>boethian</li>
-						<li>qwerty</li>
-						<li>none</li>
-					</ul>
-				</div>
+
+				<SlideSelector options={this.sliderOptions()} default={3} onChange={this.onChange} />
 			</div>
 		);
 	}

src/Main/Toolbox/Keyboard/Panel/KeyOverlay/styles.scss

@@ -1,3 +1,20 @@
+@import "./src/styles/base";
+
 :local(.KeyOverlay) {
 	background-color: inherit;
+
+	label {
+		padding: .2rem 2rem;
+		background-color: $color-dark;
+		color: $color-white;
+		display: block;
+		border-radius: 18px;
+		margin-bottom: .5rem;
+	}
+
+	.slideselector {
+		background-color: $color-background-medium;
+		padding: .5rem;
+		border-radius: 13px;
+	}
 }

src/Main/Toolbox/Keyboard/Panel/Logo/index.jsx

@@ -6,11 +6,7 @@ import styles from './styles.scss';
 import logo from "./images/logo.svg";
 
 function Logo() {
-	return (
-		<div styleName='Logo'>
-			<div dangerouslySetInnerHTML={{__html: logo}} />
-		</div>
-	);
+	return <div styleName='Logo' dangerouslySetInnerHTML={{__html: logo}} />;
 }
 
 export default CSSModules(Logo, styles);

src/Main/Toolbox/Keyboard/Panel/Logo/styles.scss

@@ -1,12 +1,7 @@
 @import "./src/styles/base";
 
 :local(.Logo) {
-  height: 100%;
-  width: 10rem;
-
-  div {
-    height: inherit;
-  }
+  width: 12.4rem;
 
   svg {
     height: 100%;

src/Main/Toolbox/Keyboard/Panel/styles.scss

@@ -1,4 +1,9 @@
 :local(.Panel) {
 	flex: 1;
 	margin-bottom: 2rem;
+	display: flex;
+
+	& > div {
+		margin-right: 2rem;
+	}
 }

src/styles/base.scss

@@ -13,3 +13,13 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+li {
+  list-style: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}