From c4b5fa1430c71025e707ce4cf585d3960e5a60c1 Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Fri, 6 Nov 2009 21:24:00 +0000
Subject: [PATCH] Fixed many of the remaining todos for SVG-icons

git-svn-id: http://svg-edit.googlecode.com/svn/branches/transformlist@913 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/images/svg_edit_icons.svg | 144 +++++++++++++++++++++++++++++++
 editor/svg-editor-svgicons.html  | 131 +++++++++++++++++++++-------
 2 files changed, 244 insertions(+), 31 deletions(-)

diff --git a/editor/images/svg_edit_icons.svg b/editor/images/svg_edit_icons.svg
index ac922005..a58442c8 100644
--- a/editor/images/svg_edit_icons.svg
+++ b/editor/images/svg_edit_icons.svg
@@ -380,6 +380,28 @@
 	</svg>
 </g>
 
+<g id="open">
+<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <defs>
+  <linearGradient y2="0.91406" x2="0.65234" y1="0.14063" x1="0.42578" id="svg_76">
+   <stop stop-opacity="1" stop-color="#81bbf4" offset="0"/>
+   <stop stop-opacity="1" stop-color="#376eb7" offset="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <rect x="1.65" y="3.75" width="9.8" height="16.72712" id="svg_98" fill="#c0c0c0" stroke="#606060"/>
+  <rect stroke-width="0" stroke="#606060" fill="#a0a0a0" id="svg_88" height="14.17459" width="6.39585" y="4.9758" x="2.89542"/>
+  <path d="m18.62576,4.54365l0,6.91443l-9.9395,0l-0.08643,-10.11236l6.828,0l3.19792,3.19793z" id="svg_99" fill="#e0e0e0" stroke="#404040"/>
+  <title>Layer 1</title>
+  <path d="m2.95,20.53644l1.65,-12.03644l16.2,0l-1.5,12l-16.35,0.03643z" id="svg_97" fill="url(#svg_76)" stroke="#285582"/>
+  <line fill="none" stroke="#606060" id="svg_89" y2="4.28436" x2="13.95851" y1="4.28436" x1="10.32844"/>
+  <line fill="none" stroke="#606060" id="svg_91" y2="6.53155" x2="14.82282" y1="6.53155" x1="10.32844"/>
+  <path stroke-width="0" stroke="#606060" fill="#ffffff" id="svg_100" d="m15.25895,1.95069l-0.00401,2.85225l2.89558,0.00004l-2.89157,-2.85229z"/>
+ </g>
+</svg>
+</g>
+
 <g id="docprops">
 	<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 	 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
@@ -627,6 +649,96 @@
 </svg>
 </g>
 
+<g id="align_left">
+	<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+	 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+	 <g>
+	  <title>Layer 1</title>
+	  <rect stroke="#606060" fill="#ffffff" id="svg_4" height="7" width="12" y="2.5" x="2.5"/>
+	  <rect stroke-width="0" stroke="#606060" fill="#c0c0c0" id="svg_5" height="4" width="11" y="4" x="2"/>
+	  <rect id="svg_6" stroke="#606060" fill="#ffffff" height="7" width="18" y="12.5" x="2.5"/>
+	  <rect id="svg_7" stroke-width="0" stroke="#606060" fill="#c0c0c0" height="4" width="17" y="14" x="2"/>
+	  <rect stroke="#c15909" fill="#ef9a23" id="svg_2" height="40" width="2" y="-10" x="1.5"/>
+	 </g>
+	</svg>
+</g>
+
+<g id="align_center">
+	<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+	 <g>
+	  <rect x="1.5" y="12.5" width="18" height="7" fill="#c0c0c0" stroke="#606060" id="svg_6"/>
+	  <rect x="4.5" y="2.5" width="12" height="7" id="svg_4" fill="#c0c0c0" stroke="#606060"/>
+	  <rect x="9.5" y="-10" width="2" height="40" id="svg_2" fill="#ef9a23" stroke="#c15909"/>
+	  <title>Layer 1</title>
+	  <rect x="2.5" y="13.5" width="16" height="5" fill="none" stroke="#ffffff" id="svg_7"/>
+	  <rect x="5.5" y="3.5" width="10" height="5" id="svg_5" fill="none" stroke="#ffffff"/>
+	 </g>
+	</svg>
+</g>
+
+<g id="align_right">
+	<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+	 <g>
+	  <title>Layer 1</title>
+	  <rect x="7.5" y="2.5" width="12" height="7" id="svg_4" fill="#ffffff" stroke="#606060"/>
+	  <rect x="9" y="4" width="11" height="4" id="svg_5" fill="#c0c0c0" stroke="#606060" stroke-width="0"/>
+	  <rect x="1.5" y="12.5" width="18" height="7" fill="#ffffff" stroke="#606060" id="svg_6"/>
+	  <rect x="3" y="14" width="17" height="4" fill="#c0c0c0" stroke="#606060" stroke-width="0" id="svg_7"/>
+	  <rect x="18.5" y="-10" width="2" height="40" id="svg_2" fill="#ef9a23" stroke="#c15909"/>
+	 </g>
+	</svg>
+</g>
+
+<g id="align_top">
+	<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+	 <g>
+	  <title>Layer 1</title>
+	  <g transform="rotate(90, 11, 11)" id="svg_1">
+	   <rect x="2.5" y="3.5" width="12" height="7" id="svg_4" fill="#ffffff" stroke="#606060"/>
+	   <rect x="2" y="5" width="11" height="4" id="svg_5" fill="#c0c0c0" stroke="#606060" stroke-width="0"/>
+	   <rect x="2.5" y="13.5" width="18" height="7" fill="#ffffff" stroke="#606060" id="svg_6"/>
+	   <rect x="2" y="15" width="17" height="4" fill="#c0c0c0" stroke="#606060" stroke-width="0" id="svg_7"/>
+	   <rect x="1.5" y="-9" width="2" height="40" id="svg_2" fill="#ef9a23" stroke="#c15909"/>
+	  </g>
+	 </g>
+	</svg>
+</g>
+
+<g id="align_middle">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(90, 12, 11.5)" id="svg_1">
+   <rect id="svg_6" stroke="#606060" fill="#c0c0c0" height="7" width="18" y="14" x="3"/>
+   <rect stroke="#606060" fill="#c0c0c0" id="svg_4" height="7" width="12" y="4" x="6"/>
+   <rect stroke="#c15909" fill="#ef9a23" id="svg_2" height="40" width="2" y="-8.5" x="11"/>
+   <rect id="svg_7" stroke="#ffffff" fill="none" height="5" width="16" y="15" x="4"/>
+   <rect stroke="#ffffff" fill="none" id="svg_5" height="5" width="10" y="5" x="7"/>
+  </g>
+ </g>
+</svg>
+</g>
+
+<g id="align_bottom">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(90, 11, 11)" id="svg_1">
+   <rect stroke="#606060" fill="#ffffff" id="svg_4" height="7" width="12" y="2.5" x="7.5"/>
+   <rect stroke-width="0" stroke="#606060" fill="#c0c0c0" id="svg_5" height="4" width="11" y="4" x="9"/>
+   <rect id="svg_6" stroke="#606060" fill="#ffffff" height="7" width="18" y="12.5" x="1.5"/>
+   <rect id="svg_7" stroke-width="0" stroke="#606060" fill="#c0c0c0" height="4" width="17" y="14" x="3"/>
+   <rect stroke="#c15909" fill="#ef9a23" id="svg_2" height="40" width="2" y="-10" x="18.5"/>
+  </g>
+ </g>
+</svg>
+</g>
+
 <g id="eye">
 <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
  <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
@@ -657,6 +769,38 @@
 	</svg>
 </g>
 
+<g id="ok">
+	<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+	 <defs>
+	  <linearGradient y2="0.65625" x2="0.94141" y1="0.43359" x1="0.42969" id="svg_106">
+	   <stop stop-opacity="1" stop-color="#38ff45" offset="0"/>
+	   <stop stop-opacity="1" stop-color="#127c0c" offset="1"/>
+	  </linearGradient>
+	 </defs>
+	 <g>
+	  <title>Layer 1</title>
+	  <path transform="rotate(45, 12, 10)" stroke="#005500" fill="url(#svg_106)" id="svg_101" d="m7.9,15.9l4.9,-0.05l0,-13.75l3.8,0l0,17.6l-8.7,0l0,-3.8z"/>
+	 </g>
+	</svg>
+</g>
+
+<g id="cancel">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <defs>
+  <linearGradient y2="0.65625" x2="0.94141" y1="0.43359" x1="0.42969" id="svg_9">
+   <stop stop-opacity="1" stop-color="#ff3838" offset="0"/>
+   <stop stop-opacity="1" stop-color="#7a0c0c" offset="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <title>Layer 1</title>
+  <path stroke="#550000" fill="url(#svg_9)" id="svg_101" d="m2.10526,10.52632l7.36842,0l0,-7.36842l3.68421,0l0,7.36842l7.36842,0l0,3.68421l-7.36842,0l0,7.36842l-3.68421,0l0,-7.36842l-7.36842,0l0,-3.68421z" transform="rotate(45, 11.3, 12.3)"/>
+ </g>
+</svg>
+</g>
+
 <g id="svg_eof"/>
 
 </svg>
\ No newline at end of file
diff --git a/editor/svg-editor-svgicons.html b/editor/svg-editor-svgicons.html
index 1ac6d8a4..c455393d 100644
--- a/editor/svg-editor-svgicons.html
+++ b/editor/svg-editor-svgicons.html
@@ -102,27 +102,47 @@
 #svg_editor #tool_fhrect,
 #svg_editor #tool_circle,  
 #svg_editor #tool_ellipse,
-#svg_editor #tool_fhellipse {
+#svg_editor #tool_fhellipse,
+#svg_editor #tool_alignleft,
+#svg_editor #tool_aligncenter,
+#svg_editor #tool_alignright,
+#svg_editor #tool_aligntop,
+#svg_editor #tool_alignmiddle,
+#svg_editor #tool_alignbottom {
 	background: none;
 }
 
+button#tool_source_save,
+button#tool_source_cancel,
+button#tool_docprops_save,
+button#tool_docprops_cancel {
+    border:1px solid #dedede;
+    line-height:130%;
+	background: #E8E8E8 none;
+    padding:5px 10px 5px 7px; /* Firefox */
+    line-height:17px; /* Safari */
+}
+
+.toolbar_button button .svg_icon {
+    margin:0 3px -3px 0 !important;
+    padding:0;
+    border:none;
+    width:16px;
+    height:16px;
+}
+
 </style>
 <script>
 /*
 TODO for SVG icons:
 
-- Make alignment SVG icons
-- Make. "open" SVG icon
-- Convert source-view icons
-- Other sizing tweaks
-- Make layer icons bigger for l and xl (not s) 
-
+- More sizing tweaks
 - Make layer eye SVG icon work when making new layers
 - Make transparency icon clone to fill/stroke box when clicked
 
 */
 $(function() {
-	$.svgIcons('images/svg_edit_icons.svgz', {
+	$.svgIcons('images/svg_edit_icons.svg', {
 		w:24, h:24,
 		id_match: false,
 		no_img: true,
@@ -130,6 +150,7 @@ $(function() {
 		fallback:{
 			'new_image':'clear.png',
 			'save':'save.png',
+			'open':'open.png',
 			'source':'source.png',
 			'docprops':'document-properties.png',
 			'wireframe':'wireframe.png',
@@ -157,10 +178,20 @@ $(function() {
 			'ungroup':'shape_ungroup.png',
 			'move_top':'move_top.png',
 			'move_bottom':'move_bottom.png',
+			
+			'align_left':'align-left.png',
+			'align_center':'align-center',
+			'align_right':'align-right',
+			'align_top':'align-top',
+			'align_middle':'align-middle',
+			'align_bottom':'align-bottom',
 
 			'go_up':'go-up.png',
 			'go_down':'go-down.png',
 
+			'ok':'save.png',
+			'cancel':'cancel.png',
+			
 			'arrow_right':'flyouth.png',
 			'arrow_down':'dropdown.gif'
 		},
@@ -169,6 +200,7 @@ $(function() {
 		
 			'#tool_clear,#layer_new':'new_image',
 			'#tool_save':'save',
+			'#tool_open':'open',
 			'#tool_source':'source',
 			'#tool_docprops':'docprops',
 			'#tool_wireframe':'wireframe',
@@ -197,10 +229,20 @@ $(function() {
 			'#tool_group':'group',
 			'#tool_ungroup':'ungroup',
 			
+			'#tool_alignleft':'align_left',
+			'#tool_aligncenter':'align_center',
+			'#tool_alignright':'align_right',
+			'#tool_aligntop':'align_top',
+			'#tool_alignmiddle':'align_middle',
+			'#tool_alignbottom':'align_bottom',
+			
 			'#layer_up':'go_up',
 			'#layer_down':'go_down',
 			'#layerlist td.layervis':'eye',
 			
+			'#tool_source_save,#tool_docprops_save':'ok',
+			'#tool_source_cancel,#tool_docprops_cancel':'cancel',
+			
 			'.flyout_arrow_horiz':'arrow_right',
 			'.dropdown button':'arrow_down',
 			'#palette .palette_item:first':'no_color'
@@ -213,6 +255,10 @@ $(function() {
 			'#palette .svg_icon': 16
 		},
 		callback: function(icons) {
+			$('.toolbar_button button .svg_icon').each(function() {
+				$(this).parent().prepend(this);
+			});
+			
 			var tleft = $('#tools_left')
 			var min_height = tleft.offset().top + tleft.outerHeight();
 			if($(window).height() < min_height) {
@@ -305,18 +351,22 @@ $(function() {
 	$('#iconsize').change(function() {
 		var size = this.value;
 		var icon_sizes = { s:16, m:24, l:32, xl:48 };
+		var size_num = icon_sizes[size];
 		
 		// Change icon size
 		$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button')
 		.find('.svg_icon').each(function() {
-			this.setAttribute('width',icon_sizes[size]);
-			this.setAttribute('height',icon_sizes[size]);
+			this.setAttribute('width',size_num);
+			this.setAttribute('height',size_num);
 		});
 		
 		$.resizeSvgIcons({
-			'.flyout_arrow_horiz .svg_icon': icon_sizes[size] / 3,
-			'#logo .svg_icon': icon_sizes[size] * 1.3
+			'.flyout_arrow_horiz .svg_icon': size_num / 3,
+			'#logo .svg_icon': size_num * 1.3
 		});
+		if(size != 's') {
+			$.resizeSvgIcons({'#layerbuttons .svg_icon': size_num * .6});
+		}
 		
 		// Note that all rules will be prefixed with '#svg_editor' when parsed
 		var cssResizeRules = {
@@ -335,7 +385,8 @@ $(function() {
 				'margin': {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
 			},
 			"#tools_top": {
-				'left': {s: '27px', l: '50px', xl: '70px'}
+				'left': {s: '27px', l: '50px', xl: '70px'},
+				'height': {s: '50px', l: '88px', xl: '125px'}
 			},
 			"#tools_left": {
 				'width': {s: '26px', l: '34px', xl: '42px'},
@@ -344,26 +395,32 @@ $(function() {
 			"div#workarea": {
 				'left': {s: '27px', l: '46px', xl: '65px'},
 				'top': {s: '50px', l: '88px', xl: '125px'},
-				'bottom': {s: '50px', l: '60px', xl: '65px'}
+				'bottom': {s: '52px', l: '68px', xl: '75px'}
 			},
 			"#tools_bottom": {
-				'left': {s: '50px', l: '56', xl: '65px'},
-				'height': {s: '50px', l: '56', xl: '65px'}
+				'left': {s: '27px', l: '46px', xl: '65px'},
+				'height': {s: '52px', l: '68px', xl: '75px'}
 			},
 			"#tools_top input, #tools_bottom input": {
 				'margin-top': {s: '2px', l: '4px', xl: '5px'},
-				'height': {s: '12px', l: '29px', xl: '45px'},
+				'height': {s: 'auto', l: 'auto', xl: 'auto'},
 				'border': {s: '1px solid #555', l: 'auto', xl: 'auto'},
-				'font-size': {s: '.9em', l: '1.7em', xl: '2.5em'}
+				'font-size': {s: '.9em', l: '2em', xl: '2.5em'}
 			},
 			"#tools_bottom input": {
 				'margin-top': {s: '6px', l: '4px', xl: '5px'},
 			},
+			"#tools_bottom span, #copyright, #tools_bottom .label": {
+				'font-size': {l: '1.5em', xl: '2em'}
+			},
+			"#tools_bottom_2": {
+				'width': {l: '295px', xl: '355px'}
+			},
 			"#tools_top > div, #tools_top": {
 				'line-height': {s: '17px', l: '34px', xl: '50px'}
 			}, 
 			".dropdown button": {
-				'height': {s: '18px', l: '34px', xl: '50px'}
+				'height': {s: '18px', l: '34px', xl: '40px'}
 			},
 			"#tools_top label, #tools_bottom label": {
 				'font-size': {s: '1em', l: '1.5em', xl: '2em'},
@@ -374,7 +431,18 @@ $(function() {
 			},
 			"#sidepanels": {
 				'top': {s: '50px', l: '88px', xl: '125px'},
-				'bottom': {s: '50px', l: '58px', xl: '65px'},
+				'bottom': {s: '52px', l: '68px', xl: '65px'},
+			},
+			'#layerbuttons': {
+				'width': {l: '130px', xl: '175px'},
+				'height': {l: '24px', xl: '30px'}
+			},
+			'#layerlist': {
+				'width': {l: '128px', xl: '150px'}
+			},			
+			'.layer_button': {
+				'width': {l: '19px', xl: '28px'},
+				'height': {l: '19px', xl: '28px'}
 			},
 			".flyout_arrow_horiz": {
 				'left': {s: '-5px', l: '5px', xl: '14px'},
@@ -382,13 +450,14 @@ $(function() {
 			},
 			"input.spin-button": {
 				'background-image': {l: "url('images/spinbtn_updn_big.png')", xl: "url('images/spinbtn_updn_big.png')"},
-				'background-position': {l: '100% -3px', xl: '100% 4px'}
+				'background-position': {l: '100% -5px', xl: '100% -2px'},
+				'padding-right': {l: '24px', xl: '24px' }
 			},
 			"input.spin-button.up": {
-				'background-position': {l: '100% -43px', xl: '100% -36px'}
+				'background-position': {l: '100% -45px', xl: '100% -42px'}
 			},
 			"input.spin-button.down": {
-				'background-position': {l: '100% -83px', xl: '100% -76px'}
+				'background-position': {l: '100% -85px', xl: '100% -82px'}
 			}
 		};
 		
@@ -421,9 +490,9 @@ $(function() {
 	});
 	
 	// For quick testing
-// 	window.setTimeout(function() {
-// 		$('#iconsize').val('xl').change();
-// 	},1000);
+	window.setTimeout(function() {
+		$('#iconsize').val('s').change();
+	},1000);
 });
 </script>
 
@@ -492,7 +561,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<!-- File-like buttons: New, Save, Source -->
 	<div id="file_panel">
 		<div class="push_button" id="tool_clear" title="New Image [N]"></div>
-		<img style="display:none" class="push_button" id="tool_open" src="images/open.png" title="Open Image [O]" alt="Open"/>
+		<div class="push_button" id="tool_open" title="Open Image [O]" style="display:none"></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 class="push_button" id="tool_source" title="Edit Source [U]"></div>
@@ -704,13 +773,13 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<div id="tools_bottom_2">
 		<table>
 		<tr>
-			<td id="fill_tool_bottom">fill:</td>
+			<td id="fill_tool_bottom" class="label">fill:</td>
 			<td><div id="fill_color" class="color_block"  title="Change fill color"></div></td>
-			<td colspan="3"><div id="fill_opacity">100%</div></td>
+			<td colspan="3"><div id="fill_opacity" class="label">100%</div></td>
 		</tr><tr>
-			<td id="stroke_tool_bottom">stroke:</td>
+			<td id="stroke_tool_bottom" class="label">stroke:</td>
 			<td><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
-			<td><div id="stroke_opacity">100 %</div></td>
+			<td><div id="stroke_opacity" class="label">100 %</div></td>
 			<td>
 				<input id="stroke_width" title="Change stroke width" size="2" value="5" type="text" data-attr="Stroke Width"/>
 			</td>