Converted more text labels to icons. Also made input boxes lose focus on mousedown in workarea
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1529 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
91b033a470
commit
2103595301
|
|
@ -312,6 +312,37 @@
|
|||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="fill">
|
||||
<svg width="32" height="33" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="svg_5">
|
||||
<path id="svg_4" d="m17.49167,10.97621c6.9875,-0.325 12.1875,2.70833 12.13333,7.36667l-0.325,10.075c-0.75833,4.0625 -2.275,3.0875 -3.03333,0.10833l0.21667,-9.64166c-0.43333,-0.975 -1.08333,-1.625 -1.95,-1.51667" stroke-linejoin="round" stroke="#606060" fill="#c0c0c0"/>
|
||||
<path id="svg_1" d="m2.00055,17.1309l10.72445,-10.72445l12.67445,12.13279l-3.52056,0.05389l-9.15389,9.26223l-10.72445,-10.72445z" stroke-linejoin="round" stroke="#000000" fill="#c0c0c0"/>
|
||||
<path id="svg_3" d="m14.35,13.57621c-0.1625,-3.95417 0.86667,-11.7 -1.84167,-11.59167c-2.70833,0.10833 -2.6,2.05833 -2.16667,6.93333" stroke-linejoin="round" stroke="#000000" fill="none"/>
|
||||
<circle id="svg_2" r="1.60938" cy="15.20121" cx="14.45833" stroke-linejoin="round" stroke="#000000" fill="none"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="stroke">
|
||||
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect fill="none" stroke="#707070" stroke-width="10" x="8.625" y="8.625" width="32.75" height="32.75" id="svg_1"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="opacity">
|
||||
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient y2="0.1" x2="0.9" y1="0.9" x1="0.1" id="svg_7">
|
||||
<stop stop-color="#000000" offset="0"/>
|
||||
<stop stop-opacity="0" stop-color="#000000" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect id="svg_4" height="50" width="50" y="0" x="0" fill="#ffffff"/>
|
||||
<rect id="svg_1" height="25" width="25" y="0" x="0" fill="#a0a0a0"/>
|
||||
<rect id="svg_2" height="25" width="25" y="25" x="25" fill="#a0a0a0"/>
|
||||
<rect id="svg_3" height="50" width="50" y="0" x="0" stroke-width="2" stroke="url(#svg_7)" fill="url(#svg_7)"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="new_image">
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
|
@ -657,6 +688,32 @@
|
|||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="angle">
|
||||
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="2" stroke-dasharray="1,3" id="svg_6" d="m32.78778,41.03469c-0.40379,-8.68145 -4.50873,-16.79003 -12.11365,-20.5932" stroke="#000000" fill="none"/>
|
||||
<path id="svg_7" d="m29.20348,7.67055l-24.20348,34.47921l41.16472,0" stroke-width="3" stroke="#404040" fill="none"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<!-- Currently does not work with svg-icons... -->
|
||||
<!--
|
||||
<g id="blur">
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="svg_2" x1="0.36328" y1="0.10156" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#ffffff"/>
|
||||
<stop offset="1" stop-color="#3b7e9b"/>
|
||||
</linearGradient>
|
||||
<filter id="svg_4_blur">
|
||||
<feGaussianBlur stdDeviation="0.8" in="SourceGraphic"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<path id="svg_1" d="m11.625,18l-9.625,0l0,-12l9.625,0" stroke="#000000" fill="url(#svg_2)"/>
|
||||
<path filter="url(#svg_4_blur)" id="svg_4" d="m11.75,6l10.25,0l0,12l-10.25,0" stroke="#000000" fill="url(#svg_2)"/>
|
||||
</svg>
|
||||
</g>
|
||||
-->
|
||||
|
||||
<g id="align">
|
||||
<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect stroke="#606060" fill="#c0c0c0" id="svg_4" height="7" width="12" y="7.5" x="4.5"/>
|
||||
|
|
|
|||
|
|
@ -78,6 +78,23 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
#svg_editor #color_tools .icon_label {
|
||||
padding-right: 0;
|
||||
height: 23px;
|
||||
min-width: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#group_opacityLabel,
|
||||
#zoomLabel {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#color_tools .icon_label > * {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
#svg_editor div#palette {
|
||||
float: left;
|
||||
width: 6848px;
|
||||
|
|
@ -475,8 +492,8 @@ span.zoom_tool {
|
|||
padding: 3px;
|
||||
}
|
||||
|
||||
#zoom_panel label {
|
||||
margin-top: 2px;
|
||||
#zoom_panel {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
|
@ -690,7 +707,7 @@ span.zoom_tool {
|
|||
}
|
||||
|
||||
#svg_editor #tools_bottom_2 {
|
||||
width: 215px;
|
||||
width: 180px;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -714,7 +731,7 @@ span.zoom_tool {
|
|||
background: #f0f0f0;
|
||||
padding: 0 5px;
|
||||
vertical-align: middle;
|
||||
height: 26px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#toggle_stroke_tools {
|
||||
|
|
@ -766,7 +783,7 @@ span.zoom_tool {
|
|||
}
|
||||
|
||||
|
||||
#tools_top .dropdown div {
|
||||
#tools_top .dropdown .icon_label {
|
||||
border: 1px solid transparent;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
|
@ -829,7 +846,7 @@ span.zoom_tool {
|
|||
padding: 0 3px;
|
||||
}
|
||||
|
||||
#tool_opacity .dropdown button {
|
||||
#tools_bottom .dropdown button {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -166,9 +166,9 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
</label>
|
||||
</div>
|
||||
|
||||
<label id="tool_angle">
|
||||
<span id="angleLabel">angle:</span>
|
||||
<input id="angle" title="Change rotation angle" size="2" value="0" type="text"/>
|
||||
<label id="tool_angle" title="Change rotation angle">
|
||||
<span id="angleLabel" class="icon_label"></span>
|
||||
<input id="angle" size="2" value="0" type="text"/>
|
||||
</label>
|
||||
|
||||
<div class="toolset" id="tool_blur">
|
||||
|
|
@ -404,10 +404,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<div id="tools_bottom" class="tools_panel">
|
||||
|
||||
<!-- Zoom buttons -->
|
||||
<div id="zoom_panel" class="toolset">
|
||||
<div id="zoom_panel" class="toolset" title="Change zoom level">
|
||||
<label>
|
||||
<span id="zoomLabel" class="zoom_tool">zoom:</span>
|
||||
<input id="zoom" title="Change zoom level" size="3" value="100" type="text" />
|
||||
<span id="zoomLabel" class="zoom_tool icon_label"></span>
|
||||
<input id="zoom" size="3" value="100" type="text" />
|
||||
</label>
|
||||
<div id="zoom_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
|
|
@ -430,20 +430,16 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
|
||||
<div id="tools_bottom_2">
|
||||
<div id="color_tools">
|
||||
<div class="color_tool" id="tool_fill">
|
||||
<label>
|
||||
fill:
|
||||
</label>
|
||||
<div class="color_tool" id="tool_fill" title="Change fill color">
|
||||
<label class="icon_label" for="fill_color"></label>
|
||||
<div class="color_block">
|
||||
<div id="fill_bg"></div>
|
||||
<div id="fill_color" class="color_block" title="Change fill color"></div>
|
||||
<div id="fill_color" class="color_block"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color_tool" id="tool_stroke">
|
||||
<label>
|
||||
stroke:
|
||||
</label>
|
||||
<label class="icon_label" title="Change stroke color"></label>
|
||||
<div class="color_block">
|
||||
<div id="stroke_bg"></div>
|
||||
<div id="stroke_color" class="color_block" title="Change stroke color"></div>
|
||||
|
|
@ -485,10 +481,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toolset" id="tool_opacity">
|
||||
<div class="toolset" id="tool_opacity" title="Change selected item opacity">
|
||||
<label>
|
||||
<span id="group_opacityLabel">opac:</span>
|
||||
<input id="group_opacity" title="Change selected item opacity" size="3" value="100" type="text"/>
|
||||
<span id="group_opacityLabel" class="icon_label"></span>
|
||||
<input id="group_opacity" size="3" value="100" type="text"/>
|
||||
</label>
|
||||
<div id="opacity_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
|
|
|
|||
|
|
@ -336,6 +336,11 @@
|
|||
'#rwidthLabel, #iwidthLabel':'width',
|
||||
'#rheightLabel, #iheightLabel':'height',
|
||||
'#cornerRadiusLabel span':'c_radius',
|
||||
'#angleLabel':'angle',
|
||||
'#zoomLabel':'zoom',
|
||||
'#tool_fill label': 'fill',
|
||||
'#tool_stroke .icon_label': 'stroke',
|
||||
'#group_opacityLabel': 'opacity',
|
||||
|
||||
'.flyout_arrow_horiz':'arrow_right',
|
||||
'.dropdown button, #main_button .dropdown':'arrow_down',
|
||||
|
|
@ -349,7 +354,8 @@
|
|||
'#main_button .dropdown .svg_icon': 9,
|
||||
'.palette_item:first .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon': 16,
|
||||
'.toolbar_button button .svg_icon':16,
|
||||
'.stroke_tool div div .svg_icon': 20
|
||||
'.stroke_tool div div .svg_icon': 20,
|
||||
'#tools_bottom label .svg_icon': 18
|
||||
},
|
||||
callback: function(icons) {
|
||||
$('.toolbar_button button > svg, .toolbar_button button > img').each(function() {
|
||||
|
|
@ -1811,7 +1817,23 @@
|
|||
// holder.empty().append(icon)
|
||||
// .attr('data-curopt', holder_sel.replace('_show','')); // This sets the current mode
|
||||
// }
|
||||
|
||||
|
||||
// Unfocus text input when workarea is mousedowned.
|
||||
(function() {
|
||||
var inp;
|
||||
|
||||
var unfocus = function() {
|
||||
$(inp).blur();
|
||||
}
|
||||
|
||||
$('#svg_editor input:text').focus(function() {
|
||||
inp = this;
|
||||
workarea.mousedown(unfocus);
|
||||
}).blur(function() {
|
||||
workarea.unbind('mousedown', unfocus);
|
||||
});
|
||||
}());
|
||||
|
||||
var clickSelect = function() {
|
||||
if (toolButtonClick('#tool_select')) {
|
||||
svgCanvas.setMode('select');
|
||||
|
|
@ -2707,16 +2729,26 @@
|
|||
});
|
||||
},1000);
|
||||
|
||||
$('#fill_color').click(function(){
|
||||
colorPicker($(this));
|
||||
$('#fill_color, #tool_fill .icon_label').click(function(){
|
||||
colorPicker($('#fill_color'));
|
||||
updateToolButtonState();
|
||||
});
|
||||
|
||||
$('#stroke_color').click(function(){
|
||||
colorPicker($(this));
|
||||
$('#stroke_color, #tool_stroke .icon_label').click(function(){
|
||||
colorPicker($('#stroke_color'));
|
||||
updateToolButtonState();
|
||||
});
|
||||
|
||||
|
||||
$('#group_opacityLabel').click(function() {
|
||||
$('#opacity_dropdown button').mousedown();
|
||||
$(window).mouseup();
|
||||
});
|
||||
|
||||
$('#zoomLabel').click(function() {
|
||||
$('#zoom_dropdown button').mousedown();
|
||||
$(window).mouseup();
|
||||
});
|
||||
|
||||
$('#tool_move_top').mousedown(function(evt){
|
||||
$('#tools_stacking').show();
|
||||
evt.preventDefault();
|
||||
|
|
|
|||
Loading…
Reference in New Issue