## -*- coding: utf-8 -*- <%inherit file="/debug_style/index.html"/> <%def name="breadcrumbs_links()"> ${h.link_to(_('Style'), h.route_path('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>