Merge pull request #15158 from hashicorp/ui/improve-layout-address-list-peer-detail

ui: Improve layout address list peer detail
This commit is contained in:
Michael Klein 2022-10-27 20:26:30 +02:00 committed by GitHub
commit fc74c0c7fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 15 deletions

View File

@ -1,15 +1,25 @@
<ListCollection
class="consul-peer-address-list"
...attributes
@items={{@items}}
as |item|>
<BlockSlot @name="header">
<p>
{{item}}
<CopyButton
@value={{item}}
@name="Address"
/>
</p>
</BlockSlot>
</ListCollection>
<Providers::Dimension as |p|>
{{#if p.data.height}}
<div style={{p.data.fillRemainingHeightStyle}} class="overflow-y-scroll">
<VerticalCollection
@tagName="ul"
@estimateHeight={{p.data.height}}
@items={{@items}}
as |address index|
>
<li
class="px-3 h-12 hds-border-primary border-t-0 border-l-0 border-r-0 flex items-center justify-between group"
>
<div
class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold"
>{{address}}</div>
<CopyButton
@value={{address}}
@name="Address"
class="opacity-0 group-hover:opacity-100"
/>
</li>
</VerticalCollection>
</div>
{{/if}}
</Providers::Dimension>