From 8a96643f1abac1f8832977558dd8030548768f8a Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Tue, 12 Jan 2010 21:38:39 +0000
Subject: [PATCH] Added basic implementation of issue 313 (logo becomes main
 menu button)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1202 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.css  | 116 +++++++++++++++++++++++++++--------------
 editor/svg-editor.html |  54 ++++++++++++++-----
 editor/svg-editor.js   |  57 +++++++++++++++-----
 3 files changed, 160 insertions(+), 67 deletions(-)

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 2aa6458c..5c1aef53 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -232,22 +232,91 @@
 	float: left;
 }
 
-#svg_editor #logo {
+#svg_editor #main_button {
 	position: absolute;
 	top: 4px;
 	left: 4px;
 	padding: 0px;
+	width: 44px;
+	height: 30px;
+	border-radius: 8px;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
 }
 
-#svg_editor #logo a img {
+#svg_editor #main_button:hover {
+	top: 2px;
+	left: 2px;
+	padding: 1px 0 2px 1px;
+	border-left: 1px #fcd9ba solid;
+	border-top: 1px #fcd9ba solid;
+	border-right: 1px #e0a874 solid;
+	border-bottom: 1px #e0a874 solid;
+	background-color: #FFC;
+}
+
+#svg_editor #main_menu {
+/*	position: */
+	z-index: 1;
+	background: #E8E8E8;
+	position: relative;
+	width: 200px;
+	padding: 5px;
+	-moz-box-shadow: #555 1px 1px 4px;
+	-webkit-box-shadow: #555 1px 1px 4px;
+	font-size: 1.1em;
+	display: none;
+}
+
+#svg_editor #main_menu ul,
+#svg_editor #main_menu li {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+#svg_editor #main_menu li {
+/*	height: 35px;*/
+	line-height: 22px;
+	padding-top: 2px;
+	padding-left: 2px;
+	overflow: auto;
+	cursor: default;
+}
+
+#svg_editor #main_menu li:hover {
+	background: #FFC;
+}
+
+#svg_editor #main_menu li > div {
+	float: left;
+	padding-right: 5px;
+}
+
+#svg_editor #main_menu p {
+	margin-top: 5px;
+}
+
+#svg_editor #logo img {
 	border: 0;
 	width: 32px;
 	height: 32px;
 }
 
+#main_button > div {
+	float: left;
+}
+
+#svg_editor #main_button .dropdown {
+	padding-top: 10px;
+	margin-left: -1px;
+}
+
+
+
 #svg_editor #tools_top {
 	position: absolute;
-	left: 38px;
+	left: 50px;
 	right: 2px;
 	top: 2px;
 	height: 72px;
@@ -442,51 +511,18 @@ span.zoom_tool {
 	cursor: pointer;
 }
 
-/*
-div.fileinputs {
-	position: relative;
-}
-
-div.fakefile {
-	position: absolute;
-	top: 2px;
-	left: 2px;
-	z-index: 0;
-}
-
-div.fileinputs svg {
-	position: relative;
-	width: 24px;
-	height: 24px;
-	z-index: 2;
-	cursor: pointer;
-}
-*/
-
-/* the file input control is placed on top but made invisible */
-/* TODO: is moz-opacity really needed? filter? */
-/*
-input.file {
-	position: relative;
-	text-align: right;
-	-moz-opacity: 0;
-	filter:alpha(opacity: 0);
-	opacity: 0;
-}
-*/
-
-#fileinputs {
+#svg_editor #main_menu li#tool_open {
 	position: relative;
 	overflow: hidden;
 }
 
-#fileinputs input {
-	-moz-transform: scale(2.0); /* Not entirely necessary, but keeps it nice and big for OS X*/
+#tool_open input {
+	-moz-transform: scale(4,2); /* Not entirely necessary, but keeps it nice and big for OS X*/
 	height: 100%;
 	position: absolute;
 	opacity: 0;
 	top: -3px;
-	right: 10px;
+	right: 270px;
 	margin: 0;
 	cursor: pointer; /* Sadly doesn't appear to have an effect */
 }
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index ccbc0677..d6365469 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -74,23 +74,51 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<div id="sidepanel_handle" onselectstart="return false;" title="Drag left/right to resize side panel [X]">L a y e r s</div>
 </div>
 
-<div id="logo">
-	<a href="http://svg-edit.googlecode.com/" target="_blank" title="SVG-edit Home Page">
-	</a>
+<div id="main_button" title="Main Menu">
+	<div id="logo"></div>
+	<div class="dropdown"></div>
+		
+	<div id="main_menu"> 
+	
+		<!-- File-like buttons: New, Save, Source -->
+		<ul>
+			<li id="tool_clear">
+				<div></div>
+				New Image [N]
+			</li>
+			
+			<li id="tool_open" style="display:none;">
+				<div id="fileinputs">
+					<div></div>
+				</div>
+				Open Image [O]
+			</li>
+			
+			<li id="tool_save">
+				<div></div>
+				Save Image [S]
+			</li>
+			
+			<li id="tool_docprops">
+				<div></div>
+				Document Properties [I]
+			</li>
+		</ul>
+		
+		<p>
+			<a href="http://svg-edit.googlecode.com/" target="_blank">
+				SVG-edit Home Page
+			</a>
+		</p>
+
+	</div>
 </div>
 
+
+
 <div id="tools_top" class="tools_panel">
 	
-	<!-- File-like buttons: New, Save, Source -->
-	<div id="file_panel">
-		<div class="push_button" id="tool_clear" title="New Image [N]"></div>
-		
-		<div id="fileinputs" class="push_button">
-			<div id="tool_open" title="Open Image [O]" ></div>
-		</div>
-  	
-		<div class="push_button" id="tool_save" title="Save Image [S]"></div>
-		<div class="push_button" id="tool_docprops" title="Document Properties [I]"></div>
+	<div id="editor_panel">
 		<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>
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index ea734091..389b7272 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -723,6 +723,34 @@ function svg_edit_setup() {
 		return true;
 	};
 	
+	(function() {
+		var button = $('#main_button');
+		var list = $('#main_menu');
+		var on_button = false;
+		$().mouseup(function(evt) {
+			if(!on_button) {
+				button.removeClass('down');
+				list.hide();
+			}
+			on_button = false;
+		});
+		
+		button.bind('mousedown',function() {
+			if (!button.hasClass('down')) {
+				button.addClass('down');
+				list.show();
+				on_button = true;
+			} else {
+				button.removeClass('down');
+// 				list.hide();
+			}
+		}).hover(function() {
+			on_button = true;
+		}).mouseout(function() {
+			on_button = false;
+		});
+	}());
+	
 	var addDropDown = function(elem, callback, dropUp) {
 		var button = $(elem).find('button');
 		var list = $(elem).find('ul');
@@ -1220,7 +1248,7 @@ function svg_edit_setup() {
 		
 		$.resizeSvgIcons({
 			'.flyout_arrow_horiz svg, .flyout_arrow_horiz img': size_num / 3,
-			'#logo a > svg, #logo a > img': size_num * 1.3
+			'#logo > svg, #logo > img': size_num * 1.3
 		});
 		if(size != 's') {
 			$.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
@@ -1243,7 +1271,7 @@ function svg_edit_setup() {
 				'margin': {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
 			},
 			"#tools_top": {
-				'left': {s: '27px', l: '50px', xl: '70px'},
+				'left': {s: '35px', l: '50px', xl: '70px'},
 				'height': {s: '50px', l: '88px', xl: '125px'}
 			},
 			"#tools_left": {
@@ -2047,15 +2075,15 @@ function svg_edit_setup() {
 			{sel:'#tool_text', fn: clickText, evt: 'click', key: 7},
 			{sel:'#tool_image', fn: clickImage, evt: 'mouseup', key: 8},
 			{sel:'#tool_zoom', fn: clickZoom, evt: 'mouseup', key: 9},
-			{sel:'#tool_clear', fn: clickClear, evt: 'click', key: [modKey+'N', true]},
-			{sel:'#tool_save', fn: function() { editingsource?saveSourceEditor():clickSave()}, evt: 'click', key: [modKey+'S', true]},
-			{sel:'#tool_open', fn: clickOpen, evt: 'click', key: [modKey+'O', true]},
+			{sel:'#tool_clear', fn: clickClear, evt: 'mouseup', key: [modKey+'N', true]},
+			{sel:'#tool_save', fn: function() { editingsource?saveSourceEditor():clickSave()}, evt: 'mouseup', key: [modKey+'S', true]},
+			{sel:'#tool_open', fn: clickOpen, evt: 'mouseup', key: [modKey+'O', true]},
 			{sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]},
 			{sel:'#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]},
 			{sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true},
 			{sel:'#tool_source_save', fn: saveSourceEditor, evt: 'click'},
 			{sel:'#tool_docprops_save', fn: saveDocProperties, evt: 'click'},
-			{sel:'#tool_docprops', fn: showDocProperties, evt: 'click', key: [modKey+'I', true]},
+			{sel:'#tool_docprops', fn: showDocProperties, evt: 'mouseup', key: [modKey+'I', true]},
 			{sel:'#tool_delete,#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true]},
 			{sel:'#tool_reorient', fn: reorientPath, evt: 'click'},
 			{sel:'#tool_node_link', fn: linkControlPoints, evt: 'click'},
@@ -2228,7 +2256,7 @@ function svg_edit_setup() {
 				reader.readAsText(this.files[0]);
 			}
 		});
-		$("#fileinputs").show().prepend(inp);
+		$("#tool_open").show().prepend(inp);
 		
 		// This doesn't appear to be necessary...
 		svgCanvas.setCustomHandlers( {open: fileOpen} );
@@ -2303,13 +2331,13 @@ function svg_edit_setup() {
 			'arrow_down':'dropdown.gif'
 		},
 		placement: {
-			'#logo a':'logo',
+			'#logo':'logo',
 		
-			'#tool_clear,#layer_new':'new_image',
-			'#tool_save':'save',
-			'#tool_open':'open',
+			'#tool_clear div,#layer_new':'new_image',
+			'#tool_save div':'save',
+			'#tool_open div div':'open',
 			'#tool_source':'source',
-			'#tool_docprops':'docprops',
+			'#tool_docprops > div':'docprops',
 			'#tool_wireframe':'wireframe',
 			
 			'#tool_undo':'undo',
@@ -2356,14 +2384,15 @@ function svg_edit_setup() {
 			'#tool_source_cancel,#tool_docprops_cancel':'cancel',
 			
 			'.flyout_arrow_horiz':'arrow_right',
-			'.dropdown button':'arrow_down',
+			'.dropdown button, #main_button .dropdown':'arrow_down',
 			'#palette .palette_item:first, #fill_bg, #stroke_bg':'no_color'
 		},
 		resize: {
-			'#logo a .svg_icon': 32,
+			'#logo .svg_icon': 32,
 			'.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,
 			'.toolbar_button button .svg_icon':16
 		},