From da36b7cd7091a9766639412dff0d092b3c6fb713 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 29 Aug 2015 11:09:58 +0100
Subject: [PATCH] Update loot-plugin-item

---
 scripts/vulcanize.js                          |   1 +
 src/gui/html/elements/loot-plugin-item.html   | 329 ++++++++----------
 .../html/elements/test_loot-plugin-item.html  |  18 +
 3 files changed, 165 insertions(+), 183 deletions(-)
 create mode 100644 src/tests/gui/html/elements/test_loot-plugin-item.html

diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index fba7e3d2..ba7cfe5b 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -65,6 +65,7 @@ function vulcanizeTests(releasePath) {
     'test_loot-custom-icons.html',
     'test_loot-dropdown-menu.html',
     'test_loot-message-dialog.html',
+    'test_loot-plugin-item.html',
   ];
 
   tests.forEach((test) => {
diff --git a/src/gui/html/elements/loot-plugin-item.html b/src/gui/html/elements/loot-plugin-item.html
index cddea96b..9fef4523 100644
--- a/src/gui/html/elements/loot-plugin-item.html
+++ b/src/gui/html/elements/loot-plugin-item.html
@@ -1,197 +1,160 @@
 <link rel="import" href="../../../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../../../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../../../../bower_components/iron-icons/iron-icons.html">
+
 <link rel="import" href="../../../../bower_components/paper-item/paper-item.html">
-<link rel="import" href="../../../../bower_components/core-tooltip/core-tooltip.html">
-<link rel="import" href="../../../../bower_components/core-icon/core-icon.html">
-<link rel="import" href="../../../../bower_components/core-icons/core-icons.html">
+<link rel="import" href="../../../../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../../../../bower_components/paper-ripple/paper-ripple.html">
+<link rel="import" href="../../../../bower_components/paper-tooltip/paper-tooltip.html">
 
-<polymer-element name="loot-plugin-item" attributes="priorityText data">
-    <template>
-        <style>
-        :host(:not([data-edits]):not([data-editor-open])) #iconTooltip {
-            pointer-events: none;
-        }
-        :host(:not([data-edits])) #hasUserEditsTooltip,
-        :host([data-editor-open]) #hasUserEditsTooltip,
-        :host(:not([data-editor-open])) #editorIsOpenTooltip {
-            display: none;
-        }
-        :host(:not([data-edits])) #hasUserEdits {
-            visibility: hidden;
-        }
-        #hasUserEdits,
-        #editorIsOpen {
-            display: block;
-            margin-right: 0;
-            backface-visibility: hidden;
-        }
-        paper-item > core-tooltip {
-            margin-left: 16px;
-        }
+<dom-module id="loot-plugin-item">
+  <template>
+    <style>
+      /* Flip effect for user metadata / editor open icons. */
+      #flipper {
+        transform-style: preserve-3d;
+        transition: 0.6s;
+        overflow: visible;
+      }
+      #flipper.flipped {
+        transform: rotateY(180deg);
+      }
+      #hasUserEdits,
+      #editorIsOpen {
+        display: block;
+        margin-right: 0;
+        backface-visibility: hidden;
+      }
+      #hasUserEdits {
+        transform: translateZ(1px);
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      #editorIsOpen {
+        transform: rotateY(180deg) translateZ(-1px);
+      }
 
-        /* Flip effect for user metadata / editor open icons. */
-        #flipper {
-            transform-style: preserve-3d;
-            transition: 0.6s;
-            overflow: visible;
-        }
-        :host([data-editor-open]) #flipper {
-            transform: rotateY(180deg);
-        }
-        #hasUserEdits {
-            transform: translateZ(1px);
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-        #editorIsOpen {
-            transform: rotateY(180deg) translateZ(-1px);
-        }
+      /* paper-item (two-line) */
+      paper-item {
+        position: relative;
+        min-height: 32px;
+        line-height: 32px;
+        font-size: 1rem;
 
-        /* paper-item (two-line) */
-        paper-item.two-line {
-            /* Two-line items should be 72px high according to Material Design.
-               Squeeze the height to fit more items in. */
-            /*height: 72px;*/
-            height: 32px;
-            line-height: 32px;
-            font-size: 1rem;
+        --paper-item-focused-before: {
+          opacity: 0;
         }
-        /* Don't have a margin for this paper-item. */
-        paper-item.two-line:last-child {
-            margin-bottom: 0;
-        }
-        :host-context(body[data-editors]) paper-item.two-line {
-            height: 40px;
-        }
-        #primary,
-        #secondary,
-        #secondary core-icon,
-        paper-item.two-line::shadow .button-content {
-            transition: 0.6s;
-        }
-        paper-item.two-line::shadow .button-content {
-            padding: 0px 16px;
-        }
-        :host-context(body[data-editors]) paper-item.two-line::shadow .button-content {
-            padding: 4.5px 16px;
-        }
-        #text {
-            /* Padding is disabled as otherwise text won't fit in correctly. */
-            /*padding: 4px 0;*/
-            overflow: visible;
-        }
-        :host-context(body[data-editors]) #text {
-            line-height: normal;
-        }
-        #secondary {
-            /* MD spec says 14sp, but that doesn't fit, so use 12sp. */
-            /*font-size: 1rem; */
-            font-size: 0.857rem;
-            color: rgba(0, 0, 0, 0.54);
-            height: 13px;
-            overflow: visible;
-        }
-        #secondary core-icon {
-            margin-right: 0;
-            height: 13px;
-        }
-        #hasUserEditsTooltip,
-        #editorIsOpenTooltip {
-            overflow: visible;
-        }
-
-        /* When not in edit mode, hide secondary text. */
-        #secondary.hidden,
-        :host-context(body:not([data-editors])) #secondary {
-            height: 0;
-            overflow: hidden;
-        }
-
-        core-tooltip.hidden {
-            opacity: 0;
-            pointer-events: none;
-            overflow: hidden;
-        }
-        </style>
-
-        <paper-item class="two-line">
-            <div id="text" flex>
-                <div id="primary"><content></content></div>
-                <div id="secondary" layout horizontal center>
-                    <core-tooltip label="Global Priority" noarrow position="right">
-                        <core-icon icon="star"></core-icon>
-                    </core-tooltip>
-                    <div id="priority"></div>
-                </div>
-            </div>
-            <core-tooltip id="iconTooltip" noarrow position="left">
-                <div tip id="hasUserEditsTooltip">Has User Metadata</div>
-                <div tip id="editorIsOpenTooltip">Editor Is Open</div>
-                <div id="flipper">
-                    <core-icon id="hasUserEdits" icon="account-circle"></core-icon>
-                    <core-icon id="editorIsOpen" icon="create"></core-icon>
-                </div>
-            </core-tooltip>
-        </paper-item>
-    </template>
-    <script>
-    Polymer({
-        data: undefined,
-
-        observe: {
-            'data.userlist': 'onUserlistChange',
-            'data.priority': 'onPriorityChange',
-            'data.isPriorityGlobal': 'onPriorityIsGlobalChange',
-            'data.isEditorOpen': 'onEditorStateChange',
+      }
+      paper-item-body[two-line] {
+        min-height: 32px;
+        height: 32px;
+      }
+      :host-context(body[data-editors]) paper-item-body[two-line] {
+        min-height: 40px;
+      }
+      #primary,
+      #secondary,
+      #secondary iron-icon {
+        transition: 0.6s;
+      }
+      :host-context(body[data-editors]) #primary {
+          line-height: normal;
+      }
+      #priority {
+          font-size: 0.857rem;
+          color: var(--loot-secondary-text-color);
+          height: 13px;
+          overflow: visible;
+      }
+      #globalPriorityIcon {
+          height: 13px;
+      }
+      iron-icon {
+          color: var(--loot-secondary-text-color);
+      }
+      /* When not in edit mode, hide secondary text. */
+      :host-context(body:not([data-editors])) #secondary {
+          height: 0;
+          overflow: hidden;
+      }
+      [hidden],
+      #hasUserEdits[hidden] {
+        display: none;
+      }
+      #globalPriorityIcon[hidden] {
+        visibility: hidden;
+        display: inline-flex;
+      }
+      :host {
+        cursor: pointer;
+      }
+      paper-ripple {
+        color: var(--loot-accent-color);
+      }
+    </style>
+    <paper-item>
+      <paper-ripple></paper-ripple>
+      <paper-item-body two-line>
+        <div id="primary"><content></content></div>
+        <div id="secondary" secondary>
+          <iron-icon id="globalPriorityIcon" icon="star" hidden$="[[!isPriorityGlobal]]"></iron-icon>
+          <paper-tooltip for="globalPriorityIcon" position="right">Global Priority</paper-tooltip>
+          <span id="priority" hidden$="[[!priority]]">[[priority]]</span>
+        </div>
+      </paper-item-body>
+      <paper-tooltip for="editorIsOpen" position="left">Editor Is Open</paper-tooltip>
+      <paper-tooltip for="hasUserEdits" position="left">Has User Metadata</paper-tooltip>
+      <div id="flipper" class$="[[computeFlipperClass(isEditorOpen)]]">
+        <iron-icon id="editorIsOpen" icon="create"></iron-icon>
+        <iron-icon id="hasUserEdits" icon="account-circle" hidden$="[[!hasUserEdits]]"></iron-icon>
+      </div>
+    </paper-item>
+  </template>
+  <script>
+    'use strict';
+    Polymer({ // eslint-disable-line new-cap, no-undef
+      is: 'loot-plugin-item',
+      properties: {
+        priority: {
+          type: String,
+          value: '',
+          reflectToAttribute: true,
         },
-
-        dataChanged: function(oldValue, newValue) {
-            this.onUserlistChange();
-            this.onPriorityChange();
-            this.onPriorityIsGlobalChange();
-            this.onEditorStateChange();
+        isPriorityGlobal: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
         },
-
-        onUserlistChange: function(oldValue, newValue) {
-            /* The enabled key will always be set on application of edits, even
-               if there were none to apply, so long for more than just that key. */
-            if (this.data && this.data.userlist && Object.keys(this.data.userlist).length > 1) {
-                this.setAttribute('data-edits', 'true');
-            } else {
-                this.removeAttribute('data-edits');
-            }
+        isEditorOpen: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
         },
-
-        onPriorityChange: function(oldValue, newValue) {
-            if (this.data && this.data.priority) {
-                this.shadowRoot.getElementById('priority').textContent = this.data.priority;
-            } else {
-                this.shadowRoot.getElementById('priority').textContent = '';
-            }
-            this.shadowRoot.getElementById('secondary').hidden = !(this.data && this.data.priority);
+        hasUserEdits: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
         },
+      },
 
-        onPriorityIsGlobalChange: function(oldValue, newValue) {
-            this.shadowRoot.getElementById('secondary').hidden = !(this.data && this.data.isPriorityGlobal);
-        },
+      computeFlipperClass(isEditorOpen) {
+        if (isEditorOpen) {
+          return 'flipped';
+        }
+        return '';
+      },
 
-        onEditorStateChange: function(oldValue, newValue) {
-            if (this.data && this.data.isEditorOpen) {
-                this.setAttribute('data-editor-open', true);
-            } else {
-                this.removeAttribute('data-editor-open');
-            }
-        },
+      getName() {
+        return this.textContent.trim();
+      },
 
-        getName: function() {
-            return this.textContent.trim();
-        },
-
-        onDragStart: function(evt) {
-            evt.dataTransfer.effectAllowed = 'copy';
-            evt.dataTransfer.setData('text/plain', evt.currentTarget.getName());
-            evt.dataTransfer.setDragImage(evt.currentTarget, 325, 175);
-        },
+      onDragStart(evt) {
+        evt.dataTransfer.effectAllowed = 'copy';
+        evt.dataTransfer.setData('text/plain', evt.currentTarget.getName());
+        evt.dataTransfer.setDragImage(evt.currentTarget, 325, 175);
+      },
     });
-    </script>
-</polymer-element>
+  </script>
+</dom-module>
diff --git a/src/tests/gui/html/elements/test_loot-plugin-item.html b/src/tests/gui/html/elements/test_loot-plugin-item.html
new file mode 100644
index 00000000..62cef1b6
--- /dev/null
+++ b/src/tests/gui/html/elements/test_loot-plugin-item.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_loot-plugin-item.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../../bower_components/iron-icon/iron-icon.html">
+
+  <link rel="import" href="../../../../gui/html/elements/loot-plugin-item.html">
+</head>
+
+<body data-editors="1">
+  <loot-plugin-item priority="10"
+                    is-global-priority
+                    is-editor-open
+                    has-user-edits>Skyrim.esm</loot-plugin-item>
+</body>