Simpler list item rows
- Makes list items flush with sides, expands into gutter on hover - Makes unclickable row items more distinguishable
This commit is contained in:
Joshua Ogle
parent
bfdc295ffb
commit
a971450557
|
|
@ -1,10 +1,10 @@
|
|||
import Ember from 'ember';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
let LinkedBlockComponent = Ember.Component.extend({
|
||||
let ListItemRowComponent = Ember.Component.extend({
|
||||
layout: hbs`{{yield}}`,
|
||||
|
||||
classNames: 'linked-block',
|
||||
classNames: 'list-item-row',
|
||||
|
||||
routing: Ember.inject.service('-routing'),
|
||||
queryParams: null,
|
||||
|
|
@ -28,8 +28,8 @@ let LinkedBlockComponent = Ember.Component.extend({
|
|||
},
|
||||
});
|
||||
|
||||
LinkedBlockComponent.reopenClass({
|
||||
ListItemRowComponent.reopenClass({
|
||||
positionalParams: 'params',
|
||||
});
|
||||
|
||||
export default LinkedBlockComponent;
|
||||
export default ListItemRowComponent;
|
||||
|
|
@ -8,7 +8,7 @@ label.box-label {
|
|||
@extend .is-gapless;
|
||||
border-color: $grey-light;
|
||||
border-radius: 3px;
|
||||
box-shadow: $box-link-shadow, $box-shadow-middle;
|
||||
box-shadow: $box-link-shadow;
|
||||
text-decoration: none;
|
||||
transition: box-shadow $speed;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
.linked-block {
|
||||
cursor: pointer;
|
||||
transition: box-shadow $speed;
|
||||
will-change: box-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
position: relative;
|
||||
box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow, $box-shadow-middle;
|
||||
}
|
||||
}
|
||||
|
||||
.linked-block .columns {
|
||||
@extend .is-flex-center;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
.list-item-row {
|
||||
@extend .box;
|
||||
@extend .is-sideless;
|
||||
@extend .is-marginless;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&.is-selectable {
|
||||
cursor: pointer;
|
||||
transition: box-shadow $speed, margin $speed, padding $speed;
|
||||
will-change: box-shadow, margin, padding;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
margin-left: #{-$column-gap} !important;
|
||||
margin-right: #{-$column-gap} !important;
|
||||
padding-left: $column-gap;
|
||||
padding-right: $column-gap;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow, $box-shadow-middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item-row .columns {
|
||||
@extend .is-flex-center;
|
||||
}
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
@import "./components/init-illustration";
|
||||
@import "./components/info-table-row";
|
||||
@import "./components/input-hint";
|
||||
@import "./components/linked-block";
|
||||
@import "./components/list-item-row";
|
||||
@import "./components/list-pagination";
|
||||
@import "./components/loader";
|
||||
@import "./components/login-form";
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ $menu-item-hover-background-color: $grey-lightest;
|
|||
$menu-item-active-color: $link;
|
||||
$menu-item-active-background-color: transparent;
|
||||
|
||||
$box-link-shadow: 0 0 0 1px $grey-light;
|
||||
$box-link-shadow: 0 0 0 1px $ui-gray-200;
|
||||
$box-link-hover-shadow: 0 0 0 1px $grey-light;
|
||||
|
||||
// animations
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ $vault-gray-dark: $vault-gray-700;
|
|||
// UI Gray
|
||||
$ui-gray-050: #F7F8FA;
|
||||
$ui-gray-100: #EBEEF2;
|
||||
$ui-gray-200: #DCE0E6;
|
||||
$ui-gray-300: #BAC1CC;
|
||||
$ui-gray-500: #6a7786;
|
||||
$ui-gray-700: #525761;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{{#each (if model.alias.id (array model.alias) model.aliases) as |item|}}
|
||||
{{#linked-block
|
||||
{{#list-item-row
|
||||
"vault.cluster.access.identity.aliases.show"
|
||||
item.id
|
||||
"details"
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-10">
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
{{identity/popup-alias params=(array item)}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
{{else}}
|
||||
<div class="box is-bottomless has-background-white-bis">
|
||||
<div class="columns is-centered">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{#if model.groupIds}}
|
||||
{{#each model.directGroupIds as |gid|}}
|
||||
<a href={{href-to "vault.cluster.access.identity.show" "groups" gid "details" }}
|
||||
class="box is-sideless is-marginless"
|
||||
class="list-item-row is-selectable"
|
||||
>{{i-con
|
||||
glyph='folder'
|
||||
size=14
|
||||
|
|
@ -9,19 +9,20 @@
|
|||
}}{{gid}}</a>
|
||||
{{/each}}
|
||||
{{#each model.inheritedGroupIds as |gid|}}
|
||||
{{#linked-block
|
||||
"vault.cluster.access.identity.show" "groups" gid "details"
|
||||
class="box is-sideless is-marginless"
|
||||
}}
|
||||
<a href={{href-to "vault.cluster.access.identity.show" "groups" gid "details" }}
|
||||
class="has-text-black"
|
||||
{{#list-item-row
|
||||
"vault.cluster.access.identity.show" "groups" gid "details"
|
||||
class="list-item-row is-selectable"
|
||||
}}
|
||||
<a href={{href-to "vault.cluster.access.identity.show" "groups" gid "details" }}
|
||||
class="has-text-black"
|
||||
>{{i-con
|
||||
glyph='folder'
|
||||
size=14
|
||||
class="has-text-grey-light"
|
||||
}}{{gid}}</a>
|
||||
glyph='folder'
|
||||
size=14
|
||||
class="has-text-grey-light"
|
||||
}}{{gid}}
|
||||
</a>
|
||||
<span class="tag has-text-grey is-size-8">inherited</span>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<div class="box is-bottomless has-background-white-bis">
|
||||
|
|
|
|||
|
|
@ -1,38 +1,37 @@
|
|||
{{#if model.hasMembers}}
|
||||
{{#each model.memberGroupIds as |gid|}}
|
||||
|
||||
{{#linked-block
|
||||
"vault.cluster.access.identity.show"
|
||||
"groups"
|
||||
gid
|
||||
details
|
||||
class="box is-sideless is-marginless"
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-10">
|
||||
<a href={{href-to "vault.cluster.access.identity.show" "groups" gid "details" }}
|
||||
class="is-block has-text-black has-text-weight-semibold"
|
||||
>{{i-con
|
||||
glyph='folder'
|
||||
size=14
|
||||
class="has-text-grey-light"
|
||||
}}{{gid}}</a>
|
||||
</div>
|
||||
<div class="column has-text-right">
|
||||
{{#if model.canEdit}}
|
||||
{{identity/popup-members params=(array model "memberGroupIds" gid)}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/each}}
|
||||
{{#each model.memberEntityIds as |gid|}}
|
||||
{{#linked-block
|
||||
{{#list-item-row
|
||||
"vault.cluster.access.identity.show"
|
||||
"groups"
|
||||
gid
|
||||
details
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-10">
|
||||
<a href={{href-to "vault.cluster.access.identity.show" "groups" gid "details" }}
|
||||
class="is-block has-text-black has-text-weight-semibold"
|
||||
>{{i-con
|
||||
glyph='folder'
|
||||
size=14
|
||||
class="has-text-grey-light"
|
||||
}}{{gid}}</a>
|
||||
</div>
|
||||
<div class="column has-text-right">
|
||||
{{#if model.canEdit}}
|
||||
{{identity/popup-members params=(array model "memberGroupIds" gid)}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/list-item-row}}
|
||||
{{/each}}
|
||||
{{#each model.memberEntityIds as |gid|}}
|
||||
{{#list-item-row
|
||||
"vault.cluster.access.identity.show"
|
||||
"groups"
|
||||
gid
|
||||
details
|
||||
class="is-selectable"
|
||||
}}
|
||||
<div class="columns">
|
||||
<div class="column is-10">
|
||||
|
|
@ -50,7 +49,7 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<div class="box is-bottomless has-background-white-bis">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{#if model.parentGroupIds.length}}
|
||||
{{#each model.parentGroupIds as |gid|}}
|
||||
{{#linked-block
|
||||
{{#list-item-row
|
||||
"vault.cluster.access.identity.show"
|
||||
"groups"
|
||||
gid
|
||||
details
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-10">
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<div class="column has-text-right">
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<div class="box is-bottomless has-background-white-bis">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{{#each model.policies as |policyName|}}
|
||||
{{#linked-block
|
||||
{{#list-item-row
|
||||
"vault.cluster.policy.show"
|
||||
"acl"
|
||||
item
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-10">
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
{{else}}
|
||||
<div class="box is-bottomless has-background-white-bis">
|
||||
<div class="columns is-centered">
|
||||
|
|
@ -32,4 +32,3 @@
|
|||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{#linked-block
|
||||
{{#list-item-row
|
||||
(concat
|
||||
"vault.cluster.secrets.backend."
|
||||
"credentials"
|
||||
(if (not item.id) "-root")
|
||||
)
|
||||
item.id
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
data-test-secret-link=item.id
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
|
|
@ -33,5 +33,4 @@
|
|||
{{partial 'partials/role-aws/popup-menu'}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
|
||||
{{/list-item-row}}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{#linked-block
|
||||
{{#list-item-row
|
||||
(concat
|
||||
"vault.cluster.secrets.backend."
|
||||
(if item.isFolder "list" "show")
|
||||
(if (not item.id) "-root")
|
||||
)
|
||||
item.id
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
data-test-secret-link=item.id
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
|
|
@ -25,4 +25,4 @@
|
|||
<div class="column has-text-right">
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{#linked-block
|
||||
{{#list-item-row
|
||||
(concat
|
||||
"vault.cluster.secrets.backend."
|
||||
"show"
|
||||
(if (not item.id) "-root")
|
||||
)
|
||||
item.idForNav
|
||||
class="box is-sideless is-marginless linked-block"
|
||||
class="is-selectable"
|
||||
data-test-secret-link=item.id
|
||||
tagName="div"
|
||||
}}
|
||||
|
|
@ -34,4 +34,4 @@
|
|||
{{pki-cert-popup item=item}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{#linked-block
|
||||
{{#list-item-row
|
||||
(concat
|
||||
"vault.cluster.secrets.backend."
|
||||
"credentials"
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
item.backend
|
||||
item.id
|
||||
queryParams=(hash action="issue")
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
data-test-secret-link=item.id
|
||||
tagName="div"
|
||||
}}
|
||||
|
|
@ -37,4 +37,4 @@
|
|||
{{partial "partials/role-pki/popup-menu"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{#linked-block
|
||||
{{#list-item-row
|
||||
(concat
|
||||
"vault.cluster.secrets.backend."
|
||||
(if (eq item.keyType "ca") "sign" "credentials")
|
||||
(if (not item.id) "-root")
|
||||
)
|
||||
item.id
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
data-test-secret-link=item.id
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
|
|
@ -40,5 +40,4 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
|
||||
{{/list-item-row}}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{identity/entity-nav identityType=identityType}}
|
||||
{{#if model.meta.total}}
|
||||
{{#each model as |item|}}
|
||||
{{#linked-block
|
||||
{{#list-item-row
|
||||
"vault.cluster.access.identity.aliases.show"
|
||||
item.id
|
||||
"details"
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
data-test-identity-row=true
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
{{identity/popup-alias params=(array item) onSuccess=(action "onDelete")}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<div class="box is-bottomless has-background-white-bis">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{identity/entity-nav identityType=identityType}}
|
||||
{{#if model.meta.total}}
|
||||
{{#each model as |item|}}
|
||||
{{#linked-block
|
||||
{{#list-item-row
|
||||
"vault.cluster.access.identity.show"
|
||||
item.id
|
||||
"details"
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
data-test-identity-row=true
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
{{/popup-menu}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<div class="box is-bottomless has-background-white-bis">
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@
|
|||
(if item.isFolder "vault.cluster.access.leases.list" "vault.cluster.access.leases.show")
|
||||
item.id
|
||||
}}"
|
||||
class="is-flex box is-sideless is-marginless"
|
||||
class="list-item-row is-selectable"
|
||||
data-test-lease-link={{item.id}}
|
||||
>
|
||||
{{i-con
|
||||
|
|
|
|||
|
|
@ -14,13 +14,16 @@
|
|||
|
||||
{{#each (sort-by "path" model) as |method|}}
|
||||
<div
|
||||
class="box is-sideless is-marginless"
|
||||
class="list-item-row"
|
||||
data-test-auth-backend-link={{method.id}}
|
||||
>
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div>
|
||||
{{i-con glyph="folder" size=14 class="has-text-grey-light"}} <span data-test-path data-test-id={{method.id}}>{{method.path}}</span>
|
||||
{{i-con glyph="folder" size=14 class="has-text-grey-light"}}
|
||||
<span data-test-path data-test-id={{method.id}} class="has-text-weight-semibold has-text-grey">
|
||||
{{method.path}}
|
||||
</span>
|
||||
<br />
|
||||
<span class="tag">
|
||||
{{#if (eq method.type 'plugin')}}
|
||||
|
|
|
|||
|
|
@ -48,25 +48,28 @@
|
|||
{{#if model.meta.total}}
|
||||
{{#each model as |item|}}
|
||||
{{#if (eq item.id "root")}}
|
||||
<div class="is-flex box is-sideless is-marginless" data-test-policy-item>
|
||||
<div class="list-item-row is-flex" data-test-policy-item>
|
||||
{{i-con
|
||||
glyph='file'
|
||||
size=14
|
||||
class="has-text-grey-light"
|
||||
}}
|
||||
<div>
|
||||
<span class="has-text-weight-semibold" data-test-policy-name>{{item.id}}</span>
|
||||
<span class="has-text-weight-semibold has-text-grey" data-test-policy-name>
|
||||
{{item.id}}
|
||||
</span>
|
||||
<p class="help has-text-grey">
|
||||
The <code>root</code> policy does not contain any rules but can do anything within Vault. It should be used with extreme care.
|
||||
The <code>root</code> policy does not contain any rules but can
|
||||
do anything within Vault. It should be used with extreme care.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
{{#linked-block
|
||||
{{#list-item-row
|
||||
"vault.cluster.policy.show"
|
||||
policyType
|
||||
item.id
|
||||
class="box is-sideless is-marginless"
|
||||
class="is-selectable"
|
||||
data-test-policy-link=item.id
|
||||
}}
|
||||
<div class="columns is-mobile">
|
||||
|
|
@ -135,7 +138,7 @@
|
|||
{{/popup-menu}}
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<div class="box is-sideless">
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@
|
|||
</PageHeader>
|
||||
|
||||
{{#each supportedBackends as |backend|}}
|
||||
{{#linked-block
|
||||
{{#list-item-row
|
||||
"vault.cluster.secrets.backend.list-root"
|
||||
backend.id
|
||||
class="box is-sideless is-marginless has-pointer"
|
||||
class="is-selectable"
|
||||
data-test-secret-backend-row=backend.id
|
||||
}}
|
||||
<div class="level is-mobile">
|
||||
|
|
@ -65,16 +65,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/linked-block}}
|
||||
{{/list-item-row}}
|
||||
{{/each}}
|
||||
{{#each unsupportedBackends as |backend|}}
|
||||
<div class="box is-sideless is-marginless"
|
||||
<div class="list-item-row"
|
||||
data-test-secret-backend-row={{backend.id}}
|
||||
>
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div>
|
||||
<div data-test-secret-path class="has-text-weight-semibold">
|
||||
<div data-test-secret-path class="has-text-weight-semibold has-text-grey">
|
||||
{{i-con glyph="folder" size=14 class="has-text-grey-light"}} {{backend.path}}
|
||||
</div>
|
||||
<span class="tag">
|
||||
|
|
|
|||
Loading…
Reference in New Issue