alerts: updating style guide for new polymer alerts
This commit is contained in:
lisaq
parent
09afffc7df
commit
533e274f3d
3 changed files with 111 additions and 55 deletions
75
rhodecode/templates/debug_style/alerts.html
Normal file
75
rhodecode/templates/debug_style/alerts.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
## -*- coding: utf-8 -*-
|
||||
<%inherit file="/debug_style/index.html"/>
|
||||
|
||||
<%def name="breadcrumbs_links()">
|
||||
${h.link_to(_('Style'), h.url('debug_style_home'))}
|
||||
»
|
||||
${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>
|
||||
|
|
@ -56,6 +56,7 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -19,65 +19,45 @@
|
|||
${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 => lang] <span class="metatag" tag="lang">lang</span></li>
|
||||
<li>[license => License] <span class="metatag" tag="license"><a href="http://www.opensource.org/licenses/License">License</a></span></li>
|
||||
<li>[requires => Repo] <span class="metatag" tag="requires">requires => <a href="#">Repo</a></span></li>
|
||||
<li>[recommends => Repo] <span class="metatag" tag="recommends">recommends => <a href="#">Repo</a></span></li>
|
||||
<li>[see => URI] <span class="metatag" tag="see">see => <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 => lang] <span class="metatag" tag="lang">lang</span></li>
|
||||
<li>[license => License] <span class="metatag" tag="license"><a href="http://www.opensource.org/licenses/License">License</a></span></li>
|
||||
<li>[requires => Repo] <span class="metatag" tag="requires">requires => <a href="#">Repo</a></span></li>
|
||||
<li>[recommends => Repo] <span class="metatag" tag="recommends">recommends => <a href="#">Repo</a></span></li>
|
||||
<li>[see => URI] <span class="metatag" tag="see">see => <a href="#">URI</a></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- .main-content -->
|
||||
</div>
|
||||
</div> <!-- .box -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue