github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

toast count in a BS:badge, convert to use flex-box

Browse source
This commit is contained in:
Spencer Alger 2014-09-15 16:29:27 -07:00
parent f7ef4939e7
commit 43fcc79c95
2 changed files with 62 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/kibana/components/notify/partials/toaster.html
View file

@ -1,9 +1,14 @@
<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="toast alert" ng-class="'alert-' + notif.type">
<div class="btn-group pull-right toaster-controls">
<span ng-show="notif.count > 1" class="badge">{{ notif.count }}</span>
<i class="fa" ng-class="'fa-' + notif.icon" tooltip="{{notif.title}}"></i>
<kbn-truncated orig="{{notif.content}}" length="250" class="toast-message" /></kbn-truncated>
<div class="btn-group pull-right toast-controls">
<button
type="button"
ng-if="notif.stack && !notif.showStack"
@ -26,14 +31,12 @@
ng-click="notif.address()"
>Fix it</button>
</div>
<i class="fa" ng-class="'fa-' + notif.icon" tooltip="{{notif.title}}"></i> <kbn-truncated orig="{{notif.content}}" length="250" /></kbn-truncated><span ng-show="notif.count > 1">&nbsp;({{ notif.count }} errors)</span>
<div ng-if="notif.stack && notif.showStack" class="toaster-stack">
<pre ng-bind="notif.stack"></pre>
</div>
</div>
<div ng-if="notif.stack && notif.showStack" class="toast-stack alert" ng-class="'alert-' + notif.type">
<pre ng-bind="notif.stack"></pre>
</div>
</li>
</ul>
</div>

68
src/kibana/styles/_notify.less
View file

@ -13,32 +13,64 @@
}
.alert {
padding: 0.00001px 15px;
padding: 0 15px;
margin: 0;
border-width: 0 0 1px 0;
border-radius: 0;
min-height: 40px;
line-height: 40px;
border: 0px;
}
.toaster-controls {
button.btn {
height: 40px;
border: 0;
border-radius: 0;
max-height: 40px;
.toast {
.display(flex);
.align-items(center);
> * {
.flex(0 0 auto);
&:not(:last-child) {
margin-right: 4px;
}
}
.toaster-stack {
padding-bottom: 10px;
&-message {
.flex(1 1 auto);
.ellipsis();
line-height: normal;
}
pre {
display: inline-block;
width: 100%;
margin: 10px 0;
word-break: normal;
word-wrap: normal;
&-stack {
padding-bottom: 10px;
pre {
display: inline-block;
width: 100%;
margin: 10px 0;
word-break: normal;
word-wrap: normal;
}
}
&-controls {
.display(flex);
button {
.flex(0 0 auto);
border: 0;
border-radius: 0;
padding: 10px 15px;
}
}
}
// add darkened background to the different badges
.alert-success .badge {
background: darken(@alert-success-bg, 25%);
}
.alert-info .badge {
background: darken(@alert-info-bg, 25%);
}
.alert-warning .badge {
background: darken(@alert-warning-bg, 25%);
}
.alert-danger .badge {
background: darken(@alert-danger-bg, 25%);
}
}