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

fix icons

master
jfh 2020-11-01 13:36:23 +01:00
parent 6401016e13
commit 2b5eef735a
6 changed files with 32 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/editor/components/seButton.js
View File

@ -27,7 +27,6 @@ template.innerHTML = `
} }
img { img {
border: none; border: none;
overflow: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

29
src/editor/components/seFlyingButton.js
View File

@ -13,7 +13,6 @@ template.innerHTML = `
border: none; border: none;
width: 24px; width: 24px;
height: 24px; height: 24px;
overflow: none;
} }
.pressed { .pressed {
background-color: #F4E284 !important; background-color: #F4E284 !important;
@ -54,29 +53,12 @@ template.innerHTML = `
background: none !important; background: none !important;
} }
.menu-item { .menu-item {
display: inline; align-content: flex-start;
height: 24px; height: 24px;
width: 24px; width: 24px;
margin: 2px 2px 4px;
padding: 3px;
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
background-color: #E8E8E8;
cursor: pointer;
top:0px; top:0px;
left:0px; left:0px;
} }
.open .item1 {
transition-duration: 190ms;
}
.open .item2 {
transition-duration: 290ms;
}
.open .item3 {
transition-duration: 390ms;
}
.open .item4 {
transition-duration: 490ms;
}
</style> </style>
<div "> <div ">
@ -105,15 +87,10 @@ export class FlyingButton extends HTMLElement {
// locate the component // locate the component
this.$open = this._shadowRoot.querySelector('.menu-button'); this.$open = this._shadowRoot.querySelector('.menu-button');
this.$img = this._shadowRoot.querySelector('img'); this.$img = this._shadowRoot.querySelector('img');
this.$menu = this._shadowRoot.querySelector('.menu');
// the last element of the div is the slot // the last element of the div is the slot
// we retrieve all elements added in the slot (i.e. se-buttons) // we retrieve all elements added in the slot (i.e. se-buttons)
this.$elements = this.$open.lastElementChild.assignedElements(); this.$elements = this.$menu.lastElementChild.assignedElements();
this.$elements[0].style.transitionDuration = '190ms';
this.$elements[0].style.transform = 'translate(2px,-3px)';
this.$elements[1].style.transitionDuration = '`2500ms';
this.$elements[1].style.transform = 'translate(0px,-3px)';
this.$elements[2].style.transitionDuration = '`2500ms';
this.$elements[2].style.transform = 'translate(0px,-3px)';
} }
/** /**
* @function observedAttributes * @function observedAttributes

16
src/editor/images/fh_rect.svg
View File

@ -0,0 +1,16 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<defs>
<linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
<stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
</linearGradient>
<linearGradient y2="0.3945" x2="0.6132" y1="0.1093" x1="0.3046" id="svg_9">
<stop stop-opacity="1" stop-color="#f9d225" offset="0"/>
<stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
</linearGradient>
</defs>
<rect stroke-width="2" stroke="#000000" fill="url(#svg_2)" x="3.25" y="25.75" width="46" height="25"/>
<path stroke-width="2" stroke="#000000" fill="url(#svg_9)" d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5"/>
<path stroke-width="2" stroke="#000000" fill="#fce0a9" d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z"/>
<path stroke-width="2" stroke="#000000" fill="#000000" d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 0 B

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/editor/images/freehand-circle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

16
src/editor/images/freehand-square.svg
View File

@ -1,16 +0,0 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<defs>
<linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
<stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
</linearGradient>
<linearGradient y2="0.3945" x2="0.6132" y1="0.1093" x1="0.3046" id="svg_9">
<stop stop-opacity="1" stop-color="#f9d225" offset="0"/>
<stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
</linearGradient>
</defs>
<rect stroke-width="2" stroke="#000000" fill="url(#svg_2)" x="3.25" y="25.75" width="46" height="25"/>
<path stroke-width="2" stroke="#000000" fill="url(#svg_9)" d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5"/>
<path stroke-width="2" stroke="#000000" fill="#fce0a9" d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z"/>
<path stroke-width="2" stroke="#000000" fill="#000000" d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

18
src/editor/index.html
View File

@ -385,12 +385,20 @@
<div id="tools_left" class="tools_panel"> <div id="tools_left" class="tools_panel">
<se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button> <se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button>
<se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button> <se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button>
<se-flyingbutton id="test" title="Line Tool" src="./images/pen.svg"> <se-flyingbutton id="_tools_line_show" title="Line Tool (L)/Connect two objects" src="./images/pen.svg">
<se-button id="tool_fhath" title="1" src="./images/logo.svg" shortcut="Q"></se-button> <se-button id="_tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
<se-button id="tool_fhpth" title="2" src="./images/logo.svg" shortcut="Q"></se-button> <se-button id="_mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
<se-button id="tool_fhpth" title="3" src="./images/logo.svg" shortcut="Q"></se-button> </se-flyingbutton>
<se-flyingbutton id="_tools_rect_show" title="Square/Rect Tool" src="./images/rect.svg">
<se-button id="_tool_rect" title="Rectangle" src="./images/rect.svg"></se-button>
<se-button id="_tool_square" title="Square" src="./images/square.svg"></se-button>
<se-button id="_tool_fhrect" title="Free-Hand Rectangle" src="./images/fh_rect.svg"></se-button>
</se-flyingbutton>
<se-flyingbutton id="_tools_ellipse_show" title="Ellipse/Circle Tool" src="./images/ellipse.svg">
<se-button id="_tool_ellipse" title="Rectangle" src="./images/ellipse.svg"></se-button>
<se-button id="_tool_circle" title="Square" src="./images/circle.svg"></se-button>
<se-button id="_tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>
</se-flyingbutton> </se-flyingbutton>
<se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button> <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
<se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button> <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
<se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button> <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>