SVG icon page: Added more SVG icons, made flyouts work (not on Opera), set all fallback icons, improved UI on resize
git-svn-id: http://svg-edit.googlecode.com/svn/branches/transformlist@908 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
78bd23003c
commit
59d8b00827
|
|
@ -26,6 +26,45 @@
|
||||||
</svg>
|
</svg>
|
||||||
</foreignContent>
|
</foreignContent>
|
||||||
|
|
||||||
|
<foreignContent id="rect">
|
||||||
|
<svg viewBox="0 0 24 24" 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="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
|
||||||
|
<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
|
||||||
|
<stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g>
|
||||||
|
<title>Layer 1</title>
|
||||||
|
<rect transform="matrix(1, 0, 0, 1, 0, 0)" stroke="#000000" fill="url(#svg_2)" id="svg_1" height="10" width="20" y="6.5" x="1.5"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</foreignContent>
|
||||||
|
|
||||||
|
<foreignContent id="fh_rect">
|
||||||
|
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
|
||||||
|
<defs>
|
||||||
|
<linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
|
||||||
|
<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
|
||||||
|
<stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient y2="0.3945" x2="0.6132" y1="0.1093" x1="0.3046" id="svg_9">
|
||||||
|
<stop stop-opacity="1" stop-color="#f9d225" offset="0"/>
|
||||||
|
<stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g>
|
||||||
|
<title>Layer 1</title>
|
||||||
|
<rect stroke="#000000" stroke-width="2" fill="url(#svg_2)" id="svg_1" height="50" width="50" y="0.75" x="1.25"/>
|
||||||
|
<path stroke-width="2" stroke="#000000" fill="url(#svg_9)" id="svg_2" d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5"/>
|
||||||
|
<path stroke-width="2" stroke="#000000" fill="#fce0a9" id="svg_10" d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z"/>
|
||||||
|
<path id="svg_11" stroke-width="2" stroke="#000000" fill="#000000" d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</foreignContent>
|
||||||
|
|
||||||
|
|
||||||
<foreignContent id="circle">
|
<foreignContent id="circle">
|
||||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" id="svgzoom">
|
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" id="svgzoom">
|
||||||
<defs>
|
<defs>
|
||||||
|
|
@ -34,8 +73,44 @@
|
||||||
<stop stop-opacity="1" stop-color="#ff6666" offset="1.0"/>
|
<stop stop-opacity="1" stop-color="#ff6666" offset="1.0"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<g style="pointer-events: all;">
|
<g>
|
||||||
<circle stroke-opacity="1" fill-opacity="1" style="pointer-events: all;" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" r="23" cy="27" cx="27"/>
|
<circle stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" r="23" cy="27" cx="27"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</foreignContent>
|
||||||
|
|
||||||
|
<foreignContent id="ellipse">
|
||||||
|
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" id="svgzoom">
|
||||||
|
<defs>
|
||||||
|
<linearGradient y2="1.0" x2="1.0" y1="0.1875" x1="0.171875" id="svg_4">
|
||||||
|
<stop stop-opacity="1" stop-color="#ffffff" offset="0.0"/>
|
||||||
|
<stop stop-opacity="1" stop-color="#ff6666" offset="1.0"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g>
|
||||||
|
<ellipse stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="12" cy="27" cx="27"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</foreignContent>
|
||||||
|
|
||||||
|
<foreignContent id="fh_ellipse">
|
||||||
|
<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="svg_9" x1="0.3046" y1="0.1093" x2="0.6132" y2="0.3945">
|
||||||
|
<stop offset="0" stop-color="#f9d225" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="#bf5f00" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="svg_4" x1="0.17188" y1="0.1875" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="#ff6666" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g>
|
||||||
|
<title>Layer 1</title>
|
||||||
|
<ellipse stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="12" cy="37" cx="27"/>
|
||||||
|
<path d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5" id="svg_2" fill="url(#svg_9)" stroke="#000000" stroke-width="2"/>
|
||||||
|
<path d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z" id="svg_10" fill="#fce0a9" stroke="#000000" stroke-width="2"/>
|
||||||
|
<path d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z" fill="#000000" stroke="#000000" stroke-width="2" id="svg_11"/>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</foreignContent>
|
</foreignContent>
|
||||||
|
|
@ -395,6 +470,62 @@
|
||||||
</svg>
|
</svg>
|
||||||
</foreignContent>
|
</foreignContent>
|
||||||
|
|
||||||
|
<foreignContent id="group">
|
||||||
|
<svg viewBox="0 0 16 16" 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 id="svg_90" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#ccddff" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="#789fed" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="svg_92" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#70a1e5" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="#4b6baf" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g>
|
||||||
|
<title>Layer 1</title>
|
||||||
|
<rect x="13.5" y="0.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_79"/>
|
||||||
|
<rect x="13.5" y="13.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_82"/>
|
||||||
|
<rect x="0.5" y="13.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_83"/>
|
||||||
|
<rect x="2.5" y="2.5" width="8" height="7" fill="#a0a0a0" stroke="#555555" id="svg_85"/>
|
||||||
|
<rect x="2.5" y="2.5" width="8" height="7" fill="url(#svg_90)" stroke="url(#svg_92)" id="svg_87"/>
|
||||||
|
<rect x="5.5" y="6.5" width="8" height="7" id="svg_84" fill="#7399d6" stroke="url(#svg_92)"/>
|
||||||
|
<rect x="0.5" y="0.5" width="2" height="2" id="svg_78" fill="#a0a0a0" stroke="#555555"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</foreignContent>
|
||||||
|
|
||||||
|
<foreignContent id="ungroup">
|
||||||
|
<svg viewBox="0 0 16 16" 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 id="svg_90" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#ccddff" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="#789fed" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="svg_92" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#70a1e5" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="#4b6baf" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g>
|
||||||
|
<rect x="2.5" y="2.5" width="8" height="7" fill="url(#svg_90)" stroke="url(#svg_92)" id="svg_87"/>
|
||||||
|
<rect x="5.5" y="6.5" width="8" height="7" id="svg_84" fill="#7399d6" stroke="url(#svg_92)"/>
|
||||||
|
<title>Layer 1</title>
|
||||||
|
<rect x="9.5" y="1.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_79"/>
|
||||||
|
<rect x="1.5" y="8.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_83"/>
|
||||||
|
<rect x="1.5" y="1.5" width="2" height="2" id="svg_78" fill="#a0a0a0" stroke="#555555"/>
|
||||||
|
<rect id="svg_93" x="12.5" y="5.5" width="2" height="2" fill="#a0a0a0" stroke="#555555"/>
|
||||||
|
<rect id="svg_94" x="12.5" y="12.5" width="2" height="2" fill="#a0a0a0" stroke="#555555"/>
|
||||||
|
<rect id="svg_95" x="4.5" y="12.5" width="2" height="2" fill="#a0a0a0" stroke="#555555"/>
|
||||||
|
<rect id="svg_96" x="4.5" y="5.5" width="2" height="2" fill="#a0a0a0" stroke="#555555"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</foreignContent>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<g id="svg_eof"/>
|
<g id="svg_eof"/>
|
||||||
|
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 28 KiB |
|
|
@ -21,7 +21,10 @@
|
||||||
<script type="text/javascript" src="http://svg-icon-loader.googlecode.com/svn/trunk/jquery.svgicons.js"></script>
|
<script type="text/javascript" src="http://svg-icon-loader.googlecode.com/svn/trunk/jquery.svgicons.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#svg_editor .tool_button {
|
#svg_editor .tool_button,
|
||||||
|
#svg_editor #tools_rect .tool_flyout_button,
|
||||||
|
#svg_editor #tools_ellipse .tool_flyout_button {
|
||||||
|
padding: 2px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
@ -71,8 +74,32 @@
|
||||||
border-bottom: 1px solid #808080;
|
border-bottom: 1px solid #808080;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#svg_editor #tool_square,
|
||||||
|
#svg_editor #tool_rect,
|
||||||
|
#svg_editor #tool_fhrect,
|
||||||
|
#svg_editor #tool_circle,
|
||||||
|
#svg_editor #tool_ellipse,
|
||||||
|
#svg_editor #tool_fhellipse {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
/*
|
||||||
|
TODO for SVG icons:
|
||||||
|
|
||||||
|
- Make alignment SVG icons
|
||||||
|
- Make layer eye SVG icon
|
||||||
|
- Make layer icons bigger for l and xl (not s)
|
||||||
|
- Fix SVG logo to work with icon-loader
|
||||||
|
- Make no-color (red X) SVG icon
|
||||||
|
- Make flyout buttons work in Opera
|
||||||
|
- Fix spinner on large icons (probably a lot of work)
|
||||||
|
- Other sizing tweaks
|
||||||
|
|
||||||
|
|
||||||
|
*/
|
||||||
$(function() {
|
$(function() {
|
||||||
$.svgIcons('images/svg_edit_icons.svg', {
|
$.svgIcons('images/svg_edit_icons.svg', {
|
||||||
w:24, h:24,
|
w:24, h:24,
|
||||||
|
|
@ -92,16 +119,28 @@ $(function() {
|
||||||
'pencil':'fhpath.png',
|
'pencil':'fhpath.png',
|
||||||
'pen':'line.png',
|
'pen':'line.png',
|
||||||
'square':'square.png',
|
'square':'square.png',
|
||||||
|
'rect':'rect.png',
|
||||||
|
'fh_rect':'freehand-square.png',
|
||||||
'circle':'circle.png',
|
'circle':'circle.png',
|
||||||
'path':'polygon.png',
|
'ellipse':'ellipse.png',
|
||||||
|
'fh_ellipse':'freehand-circle.png',
|
||||||
|
'path':'path.png',
|
||||||
'text':'text.png',
|
'text':'text.png',
|
||||||
'image':'image.png',
|
'image':'image.png',
|
||||||
'zoom':'zoom.png',
|
'zoom':'zoom.png',
|
||||||
|
|
||||||
'clone':'clone.png',
|
'clone':'clone.png',
|
||||||
'delete':'delete.png',
|
'delete':'delete.png',
|
||||||
|
'group':'shape_group.png',
|
||||||
|
'ungroup':'shape_ungroup.png',
|
||||||
|
'move_top':'move_top.png',
|
||||||
|
'move_bottom':'move_bottom.png',
|
||||||
|
|
||||||
'arrow_right':'flyouth.png'
|
'go_up':'go-up.png',
|
||||||
|
'go_down':'go-down.png',
|
||||||
|
|
||||||
|
'arrow_right':'flyouth.png',
|
||||||
|
'arrow_down':'dropdown.gif'
|
||||||
},
|
},
|
||||||
placement: {
|
placement: {
|
||||||
'#tool_clear,#layer_new':'new_image',
|
'#tool_clear,#layer_new':'new_image',
|
||||||
|
|
@ -116,8 +155,12 @@ $(function() {
|
||||||
'#tool_select':'select',
|
'#tool_select':'select',
|
||||||
'#tool_fhpath':'pencil',
|
'#tool_fhpath':'pencil',
|
||||||
'#tool_line':'pen',
|
'#tool_line':'pen',
|
||||||
'#tools_ellipse_show':'circle',
|
'#tool_square,#tools_rect_show':'square',
|
||||||
'#tools_rect_show':'square',
|
'#tool_rect':'rect',
|
||||||
|
'#tool_fhrect':'fh_rect',
|
||||||
|
'#tool_circle,#tools_ellipse_show':'circle',
|
||||||
|
'#tool_ellipse':'ellipse',
|
||||||
|
'#tool_fhellipse':'fh_ellipse',
|
||||||
'#tool_path':'path',
|
'#tool_path':'path',
|
||||||
'#tool_text,#layer_rename':'text',
|
'#tool_text,#layer_rename':'text',
|
||||||
'#tool_image':'image',
|
'#tool_image':'image',
|
||||||
|
|
@ -127,6 +170,8 @@ $(function() {
|
||||||
'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete',
|
'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete',
|
||||||
'#tool_move_top':'move_top',
|
'#tool_move_top':'move_top',
|
||||||
'#tool_move_bottom':'move_bottom',
|
'#tool_move_bottom':'move_bottom',
|
||||||
|
'#tool_group':'group',
|
||||||
|
'#tool_ungroup':'ungroup',
|
||||||
|
|
||||||
'#layer_up':'go_up',
|
'#layer_up':'go_up',
|
||||||
'#layer_down':'go_down',
|
'#layer_down':'go_down',
|
||||||
|
|
@ -141,23 +186,108 @@ $(function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* Unchanged, just here because they're private methods */
|
||||||
|
var flyoutspeed = 1250;
|
||||||
|
var toolButtonClick = function(button, fadeFlyouts) {
|
||||||
|
if ($(button).hasClass('tool_button_disabled')) return false;
|
||||||
|
var fadeFlyouts = fadeFlyouts || 'normal';
|
||||||
|
$('.tools_flyout').fadeOut(fadeFlyouts);
|
||||||
|
$('#styleoverrides').text('');
|
||||||
|
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
|
||||||
|
$(button).addClass('tool_button_current');
|
||||||
|
// when a tool is selected, we should deselect any currently selected elements
|
||||||
|
svgCanvas.clearSelection();
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// New function to add
|
||||||
|
var setIcon = function(holder_sel, id) {
|
||||||
|
var icon = $.getSvgIcon(id).clone();
|
||||||
|
var holder = $(holder_sel);
|
||||||
|
icon[0].setAttribute('width',holder.width());
|
||||||
|
icon[0].setAttribute('height',holder.height());
|
||||||
|
holder.empty().append(icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change in last line of each of these.
|
||||||
|
var clickSquare = function(){
|
||||||
|
if (toolButtonClick('#tools_rect_show', flyoutspeed)) {
|
||||||
|
flyoutspeed = 'normal';
|
||||||
|
svgCanvas.setMode('square');
|
||||||
|
}
|
||||||
|
setIcon('#tools_rect_show','square');
|
||||||
|
};
|
||||||
|
|
||||||
|
var clickRect = function(){
|
||||||
|
if (toolButtonClick('#tools_rect_show')) {
|
||||||
|
svgCanvas.setMode('rect');
|
||||||
|
}
|
||||||
|
setIcon('#tools_rect_show','rect');
|
||||||
|
};
|
||||||
|
|
||||||
|
var clickFHRect = function(){
|
||||||
|
if (toolButtonClick('#tools_rect_show')) {
|
||||||
|
svgCanvas.setMode('fhrect');
|
||||||
|
}
|
||||||
|
setIcon('#tools_rect_show','fh_rect');
|
||||||
|
};
|
||||||
|
|
||||||
|
var clickCircle = function(){
|
||||||
|
if (toolButtonClick('#tools_ellipse_show', flyoutspeed)) {
|
||||||
|
flyoutspeed = 'normal';
|
||||||
|
svgCanvas.setMode('circle');
|
||||||
|
}
|
||||||
|
setIcon('#tools_ellipse_show','circle');
|
||||||
|
};
|
||||||
|
|
||||||
|
var clickEllipse = function(){
|
||||||
|
if (toolButtonClick('#tools_ellipse_show')) {
|
||||||
|
svgCanvas.setMode('ellipse');
|
||||||
|
}
|
||||||
|
setIcon('#tools_ellipse_show','ellipse');
|
||||||
|
};
|
||||||
|
|
||||||
|
var clickFHEllipse = function(){
|
||||||
|
if (toolButtonClick('#tools_ellipse_show')) {
|
||||||
|
svgCanvas.setMode('fhellipse');
|
||||||
|
}
|
||||||
|
setIcon('#tools_ellipse_show','fh_ellipse');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Bind replacements (no need to move over)
|
||||||
|
$('#tool_square').unbind('mouseup').mouseup(clickSquare);
|
||||||
|
$('#tool_rect').unbind('mouseup').mouseup(clickRect);
|
||||||
|
$('#tool_fhrect').unbind('mouseup').mouseup(clickFHRect);
|
||||||
|
$('#tool_circle').unbind('mouseup').mouseup(clickCircle);
|
||||||
|
$('#tool_ellipse').unbind('mouseup').mouseup(clickEllipse);
|
||||||
|
$('#tool_fhellipse').unbind('mouseup').mouseup(clickFHEllipse);
|
||||||
|
|
||||||
|
// This should only occur on docprops "OK", not immediately
|
||||||
$('#iconsize').change(function() {
|
$('#iconsize').change(function() {
|
||||||
var size = this.value;
|
var size = this.value;
|
||||||
var icon_sizes = { s:16, m:24, xl:48 };
|
var icon_sizes = { s:16, m:24, l:32, xl:48 };
|
||||||
|
|
||||||
// Change icon size
|
// Change icon size
|
||||||
$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled')
|
$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button')
|
||||||
.find('.svg_icon').each(function() {
|
.find('.svg_icon').each(function() {
|
||||||
this.setAttribute('width',icon_sizes[size]);
|
this.setAttribute('width',icon_sizes[size]);
|
||||||
this.setAttribute('height',icon_sizes[size]);
|
this.setAttribute('height',icon_sizes[size]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('.flyout_arrow_horiz .svg_icon').each(function() {
|
||||||
|
this.setAttribute('width',icon_sizes[size]/3);
|
||||||
|
this.setAttribute('height',icon_sizes[size]/3);
|
||||||
|
});
|
||||||
|
|
||||||
// Note that all rules will be prefixed with '#svg_editor' when parsed
|
// Note that all rules will be prefixed with '#svg_editor' when parsed
|
||||||
var cssResizeRules = {
|
var cssResizeRules = {
|
||||||
".tool_button,\
|
".tool_button,\
|
||||||
.push_button,\
|
.push_button,\
|
||||||
.tool_button_current,\
|
.tool_button_current,\
|
||||||
.tool_button_disabled": {
|
.tool_button_disabled,\
|
||||||
|
#tools_rect .tool_flyout_button,\
|
||||||
|
#tools_ellipse .tool_flyout_button": {
|
||||||
'width': {s: '16px', l: '32px', xl: '48px'},
|
'width': {s: '16px', l: '32px', xl: '48px'},
|
||||||
'height': {s: '16px', l: '32px', xl: '48px'},
|
'height': {s: '16px', l: '32px', xl: '48px'},
|
||||||
'padding': {s: '1px', l: '2px', xl: '3px'}
|
'padding': {s: '1px', l: '2px', xl: '3px'}
|
||||||
|
|
@ -171,25 +301,30 @@ $(function() {
|
||||||
},
|
},
|
||||||
"div#workarea": {
|
"div#workarea": {
|
||||||
'left': {s: '27px', l: '46px', xl: '65px'},
|
'left': {s: '27px', l: '46px', xl: '65px'},
|
||||||
'top': {s: '50px', l: '88px', xl: '125px'}
|
'top': {s: '50px', l: '88px', xl: '125px'},
|
||||||
|
'bottom': {s: '50px', l: '60px', xl: '65px'}
|
||||||
},
|
},
|
||||||
"#tools_bottom": {
|
"#tools_bottom": {
|
||||||
'left': {s: '50px', l: '57.5', xl: '65px'}
|
'left': {s: '50px', l: '57.5', xl: '65px'},
|
||||||
|
'height': {s: '50px', l: '57.5', xl: '65px'}
|
||||||
},
|
},
|
||||||
"#tools_top input": {
|
"#tools_top input, #tools_bottom input": {
|
||||||
'margin-top': {s: '2px', l: '4px', xl: '5px'},
|
'margin-top': {s: '2px', l: '4px', xl: '5px'},
|
||||||
'height': {s: '12px', l: '29px', xl: '45px'},
|
'height': {s: '12px', l: '29px', xl: '45px'},
|
||||||
'border': {s: '1px solid #555', 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: '1.7em', xl: '2.5em'}
|
||||||
},
|
},
|
||||||
|
"#tools_bottom input": {
|
||||||
|
'margin-top': {s: '6px', l: '4px', xl: '5px'},
|
||||||
|
},
|
||||||
"#tools_top > div, #tools_top": {
|
"#tools_top > div, #tools_top": {
|
||||||
'line-height': {s: '17px', l: '34px', xl: '50px'}
|
'line-height': {s: '17px', l: '34px', xl: '50px'}
|
||||||
},
|
},
|
||||||
"#tools_top .dropdown button": {
|
".dropdown button": {
|
||||||
'margin-top': {s: '2px', l: '3px', xl: '4px'},
|
// 'margin-top': {s: '2px', l: '3px', xl: '4px'},
|
||||||
'height': {s: '18px', l: '34px', xl: '50px'}
|
'height': {s: '18px', l: '34px', xl: '50px'}
|
||||||
},
|
},
|
||||||
"#tools_top label": {
|
"#tools_top label, #tools_bottom label": {
|
||||||
'font-size': {s: '1em', l: '1.5em', xl: '2em'},
|
'font-size': {s: '1em', l: '1.5em', xl: '2em'},
|
||||||
'margin-top': {s: '1px', l: '3px', xl: '5px'}
|
'margin-top': {s: '1px', l: '3px', xl: '5px'}
|
||||||
},
|
},
|
||||||
|
|
@ -197,8 +332,14 @@ $(function() {
|
||||||
'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
|
'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
|
||||||
},
|
},
|
||||||
"#sidepanels": {
|
"#sidepanels": {
|
||||||
'top': {s: '50px', l: '88px', xl: '125px'}
|
'top': {s: '50px', l: '88px', xl: '125px'},
|
||||||
|
'bottom': {s: '50px', l: '88px', xl: '125px'},
|
||||||
|
},
|
||||||
|
".flyout_arrow_horiz": {
|
||||||
|
'left': {s: '-5px', l: '5px', xl: '14px'},
|
||||||
|
'top': {s: '-13px', l: '-13px', xl: '-20px'}
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var rule_elem = $('#tool_size_rules');
|
var rule_elem = $('#tool_size_rules');
|
||||||
|
|
@ -219,9 +360,18 @@ $(function() {
|
||||||
style_str += '}';
|
style_str += '}';
|
||||||
});
|
});
|
||||||
rule_elem.text(style_str);
|
rule_elem.text(style_str);
|
||||||
console.log(rule_elem.html());
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var pos = $('#tools_rect_show').offset();
|
||||||
|
$('#tools_rect').css({'left': pos.left, 'top': pos.top});
|
||||||
|
pos = $('#tools_ellipse_show').offset();
|
||||||
|
$('#tools_ellipse').css({'left': pos.left, 'top': pos.top});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// For quick testing
|
||||||
|
// window.setTimeout(function() {
|
||||||
|
// $('#iconsize').val('s').change();
|
||||||
|
// },1000);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -340,7 +490,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
||||||
<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
|
<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
|
||||||
<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
|
<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
|
||||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||||
<img class="push_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/>
|
<div class="push_button" id="tool_group" title="Group Elements [G]"></div>
|
||||||
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
|
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
|
||||||
<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
|
<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
|
||||||
<div class="push_button" id="tool_alignright" title="Align Right"></div>
|
<div class="push_button" id="tool_alignright" title="Align Right"></div>
|
||||||
|
|
@ -360,7 +510,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
||||||
|
|
||||||
<div id="g_panel">
|
<div id="g_panel">
|
||||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||||
<img class="push_button" id="tool_ungroup" src="images/shape_ungroup.png" title="Ungroup Elements [G]" alt="Ungroup"/>
|
<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="rect_panel">
|
<div id="rect_panel">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue