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

Updated import-members modal

Browse Source
This commit is contained in:
Sanne de Vries 2022-02-08 14:56:19 +01:00
parent 8e5cbf4e0f
commit 4cd5ea90eb
7 changed files with 45 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ghost/admin/app/components/modal-import-members.hbs
View File

@ -3,6 +3,7 @@
<header class="modal-header" data-test-modal="import-members">
<h1>Import members</h1>
</header>
<p class="gh-box gh-box-green">Need some help? <a href="https://ghost.org/help/import-members/" target="_blank" rel="noopener noreferrer">Learn more</a> about importing members or <a href="https://static.ghost.org/v4.0.0/files/member-import-template.csv" target="_blank" rel="noopener noreferrer">download a sample CSV file</a>.</p>
{{/if}}
{{#if (or (eq this.state 'MAPPING') (eq this.state 'UPLOADING'))}}
@ -104,18 +105,11 @@
{{/if}}
</div>
<div class="modal-footer modal-footer-spread">
<div class="modal-footer">
{{#if (eq this.state 'INIT')}}
<button class="gh-btn" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
<span>Close</span>
</button>
<a
class="gh-btn"
href="https://static.ghost.org/v4.0.0/files/member-import-template.csv"
target="_blank" rel="noopener noreferrer"
>
<span>Download sample CSV file</span>
</a>
{{/if}}
{{#if (eq this.state 'MAPPING')}}

6
ghost/admin/app/components/modal-import-members/csv-file-select.hbs
View File

@ -4,7 +4,7 @@
<p class="ma0 pa0">{{this.error.message}}</p>
</div>
{{/if}}
<div class="upload-form bg-whitegrey-l2 ba b--whitegrey br3">
<div class="upload-form br3">
<section class="gh-image-uploader gh-members-import-uploader {{this.dragClass}}"
{{on "drop" this.drop}}
{{on "dragover" this.dragOver}}
@ -12,8 +12,8 @@
>
<GhFileInput @multiple={{false}} @alt={{this.labelText}} @action={{this.fileSelected}} @accept={{this.accept}}>
<div class="flex flex-column items-center">
{{svg-jar "upload" class="w9 h9 mb1 stroke-midgrey"}}
<div class="description midgrey">{{this.labelText}}</div>
{{svg-jar "upload"}}
<div class="description">{{this.labelText}}</div>
</div>
</GhFileInput>
</section>

2
ghost/admin/app/styles/components/modals-new.css
View File

@ -266,7 +266,7 @@
.modal-body .gh-image-uploader {
margin: 0;
background: color-mod(var(--whitegrey) h(+7) s(-4%) l(+5%));
background: var(--whitegrey-l2);
}
/* Modifiers

2
ghost/admin/app/styles/components/modals.css
View File

@ -249,7 +249,7 @@
.modal-body .gh-image-uploader {
margin: 0;
background: color-mod(var(--whitegrey) h(+7) s(-4%) l(+5%));
background: var(--whitegrey-l2);
}

3
ghost/admin/app/styles/components/uploader.css
View File

@ -10,7 +10,7 @@
min-height: 130px;
overflow: hidden;
margin: 1.6em 0;
color: color-mod(var(--midgrey) l(-18%));
color: var(--middarkgrey);
text-align: center;
border-radius: 3px;
}
@ -73,6 +73,7 @@
.gh-image-uploader .x-file-input {
flex-grow: 1;
display: flex;
width: 100%;
}
.gh-image-uploader .x-file-input label {

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

@ -1089,6 +1089,30 @@ textarea.gh-member-details-textarea {
min-height: 180px;
}
.gh-members-import-uploader svg {
width: 3.2rem;
height: 3.2rem;
margin-bottom: 1rem;
}
.gh-members-import-uploader svg path {
stroke: var(--midlightgrey);
}
.gh-members-import-uploader:hover svg path {
stroke: var(--midgrey-l1);
}
.gh-members-import-uploader .description {
color: var(--midgrey);
font-size: 1.4rem;
font-weight: 500;
}
.gh-members-import-uploader:hover .description {
color: var(--midgrey-d2);
}
.gh-members-import-file {
min-height: 180px;
}

14
ghost/admin/app/styles/patterns/boxes.css
View File

@ -15,19 +15,29 @@
.gh-box a {
color: var(--black);
font-weight: 600;
font-weight: 500;
}
.gh-box svg:first-of-type {
position: absolute;
left: 12px;
width: auto;
fill: var(--blue);
}
.gh-box-tip svg:first-of-type {
top: 12px;
height: 2rem;
fill: var(--blue);
}
.gh-box-green {
padding: 12px 24px;
background: color-mod(var(--green) a(4%));
border-color: color-mod(var(--green) a(60%));
}
.gh-box-green a {
color: var(--green-d1);
}
.gh-box-alert {