Made various CSS changes, changed opacity dropdown to spinner+superdropdown
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@852 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
a0d4f0e263
commit
aef268629a
File diff suppressed because one or more lines are too long
|
|
@ -234,7 +234,7 @@ body {
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
#svg_editor #tools_top div {
|
||||
#svg_editor #tools_top > div {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
@ -272,16 +272,25 @@ div.color_block {
|
|||
#svg_editor #multiselected_panel .selected_tool {
|
||||
vertical-align: 12px;
|
||||
}
|
||||
#svg_editor #selected_panel .selected_tool,
|
||||
#svg_editor #multiselected_panel .selected_tool,
|
||||
#svg_editor #text_panel .text_tool,
|
||||
#svg_editor #rect_panel .rect_tool,
|
||||
#svg_editor #image_panel .image_tool,
|
||||
#svg_editor #circle_panel .circle_tool,
|
||||
#svg_editor #ellipse_panel .ellipse_tool,
|
||||
#svg_editor #line_panel .line_tool,
|
||||
#svg_editor #path_node_panel .path_node_tool {
|
||||
vertical-align:12px;
|
||||
|
||||
#svg_editor #tools_top > div, #tools_top {
|
||||
float: left;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#tools_top > div > * {
|
||||
float: left;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
#tools_top label {
|
||||
margin-top: 3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#tools_top input {
|
||||
margin-top: 5px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
#svg_editor .flyout_arrow_horiz {
|
||||
|
|
@ -292,7 +301,7 @@ div.color_block {
|
|||
margin-bottom: -13px;
|
||||
}
|
||||
|
||||
#zoom_panel > * {
|
||||
.magic_field > * {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
@ -301,19 +310,19 @@ span.zoom_tool {
|
|||
padding: 3px;
|
||||
}
|
||||
|
||||
#zoom {
|
||||
.magic_field input {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#zoom_dropdown {
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#zoom_dropdown button {
|
||||
.dropdown button {
|
||||
background: transparent 3px 8px url('images/dropdown.gif') no-repeat;
|
||||
width: 15px;
|
||||
height: 21px;
|
||||
margin: 6px 0 0 3px;
|
||||
margin: 6px 0 0 1px;
|
||||
padding: 0;
|
||||
border-left: 1px solid #FFFFFF;
|
||||
border-top: 1px solid #FFFFFF;
|
||||
|
|
@ -321,7 +330,7 @@ span.zoom_tool {
|
|||
border-bottom: 1px solid #808080;
|
||||
}
|
||||
|
||||
#zoom_dropdown button.down {
|
||||
.dropdown button.down {
|
||||
border-left: 1px solid #808080;
|
||||
border-top: 1px solid #808080;
|
||||
border-right: 1px solid #FFFFFF;
|
||||
|
|
@ -329,29 +338,47 @@ span.zoom_tool {
|
|||
background-color: #B0B0B0;
|
||||
}
|
||||
|
||||
#zoom_dropdown ul {
|
||||
.dropdown ul {
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
left: -93px;
|
||||
bottom: 26px;
|
||||
top: 26px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#zoom_dropdown li {
|
||||
.dropup ul {
|
||||
top: auto;
|
||||
bottom: 26px;
|
||||
}
|
||||
|
||||
.dropdown li {
|
||||
display: block;
|
||||
width: 120px;
|
||||
padding: 4px;
|
||||
background: #E8E8E8;
|
||||
border: 1px solid #B0B0B0;
|
||||
margin: 0 0 -1px 0;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
#zoom_dropdown li:hover {
|
||||
.dropdown li:hover {
|
||||
background-color: #B0B0B0;
|
||||
}
|
||||
|
||||
.dropdown li.special {
|
||||
padding: 10px 4px;
|
||||
}
|
||||
|
||||
.dropdown li.special:hover {
|
||||
background: #E8E8E8;
|
||||
}
|
||||
|
||||
#opacity_dropdown li {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
#svg_editor .tool_button,
|
||||
#svg_editor .push_button,
|
||||
#svg_editor .tool_button_current,
|
||||
|
|
@ -591,3 +618,30 @@ olor: black;
|
|||
#tool_source_cancel, #tool_docprops_cancel {
|
||||
background: #E8E8E8 url(images/cancel.png) no-repeat 2px 0;
|
||||
}
|
||||
|
||||
/* Slider
|
||||
----------------------------------*/
|
||||
.ui-slider { position: relative; text-align: left; }
|
||||
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
|
||||
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }
|
||||
|
||||
.ui-slider-horizontal { height: .8em; }
|
||||
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
|
||||
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
|
||||
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
|
||||
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
|
||||
|
||||
.ui-slider-vertical { width: .8em; height: 100px; }
|
||||
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
|
||||
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
|
||||
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
|
||||
.ui-slider-vertical .ui-slider-range-max { top: 0; }
|
||||
|
||||
.ui-slider {
|
||||
border: 1px solid #B0B0B0;
|
||||
}
|
||||
|
||||
.ui-slider-handle {
|
||||
background: #B0B0B0;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
|
@ -107,20 +107,23 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<img class="push_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
|
||||
<img class="push_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<select id="group_opacity" class="selected_tool" title="Change selected item opacity">
|
||||
<option selected="selected" value="1">100 %</option>
|
||||
<option value="0.9">90 %</option>
|
||||
<option value="0.8">80 %</option>
|
||||
<option value="0.7">70 %</option>
|
||||
<option value="0.6">60 %</option>
|
||||
<option value="0.5">50 %</option>
|
||||
<option value="0.4">40 %</option>
|
||||
<option value="0.3">30 %</option>
|
||||
<option value="0.2">20 %</option>
|
||||
<option value="0.1">10 %</option>
|
||||
<option value="0">0 %</option>
|
||||
</select>
|
||||
<span id="angleLabel" class="selected_tool">angle:</span>
|
||||
|
||||
<label id="group_opacityLabel" class="selected_tool" for="group_opacity">opac:</label>
|
||||
<input id="group_opacity" class="selected_tool" title="Change selected item opacity" size="3" value="100" type="text"/>
|
||||
<div id="opacity_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
<ul>
|
||||
<li class="special"><div id="opac_slider"></div></li>
|
||||
<li>100% (no transparency)</li>
|
||||
<li>0%</li>
|
||||
<li>25%</li>
|
||||
<li>50%</li>
|
||||
<li>75%</li>
|
||||
<li>100%</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<label id="angleLabel" class="selected_tool">angle:</label>
|
||||
<input id="angle" class="selected_tool" title="Change rotation angle" size="2" value="0" type="text"/>
|
||||
</div>
|
||||
|
||||
|
|
@ -130,6 +133,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<img class="push_button" id="tool_clone_multi" src="images/clone.png" title="Clone Elements [C]" alt="Clone"/>
|
||||
<img class="push_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/>
|
||||
<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_alignleft" title="Align Left"></div>
|
||||
<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
|
||||
<div class="push_button" id="tool_alignright" title="Align Right"></div>
|
||||
|
|
@ -144,7 +148,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<option id="page" value="page">page</option>
|
||||
</select>
|
||||
<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>
|
||||
|
||||
<div id="g_panel">
|
||||
|
|
@ -229,7 +233,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<option value="fantasy">fantasy</option>
|
||||
<option value="monospace">monospace</option>
|
||||
</select>
|
||||
<span id="font_sizeLabel" class="text_tool">size:</span>
|
||||
<label id="font_sizeLabel" class="text_tool" for="font_size">size:</label>
|
||||
<input id="font_size" class="text_tool" title="Change Font Size" size="3" value="0" type="text"/>
|
||||
<input id="text" class="text_tool" type="text" title="Change text contents" size="35"/>
|
||||
</div>
|
||||
|
|
@ -267,10 +271,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<div id="tools_bottom" class="tools_panel">
|
||||
|
||||
<!-- Zoom buttons -->
|
||||
<div id="zoom_panel">
|
||||
<div id="zoom_panel" class="magic_field">
|
||||
<span id="zoomLabel" class="zoom_tool">zoom:</span>
|
||||
<input id="zoom" class="zoom_tool" title="Change zoom level" size="3" value="100" type="text" />
|
||||
<div id="zoom_dropdown">
|
||||
<div id="zoom_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
<ul>
|
||||
<li>100%</li>
|
||||
|
|
|
|||
|
|
@ -179,7 +179,9 @@ function svg_edit_setup() {
|
|||
|
||||
$('#fill_opacity').html(fillOpacity);
|
||||
$('#stroke_opacity').html(strokeOpacity);
|
||||
$('#group_opacity').val(((selectedElement.getAttribute("opacity")||1.0)*100)+" %");
|
||||
var opac_perc = ((selectedElement.getAttribute("opacity")||1.0)*100);
|
||||
$('#group_opacity').val(opac_perc);
|
||||
$('#opac_slider').slider('option', 'value', opac_perc);
|
||||
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
|
||||
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
|
||||
}
|
||||
|
|
@ -357,11 +359,18 @@ function svg_edit_setup() {
|
|||
var changeZoom = function(ctl) {
|
||||
var zoomlevel = ctl.value / 100;
|
||||
var res = svgCanvas.getResolution();
|
||||
// Hack to increase properly from 10%
|
||||
if(res.zoom < zoomlevel && res.zoom == .1) $('#zoom').val(50);
|
||||
setResolution(res.w * zoomlevel, res.h * zoomlevel, true);
|
||||
svgCanvas.setZoom(zoomlevel);
|
||||
}
|
||||
|
||||
var changeOpacity = function(ctl, val) {
|
||||
if(val == null) val = ctl.value;
|
||||
$('#group_opacity').val(val);
|
||||
if(!ctl || !ctl.handle) {
|
||||
$('#opac_slider').slider('option', 'value', val);
|
||||
}
|
||||
svgCanvas.setOpacity(val/100);
|
||||
}
|
||||
|
||||
$('#stroke_style').change(function(){
|
||||
svgCanvas.setStrokeStyle(this.options[this.selectedIndex].value);
|
||||
|
|
@ -370,10 +379,6 @@ function svg_edit_setup() {
|
|||
// Lose focus for select elements when changed (Allows keyboard shortcuts to work better)
|
||||
$('select').change(function(){$(this).blur();});
|
||||
|
||||
$('#group_opacity').change(function(){
|
||||
svgCanvas.setOpacity(this.options[this.selectedIndex].value);
|
||||
});
|
||||
|
||||
// fired when user wants to move elements to another layer
|
||||
var promptMoveLayerOnce = false;
|
||||
$('#selLayerNames').change(function(){
|
||||
|
|
@ -496,40 +501,17 @@ function svg_edit_setup() {
|
|||
return true;
|
||||
};
|
||||
|
||||
var setZoomOpts = function() {
|
||||
var button = $('#zoom_dropdown button');
|
||||
var list = $('#zoom_dropdown ul');
|
||||
var addDropDown = function(elem, callback, dropUp) {
|
||||
var button = $(elem).find('button');
|
||||
var list = $(elem).find('ul');
|
||||
var on_button = false;
|
||||
|
||||
$('#zoom_dropdown li').bind('mouseup',function() {
|
||||
var item = $(this);
|
||||
var val = item.attr('data-val');
|
||||
var res = svgCanvas.getResolution();
|
||||
var scrbar = 15;
|
||||
if(val) {
|
||||
var w_area = $('#workarea');
|
||||
var z_info = svgCanvas.setBBoxZoom(val, w_area.width()-scrbar, w_area.height()-scrbar);
|
||||
if(!z_info) return;
|
||||
var zoomlevel = z_info.zoom;
|
||||
var bb = z_info.bbox;
|
||||
$('#zoom').val(zoomlevel*100);
|
||||
setResolution(res.w * zoomlevel, res.h * zoomlevel);
|
||||
var scrLeft = bb.x * zoomlevel;
|
||||
var scrOffX = w_area.width()/2 - (bb.width * zoomlevel)/2;
|
||||
w_area[0].scrollLeft = Math.max(0,scrLeft - scrOffX);
|
||||
var scrTop = bb.y * zoomlevel;
|
||||
var scrOffY = w_area.height()/2 - (bb.height * zoomlevel)/2;
|
||||
w_area[0].scrollTop = Math.max(0,scrTop - scrOffY);
|
||||
} else {
|
||||
var percent = parseInt(item.text());
|
||||
$('#zoom').val(percent);
|
||||
var zoomlevel = percent/100;
|
||||
setResolution(res.w * zoomlevel, res.h * zoomlevel, true);
|
||||
svgCanvas.setZoom(zoomlevel);
|
||||
}
|
||||
});
|
||||
if(dropUp) {
|
||||
$(elem).addClass('dropup');
|
||||
}
|
||||
|
||||
$(elem).find('li').bind('mouseup', callback);
|
||||
|
||||
$().mouseup(function() {
|
||||
$().mouseup(function(evt) {
|
||||
if(!on_button) {
|
||||
button.removeClass('down');
|
||||
list.hide();
|
||||
|
|
@ -551,10 +533,48 @@ function svg_edit_setup() {
|
|||
}).mouseout(function() {
|
||||
on_button = false;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
setZoomOpts();
|
||||
addDropDown('#opacity_dropdown', function() {
|
||||
if($(this).find('div').length) return;
|
||||
var perc = parseInt($(this).text().split('%')[0]);
|
||||
changeOpacity(false, perc);
|
||||
});
|
||||
|
||||
$("#opac_slider").slider({
|
||||
slide: function(evt, ui){
|
||||
changeOpacity(ui);
|
||||
}
|
||||
});
|
||||
|
||||
addDropDown('#zoom_dropdown', function() {
|
||||
var item = $(this);
|
||||
var val = item.attr('data-val');
|
||||
var res = svgCanvas.getResolution();
|
||||
var scrbar = 15;
|
||||
if(val) {
|
||||
var w_area = $('#workarea');
|
||||
var z_info = svgCanvas.setBBoxZoom(val, w_area.width()-scrbar, w_area.height()-scrbar);
|
||||
if(!z_info) return;
|
||||
var zoomlevel = z_info.zoom;
|
||||
var bb = z_info.bbox;
|
||||
$('#zoom').val(zoomlevel*100);
|
||||
setResolution(res.w * zoomlevel, res.h * zoomlevel);
|
||||
var scrLeft = bb.x * zoomlevel;
|
||||
var scrOffX = w_area.width()/2 - (bb.width * zoomlevel)/2;
|
||||
w_area[0].scrollLeft = Math.max(0,scrLeft - scrOffX);
|
||||
var scrTop = bb.y * zoomlevel;
|
||||
var scrOffY = w_area.height()/2 - (bb.height * zoomlevel)/2;
|
||||
w_area[0].scrollTop = Math.max(0,scrTop - scrOffY);
|
||||
} else {
|
||||
var percent = parseInt(item.text());
|
||||
$('#zoom').val(percent);
|
||||
var zoomlevel = percent/100;
|
||||
setResolution(res.w * zoomlevel, res.h * zoomlevel, true);
|
||||
svgCanvas.setZoom(zoomlevel);
|
||||
}
|
||||
}, true);
|
||||
|
||||
var clickSelect = function() {
|
||||
if (toolButtonClick('#tool_select')) {
|
||||
svgCanvas.setMode('select');
|
||||
|
|
@ -1517,6 +1537,7 @@ function svg_edit_setup() {
|
|||
$('#stroke_width').SpinButton({ min: 0, max: 99, step: 1, callback: changeStrokeWidth });
|
||||
$('#angle').SpinButton({ min: -180, max: 180, step: 5, callback: changeRotationAngle });
|
||||
$('#font_size').SpinButton({ step: 1, min: 0.001, stepfunc: stepFontSize, callback: changeFontSize });
|
||||
$('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity });
|
||||
$('#zoom').SpinButton({ min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, callback: changeZoom });
|
||||
|
||||
svgCanvas.setCustomHandlers = function(opts) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue