Filter field for mobile

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
 			}
 		}
 	}

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"

src/js/index.js

@@ -45,6 +45,7 @@ function handleUpdate() {
 }
 
 global.baseURL = '/'
+global.slim_mode = false
 
 ReactDOM.render(
 	<Provider store={store}>

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;
 				}
 			}

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;
+		}
+	}
 }