From 06b6dcb3d8a85d97141229853f2bcd4c1ecf43a1 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Tue, 23 Aug 2016 20:18:49 +0200
Subject: UI: new (and nicer) layout for sheet header

---
 ishtar_common/static/media/style.css               | 78 ++++++++++++++++++----
 .../templates/ishtar/blocks/window_nav.html        | 41 ++++++++++++
 ishtar_common/templates/ishtar/sheet.html          | 32 +++++++--
 ishtar_common/templatetags/window_header.py        | 17 +++++
 4 files changed, 150 insertions(+), 18 deletions(-)
 create mode 100644 ishtar_common/templates/ishtar/blocks/window_nav.html
 create mode 100644 ishtar_common/templatetags/window_header.py

(limited to 'ishtar_common')

diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index 7aef23099..75277eb1d 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -16,7 +16,7 @@ div.form, ul.form {
     background-color: #922;
 }
 
-a.add-button, #reset_wizards{
+.badge, a.add-button, #reset_wizards{
     background-color: #D14;
 }
 
@@ -27,15 +27,13 @@ a, a.remove {
     color:#D14;
 }
 
+.badge,
 a.add-button,
 #reset_wizards,
 #window h1{
     color:#fff;
 }
 
-#context_menu {
-}
-
 #context_menu .orange {
     color:#dd6011;
 }
@@ -77,6 +75,33 @@ hr.spacer{
     margin: 13px;
 }
 
+#window hr.clear,
+hr.clear{
+    clear: both;
+    border: 0 solid transparent;
+    height: 0;
+    margin: 0;
+}
+
+.fa-stack-15x {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 1.5em;
+    line-height: 1.4em;
+}
+
+.badge{
+    border: 1px solid #D14;
+}
+
+.close-buttons{
+    position: absolute;
+    right: 10px;
+    top: 2px;
+}
+
 /* shadows */
 #progress-content,
 .sheet{
@@ -677,6 +702,13 @@ ul.form .help_text{
     margin:0.2em;
 }
 
+.badge{
+    padding: 0.1em 0.3em;
+    border-radius: 1em;
+    line-height: 1.8em;
+    font-style: normal;
+}
+
 .autocomplete{
     width:300px;
 }
@@ -760,18 +792,17 @@ table.confirm tr.spacer td:last-child{
 
 .previous_page, .next_page{
     position:absolute;
-    top:40px;
-    font-size: 30px;
+    top:2px;
     color: #000;
     z-index: 1000;
 }
 
 .previous_page{
-    left:35px;
+    left:95px;
 }
 
 .next_page{
-    right:35px;
+    right:95px;
 }
 
 a.photo{
@@ -945,24 +976,36 @@ table td.item-list span{
 #window .head{
     text-align:center;
     background-color:#f1f2f6;
-    -webkit-border-top-left-radius: 8px;
-    -webkit-border-top-right-radius: 8px;
-    -moz-border-radius-topleft: 8px;
-    -moz-border-radius-topright: 8px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
 }
 
+#window .tool-left,
+#window .tool-right,
 #window .tool{
     text-align:center;
     font-style:italic;
 }
 
+#window .tool-right{
+    float: left;
+    padding: 0 2em;
+}
+
+#window .tool-left{
+    float: right;
+    padding: 0 2em;
+}
+
 #window .tool.modify{
     font-style:normal;
     font-weight:bold;
 }
 
+.history-nav{
+    display: inline-block;
+    width: 100px;
+    vertical-align: top;
+}
+
 #window .body{
     position:absolute;
     padding:2px 10px 6px 10px;
@@ -977,6 +1020,13 @@ table td.item-list span{
     text-align:center;
     font-size:16px;
     margin-top:0;
+    padding: 0.2em;
+    -webkit-border-top-left-radius: 8px;
+    -webkit-border-top-right-radius: 8px;
+    -moz-border-radius-topleft: 8px;
+    -moz-border-radius-topright: 8px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
 }
 
 #window label{
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'>
diff --git a/ishtar_common/templatetags/window_header.py b/ishtar_common/templatetags/window_header.py
new file mode 100644
index 000000000..48248ee3d
--- /dev/null
+++ b/ishtar_common/templatetags/window_header.py
@@ -0,0 +1,17 @@
+from django import template
+
+register = template.Library()
+
+
+@register.inclusion_tag('ishtar/blocks/window_nav.html')
+def window_nav(show_url, modify_url, histo_url, revert_url, item, window_id,
+               previous, nxt):
+    return {
+        'show_url': show_url,
+        'modify_url': modify_url,
+        'histo_url': histo_url,
+        'revert_url': revert_url,
+        'item': item,
+        'window_id': window_id,
+        'previous': previous,
+        'next': nxt}
-- 
cgit v1.2.3