zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

interface optimizations for maximizing canvas area 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2195 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Mark MacKay 2012-11-28 01:42:57 +00:00
parent 79337bb3aa
commit 08e5405a41
3 changed files with 400 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

653
editor/svg-editor.css
View File

File diff suppressed because it is too large Load Diff

26
editor/svg-editor.html
View File

@ -110,8 +110,8 @@
</div>
<div id="main_button">
<div id="main_icon" class="buttonup" title="Main Menu">
<span></span>
<div id="main_icon" class="tool_button" title="Main Menu">
<span>SVG-Edit</span>
<div id="logo"></div>
<div class="dropdown"></div>
</div>
@ -174,6 +174,7 @@
<div id="tools_top" class="tools_panel">
<div id="editor_panel">
<div class="tool_sep"></div>
<div class="push_button" id="tool_source" title="Edit Source [U]"></div>
<div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
</div>
@ -495,6 +496,7 @@
<div id="tools_bottom_2">
<div id="color_tools">
<div class="color_tool" id="tool_fill">
<label class="icon_label" for="fill_color" title="Change fill color"></label>
<div class="color_block">
@ -504,18 +506,18 @@
</div>
<div class="color_tool" id="tool_stroke">
<div class="color_block">
<label class="icon_label" title="Change stroke color"></label>
</div>
<div class="color_block">
<div id="stroke_bg"></div>
<div id="stroke_color" class="color_block" title="Change stroke color"></div>
</div>
<label>
<label class="stroke_label">
<input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2" value="5" type="text" data-attr="Stroke Width"/>
</label>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools"></div>
<label class="stroke_tool">
<select id="stroke_style" title="Change stroke dash style">
<option selected="selected" value="none">&mdash;</option>
@ -527,27 +529,18 @@
</label>
<div class="stroke_tool dropdown" id="stroke_linejoin">
<div>
<div id="cur_linejoin" title="Linejoin: Miter"></div>
<button></button>
</div>
</div>
<div class="stroke_tool dropdown" id="stroke_linecap">
<div>
<div id="cur_linecap" title="Linecap: Butt"></div>
<button></button>
</div>
</div>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools">
&gt;&gt;
</div>
</div>
</div>
<div class="toolset" id="tool_opacity" title="Change selected item opacity">
<div class="color_tool" id="tool_opacity" title="Change selected item opacity">
<label>
<span id="group_opacityLabel" class="icon_label"></span>
<input id="group_opacity" size="3" value="100" type="text"/>
@ -564,13 +557,14 @@
</ul>
</div>
</div>
</div>
</div>
<div id="tools_bottom_3">
<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
</div>
<div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.6-alpha</a></div>
<!-- <div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.6-alpha</a></div> -->
</div>
<div id="option_lists" class="dropdown">

26
editor/svg-editor.js
View File

@ -433,12 +433,13 @@
'#palette .palette_item:first, #fill_bg, #stroke_bg':'no_color'
},
resize: {
'#logo .svg_icon': 32,
'#logo .svg_icon': 28,
'.flyout_arrow_horiz .svg_icon': 5,
'.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
'.dropdown button .svg_icon': 7,
'#main_button .dropdown .svg_icon': 9,
'.palette_item:first .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon': 16,
'.palette_item:first .svg_icon' : 15,
'#fill_bg .svg_icon, #stroke_bg .svg_icon': 16,
'.toolbar_button button .svg_icon':16,
'.stroke_tool div div .svg_icon': 20,
'#tools_bottom label .svg_icon': 18
@ -824,15 +825,6 @@
});
var contextChanged = function(win, context) {
$('#workarea,#sidepanels').css('top', context?100:75);
$('#rulers').toggleClass('moved', context);
if(cur_context && !context) {
// Back to normal
workarea[0].scrollTop -= 25;
} else if(!cur_context && context) {
workarea[0].scrollTop += 25;
}
var link_str = '';
if(context) {
var str = '';
@ -935,7 +927,7 @@
var timer;
var pos = $(show_sel).position();
$(hold_sel).css({'left': pos.left+34, 'top': pos.top+77});
$(hold_sel).css({'left': pos.left+34, 'top': pos.top+40});
// Clicking the "show" icon should set the current mode
shower.mousedown(function(evt) {
@ -1988,14 +1980,8 @@
updateToolButtonState();
}).bind('contextmenu', function(e) {e.preventDefault()});
$("#toggle_stroke_tools").toggle(function() {
$(".stroke_tool").css('display','table-cell');
$(this).text('<<');
resetScrollPos();
}, function() {
$(".stroke_tool").css('display','none');
$(this).text('>>');
resetScrollPos();
$("#toggle_stroke_tools").on("click", function() {
$("#tools_bottom").toggleClass("expanded");
});
// This is a common function used when a tool has been clicked (chosen)