alerts.html
75 lines
| 2.4 KiB
| text/html
|
HtmlLexer
r839 | ## -*- 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> | ||||