From 880cbb3373fad3a230da728c78e08ae3962648ae Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 5 Mar 2016 16:19:10 +0000
Subject: [PATCH] Move metadata editor out of card list

Replace the per-card metadata editors with a single metadata editor that
is displayed below the card list, fixed to the bottom of the window.

Remove the CRC, version and plugin icons from the editor. Change the
editor toolbar background to a light blue, and remove the content area
borders.
---
 src/gui/html/css/typography.css               |   1 -
 src/gui/html/elements/loot-plugin-card.html   | 186 ++++--------------
 src/gui/html/elements/loot-plugin-editor.html |  61 +-----
 src/gui/html/index.html                       |   3 +
 src/gui/html/js/events.js                     | 121 ++++++------
 src/gui/html/js/l10n.js                       |   5 -
 6 files changed, 108 insertions(+), 269 deletions(-)

diff --git a/src/gui/html/css/typography.css b/src/gui/html/css/typography.css
index 44a62702..63bba52b 100644
--- a/src/gui/html/css/typography.css
+++ b/src/gui/html/css/typography.css
@@ -127,7 +127,6 @@ html {
 }
 h1 {
     font-weight: 400;
-    color: rgba(0, 0, 0, 0.54);
 }
 #summary > h1 {
     font-size: 1.143rem;
diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index 1ab20efa..adeb616e 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -32,44 +32,19 @@ loot-clear-metadata
 <dom-module id="loot-plugin-card">
   <template>
     <style>
-      /* Host and front/editor styling. */
+      /* Host styling. */
       #wrapper {
         display: block;
         background: white;
         margin: 0 8px 8px 8px;
         position: relative;
-        transition: 0.6s;
-        transform-style: preserve-3d;
       }
       :host(.highlight) #wrapper {
         outline: 4px solid var(--loot-accent-color);
       }
-      :host(.search-result) #wrapper > * {
+      :host(.search-result) #wrapper {
         box-shadow: inset 4px 0 var(--loot-primary-color);
       }
-      #front {
-        display: block;
-        backface-visibility: hidden;
-      }
-      #editor {
-        transform: rotateY(180deg);
-        display:none;
-        backface-visibility: hidden;
-      }
-
-      /* Flip animation styling. */
-      :host(.flip) #wrapper {
-        transform: rotateY(180deg);
-      }
-      :host(.flip) #front  {
-        display: none;
-      }
-      :host(.flip) #editor  {
-        display: block;
-      }
-      :host(.fastflip) #wrapper {
-        transition-duration: 1ms;
-      }
 
       /* Icon styling. */
       iron-icon {
@@ -138,53 +113,46 @@ loot-clear-metadata
       }
     </style>
     <paper-material id="wrapper" elevation="1">
-      <section id="front">
-        <paper-toolbar>
-          <iron-icon id="activeTick" icon="check"></iron-icon>
-          <paper-tooltip for="activeTick">Active Plugin</paper-tooltip>
-          <div id="title">
-            <content select="h1"></content>
-            <content select=".version"></content>
-            <content select=".crc"></content>
-          </div>
-          <iron-icon id="isMaster" icon="loot-custom-icons:crown"></iron-icon>
-          <paper-tooltip for="isMaster">Master File</paper-tooltip>
-          <iron-icon id="isEmpty" icon="visibility-off"></iron-icon>
-          <paper-tooltip for="isEmpty">Empty Plugin</paper-tooltip>
-          <iron-icon id="loadsArchive" icon="attachment"></iron-icon>
-          <paper-tooltip for="loadsArchive">Loads Archive</paper-tooltip>
-          <iron-icon id="hasUserEdits" icon="account-circle"></iron-icon>
-          <paper-tooltip for="hasUserEdits">Has User Metadata</paper-tooltip>
-          <paper-menu-button id="menu" horizontal-align="right">
-            <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
-            <loot-menu class="dropdown-content">
-              <paper-toggle-button id="showOnlyConflicts" checked="{{data.isConflictFilterChecked}}">Show Only Conflicts</paper-toggle-button>
-              <paper-icon-item id="editMetadata">
-                <iron-icon icon="create" item-icon></iron-icon>
-                Edit Metadata
-              </paper-icon-item>
-              <paper-icon-item id="copyMetadata">
-                <iron-icon icon="content-copy" item-icon></iron-icon>
-                Copy Metadata
-              </paper-icon-item>
-              <paper-icon-item id="clearMetadata">
-                <iron-icon icon="delete" item-icon></iron-icon>
-                Clear User Metadata
-              </paper-icon-item>
-            </loot-menu>
-          </paper-menu-button>
-        </paper-toolbar>
-        <div id="content">
-          <content select=".tag.add"></content>
-          <content select=".tag.remove"></content>
-          <content></content>
+      <paper-toolbar>
+        <iron-icon id="activeTick" icon="check"></iron-icon>
+        <paper-tooltip for="activeTick">Active Plugin</paper-tooltip>
+        <div id="title">
+          <content select="h1"></content>
+          <content select=".version"></content>
+          <content select=".crc"></content>
         </div>
-      </section>
-      <loot-plugin-editor id="editor">
-        <h1>[[data.name]]</h1>
-        <span class="version"></span>
-        <span class="crc"></span>
-      </loot-plugin-editor>
+        <iron-icon id="isMaster" icon="loot-custom-icons:crown"></iron-icon>
+        <paper-tooltip for="isMaster">Master File</paper-tooltip>
+        <iron-icon id="isEmpty" icon="visibility-off"></iron-icon>
+        <paper-tooltip for="isEmpty">Empty Plugin</paper-tooltip>
+        <iron-icon id="loadsArchive" icon="attachment"></iron-icon>
+        <paper-tooltip for="loadsArchive">Loads Archive</paper-tooltip>
+        <iron-icon id="hasUserEdits" icon="account-circle"></iron-icon>
+        <paper-tooltip for="hasUserEdits">Has User Metadata</paper-tooltip>
+        <paper-menu-button id="menu" horizontal-align="right">
+          <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
+          <loot-menu class="dropdown-content">
+            <paper-toggle-button id="showOnlyConflicts" checked="{{data.isConflictFilterChecked}}">Show Only Conflicts</paper-toggle-button>
+            <paper-icon-item id="editMetadata">
+              <iron-icon icon="create" item-icon></iron-icon>
+              Edit Metadata
+            </paper-icon-item>
+            <paper-icon-item id="copyMetadata">
+              <iron-icon icon="content-copy" item-icon></iron-icon>
+              Copy Metadata
+            </paper-icon-item>
+            <paper-icon-item id="clearMetadata">
+              <iron-icon icon="delete" item-icon></iron-icon>
+              Clear User Metadata
+            </paper-icon-item>
+          </loot-menu>
+        </paper-menu-button>
+      </paper-toolbar>
+      <div id="content">
+        <content select=".tag.add"></content>
+        <content select=".tag.remove"></content>
+        <content></content>
+      </div>
     </paper-material>
   </template>
   <script>
@@ -208,42 +176,19 @@ loot-clear-metadata
       attached() {
         this.$.showOnlyConflicts.addEventListener('change', this._onShowOnlyConflicts);
         this.$.editMetadata.addEventListener('click', this.onShowEditor);
-        this.$.editor.addEventListener('loot-editor-close', this._onHideEditor);
         this.$.copyMetadata.addEventListener('click', this._onCopyMetadata);
         this.$.clearMetadata.addEventListener('click', this._onClearMetadata);
-
-        this.addEventListener('transitionend', this._onFlipEnd);
       },
 
       detached() {
         this.$.showOnlyConflicts.removeEventListener('change', this._onShowOnlyConflicts);
         this.$.editMetadata.removeEventListener('click', this.onShowEditor);
-        this.$.editor.removeEventListener('loot-editor-close', this._onHideEditor);
         this.$.copyMetadata.removeEventListener('click', this._onCopyMetadata);
         this.$.clearMetadata.removeEventListener('click', this._onClearMetadata);
-
-        this.removeEventListener('transitionend', this._onFlipEnd);
       },
 
       _dataChanged(newValue, oldValue) {
         if (newValue) {
-          if (newValue.isEditorOpen) {
-            /* Record existing data. */
-            if (oldValue) {
-              oldValue.editor = this.readFromEditor(oldValue);
-            }
-            /* Share the data with the editor. */
-            this.$.editor.setEditorData(newValue);
-          }
-
-          /* Set the card flip state. */
-          if (this.classList.contains('flip') !== newValue.isEditorOpen) {
-            /* Temporarily speed up the flip effect, as otherwise fast
-               scrolling lets the user see the end of it. */
-            this.classList.add('fastflip');
-            this.classList.toggle('flip');
-          }
-
           /* Initialise the card content data. */
           this.updateContent(true);
           this.updateStyling();
@@ -296,10 +241,8 @@ loot-clear-metadata
           const cardContent = this.data.getCardContent(loot.filters);
 
           this.getElementsByClassName('version')[0].textContent = cardContent.version;
-          this.$.editor.getElementsByClassName('version')[0].textContent = cardContent.version;
 
           this.getElementsByClassName('crc')[0].textContent = cardContent.crc;
-          this.$.editor.getElementsByClassName('crc')[0].textContent = cardContent.crc;
 
           if (updateBodyContent) {
             this._setTagsContent(cardContent.tags);
@@ -327,56 +270,11 @@ loot-clear-metadata
         return this.getElementsByTagName('h1')[0].textContent;
       },
 
-      _onFlipEnd() {
-        /* Remove fastflip class if present. This also fires when the menu is
-           opened or closed, but that isn't an issue. */
-        this.classList.remove('fastflip');
-      },
-
       onShowEditor() {
-        let card;
-        if (this.tagName === 'LOOT-PLUGIN-CARD') {
-          card = this;
-        } else {
-          card = getMenuItemCard(this);
-        }
-
-        /* If the editor hasn't already been opened, its data is not yet set, so do that now. */
-        if (!card.data.isEditorOpen && !card.data.editor) {
-          card.$.editor.setEditorData(card.data);
-        }
-
-        card.data.isEditorOpen = true;
-
-        card.classList.toggle('flip');
-
         /* Fire an open event, so that the UI can enter edit mode. */
-        card.dispatchEvent(new CustomEvent('loot-editor-open', {
+        this.dispatchEvent(new CustomEvent('loot-editor-open', {
           bubbles: true,
         }));
-
-        /* Notify that this card (may have) changed size. */
-        card.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
-      },
-
-      _onHideEditor() {
-        let card;
-        if (this.tagName === 'LOOT-PLUGIN-CARD') {
-          card = this;
-        } else {
-          card = getMenuItemCard(this);
-        }
-
-        /* Now hide editor. */
-        card.classList.toggle('flip');
-        card.data.isEditorOpen = false;
-
-        /* Notify that this card (may have) changed size. */
-        card.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
-      },
-
-      readFromEditor(oldData) {
-        return this.$.editor.readFromEditor(oldData);
       },
 
       _onShowOnlyConflicts(evt) {
diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index 5e5a4d5f..f3c02946 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -26,6 +26,11 @@ loot-editor-close
 <dom-module id="loot-plugin-editor">
   <template>
     <style>
+      :host {
+        position: relative;
+        @apply(--shadow-elevation-2dp);
+      }
+
       /* Material Design for non-button icons. */
       iron-icon {
         color: var(--loot-secondary-text-color);
@@ -36,13 +41,6 @@ loot-editor-close
       [hidden] {
         display: none;
       }
-      #activeTick {
-        color: green;
-      }
-      #activeTick[hidden] {
-        display: initial;
-        visibility: hidden;
-      }
       #accept {
         color: var(--loot-accent-color);
       }
@@ -51,23 +49,10 @@ loot-editor-close
       }
 
       /* Content styling. */
-      ::content h1, #version, #crc {
-        display: inline-block;
-        font-weight: 400;
-        font-size: 1rem;
-      }
       ::content h1 {
         margin: 0;
         font-size: 1.143rem;
       }
-      #version {
-        margin-left: 16px;
-        color: #607D8B;
-      }
-      #crc {
-        margin-left: 16px;
-        color: #795548;
-      }
 
       /* Editor input styling. */
       #main > div {
@@ -85,19 +70,12 @@ loot-editor-close
 
       /* Misc Styling. */
       paper-toolbar.medium-tall {
-        --paper-toolbar-background: #CFD4E9;
+        --paper-toolbar-background: var(--paper-blue-50);
         --paper-toolbar-color: var(--loot-primary-text-color);
         height: 104px;
       }
-      iron-pages > * {
-        border: 4px solid #CFD4E9;
-        border-top: none;
-        background: white;
-        margin-bottom: 4px;
-      }
       #main {
-        padding: 16px;
-        overflow: hidden;
+        padding: 8px 16px;
       }
       iron-pages > div > table[is=editable-table] th {
         padding-top: 8px;
@@ -116,23 +94,9 @@ loot-editor-close
       }
     </style>
     <paper-toolbar class="medium-tall">
-      <iron-icon id="activeTick" icon="check"></iron-icon>
-      <paper-tooltip for="activeTick">Active Plugin</paper-tooltip>
       <div id="title">
         <content select="h1"></content>
-        <span id="version">
-          <content select=".version"></content>
-        </span>
-        <span id="crc">
-          <content select=".crc"></content>
-        </span>
       </div>
-      <iron-icon id="isMaster" icon="loot-custom-icons:crown"></iron-icon>
-      <paper-tooltip for="isMaster">Master File</paper-tooltip>
-      <iron-icon id="isEmpty" icon="visibility-off"></iron-icon>
-      <paper-tooltip for="isEmpty">Empty Plugin</paper-tooltip>
-      <iron-icon id="loadsArchive" icon="attachment"></iron-icon>
-      <paper-tooltip for="loadsArchive">Loads Archive</paper-tooltip>
       <paper-icon-button id="accept" icon="check"></paper-icon-button>
       <paper-tooltip for="accept">Apply</paper-tooltip>
       <paper-icon-button id="cancel" icon="close"></paper-icon-button>
@@ -375,12 +339,7 @@ loot-editor-close
 
       setEditorData(newData) {
         /* newData is a Plugin object reference. */
-
-        /* First update the header icons. */
-        this.$.activeTick.hidden = !newData.isActive;
-        this.$.isMaster.hidden = !newData.isMaster;
-        this.$.isEmpty.hidden = !newData.isEmpty;
-        this.$.loadsArchive.hidden = !newData.loadsArchive;
+        this.querySelector('h1').textContent = newData.name;
 
         /* There may be existing recorded data from a previous instance of the
            editor, so use that for userlist and priority data if so. */
@@ -401,10 +360,6 @@ loot-editor-close
           };
         }
 
-        /* Fill in the version and CRC values. */
-        this.shadowRoot.getElementById('version').textContent = newData.getCardContent(loot.filters).version;
-        this.shadowRoot.getElementById('crc').textContent = newData.getCardContent(loot.filters).crc;
-
         /* Fill in the editor input values. */
         if (tempData.userlist && !tempData.userlist.enabled) {
           this.$.enableEdits.checked = false;
diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index 052e2e12..c5e82030 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -332,6 +332,9 @@
           <!-- Generated <loot-plugin-card> elements go here. -->
         </iron-list>
       </div>
+      <loot-plugin-editor id="editor" hidden>
+        <h1></h1>
+      </loot-plugin-editor>
     </div>
   </paper-drawer-panel>
   <paper-toast id="toast"></paper-toast>
diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index cf062dfe..61022883 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -414,59 +414,55 @@ function onShowSettingsDialog() {
 }
 
 function onEditorOpen(evt) {
-  /* Update the size of the card in the iron-list. */
-  document.getElementById('pluginCardList').updateSizeForItem(evt.target.data);
+  /* Set the editor data. */
+  const editor = document.getElementById('editor');
+  editor.setEditorData(evt.target.data);
 
-  /* Enable priority hover in plugins list and enable header
-     buttons if this is the only editor instance. */
-  let numEditors = 0;
-  if (document.body.hasAttribute('data-editors')) {
-    numEditors = parseInt(document.body.getAttribute('data-editors'), 10);
-  }
-  ++numEditors;
-
-  if (numEditors === 1) {
-    /* Set up drag 'n' drop event handlers. */
-    const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
-    for (let i = 0; i < elements.length; ++i) {
-      elements[i].draggable = true;
-      elements[i].addEventListener('dragstart', elements[i].onDragStart);
-    }
-
-    /* Disable the toolbar elements. */
-    document.getElementById('wipeUserlistButton').setAttribute('disabled', '');
-    document.getElementById('copyContentButton').setAttribute('disabled', '');
-    document.getElementById('refreshContentButton').setAttribute('disabled', '');
-    document.getElementById('settingsButton').setAttribute('disabled', '');
-    document.getElementById('gameMenu').setAttribute('disabled', '');
-    document.getElementById('updateMasterlistButton').setAttribute('disabled', '');
-    document.getElementById('sortButton').setAttribute('disabled', '');
-  }
-  document.body.setAttribute('data-editors', numEditors);
+  /* Set body attribute so that sidebar items are styled correctly. */
+  document.body.setAttribute('data-editors', true);
   document.getElementById('cardsNav').notifyResize();
 
+  /* Unhide editor. */
+  editor.hidden = false;
+
+  /* Set up drag 'n' drop event handlers. */
+  const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
+  for (let i = 0; i < elements.length; ++i) {
+    elements[i].draggable = true;
+    elements[i].addEventListener('dragstart', elements[i].onDragStart);
+  }
+
+  /* Disable the toolbar elements. */
+  document.getElementById('wipeUserlistButton').setAttribute('disabled', '');
+  document.getElementById('copyContentButton').setAttribute('disabled', '');
+  document.getElementById('refreshContentButton').setAttribute('disabled', '');
+  document.getElementById('settingsButton').setAttribute('disabled', '');
+  document.getElementById('gameMenu').setAttribute('disabled', '');
+  document.getElementById('updateMasterlistButton').setAttribute('disabled', '');
+  document.getElementById('sortButton').setAttribute('disabled', '');
+
   return loot.query('editorOpened').catch(handlePromiseError);
 }
 function onEditorClose(evt) {
-  /* Update the size of the card in the iron-list. */
-  document.getElementById('pluginCardList').updateSizeForItem(evt.target.data);
-
   /* evt.detail is true if the apply button was pressed. */
   let promise;
   if (evt.detail) {
     /* Need to record the editor control values and work out what's
        changed, and update any UI elements necessary. Offload the
        majority of the work to the C++ side of things. */
-    const edits = evt.target.readFromEditor(evt.target.data);
+    const plugin = loot.game.plugins.find((item) => {
+      return item.name === evt.target.querySelector('h1').textContent;
+    })
+    const edits = evt.target.readFromEditor(plugin);
     promise = loot.query('editorClosed', edits).then(JSON.parse).then((result) => {
       if (result) {
-        evt.target.data.priority = result.priority;
-        evt.target.data.isPriorityGlobal = result.isPriorityGlobal;
-        evt.target.data.messages = result.messages;
-        evt.target.data.tags = result.tags;
-        evt.target.data.isDirty = result.isDirty;
+        plugin.priority = result.priority;
+        plugin.isPriorityGlobal = result.isPriorityGlobal;
+        plugin.messages = result.messages;
+        plugin.tags = result.tags;
+        plugin.isDirty = result.isDirty;
 
-        evt.target.data.userlist = edits.userlist;
+        plugin.userlist = edits.userlist;
 
         /* Now perform search again. If there is no current search, this won't
            do anything. */
@@ -479,35 +475,28 @@ function onEditorClose(evt) {
     promise = loot.query('editorClosed');
   }
   promise.then(() => {
-    delete evt.target.data.editor;
-
-    /* Disable priority hover in plugins list and enable header
-       buttons if this is the only editor instance. */
-    let numEditors = parseInt(document.body.getAttribute('data-editors'), 10);
-    --numEditors;
-
-    if (numEditors === 0) {
-      /* Remove drag 'n' drop event handlers. */
-      const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
-      for (let i = 0; i < elements.length; ++i) {
-        elements[i].removeAttribute('draggable');
-        elements[i].removeEventListener('dragstart', elements[i].onDragStart);
-      }
-
-      document.body.removeAttribute('data-editors');
-
-      /* Re-enable toolbar elements. */
-      document.getElementById('wipeUserlistButton').removeAttribute('disabled');
-      document.getElementById('copyContentButton').removeAttribute('disabled');
-      document.getElementById('refreshContentButton').removeAttribute('disabled');
-      document.getElementById('settingsButton').removeAttribute('disabled');
-      document.getElementById('gameMenu').removeAttribute('disabled');
-      document.getElementById('updateMasterlistButton').removeAttribute('disabled');
-      document.getElementById('sortButton').removeAttribute('disabled');
-    } else {
-      document.body.setAttribute('data-editors', numEditors);
-    }
+    /* Remove body attribute so that sidebar items are styled correctly. */
+    document.body.removeAttribute('data-editors');
     document.getElementById('cardsNav').notifyResize();
+
+    /* Hide editor. */
+    evt.target.hidden = true;
+
+    /* Remove drag 'n' drop event handlers. */
+    const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
+    for (let i = 0; i < elements.length; ++i) {
+      elements[i].removeAttribute('draggable');
+      elements[i].removeEventListener('dragstart', elements[i].onDragStart);
+    }
+
+    /* Re-enable toolbar elements. */
+    document.getElementById('wipeUserlistButton').removeAttribute('disabled');
+    document.getElementById('copyContentButton').removeAttribute('disabled');
+    document.getElementById('refreshContentButton').removeAttribute('disabled');
+    document.getElementById('settingsButton').removeAttribute('disabled');
+    document.getElementById('gameMenu').removeAttribute('disabled');
+    document.getElementById('updateMasterlistButton').removeAttribute('disabled');
+    document.getElementById('sortButton').removeAttribute('disabled');
   }).catch(handlePromiseError);
 }
 function undoConflictsFilter() {
diff --git a/src/gui/html/js/l10n.js b/src/gui/html/js/l10n.js
index 7b860ce2..1fe3eafc 100644
--- a/src/gui/html/js/l10n.js
+++ b/src/gui/html/js/l10n.js
@@ -30,11 +30,6 @@
     /* Plugin editor template. */
     const pluginEditor = document.getElementById('loot-plugin-editor').querySelector('template').content;
 
-    pluginEditor.querySelector('paper-tooltip[for=activeTick]').textContent = l10n.translate('Active Plugin');
-    pluginEditor.querySelector('paper-tooltip[for=isMaster]').textContent = l10n.translate('Master File');
-    pluginEditor.querySelector('paper-tooltip[for=isEmpty]').textContent = l10n.translate('Empty Plugin');
-    pluginEditor.querySelector('paper-tooltip[for=loadsArchive]').textContent = l10n.translate('Loads Archive');
-
     pluginEditor.getElementById('enableEdits').previousElementSibling.textContent = l10n.translate('Enable Edits');
     pluginEditor.getElementById('isPriorityGlobal').previousElementSibling.textContent = l10n.translate('Global Priority');
     pluginEditor.querySelector('paper-tooltip[for=isPriorityGlobal]').textContent = l10n.translate('Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins.');