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

Styled activity mini-views and full-view to bring closer to design 

refs https://github.com/TryGhost/Team/issues/1277
This commit is contained in:
James Morris 2022-01-26 14:37:34 +00:00
parent a20a8ecdf1
commit 0a1abe75cb
7 changed files with 161 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/components/dashboard/latest-member-activity.hbs
View File

@ -1,6 +1,10 @@
{{#if this.shouldDisplay}}
<div class="gh-dashboard-box grey activity-feed" data-test-dashboard-member-activity>
<h4 class="gh-dashboard-header">Activity feed</h4>
<div class="gh-dashboard-box activity" data-test-dashboard-member-activity>
<h4 class="gh-dashboard-header-container">
<h4 class="gh-dashboard-header">
Member activity
</h4>
</h4>
<div class="content">
{{#let (members-event-fetcher filter=(if (feature "membersActivityFeed") "type:-[email_delivered_event,email_opened_event,email_failed_event]") pageSize=5) as |eventsFetcher|}}
{{#if eventsFetcher.isLoading}}
@ -19,21 +23,26 @@
{{#unless (or eventsFetcher.isLoading eventsFetcher.isError)}}
<div class="gh-event-timeline">
{{#if eventsFetcher.data}}
<ul class="gh-dashboard-activity-feed">
<ul class="gh-dashboard-activity-list">
{{#each eventsFetcher.data as |event|}}
{{#let (parse-member-event event) as |parsedEvent|}}
<li data-test-dashboard-member-activity-item>
<li class="gh-dashboard-activity-item" data-test-dashboard-member-activity-item>
<LinkTo class="member-details" @route="member" @model="{{parsedEvent.memberId}}">
<div class="activity">
<div>
<span class="member">{{parsedEvent.subject}}</span>
{{parsedEvent.action}}
{{parsedEvent.object}}
<span class="highlight">{{parsedEvent.info}}</span>
<div class="gh-dashboard-activity-container">
{{svg-jar parsedEvent.icon}}
<div class="gh-dashboard-activity-detail">
<div class="gh-dashboard-activity-name">
{{parsedEvent.subject}}
</div>
<div class="gh-dashboard-activity-event">
{{parsedEvent.action}}
{{parsedEvent.object}}
<span class="highlight">{{parsedEvent.info}}</span>
</div>
</div>
</div>
</LinkTo>
<span class="time">{{moment-from-now parsedEvent.timestamp}}</span>
<span class="gh-dashboard-activity-time">{{moment-from-now parsedEvent.timestamp}}</span>
</li>
{{/let}}
{{/each}}
@ -47,12 +56,12 @@
</div>
{{#if (feature "membersActivityFeed")}}
<div class="gh-dashboard-top-members-footer">
<LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>See all activity {{svg-jar "arrow-right"}}</LinkTo>
<div class="footer">
<LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>See all activity →</LinkTo>
</div>
{{/if}}
{{/unless}}
{{/let}}
</div>
</div>
{{/if}}
{{/if}}

28
app/components/member/activity-feed.hbs
View File

@ -10,18 +10,30 @@
{{#each eventsFetcher.data as |rawEvent|}}
{{#let (parse-member-event rawEvent) as |event|}}
<div class="gh-member-feed-row">
<span class="gh-member-feed-activity midgrey" data-tooltip={{capitalize (concat event.action " " event.object)}}>{{svg-jar event.icon class=event.iconClass}}</span>
{{#if event.email}}
<GhEmailPreviewLink @data={{event.email}} class="gh-member-feed-title" />
{{else}}
<span class="gh-member-feed-title">{{event.action}} {{event.object}}</span>
{{/if}}
<span class="gh-member-feed-date">{{moment-format event.timestamp "D MMM YYYY"}}</span>
<div class="gh-member-feed-container">
<div class="gh-member-feed-icon">
{{svg-jar event.icon class=event.iconClass}}
</div>
<div class="gh-member-feed-detail">
<div class="gh-member-feed-event">
{{#if event.email}}
<GhEmailPreviewLink @data={{event.email}} class="gh-member-feed-title" />
{{else}}
<span class="gh-member-feed-title">{{event.action}} {{event.object}}</span>
{{/if}}
</div>
<div class="gh-member-feed-time">
{{moment-from-now event.timestamp}}
</div>
</div>
</div>
</div>
{{/let}}
{{/each}}
<LinkTo class="gh-btn gh-member-btn-expandfeed" @route="members-activity" @query={{hash excludedEvents=null member=@member.id}}><span>View all activity</span></LinkTo>
<div class="gh-member-feed-footer">
<LinkTo @route="members-activity" @query={{hash excludedEvents=null member=@member.id}}>See all activity →</LinkTo>
</div>
{{else}}
<div class="gh-members-no-data gh-members-no-list">
<div class="lightgrey">{{svg-jar "no-data-list"}}</div>

2
app/components/members-activity/table-row.hbs
View File

@ -7,7 +7,7 @@
{{#unless @hideMemberColumn}}
<div class="gh-members-activity-name">
<LinkTo @route="member" @model={{event.memberId}}>
<strong>{{event.member.name}}{{#unless event.member.name}}{{event.member.email}}{{/unless}}</strong>
{{event.member.name}}{{#unless event.member.name}}{{event.member.email}}{{/unless}}
</LinkTo>
</div>
{{/unless}}

4
app/styles/app-dark.css
View File

@ -961,7 +961,9 @@ input:focus,
}
/* Members activity */
.gh-members-activity-icon svg path {
.gh-members-activity-icon svg path,
.gh-dashboard-activity-container svg path,
.gh-member-feed-icon svg path {
stroke: #fff;
}

85
app/styles/layouts/dashboard.css
View File

@ -198,7 +198,8 @@
background-position: top right;
}
.gh-dashboard-box .content a {
.gh-dashboard-box .content a,
.gh-dashboard-box .footer a {
color: var(--green);
}
@ -206,7 +207,8 @@
color: var(--black);
}
.gh-dashboard-box .content a:hover {
.gh-dashboard-box .content a:hover,
.gh-dashboard-box .footer a:hover {
color: var(--green-d2);
}
@ -656,67 +658,92 @@ a.gh-dashboard-container {
}
/* Activity feed */
.gh-dashboard-area.activity-feed {
.gh-dashboard-area.activity {
grid-column: 3 / 4;
grid-row: 3 / 4;
padding: 0;
margin: 0;
}
.gh-dashboard-box.activity-feed .gh-dashboard-header {
border-bottom: 1px solid var(--whitegrey-d2);
padding-bottom: 14px;
}
.gh-dashboard-activity-feed {
.gh-dashboard-activity-list {
display: flex;
flex-direction: column;
align-items: stretch;
list-style: none;
padding: 0;
margin: 4px 0 0;
margin: 0;
width: 100%;
}
.gh-dashboard-activity-feed li {
.gh-dashboard-activity-item {
display: flex;
align-items: baseline;
flex-grow: 1;
width: 100%;
justify-content: space-between;
margin: 8px 0;
padding: 0;
margin: 0 0 14px;
padding: 0 0 14px;
color: var(--darkgrey);
border-bottom: 1px solid var(--whitegrey);
}
.gh-dashboard-activity-feed .activity {
.gh-dashboard-box.activity .gh-dashboard-header-container {
margin: 0 0 12px;
}
.gh-dashboard-activity-container {
display: flex;
align-items: baseline;
margin-right: 32px;
color: var(--midgrey);
line-height: 1.5em;
font-size: 1.3rem;
flex-direction: row;
align-items: center;
}
.gh-dashboard-activity-feed .member {
font-weight: 500;
color: var(--black);
font-size: 1.4rem;
.gh-dashboard-activity-detail {
display: flex;
flex-direction: column;
}
.gh-dashboard-activity-feed .activity svg {
width: 12px;
height: 12px;
margin-right: 8px;
margin-top: 1px;
.gh-dashboard-activity-container svg {
width: 24px;
height: 24px;
margin: 0 1rem 1rem 0;
}
.gh-dashboard-activity-feed .time {
.gh-dashboard-activity-event {
display: inline-block;
text-transform: lowercase;
}
.gh-dashboard-activity-event:first-letter {
text-transform: uppercase;
}
.gh-dashboard-activity-time {
white-space: nowrap;
margin-left: 12px;
color: var(--midgrey);
font-size: 1.3rem;
}
.gh-dashboard-box.activity .footer {
margin-bottom: -12px;
}
.gh-dashboard-box.activity a .gh-dashboard-activity-name {
font-weight: 700;
font-size: 14px;
color: var(--black);
margin: 0 0 1px;
}
.gh-dashboard-box.activity a .gh-dashboard-activity-event {
font-weight: 400;
font-size: 13px;
color: var(--middarkgrey);
}
/* No data list */
.gh-no-data-list {
display: flex;
flex-direction: column;

21
app/styles/layouts/member-activity.css
View File

@ -20,7 +20,7 @@
display: flex;
flex-direction: row;
align-items: center;
padding: 1.5rem 0;
padding: 1.25rem 0;
}
.gh-members-activity-detail {
@ -31,12 +31,19 @@
.gh-members-activity-description {
display: inline-block;
text-transform: lowercase;
color: var(--middarkgrey);
}
.gh-members-activity-description:first-letter {
text-transform: uppercase;
}
.gh-members-activity-single .gh-members-activity-description {
font-weight: 500;
font-size: 14px;
color: var(--black);
}
.gh-members-activity-icon {
width: 24px;
height: 24px;
@ -52,6 +59,18 @@
height: 100%;
}
.gh-members-activity-name {
font-weight: 600;
font-size: 14px;
color: var(--black);
}
.gh-members-activity-event {
font-weight: 400;
font-size: 13px;
color: var(--middarkgrey);
}
@media (max-width: 1450px) {
.gh-members-activity .gh-canvas-header.break.tablet .gh-canvas-header-content {
height: 95px;

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

@ -755,56 +755,57 @@ textarea.gh-member-details-textarea {
stroke-width: 1px;
}
.gh-member-feed {
margin: -12px 0 -8px;
.gh-member-feed-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem 0;
}
.gh-member-feed-row:first-child .gh-member-feed-container {
padding-top: 0;
}
.gh-member-feed-row {
border-bottom: 1px solid var(--whitegrey);
}
.gh-member-feed-detail {
display: flex;
align-items: flex-start;
padding: 0;
flex-direction: column;
}
.gh-member-feed-activity {
display: flex;
align-items: center;
padding: 12px 0;
}
.gh-member-feed-activity svg {
width: 16px;
margin-right: 1rem;
}
.gh-member-feed-title {
display: table-cell;
padding: 10px 0;
line-height: 1.4em;
vertical-align: middle;
color: var(--darkgrey);
text-align: left;
.gh-member-feed-event {
display: inline-block;
text-transform: lowercase;
font-weight: 500;
}
.gh-member-feed-title:hover {
font-size: 14px;
color: var(--black);
}
.gh-member-feed-date {
margin-left: auto;
padding: 10px 0 10px 16px;
.gh-member-feed-event:first-letter {
text-transform: uppercase;
}
.gh-member-feed-icon {
width: 24px;
height: 24px;
margin: 0 1rem 1rem 0;
}
.gh-member-feed-icon svg {
width: 100%;
height: 100%;
}
.gh-member-feed-time {
font-weight: 400;
font-size: 13px;
color: var(--midgrey);
font-size: 1.3rem;
text-align: right;
white-space: nowrap;
}
.gh-member-feed-row:hover .gh-member-feed-date {
color: var(--darkgrey);
}
.gh-member-btn-expandfeed {
margin: 8px 0;
.gh-member-feed-footer {
padding-top: 16px;
}