status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Use pill/badge components for intention filter options (#9357)

This commit is contained in:
John Cowen 2020-12-09 19:12:57 +00:00 committed by GitHub
parent 2c3b6aec05
commit 9d81319074
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs
View File

@ -41,9 +41,12 @@
</BlockSlot> </BlockSlot>
<BlockSlot @name="options"> <BlockSlot @name="options">
{{#let components.Optgroup components.Option as |Optgroup Option|}} {{#let components.Optgroup components.Option as |Optgroup Option|}}
<Option class="value-allow" @value="allow" @selected={{contains 'allow' @filter.accesses}}>Allow</Option> <Option class="value-allow" @value="allow" @selected={{contains 'allow'
<Option class="value-deny" @value="deny" @selected={{contains 'deny' @filter.accesses}}>Deny</Option> @filter.accesses}}><span>Allow</span></Option>
<Option class="value-" @value="app-aware" @selected={{contains 'app-aware' @filter.accesses}}>App aware</Option> <Option class="value-deny" @value="deny" @selected={{contains 'deny'
@filter.accesses}}><span>Deny</span></Option>
<Option class="value-" @value="app-aware" @selected={{contains
'app-aware' @filter.accesses}}><span>App aware</span></Option>
{{/let}} {{/let}}
</BlockSlot> </BlockSlot>
</PopoverSelect> </PopoverSelect>

16
ui/packages/consul-ui/app/components/consul/intention/search-bar/index.scss
View File

@ -1,12 +1,14 @@
.consul-intention-search-bar { .consul-intention-search-bar {
.value-allow button::before { li button span {
@extend %with-arrow-right-mask, %as-pseudo; @extend %pill-700;
color: $green-500;
} }
.value-deny button::before { .value-allow span {
@extend %with-deny-color-icon, %as-pseudo; @extend %pill-allow;
} }
.value- button::before { .value-deny span {
@extend %with-layers-mask, %as-pseudo; @extend %pill-deny;
}
.value- span {
@extend %pill-l7;
} }
} }