Merge pull request #1565 from ethereum/pluginFullSize

Plugin full size
pull/1/head
yann300 6 years ago committed by GitHub
commit f427491bd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      src/app/tabs/settings-tab.js
  2. 22
      src/app/ui/draggableContent.js

@ -118,7 +118,7 @@ module.exports = class SettingsTab {
self._view.config.plugins = yo`<div></div>`
self._view.config.plugin = yo`
<div class="${css.info}">
<div class=${css.title}>Plugin</div>
<div class=${css.title}>Plugin <i title="This section is still under heavy development, please use it carefully" class="${css.icon} fa fa-exclamation-triangle" aria-hidden="true"></i> </div>
<div class="${css.crowNoFlex}">
<div>Load plugin from JSON description: </div>
${self._view.pluginInput}

@ -8,25 +8,26 @@ var css = csjs`
.containerDraggableModal {
position: absolute;
z-index: 1000;
background-color: ${styles.appProperties.quaternary_BackgroundColor};
background-color: ${styles.appProperties.light_BackgroundColor};
text-align: center;
width: 500px;
height: 500px;
border: 2px solid ${styles.appProperties.solidBorderBox_BorderColor};
border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
}
.headerDraggableModal {
cursor: move;
z-index: 10;
color: ${styles.appProperties.mainText_Color};
background-color: ${styles.appProperties.quaternary_BackgroundColor};
border-bottom: 2px solid ${styles.appProperties.solidBorderBox_BorderColor};
background-color: ${styles.appProperties.primary_BackgroundColor};
border-bottom: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
text-overflow: ellipsis;
overflow-x: hidden;
}
.modalActions {
float: right;
color: ${styles.appProperties.solidBorderBox_BorderColor};
}
.modalAction {
@ -41,6 +42,7 @@ module.exports =
class DraggableContent {
constructor (closeCb) {
this.closeCb = closeCb
this.isMaximised = false
}
render (title, url, content) {
@ -52,7 +54,7 @@ module.exports =
<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>
<i onclick=${() => { this.close() }} class="fa fa-window-close-o ${css.modalAction}"></i>
</div>
</div>
</div>
@ -68,6 +70,7 @@ module.exports =
this.el.querySelector('.title span').innerHTML = title
}
minimize () {
this.isMaximised = false
this.content.style.display = 'none'
this.el.style.height = 'inherit'
this.el.style.width = '150px'
@ -75,8 +78,12 @@ module.exports =
}
maximise () {
this.content.style.display = 'block'
this.el.style.height = '500px'
this.el.style.width = '500px'
var body = document.querySelector('body')
this.el.style.height = this.isMaximised ? '500px' : body.offsetHeight + 'px'
this.el.style.width = this.isMaximised ? '500px' : body.offsetWidth + 'px'
this.isMaximised = !this.isMaximised
this.el.style.top = this.isMaximised ? '0%' : '20%'
this.el.style.left = this.isMaximised ? '0%' : '50%'
this.el.querySelector('.title').style.width = 'inherit'
}
close () {
@ -97,6 +104,7 @@ function dragElement (elmnt) {
function dragMouseDown (e) {
e = e || window.event
if (e.button !== 0) return
e.preventDefault()
// get the mouse cursor position at startup:
pos3 = e.clientX

Loading…
Cancel
Save