##// END OF EJS Templates
alerts: updating style guide for new polymer alerts
lisaq -
r839:a3b2c0d4 default
parent child Browse files
Show More
@@ -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>
@@ -1,78 +1,79 b''
1 1 ## -*- coding: utf-8 -*-
2 2 <%inherit file="/base/base.html"/>
3 3
4 4 <%def name="title()">
5 5 ${_('Debug Style')}
6 6 %if c.rhodecode_name:
7 7 &middot; ${h.branding(c.rhodecode_name)}
8 8 %endif
9 9 </%def>
10 10
11 11 <%def name="breadcrumbs_links()">
12 12 ${_('Style')}
13 13 </%def>
14 14
15 15 <%def name="menu_bar_nav()">
16 16 ${self.menu_items(active='debug_style')}
17 17 </%def>
18 18
19 19
20 20 <%def name="main()">
21 21 <div id="style-page">
22 22 ${self.real_main()}
23 23 </div>
24 24 </%def>
25 25
26 26 <%def name="real_main()">
27 27 <div class="box">
28 28 <div class="title">
29 29 ${self.breadcrumbs()}
30 30 </div>
31 31
32 32 <div class='sidebar-col-wrapper'>
33 33 ##main
34 34 ${self.sidebar()}
35 35
36 36 <div class="main-content">
37 37 <h2>Examples of styled elements</h2>
38 38 <p>Taken based on the examples from Bootstrap, form elements based
39 39 on our current markup.</p>
40 40 <p>
41 41 The objective of this section is to have a comprehensive style guide which out
42 42 lines any and all elements used throughout the application, as a reference for
43 43 both existing developers and as a training tool for future hires.
44 44 </p>
45 45 </div>
46 46 </div>
47 47 </div>
48 48 </%def>
49 49
50 50
51 51 <%def name="sidebar()">
52 52 <div class="sidebar">
53 53 <ul class="nav nav-pills nav-stacked">
54 54 <li class="${'active' if c.active=='index' else ''}"><a href="${h.url('debug_style_home')}">${_('Index')}</a></li>
55 55 <li class="${'active' if c.active=='typography' else ''}"><a href="${h.url('debug_style_template', t_path='typography.html')}">${_('Typography')}</a></li>
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>
62 63 <li class="${'active' if c.active=='icons' else ''}"><a href="${h.url('debug_style_template', t_path='icons.html')}">${_('Icons')}</a></li>
63 64 <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>
64 65 <li class="${'active' if c.active=='login' else ''}"><a href="${h.url('debug_style_template', t_path='login.html')}">${_('Login')}</a></li>
65 66 <li class="${'active' if c.active=='login2' else ''}"><a href="${h.url('debug_style_template', t_path='login2.html')}">${_('Login 2')}</a></li>
66 67 <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>
67 68
68 69 <li class="divider"><strong>Experimental</strong></li>
69 70 <li class="${'active' if c.active=='panels' else ''}"><a href="${h.url('debug_style_template', t_path='panels.html')}">${_('Panels')}</a></li>
70 71
71 72 <li class="divider"><strong>Depreciated</strong></li>
72 73 <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>
73 74 <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>
74 75 <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>
75 76 <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>
76 77 </ul>
77 78 </div>
78 79 </%def> No newline at end of file
@@ -1,84 +1,64 b''
1 1 ## -*- coding: utf-8 -*-
2 2 <%inherit file="/debug_style/index.html"/>
3 3
4 4 <%def name="breadcrumbs_links()">
5 5 ${h.link_to(_('Style'), h.url('debug_style_home'))}
6 6 &raquo;
7 7 ${c.active}
8 8 </%def>
9 9
10 10
11 11 <%def name="real_main()">
12 12 <div class="box">
13 13 <div class="title">
14 14 ${self.breadcrumbs()}
15 15 </div>
16 16
17 17 <div class='sidebar-col-wrapper'>
18 18
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 -->
84 64 </%def>
General Comments 0
You need to be logged in to leave comments. Login now