TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 03:44:29 +03:00
Code Issues Projects Releases Wiki Activity

First iteration of adding in post and page columns to event tables

Browse Source 
- Adding in dummy column for page or post to various event table places
- This still requires wiring up with real data

refs https://github.com/TryGhost/Team/issues/1815
This commit is contained in:
James Morris 2022-08-17 16:19:59 +01:00
parent ee3f458053
commit 26150ca769
8 changed files with 293 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ghost/admin/app/components/dashboard/charts/recents.hbs
View File

@ -70,6 +70,7 @@
<div class="gh-dashboard-list-header">
<div class="gh-dashboard-list-title">Member</div>
<div class="gh-dashboard-list-title">Event</div>
<div class="gh-dashboard-list-title">Page / Post</div>
<div class="gh-dashboard-list-title">Time</div>
</div>
<div class="gh-dashboard-list-body">
@ -93,23 +94,33 @@
{{#let (parse-member-event event eventsFetcher.hasMultipleNewsletters) as |parsedEvent|}}
<div class="gh-dashboard-list-item member-details">
<div class="gh-dashboard-list-item-sub">
<GhMemberAvatar @member={{parsedEvent.member}} @containerClass="w8 h8 mr3 flex-shrink-0" />
<LinkTo class="gh-dashboard-list-text" @route="member" @model="{{parsedEvent.memberId}}" data-test-dashboard-member-activity-item>{{parsedEvent.subject}}</LinkTo>
<LinkTo class="gh-dashboard-list-member" @route="member" @model="{{parsedEvent.memberId}}" data-test-dashboard-member-activity-item>
<GhMemberAvatar @member={{parsedEvent.member}} @containerClass="w8 h8 mr3 flex-shrink-0" />
<span class="gh-dashboard-list-text">{{parsedEvent.subject}}</span>
</LinkTo>
</div>
<div class="gh-dashboard-list-item-sub">
{{svg-jar parsedEvent.icon}}
<span class="gh-dashboard-list-subtext">
{{capitalize-first-letter parsedEvent.action}}
{{#if parsedEvent.url}}
"<a class="ghost-members-activity-object-link" href="{{parsedEvent.url}}" target="_blank" rel="noopener noreferrer">{{parsedEvent.object}}</a>"
{{else}}
{{parsedEvent.object}}
{{/if}}
{{parsedEvent.info}}
</span>
{{#if parsedEvent.object}}
{{parsedEvent.object}}
{{/if}}
{{#if parsedEvent.info}}
{{parsedEvent.info}}
{{/if}}
</div>
{{!-- TODO: Wire up the new event page/post links in this column --}}
<div class="gh-dashboard-list-item-sub">
<span class="gh-dashboard-list-subtext">{{moment-format parsedEvent.timestamp "DD MMM YYYY HH:mm"}}</span>
{{#if parsedEvent.url}}
<a class="ghost-members-activity-object-link" href="{{parsedEvent.url}}" target="_blank" rel="noopener noreferrer">{{parsedEvent.object}}</a>
{{else}}
<span class="gh-list-nodata">&mdash;</span>
{{/if}}
</div>
<div class="gh-dashboard-list-item-sub gh-dashboard-list-date">
<span class="gh-dashboard-list-subtext">{{moment-from-now parsedEvent.timestamp}}</span>
</div>
</div>
{{/let}}

89
ghost/admin/app/components/member/activity-feed.hbs
View File

@ -9,52 +9,61 @@
{{#let (members-event-fetcher filter=(members-event-filter member=@member.id) pageSize=5) as |eventsFetcher|}}
<div class="gh-main-section-content grey {{if eventsFetcher.data "" "mt8"}}">
<div class="gh-member-feed {{if eventsFetcher.data "" "gh-member-feed-no-data"}}" ...attributes>
<div class="flex-auto flex flex-column items-stretch {{if eventsFetcher.data "justify-between" "h-100 justify-center"}}">
<div>
{{#if eventsFetcher.isLoading}}
<div class="relative h17"><GhLoadingSpinner class="h30" /></div>
{{else if eventsFetcher.data}}
{{#each eventsFetcher.data as |rawEvent|}}
{{#let (parse-member-event rawEvent eventsFetcher.hasMultipleNewsletters) as |event|}}
<div class="gh-member-feed-row">
<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">
<span class="gh-member-feed-event-inner">
<span class="gh-members-activity-description">
{{capitalize-first-letter event.action}}
{{#if event.url}}
"<a class="ghost-members-activity-object-link" href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.object}}</a>"
{{else}}
{{event.object}}
{{/if}}
</span>
{{#if event.email}}
"<GhEmailPreviewLink @data={{event.email}} />"
<div class="gh-list-mini-header">
<div class="gh-list-mini-title">Event</div>
<div class="gh-list-mini-title">Page / Post</div>
<div class="gh-list-mini-title">Time</div>
</div>
<div class="gh-list-mini-body">
{{#if eventsFetcher.isLoading}}
<div class="relative h17"><GhLoadingSpinner class="h30" /></div>
{{else if eventsFetcher.data}}
{{#each eventsFetcher.data as |rawEvent|}}
{{#let (parse-member-event rawEvent eventsFetcher.hasMultipleNewsletters) as |event|}}
<div class="gh-list-mini-item">
<div class="gh-list-mini-item-sub">
<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">
<span class="gh-member-feed-event-inner">
<span class="gh-members-activity-description">
{{capitalize-first-letter event.action}}
{{#if event.object}}
{{event.object}}
{{/if}}
{{#if event.info}}
<span class="highlight">{{event.info}}</span>
{{/if}}
{{event.info}}
</span>
</div>
<div class="gh-member-feed-time">
{{moment-from-now event.timestamp}}
</div>
</span>
</div>
</div>
</div>
{{/let}}
{{/each}}
{{!-- TODO: Wire up the new event page/post links in this column --}}
<div class="gh-list-mini-item-sub">
{{#if event.url}}
<a href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.object}}</a>
{{else if event.email}}
<GhEmailPreviewLink @data={{event.email}} />
{{else}}
<span class="gh-list-nodata">&mdash;</span>
{{/if}}
</div>
<div class="gh-list-mini-item-sub">
{{moment-from-now event.timestamp}}
</div>
</div>
{{/let}}
{{/each}}
<div class="gh-member-feed-footer">
<LinkTo @route="members-activity" @query={{hash excludedEvents=null member=@member.id}}>See all activity →</LinkTo>
</div>
{{else}}
<Member::ActivityFeedEmpty />
{{/if}}
</div>
<div class="gh-list-mini-footer">
<LinkTo @route="members-activity" @query={{hash excludedEvents=null member=@member.id}}>See all activity →</LinkTo>
</div>
{{else}}
<Member::ActivityFeedEmpty />
{{/if}}
</div>
</div>
</div>

21
ghost/admin/app/components/members-activity/table-row.hbs
View File

@ -21,19 +21,26 @@
<div class="gh-members-activity-event">
<span class="gh-members-activity-description">
{{capitalize-first-letter event.action}}
{{#if event.url}}
"<a class="ghost-members-activity-object-link" href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.object}}</a>"
{{else}}
{{#if event.object}}
{{event.object}}
{{/if}}
{{#if event.info}}
<span class="highlight">{{event.info}}</span>
{{/if}}
</span>
{{#if event.email}}
"<GhEmailPreviewLink @data={{event.email}} />"
{{/if}}
<span class="highlight">{{event.info}}</span>
</div>
</div>
</div>
{{!-- TODO: Wire up the new event page/post links in this column --}}
<div class="gh-list-data">
{{#if event.url}}
<a class="ghost-members-activity-object-link" href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.object}}</a>
{{else if event.email}}
<GhEmailPreviewLink @data={{event.email}} />
{{else}}
<span class="gh-list-nodata">&mdash;</span>
{{/if}}
</div>
<div class="gh-list-data">{{moment-format event.timestamp "DD MMM YYYY HH:mm"}}</div>
</tr>
{{/let}}

1
ghost/admin/app/components/members-activity/table.hbs
View File

@ -5,6 +5,7 @@
<th>Member</th>
{{/unless}}
<th>Event</th>
<th>Page / Post</th>
<th>Time</th>
</tr>
</thead>

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

@ -152,6 +152,26 @@ ul.nostyle li {
width: 32px;
}
.gh-list-nodata {
font-size: 1.5rem;
letter-spacing: 0;
text-decoration: none;
min-width: 54px;
color: var(--lightgrey);
font-weight: 500;
}
.gh-list-separator {
font-size: 1.5rem;
letter-spacing: 0;
text-decoration: none;
color: var(--lightgrey);
font-weight: 700;
padding-left: 0.375em;
padding-right: 0.375em;
}
/* Typography
/* --------------------------------------------------- */
.gh-list h3 {
@ -428,3 +448,147 @@ ul.nostyle li {
height: calc(100vh - 96px);
}
}
/* ---------------------------------
Mini List */
.gh-list-mini {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.gh-list-mini-header,
.gh-list-mini-item {
display: grid;
grid-template-columns: 35% 45% 20%;
}
.gh-list-mini-header {
padding: 16px 0 8px;
border-bottom: 1px solid var(--whitegrey);
margin: 0 0 8px;
}
.gh-list-mini-title {
align-items: center;
line-height: 1em;
white-space: nowrap;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--midgrey);
padding: 0 20px 8px 0;
text-transform: uppercase;
white-space: nowrap;
}
.gh-list-mini-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.gh-list-mini-item {
padding: 14px 0;
padding: 4px 0;
}
.gh-list-mini-item:nth-child(3) {
border-bottom: 0 none;
}
.gh-list-mini-item:last-child {
border-bottom: 0;
}
.gh-list-mini-member {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
min-width: 0;
}
.gh-list-mini-text {
font-weight: 600;
font-size: 1.5rem;
letter-spacing: 0;
color: var(--darkgrey);
padding: 0 32px 0 0;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.gh-list-mini-subtext {
font-weight: 500;
font-size: 1.4rem;
color: var(--middarkgrey);
text-decoration: none;
padding: 0 12px 0 0;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.gh-list-mini-subtext > a {
color: var(--black);
font-weight: 600;
}
.gh-list-mini-item svg {
width: 20px;
min-width: 20px;
height: 20px;
margin: 0 0.5rem 0 -4px;
}
.gh-list-mini-item-sub {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
min-height: 32px;
min-width: 0;
}
.gh-list-mini-item-sub > a {
color: var(--black);
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 0 24px 0 0;
}
.gh-list-mini-footer {
border-top: 1px solid var(--whitegrey);
padding: 16px 0 4px;
margin: 8px 0 0;
}
.gh-list-mini-date {
font-size: 1.3rem;
color: var(--midlightgrey);
text-align: right;
padding: 3px 0 0 0;
white-space: nowrap;
}
.gh-list-mini-author {
font-size: 1.3rem;
color: var(--midlightgrey);
text-align: right;
padding: 1px 0 0 0;
white-space: nowrap;
}
.gh-list-mini-empty {
flex: 1;
}

29
ghost/admin/app/styles/layouts/dashboard.css
View File

@ -689,6 +689,14 @@ Dashboard List */
background: linear-gradient(315deg,rgba(249, 249, 250, 0.5) 60%,rgba(255, 255, 255, 0.5));
}
.gh-dashboard-list-member {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
min-width: 0;
}
.gh-dashboard-list-text {
font-weight: 600;
font-size: 1.5rem;
@ -706,7 +714,7 @@ Dashboard List */
font-size: 1.4rem;
color: var(--middarkgrey);
text-decoration: none;
padding: 0 32px 0 0;
padding: 0 12px 0 0;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
@ -734,6 +742,15 @@ Dashboard List */
min-width: 0;
}
.gh-dashboard-list-item-sub > a {
color: var(--black);
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 0 32px 0 0;
}
.gh-dashboard-list-footer {
border-top: 1px solid var(--whitegrey);
padding: 20px 0 0;
@ -1137,14 +1154,6 @@ Dashboard Recents */
width: 80%;
overflow: hidden;
color: var(--darkgrey);
display: flex;
justify-content: flex-start;
align-items: center;
}
.gh-dashboard-recents .gh-dashboard-list-item a > span {
display: inline-block;
height: 57px;
}
.gh-dashboard-recents .gh-dashboard-list-title:last-child,
@ -1189,7 +1198,7 @@ Dashboard Recents */
.gh-dashboard-recents-activity .gh-dashboard-list-header,
.gh-dashboard-recents-activity .gh-dashboard-list-item {
grid-template-columns: 30% 40% 30%;
grid-template-columns: 30% 25% 30% minmax(0, 15%);
}
.gh-dashboard-recents-activity .gh-dashboard-list-title:nth-child(2),

22
ghost/admin/app/styles/layouts/member-activity.css
View File

@ -88,8 +88,23 @@
color: var(--midgrey);
}
.gh-members-activity .gh-list-scrolling thead th:nth-child(2) {
width: 25%;
min-width: 200px;
}
.gh-members-activity.gh-members-activity-single .gh-list-scrolling thead th:nth-child(2) {
width: 50%;
min-width: 200px;
}
.gh-members-activity:not(.gh-members-activity-single) .gh-list-scrolling thead th:nth-child(3) {
width: 30%;
min-width: 200px;
}
.gh-members-activity .gh-list-scrolling thead th:last-child {
width: 18%;
width: 15%;
}
.gh-members-activity .gh-list-scrolling tbody .gh-list-data:last-child {
@ -105,6 +120,11 @@
margin-bottom: 4px;
}
.gh-members-activity .gh-list .gh-list-data a {
font-weight: 500;
color: var(--black);
}
.gh-list-data-event {
display: flex;
justify-content: flex-start;

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

@ -1166,7 +1166,7 @@ textarea.gh-member-details-textarea {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-right: 1rem;
margin-right: 0.25rem;
}
.gh-member-feed-icon svg {
@ -1190,6 +1190,10 @@ textarea.gh-member-details-textarea {
padding-top: 16px;
}
.gh-member-feed-footer a {
font-weight: 600;
}
/* Import modal
/* ---------------------------------------------------------- */