From cd0115deecdc92b170033fe3ff80aa9220c71f94 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Tue, 28 Feb 2023 13:37:27 +0000
Subject: [PATCH] Added static design for grouped mentions with popover

refs https://github.com/TryGhost/Team/issues/2606
---
 ghost/admin/app/styles/layouts/mentions.css | 30 +++++++++++++++++++--
 ghost/admin/app/templates/mentions.hbs      | 13 ++++++++-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/mentions.css b/ghost/admin/app/styles/layouts/mentions.css
index b78f20abd7..01ae0ff5c5 100644
--- a/ghost/admin/app/styles/layouts/mentions.css
+++ b/ghost/admin/app/styles/layouts/mentions.css
@@ -24,7 +24,6 @@
     border: 1px solid #e6e9eb;
     border-radius: 5px;
     text-decoration: none;
-    overflow: hidden;
     color: var(--midgrey);
 }
 
@@ -39,7 +38,8 @@
     justify-content: space-between;
     align-items: center;
     font-size: 1.35rem;
-    margin-bottom: 12px;
+    line-height: 1.2;
+    margin-bottom: 14px;
     white-space: nowrap;
 }
 
@@ -72,6 +72,32 @@
     overflow: hidden;
 }
 
+.gh-mention-your-link.has-multiple-links {
+    border-bottom: 1px dashed var(--lightgrey);
+    margin-bottom: -2px;
+    padding-bottom: 1px;
+}
+
+.gh-mention-multiple-links {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 13.5px;
+}
+
+.gh-mention-multiple-links li:last-of-type {
+    margin-bottom: 0;
+}
+
+.gh-mention-header .popover {
+    border: none;
+    /* border: 1px solid var(--whitegrey-l1); */
+    color: var(--darkgrey);
+    /* box-shadow: var(--shadow-1); */
+    box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 20px -3px rgba(0,0,0,.2);
+    padding: 12px 14px;
+}
+
 .gh-mention-timestamp {
     margin-left: auto;
     padding-left: 32px;
diff --git a/ghost/admin/app/templates/mentions.hbs b/ghost/admin/app/templates/mentions.hbs
index e9e6de5b85..3af2491b84 100644
--- a/ghost/admin/app/templates/mentions.hbs
+++ b/ghost/admin/app/templates/mentions.hbs
@@ -53,7 +53,18 @@
                                     <div class="gh-mention-link-icon">
                                         {{svg-jar "twitter-link"}}
                                     </div>
-                                    <span class="gh-mention-your-link">{{if mention.resource mention.resource.name mention.target}}</span>
+                                    <div>
+                                        {{!-- TODO: Add logic so when there are multiple links, this span gets a .has-multiple-links class --}}
+                                        <span class="gh-mention-your-link">{{if mention.resource mention.resource.name mention.target}}</span>
+                                        <EmberPopover @tooltipClass="popover" @spacing={{30}} @arrowClass="popover-arrow" @side="down">
+                                            <ul class="gh-mention-multiple-links">
+                                                <li>Weekly Links - Week #13</li>
+                                                <li>Welcome to my blog!</li>
+                                                <li>Introducing: New Tool I Just Built</li>
+                                                <li>Introducing: Even Newer Tool I Just Built For You Guys</li>
+                                            </ul>
+                                        </EmberPopover>
+                                    </div>
                                 {{/unless}}
                                 <span class="gh-mention-timestamp" title={{gh-format-post-time mention.timestamp}}>{{moment-from-now mention.timestamp}}</span>
                             </div>