ups

App.css

@@ -6,7 +6,16 @@
   top: 0;
   width: 100%;
 }*/
- .mainbar{
+
+
+.main{
+    background-color:#dfdfdf;  
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    flex-direction: column;
+}
+.mainbar{
     z-index: 1;
     display: flex;
     justify-content: space-between;
@@ -16,22 +25,17 @@
     width: 100%;
     border-bottom: 1px solid  rgb(0, 0, 0,0.16);
     opacity: 1;
-
 }
  .horizontal_bars {
-
-
   display: flex;
   flex-direction: row;
-  justify-content:space-between;
-
+  flex-basis: 100%;
 }
 
  .horizontal_bars .toolbox{
   background: #F1F1F1;
   z-index: 1;
   flex-shrink: 0;
-  position: absolute;
   height: calc(100vh - 50px);
   display: flex;
   flex-direction: row;
@@ -47,31 +51,20 @@
 
 .horizontal_bars .toolbox .moduleBar{
   padding: 10px;
+  width: 311px;
   overflow-y: scroll;
   overflow-x: hidden;
 }
 
- .horizontal_bars .sidebar{
-  width: 311px;
-  z-index: 1;
-
-  flex-shrink: 0;
-  position: absolute;
-  right: 0;
-  height: calc(100vh - 50px);
-  background: #F1F1F1 0% 0% no-repeat padding-box;
-  opacity: 1;
-  overflow: scroll;
-}
-
-
-
-
 .playground{
   background-color:#dfdfdf;
   margin-top: 0px;
-  height: calc(100vh - 50px);
   display: flex;
+  position: absolute;
+  top:150px;
+  left:0;
+  right: 0;
+  bottom: 0;
   flex-direction: column;
 
 }
@@ -82,14 +75,36 @@
   overflow-y: hidden;
 }
 
- .pageNav{
+
+
+
+
+
+.horizontal_bars .wrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+ .horizontal_bars .wrapper .sidebar{
+  width: 311px;
+  z-index: 1;
+  align-self: flex-end;
+  height: 100%;
+  background: #F1F1F1;
+  opacity: 1;
+}
+
+
+
+
+ .horizontal_bars .wrapper .pageNav{
   background-color: white;
-  margin-bottom: 10px;
-  margin-left:285px;
   height: 47px;
   background: #F8F8F8 0% 0% no-repeat;
-  width:auto;
+  /*width:auto;*/
   box-shadow: 0px 1px  0px 0px #F8F8F8;
   opacity: 1;
-
+  z-index: 1;
 }
+
+

App.js

@@ -21,9 +21,8 @@ export default class App extends React.Component {
         zoom:1,
         scrollPos:0
       }
-    // this.addScrollEvent();
+    
     this.GUI = new GUI();
-    console.log("@@@@@@@@@@@@@@@@@@###########")
   
     this.GUI.onUpdate( () => this.forceUpdate())
   }
@@ -33,14 +32,14 @@ export default class App extends React.Component {
   }
 
   addScrollEvent(){
-    window.addEventListener('wheel', (e) =>{
+  /*  window.addEventListener('wheel', (e) =>{
       if(e.deltaY < 0){
         this.zoom(0.2);
       }
       else if(e.deltaY > 0){
         this.zoom(-0.2);
       }
-    });
+    });*/
   } 
   
   zoom(delta){
@@ -74,15 +73,18 @@ export default class App extends React.Component {
             <div className="tool_icon_bar">{this.GUI.renderToolBox()}</div>
             <div className="moduleBar">{this.GUI.renderModuleBar()}</div>
           </div> 
-          <div className="sidebar">
-            {this.GUI.renderSideBar()}
+          <div className="wrapper">
+            <div className="pageNav">{  this.GUI.renderPageBar()}</div>
+            <div className="sidebar">
+              {this.GUI.renderSideBar()}
+            </div>`
           </div>
+          
         </div>
 
        
-        {/*This is a comment*/}
         <div onClick={(e) => this.dragPage(e)} className="playground" style={{zoom:this.state.zoom}}>
-          <div className="pageNav">{  this.GUI.renderPageBar()}</div>
+         
           <div className="phone">
 
             {this.GUI.mobileRender()}

Systems/Environment.js

@@ -129,8 +129,8 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     flex:1,
     alignSelf: 'stretch',
-    width:1125/3,
-    height: 2436/3 
+    width:375,
+    height: 667 
   },
 
   row: {

Systems/Gui.js

@@ -55,7 +55,7 @@ export default class Gui extends BaseSystem {
     // Setup mainContainer
     let cview = this.CoreSystem.getCurrentView();
     let container = cview.getDefaultContainer();
-    let mainContent = new ViewNode(Math.random(), 'BaseContainer', {width: 1125/3, height: 2436/3 - 10});
+    let mainContent = new ViewNode(Math.random(), 'BaseContainer', {width: 375, height: 667});
     cview.setContent(mainContent, container);
 
 
@@ -125,12 +125,12 @@ export default class Gui extends BaseSystem {
     let targetNode = this.CoreSystem.ray({event});
     // targetNode.content
     targetNode.props.selected = true;
-    console.log(targetNode, data);
+  
     let node = new ViewNode(Math.random(), data.ctor, {}, data.namespace);
     let containerNode = new Node(Math.random(), {}, node);
     let View = this.CoreSystem.getCurrentView();
     View.addViewNode(containerNode, targetNode);
-    console.log(node);
+ 
 
     this.forceUpdate();
   }
@@ -198,13 +198,17 @@ export default class Gui extends BaseSystem {
 
     return (
       <View style={PageButtons.container}>
-       <Button
-        color="#F1F1F1"
-        title={<Icon  name='filter'
-        color="#36BBAD"
-            />
-        }
-        />
+       <View style={{borderRightWidth:"1px",
+          borderColor:"#B4b4b4",background:'white'}}>
+         <Button
+          
+          color="white"
+          title={<Icon containerStyle={{paddingLeft:14,paddingRight:14,paddingTop:2,paddingBottom:2}}  name='filter'
+          color="#36BBAD"
+              />
+            }
+          />
+        </View>
         {pages}
 
         <View style={PageButtons.addNew}  onClick = {() => this.addFrame()}>
@@ -227,9 +231,8 @@ export default class Gui extends BaseSystem {
 const PageButtons = StyleSheet.create({
   container:{
     flex:1,
-    paddingLeft:15,
     flexDirection:'row',
-
+    width:40,
   },
   activePage:{
     backgroundColor:"#36BBAD",
@@ -252,7 +255,7 @@ const PageButtons = StyleSheet.create({
     textAlign:"center",
     overflow:'hidden',
     width:160,
-    height:49,
+    height:48,
   },
   addNew:{
 
@@ -260,7 +263,7 @@ const PageButtons = StyleSheet.create({
     backgroundColor:"#D6D6D6",
     cursor:'pointer',
     width:160,
-    height:49,
+    height:48,
   },
 
   addNewContainer:{

Systems/ModuleBar.js

@@ -53,7 +53,7 @@ export default class ModuleBar {
 				</View>)
 			});
 			return  <View key={key}>
-						<Text>{key}</Text>
+						
 						{items}
 					</View>;
 		})

Systems/SideBar.js

@@ -110,8 +110,7 @@ export default class SideBar extends BaseSystem {
 			this.ContainerNode = selectedNode;
 			if(selectedNode.content && selectedNode.content.value) {
 				let ctor = ModuleSystem.fromViewNode(selectedNode.content);
-				console.log("YOUR LOOKINGH")
-				console.log(ctor)
+				
 				styles = ctor.Styles;
 				viewNodeProps = ModuleSystem.validateProps(ctor, selectedNode.content.props);
 				Structure = ctor.Inputs;
@@ -128,11 +127,6 @@ export default class SideBar extends BaseSystem {
 			</option>
 
 		)
-
-		console.log("@@@@@@@@@@@@@@@@@@")
-		console.log(StyleData)
-		console.log(styles)
-		console.log("!!!!!!!!!!!!!!!!!!!!")
 		let contentData = Object.keys(Structure || {}).map((key,index) => 
 			<View key={selectedNode.id + key}>
 			{this.createHandler(Structure[key], viewNodeProps, key, (v, f) => 
@@ -151,7 +145,7 @@ export default class SideBar extends BaseSystem {
 		return (
   			<View>
   				<Text style={SideBarStyle.title}>Side Bar</Text>
-
+  				{StyleData.length > 0 ? (
   				<View key={Math.random()}>
   					<select onChange={(event) => {
   						this._selectedStyle = event.target.value;
@@ -160,7 +154,7 @@ export default class SideBar extends BaseSystem {
   					}}>
   						{StyleData}
   					</select>
-  				</View>
+  				</View>):(null)}
   				<View>
   					{this.ContainerNode && <View key={this.ContainerNode.id}>
   						<Text>Container</Text>
@@ -221,7 +215,7 @@ const SideBarStyle = StyleSheet.create({
 	container:{
 		padding:1,
 		flex:1,
-		flexDirection:'row'
+		flexDirection:'row',
 	},
 	title:{
 		fontSize:20,

Tools/InsertForm.js

@@ -34,19 +34,7 @@ export default class InsertForm extends Tool{
 
 
 	editViewNode(CS,node){
-		/*let View = null;
-		if(!node ){
-			return;
-		}
-		let Views = CS.ViewSystem.views;
-		Object.keys(Views).map((key) => {
-			
-			if(Views[key].ViewTree.nodes[node.id]){
-				View = key;
-			}
-		})
-		let EditNode = new ViewNode(Math.random(),"ViewComp",{text:"Manipulationg the dom",style:styles})
-		Views[View].setContent(EditNode,node);*/
+		
 	}
 
 

Tools/index.js

@@ -5,12 +5,12 @@ import InsertForm from './InsertForm';
 let Tools = {
 	Select,
 	Add,
-	InsertForm
+	
 }
 
 export {
 	Tools,
 	Select,
 	Add,
-	InsertForm
+	
 }

yalc.lock

@@ -0,0 +1,9 @@
+{
+  "version": "v1",
+  "packages": {
+    "trapilib": {
+      "signature": "5e62a82f5a1b7eb68c6e176939b13ee6",
+      "file": true
+    }
+  }
+}