Added advanced dropdown button for zoom, only %s work for now

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

editor/svg-editor.css

@@ -185,8 +185,6 @@ div.color_block {
 	vertical-align:12px;
 }
 
-/* TODO: figure out why there is a couple pixels between
-   the tools with a flyout arrow */
 #svg_editor .flyout_arrow_horiz {
 	float: right;
 	position: relative;
@@ -195,6 +193,63 @@ div.color_block {
 	margin-bottom: -13px;
 }
 
+#zoom_panel {
+	width: 133px;
+}
+
+#zoom {
+	width: 3em;
+}
+
+#svg_editor #tools_top #zoom_dropdown {
+	position: relative;
+	float: right;
+	left: -5px;
+}
+
+#zoom_dropdown button {
+	background: transparent 3px 8px url('images/dropdown.gif') no-repeat;
+	width: 15px;
+	height: 21px;
+	margin: 6px 0 0 3px;
+	padding: 0;
+	border-left: 1px solid #FFFFFF;
+	border-top: 1px solid #FFFFFF;
+	border-right: 1px solid #808080;
+	border-bottom: 1px solid #808080;
+}
+
+#zoom_dropdown button.down {
+	border-left: 1px solid #808080;
+	border-top: 1px solid #808080;
+	border-right: 1px solid #FFFFFF;
+	border-bottom: 1px solid #FFFFFF;
+	background-color: #B0B0B0;
+}
+
+#zoom_dropdown ul {
+	list-style: none;
+	position: absolute;
+	margin: 0;
+	padding: 0;
+	left: -93px;
+	top: 30px;
+	display: none;
+}
+
+#zoom_dropdown li {
+	display: block;
+	width: 100px;
+	padding: 4px;
+	background: #E8E8E8;
+	border: 1px solid #B0B0B0;
+	margin: 0 0 -1px 0;
+}
+
+#zoom_dropdown li:hover {
+	background-color: #B0B0B0;
+}
+
 #svg_editor .tool_button, #svg_editor .tool_button_current, #svg_editor .tool_button_disabled {
 	height: 24px;
 	width: 24px;

editor/svg-editor.html

@@ -58,10 +58,25 @@
 	</div>
 	
     <!-- Zoom buttons -->
-	<div>
+	<div id="zoom_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<span class="zoom_tool">zoom:</span>
 		<input id="zoom" class="zoom_tool" title="Change zoom level" alt="Zoom %" size="3" value="100" type="text"/>
+		<div id="zoom_dropdown">
+			<button></button>
+			<ul>
+				<li>100%</li>
+				<li data-val="content">Fit to content</li>
+				<li data-val="selection">Fit to selection</li>
+				<li data-val="canvas">Fit to canvas</li>
+				<li>25%</li>
+				<li>50%</li>
+				<li>100%</li>
+				<li>200%</li>
+				<li>400%</li>
+				<li>1000%</li>
+			</ul>
+		</div>
 	</div>
 
 	<!-- Buttons when a single element is selected -->

editor/svg-editor.js

@@ -289,7 +289,6 @@ function svg_edit_setup() {
 	var changeZoom = function(ctl) {
 		var zoomlevel = ctl.value / 100;
 		var res = svgCanvas.getResolution();
-		console.log(res.zoom, zoomlevel);
 		// Hack to increase properly from 10%
 		if(res.zoom < zoomlevel && res.zoom == .1) $('#zoom').val(50);
 		setResolution(res.w * zoomlevel, res.h * zoomlevel, true);
@@ -414,6 +413,46 @@ function svg_edit_setup() {
 		svgCanvas.clearSelection();
 		return true;
 	};
+	
+	var setZoomOpts = function() {
+		var button = $('#zoom_dropdown button');
+		var list = $('#zoom_dropdown ul');
+		var on_button = false;
+
+		$('#zoom_dropdown li').bind('mouseup',function() {
+			var item = $(this);
+			var val = item.attr('data-val');
+			if(val) {
+				//TODO: Calculate proper zoom from here.
+			} else {
+				var percent = parseInt(item.text());
+				$('#zoom').val(percent);
+				var zoomlevel = percent/100;
+				var res = svgCanvas.getResolution();
+				setResolution(res.w * zoomlevel, res.h * zoomlevel, true);
+				svgCanvas.setZoom(zoomlevel);
+			}
+		});
+		
+		$().mouseup(function() {
+			if(!on_button) {
+				button.removeClass('down');
+				list.hide();
+			}
+			on_button = false;
+		});
+		
+		button.bind('mousedown mouseup',function() {
+			button.addClass('down');
+			list.show();
+		}).hover(function() {
+			on_button = true;
+		}).mouseout(function() {
+			on_button = false;
+		});
+	};
+	
+	setZoomOpts();
 
 	var clickSelect = function() {
 		if (toolButtonClick('#tool_select')) {