From 1be889a128fd154a76a9b00a67d34621dc19ec3c Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Tue, 10 Feb 2015 20:20:09 +0000
Subject: [PATCH] Improved editor open icon flip effect.

The priority text reveal transition is also a bit messy.
---
 resources/report/html/loot-plugin-item.html | 49 ++++++++++++---------
 resources/report/js/l10n.js                 |  4 +-
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/resources/report/html/loot-plugin-item.html b/resources/report/html/loot-plugin-item.html
index 4726597b..6a795a36 100644
--- a/resources/report/html/loot-plugin-item.html
+++ b/resources/report/html/loot-plugin-item.html
@@ -7,15 +7,22 @@
 <polymer-element name="loot-plugin-item" attributes="priorityText data">
     <template>
         <style>
-        :host(:not([data-edits])) #hasUserEdits,
-        :host([data-editor-open]) #hasUserEdits,
-        :host(:not([data-editor-open])) #editorIsOpen {
+        :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;
         }
-        #hasUserEdits > core-icon,
-        #editorIsOpen > core-icon {
+        :host(:not([data-edits])) #hasUserEdits {
+            visibility: hidden;
+        }
+        #hasUserEdits,
+        #editorIsOpen {
             display: block;
             margin-right: 0;
+            backface-visibility: hidden;
         }
         paper-item > core-tooltip {
             margin-left: 16px;
@@ -30,12 +37,11 @@
         :host([data-editor-open]) #flipper {
             transform: rotateY(180deg);
         }
-        #hasUserEdits, #editorIsOpen {
-            backface-visibility: hidden;
-            display: block;
-        }
         #hasUserEdits {
             transform: translateZ(1px);
+            position: absolute;
+            top: 0;
+            left: 0;
         }
         #editorIsOpen {
             transform: rotateY(180deg) translateZ(-1px);
@@ -77,11 +83,6 @@
         :host-context(body[data-editors]) #text {
             line-height: normal;
         }
-        :host-context(body[data-editors]) #primary {
-            /* MD spec says 16sp, but that doesn't fit, so use 14sp. */
-            /*font-size: 1.143rem;*/
-            font-size: 1rem;
-        }
         #secondary {
             /* MD spec says 14sp, but that doesn't fit, so use 12sp. */
             /*font-size: 1rem; */
@@ -94,6 +95,10 @@
             margin-right: 0;
             height: 13px;
         }
+        #hasUserEditsTooltip,
+        #editorIsOpenTooltip {
+            overflow: visible;
+        }
 
         /* When not in edit mode, hide secondary text. */
         #secondary.hidden,
@@ -119,14 +124,14 @@
                     <div id="priority"></div>
                 </div>
             </div>
-            <div id="flipper">
-                <core-tooltip id="hasUserEdits" label="Has User Metadata" noarrow position="left">
-                    <core-icon icon="account-circle"></core-icon>
-                </core-tooltip>
-                <core-tooltip id="editorIsOpen" label="Editor Is Open" noarrow position="left">
-                    <core-icon icon="create"></core-icon>
-                </core-tooltip>
-            </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>
diff --git a/resources/report/js/l10n.js b/resources/report/js/l10n.js
index c3bbd3c5..fbea8a26 100644
--- a/resources/report/js/l10n.js
+++ b/resources/report/js/l10n.js
@@ -137,8 +137,8 @@
                 pluginItem = document.querySelector('polymer-element[name="loot-plugin-item"]').querySelector('template').content;
             }
             pluginItem.querySelector('#secondary core-tooltip').setAttribute('label', l10n.translate("Global Priority").fetch());
-            pluginItem.getElementById('hasUserEdits').setAttribute('label', l10n.translate("Has User Metadata").fetch());
-            pluginItem.getElementById('editorIsOpen').setAttribute('label', l10n.translate("Editor Is Open").fetch());
+            pluginItem.getElementById('hasUserEditsTooltip').textContent = l10n.translate("Has User Metadata").fetch();
+            pluginItem.getElementById('editorIsOpenTooltip').textContent = l10n.translate("Editor Is Open").fetch();
 
             /* File row template */
             var fileRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');