Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Added static design for grouped mentions with popover

Browse source 
refs https://github.com/TryGhost/Team/issues/2606
This commit is contained in:
Djordje Vlaisavljevic 2023-02-28 13:37:27 +00:00
parent 26d05aecd8
commit cd0115deec
2 changed files with 40 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
ghost/admin/app/styles/layouts/mentions.css
View file

@ -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;

13
ghost/admin/app/templates/mentions.hbs
View file

@ -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>