Make popup menus consistent
This commit is contained in:
Joshua Ogle
parent
bea0a1d01e
commit
406b73d22c
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
&.is-wide > .box {
|
||||
width: 200px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.confirm-action span .button {
|
||||
|
|
@ -21,20 +21,22 @@
|
|||
}
|
||||
|
||||
.menu {
|
||||
padding: $size-11 0;
|
||||
|
||||
button.link,
|
||||
a {
|
||||
color: $menu-item-color;
|
||||
font-size: $size-7;
|
||||
font-weight: $font-weight-semibold;
|
||||
display: block;
|
||||
padding: $size-9 $size-6;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $menu-item-color;
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
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;
|
||||
|
|
@ -58,23 +60,57 @@
|
|||
}
|
||||
|
||||
.menu-label {
|
||||
background: $grey-lighter;
|
||||
color: $grey-dark;
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-semibold;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
padding: $size-10 calc(#{$size-6} + .1rem);
|
||||
padding: $size-10 $size-8 $size-11;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
margin: 0.1rem;
|
||||
.menu-content {
|
||||
padding: $size-10 $size-8;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: $grey-light;
|
||||
margin: $size-11 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-menu-trigger {
|
||||
min-width: auto;
|
||||
height: 2rem;
|
||||
min-width: 0;
|
||||
padding: 0 $size-10;
|
||||
}
|
||||
|
||||
.ember-basic-dropdown-content--left.popup-menu {
|
||||
margin: 0px 0 0 -8px;
|
||||
.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;
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.25em 0 0.25em 0.25em;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
Loading…
Reference in New Issue