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

Refined members import modal dropdown 

no refs.
- updated style of members import modal field dropdown
This commit is contained in:
Peter Zimon 2020-07-07 13:07:21 +02:00
parent b8484d4eb4
commit 50055f7a8c
5 changed files with 81 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/gh-members-import-mapping-input.hbs
View File

@ -1,4 +1,4 @@
<span class="gh-select">
<span class="gh-select gh-import-member-select {{unless this.mapTo "unmapped"}}">
<OneWaySelect @value={{this.mapTo}}
@options={{this.availableFields}}
@optionValuePath="value"

24
app/components/gh-members-import-table.hbs
View File

@ -1,22 +1,24 @@
<table class="f8 gh-members-import-table ma0">
<thead>
<th class="bb br b--whitegrey"><span class="f-small midgrey ttu fw5">Field</span></th>
<th class="bb b--whitegrey">
<div class="flex items-center justify-between">
<span class="f-small midgrey ttu fw5 nudge-top--1">Data</span>
<div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
<a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a>
<a href="#" {{action "next"}} class="pa1 flex items-center justify-center" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>
<tr>
<th><span class="f-small midgrey ttu fw5">Field</span></th>
<th>
<div class="flex items-center justify-between">
<span class="f-small midgrey ttu fw5 nudge-top--1">Data</span>
<div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
<a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a>
<a href="#" {{action "next"}} class="pa1 flex items-center justify-center" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>
</div>
</div>
</div>
</th>
<th class="bb b--whitegrey"><span class="f-small midgrey ttu fw5">Import as...</span></th>
</th>
<th><span class="f-small midgrey ttu fw5">Import as...</span></th>
</tr>
</thead>
<tbody>
{{#each currentlyDisplayedData as |row|}}
<tr>
<td class="middarkgrey"><span>{{row.key}}</span></td>
<td class="middarkgrey {{unless value "empty-cell"}}"><span>{{row.value}}</span></td>
<td class="middarkgrey {{unless row.value "empty-cell"}}"><span>{{row.value}}</span></td>
<td><span><GhMembersImportMappingInput @updateMapping={{this.updateMapping}} @mapFrom={{row.key}} @mapTo={{row.mapTo}} /></span></td>
</tr>
{{else}}

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

@ -528,4 +528,8 @@ input:focus,
.gh-members-import-table::after {
background: #212A2E;
}
.gh-import-member-select,
.gh-import-member-select select {
background: none !important;
}

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

@ -435,6 +435,10 @@ textarea.gh-member-details-textarea {
/* Import modal
/* ---------------------------------------------------------- */
.fullscreen-modal-import-members {
max-width: 640px;
}
.gh-members-import-uploader {
width: 100%;
min-height: 180px;
@ -516,7 +520,7 @@ p.gh-members-import-errordetailtext {
.gh-members-import-table {
position: relative;
border: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
margin-bottom: 1px;
}
.gh-members-import-table::before {
@ -546,6 +550,13 @@ p.gh-members-import-errordetailtext {
.gh-members-import-table th {
padding: 3px 8px;
background: color-mod(var(--darkgrey) a(5%) s(+50%));
border-left: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
border-top: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
}
.gh-members-import-table tr th:last-of-type {
border-right: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
}
.gh-members-import-table td.empty-cell {
@ -554,16 +565,18 @@ p.gh-members-import-errordetailtext {
.gh-members-import-table td {
padding: 6px 8px;
border-left: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
}
.gh-members-import-table tr td:first-of-type,
.gh-members-import-table tr th:first-of-type {
width: 170px;
border-right: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
}
.gh-members-import-table tr:not(:last-of-type) td {
border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
.gh-members-import-table tr td:last-of-type {
padding: 0;
border-right: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
}
.gh-members-import-datanav {
@ -581,3 +594,48 @@ p.gh-members-import-errordetail:first-of-type {
padding-top: 8px;
margin-top: 8px;
}
.gh-import-member-select {
height: auto;
border: none;
background: none;
border-radius: 0;
}
.gh-import-member-select select {
height: 36px;
border: none;
font-size: 1.3rem;
line-height: 1em;
padding: 4px 4px 4px 8px;
background: none;
color: var(--middarkgrey);
font-weight: 600;
border-radius: 0;
}
.gh-import-member-select select option {
font-weight: 400;
}
.gh-import-member-select select:focus {
background: none;
color: var(--middarkgrey);
}
.gh-import-member-select.unmapped select,
.gh-import-member-select.unmapped select:focus {
color: var(--midlightgrey);
font-weight: 400;
}
.gh-import-member-select svg {
right: 8px;
}
/* Fixing Firefox's select padding */
@-moz-document url-prefix() {
.gh-import-member-select select {
padding: 4px;
}
}

2
app/templates/members/import.hbs
View File

@ -1,4 +1,4 @@
<GhFullscreenModal @modal="import-members"
@confirm={{this.refreshMembers}}
@close={{this.close}}
@modifier="action wide" />
@modifier="action wide import-members" />