Fixes QRCode style

 * fixes a regression misplacing QRCode popup.
 * adds a 'show' class in JS to handle CSS transition.

4 files changed, 52 insertions, 5 deletions

diff --git a/plugins/qrcode/qrcode.css b/plugins/qrcode/qrcode.css
new file mode 100755
index 00000000..0d514a0e
--- /dev/null
+++ b/plugins/qrcode/qrcode.css
@@ -0,0 +1,23 @@
+.linkqrcode {
+    display: inline;
+    position: relative;
+}
+
+#permalinkQrcode {
+    position: absolute;
+    z-index: 200;
+    padding: 20px;
+    width: 220px;
+    height: 220px;
+    background-color: #ffffff;
+    border: 1px solid black;
+    top: -110px;
+    left: -110px;
+    text-align: center;
+    font-size: 8pt;
+    box-shadow: 2px 2px 20px 2px #333333;
+}
+
+#permalinkQrcode img {
+    margin-bottom: 5px;
+}
diff --git a/plugins/qrcode/qrcode.html b/plugins/qrcode/qrcode.html
index 58ac5007..ffdaf3b8 100644
--- a/plugins/qrcode/qrcode.html
+++ b/plugins/qrcode/qrcode.html
@@ -1,3 +1,5 @@
-<a href="http://qrfree.kaywa.com/?l=1&amp;s=8&amp;d=%s" onclick="showQrCode(this); return false;" class="qrcode" data-permalink="%s">
-    <img src="%s/qrcode/qrcode.png" width="13" height="13" title="QR-Code">
-</a>
+<div class="linkqrcode">
+    <a href="http://qrfree.kaywa.com/?l=1&amp;s=8&amp;d=%s" onclick="showQrCode(this); return false;" class="qrcode" data-permalink="%s">
+        <img src="%s/qrcode/qrcode.png" width="13" height="13" title="QR-Code">
+    </a>
+</div>
diff --git a/plugins/qrcode/qrcode.php b/plugins/qrcode/qrcode.php
index 5f6e76a2..a709abaa 100644
--- a/plugins/qrcode/qrcode.php
+++ b/plugins/qrcode/qrcode.php
@@ -39,3 +39,19 @@ function hook_qrcode_render_footer($data)
 
     return $data;
 }
+
+/**
+ * When linklist is displayed, include qrcode CSS file.
+ *
+ * @param array $data - header data.
+ *
+ * @return mixed - header data with qrcode CSS file added.
+ */
+function hook_qrcode_render_includes($data)
+{
+    if ($data['_PAGE_'] == Router::$PAGE_LINKLIST) {
+        $data['css_files'][] = PluginManager::$PLUGINS_PATH . '/qrcode/qrcode.css';
+    }
+
+    return $data;
+}
diff --git a/plugins/qrcode/shaarli-qrcode.js b/plugins/qrcode/shaarli-qrcode.js
index 0a8de21d..615f54c7 100644
--- a/plugins/qrcode/shaarli-qrcode.js
+++ b/plugins/qrcode/shaarli-qrcode.js
@@ -19,7 +19,7 @@ function showQrCode(caller,loading)
     
     // Build the div which contains the QR-Code:
     var element = document.createElement('div');
-    element.id="permalinkQrcode";
+    element.id = 'permalinkQrcode';
 
         // Make QR-Code div commit sepuku when clicked:
     if ( element.attachEvent ){
@@ -37,6 +37,12 @@ function showQrCode(caller,loading)
         element.appendChild(image);
         element.innerHTML += "<br>Click to close";
         caller.parentNode.appendChild(element);
+
+        // Show the QRCode
+        qrcodeImage = document.getElementById('permalinkQrcode');
+        // Workaround to deal with newly created element lag for transition.
+        window.getComputedStyle(qrcodeImage).opacity;
+        qrcodeImage.className = 'show';
     }
     else
     {
@@ -48,7 +54,7 @@ function showQrCode(caller,loading)
 // Remove any displayed QR-Code
 function removeQrcode()
 {
-    var elem = document.getElementById("permalinkQrcode");
+    var elem = document.getElementById('permalinkQrcode');
     if (elem) {
         elem.parentNode.removeChild(elem);
     }