tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Refined member list 

no issue
- added list headings
- added active state to search field when it has value
- set position of actions dropdown
- refined avatar typography
This commit is contained in:
Peter Zimon 2019-10-15 16:11:43 +02:00
parent 6ebe91c854
commit 7f4347a7eb
9 changed files with 71 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/gh-member-avatar.js
View File

@ -17,7 +17,7 @@ export default Component.extend({
member: null,
initialsClass: computed('sizeClass', function () {
return this.sizeClass || 'f5 fw4 lh-zero';
return this.sizeClass || 'gh-member-list-avatar';
}),
backgroundStyle: computed('member.{name,email}', function () {

11
app/components/gh-members-list-item.js
View File

@ -10,16 +10,17 @@ export default Component.extend({
router: service(),
tagName: 'li',
classNames: ['gh-flex-list-row'],
classNames: ['gh-list-row'],
active: false,
id: alias('member.id'),
email: alias('member.email'),
name: alias('member.name'),
subscribedAt: computed('member.createdAt', function () {
let memberSince = moment(this.member.createdAt).from(moment());
let createdDate = moment(this.member.createdAt).format('MMM DD, YYYY');
return `${createdDate} (${memberSince})`;
memberSince: computed('member.createdAt', function () {
return moment(this.member.createdAt).from(moment());
}),
createdDate: computed('member.createdAt', function () {
return moment(this.member.createdAt).format('MMM DD, YYYY');
})
});

21
app/styles/components/lists.css
View File

@ -64,10 +64,12 @@
.gh-list:not(.tabbed) .gh-list-header:first-child {
border-top-left-radius: 5px;
padding-left: 16px;
}
.gh-list:not(.tabbed) .gh-list-header:last-child {
border-top-right-radius: 5px;
padding-right: 16px;
}
.gh-list-data {
@ -82,6 +84,10 @@
border-top: none;
}
.gh-list-row .gh-list-data:first-child {
padding-left: 16px;
}
.gh-list-data.show-on-hover > *,
.gh-list-cell.show-on-hover > * {
opacity: 0;
@ -114,6 +120,21 @@
width: 33%;
}
.gh-list-cellwidth-10 { width: 10%; }
.gh-list-cellwidth-20 { width: 20%; }
.gh-list-cellwidth-30 { width: 30%; }
.gh-list-cellwidth-40 { width: 40%; }
.gh-list-cellwidth-50 { width: 50%; }
.gh-list-cellwidth-60 { width: 60%; }
.gh-list-cellwidth-70 { width: 70%; }
.gh-list-cellwidth-80 { width: 80%; }
.gh-list-cellwidth-90 { width: 90%; }
.gh-list-cellwidth-100 { width: 100%; }
.gh-list-cellwidth-chevron {
width: 32px;
}
/* Typography
/* --------------------------------------------------- */
.gh-list h3 {

1
app/styles/layouts/main.css
View File

@ -658,6 +658,7 @@
margin: -3px 0 0 1px;
padding: 0;
text-overflow: ellipsis;
text-indent: -1px;
white-space: nowrap;
font-size: 2.8rem;
line-height: 1.2em;

20
app/styles/layouts/members.css
View File

@ -6,6 +6,11 @@
padding-left: 30px;
}
.gh-members-list-searchfield.active {
border-color: #3eb0ef;
box-shadow: inset 0 0 0 1px #3eb0ef;
}
p.gh-members-list-email {
margin: -2px 0 -1px;
}
@ -20,6 +25,21 @@ p.gh-members-list-email {
margin: -30px 0 15px;
}
.gh-member-list-avatar {
font-size: 1.65rem;
font-weight: 500;
line-height: 0;
letter-spacing: -0.6px;
}
.gh-member-actions-menu {
top: calc(100% + 6px);
}
.gh-member-actions-menu.fade-out {
animation-duration: .001s;
}
/* Member details
/* ----------------------------------------- */

1
app/styles/patterns/global.css
View File

@ -189,7 +189,6 @@ h1 {
}
h2 {
text-indent: -1px;
font-size: 2.2rem;
}
@media (max-width: 500px) {

8
app/templates/components/gh-members-list-item.hbs
View File

@ -1,4 +1,4 @@
{{#link-to "member" member class="gh-flex-list-data gh-flex-list-auto" title="Member details"}}
{{#link-to "member" member class="gh-list-data" title="Member details"}}
<div class="flex items-center">
<GhMemberAvatar @member={{member}} class="w9 h9 mr3" />
<div>
@ -16,10 +16,10 @@
</div>
{{/link-to}}
{{#link-to "member" member class="gh-flex-list-data gh-members-list-subscribed-at middarkgrey f8 nowrap" title="Member details" }}
Member since {{this.subscribedAt}}
{{#link-to "member" member class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap middarkgrey f8 nowrap" title="Member details" }}
{{this.createdDate}} <span class="midgrey-l2">({{this.memberSince}})</span>
{{/link-to}}
{{#link-to "member" member class="gh-flex-list-data" title="Member details"}}
{{#link-to "member" member class="gh-list-data gh-list-cellwidth-chevron align-right" title="Member details"}}
{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1 nr2"}}
{{/link-to}}

2
app/templates/member.hbs
View File

@ -15,7 +15,7 @@
</section>
</GhCanvasHeader>
<div class="flex items-center mb10 bt b--lightgrey-d1 pt8">
<GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero' 'f-headline fw4 lh-zero'}} class="w18 h18 mr4" />
<GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}} class="w18 h18 mr4" />
<div>
<h3 class="f2 fw5 ma0 pa0">
{{if member.name member.name member.email}}

37
app/templates/members.hbs
View File

@ -9,7 +9,7 @@
<span class="hidden">Members Actions</span>
</span>
{{/gh-dropdown-button}}
{{#gh-dropdown name="members-actions-menu" tagName="ul" classNames="user-actions-menu dropdown-menu dropdown-triangle-top-right"}}
{{#gh-dropdown name="members-actions-menu" tagName="ul" classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right"}}
<li>
{{#link-to "members.import" class="mr2" data-test-link="import-csv"}}
<span>Import CSV </span>
@ -24,32 +24,29 @@
</span>
<div class="relative">
{{svg-jar "search" class="gh-input-search-icon"}}
<GhTextInput placeholder="Search members..." @value={{this.searchText}} @input={{action (mut this.searchText) value="target.value"}} class="gh-members-list-searchfield" />
<GhTextInput placeholder="Search members..." @value={{this.searchText}} @input={{action (mut this.searchText) value="target.value"}} class="gh-members-list-searchfield {{if this.searchText "active"}}" />
</div>
</section>
</GhCanvasHeader>
<section class="view-container">
{{#if (or filteredMembers this.fetchMembers.isRunning this.searchText)}}
<div class="flex justify-between items-center">
<h2 class="f-small fw5 midlightgrey ttu mb2">
{{#if this.searchText}}
Search result
{{else}}
All members
{{#if this.fetchMembers.lastSuccessful}}
({{this.meta.pagination.total}})
{{else}}
(Loading...)
{{/if}}
{{/if}}
</h2>
</div>
{{/if}}
<section class="content-list">
<ol class="members-list gh-list {{unless filteredMembers "no-posts"}}">
{{#if filteredMembers}}
<li class="gh-list-row header">
<div class="gh-list-header">
{{#if this.searchText}}
Search result
{{else}}
{{#if this.fetchMembers.lastSuccessful}}
{{pluralize this.meta.pagination.total "member"}}
{{else}}
Loading...
{{/if}}
{{/if}}
</div>
<div class="gh-list-header gh-list-cellwidth-20 nowrap">Created</div>
<div class="gh-list-header gh-list-cellwidth-chevron"></div>
</li>
{{#vertical-collection
items=filteredMembers
key="id"