UI: new (and nicer) layout for sheet header

2 files changed, 69 insertions, 4 deletions

diff --git a/ishtar_common/templates/ishtar/blocks/window_nav.html b/ishtar_common/templates/ishtar/blocks/window_nav.html
new file mode 100644
index 000000000..6f4d94d6b
--- /dev/null
+++ b/ishtar_common/templates/ishtar/blocks/window_nav.html
@@ -0,0 +1,41 @@
+{% load url from future %}
+{% load i18n %}
+{% if previous or next %}
+<div class='tool-left'>
+{% if previous %}
+<a class='history-nav' href="#" onclick='load_window("{% url histo_url item.pk previous|date:"c"%}");$("#{{window_id}}").hide();return false;' title="{%trans 'Previous version'%}">
+<span class="fa-stack">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-step-backward fa-stack-1x fa-inverse"></i>
+</span>
+<br/>{{previous}}
+</a>
+{% endif %}
+{% if next %}
+<a class='history-nav' title="{% trans 'Restaure this version' %}" href="#" onclick='if(confirm("{%trans "Are you sure to restaure to this version? All changement made since this version will be lost."%}")){load_url("{% url revert_url item.pk item.history_date|date:"c"%}");closeAllWindows();load_window("{% url show_url item.pk None %}");}'>
+<span class="fa-stack fa-lg">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-exchange fa-stack-1x fa-inverse"></i>
+</span>
+<br/>{% trans "Restaure" %}
+</a>
+<a class='history-nav' href="#" onclick='load_window("{% url histo_url item.pk next|date:"c" %}");$("#{{window_id}}").hide();return false;' title="{%trans 'Next version'%}">
+<span class="fa-stack">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-step-forward fa-stack-1x fa-inverse"></i>
+</span>
+<br/>{{next}}
+</a>
+{% endif %}
+</div>
+{% endif %}
+<div class='tool-right'>
+<a href='{% url modify_url item.pk %}' title="{% trans 'Modify' %}">
+<span class="fa-stack fa-lg">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
+</span>
+</a>
+<a class='badge' href='{% url show_url item.pk "odt" %}' title='{% trans "Export as OpenOffice.org file"%}'>ODT</a> <a class='badge' href='{% url show_url item.pk "pdf" %}' title='{% trans "Export as PDF file"%}'>PDF</a>
+</div>
+<hr class='clear'>
diff --git a/ishtar_common/templates/ishtar/sheet.html b/ishtar_common/templates/ishtar/sheet.html
index 5da837ab4..bfefd5eb6 100644
--- a/ishtar_common/templates/ishtar/sheet.html
+++ b/ishtar_common/templates/ishtar/sheet.html
@@ -18,11 +18,35 @@
 
 <div class="head">
 
-<a href='#' class='previous_page'><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></a>
-<a href='#' onclick='$("#{{window_id}}").hide("slow")'>{% trans "Close" %}</a> -
-<a href='#' onclick='closeAllWindows();'>{% trans "Close all windows" %}</a>
-<a href='#' class='next_page'><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
+<a href='#' class='previous_page'>
+<span class="fa-stack fa-lg">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-arrow-left fa-stack-1x fa-inverse"></i>
+</span>
+</a>
+<div class='close-buttons'>
+<a href='#' onclick='$("#{{window_id}}").hide("slow")' title="{% trans 'Close' %}">
+<span class="fa-stack">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
+</span>
+</a>
+<a href='#' onclick='closeAllWindows();' title="{% trans "Close all windows" %}">
+<span class="fa-stack">
+  <i class="fa fa-files-o fa-stack-2x"></i>
+  <i class="fa fa-circle fa-stack-15x"></i>
+  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
+</span>
+</a>
+</div>
+<a href='#' class='next_page'>
+<span class="fa-stack fa-lg">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
+</span>
+</a>
 
+<h1>{% block head_title %}{% endblock %}</h1>
 </div>
 
 <script type="text/javascript" language='javascript'>