From db3d8f044785f722d626dfc0ffe8a7f63bf6687e Mon Sep 17 00:00:00 2001 From: Alexis Deveria Date: Mon, 5 Apr 2010 19:53:14 +0000 Subject: [PATCH] Started conversion of stroke attribute select list to icon list git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1503 eee81c28-f429-11dd-99c0-75d572ba1ddd --- editor/images/svg_edit_icons.svg | 54 +++++++++++++++++++++ editor/svg-editor.css | 61 +++++++++++++++++++++--- editor/svg-editor.html | 15 ++++++ editor/svg-editor.js | 82 +++++++++++++++++++++++++++++--- 4 files changed, 200 insertions(+), 12 deletions(-) diff --git a/editor/images/svg_edit_icons.svg b/editor/images/svg_edit_icons.svg index 9c3a086d..91e72aef 100644 --- a/editor/images/svg_edit_icons.svg +++ b/editor/images/svg_edit_icons.svg @@ -684,6 +684,60 @@ + + + + + + + + + + + + + + Layer 1 + + + + + + + + + + + + + + + + + + Layer 1 + + + + + + + + + + + + + + + + + + Layer 1 + + + + diff --git a/editor/svg-editor.css b/editor/svg-editor.css index d1d29e48..354d99d7 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -54,6 +54,8 @@ border-top: none; margin-top: 2px; margin-left: 4px; + position: relative; + z-index: 2; } #svg_editor #stroke_bg, @@ -713,6 +715,59 @@ span.zoom_tool { white-space: nowrap; } +#svg_editor .stroke_tool button { + margin-top: 3px; + background: #F0F0F0; +} + +#svg_editor #cur_linecap { + -moz-user-select: none; + width: 20px; + height: 20px; + margin: 1px 0; + padding: 1px; + border: 1px solid #DDD; +} + +#svg_editor #cur_linecap:hover { + background-color: #FFC; +} + +#svg_editor .stroke_tool.down #cur_linecap, +#svg_editor .stroke_tool.down button { + border: 1px inset gray; + background: #F4E284; +} + +#stroke_linecap > div { + width: 42px; +} + +#stroke_linecap > div > * { + float: left; +} + +ul#linecap_opts { + display: none; + position: absolute; + height: 90px; + z-index: 3; + margin: 0; + list-style: none; + padding-left: 0; +} + +#svg_editor ul li.current { + background-color: #F4E284; +} + +#svg_editor ul#linecap_opts li { + margin: 0; + border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; +} + .color_tool > *:first-child { -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; @@ -749,12 +804,6 @@ span.zoom_tool { width: 140px; } - -#svg_editor #tools_bottom_3 { -// position: relative; - z-index: 2; -} - #svg_editor #copyright { text-align: right; padding-right: .3em; diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 02199c25..ed6fb8f9 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -451,6 +451,7 @@ script type="text/javascript" src="locale/locale.min.js"> + + --> +
>> @@ -497,6 +505,13 @@ script type="text/javascript" src="locale/locale.min.js">
+ + +
diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 8742ee5a..f1525820 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -310,6 +310,10 @@ '#tool_alignmiddle':'align_middle', '#tool_alignbottom':'align_bottom', + '#linecap_butt,#cur_linecap':'linecap_butt', + '#linecap_round':'linecap_round', + '#linecap_square':'linecap_square', + '#url_notice':'warning', '#layer_up':'go_up', @@ -330,7 +334,8 @@ '.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, - '.toolbar_button button .svg_icon':16 + '.toolbar_button button .svg_icon':16, + '.stroke_tool div div .svg_icon': 20 }, callback: function(icons) { $('.toolbar_button button > svg, .toolbar_button button > img').each(function() { @@ -1016,7 +1021,10 @@ $('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1); $('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none"); $('#stroke_linejoin').val(selectedElement.getAttribute("stroke-linejoin")||"miter"); - $('#stroke_linecap').val(selectedElement.getAttribute("stroke-linecap")||"butt"); +// $('#stroke_linecap').val(selectedElement.getAttribute("stroke-linecap")||"butt"); + + var attr = selectedElement.getAttribute("stroke-linecap") || 'butt'; + $('#linecap_' + attr).mouseup(); } // All elements including image and group have opacity @@ -1297,10 +1305,10 @@ operaRepaint(); }); - $('#stroke_linecap').change(function(){ - svgCanvas.setStrokeAttr('stroke-linecap', $(this).val()); - operaRepaint(); - }); +// $('#stroke_linecap').change(function(){ +// svgCanvas.setStrokeAttr('stroke-linecap', $(this).val()); +// operaRepaint(); +// }); // Lose focus for select elements when changed (Allows keyboard shortcuts to work better) @@ -1584,6 +1592,55 @@ }); } + // TODO: Combine this with addDropDown or find other way to optimize + var addAltDropDown = function(elem, list, callback, dropUp) { + var button = $(elem); + var list = $(list); + var on_button = false; + if(dropUp) { + $(elem).addClass('dropup'); + } + + list.find('li').bind('mouseup', function() { + callback.apply(this, arguments); + $(this).addClass('current').siblings().removeClass('current'); + }); + + $(window).mouseup(function(evt) { + if(!on_button) { + button.removeClass('down'); + list.hide(); + list.css({top:0, left:0}); + } + on_button = false; + }); + + var height = list.height(); + + $(elem).bind('mousedown',function() { + var off = $(elem).offset(); + off.top -= list.height(); + off.left += 8; + $(list).offset(off); + + if (!button.hasClass('down')) { + button.addClass('down'); + list.show(); + on_button = true; + return false; + } else { + button.removeClass('down'); + // CSS position must be reset for Webkit + list.hide(); + list.css({top:0, left:0}); + } + }).hover(function() { + on_button = true; + }).mouseout(function() { + on_button = false; + }); + } + addDropDown('#font_family_dropdown', function() { var fam = $(this).text(); $('#font_family').val($(this).text()).change(); @@ -1619,6 +1676,19 @@ } }, true); +// $('#cur_linecap').mousedown(function() { +// $('#linecap_opts').show(); +// }); + + addAltDropDown('#stroke_linecap', '#linecap_opts', function() { + var val = this.id.split('_')[1]; + svgCanvas.setStrokeAttr('stroke-linecap', val); + operaRepaint(); + var icon = $.getSvgIcon(this.id).clone(); + $('#cur_linecap').empty().append(icon); + $.resizeSvgIcons({'#cur_linecap .svg_icon': 20}); + }, true); + /* When a flyout icon is selected