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);
+ }
+
@@ -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',