From 58b4c564d09e66e581f09bfe8cc7467dc81509d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Wed, 15 Jan 2020 10:39:44 +0100
Subject: [PATCH] update style of list of links

---
 .../combo/manager/link-list-cell-form.html    | 49 +++++++++++++------
 combo/manager/static/css/combo.manager.css    | 38 ++++++++++++++
 combo/manager/static/js/combo.manager.js      | 15 ------
 combo/manager/views.py                        |  1 +
 4 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/combo/data/templates/combo/manager/link-list-cell-form.html b/combo/data/templates/combo/manager/link-list-cell-form.html
index 2c2da48d..76a8512f 100644
--- a/combo/data/templates/combo/manager/link-list-cell-form.html
+++ b/combo/data/templates/combo/manager/link-list-cell-form.html
@@ -2,21 +2,42 @@
 {% load i18n %}
 
 {% block cell-form %}
+{{ form.as_p }}
 {% with cell.get_items as links %}
 {% if links %}
-<table class="main">
-  <tbody class="link-list" data-link-list-order-url="{% url 'combo-manager-link-list-order' page_pk=page.pk cell_reference=cell.get_reference %}">
-    {% for link in links %}
-    <tr class="link-item" data-link-item-id="{{ link.pk }}">
-      <td><span class="handle-link-item">⣿</span> {{ link }}</td>
-      <td>
-        <a rel="popup" href="{% url 'combo-manager-page-list-cell-edit-link' page_pk=page.id cell_reference=cell.get_reference link_cell_reference=link.get_reference %}">{% trans "Edit" %}</a> |
-        <a rel="popup" href="{% url 'combo-manager-page-list-cell-delete-link' page_pk=page.id cell_reference=cell.get_reference link_cell_reference=link.get_reference %}">{% trans "Delete" %}</a>
-      </td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+<p><label>{% trans "Links:" %}</label></p>
+<div>
+ <ul class="objects-list list-of-links" id="list-of-links-{{cell.id}}"
+     data-link-list-order-url="{% url 'combo-manager-link-list-order' page_pk=page.pk cell_reference=cell.get_reference %}">
+   {% for link in links %}
+   <li data-link-item-id="{{ link.pk }}"><span class="handle">⣿</span>
+   <span title="{{link}}">{{ link|truncatechars:100 }}</span>
+       <a rel="popup" title="{% trans "Edit" %}" class="link-action-icon edit" href="{% url 'combo-manager-page-list-cell-edit-link' page_pk=page.id cell_reference=cell.get_reference link_cell_reference=link.get_reference %}">{% trans "Edit" %}</a>
+       <a rel="popup" title="{% trans "Delete" %}" class="link-action-icon delete" href="{% url 'combo-manager-page-list-cell-delete-link' page_pk=page.id cell_reference=cell.get_reference link_cell_reference=link.get_reference %}">{% trans "Delete" %}</a>
+   </li>
+   {% endfor %}
+ </ul>
+</div>
+<script>
+$(function () {
+  $('#list-of-links-{{cell.id}}').sortable({
+    handle: '.handle',
+    update: function(event, ui) {
+       var new_order = Object();
+       $(this).find('li').each(function(i, x) {
+           var suffix = $(x).data('link-item-id');
+           new_order['pos_' + suffix] = i;
+       });
+       console.log('nesw order:', new_order);
+       $.ajax({
+           url: $(this).data('link-list-order-url'),
+           data: new_order
+       });
+
+    }
+  });
+});
+</script>
 {% endif %}
 {% endwith %}
 <div class="buttons">
@@ -24,6 +45,4 @@
   <a rel="popup" href="{% url 'combo-manager-page-list-cell-add-link' page_pk=page.id cell_reference=cell.get_reference link_code=klass.add_as_link_code %}">{{ klass.add_as_link_label }}</a> {% if not forloop.last %}|{% endif %}
   {% endfor %}
 </div>
-<br />
-{{ form.as_p }}
 {% endblock %}
diff --git a/combo/manager/static/css/combo.manager.css b/combo/manager/static/css/combo.manager.css
index 769c6a1a..af12d0fa 100644
--- a/combo/manager/static/css/combo.manager.css
+++ b/combo/manager/static/css/combo.manager.css
@@ -476,3 +476,41 @@ ul.gallery li:last-child a {
 	text-align: center;
 	padding: 45px 1ex 1ex 1ex;
 }
+
+ul.objects-list.list-of-links li {
+	padding-left: 0;
+}
+
+ul.objects-list.list-of-links li a.link-action-icon {
+	height: 100%;
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 3em;
+	display: block;
+	overflow: hidden;
+	text-decoration: none;
+	border: none;
+	text-indent: -1000px;
+	line-height: 3em;
+}
+
+ul.objects-list.list-of-links li a.link-action-icon::before {
+	font-family: FontAwesome;
+	text-indent: 0px;
+	text-align: center;
+	display: block;
+	width: 100%;
+}
+
+ul.objects-list.list-of-links li a.link-action-icon.delete::before {
+	content: "\f057"; /* remove-sign */
+}
+
+ul.objects-list.list-of-links li a.link-action-icon.edit {
+	right: 3em;
+}
+
+ul.objects-list.list-of-links li a.link-action-icon.edit::before {
+	content: "\f044";
+}
diff --git a/combo/manager/static/js/combo.manager.js b/combo/manager/static/js/combo.manager.js
index fe7b169f..f074e8d1 100644
--- a/combo/manager/static/js/combo.manager.js
+++ b/combo/manager/static/js/combo.manager.js
@@ -220,21 +220,6 @@ $(function() {
      return false;
   });
 
-  $('.link-list').sortable({
-     handle: '.handle-link-item',
-     stop: function(event, ui) {
-       var new_order = Object();
-       $('.link-item').each(function(i, x) {
-           var suffix = $(x).data('link-item-id');
-           new_order['pos_' + suffix] = i;
-       });
-       $.ajax({
-           url: $(this).data('link-list-order-url'),
-           data: new_order
-       });
-     }
-  });
-
   function compute_max_height($cell) {
     var cell_id = $cell.attr('id');
     $('style#for-' + cell_id).remove();
diff --git a/combo/manager/views.py b/combo/manager/views.py
index 2eec4991..8977bc95 100644
--- a/combo/manager/views.py
+++ b/combo/manager/views.py
@@ -398,6 +398,7 @@ class PageEditCellView(UpdateView):
     def get_context_data(self, **kwargs):
         context = super(PageEditCellView, self).get_context_data(**kwargs)
         context['cell'] = self.get_object()
+        context['page'] = context['cell'].page
         return context
 
     def get_object(self, queryset=None):
-- 
2.25.0

