TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Added static result table for members filtering

Browse Source 
- Added horizontal scrolling, fullscreen table component.
- Mocked multiple columns in the members result list.

Alpha feature.
This commit is contained in:
Peter Zimon 2021-07-22 15:47:01 +02:00
parent 3e82a19791
commit d356f5451a
6 changed files with 292 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
ghost/admin/app/components/gh-members-list-item.hbs
View File

@ -1,61 +1,188 @@
<li class="gh-list-row gh-members-list-item {{if @member.is_loading "loading"}}" data-test-member={{@member.id}} ...attributes> {{#if (feature "membersFiltering")}}
{{#if @member.is_loading}} <tr>
<div class="gh-list-data gh-members-list-basic gh-list-loadingcell"> {{#if @member.is_loading}}
<div class="gh-list-loading-title"></div> <div class="gh-list-data gh-members-list-basic gh-list-loadingcell">
<div class="gh-list-loading-detail"></div> <div class="gh-list-loading-title"></div>
</div> <div class="gh-list-loading-detail"></div>
<div class="gh-list-data gh-members-list-open-rate gh-list-cellwidth-10"></div>
<div class="gh-list-data gh-members-list-geolocation gh-list-cellwidth-10"></div>
<div class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-10"></div>
<div class="gh-list-data gh-members-list-chevron gh-list-cellwidth-chevron"></div>
{{else}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-basic">
<div class="flex items-center">
<GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
<div class="w-80">
<h3 class="ma0 pa0 gh-members-list-name {{if (not @member.name) "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3>
{{#if @member.name}}
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{@member.email}}</p>
{{/if}}
</div>
</div> </div>
</LinkTo> <div class="gh-list-data"></div>
<div class="gh-list-data"></div>
<div class="gh-list-data"></div>
<div class="gh-list-data"></div>
<div class="gh-list-data"></div>
<div class="gh-list-data"></div>
<div class="gh-list-data"></div>
<div class="gh-list-data"></div>
<div class="gh-list-data"></div>
{{else}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data">
<div class="flex items-center">
<GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
<div class="w-80">
<h3 class="ma0 pa0 gh-members-list-name {{if (not @member.name) "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3>
{{#if @member.name}}
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{@member.email}}</p>
{{/if}}
</div>
</div>
</LinkTo>
{{#if (feature "emailAnalytics")}} {{#if (feature "emailAnalytics")}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-open-rate middarkgrey f8 {{if (not @member.name) "gh-members-list-open-rate-noname"}}"> <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data middarkgrey f8 {{if (not @member.name) "gh-members-list-open-rate-noname"}}">
{{#if (not (is-empty @member.emailOpenRate))}} {{#if (not (is-empty @member.emailOpenRate))}}
<span class="gh-members-list-open-rate-mobile">{{@member.emailOpenRate}}%</span> <span class="gh-members-list-open-rate-mobile">{{@member.emailOpenRate}}%</span>
{{else}}
<span class="midlightgrey">N/A</span>
{{/if}}
</LinkTo>
{{/if}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data middarkgrey f8 {{if (not @member.name) "gh-members-geolocation-noname"}}">
{{#if (and @member.geolocation @member.geolocation.country)}}
{{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
{{@member.geolocation.region}}, US
{{else}}
{{#if @member.geolocation.country}}
{{@member.geolocation.country}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
{{/if}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
</LinkTo>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data middarkgrey f8">
{{#if @member.createdAtUTC}}
<div>{{moment-format @member.createdAtUTC "D MMM YYYY"}}</div>
<div class="midlightgrey gh-members-list-subscribed-moment">{{moment-from-now @member.createdAtUTC}}</div>
{{/if}}
</LinkTo>
{{#if (feature "emailAnalytics")}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data middarkgrey f8">
{{#if (not (is-empty @member.emailOpenRate))}}
<span class="gh-members-list-open-rate-mobile">{{@member.emailOpenRate}}%</span>
{{/if}}
</LinkTo>
{{/if}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data middarkgrey f8">
{{#if (and @member.geolocation @member.geolocation.country)}}
{{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
{{@member.geolocation.region}}, US
{{else}}
{{#if @member.geolocation.country}}
{{@member.geolocation.country}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
{{/if}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
</LinkTo>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data middarkgrey f8">
{{#if @member.createdAtUTC}}
<div>{{moment-format @member.createdAtUTC "D MMM YYYY"}}</div>
<div class="midlightgrey gh-members-list-subscribed-moment">{{moment-from-now @member.createdAtUTC}}</div>
{{/if}}
</LinkTo>
{{#if (feature "emailAnalytics")}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data middarkgrey f8">
{{#if (not (is-empty @member.emailOpenRate))}}
<span class="gh-members-list-open-rate-mobile">{{@member.emailOpenRate}}%</span>
{{/if}}
</LinkTo>
{{/if}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data middarkgrey f8">
{{#if (and @member.geolocation @member.geolocation.country)}}
{{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
{{@member.geolocation.region}}, US
{{else}}
{{#if @member.geolocation.country}}
{{@member.geolocation.country}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
{{/if}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
</LinkTo>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data middarkgrey f8">
{{#if @member.createdAtUTC}}
<div>{{moment-format @member.createdAtUTC "D MMM YYYY"}}</div>
<div class="midlightgrey gh-members-list-subscribed-moment">{{moment-from-now @member.createdAtUTC}}</div>
{{/if}} {{/if}}
</LinkTo> </LinkTo>
{{/if}} {{/if}}
</tr>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-geolocation middarkgrey f8 {{if (not @member.name) "gh-members-geolocation-noname"}}"> {{else}}
{{#if (and @member.geolocation @member.geolocation.country)}} <li class="gh-list-row gh-members-list-item {{if @member.is_loading "loading"}}" data-test-member={{@member.id}} ...attributes>
{{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}} {{#if @member.is_loading}}
{{@member.geolocation.region}}, US <div class="gh-list-data gh-members-list-basic gh-list-loadingcell">
{{else}} <div class="gh-list-loading-title"></div>
{{#if @member.geolocation.country}} <div class="gh-list-loading-detail"></div>
{{@member.geolocation.country}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
{{/if}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
</LinkTo>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at middarkgrey f8 {{if (not @member.name) "gh-members-subscribed-noname"}}">
{{#if @member.createdAtUTC}}
<div>{{moment-format @member.createdAtUTC "D MMM YYYY"}}</div>
<div class="midlightgrey gh-members-list-subscribed-moment">{{moment-from-now @member.createdAtUTC}}</div>
{{/if}}
</LinkTo>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-list-cellwidth-chevron gh-members-list-chevron">
<div class="flex items-center justify-end w-100 h-100">
<span class="nr2">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
</div> </div>
</LinkTo> <div class="gh-list-data gh-members-list-open-rate gh-list-cellwidth-10"></div>
{{/if}} <div class="gh-list-data gh-members-list-geolocation gh-list-cellwidth-10"></div>
</li> <div class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-10"></div>
<div class="gh-list-data gh-members-list-chevron gh-list-cellwidth-chevron"></div>
{{else}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-basic">
<div class="flex items-center">
<GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
<div class="w-80">
<h3 class="ma0 pa0 gh-members-list-name {{if (not @member.name) "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3>
{{#if @member.name}}
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{@member.email}}</p>
{{/if}}
</div>
</div>
</LinkTo>
{{#if (feature "emailAnalytics")}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-open-rate middarkgrey f8 {{if (not @member.name) "gh-members-list-open-rate-noname"}}">
{{#if (not (is-empty @member.emailOpenRate))}}
<span class="gh-members-list-open-rate-mobile">{{@member.emailOpenRate}}%</span>
{{/if}}
</LinkTo>
{{/if}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-geolocation middarkgrey f8 {{if (not @member.name) "gh-members-geolocation-noname"}}">
{{#if (and @member.geolocation @member.geolocation.country)}}
{{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
{{@member.geolocation.region}}, US
{{else}}
{{#if @member.geolocation.country}}
{{@member.geolocation.country}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
{{/if}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
</LinkTo>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at middarkgrey f8 {{if (not @member.name) "gh-members-subscribed-noname"}}">
{{#if @member.createdAtUTC}}
<div>{{moment-format @member.createdAtUTC "D MMM YYYY"}}</div>
<div class="midlightgrey gh-members-list-subscribed-moment">{{moment-from-now @member.createdAtUTC}}</div>
{{/if}}
</LinkTo>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-list-cellwidth-chevron gh-members-list-chevron">
<div class="flex items-center justify-end w-100 h-100">
<span class="nr2">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
</div>
</LinkTo>
{{/if}}
</li>
{{/if}}

75
ghost/admin/app/styles/components/lists.css
View File

@ -295,4 +295,79 @@ ul.nostyle li {
max-width: 320px; max-width: 320px;
height: 9px; height: 9px;
margin-top: 8px; margin-top: 8px;
}
/* Horizontally scrolling list */
.gh-list-scrolling {
position: relative;
overflow: scroll;
max-width: calc(100% + 96px);
height: calc(100vh - 96px);
margin: 0 -48px -81px;
padding: 0 48px 0 0;
}
.gh-list-scrolling table {
position: relative;
border-collapse: inherit;
margin: 0;
}
.gh-list-scrolling thead th {
position: sticky;
top: 0;
vertical-align: middle;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.1px;
color: var(--black);
background: var(--main-bg-color);
background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
border-bottom: var(--whitegrey) 1px solid;
padding: 10px 20px;
text-transform: uppercase;
white-space: nowrap;
}
.gh-list-scrolling thead th:first-child {
left: 0;
z-index: 1;
border-bottom: none;
padding: 0 60px 0 48px;
}
.gh-list-scrolling tbody .gh-list-data:first-child {
position: sticky;
left: 0;
border-bottom: none;
background: var(--main-bg-color);
background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
padding: 0 60px 0 48px;
}
.gh-list-scrolling thead th:first-child::before,
.gh-list-scrolling tbody .gh-list-data:first-child::before {
position: absolute;
content: "";
bottom: 0;
right: 0;
left: 48px;
height: 1px;
background: var(--whitegrey);
}
.gh-list-scrolling td,
.gh-list-scrolling th,
.gh-list-scrolling a {
white-space: nowrap;
}
.gh-list-scrolling tbody th{
position: sticky;
left: 0;
}
.gh-list-scrolling tbody .gh-list-data {
border-top: none;
border-bottom: var(--whitegrey) 1px solid;
} }

4
ghost/admin/app/styles/layouts/main.css
View File

@ -66,6 +66,10 @@
max-width: 1600px; max-width: 1600px;
} }
.gh-main-fullwidth .gh-canvas {
max-width: 100%;
}
/* Flexbox fix. https://github.com/TryGhost/Ghost/issues/5804#issuecomment-141416812 */ /* Flexbox fix. https://github.com/TryGhost/Ghost/issues/5804#issuecomment-141416812 */
.gh-main > section { .gh-main > section {
width: 100%; width: 100%;

28
ghost/admin/app/styles/layouts/members.css
View File

@ -68,35 +68,13 @@
.members-list .gh-list-header { .members-list .gh-list-header {
position: sticky; position: sticky;
top: 84px; top: 96px;
z-index: 1; z-index: 1;
background: var(--white); background: var(--white);
} }
.members-list-header-overlay { .gh-list-scrolling-h .members-list .gh-list-header {
display: flex; top: 0;
flex-direction: row;
justify-content: space-between;
position: sticky;
height: 40px;
top: calc(84px - 40px); /* match gh-list-header sticky top */
left: 0;
right: 0;
margin-top: -40px;
transform: translateY(40px);
z-index: 2;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #e5eff5;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: .1px;
color: #738a94;
text-transform: uppercase;
padding: 10px 16px;
white-space: nowrap;
background: #f8fafc;
} }
.members-header .view-actions input.gh-members-list-searchfield { .members-header .view-actions input.gh-members-list-searchfield {

2
ghost/admin/app/templates/application.hbs
View File

@ -8,7 +8,7 @@
<GhNavMenu /> <GhNavMenu />
{{/if}} {{/if}}
<main class="gh-main {{this.ui.mainClass}}" role="main"> <main class="gh-main {{this.ui.mainClass}} {{if (and (feature "membersFiltering") (or (eq this.router.currentURL "/members") (eq this.router.currentURL "/members/import"))) "gh-main-fullwidth"}}" role="main">
{{outlet}} {{outlet}}
{{#if this.showBilling}} {{#if this.showBilling}}

27
ghost/admin/app/templates/members.hbs
View File

@ -80,6 +80,32 @@
{{#unless this.members.loading}} {{#unless this.members.loading}}
<section class="view-container"> <section class="view-container">
{{#if (feature "membersFiltering")}}
<div class="gh-list-scrolling">
<table class="gh-list">
<thead>
<tr>
<th>{{this.listHeader}}</th>
<th>Open rate</th>
<th>Location</th>
<th>Created</th>
<th>Open rate</th>
<th>Location</th>
<th>Created</th>
<th>Open rate</th>
<th>Location</th>
<th>Created</th>
</tr>
</thead>
<VerticalCollection @tagName="tbody" @items={{this.members}} @key="id" @containerSelector=".gh-main" @estimateHeight={{69}} @staticHeight={{true}} @bufferSize={{20}} as |member|>
<GhMembersListItem
@member={{member}}
data-test-member={{member.id}}
/>
</VerticalCollection>
</table>
</div>
{{else}}
<section class="content-list"> <section class="content-list">
<ol class="members-list gh-list {{unless this.members "no-posts"}}"> <ol class="members-list gh-list {{unless this.members "no-posts"}}">
{{#if this.members}} {{#if this.members}}
@ -113,6 +139,7 @@
{{/if}} {{/if}}
</ol> </ol>
</section> </section>
{{/if}}
</section> </section>
{{else}} {{else}}
<div class="gh-content"> <div class="gh-content">