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

655
editor/svg-editor.css
View File

File diff suppressed because it is too large Load Diff

64
editor/svg-editor.html
View File

@ -110,8 +110,8 @@
</div> </div>
<div id="main_button"> <div id="main_button">
<div id="main_icon" class="buttonup" title="Main Menu"> <div id="main_icon" class="tool_button" title="Main Menu">
<span></span> <span>SVG-Edit</span>
<div id="logo"></div> <div id="logo"></div>
<div class="dropdown"></div> <div class="dropdown"></div>
</div> </div>
@ -174,6 +174,7 @@
<div id="tools_top" class="tools_panel"> <div id="tools_top" class="tools_panel">
<div id="editor_panel"> <div id="editor_panel">
<div class="tool_sep"></div>
<div class="push_button" id="tool_source" title="Edit Source [U]"></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 class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
</div> </div>
@ -495,6 +496,7 @@
<div id="tools_bottom_2"> <div id="tools_bottom_2">
<div id="color_tools"> <div id="color_tools">
<div class="color_tool" id="tool_fill"> <div class="color_tool" id="tool_fill">
<label class="icon_label" for="fill_color" title="Change fill color"></label> <label class="icon_label" for="fill_color" title="Change fill color"></label>
<div class="color_block"> <div class="color_block">
@ -504,18 +506,18 @@
</div> </div>
<div class="color_tool" id="tool_stroke"> <div class="color_tool" id="tool_stroke">
<div class="color_block"> <label class="icon_label" title="Change stroke color"></label>
<label class="icon_label" title="Change stroke color"></label>
</div>
<div class="color_block"> <div class="color_block">
<div id="stroke_bg"></div> <div id="stroke_bg"></div>
<div id="stroke_color" class="color_block" title="Change stroke color"></div> <div id="stroke_color" class="color_block" title="Change stroke color"></div>
</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"/> <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> </label>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools"></div>
<label class="stroke_tool"> <label class="stroke_tool">
<select id="stroke_style" title="Change stroke dash style"> <select id="stroke_style" title="Change stroke dash style">
<option selected="selected" value="none">&mdash;</option> <option selected="selected" value="none">&mdash;</option>
@ -527,41 +529,33 @@
</label> </label>
<div class="stroke_tool dropdown" id="stroke_linejoin"> <div class="stroke_tool dropdown" id="stroke_linejoin">
<div> <div id="cur_linejoin" title="Linejoin: Miter"></div>
<div id="cur_linejoin" title="Linejoin: Miter"></div> <button></button>
<button></button>
</div>
</div> </div>
<div class="stroke_tool dropdown" id="stroke_linecap"> <div class="stroke_tool dropdown" id="stroke_linecap">
<div> <div id="cur_linecap" title="Linecap: Butt"></div>
<div id="cur_linecap" title="Linecap: Butt"></div> <button></button>
<button></button>
</div>
</div> </div>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools">
&gt;&gt;
</div>
</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> <label>
<span id="group_opacityLabel" class="icon_label"></span> <span id="group_opacityLabel" class="icon_label"></span>
<input id="group_opacity" size="3" value="100" type="text"/> <input id="group_opacity" size="3" value="100" type="text"/>
</label> </label>
<div id="opacity_dropdown" class="dropdown"> <div id="opacity_dropdown" class="dropdown">
<button></button> <button></button>
<ul> <ul>
<li>0%</li> <li>0%</li>
<li>25%</li> <li>25%</li>
<li>50%</li> <li>50%</li>
<li>75%</li> <li>75%</li>
<li>100%</li> <li>100%</li>
<li class="special"><div id="opac_slider"></div></li> <li class="special"><div id="opac_slider"></div></li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
@ -570,7 +564,7 @@
<div id="tools_bottom_3"> <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 id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></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>
<div id="option_lists" class="dropdown"> <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' '#palette .palette_item:first, #fill_bg, #stroke_bg':'no_color'
}, },
resize: { resize: {
'#logo .svg_icon': 32, '#logo .svg_icon': 28,
'.flyout_arrow_horiz .svg_icon': 5, '.flyout_arrow_horiz .svg_icon': 5,
'.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14, '.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
'.dropdown button .svg_icon': 7, '.dropdown button .svg_icon': 7,
'#main_button .dropdown .svg_icon': 9, '#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, '.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 '#tools_bottom label .svg_icon': 18
@ -824,15 +825,6 @@
}); });
var contextChanged = function(win, context) { 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 = ''; var link_str = '';
if(context) { if(context) {
var str = ''; var str = '';
@ -935,7 +927,7 @@
var timer; var timer;
var pos = $(show_sel).position(); 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 // Clicking the "show" icon should set the current mode
shower.mousedown(function(evt) { shower.mousedown(function(evt) {
@ -1988,14 +1980,8 @@
updateToolButtonState(); updateToolButtonState();
}).bind('contextmenu', function(e) {e.preventDefault()}); }).bind('contextmenu', function(e) {e.preventDefault()});
$("#toggle_stroke_tools").toggle(function() { $("#toggle_stroke_tools").on("click", function() {
$(".stroke_tool").css('display','table-cell'); $("#tools_bottom").toggleClass("expanded");
$(this).text('<<');
resetScrollPos();
}, function() {
$(".stroke_tool").css('display','none');
$(this).text('>>');
resetScrollPos();
}); });
// This is a common function used when a tool has been clicked (chosen) // This is a common function used when a tool has been clicked (chosen)