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

improve dialog style

master
JFH 2021-05-12 23:48:41 +02:00
parent d40b45bcf3
commit e4283a79b9
14 changed files with 59 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/editor/components/seDropdown.js
View File

@ -40,7 +40,7 @@ class Dropdown extends ListComboBox {
::slotted(*) {
padding: 4px;
background: #E8E8E8;
border: 1px solid #B0B0B0;
border: 1px solid #5a6162;
width: 100%;
}
[part~="popup"] {

2
src/editor/components/seExplorerButton.js
View File

@ -67,7 +67,7 @@ template.innerHTML = `
.menu-item {
line-height: 1em;
padding: 0.5em;
border: 1px solid #B0B0B0;
border: 1px solid #5a6162;
background: #E8E8E8;
margin-bottom: -1px;
white-space: nowrap;

2
src/editor/dialogs/SePlainAlertDialog.js
View File

@ -52,7 +52,7 @@ export default class SePlainAlertDialog extends PlainAlertDialog {
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #B0B0B0;
border: 1px solid #5a6162;
padding: 1em;
border-radius: 5px;
-moz-border-radius: 5px;

16
src/editor/dialogs/editorPreferencesDialog.js
View File

@ -71,7 +71,8 @@ template.innerHTML = `
}
#svg_prefs #svg_prefs_container {
padding: 10px;
background-color: #B0B0B0;
background-color: #5a6162;
color: #c5c5c5;
border: 1px outset #777;
opacity: 1.0;
font-family: Verdana, Helvetica, sans-serif;
@ -84,6 +85,17 @@ template.innerHTML = `
overflow: auto;
}
#tool_prefs_save {
width: 30%;
background-color: #c79605;
margin-left: 20%;
}
#tool_prefs_cancel {
width: 30%;
background-color: #c8c8c8;
}
#svg_prefs #svg_docprops_prefs {
float: left;
width: 221px;
@ -138,11 +150,9 @@ template.innerHTML = `
<div id="svg_prefs_container">
<div id="tool_prefs_back" class="toolbar_button">
<button id="tool_prefs_save">
<img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
OK
</button>
<button id="tool_prefs_cancel">
<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
Cancel
</button>
</div>

8
src/editor/dialogs/exportDialog.js
View File

@ -6,10 +6,10 @@ template.innerHTML = `
#dialog_content {
margin: 10px 10px 5px 10px;
background: #DDD;
background: #5a6162;
overflow: auto;
text-align: left;
border: 1px solid #B0B0B0;
border: 1px solid #c8c8c8;
}
#dialog_content p, #dialog_content select, #dialog_content label {
@ -24,7 +24,7 @@ template.innerHTML = `
top: 50%;
max-width: 400px;
z-index: 50001;
background: #CCC;
background: #5a6162;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
@ -72,11 +72,9 @@ template.innerHTML = `
</div>
<div id="dialog_buttons">
<button id="export_ok">
<img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
Ok
</button>
<button id="export_cancel">
<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
Cancel
</button>
</div>

3
src/editor/dialogs/imagePropertiesDialog.js
View File

@ -16,7 +16,8 @@ template.innerHTML = `
}
#svg_docprops #svg_docprops_container {
padding: 10px;
background-color: #B0B0B0;
background-color: #5a6162;
color: #c5c5c5;
border: 1px outset #777;
opacity: 1.0;
font-family: Verdana, Helvetica, sans-serif;

18
src/editor/dialogs/svgSourceDialog.js
View File

@ -14,7 +14,8 @@ template.innerHTML = `
}
#svg_source_editor #svg_source_container {
background-color: #B0B0B0;
background-color: #5a6162;
color: #c5c5c5;
opacity: 1.0;
text-align: center;
border: 1px outset #777;
@ -42,18 +43,27 @@ template.innerHTML = `
#svg_source_editor #tool_source_back {
text-align: left;
margin: 5px 10px;
height: 30px;
}
#tool_source_save {
width: 20%;
background-color: #c79605;
margin-left: 30%;
margin-top: 5px;
}
#tool_source_cancel {
width: 20%;
background-color: #c8c8c8;
}
</style>
<elix-dialog id="svg_source_editor" aria-label="SVG Source Editor" closed>
<div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save">
<img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
Apply Changes
</button>
<button id="tool_source_cancel">
<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
Cancel
</button>
</div>

4
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@ -529,7 +529,7 @@ export default {
'bottom: 25px;' +
'min-width: 300px;' +
'min-height: 200px;' +
'background: #B0B0B0;' +
'background: #5a6162;' +
'border: 1px outset #777;' +
'}' +
'#imgbrowse h1 {' +
@ -567,7 +567,7 @@ export default {
'list-style: none;' +
'padding: .5em;' +
'background: #E8E8E8;' +
'border-bottom: 1px solid #B0B0B0;' +
'border-bottom: 1px solid #5a6162;' +
'line-height: 1.2em;' +
'font-style: sans-serif;' +
'}' +

2
src/editor/extensions/ext-mathjax/ext-mathjax.js
View File

@ -260,7 +260,7 @@ export default {
'position: absolute;' +
'top: 50px;' +
'padding: 10px;' +
'background-color: #B0B0B0;' +
'background-color: #5a6162;' +
'border: 1px outset #777;' +
'opacity: 1.0;' +
'font-family: Verdana, Helvetica, sans-serif;' +

4
src/editor/extensions/ext-storage/storageDialog.js
View File

@ -9,7 +9,7 @@ template.innerHTML = `
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #B0B0B0;
border: 1px solid #5a6162;
}
#dialog_content p, #dialog_content select, #dialog_content label {
@ -24,7 +24,7 @@ template.innerHTML = `
top: 50%;
max-width: 400px;
z-index: 50001;
background: #CCC;
background: #5a6162;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;

3
src/editor/images/textmarker_bottom.svg
View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path stroke-width="4" stroke="#f9bc01" fill="none" d="M 0 30 h 100 z M 30 40 h 40 v 20 h -40 z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 0 B

After

Width:  |  Height:  |  Size: 172 B

4
src/editor/images/textmarker_top.svg
View File

@ -1,3 +1,3 @@
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path stroke-width="4" stroke="#f9bc01" fill="none" d="M 0 60 h 100 z M 30 30 h 40 v 20 h -40 z"/>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 B

After

Width:  |  Height:  |  Size: 172 B

11
src/editor/images/tool_placemark.svg
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -1 110 110">
<line fill="none" id="svg_4" marker-start="url(#se_marker_start_svg_4)" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" x1="0" x2="42.58373" y1="0" y2="56.42415"/>
<line fill="none" id="svg_5" stroke="#000000" stroke-linecap="round" stroke-width="5" x1="99.99999" x2="42.58373" y1="56.42415" y2="56.42415"/>
<rect fill="none" height="26.47059" id="svg_2" stroke="#000000" stroke-dasharray="10,10" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" width="55.02392" x="44.01914" y="16.71827"/>
<rect fill="none" height="32.73994" id="svg_3" stroke="#000000" stroke-dasharray="10,10" stroke-linecap="round" stroke-linejoin="null" stroke-width="5" width="55.98086" x="44.01914" y="67.56966"/>
<defs>
<marker class="leftarrow" id="se_marker_start_svg_4" markerHeight="5" markerUnits="strokeWidth" markerWidth="5" orient="auto" refX="0" refY="50" viewBox="0 0 100 100">
<path d="m0,50l100,40l-30,-40l30,-40l-100,40z" fill="#000000" id="svg_1" stroke="#000000" stroke-width="10"/>
</marker>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 0 B

After

Width:  |  Height:  |  Size: 1.2 KiB

35
src/editor/svgedit.css
View File

@ -471,7 +471,7 @@ input[type=text] {
border-top: 1px solid var(--border-color);
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
background-color: #B0B0B0;
background-color: #5a6162;
}
.dropdown ul {
@ -495,7 +495,7 @@ input[type=text] {
width: 120px;
padding: 4px;
background: #E8E8E8;
border: 1px solid #B0B0B0;
border: 1px solid #5a6162;
margin: 0 0 -1px 0;
line-height: 16px;
}
@ -625,10 +625,6 @@ ul li.current {
padding-right: .3em;
}
#svg_source_editor {
display: none;
}
.overlay {
position: absolute;
top: 0;
@ -640,19 +636,6 @@ ul li.current {
z-index: 5;
}
#svg_source_editor #svg_source_container {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background-color: #B0B0B0;
opacity: 1.0;
text-align: center;
border: 1px outset #777;
z-index: 6;
}
#save_output_btns {
display: none;
text-align: left;
@ -668,20 +651,6 @@ ul li.current {
margin-left: 30px;
}
#svg_docprops #svg_docprops_container,
#svg_prefs #svg_prefs_container {
position: absolute;
top: 50px;
padding: 10px;
background-color: #B0B0B0;
border: 1px outset #777;
opacity: 1.0;
/* width: 450px;*/
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
z-index: 20001;
}
/* ------------ */
.dropdown li.tool_button {