From e40619cc676bd0d00ca8b0c164bed7c03d148cb3 Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Tue, 10 Nov 2009 18:58:16 +0000
Subject: [PATCH] Spruced up docprops to fix Issue 315, made Image Title appear
 in browser title when available

git-svn-id: http://svg-edit.googlecode.com/svn/branches/transformlist@926 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.css  | 33 ++++++++++++++++++++++++++++-
 editor/svg-editor.html | 48 +++++++++++++++++++++++++++---------------
 editor/svg-editor.js   | 15 +++++++++++--
 3 files changed, 76 insertions(+), 20 deletions(-)

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index b34952a0..83a770e7 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -564,6 +564,7 @@ span.zoom_tool {
 	background-color: #B0B0B0;
 	opacity: 1.0;
 	text-align: center;
+	border: 1px outset #777;
 }
 
 /*
@@ -573,22 +574,52 @@ span.zoom_tool {
 	bottom: 100px;
 */
 
+
+
 #svg_docprops #svg_docprops_container {
 	position: absolute;
 	top: 50px;
 	padding: 10px;
 	background-color: #B0B0B0;
+	border: 1px outset #777;
 	opacity: 1.0;
+/*	width: 450px;*/
+	font-family: Verdana, Helvetica, sans-serif;
+	font-size: .8em;
 }
 
+#tool_docprops_back {
+	margin-left: 1em;
+}
+
+#svg_docprops_container #svg_docprops_docprops, 
+#svg_docprops_container #svg_docprops_prefs {
+	float: left;
+	width: 200px;
+	margin: 5px .7em; 
+}
+
+#svg_docprops_docprops > legend, #svg_docprops_prefs > legend {
+	font-weight: bold;
+	font-size: 1.1em;
+}
+
+
 #svg_docprops_container fieldset {
 	padding: 5px;
 	margin: 5px;
+	border: 1px solid #DDD;
 }
 
 #svg_docprops_container label {
 	display: block;
-	margin-bottom: .2em;
+	margin: .5em;
+}
+
+#svginfo_bg_note {
+	font-size: .9em;
+	font-style: italic;
+	color: #444;
 }
 
 #canvas_title {
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index ed64643b..8e8761f8 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -362,15 +362,16 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<button id="tool_docprops_save">OK</button>
 			<button id="tool_docprops_cancel">Cancel</button>
 
-			<label><span id="svginfo_title">Image title:</span> <input type="text" id="canvas_title" size="24"></label>
+		</div>
 
 
-			<fieldset id="change_background">
-				<legend id="svginfo_change_background">Editor Background</legend>
-				<div id="bg_blocks"></div>
-				<label><span id="svginfo_bg_url">URL:</span> <input type="text" id="canvas_bg_url" size="17"></label>
-			</fieldset>
-			
+		<fieldset id="svg_docprops_docprops">
+			<legend id="svginfo_image_props">Image Properties</legend>
+			<label>
+				<span id="svginfo_title">Title:</span>
+				<input type="text" id="canvas_title" size="24">
+			</label>			
+	
 			<fieldset id="change_resolution">
 				<legend id="svginfo_dim">Canvas Dimensions</legend>
 
@@ -390,17 +391,30 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 					</select>
 				</label>
 			</fieldset>
-			
-			<fieldset id="change_iconsize">
-				<legend id="svginfo_icons">Icon size</legend>
-					<select id="iconsize">
-						<option id="icon_small" value="s">Small</option>
-						<option id="icon_medium" value="m" selected="selected">Medium</option>
-						<option id="icon_large" value="l">Large</option>
-						<option id="icon_xlarge" value="xl">Extra Large</option>
-					</select>
+
+		</fieldset>
+
+		<fieldset id="svg_docprops_prefs">
+			<legend id="svginfo_editor_profs">Editor Preferences</legend>
+
+			<label><span id="svginfo_icons">Icon size:</span>
+				<select id="iconsize">
+					<option id="icon_small" value="s">Small</option>
+					<option id="icon_medium" value="m" selected="selected">Medium</option>
+					<option id="icon_large" value="l">Large</option>
+					<option id="icon_xlarge" value="xl">Extra Large</option>
+				</select>
+			</label>
+
+			<fieldset id="change_background">
+				<legend id="svginfo_change_background">Editor Background</legend>
+				<div id="bg_blocks"></div>
+				<label><span id="svginfo_bg_url">URL:</span> <input type="text" id="canvas_bg_url" size="21"></label>
+				<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
 			</fieldset>
-		</div>
+			
+		</fieldset>
+
 	</div>
 </div>
 
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 2bd8160b..5f4ddc36 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -861,6 +861,8 @@ function svg_edit_setup() {
 		$('#svg_source_textarea').focus();
 	};
 	
+	$('#svg_docprops_container').draggable({cancel:'button,fieldset'});
+	
 	var showDocProperties = function(){
 		if (docprops) return;
 		docprops = true;
@@ -909,12 +911,21 @@ function svg_edit_setup() {
 		}
 		svgCanvas.clearSelection();
 		hideSourceEditor();
-		populateLayers();		
+		populateLayers();
+		setTitle(svgCanvas.getImageTitle());
 	};
 	
+	var setTitle = function(title) {
+		var editor_title = $('title:first').text().split(':')[0];
+		var new_title = editor_title + (title?': ' + title:'');
+		$('title:first').text(new_title);
+	}
+	
 	var saveDocProperties = function(){
 		// set title
-		svgCanvas.setImageTitle($('#canvas_title').val());
+		var new_title = $('#canvas_title').val();
+		setTitle(new_title);
+		svgCanvas.setImageTitle(new_title);
 	
 		// update resolution
 		var x = parseInt($('#canvas_width').val());