Ajoute la modification "in place" du titre et du sous-titre d'un contenu

assets/js/inplace-fields.js

@@ -0,0 +1,27 @@
+/* ===== Zeste de Savoir ==================================================== */
+/*  Show and hide in-place forms                                              */
+/* ========================================================================== */
+
+(function($) {
+  'use strict'
+
+  /* Edit title */
+  function toggleDisplayTitle(e) {
+    $('#title-show').toggleClass('hidden')
+    $('#title-edit').toggleClass('hidden')
+    e.preventDefault()
+  }
+
+  $('#show-title-edit').on('click', toggleDisplayTitle)
+  $('#hide-title-edit').on('click', toggleDisplayTitle)
+
+  /* Edit subtitle */
+  function toggleDisplaySubtitle(e) {
+    $('#subtitle-show').toggleClass('hidden')
+    $('#subtitle-edit').toggleClass('hidden')
+    e.preventDefault()
+  }
+
+  $('#show-subtitle-edit').on('click', toggleDisplaySubtitle)
+  $('#hide-subtitle-edit').on('click', toggleDisplaySubtitle)
+})(jQuery)

assets/scss/main.scss

@@ -92,6 +92,7 @@
 @import "pages/stats";
 @import "pages/tutorial-help";
 @import "pages/tutorial-history";
+@import "pages/content-edit";
 
 /*-------------------------
 10. High pixel ratio (retina)

assets/scss/pages/_content-edit.scss

@@ -0,0 +1,80 @@
+#show-title-edit, #show-subtitle-edit {
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+#title-edit, #subtitle-edit {
+    height: 100%;
+
+    form {
+        box-sizing: border-box;
+        height: 100%;
+    }
+
+    .control-label {
+        display: none;
+    }
+
+    .control-group, .controls {
+        display: inline;
+        box-sizing: border-box;
+        width: 50%;
+    }
+
+    input {
+        box-sizing: border-box;
+        display: inline-block;
+        vertical-align: middle;
+        width: 50%;
+        margin: 0;
+        padding: 0;
+        font-weight: normal;
+    }
+
+    button.btn, button.btn-submit, button.link, button {
+        box-sizing: border-box;
+        display: inline-block;
+        vertical-align: middle;
+        height: 100%;
+        float: none;
+        cursor: pointer;
+        margin: 0 5px 0 0;
+    }
+
+    button.link {
+            box-sizing: border-box;
+        color: lighten($color-primary, 20%);
+        transition: color $transition-duration ease, text-decoration $transition-duration ease;
+        text-decoration: underline;
+
+        &:hover {
+            color: darken($color-secondary, 15%);
+            text-decoration: none;
+        }
+    }
+}
+
+
+#title-edit {
+    input {
+        height: 3.8rem;
+        color: $color-primary;
+    }
+
+    button.btn, button.btn-submit, button.link, button {
+        font-size: 1.5rem;
+        line-height: 3.8rem;
+    }
+}
+
+#subtitle-edit {
+    input {
+        height: 2.3rem;
+        color: #999;
+    }
+
+    button.btn, button.btn-submit, button.link, button {
+        font-size: 1.5rem;
+        line-height: 2.3rem;
+    }
+}

templates/tutorialv2/view/content.html

@@ -34,17 +34,37 @@
     {% crispy form_edit_license %}
 
     <h1 {% if content.image %}class="illu"{% endif %}>
-        {% if content.image %}
-            <img src="{{ content.image.physical.tutorial_illu.url }}" alt="">
-        {% endif %}
-        {{ content.title }}
+        <div class="title-show" id="title-show">
+            {% if content.image %}
+                <img src="{{ content.image.physical.tutorial_illu.url }}" alt="">
+            {% endif %}
+            {{ content.title }}
+            <button id="show-title-edit" class="link btn-inline">{% trans "Modifier le titre" %}</button>
+        </div>
+
+        <div class="title-edit hidden" id="title-edit">
+            {% spaceless %}{% crispy form_edit_title %}{% endspaceless %}
+        </div>
     </h1>
 
-    {% if content.description %}
-        <h2 class="subtitle">
-            {{ content.description }}
-        </h2>
-    {% endif %}
+    <h2 class="subtitle">
+        <div class="subtitle-show" id="subtitle-show">
+            {% if content.description %}
+                {{ content.description }}
+            {% endif %}
+            <button id="show-subtitle-edit" class="link btn-inline">
+                {% if content.description %}
+                    {% trans "Modifier le sous-titre" %}
+                {% else %}
+                    {% trans "Ajouter un sous-titre" %}
+                {% endif %}
+            </button>
+        </div>
+        <div class="title-subtitle hidden" id="subtitle-edit">
+            {% spaceless %}{% crispy form_edit_subtitle %}{% endspaceless %}
+        </div>
+    </h2>
+
 
     {% if can_edit %}
         {% include 'tutorialv2/includes/tags_authors.part.html' with content=content add_author=True online=False %}

zds/tutorialv2/forms.py

@@ -245,13 +245,6 @@ def __init__(self, *args, **kwargs):
 
 
 class ContentForm(ContainerForm):
-
-    description = forms.CharField(
-        label=_('Description'),
-        max_length=PublishableContent._meta.get_field('description').max_length,
-        required=False,
-    )
-
     tags = forms.CharField(
         label=_('Tag(s) séparés par une virgule (exemple: python,django,web)'),
         max_length=64,
@@ -311,7 +304,6 @@ def _create_layout(self, hide_help):
         self.helper.layout = Layout(
             IncludeEasyMDE(),
             Field('title'),
-            Field('description'),
             Field('tags'),
             Field('type'),
             Field('image'),
@@ -414,6 +406,70 @@ def _create_layout(self):
         )
 
 
+class EditContentTitleForm(forms.Form):
+    title = forms.CharField(
+        label=_('Titre'),
+        max_length=PublishableContent._meta.get_field('title').max_length,
+        required=True,
+        error_messages={'required': _('Le titre ne peut pas être vide.'),
+                        'invalid_slug': _("Ce titre n'est pas autorisé, son slug est invalide !"),
+                        'max_length': _('Ce titre est trop long.')}
+    )
+
+    def __init__(self, content, *args, **kwargs):
+        super(forms.Form, self).__init__(*args, **kwargs)
+
+        self.helper = FormHelper()
+        self.helper.form_class = 'content-wrapper'
+        self.helper.form_method = 'post'
+        self.helper.form_id = 'title-edit-form'
+        self.helper.form_action = reverse('content:edit-title', kwargs={'pk': content.pk})
+        self.previous_page_url = reverse('content:view', kwargs={'pk': content.pk, 'slug': content.slug})
+        self._create_layout()
+
+    def _create_layout(self):
+        self.helper.layout = Layout(
+            Field('title'),
+            StrictButton(_('Enregistrer'), type='submit', css_class='btn-submit'),
+            StrictButton(_('Annuler'), css_class='link', id='hide-title-edit')
+        )
+
+    def clean(self):
+        cleaned_data = super(EditContentTitleForm, self).clean()
+        try:
+            slugify_raise_on_invalid(cleaned_data.get('title'))
+        except InvalidSlugError:
+            self.add_error('title', self.declared_fields['title'].error_messages['invalid_slug'])
+        return cleaned_data
+
+
+class EditContentSubtitleForm(forms.Form):
+    subtitle = forms.CharField(
+        label=_('Sous-titre'),
+        max_length=PublishableContent._meta.get_field('description').max_length,
+        required=False,
+        error_messages={'max_length': _('Le sous-titre est trop long.')}
+    )
+
+    def __init__(self, content, *args, **kwargs):
+        super(forms.Form, self).__init__(*args, **kwargs)
+
+        self.helper = FormHelper()
+        self.helper.form_class = 'content-wrapper'
+        self.helper.form_method = 'post'
+        self.helper.form_id = 'subtitle-edit-form'
+        self.helper.form_action = reverse('content:edit-subtitle', kwargs={'pk': content.pk})
+        self.previous_page_url = reverse('content:view', kwargs={'pk': content.pk, 'slug': content.slug})
+        self._create_layout()
+
+    def _create_layout(self):
+        self.helper.layout = Layout(
+            Field('subtitle'),
+            StrictButton(_('Enregistrer'), type='submit', css_class='btn-submit'),
+            StrictButton(_('Annuler'), css_class='link', id='hide-subtitle-edit')
+        )
+
+
 class ExtractForm(FormWithTitle):
 
     text = forms.CharField(

zds/tutorialv2/tests/tests_models.py

@@ -451,7 +451,6 @@ def test_publication_and_attributes_consistency(self):
             True)
         self.client.post(reverse('content:edit', args=[article.pk, article.slug]), {
             'title': old_title + 'bla',
-            'description': old_description + 'bla',
             'type': 'ARTICLE',
             'licence': article.licence.pk,
             'subcategory': SubCategoryFactory().pk,

zds/tutorialv2/tests/tests_views/tests_content.py

@@ -265,7 +265,6 @@ def test_basic_tutorial_workflow(self):
             reverse('content:create-tutorial'),
             {
                 'title': title,
-                'description': description,
                 'introduction': intro,
                 'conclusion': conclusion,
                 'type': 'TUTORIAL',
@@ -310,7 +309,6 @@ def test_basic_tutorial_workflow(self):
             reverse('content:edit', args=[pk, slug]),
             {
                 'title': random,
-                'description': random,
                 'introduction': random,
                 'conclusion': random,
                 'type': 'TUTORIAL',
@@ -325,12 +323,12 @@ def test_basic_tutorial_workflow(self):
 
         tuto = PublishableContent.objects.get(pk=pk)
         self.assertEqual(tuto.title, random)
-        self.assertEqual(tuto.description, random)
+        self.assertEqual(tuto.description, '')
         self.assertEqual(tuto.licence, None)
         versioned = tuto.load_version()
         self.assertEqual(versioned.get_introduction(), random)
         self.assertEqual(versioned.get_conclusion(), random)
-        self.assertEqual(versioned.description, random)
+        self.assertEqual(versioned.description, '')
         self.assertEqual(versioned.licence, None)
         self.assertNotEqual(versioned.slug, slug)
 
@@ -991,7 +989,6 @@ def test_history_navigation(self):
             reverse('content:edit', args=[tuto.pk, tuto.slug]),
             {
                 'title': random,
-                'description': random,
                 'introduction': random,
                 'conclusion': random,
                 'type': 'TUTORIAL',
@@ -1334,7 +1331,6 @@ def test_export_content(self):
             reverse('content:create-tutorial'),
             {
                 'title': given_title,
-                'description': some_text,
                 'introduction': some_text,
                 'conclusion': some_text,
                 'type': 'TUTORIAL',
@@ -1509,7 +1505,6 @@ def test_import_create_content(self):
             reverse('content:create-tutorial'),
             {
                 'title': given_title,
-                'description': some_text,
                 'introduction': some_text,
                 'conclusion': some_text,
                 'type': 'TUTORIAL',
@@ -1644,7 +1639,6 @@ def test_import_in_existing_content(self):
             reverse('content:create-tutorial'),
             {
                 'title': given_title,
-                'description': some_text,
                 'introduction': some_text,
                 'conclusion': some_text,
                 'type': 'TUTORIAL',
@@ -2079,7 +2073,6 @@ def test_validation_subscription(self):
             reverse('content:edit', args=[tuto.pk, tuto.slug]),
             {
                 'title': 'new title so that everything explode',
-                'description': tuto.description,
                 'introduction': tuto.load_version().get_introduction(),
                 'conclusion': tuto.load_version().get_conclusion(),
                 'type': 'ARTICLE',
@@ -3281,7 +3274,6 @@ def test_concurent_edition(self):
             reverse('content:edit', args=[tuto.pk, tuto.slug]),
             {
                 'title': tuto.title,
-                'description': tuto.description,
                 'introduction': random,
                 'conclusion': random,
                 'type': 'TUTORIAL',
@@ -3307,7 +3299,6 @@ def test_concurent_edition(self):
             reverse('content:edit', args=[tuto.pk, tuto.slug]),
             {
                 'title': tuto.title,
-                'description': tuto.description,
                 'introduction': random,
                 'conclusion': random,
                 'type': 'TUTORIAL',
@@ -4049,7 +4040,6 @@ def test_no_invalid_titles(self):
 
         dic = {
             'title': '',
-            'description': 'une description',
             'introduction': 'une intro',
             'conclusion': 'une conclusion',
             'type': 'TUTORIAL',
@@ -5419,7 +5409,6 @@ def test_republish_with_different_slug(self):
             reverse('content:edit', args=[tuto.pk, tuto.slug]),
             {
                 'title': '{} ({})'.format(self.tuto.title, 'modified'),  # will change slug
-                'description': random,
                 'introduction': random,
                 'conclusion': random,
                 'type': 'TUTORIAL',
@@ -5538,7 +5527,6 @@ def test_validation_list_has_good_title(self):
             reverse('content:edit', args=[tuto.pk, tuto.slug]),
             {
                 'title': new_title,
-                'description': tuto.description,
                 'introduction': 'a',
                 'conclusion': 'b',
                 'type': 'TUTORIAL',
@@ -5590,7 +5578,6 @@ def test_unpublish_with_title_change(self):
             reverse('content:edit', args=[article.pk, article.slug]),
             {
                 'title': 'new title so that everything explode',
-                'description': article.description,
                 'introduction': article.load_version().get_introduction(),
                 'conclusion': article.load_version().get_conclusion(),
                 'type': 'ARTICLE',
@@ -5654,7 +5641,6 @@ def test_validation_history(self):
             reverse('content:edit', args=[published.pk, published.slug]),
             {
                 'title': published.title,
-                'description': published.description,
                 'introduction': 'crappy crap',
                 'conclusion': 'crappy crap',
                 'type': 'TUTORIAL',
@@ -5743,7 +5729,6 @@ def test_ask_validation_update(self):
             reverse('content:edit', args=[content_draft.pk, content_draft.slug]),
             {
                 'title': content_draft.title + '2',
-                'description': content_draft.description,
                 'introduction': content_draft.introduction,
                 'conclusion': content_draft.conclusion,
                 'type': content_draft.type,