SceneEditor: improve visibility toggle buttons. Expand scene tree in L3D and FXE views

bin/style.css

@@ -219,10 +219,19 @@ input[type=checkbox]:checked:after {
 .hide-scene-layer .jstree-container-ul {
   padding-right: 5px;
 }
-.hide-scene-tree {
+.hide-scenetree {
   height: 100%;
+  background-color: #111;
+  border: 1px solid #444;
+  width: 300px;
+  overflow-y: auto;
+  flex: 0 0 300px;
 }
-.hide-scene-tree .jstree-container-ul {
+.hide-scenetree .jstree {
+  width: 300px;
+  overflow-x: hidden;
+}
+.hide-scenetree .jstree-container-ul {
   max-width: 300px;
 }
 .hide-tileselect {
@@ -1095,15 +1104,21 @@ body.hide-subview .lm_controls {
 }
 .visibility-toggle,
 .visibility-large-toggle {
-  float: right;
+  position: absolute;
+  right: 0px;
   padding: 4px;
 }
 .visibility-toggle:hover,
 .visibility-large-toggle:hover {
   color: white;
+  background: black;
+}
+.hidden .visibility-toggle,
+.hidden .visibility-large-toggle {
+  background: #0000008a;
 }
-.visibility-toggle .hidden i,
-.visibility-large-toggle .hidden i {
+.hidden .visibility-toggle i,
+.hidden .visibility-large-toggle i {
   color: #555;
 }
 .visibility-large-toggle {
@@ -1122,12 +1137,6 @@ body.hide-subview .lm_controls {
   line-height: 18px;
   height: 18px;
 }
-.jstree.small .jstree-anchor.crop {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 230px;
-}
 .jstree.small .jstree-icon {
   width: 18px;
   height: 18px;

bin/style.less

@@ -233,8 +233,18 @@ input[type=checkbox] {
 
 }
 
-.hide-scene-tree {
+.hide-scenetree {
 	height: 100%;
+	background-color : #111;
+	border : 1px solid #444;
+	width: 300px;
+	overflow-y: auto;
+	flex: 0 0 300px;
+
+	.jstree {
+		width: 300px;
+		overflow-x: hidden;
+	}
 
 	.jstree-container-ul {
 		max-width: 300px;
@@ -1213,17 +1223,21 @@ body.hide-subview {
 }
 
 .visibility-toggle, .visibility-large-toggle {
-	float: right;
+	position: absolute;
+	right: 0px;
 	padding: 4px;
 
 	&:hover {
 		color : white;
+		background: black;
 	}
 }
-
-.visibility-toggle .hidden, .visibility-large-toggle .hidden {
-	i {
-		color: #555;
+.hidden {
+	.visibility-toggle, .visibility-large-toggle {
+		background: #0000008a;
+		i {
+			color: #555;
+		}
 	}
 }
 
@@ -1247,13 +1261,6 @@ body.hide-subview {
 	.jstree-anchor {
 		line-height: @size;
 		height: @size;
-
-		&.crop {
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-			width: 230px;
-		}
 	}
 	.jstree-icon {
 		width: @size;

hide/comp/SceneEditor.hx

@@ -751,7 +751,7 @@ class SceneEditor {
 			el.toggleClass("hidden", isHidden(obj3d));
 			var tog = el.find(".visibility-toggle").first();
 			if(tog.length == 0) {
-				tog = new Element('<i class="fa fa-eye visibility-toggle"/>').appendTo(el.find(".jstree-wholerow").first());
+				tog = new Element('<i class="fa fa-eye visibility-toggle"/>').insertAfter(el.find("a.jstree-anchor").first());
 				tog.click(function(e) {
 					e.stopPropagation();
 					if(curEdit.elements.indexOf(obj3d) >= 0)

hide/view/FXEditor.hx

@@ -208,12 +208,10 @@ class FXEditor extends FileView {
 							</div>
 						</div>
 					</div>
+					<div class="hide-scenetree">
+					</div>
 					<div class="tabs">
 						<div class="tab expand" name="Scene" icon="sitemap">
-							<div class="hide-block" style="height:40%">
-								<div class="hide-scene-tree hide-list">
-								</div>
-							</div>
 							<div class="hide-scroll"></div>
 						</div>
 						<div class="tab expand" name="Properties" icon="cog">
@@ -229,7 +227,7 @@ class FXEditor extends FileView {
 		tools = new hide.comp.Toolbar(null,element.find(".toolbar"));
 		tabs = new hide.comp.Tabs(null,element.find(".tabs"));
 		sceneEditor = new FXSceneEditor(this, data);
-		element.find(".hide-scene-tree").first().append(sceneEditor.tree.element);
+		element.find(".hide-scenetree").first().append(sceneEditor.tree.element);
 		element.find(".hide-scroll").first().append(sceneEditor.properties.element);
 		element.find(".heaps-scene").first().append(sceneEditor.scene.element);
 		element.resize(function(e) {

hide/view/Prefab.hx

@@ -83,7 +83,7 @@ class Prefab extends FileView {
 					<div class="tabs">
 						<div class="tab expand" name="Scene" icon="sitemap">
 							<div class="hide-block">
-								<div class="hide-list hide-scene-tree">
+								<div class="hide-list scenetree">
 								</div>
 							</div>
 						</div>
@@ -94,7 +94,7 @@ class Prefab extends FileView {
 		tools = new hide.comp.Toolbar(null,element.find(".toolbar"));
 		tabs = new hide.comp.Tabs(null,element.find(".tabs"));
 		sceneEditor = new PrefabSceneEditor(this, data);
-		element.find(".hide-scene-tree").first().append(sceneEditor.tree.element);
+		element.find(".scenetree").first().append(sceneEditor.tree.element);
 		element.find(".tab").first().append(sceneEditor.properties.element);
 		element.find(".heaps-scene").first().append(sceneEditor.scene.element);
 		currentVersion = undo.currentID;

hide/view/l3d/Level3D.hx

@@ -325,12 +325,10 @@ class Level3D extends FileView {
 				<div class="flex-elt">
 					<div class="heaps-scene">
 					</div>
+					<div class="hide-scenetree">
+					</div>
 					<div class="tabs">
 						<div class="tab expand" name="Scene" icon="sitemap">
-							<div class="hide-block" style="height:50%">
-								<div class="hide-scene-tree hide-list">
-								</div>
-							</div>
 							<div class="hide-scroll"></div>
 						</div>
 						<div class="tab expand" name="Properties" icon="cog">
@@ -347,8 +345,8 @@ class Level3D extends FileView {
 
 		levelProps = new hide.comp.PropsEditor(undo,null,element.find(".level-props"));
 		sceneEditor = new Level3DSceneEditor(this, data);
-		sceneEditor.addSearchBox(element.find(".hide-scene-tree").first());
-		element.find(".hide-scene-tree").first().append(sceneEditor.tree.element);
+		sceneEditor.addSearchBox(element.find(".hide-scenetree").first());
+		element.find(".hide-scenetree").first().append(sceneEditor.tree.element);
 		element.find(".hide-scroll").first().append(sceneEditor.properties.element);
 		element.find(".heaps-scene").first().append(sceneEditor.scene.element);
 		sceneEditor.tree.element.addClass("small");
@@ -632,6 +630,7 @@ class Level3D extends FileView {
 	}
 
 	function applyTreeStyle(p: PrefabElement, el: Element) {
+		/*
 		var styles = ide.currentConfig.get("l3d.treeStyles");
 		var style: Dynamic = null;
 		var typeId = getCdbTypeId(p);
@@ -647,6 +646,7 @@ class Level3D extends FileView {
 			a.removeAttr("style");
 		else
 			a.css(style);
+			*/
 	}
 
 	function onPrefabChange(p: PrefabElement, ?pname: String) {