upstream/vault
1
0
Fork 0
mirror of https://github.com/hashicorp/vault.git synced 2026-06-09 08:55:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 11

Merge pull request #4640 from hashicorp/ui-styles-update

Browse source 
UI: Styles update
This commit is contained in:
Joshua Ogle 2018-05-25 15:30:35 -06:00 committed by GitHub
commit 3025bddae1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
40 changed files with 285 additions and 316 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/app/models/cluster.js
View file

@ -72,7 +72,7 @@ export default DS.Model.extend({
}),
stateGlyph(state) {
const glyph = 'checkmark';
const glyph = 'checkmark-circled-outline';
const glyphs = {
'stream-wals': 'android-sync',

2
ui/app/styles/components/console-ui-panel.scss
View file

@ -117,8 +117,10 @@
}
.panel-open .console-ui-panel-scroller {
box-shadow: $box-shadow-highest;
transform: translate3d(0, 0, 0);
}
.panel-open .console-ui-panel-scroller.fullscreen {
bottom: 0;
top: 0;

2
ui/app/styles/components/global-flash.scss
View file

@ -15,7 +15,7 @@
z-index: 1;
.notification {
box-shadow: 0 0 25px rgba($black, 0.2);
box-shadow: $box-shadow-high;
margin: 20px;
@include until($desktop) {
margin: 1rem 0;

10
ui/app/styles/components/linked-block.scss
View file

@ -1,13 +1,13 @@
.linked-block {
cursor: pointer;
transition: box-shadow $speed;
will-change: box-shadow;
&:hover,
&:focus {
position: relative;
box-shadow: $box-link-hover-shadow;
}
&:focus,
&:active {
position: relative;
box-shadow: $box-link-active-shadow;
box-shadow: $box-link-hover-shadow, $box-shadow-middle;
}
}

3
ui/app/styles/components/login-form.scss Normal file
View file

@ -0,0 +1,3 @@
.login-form {
box-shadow: $box-shadow, $box-shadow-high;
}

139
ui/app/styles/components/popup-menu.scss
View file

@ -1,16 +1,17 @@
.popup-menu-content {
border-radius: 2px;
margin: -2px 0 0 0;
& > .box {
border-radius: 2px;
box-shadow: $box-shadow, $box-shadow-middle;
padding: 0;
position: relative;
width: 175px;
@include css-top-arrow(8px, $white, 1px, $blue, 155px);
}
&.is-wide > .box {
width: 200px;
@include css-top-arrow(8px, $white, 1px, $blue, 178px);
width: 300px;
}
.confirm-action span .button {
@ -18,58 +19,98 @@
margin: .25rem auto;
width: 95%;
}
}
.popup-menu-trigger {
min-width: auto;
}
.popup-menu-trigger.is-active {
&,
&:active,
&:focus {
box-shadow: 0 0 0 1px $blue;
.menu {
padding: $size-11 0;
button.link,
a {
background: transparent;
box-shadow: none;
border: none;
color: $menu-item-color;
display: block;
height: auto;
font-size: $size-7;
font-weight: $font-weight-semibold;
padding: $size-9 $size-8;
text-align: left;
text-decoration: none;
width: 100%;
&:hover {
background-color: $menu-item-hover-background-color;
color: $menu-item-hover-color;
}
&.is-active {
background-color: $menu-item-active-background-color;
color: $menu-item-active-color;
}
&.is-destroy {
color: $red;
&:hover {
background-color: $red;
color: $white;
}
}
}
}
}
.ember-basic-dropdown-content--left.popup-menu {
margin: 0px 0 0 -8px;
}
.popup-menu-content .menu {
button.link,
a {
border-radius: $menu-item-radius;
color: $menu-item-color;
font-size: $size-7;
.menu-label {
color: $grey-dark;
font-size: $size-8;
font-weight: $font-weight-semibold;
display: block;
padding: $size-9 $size-6;
box-shadow: none;
border: none;
background: transparent;
height: auto;
width: 100%;
text-align: left;
text-decoration: none;
letter-spacing: 0;
margin: 0;
padding: $size-10 $size-8 $size-11;
text-transform: none;
}
&:hover {
background-color: $menu-item-hover-background-color;
color: $menu-item-hover-color;
.menu-content {
padding: $size-10 $size-8;
}
hr {
background-color: $grey-light;
margin: $size-11 0;
}
}
.popup-menu-trigger {
height: 2rem;
min-width: 0;
padding: 0 $size-10;
}
.status-menu-content {
margin-top: 8px;
}
.ember-basic-dropdown-content {
&--left.popup-menu {
margin: 0px 0 0 -8px;
}
&--below {
&.ember-basic-dropdown--transitioning-in {
animation: drop-fade-above .15s;
}
&.is-active {
background-color: $menu-item-active-background-color;
color: $menu-item-active-color;
&.ember-basic-dropdown--transitioning-out {
animation: drop-fade-above .15s reverse;
}
}
&--above {
&.ember-basic-dropdown--transitioning-in {
animation: drop-fade-below .15s;
}
&.ember-basic-dropdown--transitioning-out {
animation: drop-fade-below .15s reverse;
}
}
}
.popup-menu-content .menu-list {
margin: 0.1rem;
}
.popup-menu-content .menu-label {
background: $grey-lighter;
font-size: $size-8;
letter-spacing: 0;
margin: 0;
padding: $size-10 calc(#{$size-6} + .1rem);
text-transform: none;
}

9
ui/app/styles/components/sidebar.scss
View file

@ -55,7 +55,8 @@
}
.menu-label {
color: $grey-light;
color: $grey;
font-weight: $font-weight-semibold;
font-size: $size-small;
line-height: 1;
margin-bottom: $size-8;
@ -72,14 +73,8 @@
transition: 250ms border-width;
&.is-active {
color: $blue;
background-color: $dark-white;
border-right: 4px solid $blue;
}
&:hover {
background-color: $dark-white;
}
}
}
}

95
ui/app/styles/components/status-menu.scss
View file

@ -1,62 +1,3 @@
.status-menu-content {
max-width: 360px;
min-width: 280px;
border-radius: 3px;
margin: 0 -17px 0 0;
will-change: transform, opacity;
.card {
position: relative;
border-radius: 2px;
border: $base-border;
box-shadow: 0 0 4px rgba($black, 0.21);
color: $black;
@include css-top-arrow(8px, $grey-lighter, 1px, $grey, 100%, -25px);
.card-content {
padding: $size-6 $size-3;
}
}
.card-header-title,
.menu-label {
background: $grey-lighter;
color: $grey-dark;
font-size: $size-7;
font-weight: normal;
letter-spacing: 0;
margin: 0;
padding: 8px $size-3;
text-transform: uppercase;
}
.replication-card {
@include css-top-arrow(8px, $grey-lighter, 1px, $grey, 100%, -98px);
.box-label {
box-shadow: none;
}
a.is-active,
a:hover {
box-shadow: 0 0 0 1px $blue;
}
}
&.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
animation: drop-fade-above .15s;
}
&.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
animation: drop-fade-above .15s reverse;
}
&.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
animation: drop-fade-below .15s;
}
&.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
animation: drop-fade-below .15s reverse;
}
}
.status-menu-content-replication {
margin-top: 5px;
}
.is-status-chevron {
line-height: 0;
padding: 0.3em 0 0 $size-11;
@ -73,39 +14,3 @@
min-width: 0;
}
}
.status-menu-content .menu {
button.link,
a {
font-size: $size-6;
font-weight: 500;
padding: $size-9 $size-3;
border-radius: $menu-item-radius;
color: $menu-item-color;
display: block;
padding: $size-9 $size-3;
box-shadow: none;
border: none;
background: transparent;
height: auto;
width: 100%;
text-align: left;
.icon {
color: $menu-item-hover-background-color;
}
&:hover {
background-color: $menu-item-hover-background-color;
color: $menu-item-hover-color;
.icon {
color: $menu-item-hover-color;
}
}
&.is-active {
background-color: $menu-item-active-background-color;
color: $menu-item-active-color;
}
}
}

34
ui/app/styles/components/sub-nav.scss
View file

@ -1,29 +1,35 @@
.sub-nav {
&.tabs {
background: $grey-lighter;
padding: 0 1.25rem;
box-shadow: inset 0 -1px 0 $grey-light;
ul {
border-color: transparent;
}
li {
&:focus {
box-shadow: none;
}
&.is-active a {
border-color: $blue;
color: $blue;
}
}
a {
color: $grey-dark;
font-weight: $font-weight-semibold;
text-decoration: none;
padding: 1.5rem 1rem;
padding: $size-6 $size-8 $size-8;
border-bottom: 2px solid transparent;
transition: border-color $speed;
&:hover,
&:active {
border-color: $grey-light;
}
}
a:hover,
a:active {
border-color: $grey-light;
}
li:focus {
box-shadow: none;
}
li.is-active a {
border-color: $blue;
color: $blue;
}
.ember-basic-dropdown-trigger {
outline: none;
}

1
ui/app/styles/core.scss
View file

@ -56,6 +56,7 @@
@import "./components/linked-block";
@import "./components/list-pagination";
@import "./components/loader";
@import "./components/login-form";
@import "./components/message-in-page";
@import "./components/page-header";
@import "./components/popup-menu";

5
ui/app/styles/core/buttons.scss
View file

@ -1,8 +1,8 @@
$button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
.button {
box-shadow: $button-box-shadow-standard;
border: 1px solid $grey-light;
box-shadow: $box-shadow-low;
color: $grey-dark;
display: inline-block;
font-size: $size-small;
@ -58,13 +58,14 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
&.is-hovered {
background-color: darken($color, 5%);
border-color: darken($color, 5%);
box-shadow: $box-shadow-middle;
}
&:active,
&.is-active {
background-color: darken($color, 10%);
border-color: darken($color, 10%);
box-shadow: none;
box-shadow: $box-shadow-middle;
}
&:focus,

6
ui/app/styles/core/menu.scss
View file

@ -1,11 +1,11 @@
.column .menu-list a {
.column .menu-list a {
border-radius: 0;
border-right: 0 solid transparent;
font-weight: $font-weight-semibold;
&:hover,
&.is-active {
color: $menu-item-hover-background-color;
background-color: $menu-item-active-color;
color: $menu-item-active-color;
background-color: $menu-item-active-background-color;
}
}

9
ui/app/styles/core/tags.scss
View file

@ -1,17 +1,21 @@
.tag:not(body) {
background-color: lighten($grey-light, 17%);
border-radius: 2px;
color: $grey-dark;
height: auto;
padding: 0 0.75em;
padding: 0 $size-10;
margin-right: 0.5rem;
font-weight: normal;
code {
color: $grey;
color: $grey-dark;
}
}
.tag.is-outlined {
border: 1px solid currentColor;
}
.tag.is-inverted {
border-color: $grey;
background: none;
@ -19,6 +23,7 @@
color: $grey-dark;
}
}
.tag.is-bold {
font-weight: bold;
}

10
ui/app/styles/utils/_bulma_variables.scss
View file

@ -64,6 +64,10 @@ $radius: 2px;
//box
$box-radius: 0;
$box-shadow: 0 0 0 1px rgba($black, 0.1);
$box-shadow-low: 0 5px 1px -2px rgba($black, 0.12), 0 3px 2px -1px rgba($black, 0);
$box-shadow-middle: 0 8px 4px -4px rgba($black, 0.10), 0 6px 8px -2px rgba($black, 0.05);
$box-shadow-high: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.10);
$box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.20);
$link: $blue;
$text: $black;
@ -81,6 +85,12 @@ $progress-bar-background-color: lighten($grey-light, 15%);
$base-border: 1px solid $grey-light;
//menu
$menu-item-hover-color: $text;
$menu-item-hover-background-color: $grey-lighter;
$menu-item-active-color: $link;
$menu-item-active-background-color: transparent;
// animations
$speed: 150ms;
$speed-slow: $speed * 2;

107
ui/app/templates/components/auth-info.hbs
View file

@ -1,56 +1,57 @@
<div class="card has-arrow">
<header class="card-header is-grey">
<p class="card-header-title is-uppercase has-background-grey-lighter has-text-grey-dark is-size-7">
<div class="popup-menu-content">
<div class="box">
<div class="menu-label">
{{auth.authData.displayName}}
</p>
</header>
<nav class="menu">
<ul class="menu-list">
{{#if (is-before (now interval=1000) auth.tokenExpirationDate)}}
{{#if auth.authData.renewable}}
<li class="action">
<button type="button" {{action "renewToken"}} class="link button {{if isRenewing 'is-loading'}}">
Renew token
</button>
</li>
<li class="action">
{{#confirm-action
onConfirmAction=(action "revokeToken")
confirmMessage=(concat "Are you sure you want to revoke the token for " (get auth 'authData.displayName') "?")
confirmButtonText="Revoke"
confirmButtonClasses="button is-primary"
buttonClasses="button link"
showConfirm=shouldRevoke
class=(if shouldRevoke "message is-block is-warning is-outline")
containerClasses="message-body is-block"
messageClasses="is-block"
}}
Revoke token
{{/confirm-action}}
</li>
{{else}}
<li class="action text-right">
{{#confirm-action
onConfirmAction=(action "revokeToken")
confirmMessage=(concat "Are you sure you want to revoke the token for " (get auth 'authData.displayName') "?")
confirmButtonText="Revoke"
confirmButtonClasses="button is-primary"
buttonClasses="button link"
showConfirm=shouldRevoke
class=(if shouldRevoke "message is-block is-warning is-outline")
containerClasses="message-body is-block"
messageClasses="is-block"
}}
Revoke token
{{/confirm-action}}
</li>
</div>
<nav class="menu">
<ul class="menu-list">
{{#if (is-before (now interval=1000) auth.tokenExpirationDate)}}
{{#if auth.authData.renewable}}
<li class="action">
<button type="button" {{action "renewToken"}} class="link button {{if isRenewing 'is-loading'}}">
Renew token
</button>
</li>
<li class="action">
{{#confirm-action
onConfirmAction=(action "revokeToken")
confirmMessage=(concat "Are you sure you want to revoke the token for " (get auth 'authData.displayName') "?")
confirmButtonText="Revoke"
confirmButtonClasses="button is-primary"
buttonClasses="button link"
showConfirm=shouldRevoke
class=(if shouldRevoke "message is-block is-warning is-outline")
containerClasses="message-body is-block"
messageClasses="is-block"
}}
Revoke token
{{/confirm-action}}
</li>
{{else}}
<li class="action text-right">
{{#confirm-action
onConfirmAction=(action "revokeToken")
confirmMessage=(concat "Are you sure you want to revoke the token for " (get auth 'authData.displayName') "?")
confirmButtonText="Revoke"
confirmButtonClasses="button is-primary"
buttonClasses="button link"
showConfirm=shouldRevoke
class=(if shouldRevoke "message is-block is-warning is-outline")
containerClasses="message-body is-block"
messageClasses="is-block"
}}
Revoke token
{{/confirm-action}}
</li>
{{/if}}
{{/if}}
{{/if}}
<li class="action">
<a href="{{href-to "vault.cluster.logout" activeClusterName }}" id="logout">
Sign out
</a>
</li>
</ul>
</nav>
<li class="action">
<a href="{{href-to "vault.cluster.logout" activeClusterName }}" id="logout">
Sign out
</a>
</li>
</ul>
</nav>
</div>
</div>

2
ui/app/templates/components/identity/item-alias/alias-details.hbs
View file

@ -12,7 +12,7 @@
<div>
{{model.mountPath}}
<div>
<span class="tag"><code>{{model.mountType}}</code></span>
<span class="tag">{{model.mountType}}</span>
<code class="has-text-grey is-size-8">{{model.mountAccessor}}</code>
</div>
</div>

2
ui/app/templates/components/identity/item-aliases.hbs
View file

@ -14,7 +14,7 @@
size=14
class="has-text-grey-light"
}}{{item.name}}</a>
<span class="tag"><code>{{item.mountType}}</code></span>
<span class="tag">{{item.mountType}}</span>
<code class="has-text-grey is-size-8">{{item.mountAccessor}}</code>
</div>
<div class="column has-text-right">

2
ui/app/templates/components/identity/popup-alias.hbs
View file

@ -26,7 +26,7 @@
{{#confirm-action
data-test-item-delete=true
confirmButtonClasses="button is-primary"
buttonClasses="link"
buttonClasses="link is-destroy"
onConfirmAction=(action "performTransaction" item)
confirmMessage=(concat "Are you sure you want to delete " item.id "?")
showConfirm=(get this (concat "shouldDelete-" item.id))

2
ui/app/templates/components/identity/popup-members.hbs
View file

@ -5,7 +5,7 @@
{{#confirm-action
confirmButtonClasses="button is-primary"
confirmButtonText="Remove"
buttonClasses="link"
buttonClasses="link is-destroy"
onConfirmAction=(action "performTransaction" model groupArray memberId)
confirmMessage=(concat "Are you sure you want to remove " memberId "?")
showConfirm=(get this (concat "shouldDelete-" memberId))

2
ui/app/templates/components/identity/popup-metadata.hbs
View file

@ -5,7 +5,7 @@
{{#confirm-action
confirmButtonClasses="button is-primary"
confirmButtonText="Remove"
buttonClasses="link"
buttonClasses="link is-destroy"
onConfirmAction=(action "performTransaction" model key)
confirmMessage=(concat "Are you sure you want to remove " key "?")
showConfirm=(get this (concat "shouldDelete-" key))

2
ui/app/templates/components/identity/popup-policy.hbs
View file

@ -15,7 +15,7 @@
{{#confirm-action
confirmButtonClasses="button is-primary"
confirmButtonText="Remove"
buttonClasses="link"
buttonClasses="link is-destroy"
onConfirmAction=(action "performTransaction" model policyName)
confirmMessage=(concat "Are you sure you want to remove " policyName "?")
showConfirm=(get this (concat "shouldDelete-" policyName))

2
ui/app/templates/components/pki-cert-popup.hbs
View file

@ -10,7 +10,7 @@
<li class="action">
{{#confirm-action
confirmButtonClasses="button is-primary"
buttonClasses="link"
buttonClasses="link is-destroy"
onConfirmAction=(action "delete" item)
confirmMessage=(concat "Are you sure you want to revoke " item.id "?")
showConfirm=(get this (concat "shouldDelete-" item.id))

2
ui/app/templates/components/popup-menu.hbs
View file

@ -1,5 +1,5 @@
{{#basic-dropdown class="popup-menu" horizontalPosition="auto-right" verticalPosition="below" onOpen=onOpen as |d|}}
{{#d.trigger tagName="button" class=(concat "popup-menu-trigger button is-ghost " (if d.isOpen "is-active")) data-test-popup-menu-trigger=true}}
{{#d.trigger tagName="button" class=(concat "popup-menu-trigger button is-ghost" (if d.isOpen "is-active")) data-test-popup-menu-trigger=true}}
{{i-con
glyph="more"
class="has-text-black auto-width"

2
ui/app/templates/components/splash-page.hbs
View file

@ -1,7 +1,7 @@
<div class="is-flex-v-centered-tablet is-flex-1 is-fullwidth">
<div class="columns is-centered is-gapless is-fullwidth">
<div class="column is-4-desktop is-7-tablet">
<div class="box is-paddingless has-glow is-relative">
<div class="login-form box is-paddingless is-relative">
<div class="hero has-dark-grey-gradient">
<div class="hero-body">
<div class="has-current-color-fill has-text-white">

2
ui/app/templates/components/status-menu.hbs
View file

@ -1,4 +1,4 @@
{{#basic-dropdown-hover horizontalPosition="auto-right" verticalPosition="below" as |d|}}
{{#basic-dropdown-hover horizontalPosition="auto-left" verticalPosition="below" as |d|}}
{{#d.trigger tagName=(if (eq type "replication") "span" "button") class=(if (eq type "replication") "" "button is-transparent")}}
{{#if (eq type "user")}}
<div class="status-menu-user-trigger">

8
ui/app/templates/partials/replication/replication-mode-summary-menu.hbs
View file

@ -10,13 +10,13 @@
{{capitalize modeForUrl}}
</span>
{{#if secondaryId}}
<span class="tag is-light">
<span class="tag">
<code>
{{secondaryId}}
</code>
</span>
{{/if}}
<span class="tag is-light">
<span class="tag">
<code>
{{clusterIdDisplay}}
</code>
@ -29,7 +29,9 @@
<div class="level-right">
{{#if replicationEnabled}}
{{#if (get cluster (concat mode 'StateGlyph'))}}
{{i-con size=14 glyph=(get cluster (concat mode 'StateGlyph'))}}
<span class="has-text-success">
{{i-con size=16 glyph=(get cluster (concat mode 'StateGlyph'))}}
</span>
{{else if syncProgress}}
<progress value="{{syncProgressPercent}}" max="100" class="progress is-small is-narrow is-info">
{{syncProgress.progress}} of {{syncProgress.total}} keys

4
ui/app/templates/partials/replication/replication-mode-summary.hbs
View file

@ -18,13 +18,13 @@
{{capitalize modeForUrl}}
</span>
{{#if secondaryId}}
<span class="tag is-light">
<span class="tag">
<code>
{{secondaryId}}
</code>
</span>
{{/if}}
<span class="tag is-light">
<span class="tag">
<code>
{{clusterIdDisplay}}
</code>

2
ui/app/templates/partials/role-aws/popup-menu.hbs
View file

@ -57,7 +57,7 @@
<li class="action">
{{#confirm-action
confirmButtonClasses="button is-primary"
buttonClasses="link"
buttonClasses="link is-destroy"
onConfirmAction=(action "delete" item)
confirmMessage=(concat "Are you sure you want to delete " item.id "?")
showConfirm=(get this (concat "shouldDelete-" item.id))

2
ui/app/templates/partials/role-pki/popup-menu.hbs
View file

@ -57,7 +57,7 @@
<li class="action">
{{#confirm-action
confirmButtonClasses="button is-primary"
buttonClasses="link"
buttonClasses="link is-destroy"
onConfirmAction=(action "delete" item)
confirmMessage=(concat "Are you sure you want to delete " item.id "?")
showConfirm=(get this (concat "shouldDelete-" item.id))

2
ui/app/templates/partials/role-ssh/popup-menu.hbs
View file

@ -60,7 +60,7 @@
<li class="action">
{{#confirm-action
confirmButtonClasses="button is-primary"
buttonClasses="link"
buttonClasses="link is-destroy"
onConfirmAction=(action "delete" item)
confirmMessage=(concat "Are you sure you want to delete " item.id "?")
showConfirm=(get this (concat "shouldDelete-" item.id))

20
ui/app/templates/partials/status/cluster.hbs
View file

@ -1,12 +1,14 @@
<div class="card has-arrow">
<header class="card-header is-grey">
<p class="card-header-title is-uppercase has-background-grey-lighter has-text-grey-dark is-size-7">
In case of emergency
</p>
</header>
<div class="card-content">
<div class="content">
<p class="is-size-7">If you suspect your data has been compromised, you can <a href="{{href-to 'vault.cluster.settings.seal' cluster.name}}" onclick={{action d.actions.close}} class="link">seal your vault</a> to prevent access to your secrets.</p>
<div class="popup-menu-content is-wide">
<div class="box">
<div class="menu-label">
In case of emergency
</div>
<div class="menu-content">
<p>
If you suspect your data has been compromised, you can
<a href="{{href-to 'vault.cluster.settings.seal' cluster.name}}" onclick={{action d.actions.close}} class="link">seal your vault</a>
to prevent access to your secrets.
</p>
</div>
</div>
</div>

59
ui/app/templates/partials/status/replication.hbs
View file

@ -1,28 +1,31 @@
<div class="card replication-card">
<nav class="menu">
<p class="menu-label">Disaster Recovery</p>
<ul>
<li>
{{replication-mode-summary
mode="dr"
display='menu'
cluster=cluster
tagName='a'
click=(action d.actions.close)
}}
</li>
</ul>
<p class="menu-label">Performance</p>
<ul>
<li>
{{replication-mode-summary
mode="performance"
display='menu'
cluster=cluster
tagName='a'
click=(action d.actions.close)
}}
</li>
</ul>
</nav>
</div>
<div class="popup-menu-content is-wide is-top-nav-popup">
<div class="box">
<nav class="menu">
<p class="menu-label">Disaster Recovery</p>
<ul>
<li>
{{replication-mode-summary
mode="dr"
display='menu'
cluster=cluster
tagName='a'
click=(action d.actions.close)
}}
</li>
</ul>
<hr />
<p class="menu-label">Performance</p>
<ul>
<li>
{{replication-mode-summary
mode="performance"
display='menu'
cluster=cluster
tagName='a'
click=(action d.actions.close)
}}
</li>
</ul>
</nav>
</div>
</div>

1
ui/app/templates/svg/icons/checkmark-circled-outline.hbs Normal file
View file

@ -0,0 +1 @@
<path d="M256,512 C114.615104,512 0,397.384896 0,256 C0,114.615104 114.615104,0 256,0 C397.384896,0 512,114.615104 512,256 C512,397.384896 397.384896,512 256,512 Z M256,480 C379.711784,480 480,379.711784 480,256 C480,132.288216 379.711784,32 256,32 C132.288216,32 32,132.288216 32,256 C32,379.711784 132.288216,480 256,480 Z M385.548422,144 L416,174.545548 L217.753913,376.759626 L96,260.314527 L127.007564,227.142329 L217.753913,312.691266 L385.548422,144 Z"/>

4
ui/app/templates/svg/vault-loading.hbs
View file

@ -3,7 +3,7 @@
<g id="vault-loading-y1">
<polygon class="vault-loading-order-4" points="0,0 5,10 10,0" style="transform-origin: 5px 5px" />
<polygon class="vault-loading-order-2" points="5,10 10,0 15,10" style="transform-origin: 10px 5px" />
<polygon class="vault-loading-order-3" points="10,0 15,10 20,0" xstyle="transform-origin: 15px 5px" />
<polygon class="vault-loading-order-3" points="10,0 15,10 20,0" style="transform-origin: 15px 5px" />
<polygon class="vault-loading-order-1" points="15,10 20,0 25,10" style="transform-origin: 20px 5px" />
<polygon class="vault-loading-order-3" points="20,0 25,10 30,0" style="transform-origin: 25px 5px" />
<polygon class="vault-loading-order-2" points="25,10 30,0 35,10" style="transform-origin: 30px 5px" />
@ -29,4 +29,4 @@
<text id="vault-loading-static" x="20" y="20" text-anchor="middle">
Loading...
</text>
</svg>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

14
ui/app/templates/vault/cluster/access/methods.hbs
View file

@ -26,13 +26,11 @@
{{i-con glyph="folder" size=14 class="has-text-grey-light"}} <span data-test-path data-test-id={{method.id}}>{{method.path}}</span>
<br />
<span class="tag">
<code>
{{#if (eq method.type 'plugin')}}
{{method.type}}: {{method.config.plugin_name}}
{{else}}
{{method.type}}
{{/if}}
</code>
{{#if (eq method.type 'plugin')}}
{{method.type}}: {{method.config.plugin_name}}
{{else}}
{{method.type}}
{{/if}}
</span>
<code class="has-text-grey is-size-8">
{{method.accessor}}
@ -61,7 +59,7 @@
<li class="action">
{{#confirm-action
confirmButtonClasses="button is-primary"
buttonClasses="link"
buttonClasses="link is-destroy"
onConfirmAction=(perform disableMethod method)
confirmMessage=(concat "Are you sure you want to disable auth via " method.id "?")
showConfirm=(get this (concat "shouldDelete-" method.id))

8
ui/app/templates/vault/cluster/policies/index.hbs
View file

@ -5,10 +5,8 @@
<h1 class="title is-3">
{{uppercase policyType}} Policies
{{#unless (eq policyType "acl")}}
<span class="tag is-inverted is-outlined" aria-label="Enforcement level: {{model.enforcementLevel}}">
<code>
Sentinel
</code>
<span class="tag" aria-label="Enforcement level: {{model.enforcementLevel}}">
Sentinel
</span>
{{/unless}}
</h1>
@ -120,7 +118,7 @@
<li class="action">
{{#confirm-action
confirmButtonClasses="button is-primary"
buttonClasses="link"
buttonClasses="link is-destroy"
onConfirmAction=(action "deletePolicy" item)
confirmMessage=(concat "Are you sure you want to delete " item.id "?")
showConfirm=(get this (concat "shouldDelete-" item.id))

6
ui/app/templates/vault/cluster/policy/edit.hbs
View file

@ -10,10 +10,8 @@
<h1 class="title is-3">
{{model.id}}
{{#if model.enforcementLevel}}
<span class="tag is-medium is-inverted is-outlined" aria-label="Enforcement level: {{model.enforcementLevel}}">
<code>
{{model.enforcementLevel}}
</code>
<span class="tag is-medium" aria-label="Enforcement level: {{model.enforcementLevel}}">
{{model.enforcementLevel}}
</span>
{{/if}}
</h1>

3
ui/app/templates/vault/cluster/policy/show.hbs
View file

@ -12,7 +12,7 @@
<h1 class="title is-3" data-test-policy-name="true">
{{model.id}}
{{#if model.enforcementLevel}}
<span class="tag is-inverted is-outlined is-font-mono has-text-grey-dark" aria-label="Enforcement level: {{model.enforcementLevel}}">
<span class="tag" aria-label="Enforcement level: {{model.enforcementLevel}}">
{{model.enforcementLevel}}
</span>
{{/if}}
@ -81,4 +81,3 @@
}}
</div>
</div>

2
ui/app/templates/vault/cluster/replication/mode/secondaries/index.hbs
View file

@ -18,7 +18,7 @@
confirmMessage=(concat "Are you sure you want to revoke " secondary "?")
confirmButtonText="Revoke"
cancelButtonText="Cancel"
buttonClasses="button link"
buttonClasses="button link is-destroy"
confirmButtonClasses="is-danger is-outlined button"
showConfirm=(get this (concat secondary '-isRevoking'))
containerClasses="is-block"

12
ui/app/templates/vault/cluster/secrets/backends.hbs
View file

@ -30,13 +30,11 @@
>{{i-con glyph="folder" size=14 class="has-text-grey-light"}}{{backend.path}}</a>
<br />
<span class="tag">
<code>
{{#if (eq backend.type 'plugin')}}
{{backend.type}}: {{backend.config.plugin_name}}
{{else}}
{{backend.type}}
{{/if}}
</code>
{{#if (eq backend.type 'plugin')}}
{{backend.type}}: {{backend.config.plugin_name}}
{{else}}
{{backend.type}}
{{/if}}
</span>
<code class="has-text-grey is-size-8">
{{#if (eq backend.options.version 2)}}