interface optimizations for maximizing canvas area

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

editor/svg-editor.html

@@ -110,8 +110,8 @@
 </div>
 
 <div id="main_button">
-	<div id="main_icon" class="buttonup" title="Main Menu">
+	<div id="main_icon" class="tool_button" title="Main Menu">
-		<span></span>
+		<span>SVG-Edit</span>
 		<div id="logo"></div>
 		<div class="dropdown"></div>
 	</div>
@@ -172,8 +172,9 @@
 
 
 <div id="tools_top" class="tools_panel">
-	
+
 	<div id="editor_panel">
+		<div class="tool_sep"></div>
 		<div class="push_button" id="tool_source" title="Edit Source [U]"></div>
 		<div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
 	</div>
@@ -495,6 +496,7 @@
 
 	<div id="tools_bottom_2">
 		<div id="color_tools">
+			
 			<div class="color_tool" id="tool_fill">
 				<label class="icon_label" for="fill_color" title="Change fill color"></label>
 				<div class="color_block">
@@ -504,17 +506,17 @@
 			</div>
 		
 			<div class="color_tool" id="tool_stroke">
-				<div class="color_block">
+				<label class="icon_label" title="Change stroke color"></label>
-					<label class="icon_label" title="Change stroke color"></label>
-				</div>
 				<div class="color_block">
 					<div id="stroke_bg"></div>
 					<div id="stroke_color" class="color_block" title="Change stroke color"></div>
 				</div>
 				
-				<label>
+				<label class="stroke_label">
 					<input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2" value="5" type="text" data-attr="Stroke Width"/>
 				</label>
+
+				<div id="toggle_stroke_tools" title="Show/hide more stroke tools"></div>
 				
 				<label class="stroke_tool">
 					<select id="stroke_style" title="Change stroke dash style">
@@ -527,41 +529,33 @@
 				</label>	
 
  				<div class="stroke_tool dropdown" id="stroke_linejoin">
- 					<div>
+					<div id="cur_linejoin" title="Linejoin: Miter"></div>
-						<div id="cur_linejoin" title="Linejoin: Miter"></div>
+					<button></button>
-						<button></button>
-					</div>
  				</div>
  				
  				<div class="stroke_tool dropdown" id="stroke_linecap">
- 					<div>
+					<div id="cur_linecap" title="Linecap: Butt"></div>
-						<div id="cur_linecap" title="Linecap: Butt"></div>
+					<button></button>
-						<button></button>
-					</div>
  				</div>
-			
+
-				<div id="toggle_stroke_tools" title="Show/hide more stroke tools">
-					&gt;&gt;
-				</div>
-				
 			</div>
-		</div>
+
-	
+			<div class="color_tool" id="tool_opacity" title="Change selected item opacity">
-		<div class="toolset" id="tool_opacity" title="Change selected item opacity">
+				<label>
-			<label>
+					<span id="group_opacityLabel" class="icon_label"></span>
-				<span id="group_opacityLabel" class="icon_label"></span>
+					<input id="group_opacity" size="3" value="100" type="text"/>
-				<input id="group_opacity" size="3" value="100" type="text"/>
+				</label>
-			</label>
+				<div id="opacity_dropdown" class="dropdown">
-			<div id="opacity_dropdown" class="dropdown">
+					<button></button>
-				<button></button>
+					<ul>
-				<ul>
+						<li>0%</li>
-					<li>0%</li>
+						<li>25%</li>
-					<li>25%</li>
+						<li>50%</li>
-					<li>50%</li>
+						<li>75%</li>
-					<li>75%</li>
+						<li>100%</li>
-					<li>100%</li>
+						<li class="special"><div id="opac_slider"></div></li>
-					<li class="special"><div id="opac_slider"></div></li>
+					</ul>
-				</ul>
+				</div>
 			</div>
 		</div>
 
@@ -570,7 +564,7 @@
 	<div id="tools_bottom_3">
 		<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
 	</div>
-	<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 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" class="dropdown">

editor/svg-editor.js

@@ -433,12 +433,13 @@
 					'#palette .palette_item:first, #fill_bg, #stroke_bg':'no_color'
 				},
 				resize: {
-					'#logo .svg_icon': 32,
+					'#logo .svg_icon': 28,
 					'.flyout_arrow_horiz .svg_icon': 5,
 					'.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
 					'.dropdown button .svg_icon': 7,
 					'#main_button .dropdown .svg_icon': 9,
-					'.palette_item:first .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon': 16,
+					'.palette_item:first .svg_icon' : 15,
+					'#fill_bg .svg_icon, #stroke_bg .svg_icon': 16,
 					'.toolbar_button button .svg_icon':16,
 					'.stroke_tool div div .svg_icon': 20,
 					'#tools_bottom label .svg_icon': 18
@@ -824,15 +825,6 @@
 			});
 
 			var contextChanged = function(win, context) {
-				$('#workarea,#sidepanels').css('top', context?100:75);
-				$('#rulers').toggleClass('moved', context);
-				if(cur_context && !context) {
-					// Back to normal
-					workarea[0].scrollTop -= 25;
-				} else if(!cur_context && context) {
-					workarea[0].scrollTop += 25;
-				}
-
 				var link_str = '';
 				if(context) {
 					var str = '';
@@ -935,7 +927,7 @@
 					var timer;
 
 					var pos = $(show_sel).position();
-					$(hold_sel).css({'left': pos.left+34, 'top': pos.top+77});
+					$(hold_sel).css({'left': pos.left+34, 'top': pos.top+40});
 
 					// Clicking the "show" icon should set the current mode
 					shower.mousedown(function(evt) {
@@ -1988,14 +1980,8 @@
 				updateToolButtonState();
 			}).bind('contextmenu', function(e) {e.preventDefault()});
 
-			$("#toggle_stroke_tools").toggle(function() {
+			$("#toggle_stroke_tools").on("click", function() {
-				$(".stroke_tool").css('display','table-cell');
+				$("#tools_bottom").toggleClass("expanded");
-				$(this).text('<<');
-				resetScrollPos();
-			}, function() {
-				$(".stroke_tool").css('display','none');
-				$(this).text('>>');
-				resetScrollPos();
 			});
 
 			// This is a common function used when a tool has been clicked (chosen)