tweak annotation size

helmus · Oct 9, 2017 · 08e3315 · 08e3315
1 parent df4b398
commit 08e3315
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 10 deletions.
diff --git 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);
diff --git 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
@@ -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
@@ -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"
   }
 }