mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-03 23:00:14 -05:00
Add in dummy rows and empty states to the engagement bar
refs https://github.com/TryGhost/Team/issues/2130
This commit is contained in:
James Morris
parent
5ef0753611
commit
a79c48e547
9 changed files with 173 additions and 58 deletions
|
|
@ -9,6 +9,33 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if (eq eventsFetcher.totalEvents 0)}}
|
||||
<div class="gh-post-activity-feed-empty">
|
||||
<div class="attribution-list-empty">
|
||||
{{#if (eq this.eventType "sent")}}
|
||||
{{svg-jar "empty-sent"}}
|
||||
<h4>No members have received your email yet</h4>
|
||||
<p>Once someone receives your email, you'll be able to see the member activity here.</p>
|
||||
{{else if (eq this.eventType "opened")}}
|
||||
{{svg-jar "empty-opened"}}
|
||||
<h4>No members have opened your email yet</h4>
|
||||
<p>Once someone opens your email, you'll be able to see the member activity here.</p>
|
||||
{{else if (eq this.eventType "clicked")}}
|
||||
{{svg-jar "empty-clicked"}}
|
||||
<h4>No members have clicked in your email yet</h4>
|
||||
<p>Once someone clicks in your email, you'll be able to see the member activity here.</p>
|
||||
{{else if (eq this.eventType "feedback")}}
|
||||
{{svg-jar "empty-feedback"}}
|
||||
<h4>No members have responded with feedback yet</h4>
|
||||
<p>Once someone has responded with feedback, you'll be able to see the member activity here.</p>
|
||||
{{else if (eq this.eventType "conversion")}}
|
||||
{{svg-jar "empty-conversion"}}
|
||||
<h4>No members have signed up or upgraded yet</h4>
|
||||
<p>Once someone has signed up or upgraded, you'll be able to see the member activity here.</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
{{#each eventsFetcher.data as |event|}}
|
||||
{{#let (parse-member-event event) as |parsedEvent|}}
|
||||
<div class="gh-dashboard-list-item">
|
||||
|
|
@ -33,7 +60,11 @@
|
|||
|
||||
{{#let (compute (fn this.getAmountOfStubs eventsFetcher)) as |stubs|}}
|
||||
{{#each stubs}}
|
||||
<div class="gh-dashboard-list-item"></div>
|
||||
<div class="gh-dashboard-list-item">
|
||||
<div class="gh-post-activity-feed-dummy"></div>
|
||||
<div class="gh-post-activity-feed-dummy"></div>
|
||||
<div class="gh-post-activity-feed-dummy"></div>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/let}}
|
||||
|
||||
|
|
@ -75,5 +106,7 @@
|
|||
</LinkTo>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
|
|
@ -32,6 +32,10 @@ export default class PostActivityFeed extends Component {
|
|||
return this._pageSize;
|
||||
}
|
||||
|
||||
get eventType() {
|
||||
return this.args.eventType;
|
||||
}
|
||||
|
||||
// calculate amount of empty rows which require to keep table height the same for each tab/page
|
||||
@action
|
||||
getAmountOfStubs({data}) {
|
||||
|
|
|
|||
|
|
@ -1694,6 +1694,33 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
|
|||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.gh-post-activity-feed .gh-dashboard-list-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-post-activity-feed .gh-post-activity-feed-dummy {
|
||||
width: 40%;
|
||||
height: 8px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(90deg, #F2F6F7 0%, rgba(242, 246, 247, 0.842589) 62.56%, rgba(247, 250, 252, 0.75) 99.36%);
|
||||
}
|
||||
|
||||
.gh-post-activity-feed .gh-post-activity-feed-dummy:nth-child(2) {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.gh-post-activity-feed .gh-post-activity-feed-dummy:nth-child(3) {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.gh-post-activity-feed-empty {
|
||||
width: 100%;
|
||||
height: 277px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-post-activity-feed-pagination svg {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
|
|
@ -1706,7 +1733,7 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
margin-top: 2px;
|
||||
border-top: 1px solid #eceef0;
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1231,6 +1231,8 @@ Dashboard Attribution */
|
|||
line-height: 1.45em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.attribution-list-empty svg {
|
||||
|
|
|
|||
12
ghost/admin/public/assets/icons/empty-clicked.svg
Normal file
12
ghost/admin/public/assets/icons/empty-clicked.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_127_11449)">
|
||||
<path d="M30.4258 24.2603V39.96" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M22.5762 32.1088H38.2759" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20.7291 37.4195L18.2636 38.6511C17.9361 38.8135 17.5649 38.8364 17.2306 38.7148C16.8966 38.5933 16.6267 38.337 16.4805 38.0023L12.6369 29.1525L4.62091 33.1518C4.41795 33.2534 4.19576 33.302 3.97406 33.2931C3.75237 33.2843 3.53807 33.2187 3.35014 33.102C3.16221 32.9849 3.00649 32.8205 2.89678 32.6232C2.78709 32.4259 2.72681 32.2019 2.7213 31.9708L2.00039 3.4875C1.99401 3.21045 2.0666 2.93483 2.20904 2.69535C2.35148 2.45588 2.55739 2.26328 2.80083 2.14182C3.04429 2.02034 3.31436 1.97546 3.57707 2.01277C3.83977 2.05009 4.08332 2.16797 4.27706 2.35156L25.963 20.3732C26.1247 20.5262 26.246 20.7199 26.3166 20.9367C26.3871 21.1537 26.4043 21.3873 26.3669 21.6166C26.3297 21.8461 26.2388 22.0642 26.1023 22.2518C25.966 22.4393 12.6369 29.1525 25.5852 22.6917" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_127_11449">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
11
ghost/admin/public/assets/icons/empty-conversion.svg
Normal file
11
ghost/admin/public/assets/icons/empty-conversion.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_127_11402)">
|
||||
<path d="M20.5076 22.3058C26.5989 22.3058 31.5368 17.5364 31.5368 11.6529C31.5368 5.76947 26.5989 1 20.5076 1C14.4164 1 9.47852 5.76947 9.47852 11.6529C9.47852 17.5364 14.4164 22.3058 20.5076 22.3058Z" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4 39.3345V38.2438C4 34.017 5.73839 29.9633 8.83274 26.9745C11.9271 23.9857 16.1239 22.3066 20.5 22.3066C24.8761 22.3066 29.0729 23.9857 32.1673 26.9745C35.2616 29.9633 37 34.017 37 38.2438V39.3345" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_127_11402">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 825 B |
3
ghost/admin/public/assets/icons/empty-feedback.svg
Normal file
3
ghost/admin/public/assets/icons/empty-feedback.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.00179 31.6968C3.64915 32.0293 4.29869 32.3595 4.95043 32.6875C16.9627 38.7555 16.3747 37.5736 26.6597 37.5736C30.9533 37.5736 33.1363 34.7805 34.4048 30.6899V30.6635L37.5259 20.2504V20.2307C37.6741 19.7427 37.7059 19.2267 37.6184 18.7243C37.5309 18.2219 37.3267 17.7469 37.0221 17.3379C36.7176 16.9285 36.3211 16.5968 35.8648 16.3685C35.4085 16.1405 34.9051 16.0226 34.3947 16.0245H26.3691C25.8691 16.0232 25.376 15.9083 24.9267 15.6887C24.4776 15.4691 24.0843 15.1504 23.7763 14.7568C23.4701 14.3625 23.2595 13.903 23.1603 13.4139C23.0611 12.9248 23.0765 12.4194 23.2048 11.9372L24.6483 6.49299C24.7605 6.07019 24.7707 5.62681 24.6784 5.19926C24.5859 4.77169 24.3933 4.37214 24.1165 4.03337C23.8429 3.69822 23.4957 3.43075 23.1016 3.25179C22.7077 3.07281 22.2779 2.98718 21.8453 3.00155C21.4128 3.01593 20.9896 3.12993 20.6085 3.33467C20.2272 3.53942 19.8984 3.82937 19.6477 4.18193L11.6452 16.4803C11.3402 16.9051 10.9386 17.2515 10.4735 17.4907C10.0084 17.7301 9.49304 17.8555 8.96992 17.8568H3.00179M3 14.5559V37.6667" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
12
ghost/admin/public/assets/icons/empty-opened.svg
Normal file
12
ghost/admin/public/assets/icons/empty-opened.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_127_11405)">
|
||||
<path d="M36.3102 19.333C36.7832 18.8082 37.045 18.1268 37.045 17.4203C37.045 16.7138 36.7832 16.0324 36.3102 15.5076C33.3128 12.2804 26.4901 6 18.5225 6C10.5549 6 3.73215 12.2804 0.7348 15.5076C0.261786 16.0324 0 16.7138 0 17.4203C0 18.1268 0.261786 18.8082 0.7348 19.333C3.73215 22.5602 10.5549 28.8405 18.5225 28.8405C19.0492 28.8405 18.6787 28.8138 19.192 28.7624" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.5222 23.1339C20.0369 23.1339 21.4896 22.5322 22.5607 21.4611C23.6317 20.3901 24.2334 18.9374 24.2334 17.4227C24.2334 15.908 23.6317 14.4553 22.5607 13.3842C21.4896 12.3131 20.0369 11.7114 18.5222 11.7114C17.0273 11.741 15.6036 12.3556 14.5569 13.4232C13.5102 14.4909 12.9238 15.9264 12.9238 17.4216C12.9238 18.9167 13.5102 20.3523 14.5569 21.4199C15.6036 22.4876 17.0273 23.1021 18.5222 23.1317V23.1339Z" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M32.271 21.6223V37.0733M24.5488 29.3467H39.9998" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_127_11405">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
11
ghost/admin/public/assets/icons/empty-sent.svg
Normal file
11
ghost/admin/public/assets/icons/empty-sent.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_127_11571)">
|
||||
<path d="M19.9755 36.8063L14.1646 31.0196L7.92453 34.2438L8.16695 24.9953L0.860242 17.6886C0.516439 17.3451 0.263349 16.9217 0.12371 16.4562C-0.015928 15.9907 -0.0377391 15.4979 0.060237 15.0219C0.155554 14.499 0.388691 14.011 0.735585 13.6083C1.08248 13.2056 1.53056 12.9027 2.03358 12.731L30.6398 3.18669C31.1757 2.98777 31.7574 2.9468 32.3159 3.06865C32.8743 3.1905 33.3861 3.47005 33.7904 3.87411C34.1947 4.27817 34.4746 4.78977 34.5968 5.34816C34.719 5.90655 34.6784 6.48828 34.4798 7.02428L29.3525 22.3941M33.6265 3.77336L8.16453 24.9953" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24.2422 30.8796L28.6616 35.299C28.7179 35.3555 28.7848 35.4002 28.8584 35.4308C28.932 35.4613 29.011 35.4771 29.0907 35.4771C29.1704 35.4771 29.2494 35.4613 29.323 35.4308C29.3966 35.4002 29.4635 35.3555 29.5198 35.299L39.9999 24.8165" stroke="#CFD4D9" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_127_11571">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Add table
Reference in a new issue