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

improve bottom bar

master
JFH 2021-01-02 21:52:27 +01:00
parent 47bf324121
commit 83ee29c37e
3 changed files with 20 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/editor/components/seList.js
View File

@ -8,13 +8,11 @@ template.innerHTML = `
grid-template-columns: 20px 1fr auto; grid-template-columns: 20px 1fr auto;
} }
::slotted(*) { ::slotted(*) {
padding: 4px;
background: #E8E8E8; background: #E8E8E8;
border: 1px solid #B0B0B0; border: 1px solid #B0B0B0;
width: 100%;
} }
[part~="popup"] { ::part(popup-toggle) {
width: 150%; display: none;
} }
</style> </style>
<label>Label</label> <label>Label</label>

14
src/editor/index.html
View File

@ -340,7 +340,7 @@
</se-zoom> </se-zoom>
<se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker> <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker> <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1" label=""></se-spin-input> <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width" label=""></se-spin-input>
<se-list id="stroke_style" title="Change stroke dash style" label=""> <se-list id="stroke_style" title="Change stroke dash style" label="">
<se-list-item value="none">&#8212;</se-list-item> <se-list-item value="none">&#8212;</se-list-item>
<se-list-item value="2,2">...</se-list-item> <se-list-item value="2,2">...</se-list-item>
@ -349,14 +349,14 @@
<se-list-item value="5,2,2,2,2,2">- ..</se-list-item> <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
</se-list> </se-list>
<se-list id="stroke_linejoin" title="Linejoin: Miter" label=""> <se-list id="stroke_linejoin" title="Linejoin: Miter" label="">
<se-list-item id="linejoin_miter"><se-button size="small" title="Linejoin: Miter" src="./images/linejoin_miter.svg"></se-button></se-list-item> <se-list-item id="linejoin_miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.svg" height="22px"></img></se-list-item>
<se-list-item id="linejoin_round"><se-button size="small" title="Linejoin: Round" src="./images/linejoin_round.svg"></se-button></se-list-item> <se-list-item id="linejoin_round"><img title="Linejoin: Round" src="./images/linejoin_round.svg" height="22px"></img></se-list-item>
<se-list-item id="linejoin_bevel"><se-button size="small" title="Linejoin: Bevel" src="./images/linejoin_bevel.svg"></se-button></se-list-item> <se-list-item id="linejoin_bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg" height="22px"></img></se-list-item>
</se-list> </se-list>
<se-list id="stroke_linecap" title="Linecap: Butt" label=""> <se-list id="stroke_linecap" title="Linecap: Butt" label="">
<se-list-item id="linecap_butt"><se-button size="small" title="Linecap: Butt" src="./images/linecap_butt.svg"></se-button></se-list-item> <se-list-item id="linecap_butt"><img title="Linecap: Butt" src="./images/linecap_butt.svg" height="22px"></img></se-list-item>
<se-list-item id="linecap_square"><se-button size="small" title="Linecap: Square" src="./images/linecap_square.svg"></se-button></se-list-item> <se-list-item id="linecap_square"><img title="Linecap: Square" src="./images/linecap_square.svg" height="22px"></img></se-list-item>
<se-list-item id="linecap_round"><se-button size="small" title="Linecap: Round" src="./images/linecap_round.svg"></se-button></se-list-item> <se-list-item id="linecap_round"><img title="Linecap: Round" src="./images/linecap_round.svg" height="22px"></img></se-list-item>
</se-list> </se-list>
<se-list id="opacity_dropdown" label=""> <se-list id="opacity_dropdown" label="">
<se-list-item>0%</se-list-item> <se-list-item>0%</se-list-item>

37
src/editor/svgedit.css
View File

@ -486,7 +486,7 @@ div.toolset label span {
margin-left: 5px; margin-left: 5px;
} }
#tools_top se-input, se-spin-input { #tools_top se-input, #tools_top se-spin-input {
margin-top: 5px; margin-top: 5px;
height: 15px; height: 15px;
} }
@ -638,6 +638,16 @@ input[type=text] {
float: left; float: left;
} }
#tools_bottom se-spin-input {
float: left;
vertical-align: middle;
}
.bottom-icon {
width: 22px;
}
#palette { #palette {
float: right; float: right;
} }
@ -679,31 +689,6 @@ input[type=text] {
overflow: visible; overflow: visible;
} }
@media screen and (max-width:1250px) {
#tools_top {
height: 71px;
}
#workarea, #sidepanels {
top: 70px;
}
#rulers #ruler_corner,
#rulers #ruler_x, #tools_left {
top: 71px;
}
#rulers #ruler_y {
top: 86px;
}
#cur_context_panel {
top: 87px;
}
#selected_panel {
clear: right;
}
}
/*–––––––––––––––––––––––––––––––––––––*/ /*–––––––––––––––––––––––––––––––––––––*/
#option_lists ul { #option_lists ul {