From 984c10fb99671106dfeb13616a4230e3e4878e84 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 5 Mar 2016 23:37:27 +0000
Subject: [PATCH] Add a splitter to the top of the editor panel

The splitter allows the height of the editor to be adjusted by dragging
it up and down. The height defaults to the height of the 'main' tab
elements, and is reset to this when the editor is closed. The height
of the editor cannot be greater than the available space, and
cannot be less than 56px.
---
 src/gui/html/elements/loot-plugin-editor.html | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index c36d2294..5caa7bc6 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -29,6 +29,9 @@ loot-editor-close
       :host {
         position: relative;
         @apply(--shadow-elevation-2dp);
+        height: 264px;
+        min-height: 56px;
+        max-height: calc(100% - 56px);
       }
 
       /* Material Design for non-button icons. */
@@ -64,6 +67,10 @@ loot-editor-close
         margin-right: 16px;
         @apply(--layout-flex);
       }
+      iron-pages {
+        height: calc(100% - 104px);
+        overflow: auto;
+      }
       iron-pages > *:not(.iron-selected) {
         display: none;
       }
@@ -88,7 +95,19 @@ loot-editor-close
       paper-tab {
         --paper-tab-ink: var(--loot-accent-color);
       }
+      #splitter {
+        width: 100%;
+        height: 10px;
+        position: absolute;
+        top: -5px;
+        cursor: row-resize;
+        z-index: 1;
+      }
+      #splitter:active {
+        background: rgba(0, 0, 0, 0.12);
+      }
     </style>
+    <div id="splitter"></div>
     <paper-toolbar class="medium-tall">
       <div id="title">
         <content select="h1"></content>
@@ -211,12 +230,14 @@ loot-editor-close
         this.$.accept.addEventListener('click', this._onHideEditor);
         this.$.cancel.addEventListener('click', this._onHideEditor);
         this.$.tablePages.addEventListener('iron-deselect', this._onTablePageActivate);
+        this.$.splitter.addEventListener('track', this._onSplitterDrag);
       },
 
       detached() {
         this.$.accept.removeEventListener('click', this._onHideEditor);
         this.$.cancel.removeEventListener('click', this._onHideEditor);
         this.$.tablePages.removeEventListener('iron-deselect', this._onTablePageActivate);
+        this.$.splitter.removeEventListener('track', this._onSplitterDrag);
       },
 
       _onTablePageActivate() {
@@ -224,6 +245,13 @@ loot-editor-close
         this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
       },
 
+      _onSplitterDrag(evt) {
+        if (evt.detail.state === 'start') {
+          this.parentNode.host.style.height = parseInt(window.getComputedStyle(this.parentNode.host).height) + 'px';
+        }
+        this.parentNode.host.style.height = (parseInt(this.parentNode.host.style.height) - evt.detail.ddy) + 'px';
+      },
+
       _rowDataToMessage(rowData) {
         return {
           type: rowData.type,
@@ -306,6 +334,9 @@ loot-editor-close
         }
 
         if (isValid || evt.target.id !== 'accept') {
+          /* Reset height to default */
+          this.parentElement.parentNode.host.style.height = '264px';
+
           /* Fire the close event, saying whether or not to save data. */
           evt.target.dispatchEvent(new CustomEvent('loot-editor-close', {
             detail: evt.target.id === 'accept',