Adaptação do Painel de botoes do editor vetorial para OL3

Edmar Moretti
1 parent f8db4165
Showing 1 changed file with 27 additions and 53 deletions Show diff stats
ferramentas/editorol/editorol.js
@@ -1726,60 +1726,33 @@ i3GEO.editorOL =
 					draggable : true,
 					close : true
 				});
-				//TODO ajustar o layout dos botoes para os novos padroes
 				var ins =
 					"" + '<p class=paragrafo ><b>Estilos (utilize a cor no formato r,g,b):</b></p>'
-						+ '<table class=lista7 >'
-						+ '	<tr>'
-						+ '		<td>Cor do contorno</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'strokeColor\',\'i3GEOEditorOLcorContorno\')" type="text" style="cursor:text" id="i3GEOEditorOLcorContorno" size="12" value="'
-						+ i3GEO.editorOL.simbologia.strokeColor
-						+ '" /></td><td>';
-				if (i3GEO.configura) {
-					ins +=
-						'<img alt="aquarela.gif" style=cursor:pointer src="' + i3GEO.configura.locaplic
-							+ '/imagens/aquarela.gif" onclick="i3GEO.util.abreCor(\'\',\'i3GEOEditorOLcorContorno\');" />';
-				}
-				ins +=
-					"" + '		</td>'
-						+ '	</tr>'
-						+ '	<tr>'
-						+ '		<td>Cor do preenchimento</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'fillColor\',\'i3GEOEditorOLcorPre\')" type="text" style="cursor:text" id="i3GEOEditorOLcorPre" size="12" value="'
-						+ i3GEO.editorOL.simbologia.fillColor
-						+ '" /></td><td>';
-				if (i3GEO.configura) {
-					ins +=
-						'<img alt="aquarela.gif" style=cursor:pointer src="' + i3GEO.configura.locaplic
-							+ '/imagens/aquarela.gif" onclick="i3GEO.util.abreCor(\'\',\'i3GEOEditorOLcorPre\');" />';
-				}
-				ins +=
-					"" + '		</td>'
-						+ '	</tr>'
-						+ '	<tr>'
-						+ '		<td>Cor da fonte</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'fontColor\',\'i3GEOEditorOLcorFonte\')" type="text" style="cursor:text" id="i3GEOEditorOLcorFonte" size="12" value="'
-						+ i3GEO.editorOL.simbologia.fontColor
-						+ '" /></td><td>';
-				if (i3GEO.configura) {
-					ins +=
-						'<img alt="aquarela.gif" style=cursor:pointer src="' + i3GEO.configura.locaplic
-							+ '/imagens/aquarela.gif" onclick="i3GEO.util.abreCor(\'\',\'i3GEOEditorOLcorFonte\');" />';
-				}
-				ins +=
-					"" + '		</td>'
-						+ '	</tr>'
-						+ '	<tr>'
-						+ '		<td>Tamanho da fonte</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'fontSize\',\'i3GEOEditorOLfontsize\')" type="text" style="cursor:text" id="i3GEOEditorOLfontsize" size="3" value="' + i3GEO.editorOL.simbologia.fontSize
-						+ '" /></td><td></td>'
-						+ '	</tr>'
-						+ '	<tr>'
-						+ '		<td>Opacidade (de 0 a 1)</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'opacidade\',\'i3GEOEditorOLopacidade\')" type="text" style="cursor:text" id="i3GEOEditorOLopacidade" size="3" value="'
-						+ i3GEO.editorOL.simbologia.opacidade
-						+ '" /></td><td></td>'
-						+ '	</tr>'
-						+ '	<tr>'
-						+ '		<td>Largura da linha/contorno</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'strokeWidth\',\'i3GEOEditorOLlarguraLinha\')" type="text" style="cursor:text" id="i3GEOEditorOLlarguraLinha" size="2" value="'
-						+ i3GEO.editorOL.simbologia.strokeWidth
-						+ '" /></td><td></td>'
-						+ '	</tr>'
+					+ '<p class=paragrafo >Cor do contorno</p>'
+					+ '<div class="i3geoForm100 i3geoFormIconeAquarela" >'
+					+ '<input onchange="i3GEO.editorOL.mudaSimbolo(\'strokeColor\',\'i3GEOEditorOLcorContorno\');return false;" type="text" id="i3GEOEditorOLcorContorno" value="' + i3GEO.editorOL.simbologia.strokeColor + '" />'
+					+ '</div>'
+					+ '<p class=paragrafo >Cor do preenchimento</p>'
+					+ '<div class="i3geoForm100 i3geoFormIconeAquarela" >'
+					+ '<input onchange="i3GEO.editorOL.mudaSimbolo(\'fillColor\',\'i3GEOEditorOLcorPre\');return false;" type="text" id="i3GEOEditorOLcorPre" value="' + i3GEO.editorOL.simbologia.fillColor + '" />'
+					+ '</div>'
+					+ '<p class=paragrafo >Cor da fonte</p>'
+					+ '<div class="i3geoForm100 i3geoFormIconeAquarela" >'
+					+ '<input onchange="i3GEO.editorOL.mudaSimbolo(\'fontColor\',\'i3GEOEditorOLcorFonte\');return false;" type="text" id="i3GEOEditorOLcorFonte" value="' + i3GEO.editorOL.simbologia.fontColor + '" />'
+					+ '</div>'
+					+ '<p class=paragrafo >Tamanho da fonte</p>'
+					+ '<div class="i3geoForm100 i3geoFormIconeEdita" >'
+					+ '<input onchange="i3GEO.editorOL.mudaSimbolo(\'fontSize\',\'i3GEOEditorOLfontsize\');return false;" type="text" id="i3GEOEditorOLfontsize" value="' + i3GEO.editorOL.simbologia.fontSize + '" />'
+					+ '</div>'
+					+ '<p class=paragrafo >Opacidade (de 0 a 1)</p>'
+					+ '<div class="i3geoForm100 i3geoFormIconeEdita" >'
+					+ '<input onchange="i3GEO.editorOL.mudaSimbolo(\'opacidade\',\'i3GEOEditorOLopacidade\');return false;" type="text" id="i3GEOEditorOLopacidade" value="' + i3GEO.editorOL.simbologia.opacidade + '" />'
+					+ '</div>'
+					+ '<p class=paragrafo >Largura da linha/contorno</p>'
+					+ '<div class="i3geoForm100 i3geoFormIconeEdita" >'
+					+ '<input onchange="i3GEO.editorOL.mudaSimbolo(\'strokeWidth\',\'i3GEOEditorOLlarguraLinha\');return false;" type="text" id="i3GEOEditorOLlarguraLinha" value="' + i3GEO.editorOL.simbologia.strokeWidth + '" />'
+					+ '</div>';
+
 						//TODO incluir propriedades de uma figura
 						/*
 						+ '	<tr>'
@@ -1795,7 +1768,7 @@ i3GEO.editorOL =
 						+ '" /></td><td></td>'
 						+ '	</tr>'
 						*/
-						+ '</table>';
+
 						//TODO implementar ao atualizar OL3
 						/*
 						+ '<br />'
@@ -1851,6 +1824,7 @@ i3GEO.editorOL =
 						i3GEO.janela.minimiza("panelpropriedadesEditor");
 					};
 				}
+				i3GEO.util.aplicaAquarela("panelpropriedadesEditor");
 			}
 			YAHOO.editorOL.container.panel.show();
 			temp = $i("panelpropriedadesEditor").getElementsByTagName("div");
	@@ -1726,60 +1726,33 @@ i3GEO.editorOL =		@@ -1726,60 +1726,33 @@ i3GEO.editorOL =
1726	draggable : true,	1726	draggable : true,
1727	close : true	1727	close : true
1728	});	1728	});
1729	- //TODO ajustar o layout dos botoes para os novos padroes
1730	var ins =	1729	var ins =
1731	"" + '<p class=paragrafo ><b>Estilos (utilize a cor no formato r,g,b):</b></p>'	1730	"" + '<p class=paragrafo ><b>Estilos (utilize a cor no formato r,g,b):</b></p>'
1732	- + '<table class=lista7 >'
1733	- + ' <tr>'
1734	- + ' <td>Cor do contorno</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'strokeColor\',\'i3GEOEditorOLcorContorno\')" type="text" style="cursor:text" id="i3GEOEditorOLcorContorno" size="12" value="'
1735	- + i3GEO.editorOL.simbologia.strokeColor
1736	- + '" /></td><td>';
1737	- if (i3GEO.configura) {
1738	- ins +=
1739	- '<img alt="aquarela.gif" style=cursor:pointer src="' + i3GEO.configura.locaplic
1740	- + '/imagens/aquarela.gif" onclick="i3GEO.util.abreCor(\'\',\'i3GEOEditorOLcorContorno\');" />';
1741	- }
1742	- ins +=
1743	- "" + ' </td>'
1744	- + ' </tr>'
1745	- + ' <tr>'
1746	- + ' <td>Cor do preenchimento</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'fillColor\',\'i3GEOEditorOLcorPre\')" type="text" style="cursor:text" id="i3GEOEditorOLcorPre" size="12" value="'
1747	- + i3GEO.editorOL.simbologia.fillColor
1748	- + '" /></td><td>';
1749	- if (i3GEO.configura) {
1750	- ins +=
1751	- '<img alt="aquarela.gif" style=cursor:pointer src="' + i3GEO.configura.locaplic
1752	- + '/imagens/aquarela.gif" onclick="i3GEO.util.abreCor(\'\',\'i3GEOEditorOLcorPre\');" />';
1753	- }
1754	- ins +=
1755	- "" + ' </td>'
1756	- + ' </tr>'
1757	- + ' <tr>'
1758	- + ' <td>Cor da fonte</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'fontColor\',\'i3GEOEditorOLcorFonte\')" type="text" style="cursor:text" id="i3GEOEditorOLcorFonte" size="12" value="'
1759	- + i3GEO.editorOL.simbologia.fontColor
1760	- + '" /></td><td>';
1761	- if (i3GEO.configura) {
1762	- ins +=
1763	- '<img alt="aquarela.gif" style=cursor:pointer src="' + i3GEO.configura.locaplic
1764	- + '/imagens/aquarela.gif" onclick="i3GEO.util.abreCor(\'\',\'i3GEOEditorOLcorFonte\');" />';
1765	- }
1766	- ins +=
1767	- "" + ' </td>'
1768	- + ' </tr>'
1769	- + ' <tr>'
1770	- + ' <td>Tamanho da fonte</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'fontSize\',\'i3GEOEditorOLfontsize\')" type="text" style="cursor:text" id="i3GEOEditorOLfontsize" size="3" value="' + i3GEO.editorOL.simbologia.fontSize
1771	- + '" /></td><td></td>'
1772	- + ' </tr>'
1773	- + ' <tr>'
1774	- + ' <td>Opacidade (de 0 a 1)</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'opacidade\',\'i3GEOEditorOLopacidade\')" type="text" style="cursor:text" id="i3GEOEditorOLopacidade" size="3" value="'
1775	- + i3GEO.editorOL.simbologia.opacidade
1776	- + '" /></td><td></td>'
1777	- + ' </tr>'
1778	- + ' <tr>'
1779	- + ' <td>Largura da linha/contorno</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'strokeWidth\',\'i3GEOEditorOLlarguraLinha\')" type="text" style="cursor:text" id="i3GEOEditorOLlarguraLinha" size="2" value="'
1780	- + i3GEO.editorOL.simbologia.strokeWidth
1781	- + '" /></td><td></td>'
1782	- + ' </tr>'	1731	+ + '<p class=paragrafo >Cor do contorno</p>'
		1732	+ + '<div class="i3geoForm100 i3geoFormIconeAquarela" >'
		1733	+ + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'strokeColor\',\'i3GEOEditorOLcorContorno\');return false;" type="text" id="i3GEOEditorOLcorContorno" value="' + i3GEO.editorOL.simbologia.strokeColor + '" />'
		1734	+ + '</div>'
		1735	+ + '<p class=paragrafo >Cor do preenchimento</p>'
		1736	+ + '<div class="i3geoForm100 i3geoFormIconeAquarela" >'
		1737	+ + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'fillColor\',\'i3GEOEditorOLcorPre\');return false;" type="text" id="i3GEOEditorOLcorPre" value="' + i3GEO.editorOL.simbologia.fillColor + '" />'
		1738	+ + '</div>'
		1739	+ + '<p class=paragrafo >Cor da fonte</p>'
		1740	+ + '<div class="i3geoForm100 i3geoFormIconeAquarela" >'
		1741	+ + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'fontColor\',\'i3GEOEditorOLcorFonte\');return false;" type="text" id="i3GEOEditorOLcorFonte" value="' + i3GEO.editorOL.simbologia.fontColor + '" />'
		1742	+ + '</div>'
		1743	+ + '<p class=paragrafo >Tamanho da fonte</p>'
		1744	+ + '<div class="i3geoForm100 i3geoFormIconeEdita" >'
		1745	+ + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'fontSize\',\'i3GEOEditorOLfontsize\');return false;" type="text" id="i3GEOEditorOLfontsize" value="' + i3GEO.editorOL.simbologia.fontSize + '" />'
		1746	+ + '</div>'
		1747	+ + '<p class=paragrafo >Opacidade (de 0 a 1)</p>'
		1748	+ + '<div class="i3geoForm100 i3geoFormIconeEdita" >'
		1749	+ + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'opacidade\',\'i3GEOEditorOLopacidade\');return false;" type="text" id="i3GEOEditorOLopacidade" value="' + i3GEO.editorOL.simbologia.opacidade + '" />'
		1750	+ + '</div>'
		1751	+ + '<p class=paragrafo >Largura da linha/contorno</p>'
		1752	+ + '<div class="i3geoForm100 i3geoFormIconeEdita" >'
		1753	+ + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'strokeWidth\',\'i3GEOEditorOLlarguraLinha\');return false;" type="text" id="i3GEOEditorOLlarguraLinha" value="' + i3GEO.editorOL.simbologia.strokeWidth + '" />'
		1754	+ + '</div>';
		1755	+
1783	//TODO incluir propriedades de uma figura	1756	//TODO incluir propriedades de uma figura
1784	/*	1757	/*
1785	+ ' <tr>'	1758	+ ' <tr>'
	@@ -1795,7 +1768,7 @@ i3GEO.editorOL =		@@ -1795,7 +1768,7 @@ i3GEO.editorOL =
1795	+ '" /></td><td></td>'	1768	+ '" /></td><td></td>'
1796	+ ' </tr>'	1769	+ ' </tr>'
1797	*/	1770	*/
1798	- + '</table>';	1771	+
1799	//TODO implementar ao atualizar OL3	1772	//TODO implementar ao atualizar OL3
1800	/*	1773	/*
1801	+ '<br />'	1774	+ '<br />'
	@@ -1851,6 +1824,7 @@ i3GEO.editorOL =		@@ -1851,6 +1824,7 @@ i3GEO.editorOL =
1851	i3GEO.janela.minimiza("panelpropriedadesEditor");	1824	i3GEO.janela.minimiza("panelpropriedadesEditor");
1852	};	1825	};
1853	}	1826	}
		1827	+ i3GEO.util.aplicaAquarela("panelpropriedadesEditor");
1854	}	1828	}
1855	YAHOO.editorOL.container.panel.show();	1829	YAHOO.editorOL.container.panel.show();
1856	temp = $i("panelpropriedadesEditor").getElementsByTagName("div");	1830	temp = $i("panelpropriedadesEditor").getElementsByTagName("div");