From cce331bae86096211137db27128061bc1d5f8f20 Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Wed, 15 Aug 2018 13:41:43 -0600 Subject: [PATCH 1/3] Update Edition Tier Icons --- ui/app/components/edition-badge.js | 14 ++++--- ui/app/components/i-con.js | 2 + ui/app/styles/components/badge.scss | 24 ------------ ui/app/styles/components/sidebar.scss | 4 ++ ui/app/styles/components/upgrade-overlay.scss | 11 ++++-- ui/app/styles/core.scss | 1 - ui/app/styles/core/navbar.scss | 15 ++++++++ ui/app/styles/core/tags.scss | 13 +++++++ ui/app/templates/application.hbs | 2 +- ui/app/templates/components/edition-badge.hbs | 5 ++- ui/app/templates/partials/upgrade-overlay.hbs | 7 +--- ui/app/templates/svg/edition-icon-premium.hbs | 37 ------------------- ui/app/templates/svg/edition-icon-pro.hbs | 11 ------ .../svg/icons/edition-enterprise.hbs | 17 +++++++++ ui/app/templates/svg/icons/edition-oss.hbs | 17 +++++++++ 15 files changed, 89 insertions(+), 91 deletions(-) delete mode 100644 ui/app/styles/components/badge.scss delete mode 100644 ui/app/templates/svg/edition-icon-premium.hbs delete mode 100644 ui/app/templates/svg/edition-icon-pro.hbs create mode 100644 ui/app/templates/svg/icons/edition-enterprise.hbs create mode 100644 ui/app/templates/svg/icons/edition-oss.hbs diff --git a/ui/app/components/edition-badge.js b/ui/app/components/edition-badge.js index 956e37257..61d98d50c 100644 --- a/ui/app/components/edition-badge.js +++ b/ui/app/components/edition-badge.js @@ -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.contains(edition)) { + return 'edition-enterprise'; } else { - return edition; + return 'edition-oss'; } }), - attributeBindings: ['edition:aria-label'], }); diff --git a/ui/app/components/i-con.js b/ui/app/components/i-con.js index 47cc1aeaa..d079d451a 100644 --- a/ui/app/components/i-con.js +++ b/ui/app/components/i-con.js @@ -15,6 +15,8 @@ const GLYPHS_WITH_SVG_TAG = [ 'false', 'upload', 'control-lock', + 'edition-enterprise', + 'edition-oss' ]; export default Ember.Component.extend({ diff --git a/ui/app/styles/components/badge.scss b/ui/app/styles/components/badge.scss deleted file mode 100644 index de6001b55..000000000 --- a/ui/app/styles/components/badge.scss +++ /dev/null @@ -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; - } -} diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss index 25feecefc..8fd44ad98 100644 --- a/ui/app/styles/components/sidebar.scss +++ b/ui/app/styles/components/sidebar.scss @@ -76,5 +76,9 @@ border-right: 4px solid $blue; } } + + .tag { + float: right; + } } } diff --git a/ui/app/styles/components/upgrade-overlay.scss b/ui/app/styles/components/upgrade-overlay.scss index d57dad7f3..53411b181 100644 --- a/ui/app/styles/components/upgrade-overlay.scss +++ b/ui/app/styles/components/upgrade-overlay.scss @@ -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 { diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index c69562c7b..9a4c21727 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -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"; diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index a62bac928..fbd777227 100644 --- a/ui/app/styles/core/navbar.scss +++ b/ui/app/styles/core/navbar.scss @@ -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; + } } diff --git a/ui/app/styles/core/tags.scss b/ui/app/styles/core/tags.scss index e925e41b9..4f97d5a3b 100644 --- a/ui/app/styles/core/tags.scss +++ b/ui/app/styles/core/tags.scss @@ -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 { diff --git a/ui/app/templates/application.hbs b/ui/app/templates/application.hbs index 921526d93..b7b1a0bbd 100644 --- a/ui/app/templates/application.hbs +++ b/ui/app/templates/application.hbs @@ -44,7 +44,7 @@ Replication {{#if (is-version "OSS")}} - {{edition-badge edition="Enterprise"}} + {{/if}} {{/if}} diff --git a/ui/app/templates/components/edition-badge.hbs b/ui/app/templates/components/edition-badge.hbs index 0f8aac4ca..55f9ddb1e 100644 --- a/ui/app/templates/components/edition-badge.hbs +++ b/ui/app/templates/components/edition-badge.hbs @@ -1 +1,4 @@ -{{abbreviation}} +{{#if icon}} + +{{/if}} +{{edition}} diff --git a/ui/app/templates/partials/upgrade-overlay.hbs b/ui/app/templates/partials/upgrade-overlay.hbs index f2c7e91ee..1522376af 100644 --- a/ui/app/templates/partials/upgrade-overlay.hbs +++ b/ui/app/templates/partials/upgrade-overlay.hbs @@ -2,6 +2,7 @@

+

@@ -27,9 +28,6 @@ {{/unless}}

-
- {{partial "svg/edition-icon-pro"}} -