styling

Systems/MainBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import {StyleSheet, View, Text , Button} from 'react-native';
-
-import { TextInput } from 'react-native';
+import {StyleSheet, View, Text , Button } from 'react-native';
+import { Icon } from 'react-native-elements'
+import {  TextInput } from 'react-native';
 
 
 export default class MainBar{
@@ -26,22 +26,27 @@ export default class MainBar{
 	render(){
 		return (
 		<View style={styles.container}>
-			<Text>
-				Structure
-			</Text>
-
-			<Text>
-				Design
-			</Text>
-
 			<Button 
-			onPress={(e) => this.triggerSave()} 
-			title="Save"
-  			color="#841584" />
+				color="#f1f1f1"
+				title={<Icon  name='menu'
+  				color="#606060"
+  				/>}
+  				/>
   			<Button 
-			onPress={(e) => this.none()} 
-			title="AnotherFunc"
-  			color="#841584" />
+				color="#f1f1f1"
+				title={<Icon  name='home'
+  				color="#606060"
+  				/>}
+  				/>
+			<Text style={{height:30,width:80,fontSize:11,marginTop:6}}>
+			<Button
+				onPress={(e) => this.triggerSave()} 
+				title="Save"
+  				color="#606060" 
+
+  			/>
+  			</Text>
+  			
   			
 		</View>)
 	}
@@ -50,7 +55,8 @@ export default class MainBar{
 const styles = StyleSheet.create({
 	container:{
 		flex:1,
-		justifyContent: 'space-around',
+		paddingRight:25,
+
 		flexDirection:'row',
 
 	}

Systems/Tool.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 export default class Tool {
 	constructor(){
+		this.active = false;
 	}
  
 	editViewNode(VS,node){

Systems/ToolBox.js

@@ -17,15 +17,12 @@ export default class ToolBox {
 		this.activeTool = null;
 		this.loadTools(defaultTool);
 		this.__onUpdate = null;
-		//this.selectTool('Select')
 		
 	}
 
 	on(e) { return this.activeTool.on(e) }
 
 	editNode(View){
-		console.log("@@@@@@@ wHTTTATATATA")
-		console.log(View)
 		return this.activeTool.editViewNode(this.CoreSystem,View);
 	}
 
@@ -38,8 +35,12 @@ export default class ToolBox {
 	}
 
 	selectTool(key){
+
+		Object.keys(this.tools).forEach((key) => this.tools[key].active = false)
+
 		let tool = this.tools[key];
 		this.activeTool = tool;	
+		tool.active = true;
 		this.update()
 	}
 
@@ -66,7 +67,7 @@ export default class ToolBox {
 					toolStyle = styles.activeTool;
 				}
 			}
-			return(<View onClick={() => this.selectTool(key) }  style={toolStyle}>{this.tools[key].render()}</View>)
+			return(<View onClick={() => this.selectTool(key) }  style={toolStyle} >{this.tools[key].render()}</View>)
 		});
 		return tools;
 	}
@@ -75,10 +76,8 @@ export default class ToolBox {
 /** Must be remove from here**/
 const styles = StyleSheet.create({
 	tool:{
-		padding: 5
 	},
 	activeTool:{
-		backgroundColor:'green',
-		padding: 5
+	
 	}
 })

Tools/InsertForm.js

@@ -51,11 +51,21 @@ export default class InsertForm extends Tool{
 
 
 	render(){
+
+		let selectStyle;
+		if(this.active){
+			selectStyle = {backgroundColor:"#a6a6a6"}
+		}else{
+			selectStyle = {backgroundColor:"#F1F1F1"}
+		}
+
 		return(
 			<View>
 				<Button 
+				color="#f1f1f1"
 				title={<Icon  name='comment'
 				color="#606060"
+				containerStyle={selectStyle}
 	  				/>}
 				/>
 				

Tools/add.js

@@ -17,6 +17,8 @@ export default class Add extends Tool{
 	constructor(){
 		super()
 		this.selectedNode = null;
+
+
 	}
 
 
@@ -39,7 +41,7 @@ export default class Add extends Tool{
 		View.setRows(this.selectedNode,rows.length + 1)
 		rows = View.getRows(this.selectedNode)
 
-		console.log(rows[rows.length-1])
+	
 
 		View.setColumns(rows[rows.length-1],1)
 		rows[rows.length-1].props.selected = true;
@@ -52,13 +54,22 @@ export default class Add extends Tool{
 
 
 	render(){
+		let selectStyle;
+		if(this.active){
+			selectStyle = {backgroundColor:"#a6a6a6"}
+		}else{
+			selectStyle = {backgroundColor:"#F1F1F1"}
+		}
+
 		return(	
-			<View style={{backgroundColor:"red"}}>
-				<Button style={{backgroundColor:"red"}}
+			<View >
+				<Button 
+				color="#F1F1F1"
 				title={<Icon  name='add'
 				color="#606060"
-
-	  				/>}
+				containerStyle={selectStyle}
+	  				/>
+				}
 				/>
 			
 			</View>

Tools/select.js

@@ -70,11 +70,23 @@ export default class Select extends Tool{
 	}
 
 	render(){
+		let selectStyle;
+		if(this.active){
+			selectStyle = {backgroundColor:"#a6a6a6"}
+		}else{
+			selectStyle = {backgroundColor:"#F1F1F1"}
+		}
+		
 		return(
-			<View styles={mStyle.container}>
-				<Button title={<Icon  name='sc-telegram'
+			<View>
+				<Button 
+					color="#f1f1f1"
+					title={<Icon  name='sc-telegram'
 	  				type='evilicon'
-	  				color="#606060"/>}/>
+	  				color="#606060"
+	  				containerStyle={selectStyle}
+	  				/>}
+	  				/>
 			</View>
 		)
 	}