Fixed dropdown styling for content filter and members chart timeframe

refs 654d373655

- `<PowerSelect>` no longer has it's own wrapper element so `@classNames=` has no effect and needs to be added to an explicit wrapper element
This commit is contained in:
Kevin Ansfield 2020-05-22 11:38:50 +01:00
parent 18a910d2ab
commit 03d4c55a8e
3 changed files with 6 additions and 18 deletions

View File

@ -1,13 +1,11 @@
<div class="gh-contentfilter" ...attributes> <div class="gh-contentfilter" ...attributes>
{{#unless this.session.user.isContributor}} {{#unless this.session.user.isContributor}}
<div data-test-type-select="true"> <div class="gh-contentfilter-menu gh-contentfilter-type {{if @selectedType.value "gh-contentfilter-selected"}}" data-test-type-select="true">
<PowerSelect <PowerSelect
@selected={{@selectedType}} @selected={{@selectedType}}
@options={{@availableTypes}} @options={{@availableTypes}}
@searchEnabled={{false}} @searchEnabled={{false}}
@onChange={{@onTypeChange}} @onChange={{@onTypeChange}}
@tagName="div"
@classNames={{concat "gh-contentfilter-menu gh-contentfilter-type " (if @selectedType.value "gh-contentfilter-selected")}}
@triggerComponent="gh-power-select/trigger" @triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger" @triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown" @dropdownClass="gh-contentfilter-menu-dropdown"
@ -20,14 +18,12 @@
{{/unless}} {{/unless}}
{{#unless this.session.user.isAuthorOrContributor}} {{#unless this.session.user.isAuthorOrContributor}}
<div data-test-author-select="true"> <div class="gh-contentfilter-menu gh-contentfilter-author {{if @selectedAuthor.slug "gh-contentfilter-selected"}}" data-test-author-select="true">
<PowerSelect <PowerSelect
@selected={{@selectedAuthor}} @selected={{@selectedAuthor}}
@options={{@availableAuthors}} @options={{@availableAuthors}}
@searchField="name" @searchField="name"
@onChange={{@onAuthorChange}} @onChange={{@onAuthorChange}}
@tagName="div"
@classNames={{concat "gh-contentfilter-menu gh-contentfilter-author " (if @selectedAuthor.slug "gh-contentfilter-selected")}}
@triggerComponent="gh-power-select/trigger" @triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger" @triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown" @dropdownClass="gh-contentfilter-menu-dropdown"
@ -41,14 +37,12 @@
{{/unless}} {{/unless}}
{{#unless this.session.user.isContributor}} {{#unless this.session.user.isContributor}}
<div data-test-tag-select="true"> <div class="gh-contentfilter-menu gh-contentfilter-tag {{if @selectedTag.slug "gh-contentfilter-selected"}}" data-test-tag-select="true">
<PowerSelect <PowerSelect
@selected={{@selectedTag}} @selected={{@selectedTag}}
@options={{@availableTags}} @options={{@availableTags}}
@searchField="name" @searchField="name"
@onChange={{@onTagChange}} @onChange={{@onTagChange}}
@tagName="div"
@classNames={{concat "gh-contentfilter-menu gh-contentfilter-tag " (if @selectedTag.slug "gh-contentfilter-selected")}}
@triggerComponent="gh-power-select/trigger" @triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger" @triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown" @dropdownClass="gh-contentfilter-menu-dropdown"
@ -62,14 +56,12 @@
</div> </div>
{{/unless}} {{/unless}}
<div data-test-order-select="true"> <div class="gh-contentfilter-menu gh-contentfilter-sort" data-test-order-select="true">
<PowerSelect <PowerSelect
@selected={{@selectedOrder}} @selected={{@selectedOrder}}
@options={{@availableOrders}} @options={{@availableOrders}}
@searchEnabled={{false}} @searchEnabled={{false}}
@onChange={{@onOrderChange}} @onChange={{@onOrderChange}}
@tagName="div"
@classNames="gh-contentfilter-menu gh-contentfilter-sort"
@triggerComponent="gh-power-select/trigger" @triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger" @triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown" @dropdownClass="gh-contentfilter-menu-dropdown"

View File

@ -5,14 +5,12 @@
<div class="flex justify-between items-center gh-members-chart-header"> <div class="flex justify-between items-center gh-members-chart-header">
<h2 class="f-small ttu midgrey fw5 mb0">Total members</h2> <h2 class="f-small ttu midgrey fw5 mb0">Total members</h2>
<div class="view-actions"> <div class="view-actions">
<div class="gh-contentfilter"> <div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
<PowerSelect <PowerSelect
@selected={{this.selectedRange}} @selected={{this.selectedRange}}
@options={{this.availableRange}} @options={{this.availableRange}}
@searchEnabled={{false}} @searchEnabled={{false}}
@onChange={{action "changeDateRange"}} @onChange={{action "changeDateRange"}}
@tagName="div"
@classNames="gh-contentfilter-menu gh-contentfilter-type"
@triggerComponent="gh-power-select/trigger" @triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger" @triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown gh-members-chart-dropdown" @dropdownClass="gh-contentfilter-menu-dropdown gh-members-chart-dropdown"

View File

@ -5,14 +5,12 @@
<div class="flex justify-between items-center gh-members-chart-header"> <div class="flex justify-between items-center gh-members-chart-header">
<h2 class="f-small ttu midgrey fw5 mb0">Total members</h2> <h2 class="f-small ttu midgrey fw5 mb0">Total members</h2>
<div class="view-actions"> <div class="view-actions">
<div class="gh-contentfilter"> <div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
<PowerSelect <PowerSelect
@selected={{this.selectedRange}} @selected={{this.selectedRange}}
@options={{this.availableRange}} @options={{this.availableRange}}
@searchEnabled={{false}} @searchEnabled={{false}}
@onChange={{action "changeDateRange"}} @onChange={{action "changeDateRange"}}
@tagName="div"
@classNames="gh-contentfilter-menu gh-contentfilter-type"
@triggerComponent="gh-power-select/trigger" @triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger" @triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown gh-members-chart-dropdown" @dropdownClass="gh-contentfilter-menu-dropdown gh-members-chart-dropdown"