CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 🎸 Add condensed style for dropdown

Browse Source 
First iteration to add a condensed style for dropdown.

✅ Closes: ICU-1431
This commit is contained in:
Carlos Alcaide committed 2021-06-16 11:03:59 -07:00
1 parent 5659df3336
commit 2fd646c2c9
5 files changed
+103 -202
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/dropdown/index.hbs
+1 -1
View File
@@ -1,6 +1,6 @@
<details
...attributes
class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}}"
class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}} {{if @style (concat "rose-dropdown-" @style)}}"
{{on-click-outside this.close}}
>
addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
+23
View File
@@ -5,6 +5,7 @@ $xs: sizing.rems(xs); // 8
$xxs: sizing.rems(xxs); // 4
$chevron: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
$chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
$chevronGrey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23626873' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
.rose-dropdown {
--background-image-light: #{$chevron};
@@ -121,4 +122,26 @@ $chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23f
border: none;
margin: $xxs 0;
}
// Styles for condensed verion. Some are overrides
&.rose-dropdown-condensed {
--background-image: #{$chevronGrey};
border: sizing.rems(xxxxs) solid var(--ui-border);
border-radius: sizing.rems(xxs);
.rose-dropdown-trigger {
color: var(--ui-gray-starker-1);
padding: 0 sizing.rems(s); // To clear the inherit padding.
&.show-caret {
padding-right: sizing.rems(l) + sizing.rems(xs); // 32
background-position: right sizing.rems(xs) center;
}
}
.rose-dropdown-content {
border: none;
border: sizing.rems(xxxxs) solid var(--ui-border);
}
}
}
addons/rose/addon/styles/rose/components/dropdown/_item.scss
+10 -10
View File
@@ -32,11 +32,6 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
padding-right: sizing.rems(xl);
font-weight: normal;
// &::before,
// &::after {
// display: none;
// }
&::after {
top: sizing.rems(xxs) + sizing.rems(xxxs);
right: sizing.rems(xs);
@@ -57,11 +52,6 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
~ .rose-form-radio-label {
color: var(--action);
background-color: var(--action-subtler-1h);
// background-image: #{$checkmark};
// background-repeat: no-repeat;
// background-position: right sizing.rems(m) center;
// background-size: sizing.rems(m);
}
}
@@ -73,3 +63,13 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
}
}
}
.rose-dropdown-condensed .rose-dropdown-item {
@include type.type(s);
color: var(--ui-gray-starker-1);
&:hover {
// To override original
background-color: transparent;
}
}
addons/rose/addon/styles/rose/components/dropdown/_section.scss
+24
View File
@@ -13,3 +13,27 @@
color: var(--ui-gray);
}
}
// Styles for condensed verion. Some are overrides
.rose-dropdown-condensed .rose-dropdown-section {
border-bottom: sizing.rems(xxxxs) solid var(--ui-border);
margin: sizing.rems(xxs) 0;
padding: sizing.rems(xs) sizing.rems(s);
&:first-child {
margin-top: 0;
}
&:last-child {
border: none;
margin-bottom: 0;
}
.rose-dropdown-section-title {
@include type.type(s, normal);
padding: 0; // To clear the inherit padding.
text-transform: capitalize; // To override original
color: var(--ui-gray-starker-4);
margin-bottom: sizing.rems(xxs);
}
}
addons/rose/tests/dummy/app/templates/index.hbs
+45 -191
View File
@@ -1,196 +1,50 @@
<h2>Condensed Table</h2>
<Rose::Table @style="condensed" 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>
<h2>Condensed dropdown</h2>
<Rose::Dropdown
@style="condensed"
@text="Credential library details"
@showCaret={{true}}
as |dropdown|
>
<dropdown.section @title="ID">
<dropdown.item>cl_nbv9375hLHs</dropdown.item>
</dropdown.section>
<h2>Condensed Table with Shrink Cells</h2>
<Rose::Table @style="condensed" as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell>Address</row.headerCell>
<row.headerCell @shrink={{true}}>Host Set</row.headerCell>
<row.headerCell @shrink={{true}}>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 @shrink={{true}}>host-set-1, host-set-2</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
</row.cell>
<row.cell>description</row.cell>
</body.row>
</table.body>
<table.footer @hidden={{true}} as |footer|>
<footer.row as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<dropdown.section @title="Name">
<dropdown.item>Key/Value</dropdown.item>
</dropdown.section>
<h2>Condensed Table with Right and Center aligned cells</h2>
<Rose::Table @style="condensed" as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell>Address</row.headerCell>
<row.headerCell @alignCenter={{true}}>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 @alignCenter={{true}}>host-set-1, host-set-2</row.cell>
<row.cell @alignRight={{true}}>optional name</row.cell>
<row.cell @alignCenter={{true}}>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>
<dropdown.section @title="Description">
<dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
</dropdown.section>
</Rose::Dropdown>
<h2>Condensed Table Key/Value Lookalike (edit mode)</h2>
<Rose::Table @style="condensed" as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell @shrink={{true}}>Key</row.headerCell>
<row.headerCell colspan="2">Value</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Input @contextual={{true}} as |input|>
<input.field />
</Rose::Form::Input>
</row.cell>
<row.cell @shrink={{true}} @alignRight={{true}}>
<Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
</row.cell>
</body.row>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Select
@name="Test select"
as |field|
>
<field.field as |select|>
<select.option>Choose an option</select.option>
<select.option @value="value-1">Value 1</select.option>
<select.option @value="value-2">Value 2</select.option>
<select.option @value="value-3">Value 3</select.option>
</field.field>
</Rose::Form::Select>
</row.cell>
<row.cell @shrink={{true}} @alignRight={{true}}>
<Rose::Button @style="secondary">Add</Rose::Button>
</row.cell>
</body.row>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Input @contextual={{true}} as |input|>
<input.field />
</Rose::Form::Input>
</row.cell>
<row.cell @alignRight={{true}}>
<Rose::Button @style="secondary">Add</Rose::Button>
</row.cell>
</body.row>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Textarea
@name="field"
readonly={{false}}
/>
</row.cell>
<row.cell @alignRight={{true}}>
<Rose::Button @style="secondary">Add</Rose::Button>
</row.cell>
</body.row>
</table.body>
<table.footer @hidden={{true}} as |footer|>
<footer.row as |row|>
<row.cell colspan="3">Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<h2>Normal Dropdown</h2>
<Rose::Dropdown
@text="Credential library details"
@showCaret={{true}}
as |dropdown|
>
<dropdown.section @title="ID">
<dropdown.item>cl_nbv9375hLHs</dropdown.item>
</dropdown.section>
<dropdown.separator />
<h2>Condensed Table With Visually Hidden Header & Footer</h2>
<Rose::Table @style="condensed" as |table|>
<table.header as |header|>
<header.row @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 @hidden={{true}} as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<dropdown.section @title="Name">
<dropdown.item>Key/Value</dropdown.item>
</dropdown.section>
<dropdown.separator />
<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>
<dropdown.section @title="Description">
<dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
</dropdown.section>
</Rose::Dropdown>
<h2>Normal Dropdown</h2>
<Rose::Dropdown
@text="Credential library details"
@showCaret={{true}}
as |dropdown|
>
<dropdown.link @route="about">Menu item</dropdown.link>
<dropdown.link @route="about">Menu item 2</dropdown.link>
</Rose::Dropdown>