Show Issue body when hovering over title

philschatz · Apr 25, 2016 · 51eb1bd · 51eb1bd
1 parent cf1babc
commit 51eb1bd
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 13 deletions.
diff --git a/src/components/issue.jsx b/src/components/issue.jsx
@@ -362,6 +362,32 @@ let Issue = React.createClass({
         <img className='featured-image' src={card.getFeaturedImageSrc()}/>
       );
     }
+
+
+    const bodyPopover = (
+      <BS.Popover className='popover-issue-body' id={`popover-${card.key()}-body`} title={issue.title}>
+        <GithubFlavoredMarkdown
+          repoOwner={repoOwner}
+          repoName={repoName}
+          text={issue.body}/>
+      </BS.Popover>
+    );
+    const TitleLink = React.createClass({
+      render() {
+        const {children} = this.props;
+        return (
+          <BS.OverlayTrigger
+            delayShow={2000}
+            container={this}
+            trigger={['hover', 'focus']}
+            placement='bottom'
+            overlay={bodyPopover}>
+            {children}
+          </BS.OverlayTrigger>
+        )
+      }
+    });
+
     return connectDragSource(
       <div className='-drag-source'>
         <BS.ListGroupItem
@@ -372,20 +398,23 @@ let Issue = React.createClass({
           className={classnames(classes)}
           data-state={issue.state}>
 
-          <a
-            key='link'
-            className='issue-title'
-            target='_blank'
-            href={issue.htmlUrl}>
-            <GithubFlavoredMarkdown
-              inline
-              disableLinks={true}
-              repoOwner={repoOwner}
-              repoName={repoName}
-              text={issue.title}/>
-          </a>
+          <TitleLink>
+            <span className='-extra-span-for-inline-popover'>
+              <a
+                key='link'
+                className='issue-title'
+                target='_blank'
+                href={issue.htmlUrl}>
+                  <GithubFlavoredMarkdown
+                    inline
+                    repoOwner={repoOwner}
+                    repoName={repoName}
+                    text={issue.title}/>
+              </a>
+              {featuredImage}
+            </span>
+          </TitleLink>
 
-          {featuredImage}
           <span key='labels' className='issue-labels'>
             {milestone}
             {labels}

diff --git a/style/app.less b/style/app.less
@@ -573,6 +573,13 @@ body { background-color: #ddd; }
 .popover {
   max-width: 500px;
 
+  &.popover-issue-body {
+    min-width: 400px; // some popovers are inside an <a> which is inside an Issue body
+
+    .arrow { display: none; }
+  }
+
+
   .popover-content {
     max-height: 300px;
     overflow-y: auto;