Refined members import/export button design

no issue
This commit is contained in:
Peter Zimon 2019-10-04 13:28:10 +02:00
parent 523b8e856f
commit 9c21f1b60c
3 changed files with 59 additions and 27 deletions

View File

@ -770,11 +770,45 @@
}
.view-actions input[type="text"] {
padding: 7px 8px 8px;
height: 33px;
padding: 8px 8px 9px;
height: 35px;
font-size: 1.3rem;
}
.view-actions .gh-input-search-icon {
position: absolute;
top: 9px;
left: 9px;
width: 16px;
height: 16px;
fill: color-mod(var(--midlightgrey) l(+5%));
}
.gh-actions-cog {
margin-right: 10px
}
.gh-actions-cog svg {
height: 13px;
width: 13px;
fill: var(--midgrey);
margin-right: 0;
}
.gh-actions-cog svg path {
stroke: initial;
}
.gh-actions-menu {
top: calc(100% + 6px);
right: 10px;
left: auto;
}
.gh-actions-menu.fade-out {
animation-duration: 0.01s;
}
@media (max-width: 400px) {
.view-header {
padding: 0 7px;

View File

@ -21,8 +21,8 @@
}
.user-actions-menu {
top: calc(100% + 17px);
right: 0;
top: calc(100% + 6px);
right: 10px;
left: auto;
}

View File

@ -2,32 +2,30 @@
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
<section class="view-actions">
<span class="dropdown">
{{#gh-dropdown-button dropdownName="members-actions-menu" classNames="gh-btn gh-btn-white gh-btn-icon only-has-icon gh-actions-cog" title="Members Actions" data-test-user-actions=true}}
<span>
{{svg-jar "settings"}}
<span class="hidden">Members Actions</span>
</span>
{{/gh-dropdown-button}}
{{#gh-dropdown name="members-actions-menu" tagName="ul" classNames="user-actions-menu dropdown-menu dropdown-triangle-top-right"}}
<li>
{{#link-to "members.import" class="mr2" data-test-link="import-csv"}}
<span>Import CSV </span>
{{/link-to}}
</li>
<li>
<a href="#" {{action 'exportData'}} class="mr2">
<span>Export CSV </span>
</a>
</li>
{{/gh-dropdown}}
</span>
<div class="relative">
{{svg-jar "search" class="absolute top-2 left-2 w4 h4 fill-midlightgrey-l2"}}
{{svg-jar "search" class="gh-input-search-icon"}}
<GhTextInput placeholder="Search members..." @value={{this.searchText}} @input={{action (mut this.searchText) value="target.value"}} class="gh-members-list-searchfield" />
</div>
<section class="view-actions">
<span class="dropdown">
{{#gh-dropdown-button dropdownName="members-actions-menu" classNames="gh-btn gh-btn-white gh-btn-icon only-has-icon user-actions-cog" title="Members Actions" data-test-user-actions=true}}
<span>
{{svg-jar "settings"}}
<span class="hidden">Members Actions</span>
</span>
{{/gh-dropdown-button}}
{{#gh-dropdown name="members-actions-menu" tagName="ul" classNames="user-actions-menu dropdown-menu dropdown-triangle-top-right"}}
<li>
{{#link-to "members.import" class="mr2" data-test-link="import-csv"}}
<span>Import CSV </span>
{{/link-to}}
</li>
<li>
<a href="#" {{action 'exportData'}} class="mr2">
<span>Export CSV </span>
</a>
</li>
{{/gh-dropdown}}
</span>
</section>
</section>
</GhCanvasHeader>
<section class="view-container">