Commit 94ec2057 authored by Athina Bekakou's avatar Athina Bekakou
Browse files

admin-ui: Add Filters' Compact View HTML structure

* Show filters area only when the corresponding view has filters.
* Update Tips and Tricks section.
* Add extra instructions in Compact View area.
parent aa2d5d98
......@@ -13,15 +13,15 @@
<label>From:</label>
<input type="text" name="sender" class="sender"
form="contactForm" value="{{mail.sender}}" />
<a data-error="empty-sender" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Missing the sender address of the e-mail."></a>
<a data-error="invalid-email" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Invalid e-mail address."></a>
<a data-error="empty-sender" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Missing the sender address of the e&#8209mail."></a>
<a data-error="invalid-email" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Invalid e&#8209mail address."></a>
</div>
</br>
<div class="form-subject form-area">
<label>Subject:</label>
<input type="text" name="subject" class="subject"
form="contactForm" value="{{mail.subject}}" />
<a data-error="empty-subject" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Missing the subject of the e-mail."></a>
<a data-error="empty-subject" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Missing the subject of the e&#8209mail."></a>
</div>
<div class="form-body form-area">
<label>Body:</label>
......
......@@ -79,13 +79,7 @@
<span class="snf-bell-1"></span>
</a>
<a href="" class="line-btn shortcuts-btn">
<span data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content="
<h2>Shortcuts</h2>
<dl class='dl-horizontal shortcuts'>
<dt><span class='key'>i</span></dt><dd>Open/close the window that contains information regarding the state of the actions.</dd>
<dt><span class='key'>esc</span></dt><dd>Close confirmation window.</dd>
<dt><span class='key'>shift</span> + <span class='key'>click</span></dt><dd>Order the contents of the table by selecting multiple columns.</dd>
</dl>">
<span data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='{% include "admin/tips.html" %}'>
<i class="snf-book-2 book-icon"></i>
Tips and Tricks
</span>
......
......@@ -2,9 +2,12 @@
{% block content %}
{% block filter-list %}
{% include "admin/filter_list.html" %}
{% endblock filter-list %}
{# Show the filter list only in views that have filters #}
{% if filter_dict %}
{% block filter-list %}
{% include "admin/filter_list.html" %}
{% endblock filter-list %}
{% endif %}
{% block action-list %}
{% include "admin/action_list_vertical.html" %}
......
{% load admin_tags %}
<div class="filter compact-view input-with-btn invisible">
<div class="form-group">
<label title="Compact View">
<input type="search" data-filter="compact-view">
</label>
</div>
<a class="exec-search search-btn"><span>Search</span></a>
<div class="filter-error">
<span class="error-sign snf-exclamation-sign"></span>
<span class="error-description"></span>
</div>
{% include "admin/filter_compact_instructions.html" %}
</div>
{% load admin_tags %}
<div class="instructions">
<a href="" class="toggle-instructions line-btn">
<span>Instructions</span>
<span class="snf-font-admin snf-angle-down arrow"></span>
</a>
<div class="content content-area">
The list below presents the identifiers that correspond to the filters
of <b>Standard View</b>, as well as their appropriate values:
<dl class="dl-horizontal">
{% for filter in filter_dict %}
<dt>{{ filter.name }}</dt>
<dd>
{% if filter|get_filter_type == 'choice' or filter|get_filter_type == 'multichoice' %}
{{ filter|default_value }}, {{ filter|choices|join:", "|title }}
{% elif filter|get_filter_type == 'bool' %}
-, True, False
{% else %}
Free text
{% endif %}
</dd>
{% endfor %}
</dl>
</br>
<p class="clarifications">For detailed instructions please consult the "Tips and Tricks".</p>
</div>
</div>
{% load admin_tags %}
<div class="filters filters-area">
<!-- use it to center it (sort of) -->
{% for filter in filter_dict %}
{% include filter|get_filter_template %}
{% endfor %}
<a class="onoffswitch search-mode">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</a>
<!-- <a class="search-mode search-mode-btn">Compact View</a> -->
<!-- use it to center it (sort of) -->
{% for filter in filter_dict %}
{% include filter|get_filter_template %}
{% endfor %}
{% include "admin/filter_compact.html" %}
</div>
......@@ -20,23 +20,9 @@
</tr>
</thead>
</table>
<div class="custom-buttons bottom">
<a href="" id="toggle-notifications" title="Open/Close notifications" class="select line-btn" data-karma="neutral" data-caution="none">
<span class="snf-bell-1"></span>
</a>
<a href="" class="line-btn shortcuts-btn">
<span data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content="
<h2>Shortcuts</h2>
<dl class='dl-horizontal shortcuts'>
<dt><span class='key'>i</span></dt><dd>Open/close the window that contains information regarding the state of the actions.</dd>
<dt><span class='key'>esc</span></dt><dd>Close confirmation window.</dd>
<dt><span class='key'>shift</span> + <span class='key'>click</span></dt><dd>Order the contents of the table by selecting multiple columns.</dd>
</dl>">
<i class="snf-book-2 book-icon"></i>
Tips and Tricks
</span>
</a>
</div>
{% block table-footer %}
{% include "admin/table_footer.html" %}
{% endblock %}
</div>
<div class="hidden massive-pull">
<table class="table total-list" id="total-list">
......
<div class="custom-buttons bottom">
<a href="" id="toggle-notifications" title="Open/Close notifications" class="select line-btn" data-karma="neutral" data-caution="none">
<span class="snf-bell-1"></span>
</a>
<a href="" class="line-btn shortcuts-btn">
<span data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='{% include "admin/tips.html" %}'>
<i class="snf-book-2 book-icon"></i>
Tips and Tricks&nbsp;
</span>
</a>
</div>
{% load admin_tags %}
<div class="panel panel-default">
<h2 class="panel-heading">Shortcuts</h2>
<dl class="dl-horizontal shortcuts panel-body">
<dt><span class="key">i</span></dt>
<dd>Open/close the windowthat contains information regarding the state of the actions.</dd>
<dt><span class="key">esc</span></dt><dd>Close confirmation window.</dd>
<dt><span class="key">shift</span> + <span class="key">click</span></dt>
<dd>Order the contents of the table by selecting multiple columns.</dd>
</dl>
{% comment %}
Show filter tips only in pages that actually have filters
{% endcomment %}
{% if filter_dict %}
<h2 class="panel-heading">Compact Filters View</h2>
<div class="panel-body">
<p>Each filter has an identifier that can be used in <b>Compact Filters View</b>.</br>
The identifiers for the filters at the top of this page are:</br>
<b>
{% for filter in filter_dict %}
{{ filter.name }}{% if forloop.last %}.{% else %}, {% endif %}
{% endfor %}
</b>
</p>
<h3>Examples</h3>
<dl class="filters-examples">
<dt>Search for the keyword "John" in the most common text fields of the <b>User model</b>.</dt>
<dd><span class="highlight">user:John</span></dd>
<dd class="divider"></dd>
<dt>Search for the keywords "John" and "Doe" in the most common text fields of the <b>User model</b> and return the conjuction <b>(logical AND)</b> of their results.</dt>
<dd><span class="highlight">user:John Doe</span></dd>
<dd><span class="highlight">user: John Doe</span></dd>
<dd class="divider"></dd>
<dt>Search for the keyword "John" in the <b>first_name</b> field of <b>User</b> and "Doe" in the <b>last_name</b> field, and return the conjuction of their results.</dt>
<dd><span class="highlight">user:first_name=John last_name=Doe</span></dd>
<dd class="divider"></dd>
<dt>Search for the keywords "John" and "Doe" but also limit the results by filtering the users that:</br>
- have status "Pending Moderation" <b>OR</b> "Active"</br>
- have VMs whose status is "Started"</br>
- have IPs that contain the number ".27"</br>
</dt>
<dd><span class="highlight">user:John Doe status:pending moderation,active vm:operstate=started ip:.27</span></dd>
<dd class="divider"></dd>
</dl>
<dl class="notes dl-horizontal">
<dt>Note 1:</dt>
<dd>You can also experiment with Compact View by switching to and from Standard View.</dd>
<dt>Note 2:</dt>
<dd>For the time being, you can find more model field names by reading the <b>models.py files of Cyclades/Astakos</b>.</dd>
</dl>
</div>
{% endif %}
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment