feat: Add condensed style to Rose::Table
This commit is contained in:
Susmitha Girumala authored and 
Carlos Alcaide committed
1 parent
3bef3e4bc5
commit
4ace04de7a
4 files changed
+107
-89
No files matched your search
@@ -1,4 +1,4 @@
|
||||
<table ...attributes class="rose-table">
|
||||
<table ...attributes class="rose-table {{if @style (concat "rose-table-" @style)}}">
|
||||
{{#if @caption}}
|
||||
<caption>{{@caption}}</caption>
|
||||
{{/if}}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<tr ...attributes class='rose-table-row'>
|
||||
<tr ...attributes class='rose-table-row {{if @visually-hidden (concat "rose-table-row-visually-hidden")}}'>
|
||||
{{yield (hash
|
||||
cell=(component 'rose/anonymous'
|
||||
tagName='td'
|
||||
|
||||
@@ -38,4 +38,19 @@
|
||||
[class*='rose-button'] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.rose-table-condensed {
|
||||
.rose-table-cell {
|
||||
@include type.type(s);
|
||||
$lineHeight: 36 / 14;
|
||||
line-height: $lineHeight;
|
||||
padding: (sizing.rems(s) / 2) sizing.rems(s);
|
||||
}
|
||||
}
|
||||
|
||||
.rose-table-row-visually-hidden {
|
||||
position: absolute;
|
||||
top: -9999rem;
|
||||
left: -9999rem;
|
||||
}
|
||||
}
|
||||
@@ -1,93 +1,96 @@
|
||||
<Rose::Header as |header|>
|
||||
<header.brand @logo="logo" @text="Product Name" />
|
||||
<h2>Condensed Table</h2>
|
||||
|
||||
<header.nav as |nav|>
|
||||
<nav.dropdown @text="org-name" @icon="user-organization" as |dropdown|>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
|
||||
<dropdown.separator />
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</nav.dropdown>
|
||||
<Rose::Table @style="condensed" as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row @visually-hidden=true as |row|>
|
||||
<row.headerCell>Address</row.headerCell>
|
||||
<row.headerCell>Host Set</row.headerCell>
|
||||
<row.headerCell>Name</row.headerCell>
|
||||
<row.headerCell>Description</row.headerCell>
|
||||
</header.row>
|
||||
</table.header>
|
||||
<table.body as |body|>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<row.cell>host-set-1, host-set-2</row.cell>
|
||||
<row.cell>optional name</row.cell>
|
||||
<row.cell>description</row.cell>
|
||||
</body.row>
|
||||
</table.body>
|
||||
<table.footer as |footer|>
|
||||
<footer.row as |row|>
|
||||
<row.cell>Footer</row.cell>
|
||||
</footer.row>
|
||||
</table.footer>
|
||||
</Rose::Table>
|
||||
|
||||
<nav.link @route="index">Section</nav.link>
|
||||
<nav.link @route="about">Section</nav.link>
|
||||
</header.nav>
|
||||
<h2>Key/Value</h2>
|
||||
<Rose::List::KeyValue as |list|>
|
||||
<list.item as |item|>
|
||||
<item.key>Key</item.key>
|
||||
<item.cell>Value</item.cell>
|
||||
</list.item>
|
||||
<list.item as |item|>
|
||||
<item.key>Key</item.key>
|
||||
<item.cell>Value</item.cell>
|
||||
</list.item>
|
||||
<list.item as |item|>
|
||||
<item.key>Key</item.key>
|
||||
<item.cell>Value</item.cell>
|
||||
</list.item>
|
||||
|
||||
<header.utilities as |utilities|>
|
||||
<utilities.dropdown
|
||||
@text="user@example.net"
|
||||
@iconOnly={{true}}
|
||||
@icon="user-square-fill" as |dropdown|
|
||||
>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
|
||||
<dropdown.button>Button - default</dropdown.button>
|
||||
<dropdown.separator />
|
||||
<dropdown.button @style="danger">Button - danger</dropdown.button>
|
||||
</utilities.dropdown>
|
||||
</header.utilities>
|
||||
</Rose::Header>
|
||||
{{!-- In actual use, form fields should be yielded from an outer form component --}}
|
||||
<Rose::Form::Input @contextual={{true}} as |input|>
|
||||
<list.item as |item|>
|
||||
<item.key>
|
||||
<input.label>Key</input.label>
|
||||
</item.key>
|
||||
<item.cell>
|
||||
<input.field />
|
||||
</item.cell>
|
||||
<item.cell>
|
||||
<Rose::Button @style="secondary">Add</Rose::Button>
|
||||
</item.cell>
|
||||
</list.item>
|
||||
</Rose::Form::Input>
|
||||
|
||||
<Rose::Dropdown @text="Dropdown" as |dropdown|>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
|
||||
<dropdown.separator></dropdown.separator>
|
||||
<Rose::Form::Input @contextual={{true}} as |input|>
|
||||
<list.item as |item|>
|
||||
<item.key>
|
||||
<input.label>Key</input.label>
|
||||
</item.key>
|
||||
<item.cell>
|
||||
<input.field />
|
||||
</item.cell>
|
||||
<item.cell>
|
||||
<Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
|
||||
</item.cell>
|
||||
</list.item>
|
||||
</Rose::Form::Input>
|
||||
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
<dropdown.button @style="danger">Button - danger</dropdown.button>
|
||||
<dropdown.separator />
|
||||
</Rose::List::KeyValue>
|
||||
|
||||
<dropdown.section @title="Dropdown Section Title">
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
</dropdown.section>
|
||||
</Rose::Dropdown>
|
||||
|
||||
<Rose::Dropdown @showCaret={{false}} @icon="more-horizontal" as |dropdown|>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</Rose::Dropdown>
|
||||
|
||||
<Rose::Form as |form|>
|
||||
<form.radioGroup tagName="ul" @name="color" @selectedValue="red" as |radioGroup|>
|
||||
<Rose::Dropdown @text="Color" as |dropdown|>
|
||||
<ul>
|
||||
<li>
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label="Red"
|
||||
@value="red"
|
||||
@icon="user-organization" />
|
||||
</dropdown.item>
|
||||
</li>
|
||||
<li>
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label="Green"
|
||||
@value="green"
|
||||
/>
|
||||
</dropdown.item>
|
||||
</li>
|
||||
<li>
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label="Blue"
|
||||
@value="blue"
|
||||
/>
|
||||
</dropdown.item>
|
||||
</li>
|
||||
</ul>
|
||||
</Rose::Dropdown>
|
||||
</form.radioGroup>
|
||||
</Rose::Form>
|
||||
|
||||
|
||||
<Rose::Dialog::Cover>
|
||||
<:header>
|
||||
<h1>Authentication Pending</h1>
|
||||
</:header>
|
||||
<:body>
|
||||
<p>Complete authentication in the newly-opened window.</p>
|
||||
<p>Don't see the new window? <a href="#">Try again.</a></p>
|
||||
<p><a href="#">Cancel</a></p>
|
||||
</:body>
|
||||
</Rose::Dialog::Cover>
|
||||
<h2>Table</h2>
|
||||
<Rose::Table as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row as |row|>
|
||||
<row.headerCell>Address</row.headerCell>
|
||||
<row.headerCell>Host Set</row.headerCell>
|
||||
<row.headerCell>Name</row.headerCell>
|
||||
<row.headerCell>Description</row.headerCell>
|
||||
</header.row>
|
||||
</table.header>
|
||||
<table.body as |body|>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<row.cell>host-set-1, host-set-2</row.cell>
|
||||
<row.cell>optional name</row.cell>
|
||||
<row.cell>description</row.cell>
|
||||
</body.row>
|
||||
</table.body>
|
||||
<table.footer as |footer|>
|
||||
<footer.row as |row|>
|
||||
<row.cell>Footer</row.cell>
|
||||
</footer.row>
|
||||
</table.footer>
|
||||
</Rose::Table>
|
||||
Reference in new issue
Block a user