alerts: updating style guide for new polymer alerts

rhodecode/templates/debug_style/alerts.html

@@ -0,0 +1,75 b''
+## -*- coding: utf-8 -*-
+<%inherit file="/debug_style/index.html"/>
+
+<%def name="breadcrumbs_links()">
+    ${h.link_to(_('Style'), h.url('debug_style_home'))}
+    &raquo;
+    ${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>

rhodecode/templates/debug_style/index.html

@@ -56,6 +56,7 b''
           <li class="${'active' if c.active=='forms' else ''}"><a href="${h.url('debug_style_template', t_path='forms.html')}">${_('Forms')}</a></li>
           <li class="${'active' if c.active=='buttons' else ''}"><a href="${h.url('debug_style_template', t_path='buttons.html')}">${_('Buttons')}</a></li>
           <li class="${'active' if c.active=='labels' else ''}"><a href="${h.url('debug_style_template', t_path='labels.html')}">${_('Labels')}</a></li>
+          <li class="${'active' if c.active=='alerts' else ''}"><a href="${h.url('debug_style_template', t_path='alerts.html')}">${_('Alerts')}</a></li>
           <li class="${'active' if c.active=='tables' else ''}"><a href="${h.url('debug_style_template', t_path='tables.html')}">${_('Tables')}</a></li>
           <li class="${'active' if c.active=='tables-wide' else ''}"><a href="${h.url('debug_style_template', t_path='tables-wide.html')}">${_('Tables wide')}</a></li>
           <li class="${'active' if c.active=='collapsable-content' else ''}"><a href="${h.url('debug_style_template', t_path='collapsable-content.html')}">${_('Collapsable Content')}</a></li>

rhodecode/templates/debug_style/labels.html

@@ -19,12 +19,12 b''
       ${self.sidebar()}
 
       <div class="main-content">
-
-        <h2>Label</h2>
+        <h2>Labels</h2>
 
         <h3>Labels used for tags, branches and bookmarks</h3>
 
-        <ul>
+        <div class="bs-example">
+          <ul class="metatag-list">
           <li>
             <span class="tagtag tag" title="Tag tip">
               <a href="/fake-link"><i class="icon-tag"></i>tip</a>
@@ -42,8 +42,10 b''
           </li>
         </ul>
 
+        </div>
+
         <h3>Labels used in tables</h3>
-
+        <div class="bs-example">
         <ul class="metatag-list">
             <li>[default] <span class="metatag" tag="default">default</span></li>
             <li>[featured] <span class="metatag" tag="featured">featured</span></li>
@@ -55,28 +57,6 b''
             <li>[recommends =&gt; Repo] <span class="metatag" tag="recommends">recommends =&gt; <a href="#">Repo</a></span></li>
             <li>[see =&gt; URI] <span class="metatag" tag="see">see =&gt; <a href="#">URI</a></span></li>
         </ul>
-
-        <h3>Flash Messages</h3>
-          <div class="flash_msg">
-
-            <div class="alert alert-dismissable alert-success">
-              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-              Updated VCS settings
-            </div>
-            <div class="alert alert-dismissable alert-warning">
-              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-              Updated VCS settings
-            </div>
-            <div class="alert alert-dismissable alert-error">
-              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-              Updated VCS settings
-            </div>
-            <div class="alert alert-dismissable alert">
-              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-              Updated VCS settings
-            </div>
-
-
 </div>
       </div>  <!-- .main-content  -->
     </div>