add actions (minimize, maximise, close)

pull/1/head
yann300 6 years ago
parent f18ee02ecd
commit 014d2edf08
  1. 4
      src/app/panels/righthand-panel.js
  2. 51
      src/app/ui/draggableContent.js

@ -89,7 +89,9 @@ module.exports = class RighthandPanel {
})
self.loadPlugin = function (json) {
var modal = new DraggableContent()
var modal = new DraggableContent(() => {
self._components.pluginManager.unregister(json)
})
var tab = new PluginTab(json)
var content = tab.render()
document.querySelector('body').appendChild(modal.render(json.title, content))

@ -16,21 +16,46 @@ var css = csjs`
}
.headerDraggableModal {
padding: 10px;
cursor: move;
z-index: 10;
color: ${styles.appProperties.mainText_Color};
background-color: ${styles.appProperties.quaternary_BackgroundColor};
border-bottom: 2px solid ${styles.appProperties.solidBorderBox_BorderColor};
text-overflow: ellipsis;
overflow-x: hidden;
}
.modalActions {
float: right;
}
.modalAction {
padding-right: 1px;
padding-left: 1px;
cursor: pointer;
color: ${styles.appProperties.solidBorderBox_BorderColor};
}
`
module.exports =
class DraggableContent {
constructor (closeCb) {
this.closeCb = closeCb
}
render (title, content) {
this.content = content
var el = yo`
<div class=${css.containerDraggableModal} >
<div class="${css.headerDraggableModal} title">${title}</div>
<div class=${css.containerDraggableModal}>
<div>
<div class="${css.headerDraggableModal} title" title=${title}><span>${title}</span>
<div class=${css.modalActions}>
<i onclick=${() => { this.minimize() }} class="fa fa-window-minimize ${css.modalAction}"></i>
<i onclick=${() => { this.maximise() }} class="fa fa-window-maximize ${css.modalAction}"></i>
<i onclick=${() => { this.close() }} class="fa fa-window-close ${css.modalAction}"></i>
</div>
</div>
</div>
${content}
</div> `
dragElement(el)
@ -40,7 +65,25 @@ module.exports =
return el
}
setTitle (title) {
this.el.querySelector('.title').innerHTML = title
this.el.querySelector('.title span').innerHTML = title
}
minimize () {
this.content.style.display = 'none'
this.el.style.height = 'inherit'
this.el.style.width = '150px'
this.el.querySelector('.title').style.width = '146px'
}
maximise () {
this.content.style.display = 'block'
this.el.style.height = '500px'
this.el.style.width = '500px'
this.el.querySelector('.title').style.width = 'inherit'
}
close () {
if (this.closeCb) this.closeCb()
if (this.el.parentElement) {
this.el.parentElement.removeChild(this.el)
}
}
}

Loading…
Cancel
Save