Merge

App.css

@@ -6,11 +6,13 @@
   top: 0;
   width: 100%;
 }*/
+<<<<<<< HEAD
 .main {
   flex-direction: column;
   width: 100vw;
   height: 100vh; 
   overflow: hidden;
+  background-color:#dfdfdf; 
 }
 .mainbar{
   z-index: 1;
@@ -23,17 +25,21 @@
   opacity: 1;
 }
 
-.horizontal_bars {
+
+ .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;
+<<<<<<< HEAD
+=======
+  height: calc(100vh - 50px);
+>>>>>>> ba414cb418cbf03c7d613b72275b476d188f0fb7
   display: flex;
   flex-direction: row;
 
@@ -48,10 +54,12 @@
 
 .horizontal_bars .toolbox .moduleBar{
   padding: 10px;
+  width: 311px;
   overflow-y: scroll;
   overflow-x: hidden;
 }
 
+<<<<<<< HEAD
 .horizontal_bars .sidebar{
   width: 311px;
   z-index: 1;
@@ -66,10 +74,17 @@ body {
   background: #dfdfdf;
 }
 
+=======
+>>>>>>> ba414cb418cbf03c7d613b72275b476d188f0fb7
 .playground{
   background-color:#dfdfdf;
   margin-top: 0px;
   display: flex;
+  position: absolute;
+  top:150px;
+  left:0;
+  right: 0;
+  bottom: 0;
   flex-direction: column;
   position: absolute;
   top: 0px;
@@ -83,13 +98,34 @@ body {
   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){
@@ -78,14 +77,11 @@ export default class App extends React.Component {
             <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()}
             </div>
           </div>      

Systems/Gui.js

@@ -122,12 +122,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();
   }
@@ -195,13 +195,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()}>
@@ -224,9 +228,8 @@ export default class Gui extends BaseSystem {
 const PageButtons = StyleSheet.create({
   container:{
     flex:1,
-    paddingLeft:15,
     flexDirection:'row',
-
+    width:40,
   },
   activePage:{
     backgroundColor:"#36BBAD",
@@ -249,7 +252,7 @@ const PageButtons = StyleSheet.create({
     textAlign:"center",
     overflow:'hidden',
     width:160,
-    height:49,
+    height:48,
   },
   addNew:{
 
@@ -257,7 +260,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

@@ -1,10 +0,0 @@
-{
-  "version": "v1",
-  "packages": {
-    "trapilib": {
-      "signature": "e75c5a3cf7591d3ae56bcbb8b29981a5",
-      "file": true,
-      "replaced": "http://git.onarbooks.com/Klapi/TrapiLib.git"
-    }
-  }
-}