mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Simplified notifications so they don't overlap any other elements
This commit is contained in:
Rashid Khan
parent
ad8e329a0d
commit
4aeeb1f35b
5 changed files with 58 additions and 204 deletions
|
|
@ -13,7 +13,7 @@
|
|||
<link rel="stylesheet" href="kibana/styles/main.css" >
|
||||
</head>
|
||||
<body ng-controller="kibana" ng-class="'application-'+activeApp">
|
||||
<div kbn-notifications list="notifList"></div>
|
||||
<kbn-notifications list="notifList"></kbn-notifications>
|
||||
<div class="content" style="display: none;">
|
||||
<nav class="navbar navbar-inverse navbar-static-top">
|
||||
<div class="container-fluid">
|
||||
|
|
|
|||
|
|
@ -1,135 +1,14 @@
|
|||
define(function (require) {
|
||||
var notify = require('modules').get('notify');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
var MutableWatcher = require('utils/mutable_watcher');
|
||||
var nextTick = require('utils/next_tick');
|
||||
|
||||
var defaultToastOpts = {
|
||||
title: 'Notice',
|
||||
lifetime: 7000
|
||||
};
|
||||
|
||||
var transformKey = (function () {
|
||||
var el = document.createElement('div');
|
||||
return _.find(['transform', 'webkitTransform', 'OTransform', 'MozTransform', 'msTransform'], function (key) {
|
||||
return el.style[key] !== void 0;
|
||||
});
|
||||
}());
|
||||
|
||||
notify.directive('kbnNotifications', function () {
|
||||
return {
|
||||
restrict: 'A',
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
list: '=list'
|
||||
},
|
||||
template: require('text!./partials/toaster.html'),
|
||||
link: function ($scope, $el) {
|
||||
|
||||
$el.addClass('toaster-container');
|
||||
|
||||
// handles recalculating positions and offsets, schedules
|
||||
// recalcs and waits for 100 seconds before running again.
|
||||
var layoutList = (function () {
|
||||
// lazy load the $nav element
|
||||
var navSelector = '.content > nav.navbar:first()';
|
||||
var $nav;
|
||||
|
||||
// pixels between the top of list and it's attachment(nav/window)
|
||||
var spacing = 10;
|
||||
// was the element set to postition: fixed last calc?
|
||||
|
||||
var visible = false;
|
||||
|
||||
var recalc = function () {
|
||||
// set $nav lazily
|
||||
if (!$nav || !$nav.length) $nav = $(navSelector);
|
||||
|
||||
// if we can't find the nav, don't display the list
|
||||
if (!$nav.length) return;
|
||||
|
||||
// the top point at which the list should be secured
|
||||
var fixedTop = $nav.height();
|
||||
|
||||
// height of the section at the top of the page that is hidden
|
||||
var hiddenBottom = document.body.scrollTop;
|
||||
|
||||
var top, left, css = {
|
||||
visibility: 'visible'
|
||||
};
|
||||
|
||||
if (hiddenBottom > fixedTop) {
|
||||
// if we are already fixed, no reason to set the styles again
|
||||
css.position = 'fixed';
|
||||
top = spacing;
|
||||
} else {
|
||||
css.position = 'absolute';
|
||||
top = fixedTop + spacing;
|
||||
}
|
||||
|
||||
// calculate the expected left value (keep it centered)
|
||||
left = Math.floor((document.body.scrollWidth - $el.width()) / 2);
|
||||
css[transformKey] = 'translateX(' + Math.round(left) + 'px) translateY(' + Math.round(top) + 'px)';
|
||||
if (transformKey !== 'msTransform') {
|
||||
// The Z transform will keep this in the GPU (faster, and prevents artifacts),
|
||||
// but IE9 doesn't support 3d transforms and will choke.
|
||||
css[transformKey] += ' translateZ(0)';
|
||||
}
|
||||
|
||||
$el.css(css);
|
||||
};
|
||||
|
||||
// track the already scheduled recalcs
|
||||
var timeoutId;
|
||||
var clearSchedule = function () {
|
||||
timeoutId = null;
|
||||
};
|
||||
|
||||
var schedule = function () {
|
||||
if (timeoutId) return;
|
||||
else recalc();
|
||||
timeoutId = setTimeout(clearSchedule, 25);
|
||||
};
|
||||
|
||||
// call to remove the $el from the view
|
||||
schedule.hide = function () {
|
||||
$el.css('visibility', 'hidden');
|
||||
visible = false;
|
||||
};
|
||||
|
||||
return schedule;
|
||||
}());
|
||||
|
||||
function listen(off) {
|
||||
$(window)[off ? 'off' : 'on']('resize scroll', layoutList);
|
||||
}
|
||||
|
||||
var wat = new MutableWatcher({
|
||||
$scope: $scope,
|
||||
expression: 'list',
|
||||
type: 'collection'
|
||||
}, showList);
|
||||
|
||||
function showList(list) {
|
||||
if (list && list.length) {
|
||||
listen();
|
||||
wat.set(hideList);
|
||||
|
||||
// delay so that angular has time to update the DOM
|
||||
nextTick(layoutList);
|
||||
}
|
||||
}
|
||||
|
||||
function hideList(list) {
|
||||
if (!list || !list.length) {
|
||||
listen(true);
|
||||
wat.set(showList);
|
||||
layoutList.hide();
|
||||
}
|
||||
}
|
||||
|
||||
$scope.$on('$destoy', _.partial(listen, true));
|
||||
}
|
||||
replace: true,
|
||||
template: require('text!./partials/toaster.html')
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -1,42 +1,46 @@
|
|||
<ul class="toaster">
|
||||
<li ng-repeat="notif in list" kbn-toast notif="notif">
|
||||
<div class="alert" ng-class="'alert-' + notif.type">
|
||||
<table><tr>
|
||||
<td>
|
||||
<i class="fa" ng-class="'fa-' + notif.icon" tooltip="{{notif.title}}"></i> <kbn-truncated orig="{{notif.content}}" length="200" />
|
||||
</td>
|
||||
<td>
|
||||
<a
|
||||
<div class="toaster-container">
|
||||
<ul class="toaster">
|
||||
<li ng-repeat="notif in list" kbn-toast notif="notif">
|
||||
<div class="alert" ng-class="'alert-' + notif.type">
|
||||
|
||||
<div class="btn-group pull-right toaster-controls">
|
||||
<button
|
||||
type="button"
|
||||
ng-if="notif.stack && !notif.showStack"
|
||||
class="btn"
|
||||
ng-class="'btn-' + notif.type"
|
||||
ng-click="notif.showStack = true"
|
||||
>More Info</a>
|
||||
<a
|
||||
type="button"
|
||||
ng-if="notif.report"
|
||||
class="btn"
|
||||
ng-class="'btn-' + notif.type"
|
||||
ng-click="notif.report()"
|
||||
>Report</a>
|
||||
<a
|
||||
>More Info</button>
|
||||
<button
|
||||
type="button"
|
||||
ng-if="notif.accept"
|
||||
class="btn"
|
||||
ng-class="'btn-' + notif.type"
|
||||
ng-click="notif.accept()"
|
||||
>OK</a>
|
||||
<a
|
||||
>OK</button>
|
||||
<button
|
||||
type="button"
|
||||
ng-if="notif.address"
|
||||
class="btn"
|
||||
ng-class="'btn-' + notif.type"
|
||||
ng-click="notif.address()"
|
||||
>Fix it</button>
|
||||
</td>
|
||||
</tr></table>
|
||||
<pre ng-if="notif.stack && notif.showStack" ng-bind="notif.stack"></pre>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<i class="fa" ng-class="'fa-' + notif.icon" tooltip="{{notif.title}}"></i> <kbn-truncated orig="{{notif.content}}" length="250" /></kbn-truncated>
|
||||
|
||||
<div ng-if="notif.stack && notif.showStack" class="toaster-stack">
|
||||
<pre ng-bind="notif.stack"></pre>
|
||||
<button
|
||||
type="button"
|
||||
ng-if="notif.report"
|
||||
class="btn"
|
||||
ng-class="'btn-' + notif.type"
|
||||
ng-click="notif.report()"
|
||||
>Report</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -3,12 +3,8 @@
|
|||
}
|
||||
|
||||
.toaster-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
width: 85%;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
|
||||
.toaster {
|
||||
margin: 0;
|
||||
|
|
@ -17,34 +13,22 @@
|
|||
}
|
||||
|
||||
.alert {
|
||||
-webkit-box-shadow: 3px 0px 19px 0px rgba(50, 50, 50, 0.67);
|
||||
-moz-box-shadow: 3px 0px 19px 0px rgba(50, 50, 50, 0.67);
|
||||
box-shadow: 3px 0px 19px 0px rgba(50, 50, 50, 0.67);
|
||||
padding: 0.00001px 15px;
|
||||
margin: 0 0 10px 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
min-height: 40px;
|
||||
|
||||
button.btn {
|
||||
-webkit-border-radius: 0px;
|
||||
-moz-border-radius: 0px;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
.toaster-controls {
|
||||
button.btn {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
border-top:0px
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
td {
|
||||
vertical-align: middle;
|
||||
|
||||
// :not(:first-child)
|
||||
text-align: right;
|
||||
|
||||
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.toaster-stack {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
pre {
|
||||
|
|
|
|||
|
|
@ -7017,12 +7017,8 @@ kbn-table tr.even td {
|
|||
margin: 15px;
|
||||
}
|
||||
.toaster-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
width: 85%;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
}
|
||||
.toaster-container .toaster {
|
||||
margin: 0;
|
||||
|
|
@ -7030,28 +7026,19 @@ kbn-table tr.even td {
|
|||
list-style: none;
|
||||
}
|
||||
.toaster-container .alert {
|
||||
-webkit-box-shadow: 3px 0px 19px 0px rgba(50, 50, 50, 0.67);
|
||||
-moz-box-shadow: 3px 0px 19px 0px rgba(50, 50, 50, 0.67);
|
||||
box-shadow: 3px 0px 19px 0px rgba(50, 50, 50, 0.67);
|
||||
padding: 0.00001px 15px;
|
||||
margin: 0 0 10px 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
min-height: 40px;
|
||||
}
|
||||
.toaster-container .alert button.btn {
|
||||
-webkit-border-radius: 0px;
|
||||
-moz-border-radius: 0px;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
.toaster-container .alert .toaster-controls button.btn {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
border-top: 0px;
|
||||
}
|
||||
.toaster-container .alert table {
|
||||
width: 100%;
|
||||
}
|
||||
.toaster-container .alert table td {
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
}
|
||||
.toaster-container .alert table td:first-child {
|
||||
text-align: left;
|
||||
.toaster-container .alert .toaster-stack {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.toaster-container .alert pre {
|
||||
display: inline-block;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue