add auto-scrollbar to children-list-box; add child node name word-wra…

…p; add ui-layout menu item;
qdubious · Jan 28, 2016 · e93aa52 · e93aa52
1 parent 1adf6d9
commit e93aa52
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/js/main.js b/js/main.js
@@ -31,6 +31,12 @@ function myokinfo(text)
 	_myalert_dom.fadeIn(200);
 	_myalert_dom.tmr.restart();
 }
+function setUiLayoutMainLR(l,r)
+{
+	$('.mainbottomlft').removeClass('flex1').removeClass('flex2').removeClass('flex3').removeClass('flex4').removeClass('flex5').addClass('flex'+l);
+	$('.mainbottomrgt').removeClass('flex1').removeClass('flex2').removeClass('flex3').removeClass('flex4').removeClass('flex5').addClass('flex'+r);
+	log('left='+l+', right='+r);
+}
 function zkuiEnsureConnection()
 {
 	if(py.jsZkIsConnected())

diff --git a/main.html b/main.html
@@ -18,13 +18,18 @@
 body {display:-webkit-flex;-webkit-flex-direction:column; }
 .pathbread {margin-bottom:0px;}
 .mainbottom {display:-webkit-flex;-webkit-flex-direction:row;-webkit-flex:1; border-top:0.2em solid gray;}
-.mainbottomlft {-webkit-flex:1;padding:0.2em;display:-webkit-flex;-webkit-flex-direction:column;padding:0.5em;}
+.mainbottomlft {padding:0.2em;display:-webkit-flex;-webkit-flex-direction:column;padding:0.5em;}
 .mainbottomdvd {width:0.125em; background-color:gray; margin-left:0.2em; margin-right:0.2em;}
-.mainbottomrgt {overflow:hidden; -webkit-flex:3;display:-webkit-flex;-webkit-flex-direction:column;padding:0.2em;}
-.childbox {-webkit-flex:1;display:-webkit-flex;-webkit-flex-direction:row;-webkit-flex-wrap:wrap;-webkit-align-items:flex-start;-webkit-align-content:flex-start;}
-.child {margin-right:0.6em; margin-top:0.6em;}
+.mainbottomrgt {overflow:hidden; display:-webkit-flex;-webkit-flex-direction:column;padding:0.2em;}
+.childbox {overflow:auto;-webkit-flex:1;display:-webkit-flex;-webkit-flex-direction:row;-webkit-flex-wrap:wrap;-webkit-align-items:flex-start;-webkit-align-content:flex-start;}
+.child {margin-right:0.6em; margin-top:0.6em; word-wrap: break-word; white-space:normal; text-align: left; }
 .node_val_pnl {-webkit-flex:1;margin-top:0.5em;margin-bottom:0.5em; padding:0.2em;}
 .breadcrumb li.active {font-weight: bold;}
+.flex1 {-webkit-flex:1;}
+.flex2 {-webkit-flex:2;}
+.flex3 {-webkit-flex:3;}
+.flex4 {-webkit-flex:4;}
+.flex5 {-webkit-flex:5;}
 </style>
 <script src="js/util.js" type="text/javascript"></script>
 <script src="js/main.js" type="text/javascript"></script>
@@ -40,7 +45,7 @@
 	<li name="sample_active" class="active hidden">Data</li>
 </ol>
 <div class="mainbottom">
-	<div class="mainbottomlft">
+	<div class="mainbottomlft flex1">
 		<div class="btn-group" role="group" aria-label="..." style="height:2.3em">
 			<button type="button" class="btn btn-warning" onClick="showCreateChildDialog()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><b> Create New Child</b></button>
 			<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
@@ -55,14 +60,20 @@
 				<li class="divider"></li>
 				<li><a href="javascript:showDelChildrenDialog()"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span><b> Delete All Children</b></a></li>
 				<li><a href="javascript:showDelNodeDialog()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span><b> Delete Node</b></a></li>
+				<li class="divider"></li>
+				<li><a href="javascript:setUiLayoutMainLR(1,1)"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><b> UI Layout 1:1</b></a></li>
+				<li><a href="javascript:setUiLayoutMainLR(1,2)"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><b> UI Layout 1:2</b></a></li>
+				<li><a href="javascript:setUiLayoutMainLR(1,3)"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><b> UI Layout 1:3</b></a></li>
+				<li><a href="javascript:setUiLayoutMainLR(1,4)"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><b> UI Layout 1:4</b></a></li>
+				<li><a href="javascript:setUiLayoutMainLR(1,5)"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><b> UI Layout 1:5</b></a></li>
 			</ul>
 		</div>
 		<h4 id="chld_list" class="childbox">
 			<a class="label label-primary child hidden" name="sample">Default</a>
 		</h4>
 	</div>
 	<div class="mainbottomdvd"></div>
-	<div class="mainbottomrgt">
+	<div class="mainbottomrgt flex3">
 		<form class="form-inline" role="form" id="node_misc_prop">
 			<div class="input-group">
 				<span class="input-group-addon">PATH</span>