From 62adf73bcf9c757c986db66ff0f17a5d75b34722 Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Tue, 10 Jul 2018 07:55:28 -0600 Subject: [PATCH] Simpler list item rows - Makes list items flush with sides, expands into gutter on hover - Makes unclickable row items more distinguishable --- .../{linked-block.js => list-item-row.js} | 8 +-- ui/app/styles/components/box-label.scss | 2 +- ui/app/styles/components/linked-block.scss | 16 ----- ui/app/styles/components/list-item-row.scss | 28 +++++++++ ui/app/styles/core.scss | 2 +- ui/app/styles/utils/_bulma_variables.scss | 2 +- ui/app/styles/utils/_colors.scss | 1 + .../components/identity/item-aliases.hbs | 6 +- .../components/identity/item-groups.hbs | 25 ++++---- .../components/identity/item-members.hbs | 59 +++++++++---------- .../identity/item-parent-groups.hbs | 6 +- .../components/identity/item-policies.hbs | 7 +-- .../partials/secret-list/aws-role-item.hbs | 7 +-- .../templates/partials/secret-list/item.hbs | 6 +- .../partials/secret-list/pki-cert-item.hbs | 6 +- .../partials/secret-list/pki-role-item.hbs | 6 +- .../partials/secret-list/ssh-role-item.hbs | 7 +-- .../cluster/access/identity/aliases/index.hbs | 6 +- .../vault/cluster/access/identity/index.hbs | 6 +- .../vault/cluster/access/leases/list.hbs | 2 +- .../vault/cluster/access/methods.hbs | 7 ++- .../vault/cluster/policies/index.hbs | 15 +++-- .../vault/cluster/secrets/backends.hbs | 10 ++-- 23 files changed, 128 insertions(+), 112 deletions(-) rename ui/app/components/{linked-block.js => list-item-row.js} (83%) delete mode 100644 ui/app/styles/components/linked-block.scss create mode 100644 ui/app/styles/components/list-item-row.scss diff --git a/ui/app/components/linked-block.js b/ui/app/components/list-item-row.js similarity index 83% rename from ui/app/components/linked-block.js rename to ui/app/components/list-item-row.js index cdbaa6c090..1c18d8a17b 100644 --- a/ui/app/components/linked-block.js +++ b/ui/app/components/list-item-row.js @@ -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; diff --git a/ui/app/styles/components/box-label.scss b/ui/app/styles/components/box-label.scss index 354dbf95f9..2a7827e8b2 100644 --- a/ui/app/styles/components/box-label.scss +++ b/ui/app/styles/components/box-label.scss @@ -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%; diff --git a/ui/app/styles/components/linked-block.scss b/ui/app/styles/components/linked-block.scss deleted file mode 100644 index f407395cd3..0000000000 --- a/ui/app/styles/components/linked-block.scss +++ /dev/null @@ -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; -} diff --git a/ui/app/styles/components/list-item-row.scss b/ui/app/styles/components/list-item-row.scss new file mode 100644 index 0000000000..62e3c76c43 --- /dev/null +++ b/ui/app/styles/components/list-item-row.scss @@ -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; +} diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 6449bc609d..116035fed7 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -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"; diff --git a/ui/app/styles/utils/_bulma_variables.scss b/ui/app/styles/utils/_bulma_variables.scss index 28cbdfae74..7775a0f569 100644 --- a/ui/app/styles/utils/_bulma_variables.scss +++ b/ui/app/styles/utils/_bulma_variables.scss @@ -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 diff --git a/ui/app/styles/utils/_colors.scss b/ui/app/styles/utils/_colors.scss index e3143cc8d6..245d7407dd 100644 --- a/ui/app/styles/utils/_colors.scss +++ b/ui/app/styles/utils/_colors.scss @@ -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; diff --git a/ui/app/templates/components/identity/item-aliases.hbs b/ui/app/templates/components/identity/item-aliases.hbs index 1ebafafbba..02372d3341 100644 --- a/ui/app/templates/components/identity/item-aliases.hbs +++ b/ui/app/templates/components/identity/item-aliases.hbs @@ -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" }}
@@ -26,7 +26,7 @@ {{identity/popup-alias params=(array item)}}
- {{/linked-block}} + {{/list-item-row}} {{else}}
diff --git a/ui/app/templates/components/identity/item-groups.hbs b/ui/app/templates/components/identity/item-groups.hbs index 149bf0ea2a..3f4a0f18b4 100644 --- a/ui/app/templates/components/identity/item-groups.hbs +++ b/ui/app/templates/components/identity/item-groups.hbs @@ -1,7 +1,7 @@ {{#if model.groupIds}} {{#each model.directGroupIds as |gid|}} {{i-con glyph='folder' size=14 @@ -9,19 +9,20 @@ }}{{gid}} {{/each}} {{#each model.inheritedGroupIds as |gid|}} - {{#linked-block - "vault.cluster.access.identity.show" "groups" gid "details" - class="box is-sideless is-marginless" - }} - {{i-con - glyph='folder' - size=14 - class="has-text-grey-light" - }}{{gid}} + glyph='folder' + size=14 + class="has-text-grey-light" + }}{{gid}} + inherited - {{/linked-block}} + {{/list-item-row}} {{/each}} {{else}}
diff --git a/ui/app/templates/components/identity/item-members.hbs b/ui/app/templates/components/identity/item-members.hbs index 17aba2c3a0..7373495dc4 100644 --- a/ui/app/templates/components/identity/item-members.hbs +++ b/ui/app/templates/components/identity/item-members.hbs @@ -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" - }} -
-
- {{i-con - glyph='folder' - size=14 - class="has-text-grey-light" - }}{{gid}} -
-
- {{#if model.canEdit}} - {{identity/popup-members params=(array model "memberGroupIds" gid)}} - {{/if}} -
-
- {{/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" + }} +
+
+ {{i-con + glyph='folder' + size=14 + class="has-text-grey-light" + }}{{gid}} +
+
+ {{#if model.canEdit}} + {{identity/popup-members params=(array model "memberGroupIds" gid)}} + {{/if}} +
+
+ {{/list-item-row}} + {{/each}} + {{#each model.memberEntityIds as |gid|}} + {{#list-item-row + "vault.cluster.access.identity.show" + "groups" + gid + details + class="is-selectable" }}
@@ -50,7 +49,7 @@ {{/if}}
- {{/linked-block}} + {{/list-item-row}} {{/each}} {{else}}
diff --git a/ui/app/templates/components/identity/item-parent-groups.hbs b/ui/app/templates/components/identity/item-parent-groups.hbs index c94e854b1d..3f182e9d40 100644 --- a/ui/app/templates/components/identity/item-parent-groups.hbs +++ b/ui/app/templates/components/identity/item-parent-groups.hbs @@ -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" }}
@@ -20,7 +20,7 @@
- {{/linked-block}} + {{/list-item-row}} {{/each}} {{else}}
diff --git a/ui/app/templates/components/identity/item-policies.hbs b/ui/app/templates/components/identity/item-policies.hbs index 649d1609b4..2a624e35f1 100644 --- a/ui/app/templates/components/identity/item-policies.hbs +++ b/ui/app/templates/components/identity/item-policies.hbs @@ -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" }}
@@ -18,7 +18,7 @@ {{/if}}
- {{/linked-block}} + {{/list-item-row}} {{else}}
@@ -32,4 +32,3 @@
{{/each}} - diff --git a/ui/app/templates/partials/secret-list/aws-role-item.hbs b/ui/app/templates/partials/secret-list/aws-role-item.hbs index d320516e93..daf7df0310 100644 --- a/ui/app/templates/partials/secret-list/aws-role-item.hbs +++ b/ui/app/templates/partials/secret-list/aws-role-item.hbs @@ -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 }}
@@ -33,5 +33,4 @@ {{partial 'partials/role-aws/popup-menu'}}
-{{/linked-block}} - +{{/list-item-row}} diff --git a/ui/app/templates/partials/secret-list/item.hbs b/ui/app/templates/partials/secret-list/item.hbs index 8baa37315e..a1bf1d834f 100644 --- a/ui/app/templates/partials/secret-list/item.hbs +++ b/ui/app/templates/partials/secret-list/item.hbs @@ -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 }}
@@ -25,4 +25,4 @@
-{{/linked-block}} +{{/list-item-row}} diff --git a/ui/app/templates/partials/secret-list/pki-cert-item.hbs b/ui/app/templates/partials/secret-list/pki-cert-item.hbs index d2a32e6ec0..23ed624d13 100644 --- a/ui/app/templates/partials/secret-list/pki-cert-item.hbs +++ b/ui/app/templates/partials/secret-list/pki-cert-item.hbs @@ -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}}
-{{/linked-block}} +{{/list-item-row}} diff --git a/ui/app/templates/partials/secret-list/pki-role-item.hbs b/ui/app/templates/partials/secret-list/pki-role-item.hbs index 7c5624185b..230389b472 100644 --- a/ui/app/templates/partials/secret-list/pki-role-item.hbs +++ b/ui/app/templates/partials/secret-list/pki-role-item.hbs @@ -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"}}
-{{/linked-block}} +{{/list-item-row}} diff --git a/ui/app/templates/partials/secret-list/ssh-role-item.hbs b/ui/app/templates/partials/secret-list/ssh-role-item.hbs index 0928ab6ae6..7a4c252e28 100644 --- a/ui/app/templates/partials/secret-list/ssh-role-item.hbs +++ b/ui/app/templates/partials/secret-list/ssh-role-item.hbs @@ -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 }}
@@ -40,5 +40,4 @@ {{/if}}
-{{/linked-block}} - +{{/list-item-row}} diff --git a/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs b/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs index 92c890c8c6..0fcf18bb9e 100644 --- a/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs +++ b/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs @@ -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 }}
@@ -34,7 +34,7 @@ {{identity/popup-alias params=(array item) onSuccess=(action "onDelete")}}
- {{/linked-block}} + {{/list-item-row}} {{/each}} {{else}}
diff --git a/ui/app/templates/vault/cluster/access/identity/index.hbs b/ui/app/templates/vault/cluster/access/identity/index.hbs index 28d9d9e7c2..4e2159da88 100644 --- a/ui/app/templates/vault/cluster/access/identity/index.hbs +++ b/ui/app/templates/vault/cluster/access/identity/index.hbs @@ -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 }}
@@ -105,7 +105,7 @@ {{/popup-menu}}
- {{/linked-block}} + {{/list-item-row}} {{/each}} {{else}}
diff --git a/ui/app/templates/vault/cluster/access/leases/list.hbs b/ui/app/templates/vault/cluster/access/leases/list.hbs index d9a828393e..624f010f25 100644 --- a/ui/app/templates/vault/cluster/access/leases/list.hbs +++ b/ui/app/templates/vault/cluster/access/leases/list.hbs @@ -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 diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs index 125e77f1a3..fa11e06b47 100644 --- a/ui/app/templates/vault/cluster/access/methods.hbs +++ b/ui/app/templates/vault/cluster/access/methods.hbs @@ -14,13 +14,16 @@ {{#each (sort-by "path" model) as |method|}}
- {{i-con glyph="folder" size=14 class="has-text-grey-light"}} {{method.path}} + {{i-con glyph="folder" size=14 class="has-text-grey-light"}} + + {{method.path}} +
{{#if (eq method.type 'plugin')}} diff --git a/ui/app/templates/vault/cluster/policies/index.hbs b/ui/app/templates/vault/cluster/policies/index.hbs index e956e28df4..91fc29a7f9 100644 --- a/ui/app/templates/vault/cluster/policies/index.hbs +++ b/ui/app/templates/vault/cluster/policies/index.hbs @@ -48,25 +48,28 @@ {{#if model.meta.total}} {{#each model as |item|}} {{#if (eq item.id "root")}} -
+
{{i-con glyph='file' size=14 class="has-text-grey-light" }}
- {{item.id}} + + {{item.id}} +

- The root policy does not contain any rules but can do anything within Vault. It should be used with extreme care. + The root policy does not contain any rules but can + do anything within Vault. It should be used with extreme care.

{{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 }}
@@ -135,7 +138,7 @@ {{/popup-menu}}
- {{/linked-block}} + {{/list-item-row}} {{/if}} {{else}}
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs index 3881963175..7fee72e98b 100644 --- a/ui/app/templates/vault/cluster/secrets/backends.hbs +++ b/ui/app/templates/vault/cluster/secrets/backends.hbs @@ -13,10 +13,10 @@ {{#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 }}
@@ -65,16 +65,16 @@
- {{/linked-block}} + {{/list-item-row}} {{/each}} {{#each unsupportedBackends as |backend|}} -
-
+
{{i-con glyph="folder" size=14 class="has-text-grey-light"}} {{backend.path}}