Moved opacity tool to bottom to allow multi-element opacity changes, changed styling of bottom tools
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1449 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
f8be6ee1a5
commit
cdcb2e76cb
|
|
@ -53,13 +53,14 @@
|
|||
border: 1px solid #808080;
|
||||
border-top: none;
|
||||
margin-top: 2px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
#svg_editor #stroke_bg,
|
||||
#svg_editor #fill_bg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 2px;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
#svg_editor #fill_color, #svg_editor #stroke_color {
|
||||
|
|
@ -67,10 +68,14 @@
|
|||
width: 16px;
|
||||
border: 1px solid #808080;
|
||||
cursor: pointer;
|
||||
margin-top: -19px;
|
||||
margin-top: -18px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
#tool_stroke select {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#svg_editor div#palette {
|
||||
float: left;
|
||||
width: 6848px;
|
||||
|
|
@ -82,7 +87,7 @@
|
|||
position:absolute;
|
||||
top: 75px;
|
||||
left: 40px;
|
||||
bottom: 60px;
|
||||
bottom: 62px;
|
||||
right: 14px;
|
||||
background-color: #A0A0A0;
|
||||
border: 1px solid #808080;
|
||||
|
|
@ -544,9 +549,6 @@ span.zoom_tool {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
#opacity_dropdown li {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
#svg_editor .tool_button,
|
||||
#svg_editor .push_button,
|
||||
|
|
@ -660,9 +662,10 @@ span.zoom_tool {
|
|||
#svg_editor #tools_bottom {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
height: 60px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 64px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#svg_editor #tools_bottom_1 {
|
||||
|
|
@ -671,15 +674,75 @@ span.zoom_tool {
|
|||
}
|
||||
|
||||
#svg_editor #tools_bottom_2 {
|
||||
width: 250px;
|
||||
width: 204px;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#svg_editor #color_tools {
|
||||
display: table;
|
||||
margin-top: 0px;
|
||||
border-spacing: 0 4px;
|
||||
clip: rect(0,0,10px,0);
|
||||
}
|
||||
|
||||
.color_tool {
|
||||
display: table-row;
|
||||
overflow: hidden;
|
||||
height: 26px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.color_tool > * {
|
||||
display: table-cell;
|
||||
background: #f0f0f0;
|
||||
padding: 0 5px;
|
||||
vertical-align: middle;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.color_tool > *:first-child {
|
||||
-moz-border-radius-topleft: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.color_tool > *:last-child {
|
||||
-moz-border-radius-topright: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
|
||||
}
|
||||
|
||||
#svg_editor #tool_opacity {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 2px;
|
||||
background: #f0f0f0;
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
#tool_opacity .dropdown button {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#opacity_dropdown li {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
|
||||
#svg_editor #tools_bottom_3 {
|
||||
}
|
||||
|
||||
#svg_editor #copyright {
|
||||
text-align: right;
|
||||
padding-right: .3em;
|
||||
}
|
||||
|
||||
#svg_source_editor {
|
||||
|
|
|
|||
|
|
@ -161,24 +161,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<input id="elem_id" class="attr_changer" data-attr="id" size="10" type="text" title="Identify the element"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toolset" id="tool_opacity">
|
||||
<label>
|
||||
<span id="group_opacityLabel">opac:</span>
|
||||
<input id="group_opacity" title="Change selected item opacity" size="3" value="100" type="text"/>
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<label id="tool_angle">
|
||||
<span id="angleLabel">angle:</span>
|
||||
|
|
@ -422,29 +404,61 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
</div>
|
||||
|
||||
<div id="tools_bottom_2">
|
||||
<table>
|
||||
<tr>
|
||||
<td id="fill_tool_bottom" class="label">fill:</td>
|
||||
<td><div id="fill_bg"></div><div id="fill_color" class="color_block" title="Change fill color"></div></td>
|
||||
<td colspan="3"><div id="fill_opacity" class="label">100%</div></td>
|
||||
</tr><tr>
|
||||
<td id="stroke_tool_bottom" class="label">stroke:</td>
|
||||
<td><div id="stroke_bg"></div><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
|
||||
<td><div id="stroke_opacity" class="label">100 %</div></td>
|
||||
<td>
|
||||
<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"/>
|
||||
</td>
|
||||
<td>
|
||||
<select id="stroke_style" title="Change stroke dash style">
|
||||
<option selected="selected" value="none">—</option>
|
||||
<option value="2,2">...</option>
|
||||
<option value="5,5">- -</option>
|
||||
<option value="5,2,2,2">- .</option>
|
||||
<option value="5,2,2,2,2,2">- ..</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="color_tools">
|
||||
<div class="color_tool" id="tool_fill">
|
||||
<label>
|
||||
fill:
|
||||
</label>
|
||||
<div class="color_block">
|
||||
<div id="fill_bg"></div>
|
||||
<div id="fill_color" class="color_block" title="Change fill color"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color_tool" id="tool_stroke">
|
||||
<label>
|
||||
stroke:
|
||||
</label>
|
||||
<div class="color_block">
|
||||
<div id="stroke_bg"></div>
|
||||
<div id="stroke_color" class="color_block" title="Change stroke color"></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<label>
|
||||
<select id="stroke_style" title="Change stroke dash style">
|
||||
<option selected="selected" value="none">—</option>
|
||||
<option value="2,2">...</option>
|
||||
<option value="5,5">- -</option>
|
||||
<option value="5,2,2,2">- .</option>
|
||||
<option value="5,2,2,2,2,2">- ..</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toolset" id="tool_opacity">
|
||||
<label>
|
||||
<span id="group_opacityLabel">opac:</span>
|
||||
<input id="group_opacity" title="Change selected item opacity" size="3" value="100" type="text"/>
|
||||
</label>
|
||||
<div id="opacity_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
<ul>
|
||||
<li>100% (no transparency)</li>
|
||||
<li>0%</li>
|
||||
<li>25%</li>
|
||||
<li>50%</li>
|
||||
<li>75%</li>
|
||||
<li>100%</li>
|
||||
<li class="special"><div id="opac_slider"></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="tools_bottom_3">
|
||||
|
|
|
|||
|
|
@ -1232,7 +1232,7 @@ function svg_edit_setup() {
|
|||
if($(this).find('div').length) return;
|
||||
var perc = parseInt($(this).text().split('%')[0]);
|
||||
changeOpacity(false, perc);
|
||||
});
|
||||
}, true);
|
||||
|
||||
// For slider usage, see: http://jqueryui.com/demos/slider/
|
||||
$("#opac_slider").slider({
|
||||
|
|
@ -1757,11 +1757,20 @@ function svg_edit_setup() {
|
|||
"div#workarea": {
|
||||
'left': {s: '27px', l: '46px', xl: '65px'},
|
||||
'top': {s: '50px', l: '88px', xl: '125px'},
|
||||
'bottom': {s: '51px', l: '68px', xl: '75px'}
|
||||
'bottom': {s: '55px', l: '70px', xl: '77px'}
|
||||
},
|
||||
"#tools_bottom": {
|
||||
'left': {s: '27px', l: '46px', xl: '65px'},
|
||||
'height': {s: '52px', l: '68px', xl: '75px'}
|
||||
'height': {s: '58px', l: '70px', xl: '77px'}
|
||||
},
|
||||
"#color_tools": {
|
||||
'border-spacing': {s: '0 1px'}
|
||||
},
|
||||
".color_tool": {
|
||||
'height': {s: '20px'}
|
||||
},
|
||||
"#tool_opacity": {
|
||||
'top': {s: '1px'}
|
||||
},
|
||||
"#tools_top input, #tools_bottom input": {
|
||||
'margin-top': {s: '2px', l: '4px', xl: '5px'},
|
||||
|
|
|
|||
Loading…
Reference in New Issue