Add v2 notification banner at the top of the page
This commit is contained in:
John Cowen
parent
0e7d5bc1ef
commit
8567ed6175
|
|
@ -140,6 +140,28 @@
|
|||
</script>
|
||||
|
||||
<script type="text/x-handlebars" data-template-name="dc">
|
||||
{{#if isNotificationVisible}}
|
||||
<div id="v2-notification">
|
||||
<input type="checkbox" id="v2-notification-toggle" checked="checked" {{action "hideNotification"}} />
|
||||
<div class="container">
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-sm-8 col-xs-8 col-sm-offset-0 col-xs-offset-1">
|
||||
<p>
|
||||
We've redesigned the web interface for Consul. <span>You may opt-in ot the new interface with a simple environment variable. In a future release, the new UI will become the default and this UI will be deprecated.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-4 col-xs-6">
|
||||
<a href="https://www.consul.io/intro/getting-started/ui.html#how-to-use-the-new-ui" target="_blank" rel="noopener noreferrer" class="btn btn-default col-xs-6"> Learn more</a>
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1 col-md-offset-1">
|
||||
<label for="v2-notification-toggle"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="row">
|
||||
<div {{ bind-attr class=":col-md-12 :col-sm-12 :col-xs-12 :topbar" }}>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ App.DcController = Ember.Controller.extend({
|
|||
needs: ["application"],
|
||||
// Whether or not the dropdown menu can be seen
|
||||
isDropdownVisible: false,
|
||||
isNotificationVisible: true,
|
||||
|
||||
datacenter: Ember.computed.alias('content'),
|
||||
|
||||
|
|
@ -58,12 +59,21 @@ App.DcController = Ember.Controller.extend({
|
|||
// Boolean if the datacenter has any failing checks.
|
||||
//
|
||||
hasFailingChecks: Ember.computed.gt('totalChecksFailing', 0),
|
||||
|
||||
|
||||
init: function() {
|
||||
if(App.get('settings.v1-notification-hidden', true)) {
|
||||
this.set('isNotificationVisible', false);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
// Hide and show the dropdown menu
|
||||
toggle: function(item){
|
||||
this.toggleProperty('isDropdownVisible');
|
||||
},
|
||||
hideNotification: function(e) {
|
||||
App.set('settings.v1-notification-hidden', true);
|
||||
this.set('isNotificationVisible', false);
|
||||
},
|
||||
// Just hide the dropdown menu
|
||||
hideDrop: function(item){
|
||||
this.set('isDropdownVisible', false);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1,94 @@
|
|||
#v2-notification {
|
||||
color: white;
|
||||
background-color: #7c1d48;
|
||||
}
|
||||
#v2-notification a {
|
||||
font-size: 10px;
|
||||
border-width: 1px;
|
||||
}
|
||||
#v2-notification input,
|
||||
#v2-notification input + * {
|
||||
display: none;
|
||||
}
|
||||
#v2-notification input:checked + * {
|
||||
display: block;
|
||||
}
|
||||
#v2-notification {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
margin-left: -50vw;
|
||||
}
|
||||
#v2-notification label {
|
||||
cursor: pointer;
|
||||
}
|
||||
#v2-notification label::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
background-position: 5px 0px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M7.894 9.956l-4.125 4.125-1.031 1.031-2.101-2.101 1.03-1.031 4.126-4.125-4.086-4.086-1.051-1.05L2.718.655l1.051 1.05 4.086 4.087 4.125-4.125L13.01.637l2.102 2.1-1.031 1.032-4.125 4.125 4.086 4.086 1.05 1.05-2.062 2.063-1.05-1.05-4.086-4.087z" fill="%23FFF" fill-rule="evenodd"/></svg>');
|
||||
|
||||
}
|
||||
#v2-notification .col-md-12 > div {
|
||||
padding: 15px;
|
||||
}
|
||||
#v2-notification p {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-left: 15px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
#v2-notification a {
|
||||
min-width: 95px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#v2-notification .row > div:nth-child(2) {
|
||||
padding-left: 10px;
|
||||
}
|
||||
#v2-notification a {
|
||||
max-width: 106px;
|
||||
}
|
||||
#v2-notification .col-md-12 > div::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 50%;
|
||||
margin-top: -20px;
|
||||
margin-left: -13px;
|
||||
background-image: url('tada.png');
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#v2-notification .row > div {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
#v2-notification a {
|
||||
width: 100%;
|
||||
}
|
||||
#v2-notification a {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
#v2-notification p span {
|
||||
display: none;
|
||||
}
|
||||
#v2-notification .row > div:last-child {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
}
|
||||
#v2-notification label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
@import "lists";
|
||||
@import "forms";
|
||||
@import "notifications";
|
||||
@import "v2-notification";
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue