manager: change "add new cell" to a select box in placeholders divs (#10940)

combo/apps/dataviz/__init__.py

@@ -19,10 +19,12 @@ import re
 import django.apps
 from django.core import checks
 from django.conf import settings
+from django.utils.translation import ugettext_lazy as _
 
 
 class AppConfig(django.apps.AppConfig):
     name = 'combo.apps.dataviz'
+    verbose_name = _('Data Visualisation')
 
     def get_before_urls(self):
         from . import urls

combo/apps/family/__init__.py

@@ -15,9 +15,11 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import django.apps
+from django.utils.translation import ugettext_lazy as _
 
 class AppConfig(django.apps.AppConfig):
     name = 'combo.apps.family'
+    verbose_name = _('Family')
 
     def get_before_urls(self):
         from . import urls

combo/apps/fargo/__init__.py

@@ -0,0 +1,24 @@
+# combo - content management system
+# Copyright (C) 2016  Entr'ouvert
+#
+# This program is free software: you can redistribute it and/or modify it
+# under the terms of the GNU Affero General Public License as published
+# by the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import django.apps
+from django.utils.translation import ugettext_lazy as _
+
+class AppConfig(django.apps.AppConfig):
+    name = 'combo.apps.fargo'
+    verbose_name = _('Portfolio')
+
+default_app_config = 'combo.apps.fargo.AppConfig'

combo/apps/lingo/__init__.py

@@ -16,7 +16,7 @@
 
 import django.apps
 from django.core.urlresolvers import reverse
-from django.utils.translation import ugettext as _
+from django.utils.translation import ugettext_lazy as _
 
 class Plugin(object):
     def get_apps(self):
@@ -25,6 +25,7 @@ class Plugin(object):
 
 class AppConfig(django.apps.AppConfig):
     name = 'combo.apps.lingo'
+    verbose_name = _('Payment')
 
     def get_before_urls(self):
         from . import urls

combo/apps/momo/__init__.py

@@ -17,10 +17,11 @@
 import django.apps
 from django.conf import settings
 from django.core.urlresolvers import reverse
-from django.utils.translation import ugettext as _
+from django.utils.translation import ugettext_lazy as _
 
 class AppConfig(django.apps.AppConfig):
     name = 'combo.apps.momo'
+    verbose_name = _('Mobile Application')
 
     def is_enabled(self):
         return getattr(settings, 'ENABLE_MOMO', False)

combo/apps/newsletters/__init__.py

@@ -15,9 +15,11 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import django.apps
+from django.utils.translation import ugettext_lazy as _
 
 class AppConfig(django.apps.AppConfig):
     name = 'combo.apps.newsletters'
+    verbose_name = _('Newsletters')
 
     def get_before_urls(self):
         from . import urls

combo/apps/usersearch/__init__.py

@@ -15,9 +15,11 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import django.apps
+from django.utils.translation import ugettext_lazy as _
 
 class AppConfig(django.apps.AppConfig):
     name = 'combo.apps.usersearch'
+    verbose_name = _('Backoffice User Search')
 
     def get_before_urls(self):
         from . import urls

combo/apps/wcs/__init__.py

@@ -0,0 +1,24 @@
+# combo - content management system
+# Copyright (C) 2016  Entr'ouvert
+#
+# This program is free software: you can redistribute it and/or modify it
+# under the terms of the GNU Affero General Public License as published
+# by the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import django.apps
+from django.utils.translation import ugettext_lazy as _
+
+class AppConfig(django.apps.AppConfig):
+    name = 'combo.apps.wcs'
+    verbose_name = _('Forms')
+
+default_app_config = 'combo.apps.wcs.AppConfig'

combo/data/apps.py

@@ -15,7 +15,8 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 from django.apps import AppConfig
+from django.utils.translation import ugettext_lazy as _
 
 class DataConfig(AppConfig):
     name = 'combo.data'
-    verbose_name = 'Data'
+    verbose_name = 'data'

combo/data/models.py

@@ -20,6 +20,7 @@ import json
 import requests
 import subprocess
 
+from django.apps import apps
 from django.conf import settings
 from django.contrib.auth.models import Group
 from django.core.cache import cache
@@ -322,12 +323,18 @@ class CellBase(models.Model):
     def get_cell_type_str(cls):
         return '%s_%s' % (cls._meta.app_label, cls._meta.model_name)
 
+    @classmethod
+    def get_cell_type_group(cls):
+        return apps.get_app_config(cls._meta.app_label).verbose_name
+
     @classmethod
     def get_cell_types(cls):
         return [{
             'name': cls.get_verbose_name(),
             'cell_type_str': cls.get_cell_type_str(),
+            'group': cls.get_cell_type_group(),
             'variant': 'default',
+            'order': 0,
         }]
 
     @classmethod
@@ -428,6 +435,12 @@ class TextCell(CellBase):
             return None
         return utils.ellipsize(self.text)
 
+    @classmethod
+    def get_cell_types(cls):
+        d = super(TextCell, cls).get_cell_types()
+        d[0]['order'] = -1
+        return d
+
 
 @register_cell_class
 class FortuneCell(CellBase):
@@ -476,6 +489,7 @@ class BlurpCell(CellBase):
             l.append({
                 'name': blurp_value.get('name'),
                 'cell_type_str': cls.get_cell_type_str(),
+                'group': _('Extra'),
                 'variant': blurp_key,
             })
         l.sort(lambda x, y: cmp(x.get('name'), y.get('name')))

combo/manager/static/css/combo.manager.css

@@ -93,53 +93,6 @@ div.cell-list .empty-cell {
 	height: 3em;
 }
 
-div.cell-list {
-	min-height: 3em;
-}
-
-#available-cells ul {
-	list-style: none;
-	padding: 0;
-	margin: 1ex 0;
-	padding-left: 1em;
-}
-
-li.cell-type input {
-	display: none;
-}
-
-li.cell-type label {
-	display: block;
-	margin: 1ex 0;
-}
-
-li.cell-type li {
-	margin: 1ex 0;
-}
-
-li.cell-type input + span {
-	display: block;
-	background: #fafafa;
-	padding: 1ex;
-	box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 1px 0px;
-	border: 1px solid #eee;
-}
-
-li.cell-type input ~ ul {
-	display: none;
-	overflow: hidden;
-	transition: max-height linear 0.2s;
-}
-
-li.cell-type input:checked + span {
-	border-color: #888;
-}
-
-li.cell-type input:checked ~ ul {
-	display: block;
-	height: auto;
-}
-
 .view-online {
 	margin-left: 2em;
 }
@@ -315,3 +268,17 @@ p.hint::before {
 p.hint {
 	color: #aaa;
 }
+
+.manager-add-new-cell {
+	height: 4em;
+}
+
+.manager-add-new-cell a {
+	padding: 2ex 0 0ex 0;
+	margin-right: 2ex;
+	display: inline-block;
+}
+
+.manager-add-new-cell a + div {
+	display: inline-block;
+}

combo/manager/static/js/combo.manager.js

@@ -134,6 +134,7 @@ $(function() {
     window.location = $(this).data('add-url');
     return false;
   });
+
   $('div.cell button.save').on('click', function(event) {
      var $button = $(this);
      var $form = $(this).closest('form');
@@ -164,26 +165,6 @@ $(function() {
      });
      return false;
   });
-  $('li.cell-type span').on('click', function() {
-    var $checked_input = $(this).parent().find(':checked');
-    if ($checked_input.length) {
-      $checked_input.prop('checked', null);
-      return false;
-    }
-  });
-
-  /* hack against height:0 → height:auto not animating, this gets the height of
-   * the elements and dynamically generate css rules setting the max-height property
-   * to an appropriate height.
-   */
-  $('li.cell-type').each(function(i, x) {
-    $(this).attr('id', 'cell-type-'+i);
-    var h = $(this).find('ul').height();
-    $(this).find('ul').css('display', 'block').css('position', 'relative').css('visibility', 'visible');
-    var style = '<style>li#cell-type-'+i+' input ~ ul { max-height: 0px; }\n'+
-                       'li#cell-type-'+i+' input:checked ~ ul { max-height: '+h+'px; }</style>';
-    $(style).appendTo('head');
-  });
 
   $('div.cell').each(function(i, x) {
     $(this).attr('id', 'div-cell-'+i);
@@ -215,4 +196,12 @@ $(function() {
       data: {'img_orig': img_orig}
     });
   });
+  $('.manager-add-new-cell a').on('click', function() {
+    $(this).next().toggle();
+    return false;
+  });
+  $('.manager-add-new-cell button').on('click', function() {
+    window.location = $(this).parent('div').find('option:selected').data('add-url');
+    return false;
+  });
 });

combo/manager/templates/combo/page_view.html

@@ -46,23 +46,6 @@
 
 </div>
 
-<div id="available-cells">
-<h2>{% trans 'Available cells' %}</h2>
-<ul>
-{% for cell_type in cell_types %}
-<li class="cell-type">
-  <label><input type="radio" name="cell_type"/>
-    <span>{{ cell_type.name }}</span>
-    <ul>
-    {% for placeholder in placeholders %}
-      <li><button data-add-url="{% url 'combo-manager-page-add-cell' page_pk=object.id cell_type=cell_type.cell_type_str variant=cell_type.variant ph_key=placeholder.key %}">→ {{ placeholder.name }}</button></li>
-    {% endfor %}
-    </ul>
-  </label></li>
-{% endfor %}
-</ul>
-</div>
-
 {% if extra_placeholders %}
 <div id="extra-placeholders">
 <h2>Extra blocks</h2>
@@ -97,6 +80,28 @@
       </div>
       {% endfor %}
     </div>
+
+    <div class="manager-add-new-cell">
+     <a href="#">{% trans 'Add a new cell' %}</a>
+     <div style="display: none">
+     <select>
+        {% for label, celltypes in cell_type_groups %}
+        {% if label %}
+        <optgroup label="{{label}}">
+        {% endif %}
+                {% for cell_type in celltypes %}
+                <option data-add-url="{% url 'combo-manager-page-add-cell' page_pk=object.id cell_type=cell_type.cell_type_str variant=cell_type.variant ph_key=placeholder.key %}"
+                >{{cell_type.name}}</option>
+                {% endfor %}
+        {% if label %}
+        </optgroup>
+        {% endif %}
+        {% endfor %}
+     </select>
+     <button>ok</button>
+    </div>
+    </div>
+
   </div>
 {% endfor %}
 </div>

combo/manager/views.py

@@ -131,7 +131,19 @@ class PageView(DetailView):
 
     def get_context_data(self, **kwargs):
         context = super(PageView, self).get_context_data(**kwargs)
-        context['cell_types'] = CellBase.get_all_cell_types()
+        cell_type_groups = {}
+        for cell_type in CellBase.get_all_cell_types():
+            if not cell_type['group'] in cell_type_groups:
+                cell_type_groups[cell_type['group']] = []
+            cell_type_groups[cell_type['group']].append(cell_type)
+        for cell_group in cell_type_groups.values():
+            cell_group.sort(key=lambda x: (x.get('order'), x.get('name')))
+        if 'data' in cell_type_groups.keys():
+            cell_type_groups[''] = cell_type_groups.get('data')
+            del cell_type_groups['data']
+        context['cell_type_groups'] = cell_type_groups.items()
+        context['cell_type_groups'].sort(key=lambda x: x[0])
+
         cells = CellBase.get_cells(page_id=self.object.id)
         template = self.object.template_name
         placeholders = []

tests/test_manager.py

@@ -88,8 +88,8 @@ def test_add_edit_cell(app, admin_user):
     page.save()
     app = login(app)
     resp = app.get('/manage/pages/%s/' % page.id)
-    # click on first button link, this should add a text cell
-    resp = app.get(resp.html.find('button').get('data-add-url'))
+    # click on first option link, this should add a text cell
+    resp = app.get(resp.html.find('option').get('data-add-url'))
     assert resp.location == 'http://localhost:80/manage/pages/1/'
 
     cells = CellBase.get_cells(page_id=page.id)