|
|
## -*- coding: utf-8 -*-
|
|
|
<%inherit file="/debug_style/index.html"/>
|
|
|
|
|
|
<%def name="breadcrumbs_links()">
|
|
|
${h.link_to(_('Style'), h.url('debug_style_home'))}
|
|
|
»
|
|
|
${c.active}
|
|
|
</%def>
|
|
|
|
|
|
|
|
|
<%def name="real_main()">
|
|
|
<div class="box">
|
|
|
<div class="title">
|
|
|
${self.breadcrumbs()}
|
|
|
</div>
|
|
|
|
|
|
<div class='sidebar-col-wrapper'>
|
|
|
|
|
|
${self.sidebar()}
|
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
|
<h3>Alert Messages</h3>
|
|
|
<p>
|
|
|
Alert messages are produced using the custom Polymer element
|
|
|
<code>rhodecode-toast</code> which is passed a message and level.
|
|
|
</p>
|
|
|
|
|
|
<div class="bs-example">
|
|
|
<p> There are four types of alert levels:</p>
|
|
|
<div class="alert alert-success">
|
|
|
"success" is used when an action is completed as expected<br/>
|
|
|
ex. updated settings, deletion of a repo/user
|
|
|
</div>
|
|
|
<div class="alert alert-warning">
|
|
|
"warning" is for notification of impending issues<br/>
|
|
|
ex. a gist which was updated elsewhere during editing, disk out of space
|
|
|
</div>
|
|
|
<div class="alert alert-error">
|
|
|
"error" should be used for unexpected results and actions which
|
|
|
are not successful<br/>
|
|
|
ex. a form not submitted, repo creation failure
|
|
|
</div>
|
|
|
<div class="alert alert-info">
|
|
|
"info" is used for non-critical information<br/>
|
|
|
ex. notification of new messages, invitations to chat
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<p><br/>
|
|
|
Whether singular or multiple, alerts are grouped into a dismissable
|
|
|
panel with a single "Close" button underneath.
|
|
|
</p>
|
|
|
<a class="btn btn-default" id="test-notification">Test Notification</a>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
$('#test-notification').on('click', function(e){
|
|
|
var levels = ['info', 'error', 'warning', 'success'];
|
|
|
var level = levels[Math.floor(Math.random()*levels.length)];
|
|
|
var payload = {
|
|
|
message: {
|
|
|
message: 'This is a test ' +level+ ' notification.',
|
|
|
level: level,
|
|
|
force: true
|
|
|
}
|
|
|
};
|
|
|
$.Topic('/notifications').publish(payload);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</div>
|
|
|
</div> <!-- .main-content -->
|
|
|
</div>
|
|
|
</div> <!-- .box -->
|
|
|
</%def>
|
|
|
|
