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

Refined member import result screen 

no issues.
- puts back file icon preview when not in dev. experiment
- refines generic style of member import result screen
This commit is contained in:
Peter Zimon 2020-06-18 15:22:46 +02:00
parent 0e55590360
commit 0b59628f85
3 changed files with 48 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/components/modal-import-members.hbs
View File

@ -10,30 +10,24 @@
<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
{{#if this.importResponse}}
<div class="modal-body bg-whitegrey-l2 ba b--whitegrey br3">
<table class="gh-members-import-results">
<tr>
<td>Imported:</td>
<td align="left" data-test-text="import-members-imported">{{this.importResponse.imported.count}}</td>
</tr>
{{#if this.importResponse.invalid.count}}
<tr>
<td class="red">Invalid:</td>
<td align="left" data-test-text="import-members-invalid" class="red">{{this.importResponse.invalid.count}}</td>
</tr>
{{#if this.config.enableDeveloperExperiments}}
<tr>
<td colspan="2">Details:</td>
</tr>
{{#each this.importResponse.invalid.errors as |error|}}
<tr>
<td>{{error.message}}</td>
<td>{{error.count}}</td>
</tr>
{{/each}}
{{/if}}
<div class="modal-body bg-whitegrey-l2 ba b--whitegrey br3 pa4">
<div class="flex items-center">
{{svg-jar "check-circle" class="w4 h4 stroke-green mr2"}}
<p class="ma0 pa0"><span class="fw6">{{this.importResponse.imported.count}}</span> members were added</p>
</div>
{{#if this.importResponse.invalid.count}}
<div class="flex items-start mt2">
{{svg-jar "warning" class="w4 h4 fill-red mr2 nudge-top--3"}}
<div>
<p class="ma0 pa0"><span class="fw5">{{this.importResponse.invalid.count}}</span> members were skipped</p>
</div>
</div>
{{#if this.config.enableDeveloperExperiments}}
{{#each this.importResponse.invalid.errors as |error|}}
<p class="gh-members-import-errordetail">{{error.message}} <span class="fw6">{{error.count}}</span></p>
{{/each}}
{{/if}}
</table>
{{/if}}
</div>
{{else}}
<div class="modal-body">
@ -52,6 +46,13 @@
{{#if this.config.enableDeveloperExperiments}}
<h4 class="fw6 f8 dib mb1">Preview</h4>
<GhMembersImportTable @importData={{this.fileData}}/>
{{else}}
<div class="bg-whitegrey-l2 ba b--whitegrey br3">
<div class="flex flex-column items-center justify-center gh-members-import-file">
{{svg-jar "file-tabular-data" class="w9 h9 mb1 stroke-midgrey"}}
<div class="description midgrey">{{this.file.name}}</div>
</div>
</div>
{{/if}}
<div class="mt4">

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

@ -440,11 +440,6 @@ textarea.gh-member-details-textarea {
min-height: 180px;
}
.gh-members-import-results {
margin: 0;
width: auto;
}
.gh-members-import-file {
min-height: 180px;
}
@ -513,3 +508,15 @@ p.gh-members-import-errordetailtext {
.gh-members-import-table tr:not(:last-of-type) td {
border-bottom: 1px solid var(--whitegrey);
}
p.gh-members-import-errordetail {
font-size: 1.2rem;
line-height: 1.4em;
margin: 10px 0 0 24px;
}
p.gh-members-import-errordetail:first-of-type {
border-top: 1px solid var(--whitegrey);
padding-top: 8px;
margin-top: 8px;
}

12
app/styles/patterns/buttons.css
View File

@ -373,6 +373,18 @@ svg.gh-btn-icon-right {
color: var(--darkgrey);
}
.gh-btn-text.blue span {
color: var(--blue);
}
.gh-btn-text.red span {
color: var(--red);
}
.gh-btn-text.yellow span {
color: color-mod(var(--yellow) l(-10%));
}
.gh-btn-outline {
background: none;
box-shadow: none;