diff --git a/resources/report/html/loot-plugin-card.html b/resources/report/html/loot-plugin-card.html
index 9250491f..876c3ee9 100644
--- a/resources/report/html/loot-plugin-card.html
+++ b/resources/report/html/loot-plugin-card.html
@@ -75,6 +75,9 @@ loot-clear-metadata
:host(.flip) #editor {
display: block;
}
+ :host(.fastflip) #wrapper {
+ transition-duration: 1ms;
+ }
/* Icon styling. */
#activeTick {
@@ -128,7 +131,7 @@ loot-clear-metadata
-
+
@@ -199,6 +202,14 @@ loot-clear-metadata
/* Share the data with the editor. */
this.shadowRoot.getElementById('editor').data = this.data;
if (newValue != undefined) {
+ /* Set the card flip state. */
+ if (this.classList.contains('flip') != this.data.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');
+ }
+
/* Also initialise the non-simple-string data. */
this.onCrcChange();
this.onTagsChange();
@@ -250,6 +261,9 @@ loot-clear-metadata
},
onFlipEnd: function(evt) {
+ /* Remove fastflip class if present. */
+ this.classList.remove('fastflip');
+
/* Re-calculate tooltip positions, since the flip animation tends to mess with them. */
this.shadowRoot.getElementById('activeTick').setPosition();
this.shadowRoot.getElementById('dummyPlugin').setPosition();
@@ -263,6 +277,8 @@ loot-clear-metadata
onShowEditor: function(evt) {
var card = evt.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentNode.host;
+ card.data.isEditorOpen = true;
+
/* Fire an open event, so that the UI can enter edit mode. */
card.dispatchEvent(new CustomEvent('loot-editor-open', {
bubbles: true,
diff --git a/resources/report/html/loot-plugin-editor.html b/resources/report/html/loot-plugin-editor.html
index d39e5798..86865b57 100644
--- a/resources/report/html/loot-plugin-editor.html
+++ b/resources/report/html/loot-plugin-editor.html
@@ -353,6 +353,8 @@ loot-editor-close
bubbles: true,
detail: (evt.target.id == 'accept'),
}));
+
+ evt.target.parentElement.parentElement.parentNode.host.data.isEditorOpen = false;
}
},
diff --git a/resources/report/js/plugin.js b/resources/report/js/plugin.js
index 24736a75..7c295f43 100644
--- a/resources/report/js/plugin.js
+++ b/resources/report/js/plugin.js
@@ -41,6 +41,8 @@ function Plugin(obj) {
this.isDirty = obj.isDirty;
this.id = this.name.replace(/\s+/g, '');
+ this.isMenuOpen = false;
+ this.isEditorOpen = false;
/* Converts between the LOOT metadata object for tags, and their
editor row representation. */