Fixed issue 764: Small window size may cause the UI to be drawn over the drawing area

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1956 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/svg-editor.css

@@ -485,9 +485,7 @@
 	top: 2px;
 	height: 72px;
 	border-bottom: none;
-	/* Ideally this should be auto (makes scrollbar if needed), but currently hides 
-	the .dropdown lists.
-/*	overflow: auto;*/
+	overflow: auto;
 }
 
 #svg_editor #tools_left {
@@ -671,7 +669,7 @@ span.zoom_tool {
 	background: #FFC;
 }
 
-#font_family_dropdown li {
+#font_family_dropdown-list li {
 	font-size: 1.4em;
 }
 
@@ -914,7 +912,7 @@ span.zoom_tool {
 
 #tools_top .dropdown .icon_label {
 	border: 1px solid transparent;
-	margin-top: 3px;
+/*	margin-top: 3px;*/
 	height: auto;
 }
 

editor/svg-editor.html

@@ -567,7 +567,7 @@
 	<div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.6-alpha</a></div>
 </div>
 
-<div id="option_lists">
+<div id="option_lists" class="dropdown">
 	<ul id="linejoin_opts">
 		<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
 		<li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>

editor/svg-editor.js

@@ -2130,13 +2130,19 @@
 			// TODO: Group UI functions into a public svgEditor.ui interface.
 			Editor.addDropDown = function(elem, callback, dropUp) {
 				var button = $(elem).find('button');
-				var list = $(elem).find('ul');
+				var list = $(elem).find('ul').attr('id', $(elem)[0].id + '-list');
+				
+				if(!dropUp) {
+					// Move list to place where it can overflow container
+					$('#option_lists').append(list);
+				}
+				
 				var on_button = false;
 				if(dropUp) {
 					$(elem).addClass('dropup');
 				}
 			
-				$(elem).find('li').bind('mouseup', callback);
+				list.find('li').bind('mouseup', callback);
 				
 				$(window).mouseup(function(evt) {
 					if(!on_button) {
@@ -2149,7 +2155,16 @@
 				button.bind('mousedown',function() {
 					if (!button.hasClass('down')) {
 						button.addClass('down');
+						
+						if(!dropUp) {
+							var pos = $(elem).position();
+							list.css({
+								top: pos.top + 24,
+								left: pos.left - 10
+							});
+						}
 						list.show();
+						
 						on_button = true;
 					} else {
 						button.removeClass('down');
@@ -2249,8 +2264,7 @@
 				}
 			});
 		
-			Editor.addDropDown('#blur_dropdown', function() {
-			});
+			Editor.addDropDown('#blur_dropdown', $.noop);
 			
 			var slideStart = false;