luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Merge pull request #5110 from hashicorp/ui-tier-icons 

Update Edition Tier Icons
This commit is contained in:
Joshua Ogle 2018-08-16 10:44:34 -06:00 committed by GitHub
parent a4d10886f9 423ebb8cf6
commit 97ada3fe0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 92 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/app/components/edition-badge.js
View File

@ -2,14 +2,16 @@ import Ember from 'ember';
export default Ember.Component.extend({ export default Ember.Component.extend({
tagName: 'span', tagName: 'span',
classNames: 'badge edition-badge', classNames: 'tag is-outlined edition-badge',
abbreviation: Ember.computed('edition', function() { attributeBindings: ['edition:aria-label'],
icon: Ember.computed('edition', function() {
const edition = this.get('edition'); const edition = this.get('edition');
if (edition == 'Enterprise') { const entEditions = ['Enterprise', 'Premium', 'Pro'];
return 'Ent';
if (entEditions.includes(edition)) {
return 'edition-enterprise';
} else { } else {
return edition; return 'edition-oss';
} }
}), }),
attributeBindings: ['edition:aria-label'],
}); });

2
ui/app/components/i-con.js
View File

@ -15,6 +15,8 @@ const GLYPHS_WITH_SVG_TAG = [
'false', 'false',
'upload', 'upload',
'control-lock', 'control-lock',
'edition-enterprise',
'edition-oss'
]; ];
export default Ember.Component.extend({ export default Ember.Component.extend({

2
ui/app/components/upgrade-link.js
View File

@ -3,7 +3,7 @@ import Ember from 'ember';
const { computed } = Ember; const { computed } = Ember;
export default Ember.Component.extend({ export default Ember.Component.extend({
modalContainer: computed(function() { modalContainer: computed('isActive', function() {
return document.getElementById('modal-wormhole'); return document.getElementById('modal-wormhole');
}), }),
isAnimated: false, isAnimated: false,

24
ui/app/styles/components/badge.scss
View File

@ -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;
}
}

6
ui/app/styles/components/sidebar.scss
View File

@ -76,5 +76,11 @@
border-right: 4px solid $blue; border-right: 4px solid $blue;
} }
} }
.tag {
@include from($fullhd) {
float: right;
}
}
} }
} }

11
ui/app/styles/components/upgrade-overlay.scss
View File

@ -33,11 +33,14 @@
.upgrade-overlay-title { .upgrade-overlay-title {
border-bottom: 1px solid $grey; border-bottom: 1px solid $grey;
padding-bottom: $size-10; padding-bottom: $size-10;
}
.upgrade-overlay-icon svg { .icon {
height: 24px; width: 32px;
width: auto;
#edition-enterprise-hexagon {
fill: $white;
}
}
} }
.columns { .columns {

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

@ -42,7 +42,6 @@
@import "./core/lists"; @import "./core/lists";
@import "./components/auth-form"; @import "./components/auth-form";
@import "./components/badge";
@import "./components/b64-toggle"; @import "./components/b64-toggle";
@import "./components/box-label"; @import "./components/box-label";
@import "./components/codemirror"; @import "./components/codemirror";

15
ui/app/styles/core/navbar.scss
View File

@ -44,4 +44,19 @@ a.navbar-item {
top: 0; top: 0;
height: 3.25rem; 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;
}
} }

13
ui/app/styles/core/tags.scss
View File

@ -10,6 +10,19 @@
code { code {
color: $grey; 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 { .tag.is-bold {

2
ui/app/templates/application.hbs
View File

@ -44,7 +44,7 @@
<a href="{{href-to "vault.cluster.replication" activeClusterName}}"> <a href="{{href-to "vault.cluster.replication" activeClusterName}}">
Replication Replication
{{#if (is-version "OSS")}} {{#if (is-version "OSS")}}
{{edition-badge edition="Enterprise"}} <ICon @glyph="edition-enterprise" @size=16 @class="edition-icon" />
{{/if}} {{/if}}
</a> </a>
{{/if}} {{/if}}

5
ui/app/templates/components/edition-badge.hbs
View File

@ -1 +1,4 @@
{{abbreviation}} {{#if icon}}
<ICon @glyph={{icon}} @size=12 />
{{/if}}
{{edition}}

7
ui/app/templates/partials/upgrade-overlay.hbs
View File

@ -2,6 +2,7 @@
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content"> <div class="modal-content">
<h2 class="title upgrade-overlay-title is-2 has-text-white"> <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 Try Vault Enterprise Free for 30 Days
</h2> </h2>
<h3 class="title is-5 has-text-white"> <h3 class="title is-5 has-text-white">
@ -27,9 +28,6 @@
{{/unless}} {{/unless}}
</h3> </h3>
</div> </div>
<div class="level-right upgrade-overlay-icon">
{{partial "svg/edition-icon-pro"}}
</div>
</div> </div>
<ul class="upgrade-features-list"> <ul class="upgrade-features-list">
<li>All Open Source features</li> <li>All Open Source features</li>
@ -49,9 +47,6 @@
Premium Premium
</h3> </h3>
</div> </div>
<div class="level-right upgrade-overlay-icon">
{{partial "svg/edition-icon-premium"}}
</div>
</div> </div>
<ul class="upgrade-features-list"> <ul class="upgrade-features-list">
<li>All Pro features</li> <li>All Pro features</li>

37
ui/app/templates/svg/edition-icon-premium.hbs
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

11
ui/app/templates/svg/edition-icon-pro.hbs
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

17
ui/app/templates/svg/icons/edition-enterprise.hbs Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 930 B

17
ui/app/templates/svg/icons/edition-oss.hbs Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 816 B