From 7c34b60fc39cbec6885a5e1d85bd8b8b27a12b85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Thu, 26 May 2016 19:59:54 +0200
Subject: [PATCH] mail: give postit a title bar, clicking on it open/close the
 postit (#11073)

---
 .../mail/templates/welco/mail_home.html        | 12 ++++++++----
 welco/static/css/style.css                     | 18 +++++++++++++++++-
 welco/static/js/welco.js                       | 14 ++++++++++----
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/welco/sources/mail/templates/welco/mail_home.html b/welco/sources/mail/templates/welco/mail_home.html
index 851de09..5f07939 100644
--- a/welco/sources/mail/templates/welco/mail_home.html
+++ b/welco/sources/mail/templates/welco/mail_home.html
@@ -32,10 +32,14 @@
 			<button data-action-url="{{reject_url}}" class="reject">Rejeter (illisible)</button>
 			{% endif %}
 		</form>
-		<div id="postit" style="display: none"
-			data-title-selector="h2"
-			data-base-url="{% url 'mail-edit-note' %}"
-			data-inplace-submit="true">
+		<div id="postit" style="display: none">
+			<div class="hbar"></div>
+			<div class="content"
+				data-title-selector="h2"
+				data-base-url="{% url 'mail-edit-note' %}"
+				data-inplace-submit="true"
+				>
+			</div>
 		</div>
 		<iframe id="pdf-viewer" src="{% url 'mail-viewer' %}">
 		</iframe>
diff --git a/welco/static/css/style.css b/welco/static/css/style.css
index 1a8c170..6b5bff7 100644
--- a/welco/static/css/style.css
+++ b/welco/static/css/style.css
@@ -434,7 +434,6 @@ div#postit {
 	position: absolute;
 	right: 4em;
 	top: 11em;
-	padding: 1ex;
 	max-width: 15em;
 	background: rgba(241,231,103,1);
 	overflow-x: none;
@@ -443,6 +442,23 @@ div#postit {
 	box-shadow: 3px 3px 3px #aaa;
 }
 
+div#postit > div.hbar {
+	height: 2ex;
+	background: #ff9c3b;
+	min-width: 3em;
+}
+
+div#postit.closed > div.content {
+	max-height: 0;
+	padding: 0;
+}
+
+div#postit > div.content {
+	padding: 1ex;
+	transition: max-height 0.5s ease;
+	max-height: 50ex;
+}
+
 form#note textarea {
 	width: calc(100% - 2em);
 	height: 8em;
diff --git a/welco/static/js/welco.js b/welco/static/js/welco.js
index 89b05f6..de70454 100644
--- a/welco/static/js/welco.js
+++ b/welco/static/js/welco.js
@@ -80,7 +80,7 @@ $(function() {
     $('#id_post_date').val($(this).data('post-date'));
     $('#id_registered_mail_number').val($(this).data('registered-mail-number'));
     var source_pk = $('div.source .active[data-source-pk]').data('source-pk');
-    $('#postit').data('url', $('#postit').data('base-url') + '?mail=' + source_pk);
+    $('#postit > div.content').data('url', $('#postit > div.content').data('base-url') + '?mail=' + source_pk);
     $('#postit').trigger('welco:load-mail-note');
     $('#postit').show();
     refresh_bottom_cells(function() {
@@ -359,7 +359,7 @@ $(function() {
   $(document).on('gadjo:dialog-done welco:load-mail-note', function(ev) {
     if (ev.target && ev.target.id == 'create-new-contact') return;
     var source_pk = $('div.source .active[data-source-pk]').data('source-pk');
-    $('#postit').load('/ajax/mail/note/' + source_pk);
+    $('#postit > div.content').load('/ajax/mail/note/' + source_pk);
   });
 
   $(document).on('gadjo:dialog-done welco:load-copies', function(ev) {
@@ -409,8 +409,14 @@ $(function() {
 
   });
 
-  $('#postit').on('click', window.displayPopup);
-  $('#postit.readonly').off('click');
+  $('#postit > div.content').on('click', function() {
+    $('#postit').removeClass('closed');
+  });
+  $('#postit > div.content').on('click', window.displayPopup);
+  $('#postit.readonly > div').off('click');
+  $('#postit > div.hbar').on('click', function() {
+    $('#postit').toggleClass('closed');
+  });
   $('#id_post_date').datepicker($.datepicker.regional["fr"]);
 
   if ($('#category-filter').length) {