##// END OF EJS Templates
u » pc » rhodecode-enterprise-ce-fork-pc
RSS

Fork of rhodecode-enterprise-ce

alerts: updating style guide for new polymer alerts
lisaq -
r839:a3b2c0d4 default
parent child Browse files
Show More
Show file before | Show file after | Hide comments
@@ -0,0 +1,75 b''
1 ## -*- coding: utf-8 -*-
2 <%inherit file="/debug_style/index.html"/>
3
4 <%def name="breadcrumbs_links()">
5 ${h.link_to(_('Style'), h.url('debug_style_home'))}
6 &raquo;
7 ${c.active}
8 </%def>
9
10
11 <%def name="real_main()">
12 <div class="box">
13 <div class="title">
14 ${self.breadcrumbs()}
15 </div>
16
17 <div class='sidebar-col-wrapper'>
18
19 ${self.sidebar()}
20
21 <div class="main-content">
22
23 <h3>Alert Messages</h3>
24 <p>
25 Alert messages are produced using the custom Polymer element
26 <code>rhodecode-toast</code> which is passed a message and level.
27 </p>
28
29 <div class="bs-example">
30 <p> There are four types of alert levels:</p>
31 <div class="alert alert-success">
32 "success" is used when an action is completed as expected<br/>
33 ex. updated settings, deletion of a repo/user
34 </div>
35 <div class="alert alert-warning">
36 "warning" is for notification of impending issues<br/>
37 ex. a gist which was updated elsewhere during editing, disk out of space
38 </div>
39 <div class="alert alert-error">
40 "error" should be used for unexpected results and actions which
41 are not successful<br/>
42 ex. a form not submitted, repo creation failure
43 </div>
44 <div class="alert alert-info">
45 "info" is used for non-critical information<br/>
46 ex. notification of new messages, invitations to chat
47 </div>
48 </div>
49
50 <p><br/>
51 Whether singular or multiple, alerts are grouped into a dismissable
52 panel with a single "Close" button underneath.
53 </p>
54 <a class="btn btn-default" id="test-notification">Test Notification</a>
55
56 <script type="text/javascript">
57 $('#test-notification').on('click', function(e){
58 var levels = ['info', 'error', 'warning', 'success'];
59 var level = levels[Math.floor(Math.random()*levels.length)];
60 var payload = {
61 message: {
62 message: 'This is a test ' +level+ ' notification.',
63 level: level,
64 force: true
65 }
66 };
67 $.Topic('/notifications').publish(payload);
68 });
69 </script>
70
71 </div>
72 </div> <!-- .main-content -->
73 </div>
74 </div> <!-- .box -->
75 </%def>
Show file before | Show file after | Hide comments
@@ -56,6 +56,7 b''
56 56 <li class="${'active' if c.active=='forms' else ''}"><a href="${h.url('debug_style_template', t_path='forms.html')}">${_('Forms')}</a></li>
57 57 <li class="${'active' if c.active=='buttons' else ''}"><a href="${h.url('debug_style_template', t_path='buttons.html')}">${_('Buttons')}</a></li>
58 58 <li class="${'active' if c.active=='labels' else ''}"><a href="${h.url('debug_style_template', t_path='labels.html')}">${_('Labels')}</a></li>
59 <li class="${'active' if c.active=='alerts' else ''}"><a href="${h.url('debug_style_template', t_path='alerts.html')}">${_('Alerts')}</a></li>
59 60 <li class="${'active' if c.active=='tables' else ''}"><a href="${h.url('debug_style_template', t_path='tables.html')}">${_('Tables')}</a></li>
60 61 <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>
61 62 <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>
Show file before | Show file after | Hide comments
@@ -19,65 +19,45 b''
19 19 ${self.sidebar()}
20 20
21 21 <div class="main-content">
22
23 <h2>Label</h2>
24
22 <h2>Labels</h2>
23
25 24 <h3>Labels used for tags, branches and bookmarks</h3>
25
26 <div class="bs-example">
27 <ul class="metatag-list">
28 <li>
29 <span class="tagtag tag" title="Tag tip">
30 <a href="/fake-link"><i class="icon-tag"></i>tip</a>
31 </span>
32 </li>
33 <li>
34 <span class="branchtag tag" title="Branch default">
35 <a href="/fake-link"><i class="icon-code-fork"></i>default</a>
36 </span>
37 </li>
38 <li>
39 <span class="bookmarktag tag" title="Bookmark example">
40 <a href="/fake-link"><i class="icon-bookmark"></i>example</a>
41 </span>
42 </li>
43 </ul>
26 44
27 <ul>
28 <li>
29 <span class="tagtag tag" title="Tag tip">
30 <a href="/fake-link"><i class="icon-tag"></i>tip</a>
31 </span>
32 </li>
33 <li>
34 <span class="branchtag tag" title="Branch default">
35 <a href="/fake-link"><i class="icon-code-fork"></i>default</a>
36 </span>
37 </li>
38 <li>
39 <span class="bookmarktag tag" title="Bookmark example">
40 <a href="/fake-link"><i class="icon-bookmark"></i>example</a>
41 </span>
42 </li>
43 </ul>
45 </div>
44 46
45 47 <h3>Labels used in tables</h3>
46
47 <ul class="metatag-list">
48 <li>[default] <span class="metatag" tag="default">default</span></li>
49 <li>[featured] <span class="metatag" tag="featured">featured</span></li>
50 <li>[stale] <span class="metatag" tag="stale">stale</span></li>
51 <li>[dead] <span class="metatag" tag="dead">dead</span></li>
52 <li>[lang =&gt; lang] <span class="metatag" tag="lang">lang</span></li>
53 <li>[license =&gt; License] <span class="metatag" tag="license"><a href="http://www.opensource.org/licenses/License">License</a></span></li>
54 <li>[requires =&gt; Repo] <span class="metatag" tag="requires">requires =&gt; <a href="#">Repo</a></span></li>
55 <li>[recommends =&gt; Repo] <span class="metatag" tag="recommends">recommends =&gt; <a href="#">Repo</a></span></li>
56 <li>[see =&gt; URI] <span class="metatag" tag="see">see =&gt; <a href="#">URI</a></span></li>
57 </ul>
58
59 <h3>Flash Messages</h3>
60 <div class="flash_msg">
61
62 <div class="alert alert-dismissable alert-success">
63 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
64 Updated VCS settings
65 </div>
66 <div class="alert alert-dismissable alert-warning">
67 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
68 Updated VCS settings
69 </div>
70 <div class="alert alert-dismissable alert-error">
71 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
72 Updated VCS settings
73 </div>
74 <div class="alert alert-dismissable alert">
75 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
76 Updated VCS settings
77 </div>
78
79
80 </div>
48 <div class="bs-example">
49 <ul class="metatag-list">
50 <li>[default] <span class="metatag" tag="default">default</span></li>
51 <li>[featured] <span class="metatag" tag="featured">featured</span></li>
52 <li>[stale] <span class="metatag" tag="stale">stale</span></li>
53 <li>[dead] <span class="metatag" tag="dead">dead</span></li>
54 <li>[lang =&gt; lang] <span class="metatag" tag="lang">lang</span></li>
55 <li>[license =&gt; License] <span class="metatag" tag="license"><a href="http://www.opensource.org/licenses/License">License</a></span></li>
56 <li>[requires =&gt; Repo] <span class="metatag" tag="requires">requires =&gt; <a href="#">Repo</a></span></li>
57 <li>[recommends =&gt; Repo] <span class="metatag" tag="recommends">recommends =&gt; <a href="#">Repo</a></span></li>
58 <li>[see =&gt; URI] <span class="metatag" tag="see">see =&gt; <a href="#">URI</a></span></li>
59 </ul>
60 </div>
81 61 </div> <!-- .main-content -->
82 62 </div>
83 63 </div> <!-- .box -->
General Comments 0
You need to be logged in to leave comments. Login now