From c3fb0ef578b82723d22f712ca79a092bd6e06dd1 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Tue, 23 Aug 2022 15:53:48 +0100
Subject: [PATCH] More work on the posts table for attribution

- Added in the open rate progress bar
- Columns in place with feature flag
- Moved open rate to tooltip for exact data

refs https://github.com/TryGhost/Team/issues/1818
---
 .../app/components/gh-posts-list-item.hbs     | 66 +++++++++----------
 ghost/admin/app/styles/components/lists.css   | 38 +++++++++++
 ghost/admin/app/styles/layouts/content.css    | 27 +++++++-
 ghost/admin/app/templates/pages.hbs           |  8 +--
 ghost/admin/app/templates/posts.hbs           | 18 ++---
 5 files changed, 108 insertions(+), 49 deletions(-)

diff --git a/ghost/admin/app/components/gh-posts-list-item.hbs b/ghost/admin/app/components/gh-posts-list-item.hbs
index fddecdebde..cb85e1d560 100644
--- a/ghost/admin/app/components/gh-posts-list-item.hbs
+++ b/ghost/admin/app/components/gh-posts-list-item.hbs
@@ -47,40 +47,6 @@
         </LinkTo>
     {{/if}}
 
-    {{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor))}}
-        {{#if (and this.feature.emailAnalytics (eq @post.displayName "post"))}}
-            <LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-recipients">
-                <div class="flex fw4">
-                    {{#if (eq @post.email.status "submitted")}}
-                        <span class="flex" data-tooltip="{{capitalize @post.email.recipientFilter}} members">
-                            <span class="darkgrey fw5 gh-content-email-stats">{{format-number @post.email.emailCount}}</span>
-                            <span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{gh-pluralize @post.email.emailCount "send"}}</span>
-                        </span>
-                    {{else}}
-                        {{#if this.feature.memberAttribution}}<span class="gh-list-nodata">&mdash;</span>{{/if}}
-                    {{/if}}
-                </div>
-            </LinkTo>
-
-            <LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-opens">
-                {{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
-                    <div class="flex">
-                        <span class="darkgrey fw5 gh-content-email-stats">
-                            {{#if this.isHovered}}
-                                {{format-number @post.email.openedCount}}
-                            {{else}}
-                                {{@post.email.openRate}}%&nbsp;
-                            {{/if}}
-                        </span>
-                        <span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{@post.email.openRate}}% opens</span>
-                    </div>
-                {{else}}
-                    {{#if this.feature.memberAttribution}}<span class="gh-list-nodata">&mdash;</span>{{/if}}
-                {{/if}}
-            </LinkTo>
-        {{/if}}
-    {{/if}}
-
     {{#if this.feature.memberAttribution}}
         <a href={{@post.url}} class="permalink gh-list-data gh-post-list-signups" target="_blank" rel="noopener noreferrer">
             <span class="darkgrey fw5 gh-content-attribution-stats">{{@post.count.signups}}</span>
@@ -99,6 +65,38 @@
         </a>
     {{/if}}
 
+    {{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor))}}
+        {{#if (and this.feature.emailAnalytics (eq @post.displayName "post"))}}
+            <LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-recipients">
+                <div class="flex fw4">
+                    {{#if (eq @post.email.status "submitted")}}
+                        <span class="flex" data-tooltip="{{capitalize @post.email.recipientFilter}} members">
+                            <span class="darkgrey fw5 gh-content-email-stats">{{format-number @post.email.emailCount}}</span>
+                            <span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{gh-pluralize @post.email.emailCount "send"}}</span>
+                        </span>
+                    {{else}}
+                        <span class="gh-list-nodata">&mdash;</span>
+                    {{/if}}
+                </div>
+            </LinkTo>
+
+            <LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-opens">
+                {{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
+                    <div class="flex">
+                        <span class="gh-list-rate-bar">
+                            <span data-tooltip="{{format-number @post.email.openedCount}}">{{@post.email.openRate}}%&nbsp;</span>
+                            <span class="gh-list-rate-amount"><span style={{html-safe (concat "width: " @post.email.openRate "%;")}}/></span>
+                        </span>
+                        <span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{@post.email.openRate}}% opens</span>
+                    </div>
+                {{else}}
+                    <span class="gh-list-nodata">&mdash;</span>
+                {{/if}}
+            </LinkTo>
+        {{/if}}
+    {{/if}}
+
+
     {{#unless @hideStatusColumn }}
         {{#if (and this.session.user.isContributor @post.isPublished)}}
             <a href={{@post.url}} class="permalink gh-list-data gh-post-list-status" target="_blank" rel="noopener noreferrer">
diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css
index 26caaabfc2..0d01cbfecb 100644
--- a/ghost/admin/app/styles/components/lists.css
+++ b/ghost/admin/app/styles/components/lists.css
@@ -214,6 +214,10 @@ ul.nostyle li {
     .gh-list .gh-list-nodata {
         display: none;
     }
+
+    .gh-list-rate-bar {
+        display: none !important;
+    }
 }
 
 @media (max-width: 800px) {
@@ -460,3 +464,37 @@ ul.nostyle li {
         height: calc(100vh - 96px);
     }
 }
+
+
+
+.gh-list-rate-bar {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.gh-list-rate-amount {
+    height: 6px;
+    border-radius: 2.5px;
+    background: var(--whitegrey);
+    overflow: hidden;
+    position: relative;
+    display: block;
+    flex-grow: 1;
+    margin-left: 10px;
+    margin-right: 8px;
+}
+
+.gh-list-rate-amount > span {
+    background: rgb(213,184,255);
+    background: linear-gradient(90deg, rgba(213,184,255,1) 0%, rgba(142,66,255,1) 100%);
+    border-top-right-radius: 2.5px;
+    border-bottom-right-radius: 2.5px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    min-width: 2px;
+}
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
index 9945fde3ec..1eee381341 100644
--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@@ -168,15 +168,25 @@
     padding-left: 10px;
 }
 
-.gh-posts-sends-header,
+.gh-posts-signups-header,
+.gh-posts-conversions-header,
+.gh-posts-sends-header {
+    width: 110px;
+}
+
 .gh-posts-opens-header {
-    width: 120px;
+    width: 200px;
 }
 
 .gh-posts-status-header {
     width: 140px;
 }
 
+.pages-list .gh-posts-conversions-header,
+.pages-list .gh-posts-sends-header {
+    width: 140px;
+}
+
 .gh-post-list-title {
     padding-left: 10px;
 }
@@ -353,6 +363,19 @@
     width: 1px;
 }
 
+@media (max-width: 1600px) {
+    .gh-posts-signups-header,
+    .gh-posts-conversions-header,
+    .gh-posts-sends-header {
+        width: 80px;
+    }
+    
+    .gh-posts-opens-header {
+        width: 180px;
+    }
+}
+
+
 /* Mobile style of post list */
 @media (max-width: 1200px) {
     .gh-posts-list-item {
diff --git a/ghost/admin/app/templates/pages.hbs b/ghost/admin/app/templates/pages.hbs
index 8021fde20c..b27b83de72 100644
--- a/ghost/admin/app/templates/pages.hbs
+++ b/ghost/admin/app/templates/pages.hbs
@@ -27,15 +27,15 @@
     </GhCanvasHeader>
 
     <section class="view-container content-list">
-        <ol class="gh-list {{unless this.postsInfinityModel "no-posts"}}">
+        <ol class="pages-list gh-list {{unless this.postsInfinityModel "no-posts"}}">
             {{#if this.postsInfinityModel}}
                 <li class="gh-list-row header">
                     <div class="gh-list-header gh-posts-title-header">Title</div>
                     {{#if this.feature.memberAttribution}}
-                        <div class="gh-list-header gh-posts-opens-header">Signups</div>
-                        <div class="gh-list-header gh-posts-opens-header">Conversions</div>
+                        <div class="gh-list-header gh-posts-signups-header">Signups</div>
+                        <div class="gh-list-header gh-posts-conversions-header">Conversions</div>
                     {{/if}}
-                    <div class="gh-list-header gh-posts-status-header">Status</div>
+                    <div class="gh-list-header gh-posts-status-header"></div>
                 </li>
             {{/if}}
 
diff --git a/ghost/admin/app/templates/posts.hbs b/ghost/admin/app/templates/posts.hbs
index b42f3b2740..4e38794cbf 100644
--- a/ghost/admin/app/templates/posts.hbs
+++ b/ghost/admin/app/templates/posts.hbs
@@ -31,15 +31,15 @@
             {{#if this.postsInfinityModel}}
                 <li class="gh-list-row header">
                     <div class="gh-list-header gh-posts-title-header">Title</div>
-                        {{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor) this.feature.emailAnalytics)}}
-                            <div class="gh-list-header gh-posts-sends-header">Sends</div>
-                            <div class="gh-list-header gh-posts-opens-header">Opens</div>
-                        {{/if}}
-                        {{#if this.feature.memberAttribution}}
-                            <div class="gh-list-header gh-posts-opens-header">Signups</div>
-                            <div class="gh-list-header gh-posts-opens-header">Conversions</div>
-                        {{/if}}
-                    <div class="gh-list-header gh-posts-status-header">Status</div>
+                    {{#if this.feature.memberAttribution}}
+                        <div class="gh-list-header gh-posts-signups-header">Signups</div>
+                        <div class="gh-list-header gh-posts-conversions-header">Paid</div>
+                    {{/if}}
+                    {{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor) this.feature.emailAnalytics)}}
+                        <div class="gh-list-header gh-posts-sends-header">Sends</div>
+                        <div class="gh-list-header gh-posts-opens-header">Opens</div>
+                    {{/if}}
+                    <div class="gh-list-header gh-posts-status-header"></div>
                 </li>
             {{/if}}