Merge pull request #5110 from hashicorp/ui-tier-icons
Update Edition Tier Icons
This commit is contained in:
Joshua Ogle
GitHub
commit
97ada3fe0b
|
|
@ -2,14 +2,16 @@ import Ember from 'ember';
|
|||
|
||||
export default Ember.Component.extend({
|
||||
tagName: 'span',
|
||||
classNames: 'badge edition-badge',
|
||||
abbreviation: Ember.computed('edition', function() {
|
||||
classNames: 'tag is-outlined edition-badge',
|
||||
attributeBindings: ['edition:aria-label'],
|
||||
icon: Ember.computed('edition', function() {
|
||||
const edition = this.get('edition');
|
||||
if (edition == 'Enterprise') {
|
||||
return 'Ent';
|
||||
const entEditions = ['Enterprise', 'Premium', 'Pro'];
|
||||
|
||||
if (entEditions.includes(edition)) {
|
||||
return 'edition-enterprise';
|
||||
} else {
|
||||
return edition;
|
||||
return 'edition-oss';
|
||||
}
|
||||
}),
|
||||
attributeBindings: ['edition:aria-label'],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ const GLYPHS_WITH_SVG_TAG = [
|
|||
'false',
|
||||
'upload',
|
||||
'control-lock',
|
||||
'edition-enterprise',
|
||||
'edition-oss'
|
||||
];
|
||||
|
||||
export default Ember.Component.extend({
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Ember from 'ember';
|
|||
const { computed } = Ember;
|
||||
|
||||
export default Ember.Component.extend({
|
||||
modalContainer: computed(function() {
|
||||
modalContainer: computed('isActive', function() {
|
||||
return document.getElementById('modal-wormhole');
|
||||
}),
|
||||
isAnimated: false,
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
.badge {
|
||||
border: 1px solid $grey;
|
||||
border-radius: 3px;
|
||||
color: $grey-dark;
|
||||
display: inline-block;
|
||||
font-size: $size-9;
|
||||
line-height: $size-7;
|
||||
text-transform: uppercase;
|
||||
margin-left: 0.5rem;
|
||||
opacity: 0.6;
|
||||
padding: 0.1rem 0.3rem;
|
||||
|
||||
.navbar &,
|
||||
.navbar-sections &,
|
||||
.upgrade-overlay & {
|
||||
border-color: $grey-light;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.title & {
|
||||
font-weight: $font-weight-normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
@ -76,5 +76,11 @@
|
|||
border-right: 4px solid $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
@include from($fullhd) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,11 +33,14 @@
|
|||
.upgrade-overlay-title {
|
||||
border-bottom: 1px solid $grey;
|
||||
padding-bottom: $size-10;
|
||||
}
|
||||
|
||||
.upgrade-overlay-icon svg {
|
||||
height: 24px;
|
||||
width: auto;
|
||||
.icon {
|
||||
width: 32px;
|
||||
|
||||
#edition-enterprise-hexagon {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
@import "./core/lists";
|
||||
|
||||
@import "./components/auth-form";
|
||||
@import "./components/badge";
|
||||
@import "./components/b64-toggle";
|
||||
@import "./components/box-label";
|
||||
@import "./components/codemirror";
|
||||
|
|
|
|||
|
|
@ -44,4 +44,19 @@ a.navbar-item {
|
|||
top: 0;
|
||||
height: 3.25rem;
|
||||
}
|
||||
|
||||
.icon.edition-icon {
|
||||
margin: -0.25em -0.5em -0.25em 0.15em;
|
||||
opacity: 0.33;
|
||||
transition: opacity $speed;
|
||||
|
||||
#edition-enterprise-hexagon {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
li.is-active .icon.edition-icon,
|
||||
li:hover .icon.edition-icon {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,19 @@
|
|||
code {
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 12px;
|
||||
margin-left: -0.25em;
|
||||
margin-right: 0.25em;
|
||||
min-width: 0;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag.is-outlined {
|
||||
background-color: transparent;
|
||||
border: 1px solid $grey-light;
|
||||
}
|
||||
|
||||
.tag.is-bold {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
<a href="{{href-to "vault.cluster.replication" activeClusterName}}">
|
||||
Replication
|
||||
{{#if (is-version "OSS")}}
|
||||
{{edition-badge edition="Enterprise"}}
|
||||
<ICon @glyph="edition-enterprise" @size=16 @class="edition-icon" />
|
||||
{{/if}}
|
||||
</a>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -1 +1,4 @@
|
|||
{{abbreviation}}
|
||||
{{#if icon}}
|
||||
<ICon @glyph={{icon}} @size=12 />
|
||||
{{/if}}
|
||||
{{edition}}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<h2 class="title upgrade-overlay-title is-2 has-text-white">
|
||||
<ICon @glyph="edition-enterprise" aria-hidden="true" @size=32 />
|
||||
Try Vault Enterprise Free for 30 Days
|
||||
</h2>
|
||||
<h3 class="title is-5 has-text-white">
|
||||
|
|
@ -27,9 +28,6 @@
|
|||
{{/unless}}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="level-right upgrade-overlay-icon">
|
||||
{{partial "svg/edition-icon-pro"}}
|
||||
</div>
|
||||
</div>
|
||||
<ul class="upgrade-features-list">
|
||||
<li>All Open Source features</li>
|
||||
|
|
@ -49,9 +47,6 @@
|
|||
Premium
|
||||
</h3>
|
||||
</div>
|
||||
<div class="level-right upgrade-overlay-icon">
|
||||
{{partial "svg/edition-icon-premium"}}
|
||||
</div>
|
||||
</div>
|
||||
<ul class="upgrade-features-list">
|
||||
<li>All Pro features</li>
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<svg width="228" height="48" viewBox="0 0 228 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<path id="a" d="M8.823.5L10 1.602 3.805 7.5 0 4.104l1.139-1.138 2.629 2.347z"/>
|
||||
<path id="b" d="M8.823.5L10 1.602 3.805 7.5 0 4.104l1.139-1.138 2.629 2.347z"/>
|
||||
<path id="c" d="M8.823.5L10 1.602 3.805 7.5 0 4.104l1.139-1.138 2.629 2.347z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M39.79 36.488h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09h3.152c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.001zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M46.5 28.706v13.417l-11 6.183-11-6.183V28.757l10.999-6.183L46.5 28.706zm-1 .588l-9.999-5.574L25.5 29.343v12.194l10 5.621 10-5.62V29.293zm-29.71 7.194h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09H7.21c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.002zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M22.5 42.123l-11 6.183-11-6.183V28.757l11-6.183 5.31 2.985 5.69 3.198v13.366zm-1-12.78l-5.18-2.912-4.82-2.71-10 5.622v12.194l10 5.621 10-5.62V29.342zm6.29-14.855h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09h3.152c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.001zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M34.5 20.123l-11 6.183-11-6.183V6.757l11-6.184.245.138L28.81 3.56l5.69 3.198v13.366zm-1-.586V7.343L28.32 4.43 23.5 1.72l-10 5.622v12.194l10 5.621 10-5.62z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path fill="#000" d="M43 32.667h27.667V13H43z"/>
|
||||
<path fill="#FFF" d="M41.5 31.167h27.667V11.5H41.5z"/>
|
||||
<path d="M45 15.667h20.667V17H45v-1.333zM45 21h12v1.333H45V21zm14 0h6.667v1.333H59V21zm-14 5.333h3.333v1.333H45v-1.333zm6 0h12v1.333H51v-1.333z" fill="#1B212D" fill-rule="nonzero"/>
|
||||
<use fill="#22D260" fill-rule="nonzero" xlink:href="#a" transform="translate(66 15)"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M115.79 36.488h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09h3.152c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.001zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M122.5 28.706v13.417l-11 6.183-11-6.183V28.757l10.999-6.183 11.001 6.132zm-1 .588l-9.999-5.574-10.001 5.623v12.194l10 5.621 10-5.62V29.293zm-29.71 7.194h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09h3.151c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.002zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M98.5 42.123l-11 6.183-11-6.183V28.757l11-6.183 5.31 2.985 5.69 3.198v13.366zm-1-12.78l-5.18-2.912-4.82-2.71-10 5.622v12.194l10 5.621 10-5.62V29.342zm6.29-14.855h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09h3.152c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.001zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M110.5 20.123l-11 6.183-11-6.183V6.757l11-6.184.245.138 5.065 2.848 5.69 3.198v13.366zm-1-.586V7.343l-5.18-2.912-4.82-2.71-10 5.622v12.194l10 5.621 10-5.62z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path fill="#000" d="M119 32.667h27.667V13H119z"/>
|
||||
<path fill="#FFF" d="M117.5 31.167h27.667V11.5H117.5z"/>
|
||||
<path d="M121 15.667h20.667V17H121v-1.333zM121 21h12v1.333h-12V21zm14 0h6.667v1.333H135V21zm-14 5.333h3.333v1.333H121v-1.333zm6 0h12v1.333h-12v-1.333z" fill="#1B212D" fill-rule="nonzero"/>
|
||||
<use fill="#22D260" fill-rule="nonzero" xlink:href="#b" transform="translate(142 15)"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M191.79 36.488h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09h3.152c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.001zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M198.5 28.706v13.417l-11 6.183-11-6.183V28.757l10.999-6.183 11.001 6.132zm-1 .588l-9.999-5.574-10.001 5.623v12.194l10 5.621 10-5.62V29.293zm-29.71 7.194h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09h3.151c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.002zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M174.5 42.123l-11 6.183-11-6.183V28.757l11-6.183 5.31 2.985 5.69 3.198v13.366zm-1-12.78l-5.18-2.912-4.82-2.71-10 5.622v12.194l10 5.621 10-5.62V29.342zm6.29-14.855h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09h3.152c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.001zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M186.5 20.123l-11 6.183-11-6.183V6.757l11-6.184.245.138 5.065 2.848 5.69 3.198v13.366zm-1-.586V7.343l-5.18-2.912-4.82-2.71-10 5.622v12.194l10 5.621 10-5.62z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path fill="#000" d="M195 32.667h27.667V13H195z"/>
|
||||
<path fill="#FFF" d="M193.5 31.167h27.667V11.5H193.5z"/>
|
||||
<path d="M197 15.667h20.667V17H197v-1.333zM197 21h12v1.333h-12V21zm14 0h6.667v1.333H211V21zm-14 5.333h3.333v1.333H197v-1.333zm6 0h12v1.333h-12v-1.333z" fill="#1B212D" fill-rule="nonzero"/>
|
||||
<use fill="#22D260" fill-rule="nonzero" xlink:href="#c" transform="translate(218 15)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.9 KiB |
|
|
@ -1,11 +0,0 @@
|
|||
<svg width="72" height="48" viewBox="0 0 72 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M39.79 36.488h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09h3.152c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.001zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M46.5 28.706v13.417l-11 6.183-11-6.183V28.757l10.999-6.183L46.5 28.706zm-1 .588l-9.999-5.574L25.5 29.343v12.194l10 5.621 10-5.62V29.293zm-29.71 7.194h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09H7.21c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.002zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M22.5 42.123l-11 6.183-11-6.183V28.757l11-6.183 5.31 2.985 5.69 3.198v13.366zm-1-12.78l-5.18-2.912-4.82-2.71-10 5.622v12.194l10 5.621 10-5.62V29.342zm6.29-14.855h3.151v3.09l-7.44 4.154-7.442-4.155v-3.09h3.152c1.058 1.12 2.583 1.815 4.291 1.815 1.704 0 3.23-.696 4.287-1.814h.001zm-4.289-.512c-2.109 0-3.811-1.62-3.797-3.698-.014-2.056 1.688-3.693 3.794-3.693 2.11 0 3.812 1.637 3.798 3.693.014 2.078-1.688 3.698-3.795 3.698z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path d="M34.5 20.123l-11 6.183-11-6.183V6.757l11-6.184.245.138L28.81 3.56l5.69 3.198v13.366zm-1-.586V7.343L28.32 4.43 23.5 1.72l-10 5.622v12.194l10 5.621 10-5.62z" fill="#FFF" fill-rule="nonzero"/>
|
||||
<path fill="#000" d="M43 32.667h27.667V13H43z"/>
|
||||
<path fill="#FFF" d="M41.5 31.167h27.667V11.5H41.5z"/>
|
||||
<path d="M45 15.667h20.667V17H45v-1.333zM45 21h12v1.333H45V21zm14 0h6.667v1.333H59V21zm-14 5.333h3.333v1.333H45v-1.333zm6 0h12v1.333H51v-1.333z" fill="#1B212D" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
17
ui/app/templates/svg/icons/edition-enterprise.hbs
Normal file
17
ui/app/templates/svg/icons/edition-enterprise.hbs
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{size}}" viewBox="0 0 16 16">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c">
|
||||
<stop stop-color="#FFF" stop-opacity=".25" offset="0%"/>
|
||||
<stop stop-color="#FFF" stop-opacity=".5" offset="100%"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<mask id="b" fill="#fff">
|
||||
<path d="M14 9.079V4.625L8 1.25 2 4.625v6.75l6 3.375 6-3.375V9.079zm-.5.264l-1 .529V5.5L8 3 3.5 5.5v4.372l-1-.529V4.875L8.001 1.75 13.5 4.875v4.468zM8.192 12.15l-.191.1L4 10.126v-4.25L8.001 3.75 12 5.875v4.25l-3.808 2.024zM8 0l7 4v8l-7 4-7-4V4l7-4zm0 13l5.5-3.1v1.2L8 14.25 2.5 11.1V9.9L8 13z"/>
|
||||
</mask>
|
||||
<g mask="url(#b)">
|
||||
<path d="M0 0h16v16H0z" id="edition-enterprise-hexagon" fill="#7C8797"/>
|
||||
</g>
|
||||
<path fill="url(#c)" opacity=".5" mask="url(#b)" d="M8 0l7 4v8l-7 4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 930 B |
17
ui/app/templates/svg/icons/edition-oss.hbs
Normal file
17
ui/app/templates/svg/icons/edition-oss.hbs
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{size}}" viewBox="0 0 16 16">
|
||||
<defs>
|
||||
<path d="M8 0l7 4v8l-7 4-7-4V4l7-4zm0 1.25L2 4.625v6.75l6 3.375 6-3.375v-6.75L8 1.25zm.001.5L13.5 4.875v6.25L8.001 14.25 2.5 11.125v-6.25L8.001 1.75z" id="a"/>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c">
|
||||
<stop stop-color="#FFF" stop-opacity=".25" offset="0%"/>
|
||||
<stop stop-color="#FFF" stop-opacity=".5" offset="100%"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<mask id="b" fill="#fff">
|
||||
<use xlink:href="#a"/>
|
||||
</mask>
|
||||
<use fill="#fff" xlink:href="#a"/>
|
||||
<g mask="url(#b)" fill="#BAC1CC"><path d="M0 0h16v16H0z"/></g>
|
||||
<path fill="url(#c)" opacity=".5" mask="url(#b)" d="M8 0l7 4v8l-7 4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 816 B |
Loading…
Reference in a new issue