From dc42024bfe78b837431dccce7d14e01b01af7028 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 22 Aug 2017 21:03:16 +1200
Subject: [PATCH] Filter field for mobile

---
 src/js/App.js                          |  6 +++---
 src/js/components/FilterField.js       | 10 +++++-----
 src/js/index.js                        |  1 +
 src/scss/components/_context-menu.scss |  4 ++--
 src/scss/components/_filter-field.scss | 17 +++++++++++++++++
 5 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/js/App.js b/src/js/App.js
index bbc9dd08..27a37991 100755
--- a/src/js/App.js
+++ b/src/js/App.js
@@ -100,12 +100,12 @@ class App extends React.Component{
 		var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
 
 		if (width <= 800){
-			if (!this.props.slim_mode){
-				this.props.uiActions.setSlimMode(true)
+			if (!global.slim_mode){
+				global.slim_mode = true
 			}
 		} else {
 			if (this.props.slim_mode){
-				this.props.uiActions.setSlimMode(false)
+				global.slim_mode = false
 			}
 		}
 	}
diff --git a/src/js/components/FilterField.js b/src/js/components/FilterField.js
index e9e203e1..ff2208ee 100755
--- a/src/js/components/FilterField.js
+++ b/src/js/components/FilterField.js
@@ -9,7 +9,7 @@ export default class FilterField extends React.Component{
 		super(props)
 		this.state = {
 			value: '',
-			active: false
+			active: (global.slim_mode ? true : false)
 		}
 
 		this.handleKeyUp = this.handleKeyUp.bind(this)
@@ -24,7 +24,7 @@ export default class FilterField extends React.Component{
 	}
 
 	handleKeyUp(e){
-		if (e.keyCode == 27){
+		if (e.keyCode == 27 && !global.slim_mode){
 			e.preventDefault()
 
 			this.setState({
@@ -43,13 +43,13 @@ export default class FilterField extends React.Component{
 	handleChange(value){
 		this.setState({
 			value: value,
-			active: (value != '')
+			active: (global.slim_mode ? true : (value != ''))
 		})
 		this.props.handleChange(value)
 	}
 
 	handleBlur(){
-		if (this.state.value == ''){
+		if (this.state.value == '' && !global.slim_mode){
 			this.setState({active: false})
 		}
 	}
@@ -58,7 +58,7 @@ export default class FilterField extends React.Component{
 		return (
 			<span className={"filter-field "+(this.state.active ? 'active' : '')} onClick={e => this.activate()}>
 				<form>
-					<FontAwesome name="search" />&nbsp;
+					<FontAwesome name="search" />
 					<input
 						type="text"
 						placeholder="Filter"
diff --git a/src/js/index.js b/src/js/index.js
index 34e04d32..b622a8d0 100755
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -45,6 +45,7 @@ function handleUpdate() {
 }
 
 global.baseURL = '/'
+global.slim_mode = false
 
 ReactDOM.render(
 	<Provider store={store}>
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index be7979cf..bea78c5a 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -249,7 +249,7 @@
 			border-radius: 3px;
 
 			.title {				
-				padding: 16px 20px;
+				padding: 14px 18px;
 				box-sizing: border-box;
 				border-radius: 3px 3px 0 0;
 			}
@@ -269,7 +269,7 @@
 
 			.menu-item-wrapper {
 				.menu-item {
-					padding: 16px 20px;
+					padding: 14px 18px;
 					box-sizing: border-box;
 				}
 			}
diff --git a/src/scss/components/_filter-field.scss b/src/scss/components/_filter-field.scss
index ac1413bf..59d6ea03 100755
--- a/src/scss/components/_filter-field.scss
+++ b/src/scss/components/_filter-field.scss
@@ -39,4 +39,21 @@
 			background: $grey;
 		}
 	}
+}
+
+#context-menu {
+	.filter-field {
+		display: block;
+
+		.fa {
+			top: 17px;
+			left: 24px;
+		}
+
+		input {
+			padding: 14px 18px 14px 42px;
+			width: 100%;
+			box-sizing: border-box;
+		}
+	}
 }
\ No newline at end of file