Demo Pitch

Components/Alignment.js

@@ -9,44 +9,50 @@ export default class Alignment extends React.Component {
 
 	getStyle(i) {
 		switch(i) {
-			case 0:
-				return {
-					alignItems: 'flex-start'
-				} 
-			case 1:
-				return {
-					alignItems: 'center'
-				} 
-			case 2:
-				return {
-					alignItems: 'flex-end'
-				} 
-			case 3:
-				return {
-					alignItems: 'stretch'
-				} 
+			case 0: return 'flex-start'
+			case 1: return 'center'
+			case 2: return 'flex-end'
+			case 3: return 'stretch' 
+			case 4: return 'space-around' 
+			case 5: return 'space-between' 
+			case 6: return 'baseline'
 		}
 	}
+
 	set(i) {
-		let style = this.getStyle(i);
-		this.props.onSelect && this.props.onSelect(style);
+		let style = { alignItems: this.getStyle(i) };
+		this.props.onSelect && this.props.onSelect(style)
+	}
+	justify(i) {
+		let style = { justifyContent: this.getStyle(i) };
+		this.props.onSelect && this.props.onSelect(style)
 	}
+
 	render() {
 		let iconStyle = styles.iconStyle;
-		return (
+		return ([
 			<View style={styles.container}>
 				<Icon name="format-align-left" iconStyle={iconStyle} onClick={() => this.set(0)}/>
 				<Icon name="format-align-center" iconStyle={iconStyle} onClick={() => this.set(1)}/>
 				<Icon name="format-align-right" iconStyle={iconStyle} onClick={() => this.set(2)}/>
 				<Icon name="format-align-justify" iconStyle={iconStyle} onClick={() => this.set(3)}/>
+			</View>,
+
+			<View style={styles.container}>
+				<Icon name="vertical-align-top" iconStyle={iconStyle} onClick={() => this.justify(0)}/>
+				<Icon name="vertical-align-center" iconStyle={iconStyle} onClick={() => this.justify(1)}/>
+				<Icon name="vertical-align-bottom" iconStyle={iconStyle} onClick={() => this.justify(2)}/>
+				<Icon name="toc" iconStyle={iconStyle} onClick={() => this.justify(4)}/>
+				<Icon name="view-headline" iconStyle={iconStyle} onClick={() => this.justify(5)}/>
 			</View>
+			]
 		);
 	}
 }
 
 const styles = StyleSheet.create({
 	container:{
-		padding:15,
+		padding:10,
 		flexDirection: 'row',
 		justifyContent: 'space-around',
 		borderBottomColor: '#B4B4B4',

Components/ColorEditor.js

@@ -24,59 +24,50 @@ export default class ColorEditor extends React.Component {
 	let color = this.state.color || defaultColor;
 	let title = this.props.title || "Input";
 
-	let open = this.state.open ? (
-			<View style={styles.container}>
+	return	<View style={styles.container}>
 				<View style={styles.prevCont}>
-					<Text> Color Fill </Text>
-		 			<View onClick = {(e) => this.setState({open:false})} style={[{backgroundColor:this.props.text},styles.preview]}></View>
+					<Text style={styles.capFirst}>{title}</Text>
+		 			<View onClick = {(e) => this.setState({open:!this.state.open})} style={[{backgroundColor:this.props.text},styles.preview]}></View>
 		 		</View>
-		 		<SketchPicker 
+		 		{this.state.open ? <SketchPicker 
 		 		color={color}
 		 		width="180px" onChangeComplete ={(newColor) => {
 			 		this.props.onChange && this.props.onChange(`rgba(${newColor.rgb.r},${newColor.rgb.g},${newColor.rgb.b},${newColor.rgb.a})`);
 					this.setState({color:newColor.rgb});
-				}}
-				/>
+				}} 
+				/> : null}
 			</View>
-			):(
-			<View key={Math.random()} style={styles.prevCont}>
-				<Text>Color Fill</Text>
-				<View onClick = {(e) => this.setState({open:true})} style={[{backgroundColor:this.props.text},styles.preview]}></View>
-			</View>
-			)
-	return(
-			<View>
-			<Text>{this.props.title}</Text>
-			{open}
-			</View>
-			
-		)
-
-
-		
-		
-		
 	}
 }
 
 const styles = StyleSheet.create({
 	container:{
-		padding:10
+		padding:24,
+		paddingTop: 0
 	},
 	defaultInput: {
 		marginTop:6,
-		borderWidth:1,
+		// borderWidth:1,
 		width:100
 	},
+	capFirst: {
+		fontSize: 14, 
+		fontFamily: 'roboto-light',
+		textTransform: 'capitalize'
+	},
 	prevCont:{
 		flex:1,
-		flexDirection:'row'	
+		flexDirection:'row',
+		justifyContent: 'space-between',
+		alignItems: 'baseline'		
 	},
 	preview:{
 		width: 43,
 		height: 19,
+		cursor: 'pointer',
 		boxShadow: '0px 3px 6px #00000029',
-		border: '1px solid #FFFFFF',
+		borderColor: '#FFFFFF66',
+		borderWidth: 1,
 		borderRadius: 14,
 		opacity: 1
 	}

Components/Numbers.js

@@ -8,7 +8,7 @@ export default function Numbers(props) {
 	let title = props.title || "Input";
 	return(
 		<View style={styles.container}>
-			<Text style={styles.title}>{title}</Text>
+			<Text style={[styles.title, styles.capFirst]}>{title}</Text>
 			<TextInput 
 					onChangeText={(number) => {
 						try{
@@ -33,16 +33,24 @@ export default function Numbers(props) {
 
 const styles = StyleSheet.create({
 	container:{
-		padding:10,
+		padding:24,
+		paddingTop: 0,
 		flex:1,
 		flexDirection: 'row',
 		justifyContent:'space-between',
-		opacity:1
+		opacity:1,
+		alignItems: 'baseline'
+	},
+	capFirst: {
+		fontSize: 14, 
+		fontFamily: 'roboto-light',
+		textTransform: 'capitalize'
 	},
 	defaultInput: {
 		width:62,
 		height:21,
 		borderWidth:1,
+		backgroundColor: 'white',
 		borderColor: '#00000030',
 		borderRadius:14,
 		paddingLeft: 10,

Components/TextEditor.js

@@ -7,7 +7,7 @@ export default function TextEditor(props) {
 	let title = props.title || "Input";
 	return (
 			<View style={styles.container}>
-				<Text style={styles.title}>{title}</Text>
+				<Text style={[styles.title, styles.capFirst]}>{title}</Text>
 				<TextInput style={styles.defaultInput} 
 					onChangeText={(text) => {
 						props.onChange && props.onChange(text);
@@ -20,12 +20,24 @@ export default function TextEditor(props) {
 
 const styles = StyleSheet.create({
 	container:{
-		padding:10
+		padding:24,
+		paddingTop: 0,
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		alignItems: 'baseline'
+	},
+	capFirst: {
+		fontSize: 14, 
+		fontFamily: 'roboto-light',
+		textTransform: 'capitalize'
 	},
 	defaultInput: {
 		marginTop:6,
 		borderWidth:1,
-		width:200
+		backgroundColor: 'white',
+		boxShadow: '0px 3px 6px #00000029',
+		borderColor: '#FFFFFF66',
+		borderRadius: 14
 	},
 	title: {
 

Systems/Gui.js

@@ -3,7 +3,7 @@ import ToolBox from './ToolBox';
 import Keyboard from './keyboard';
 import Mouse from './mouse';
 import React from 'react';
-import {Dimensions, StyleSheet, View, Text , Button
+import {Dimensions, StyleSheet, View, Text , Button, TouchableOpacity
 } from 'react-native';
 import { Icon } from 'react-native-elements'
 import Library from 'trapilib/dist/lib';
@@ -168,15 +168,22 @@ export default class Gui extends BaseSystem {
   }
 
 
+  removeFrame(routeName) {
+    this.CoreSystem.removePage(routeName);
+    this.forceUpdate();
+  }
+
+  addFrame(routeName) {
+      if(!routeName)
+        routeName = "Page " + (Object.keys(this.CoreSystem.Routing.topology.nodes).length + 1);
 
-  addFrame(routeName = Math.random().toString(36).substring(7)) {
       let VS = new Library.View();
       let container = VS.getDefaultContainer();
       container.props.selected = true;
       let mainContent = new ViewNode(Math.random(), 'BaseContainer', {width: 375, height: 667});
       VS.setContent(mainContent, container);
-
       this.CoreSystem.addPage(routeName,VS);
+      this.CoreSystem.goto(routeName);
       this.forceUpdate()
   }
   renderPageBar(){
@@ -187,14 +194,21 @@ export default class Gui extends BaseSystem {
         let textColor = view === currentView ?  PageButtons.selectedText :(null)
         return (
           <View style={[PageButtons.page , background ] } onClick = {(e) => {
-            this.CoreSystem.goto(route)
+            console.log(e);
+            this.CoreSystem.goto(route);
             this.forceUpdate()
           }}>
             <View style = {{  flex:1,
-                              justifyContent:'center',
+                              justifyContent:'space-around',
+                              flexDirection: 'row',
                               alignItems:'center'}}>
 
               <Text style={[PageButtons.text, textColor]}>{route}</Text>
+              {view !== currentView && <Text style={[PageButtons.text, textColor, {color: '#77000066'}]} onClick={(e) => {
+                this.removeFrame(route);
+                e.stopPropagation();
+                return false;
+              }}>X</Text>}
             </View>
           </View>
 

Systems/MainBar.js

@@ -107,6 +107,13 @@ export default class MainBar extends BaseSystem {
 		  				color="#606060"
 	  				/>
 	  			</Text>
+	  			<Text  style={[styles.item, styles.selectedItem]}>
+	  				Design
+	  			</Text>
+	  			<Text  style={styles.item}>
+	  				Structure
+	  			</Text>
+
   			</View>
   			<View style={ styles.innerContainer }>
 				<Text style={[styles.item, {fontSize: 18, lineHeight: 24}]}
@@ -152,7 +159,13 @@ const styles = StyleSheet.create({
 	item: {
 		paddingLeft: 8,
 		paddingRight: 8,
-		fontFamily: 'thin'
+		fontFamily: 'thin',
+		lineHeight: 25,
+		cursor: 'pointer'
+	},
+	selectedItem: {
+		borderColor: '#36BBAD',
+		borderBottomWidth: 1
 	},
 	menu: {
 		height:100,

Systems/ModuleBar.js

@@ -84,7 +84,8 @@ const ModPrev = StyleSheet.create({
 		},
 		shadowOpacity: 0.30,
 		shadowRadius: 4.65,
-		elevation: 3
+		elevation: 3,
+		cursor: 'pointer'
 	},
 	NameCont:{
 		flex:1,

Systems/SideBar.js

@@ -142,13 +142,13 @@ export default class SideBar extends BaseSystem {
 
 		)
 		let contentData = Object.keys(Structure || {}).map((key,index) => 
-			<View key={selectedNode.id + key}>
+			<View key={selectedNode.id + key} >
 			{this.createHandler(Structure[key], viewNodeProps, key, (v, f) => 
 				this.editNode(selectedNode.content, v,f))}
 			</View>
 		)
 		let containerData =Object.keys(nodeStructure || {}).map((key, index) => 
-			<View key={selectedNode.id + key}>
+			<View key={selectedNode.id + key} >
 			{this.createHandler(nodeStructure[key], nodeProps, key, (v,f) => 
 				this.editNode(selectedNode, v, f))}
 			</View>
@@ -173,7 +173,6 @@ export default class SideBar extends BaseSystem {
   				<View style={SideBarStyle.title}>
   					<Text style={{cursor: 'pointer'}} onClick={() => this.toggleAll()}>Show All</Text>
   				</View>
-
   				]
   				: <Text>Click on elements</Text>}
 
@@ -236,7 +235,6 @@ const SelectedStyle = StyleSheet.create({
 const PropertiesContainer = StyleSheet.create({
 	container:{
 		marginTop:20,
-		borderTopWidth:0.8,
 		borderColor:'#D0D0D0'
 	},
 	child:{

yalc.lock

@@ -2,7 +2,7 @@
   "version": "v1",
   "packages": {
     "trapilib": {
-      "signature": "37db32ec92132a0daba5bea6aa133fab",
+      "signature": "c31d63a226bec6f93642917bbfdb724c",
       "file": true,
       "replaced": "http://git.onarbooks.com/Klapi/TrapiLib.git"
     }

yarn.lock

@@ -5717,7 +5717,7 @@ [email protected]:
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
 "trapilib@file:.yalc/trapilib":
-  version "1.1.1-37db32ec"
+  version "1.1.1-c31d63a2"
   dependencies:
     expo "^34.0.0-experiment.8"
     prop-types "^15.7.2"
@@ -5729,7 +5729,7 @@ [email protected]:
 
 "trapilib@http://git.onarbooks.com/Klapi/TrapiLib.git":
   version "1.1.1"
-  resolved "http://git.onarbooks.com/Klapi/TrapiLib.git#a5d3faa73059a87f8abbacd977253c4896542201"
+  resolved "http://git.onarbooks.com/Klapi/TrapiLib.git#dcaa84517979a659ee72fce2cefef3998b05e9bd"
   dependencies:
     expo "^34.0.0-experiment.8"
     prop-types "^15.7.2"