##// 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 ## -*- coding: utf-8 -*-
1 ## -*- coding: utf-8 -*-
2 <%inherit file="/base/base.html"/>
2 <%inherit file="/base/base.html"/>
3
3
4 <%def name="title()">
4 <%def name="title()">
5 ${_('Debug Style')}
5 ${_('Debug Style')}
6 %if c.rhodecode_name:
6 %if c.rhodecode_name:
7 &middot; ${h.branding(c.rhodecode_name)}
7 &middot; ${h.branding(c.rhodecode_name)}
8 %endif
8 %endif
9 </%def>
9 </%def>
10
10
11 <%def name="breadcrumbs_links()">
11 <%def name="breadcrumbs_links()">
12 ${_('Style')}
12 ${_('Style')}
13 </%def>
13 </%def>
14
14
15 <%def name="menu_bar_nav()">
15 <%def name="menu_bar_nav()">
16 ${self.menu_items(active='debug_style')}
16 ${self.menu_items(active='debug_style')}
17 </%def>
17 </%def>
18
18
19
19
20 <%def name="main()">
20 <%def name="main()">
21 <div id="style-page">
21 <div id="style-page">
22 ${self.real_main()}
22 ${self.real_main()}
23 </div>
23 </div>
24 </%def>
24 </%def>
25
25
26 <%def name="real_main()">
26 <%def name="real_main()">
27 <div class="box">
27 <div class="box">
28 <div class="title">
28 <div class="title">
29 ${self.breadcrumbs()}
29 ${self.breadcrumbs()}
30 </div>
30 </div>
31
31
32 <div class='sidebar-col-wrapper'>
32 <div class='sidebar-col-wrapper'>
33 ##main
33 ##main
34 ${self.sidebar()}
34 ${self.sidebar()}
35
35
36 <div class="main-content">
36 <div class="main-content">
37 <h2>Examples of styled elements</h2>
37 <h2>Examples of styled elements</h2>
38 <p>Taken based on the examples from Bootstrap, form elements based
38 <p>Taken based on the examples from Bootstrap, form elements based
39 on our current markup.</p>
39 on our current markup.</p>
40 <p>
40 <p>
41 The objective of this section is to have a comprehensive style guide which out
41 The objective of this section is to have a comprehensive style guide which out
42 lines any and all elements used throughout the application, as a reference for
42 lines any and all elements used throughout the application, as a reference for
43 both existing developers and as a training tool for future hires.
43 both existing developers and as a training tool for future hires.
44 </p>
44 </p>
45 </div>
45 </div>
46 </div>
46 </div>
47 </div>
47 </div>
48 </%def>
48 </%def>
49
49
50
50
51 <%def name="sidebar()">
51 <%def name="sidebar()">
52 <div class="sidebar">
52 <div class="sidebar">
53 <ul class="nav nav-pills nav-stacked">
53 <ul class="nav nav-pills nav-stacked">
54 <li class="${'active' if c.active=='index' else ''}"><a href="${h.url('debug_style_home')}">${_('Index')}</a></li>
54 <li class="${'active' if c.active=='index' else ''}"><a href="${h.url('debug_style_home')}">${_('Index')}</a></li>
55 <li class="${'active' if c.active=='typography' else ''}"><a href="${h.url('debug_style_template', t_path='typography.html')}">${_('Typography')}</a></li>
55 <li class="${'active' if c.active=='typography' else ''}"><a href="${h.url('debug_style_template', t_path='typography.html')}">${_('Typography')}</a></li>
56 <li class="${'active' if c.active=='forms' else ''}"><a href="${h.url('debug_style_template', t_path='forms.html')}">${_('Forms')}</a></li>
56 <li class="${'active' if c.active=='forms' else ''}"><a href="${h.url('debug_style_template', t_path='forms.html')}">${_('Forms')}</a></li>
57 <li class="${'active' if c.active=='buttons' else ''}"><a href="${h.url('debug_style_template', t_path='buttons.html')}">${_('Buttons')}</a></li>
57 <li class="${'active' if c.active=='buttons' else ''}"><a href="${h.url('debug_style_template', t_path='buttons.html')}">${_('Buttons')}</a></li>
58 <li class="${'active' if c.active=='labels' else ''}"><a href="${h.url('debug_style_template', t_path='labels.html')}">${_('Labels')}</a></li>
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 <li class="${'active' if c.active=='tables' else ''}"><a href="${h.url('debug_style_template', t_path='tables.html')}">${_('Tables')}</a></li>
60 <li class="${'active' if c.active=='tables' else ''}"><a href="${h.url('debug_style_template', t_path='tables.html')}">${_('Tables')}</a></li>
60 <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 <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 <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 <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 <li class="${'active' if c.active=='icons' else ''}"><a href="${h.url('debug_style_template', t_path='icons.html')}">${_('Icons')}</a></li>
63 <li class="${'active' if c.active=='icons' else ''}"><a href="${h.url('debug_style_template', t_path='icons.html')}">${_('Icons')}</a></li>
63 <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 <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 <li class="${'active' if c.active=='login' else ''}"><a href="${h.url('debug_style_template', t_path='login.html')}">${_('Login')}</a></li>
65 <li class="${'active' if c.active=='login' else ''}"><a href="${h.url('debug_style_template', t_path='login.html')}">${_('Login')}</a></li>
65 <li class="${'active' if c.active=='login2' else ''}"><a href="${h.url('debug_style_template', t_path='login2.html')}">${_('Login 2')}</a></li>
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 <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 <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 <li class="divider"><strong>Experimental</strong></li>
69 <li class="divider"><strong>Experimental</strong></li>
69 <li class="${'active' if c.active=='panels' else ''}"><a href="${h.url('debug_style_template', t_path='panels.html')}">${_('Panels')}</a></li>
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 <li class="divider"><strong>Depreciated</strong></li>
72 <li class="divider"><strong>Depreciated</strong></li>
72 <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 <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 <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 <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 <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 <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 <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 <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 </ul>
77 </ul>
77 </div>
78 </div>
78 </%def> No newline at end of file
79 </%def>
@@ -1,84 +1,64 b''
1 ## -*- coding: utf-8 -*-
1 ## -*- coding: utf-8 -*-
2 <%inherit file="/debug_style/index.html"/>
2 <%inherit file="/debug_style/index.html"/>
3
3
4 <%def name="breadcrumbs_links()">
4 <%def name="breadcrumbs_links()">
5 ${h.link_to(_('Style'), h.url('debug_style_home'))}
5 ${h.link_to(_('Style'), h.url('debug_style_home'))}
6 &raquo;
6 &raquo;
7 ${c.active}
7 ${c.active}
8 </%def>
8 </%def>
9
9
10
10
11 <%def name="real_main()">
11 <%def name="real_main()">
12 <div class="box">
12 <div class="box">
13 <div class="title">
13 <div class="title">
14 ${self.breadcrumbs()}
14 ${self.breadcrumbs()}
15 </div>
15 </div>
16
16
17 <div class='sidebar-col-wrapper'>
17 <div class='sidebar-col-wrapper'>
18
18
19 ${self.sidebar()}
19 ${self.sidebar()}
20
20
21 <div class="main-content">
21 <div class="main-content">
22
22 <h2>Labels</h2>
23 <h2>Label</h2>
24
23
25 <h3>Labels used for tags, branches and bookmarks</h3>
24 <h3>Labels used for tags, branches and bookmarks</h3>
26
25
27 <ul>
26 <div class="bs-example">
27 <ul class="metatag-list">
28 <li>
28 <li>
29 <span class="tagtag tag" title="Tag tip">
29 <span class="tagtag tag" title="Tag tip">
30 <a href="/fake-link"><i class="icon-tag"></i>tip</a>
30 <a href="/fake-link"><i class="icon-tag"></i>tip</a>
31 </span>
31 </span>
32 </li>
32 </li>
33 <li>
33 <li>
34 <span class="branchtag tag" title="Branch default">
34 <span class="branchtag tag" title="Branch default">
35 <a href="/fake-link"><i class="icon-code-fork"></i>default</a>
35 <a href="/fake-link"><i class="icon-code-fork"></i>default</a>
36 </span>
36 </span>
37 </li>
37 </li>
38 <li>
38 <li>
39 <span class="bookmarktag tag" title="Bookmark example">
39 <span class="bookmarktag tag" title="Bookmark example">
40 <a href="/fake-link"><i class="icon-bookmark"></i>example</a>
40 <a href="/fake-link"><i class="icon-bookmark"></i>example</a>
41 </span>
41 </span>
42 </li>
42 </li>
43 </ul>
43 </ul>
44
44
45 </div>
46
45 <h3>Labels used in tables</h3>
47 <h3>Labels used in tables</h3>
46
48 <div class="bs-example">
47 <ul class="metatag-list">
49 <ul class="metatag-list">
48 <li>[default] <span class="metatag" tag="default">default</span></li>
50 <li>[default] <span class="metatag" tag="default">default</span></li>
49 <li>[featured] <span class="metatag" tag="featured">featured</span></li>
51 <li>[featured] <span class="metatag" tag="featured">featured</span></li>
50 <li>[stale] <span class="metatag" tag="stale">stale</span></li>
52 <li>[stale] <span class="metatag" tag="stale">stale</span></li>
51 <li>[dead] <span class="metatag" tag="dead">dead</span></li>
53 <li>[dead] <span class="metatag" tag="dead">dead</span></li>
52 <li>[lang =&gt; lang] <span class="metatag" tag="lang">lang</span></li>
54 <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>
55 <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>
56 <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>
57 <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>
58 <li>[see =&gt; URI] <span class="metatag" tag="see">see =&gt; <a href="#">URI</a></span></li>
57 </ul>
59 </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>
60 </div>
81 </div> <!-- .main-content -->
61 </div> <!-- .main-content -->
82 </div>
62 </div>
83 </div> <!-- .box -->
63 </div> <!-- .box -->
84 </%def>
64 </%def>
General Comments 0
You need to be logged in to leave comments. Login now