More markup for the doc properties dialog (still empty)

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

editor/svg-editor.css

@@ -329,6 +329,17 @@ div.color_block {
 	text-align: center;
 }
 
+#svg_docprops #svg_docprops_container {
+	position: absolute;
+	top: 100px;
+	left: 80px;
+	right: 80px;
+	bottom: 100px;
+	background-color: #B0B0B0;
+	opacity: 1.0;
+	text-align: center;
+}
+
 #svg_source_editor #svg_source_textarea {
 	position: relative;
 	width: 95%;
@@ -338,12 +349,12 @@ div.color_block {
 	font-size: 12px;
 }
 
-#svg_source_editor #tool_source_back {
+#svg_source_editor #tool_source_back, #svg_source_editor #tool_docprops_back {
 	text-align: left;
 	padding-left: 20px;
 }
 
-#svg_source_editor button {
+#svg_source_editor button, #svg_docprops button {
 	padding: 5px 2px 6px 28px;
 	margin: 5px 20px 0 0;	
 }
@@ -362,10 +373,10 @@ div.color_block {
 	opacity: 0.6;
 }
 
-#tool_source_save {
+#tool_source_save, #tool_docprops_save {
 	background: #E8E8E8 url(images/save.png) no-repeat 2px 2px;
 }
 
-#tool_source_cancel {
+#tool_source_cancel, #tool_docprops_cancel {
 	background: #E8E8E8 url(images/cancel.png) no-repeat 2px 2px;
 }

editor/svg-editor.html

@@ -47,7 +47,7 @@
 		<img style="display:none" class="tool_button" id="tool_open" src="images/open.png" title="Open Image [O]" alt="Open"/>
 		<img class="tool_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/>
 		<img class="tool_button" id="tool_source" src="images/source.png" title="Edit Source [U]" alt="Source"/>
-		<img class="tool_button" id="tool_docprops" src="images/document-properties.png" title="Document Properties"/>
+		<img class="tool_button" id="tool_docprops" src="images/document-properties.png" title="Document Properties [I]"/>
 	</div>
 
     <!-- History buttons -->
@@ -284,22 +284,6 @@
 	<div id="tool_fhellipse" class="tool_flyout_button" title="Free-Hand Ellipse"></div>
 </div>
 
-<!--
-<div id="tools_stacking" class="tools_flyout_v">
-	<div id="tool_stacktop" class="tool_flyout_button" title="Move to Top [Shift+Up]"></div>
-	<div id="tool_stackbottom" class="tool_flyout_button" title="Move to Bottom [Shift+Down]"></div>
-</div>
-
-<div id="tools_align" class="tools_flyout_v">
-	<div id="tool_aligntop" class="tool_flyout_button" title="Align to Top"></div>
-	<div id="tool_alignbottom" class="tool_flyout_button" title="Align to Bottom"></div>
-	<div id="tool_alignmiddle" class="tool_flyout_button" title="Align to Middle"></div>
-	<div id="tool_alignleft" class="tool_flyout_button" title="Align to Left"></div>
-	<div id="tool_alignright" class="tool_flyout_button" title="Align to Right"></div>
-	<div id="tool_aligncenter" class="tool_flyout_button" title="Align to Center"></div>
-</div>
--->
-
 </div> <!-- svg_editor -->
 
 <div id="svg_source_editor">
@@ -317,7 +301,12 @@
 
 <div id="svg_docprops">
 	<div id="svg_docprops_overlay"></div>
-	<div id="svg_docprops_container"></div>
+	<div id="svg_docprops_container">
+		<div id="tool_docprops_back" class="toolbar_button">
+			<button id="tool_docprops_save">Save</button>
+			<button id="tool_docprops_cancel">Cancel</button>
+		</div>
+	</div>
 </div>
 
 </body>

editor/svg-editor.js

@@ -25,6 +25,7 @@ function svg_edit_setup() {
 	var selectedElement = null;
 	var multiselected = false;
 	var editingsource = false;
+	var docprops = false;
 	var length_attrs = ['x','y','x1','x2','y1','y2','cx','cy','width','height','r','rx','ry','width','height','radius'];
 	var length_types = ['em','ex','px','cm','mm','in','pt','pc','%'];
 	
@@ -612,6 +613,12 @@ function svg_edit_setup() {
 		$('#svg_source_textarea').focus();
 	};
 	
+	var showDocProperties = function(){
+		if (docprops) return;
+		docprops = true;
+		$('#svg_docprops').fadeIn();
+	};
+	
 	var properlySourceSizeTextArea = function(){
 		// TODO: remove magic numbers here and get values from CSS
 		var height = $('#svg_source_container').height() - 80;
@@ -630,9 +637,10 @@ function svg_edit_setup() {
 		hideSourceEditor();
 	};
 
-	var cancelSourceEditor = function() {
+	var cancelOverlays = function() {
-		if (!editingsource) return;
+		if (!editingsource && !docprops) return;
 
+		if (editingsource) {
 			var oldString = svgCanvas.getSvgString();
 			if (oldString != $('#svg_source_textarea').val()) {
 				if( !confirm('Ignore changes made to SVG source?') ) {
@@ -640,6 +648,10 @@ function svg_edit_setup() {
 				}
 			}
 			hideSourceEditor();
+		}
+		else if (docprops) {
+			hideDocProperties();
+		}
 	};
 
 	var hideSourceEditor = function(){
@@ -648,6 +660,11 @@ function svg_edit_setup() {
 		$('#svg_source_textarea').blur();
 	};
 	
+	var hideDocProperties = function(){
+		$('#svg_docprops').hide();
+		docprops = false;
+	};
+	
 	// TODO: add canvas-centering code in here
 	$(window).resize(function(evt) {
 		if (!editingsource) return;
@@ -670,8 +687,9 @@ function svg_edit_setup() {
 	$('#tool_save').click(clickSave);
 	$('#tool_open').click(clickOpen);
 	$('#tool_source').click(showSourceEditor);
-	$('#tool_source_cancel,#svg_source_overlay').click(cancelSourceEditor);
+	$('#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel').click(cancelOverlays);
 	$('#tool_source_save').click(saveSourceEditor);
+	$('#tool_docprops').click(showDocProperties);
 	$('#tool_delete').click(deleteSelected);
 	$('#tool_delete_multi').click(deleteSelected);
 	$('#tool_move_top').click(moveToTopSelected);
@@ -767,9 +785,10 @@ function svg_edit_setup() {
 			[modKey+'z', function(evt){clickUndo();evt.preventDefault();}],
 			[modKey+'y', function(evt){clickRedo();evt.preventDefault();}],
 			[modKey+'u', function(evt){showSourceEditor();evt.preventDefault();}],
+			[modKey+'i', function(evt){showDocProperties();evt.preventDefault();}],
 			[modKey+'c', function(evt){clickClone();evt.preventDefault();}],
 			[modKey+'g', function(evt){clickGroup();evt.preventDefault();}],
-			['esc', cancelSourceEditor, false]
+			['esc', cancelOverlays, false],
 		];
 		
 		$.each(keys,function(i,item) {
@@ -784,7 +803,6 @@ function svg_edit_setup() {
 	
 	setKeyBindings();
 
-	// TODO: fix opacity being updated
 	// TODO: go back to the color boxes having white background-color and then setting
 	//       background-image to none.png (otherwise partially transparent gradients look weird)	
 	var colorPicker = function(elem) {