From 3a549808472abe8aedcf7b8ad709cd35dc5be440 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 3 Mar 2015 05:27:47 +0300
Subject: [PATCH] experimenting with widget sizing...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/experiments/browse-dialog.html | 51 +++++++++++++++---------
 ui (gen4)/viewer.js                      |  1 +
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/ui (gen4)/experiments/browse-dialog.html b/ui (gen4)/experiments/browse-dialog.html
index 93cfe2f4..7d3857ff 100755
--- a/ui (gen4)/experiments/browse-dialog.html	
+++ b/ui (gen4)/experiments/browse-dialog.html	
@@ -10,6 +10,20 @@
 	left: 100px;
 
 	box-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em;
+
+	/* make the container expand only to a certain size, then scroll */
+	/* XXX need to:
+		- auto-scroll vertically
+		- use custom scroll bars
+		- shorten path to fit width
+			i.e. manage width manually when at max-width...
+	*/
+	max-height: 60vh;
+	max-width: 60vw;
+	height: auto;
+	width: auto;
+	overflow-y: auto;
+	overflow-x: hidden;
 }
 
 .browse {
@@ -122,27 +136,26 @@ var TREE = {
 		dir_b: {
 			file1: 'this is a file',
 		},
+		dir_c: {},
+		dir_d: {},
+		dir_e: {},
+		dir_f: {},
+		dir_g: {},
+		dir_h: {},
+		dir_i: {},
+		dir_j: {},
+		dir_k: {},
+		dir_l: {},
+		dir_m: {},
+		dir_o: {},
+		dir_p: {},
+		dir_q: {},
+		dir_r: {},
+		dir_s: {},
+		dir_t: {},
+		dir_u: {},
 	},
 	file: 'this is a file',
-	/*
-	dir_d: {},
-	dir_e: {},
-	dir_f: {},
-	dir_g: {},
-	dir_h: {},
-	dir_i: {},
-	dir_j: {},
-	dir_k: {},
-	dir_l: {},
-	dir_m: {},
-	dir_o: {},
-	dir_p: {},
-	dir_q: {},
-	dir_r: {},
-	dir_s: {},
-	dir_t: {},
-	dir_u: {},
-	*/
 }
 // add some recursion for testing...
 TREE.dir_d = TREE.dir_c.dir_b
diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js
index 5c2bdd53..2fc45498 100755
--- a/ui (gen4)/viewer.js	
+++ b/ui (gen4)/viewer.js	
@@ -468,6 +468,7 @@ actions.Actions({
 	reverseRibbons: ['Reverse ribbon order',
 		function(){ this.data.reverseRibbons() }],
 
+	// XXX align to ribbon...
 
 	// XXX this also requires images...
 	sortImages: [