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

@@ -1,78 +1,79 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.html"/>
 
 <%def name="title()">
     ${_('Debug Style')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${_('Style')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='debug_style')}
 </%def>
 
 
 <%def name="main()">
   <div id="style-page">
       ${self.real_main()}
   </div>
 </%def>
 
 <%def name="real_main()">
 <div class="box">
     <div class="title">
         ${self.breadcrumbs()}
     </div>
 
     <div class='sidebar-col-wrapper'>
       ##main
       ${self.sidebar()}
 
       <div class="main-content">
           <h2>Examples of styled elements</h2>
           <p>Taken based on the examples from Bootstrap, form elements based
              on our current markup.</p>
           <p>
             The objective of this section is to have a comprehensive style guide which out
             lines any and all elements used throughout the application, as a reference for 
             both existing developers and as a training tool for future hires.
           </p>
       </div>
     </div>
 </div>
 </%def>
 
 
 <%def name="sidebar()">
     <div class="sidebar">
       <ul class="nav nav-pills nav-stacked">
           <li class="${'active' if c.active=='index' else ''}"><a href="${h.url('debug_style_home')}">${_('Index')}</a></li>
           <li class="${'active' if c.active=='typography' else ''}"><a href="${h.url('debug_style_template', t_path='typography.html')}">${_('Typography')}</a></li>
           <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>
           <li class="${'active' if c.active=='icons' else ''}"><a href="${h.url('debug_style_template', t_path='icons.html')}">${_('Icons')}</a></li>
           <li class="${'active' if c.active=='layout-form-sidebar' else ''}"><a href="${h.url('debug_style_template', t_path='layout-form-sidebar.html')}">${_('Layout form with sidebar')}</a></li>
           <li class="${'active' if c.active=='login' else ''}"><a href="${h.url('debug_style_template', t_path='login.html')}">${_('Login')}</a></li>
           <li class="${'active' if c.active=='login2' else ''}"><a href="${h.url('debug_style_template', t_path='login2.html')}">${_('Login 2')}</a></li>
           <li class="${'active' if c.active=='code-block' else ''}"><a href="${h.url('debug_style_template', t_path='code-block.html')}">${_('Code blocks')}</a></li>
 
           <li class="divider"><strong>Experimental</strong></li>
           <li class="${'active' if c.active=='panels' else ''}"><a href="${h.url('debug_style_template', t_path='panels.html')}">${_('Panels')}</a></li>
 
           <li class="divider"><strong>Depreciated</strong></li>
           <li class="${'active' if c.active=='form-elements' else ''}"><a href="${h.url('debug_style_template', t_path='form-elements.html')}">${_('Form elements')}</a></li>
           <li class="${'active' if c.active=='form-elements-small' else ''}"><a href="${h.url('debug_style_template', t_path='form-elements-small.html')}">${_('Form elements small')}</a></li>
           <li class="${'active' if c.active=='form-inline' else ''}"><a href="${h.url('debug_style_template', t_path='form-inline.html')}">${_('Form inline elements')}</a></li>
           <li class="${'active' if c.active=='form-vertical' else ''}"><a href="${h.url('debug_style_template', t_path='form-vertical.html')}">${_('Form vertical')}</a></li>
         </ul>
     </div>
 </%def>
  No newline at end of file

rhodecode/templates/debug_style/labels.html

@@ -1,84 +1,64 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">
-
-        <h2>Label</h2>
-
+        <h2>Labels</h2>
+  
         <h3>Labels used for tags, branches and bookmarks</h3>
+  
+        <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>
+              </span>
+            </li>
+            <li>
+              <span class="branchtag tag" title="Branch default">
+               <a href="/fake-link"><i class="icon-code-fork"></i>default</a>
+              </span>
+            </li>
+            <li>
+              <span class="bookmarktag tag" title="Bookmark example">
+               <a href="/fake-link"><i class="icon-bookmark"></i>example</a>
+              </span>
+            </li>
+          </ul>
 
-        <ul>
-          <li>
-            <span class="tagtag tag" title="Tag tip">
-              <a href="/fake-link"><i class="icon-tag"></i>tip</a>
-            </span>
-          </li>
-          <li>
-            <span class="branchtag tag" title="Branch default">
-             <a href="/fake-link"><i class="icon-code-fork"></i>default</a>
-            </span>
-          </li>
-          <li>
-            <span class="bookmarktag tag" title="Bookmark example">
-             <a href="/fake-link"><i class="icon-bookmark"></i>example</a>
-            </span>
-          </li>
-        </ul>
+        </div>
 
         <h3>Labels used in tables</h3>
-
-        <ul class="metatag-list">
-            <li>[default] <span class="metatag" tag="default">default</span></li>
-            <li>[featured] <span class="metatag" tag="featured">featured</span></li>
-            <li>[stale] <span class="metatag" tag="stale">stale</span></li>
-            <li>[dead] <span class="metatag" tag="dead">dead</span></li>
-            <li>[lang =&gt; lang] <span class="metatag" tag="lang">lang</span></li>
-            <li>[license =&gt; License] <span class="metatag" tag="license"><a href="http://www.opensource.org/licenses/License">License</a></span></li>
-            <li>[requires =&gt; Repo] <span class="metatag" tag="requires">requires =&gt; <a href="#">Repo</a></span></li>
-            <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 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>
+              <li>[stale] <span class="metatag" tag="stale">stale</span></li>
+              <li>[dead] <span class="metatag" tag="dead">dead</span></li>
+              <li>[lang =&gt; lang] <span class="metatag" tag="lang">lang</span></li>
+              <li>[license =&gt; License] <span class="metatag" tag="license"><a href="http://www.opensource.org/licenses/License">License</a></span></li>
+              <li>[requires =&gt; Repo] <span class="metatag" tag="requires">requires =&gt; <a href="#">Repo</a></span></li>
+              <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>
+        </div>
       </div>  <!-- .main-content  -->
     </div>
   </div> <!-- .box -->
 </%def>