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

Fix image paths (#813) 

* Update seExplorerButton.js

* Update seFlyingButton.js

* Fix linter
master
pmkrawczyk 2022-07-05 22:02:32 +02:00 committed by GitHub
parent 53f3f7e14a
commit cdc85a515b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 201 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,103 +1,5 @@
/* globals svgEditor */ /* globals svgEditor */
const template = document.createElement('template')
template.innerHTML = `
<style>
:host {
position:relative;
}
.menu-button:hover, se-button:hover, .menu-item:hover
{
background-color: var(--icon-bg-color-hover);
}
img {
border: none;
width: 24px;
height: 24px;
}
.overall.pressed .button-icon,
.overall.pressed,
.menu-item.pressed {
background-color: var(--icon-bg-color-hover) !important;
}
.overall.pressed .menu-button {
background-color: var(--icon-bg-color-hover) !important;
}
.disabled {
opacity: 0.3;
cursor: default;
}
.menu-button {
height: 24px;
width: 24px;
margin: 2px 1px 4px;
padding: 3px;
background-color: var(--icon-bg-color);
cursor: pointer;
position: relative;
border-radius: 3px;
overflow: hidden;
}
.handle {
height: 8px;
width: 8px;
background-image: url(./images/handle.svg);
position:absolute;
bottom: 0px;
right: 0px;
}
.button-icon {
}
.menu {
position: fixed;
margin-left: 34px;
background: none !important;
display:none;
top: 30%;
left: 171px;
}
.image-lib {
position: fixed;
left: 34px;
top: 30%;
background: #E8E8E8;
display: none;
flex-wrap: wrap;
flex-direction: row;
width: 170px;
}
.menu-item {
line-height: 1em;
padding: 0.5em;
border: 1px solid #5a6162;
background: #E8E8E8;
margin-bottom: -1px;
white-space: nowrap;
}
.open-lib {
display: inline-flex;
}
.open {
display: block;
}
.overall {
background: none !important;
}
</style>
<div class="overall">
<div class="menu-button">
<img class="button-icon" src="explorer.svg" alt="icon">
<div class="handle"></div>
</div>
<div class="image-lib"">
<se-button></se-button>
</div>
<div class="menu">
<div class="menu-item">menu</div>
</div>
</div>
`
/** /**
* @class ExplorerButton * @class ExplorerButton
*/ */
@ -108,8 +10,11 @@ export class ExplorerButton extends HTMLElement {
constructor () { constructor () {
super() super()
// create the shadowDom and insert the template // create the shadowDom and insert the template
// create the shadowDom and insert the template
this.imgPath = svgEditor.configObj.curConfig.imgPath
this.template = this.createTemplate(this.imgPath)
this._shadowRoot = this.attachShadow({ mode: 'open' }) this._shadowRoot = this.attachShadow({ mode: 'open' })
this._shadowRoot.append(template.content.cloneNode(true)) this._shadowRoot.append(this.template.content.cloneNode(true))
// locate the component // locate the component
this.$button = this._shadowRoot.querySelector('.menu-button') this.$button = this._shadowRoot.querySelector('.menu-button')
this.$overall = this._shadowRoot.querySelector('.overall') this.$overall = this._shadowRoot.querySelector('.overall')
@ -122,6 +27,113 @@ export class ExplorerButton extends HTMLElement {
this.imgPath = svgEditor.configObj.curConfig.imgPath this.imgPath = svgEditor.configObj.curConfig.imgPath
} }
/**
* @function createTemplate
* @param {string} imgPath
* @returns {any} template
*/
createTemplate (imgPath) {
const template = document.createElement('template')
template.innerHTML = `
<style>
:host {
position:relative;
}
.menu-button:hover, se-button:hover, .menu-item:hover
{
background-color: var(--icon-bg-color-hover);
}
img {
border: none;
width: 24px;
height: 24px;
}
.overall.pressed .button-icon,
.overall.pressed,
.menu-item.pressed {
background-color: var(--icon-bg-color-hover) !important;
}
.overall.pressed .menu-button {
background-color: var(--icon-bg-color-hover) !important;
}
.disabled {
opacity: 0.3;
cursor: default;
}
.menu-button {
height: 24px;
width: 24px;
margin: 2px 1px 4px;
padding: 3px;
background-color: var(--icon-bg-color);
cursor: pointer;
position: relative;
border-radius: 3px;
overflow: hidden;
}
.handle {
height: 8px;
width: 8px;
background-image: url(${imgPath}/handle.svg);
position:absolute;
bottom: 0px;
right: 0px;
}
.button-icon {
}
.menu {
position: fixed;
margin-left: 34px;
background: none !important;
display:none;
top: 30%;
left: 171px;
}
.image-lib {
position: fixed;
left: 34px;
top: 30%;
background: #E8E8E8;
display: none;
flex-wrap: wrap;
flex-direction: row;
width: 170px;
}
.menu-item {
line-height: 1em;
padding: 0.5em;
border: 1px solid #5a6162;
background: #E8E8E8;
margin-bottom: -1px;
white-space: nowrap;
}
.open-lib {
display: inline-flex;
}
.open {
display: block;
}
.overall {
background: none !important;
}
</style>
<div class="overall">
<div class="menu-button">
<img class="button-icon" src="explorer.svg" alt="icon">
<div class="handle"></div>
</div>
<div class="image-lib"">
<se-button></se-button>
</div>
<div class="menu">
<div class="menu-item">menu</div>
</div>
</div>`
return template
}
/** /**
* @function observedAttributes * @function observedAttributes
* @returns {any} observed * @returns {any} observed

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

@ -1,85 +1,6 @@
/* globals svgEditor */ /* globals svgEditor */
import { t } from '../locale.js' import { t } from '../locale.js'
const template = document.createElement('template')
template.innerHTML = `
<style>
:host {
position:relative;
}
.overall:hover *
{
background-color: var(--icon-bg-color-hover);
}
img {
border: none;
width: 24px;
height: 24px;
}
.overall.pressed .button-icon,
.overall.pressed .handle {
background-color: var(--icon-bg-color-hover) !important;
}
.overall.pressed .menu-button {
background-color: var(--icon-bg-color-hover) !important;
}
.disabled {
opacity: 0.3;
cursor: default;
}
.menu-button {
height: 24px;
width: 24px;
margin: 2px 1px 4px;
padding: 3px;
background-color: var(--icon-bg-color);
cursor: pointer;
position: relative;
border-radius: 3px;
overflow: hidden;
}
.handle {
height: 8px;
width: 8px;
background-image: url(./images/handle.svg);
position:absolute;
bottom: 0px;
right: 0px;
}
.button-icon {
}
.menu {
position: fixed;
background: none !important;
display:none;
margin-left: 34px;
}
.open {
display: flex;
}
.menu-item {
align-content: flex-start;
height: 24px;
width: 24px;
top:0px;
left:0px;
}
.overall {
background: none !important;
}
</style>
<div class="overall">
<div class="menu">
<slot></slot>
</div>
<div class="menu-button">
<img class="button-icon" src="logo.svg" alt="icon">
<div class="handle"></div>
</div>
</div>
`
/** /**
* @class FlyingButton * @class FlyingButton
*/ */
@ -90,8 +11,10 @@ export class FlyingButton extends HTMLElement {
constructor () { constructor () {
super() super()
// create the shadowDom and insert the template // create the shadowDom and insert the template
this.imgPath = svgEditor.configObj.curConfig.imgPath
this.template = this.createTemplate(this.imgPath)
this._shadowRoot = this.attachShadow({ mode: 'open' }) this._shadowRoot = this.attachShadow({ mode: 'open' })
this._shadowRoot.append(template.content.cloneNode(true)) this._shadowRoot.append(this.template.content.cloneNode(true))
// locate the component // locate the component
this.$button = this._shadowRoot.querySelector('.menu-button') this.$button = this._shadowRoot.querySelector('.menu-button')
this.$handle = this._shadowRoot.querySelector('.handle') this.$handle = this._shadowRoot.querySelector('.handle')
@ -101,7 +24,93 @@ export class FlyingButton extends HTMLElement {
// 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.$menu.lastElementChild.assignedElements() this.$elements = this.$menu.lastElementChild.assignedElements()
this.imgPath = svgEditor.configObj.curConfig.imgPath }
/**
* @function createTemplate
* @param {string} imgPath
* @returns {any} template
*/
createTemplate (imgPath) {
const template = document.createElement('template')
template.innerHTML = `
<style>
:host {
position:relative;
}
.overall:hover *
{
background-color: var(--icon-bg-color-hover);
}
img {
border: none;
width: 24px;
height: 24px;
}
.overall.pressed .button-icon,
.overall.pressed .handle {
background-color: var(--icon-bg-color-hover) !important;
}
.overall.pressed .menu-button {
background-color: var(--icon-bg-color-hover) !important;
}
.disabled {
opacity: 0.3;
cursor: default;
}
.menu-button {
height: 24px;
width: 24px;
margin: 2px 1px 4px;
padding: 3px;
background-color: var(--icon-bg-color);
cursor: pointer;
position: relative;
border-radius: 3px;
overflow: hidden;
}
.handle {
height: 8px;
width: 8px;
background-image: url(${imgPath}/handle.svg);
position:absolute;
bottom: 0px;
right: 0px;
}
.button-icon {
}
.menu {
position: fixed;
background: none !important;
display:none;
margin-left: 34px;
}
.open {
display: flex;
}
.menu-item {
align-content: flex-start;
height: 24px;
width: 24px;
top:0px;
left:0px;
}
.overall {
background: none !important;
}
</style>
<div class="overall">
<div class="menu">
<slot></slot>
</div>
<div class="menu-button">
<img class="button-icon" src="logo.svg" alt="icon">
<div class="handle"></div>
</div>
</div>`
return template
} }
/** /**