add actions (minimize, maximise, close)

src/app/panels/righthand-panel.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))

src/app/ui/draggableContent.js

@@ -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.containerDraggableModal}>
-      <div class="${css.headerDraggableModal} title">${title}</div>
+      <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)
+      }
     }
 }