Updated to latest jGraduate version, fixes bugs and supports multi-stops/more radial gradient options

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

editor/jgraduate/css/jgraduate.css

@@ -1,7 +1,11 @@
 /* 
  * jGraduate Default CSS
  * 
- * Copyright (c) 2009 Jeff Schiller
+ * Copyright (c) 2010 Jeff Schiller
+ * http://blog.codedread.com/
+ *
+ * Copyright (c) 2010 Alexis Deveria
+ * http://a.deveria.com/
  *
  * Licensed under the Apache License Version 2
  */
@@ -48,14 +52,14 @@ li.jGraduate_tab_current {
 	display: none;
 }
 
-.jGraduate_lgPick {	
+.jGraduate_gradPick {	
 	display: none;
 	border: outset 1px #666;
 	padding: 10px 7px 5px 5px;
 	overflow: auto;
 }
 
-.jGraduate_rgPick {	
+.jGraduate_gradPick {	
 	display: none;
 	border: outset 1px #666;
 	padding: 10px 7px 5px 5px;
@@ -80,6 +84,30 @@ div.jGraduate_GradContainer {
 	background-image: url(../images/map-opacity.png); 
 	background-position: 0px 0px;
 	height: 256px;
+	width: 256px;
+	position: relative;
+}
+
+div.jGraduate_GradContainer div.grad_coord {
+	background: #000;
+	border: 1px solid #fff;
+	z-index: 2;
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	width: 10px;
+	height: 10px;
+	position: absolute;
+	margin: -5px -5px;
+	top: 0;
+	left: 0;
+	text-align: center;
+	font-size: xx-small;
+	line-height: 10px;
+	color: #fff;
+	text-decoration: none;
+	cursor: pointer;
+	-moz-user-select: none;
+	-webkit-user-select: none;
 }
 
 .jGraduate_AlphaArrows {
@@ -98,16 +126,14 @@ div.jGraduate_Opacity {
 	cursor: ew-resize;
 }
 
-div.lg_jGraduate_OpacityField {
+div.jGraduate_StopSlider {
-	position: absolute;
+/*	border: 2px inset #eee;*/
-	bottom: 25px;
+	margin: 0 0 0 -10px;
-	left: 292px;
+	width: 276px;
-}
+	overflow: visible;
-
+	background: #efefef;
-div.jGraduate_Form {
+	height: 45px;
-	float: left;
+	cursor: pointer;
-	width: 140px;
-	margin: -3px 3px 0px 4px;
 }
 
 div.jGraduate_StopSection {
@@ -115,49 +141,8 @@ div.jGraduate_StopSection {
 	text-align: center;
 }
 
-div.jGraduate_RadiusField {
-	
-	text-align: center;
-	float: left;
-}
-
-div.jGraduate_RadiusField input {
-	margin-top: 10px;
-}
-
-.jGraduate_RadiusField .jGraduate_Form_Section {
-	width: 250px;
-	padding: 2px;
-	height: 80px;
-	overflow: visible;
-}
-
-.jGraduate_Form_Section input[type=text] {
-	width: 38px;
-}
-
-.jGraduate_Radius {
-	border:1px solid #BBB;
-	cursor:ew-resize;
-	height:20px;
-	margin-top:14px;
-	position: relative;
-}
 
 
-.jGraduate_RadiusArrows {
-	top: 0;
-	left: 0;
-	position: absolute;
-	margin-top: -10px;
-	margin-left: 250.5px;
-}
-
-
-div.jGraduate_OkCancel {
-	float: left;
-	width: 113px;
-}
 
 input.jGraduate_Ok, input.jGraduate_Cancel {
 	display: block;
@@ -199,7 +184,7 @@ div.jGraduate_Form_Section {
 	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
 	padding: 15px 5px 5px 5px;
-	margin: 2px;
+	margin: 5px 2px;
 	width: 110px;
 	text-align: center;
 	overflow: auto;
@@ -223,17 +208,47 @@ div.jGraduate_stopPicker {
 }
 
 
-.jGraduate_rgPick {
+.jGraduate_gradPick {
-	width: 530px;
+	width: 535px;
 }
 
-.jGraduate_rgPick div.jGraduate_Form {
+.jGraduate_gradPick div.jGraduate_OpacField {
+
+	position: absolute;
+	left: 0;
+	bottom: 5px;
+/*
+	width: 270px;
+
+	left: 284px;
+	width: 266px;
+	height: 200px;
+	top: 167px;
+	margin: -3px 3px 0px 4px;
+*/
+}
+
+.jGraduate_gradPick .jGraduate_Form {
+	float: left;
 	width: 270px;
 	position: absolute;
 	left: 284px;
 	width: 266px;
-	top: 130px;
+	height: 200px;
-	margin: -3px 3px 0px 4px;
+	top: 167px;
+	margin: -3px 3px 0px 10px;
+}
+
+.jGraduate_gradPick .jGraduate_Points {
+	position: static;
+	width: 150px;
+	margin-left: 0;
+}
+
+.jGraduate_SpreadMethod {
+	position: absolute;
+	right: 8px;
+	top: 100px;
 }
 
 .jGraduate_Colorblocks {
@@ -252,19 +267,77 @@ div.jGraduate_stopPicker {
 	float: none;
 }
 
-.jGraduate_rgPick div.jGraduate_StopSection {
+.jGraduate_gradPick div.jGraduate_StopSection {
 	float: left;
 	width: 133px;
-	margin: 0;
+	margin-top: -8px;
 }
 
-.jGraduate_rgPick .jGraduate_OkCancel {
+
-	position: absolute;
+.jGraduate_gradPick .jGraduate_Form_Section {
-	right: 0;
+	padding-top: 9px;
 }
 
-.rg_jGraduate_OpacityField {
+
+.jGraduate_Slider {
+	text-align: center;
+	float: left;
+	width: 100%;
+}
+
+.jGraduate_Slider .jGraduate_Form_Section {
+	border: none;
+	width: 250px;
+	padding: 0 2px;
+	overflow: visible;
+}
+
+.jGraduate_Slider label {
+	display: inline-block;
+	float: left;
+	line-height: 50px;
+	padding: 0;
+}
+
+.jGraduate_Slider label.prelabel {
+	width: 40px;
+	text-align: left;
+}
+
+.jGraduate_SliderBar {
+	width: 140px;
+	float: left;
+	margin-right: 5px;
+	border:1px solid #BBB;
+	height:20px;
+	margin-top:14px;
+	margin-left:5px;
+	position: relative;
+}
+
+div.jGraduate_Slider input {
+	margin-top: 5px;
+}
+
+div.jGraduate_Slider img {
+	top: 0;
+	left: 0;
 	position: absolute;
-	left: 288px;
+	margin-top: -10px;
-	bottom: 24px;
+	cursor:ew-resize;
+}
+
+
+.jGraduate_gradPick .jGraduate_OkCancel {
+	position: absolute;
+	top: 39px;
+	right: 10px;
+	width: 113px;
+
+}
+
+.jGraduate_OpacField {
+	position: absolute;
+	right: -10px;
+	bottom: 0;
 }

editor/svg-editor.js

@@ -3190,7 +3190,7 @@
 				var was_none = false;
 				var pos = elem.position();
 				$("#color_picker")
-					.draggable({cancel:'.jGraduate_tabs,.jGraduate_colPick,.jGraduate_lgPick,.jGraduate_rgPick', containment: 'window'})
+					.draggable({cancel:'.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick', containment: 'window'})
 					.css(curConfig.colorPickerCSS || {'left': pos.left, 'bottom': 50 - pos.top})
 					.jGraduate(
 					{