From 08e33157fe95121e94aaee4834585964a4a6bfbb Mon Sep 17 00:00:00 2001
From: Willem D'Haeseleer <dhwillem@gmail.com>
Date: Sun, 8 Oct 2017 18:19:14 -0700
Subject: [PATCH] tweak annotation size

---
 jira-plugin/src/content.jsx  | 47 ++++++++++++++++++++++++++++++------
 jira-plugin/src/content.scss | 10 +++++++-
 jira-plugin/src/snack.scss   |  4 ++-
 package.json                 |  3 ++-
 4 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/jira-plugin/src/content.jsx b/jira-plugin/src/content.jsx
index 47800f6..77dadba 100644
--- a/jira-plugin/src/content.jsx
+++ b/jira-plugin/src/content.jsx
@@ -44,6 +44,8 @@ chrome.runtime.onMessage.addListener(function (msg) {
 
 async function mainAsyncLocal() {
   const $ = require('jquery');
+  const draggable = require('jquery-ui/ui/widgets/draggable');
+
   const config = await getConfig();
   if (document.location.href.startsWith('https://github.com/helmus/Jira-Hot-Linker')) {
     $('#readme').find('a:contains(Click here to open)').on('click', (e) => {
@@ -86,6 +88,9 @@ async function mainAsyncLocal() {
 
   const container = $('<div class="_JX_container">');
   $(document.body).append(container);
+  new draggable({
+    handle: '._JX_title, ._JX_status',
+  }, container);
 
   $(document.body).on('click', '._JX_thumb', function previewThumb(e) {
     const currentTarget = $(e.currentTarget);
@@ -119,10 +124,13 @@ async function mainAsyncLocal() {
   });
 
   function hideContainer() {
+    containerPinned = false;
     container.css({
       left: -5000,
-      top: -5000
-    });
+      top: -5000,
+      position: 'absolute',
+    }).removeClass('container-pinned');
+
     passiveCancel(0);
   }
 
@@ -146,18 +154,40 @@ async function mainAsyncLocal() {
   }
 
   let hideTimeOut;
+  let containerPinned = false;
+  container.on('dragstop', () => {
+    if (!containerPinned) {
+      snackBar('Ticket Pinned! Hit esc to close !');
+      container.addClass('container-pinned');
+      const position = container.position();
+      container.css({
+        left: position.left - document.scrollingElement.scrollLeft,
+        top: position.top - document.scrollingElement.scrollTop,
+      });
+      containerPinned = true;
+      clearTimeout(hideTimeOut);
+    }
+  });
   $(document.body).on('mousemove', debounce(function (e) {
     if (cancelToken.cancel) {
       return;
     }
     const element = document.elementFromPoint(e.clientX, e.clientY);
     if (element === container[0] || $.contains(container[0], element)) {
+      // cancel when hovering over the container it self
       return;
     }
     if (element) {
-      const keys = getJiraKeys(getShallowText(element));
+      let keys = getJiraKeys(getShallowText(element));
+      if (!size(keys) && element.href) {
+        keys = getJiraKeys(element.href);
+      }
+      if (!size(keys) && element.parentElement.href) {
+        keys = getJiraKeys(element.parentElement.href);
+      }
+
       if (size(keys)) {
-        clearInterval(hideTimeOut);
+        clearTimeout(hideTimeOut);
         const key = keys[0];
         (async function (cancelToken) {
           const issueData = await getIssueMetaData(key);
@@ -204,13 +234,16 @@ async function mainAsyncLocal() {
             left: e.pageX + 20,
             top: e.pageY + 25
           };
-          container.html(annotation(displayData)).css(css);
+          container.html(annotation(displayData));
+          if (!containerPinned) {
+            container.css(css);
+          }
         })(cancelToken);
-      } else {
+      } else if (!containerPinned) {
         hideTimeOut = setTimeout(hideContainer, 250);
       }
     }
-  }, 100));
+  }, 80));
 }
 
 document.addEventListener('DOMContentLoaded', mainAsyncLocal);
\ No newline at end of file
diff --git a/jira-plugin/src/content.scss b/jira-plugin/src/content.scss
index f0fd296..81ad1ee 100644
--- a/jira-plugin/src/content.scss
+++ b/jira-plugin/src/content.scss
@@ -2,6 +2,9 @@ body ._JX {
   &_container {
     position: absolute;
     z-index: 99999;
+    &.container-pinned {
+      position: fixed !important;
+    }
   }
 
   &_title {
@@ -35,7 +38,7 @@ body ._JX {
   }
 
   &_annotation {
-    max-width: 500px;
+    max-width: 600px;
     border: 1px solid #dde4e6;
     border-radius: 3px;
     background-color: white;
@@ -63,6 +66,9 @@ body ._JX {
   }
 
   &_related_pr {
+    max-height: 300px;
+    overflow: auto;
+    border-bottom: 1px solid rgb(221, 228, 230);
     td {
       padding: 10px;
       border-bottom: 1px solid #dde4e6;
@@ -79,6 +85,8 @@ body ._JX {
   }
 
   &_description {
+    max-height: 600px;
+    overflow: auto;
     border-bottom: 1px solid #dde4e6;
     word-wrap: break-word;
     padding: 10px;
diff --git a/jira-plugin/src/snack.scss b/jira-plugin/src/snack.scss
index d77e665..ccdfbcb 100644
--- a/jira-plugin/src/snack.scss
+++ b/jira-plugin/src/snack.scss
@@ -12,11 +12,13 @@ body ._JX {
       transition: transform 150ms !important;
       transform: translateX(-50%) !important;
     }
-    background-color: #2f2f2f;
+    background-color: #444444;
     padding: 14px 20px;
     border-radius: 50px;
     bottom: 20px;
     border: 2px solid white;
+    font-size: 16px;
+    line-height: 22px;
 
     &_icon {
       box-sizing: border-box !important;
diff --git a/package.json b/package.json
index 59a3ee7..32c3e13 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "style-loader": "0.19.0",
     "webpack": "3.6.0",
     "webpack-bundle-analyzer": "2.9.0",
-    "eslint-plugin-react": "7.4.0"
+    "eslint-plugin-react": "7.4.0",
+    "jquery-ui": "1.12.1"
   }
 }