Add drag/drop image

youjingwong · Mar 8, 2021 · 0eb155a · 0eb155a
1 parent 2c465fd
commit 0eb155a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/app/src/ui/history/commit-list.tsx b/app/src/ui/history/commit-list.tsx
@@ -7,6 +7,8 @@ import { List } from '../lib/list'
 import { arrayEquals } from '../../lib/equality'
 import { Popover, PopoverCaretPosition } from '../lib/popover'
 import { Button } from '../lib/button'
+import { enableCherryPicking } from '../../lib/feature-flag'
+import { encodePathAsUrl } from '../../lib/path'
 
 const RowHeight = 50
 
@@ -191,12 +193,18 @@ export class CommitList extends React.Component<ICommitListProps, {}> {
   }
 
   private renderCherryPickIntroPopover() {
-    if (this.props.hasShownCherryPickIntro) {
+    if (this.props.hasShownCherryPickIntro || !enableCherryPicking()) {
       return null
     }
 
+    const cherryPickIntro = encodePathAsUrl(
+      __dirname,
+      'static/cherry-pick-intro.png'
+    )
+
     return (
       <Popover caretPosition={PopoverCaretPosition.LeftTop}>
+        <img src={cherryPickIntro} className="cherry-pick-intro" />
         <h3>
           Drag and drop to cherry pick!
           <span className="call-to-action-bubble">New</span>

diff --git a/app/static/common/cherry-pick-intro.png b/app/static/common/cherry-pick-intro.png
diff --git a/app/styles/ui/history/_commit-list.scss b/app/styles/ui/history/_commit-list.scss
@@ -23,6 +23,9 @@
       border-radius: var(--border-radius);
       margin-left: var(--spacing-third);
     }
+    img {
+      width: 100%;
+    }
   }
 
   .commit {