Ajoute la modification du titre et du sous-titre d'une publication depuis une modale

assets/scss/layout/_content.scss

@@ -13,6 +13,60 @@
         }
     }
 
+    header {
+        >.title-block {
+            display: flex;
+            flex-direction: row;
+
+            margin-bottom: $length-10;
+
+            >.content-thumbnail-group {
+                flex-shrink: 0;
+                margin-right: $length-10;
+            }
+
+            >.content-title-and-subtitle-group {
+                width:100%;
+
+                padding-bottom: $length-4;
+
+                border-bottom: $length-1 solid $accent-500;
+
+                >.content-title-group {
+                    >.title {
+                        display: inline;
+                        vertical-align: middle;
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                    }
+
+                    >.edit-button {
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                }
+
+                >.content-subtitle-group {
+                    >.subtitle {
+                        display: inline;
+                        vertical-align: middle;
+                        margin: 0;
+                        padding: 0;
+                    }
+
+                    >.edit-button {
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                }
+
+                display: flex;
+                flex-direction: column;
+            }
+        }
+    }
+
     section > h2 {
         display: flex;
 
@@ -185,7 +239,7 @@
                 padding-right: $length-10;
             }
 
-            .illu img {
+            .content-thumbnail-group {
                 display: none;
             }
 
@@ -195,7 +249,8 @@
             .members,
             p,
             figure,
-            blockquote {
+            blockquote,
+            .title-block {
                 margin-left: $length-10;
                 margin-right: $length-10;
             }

assets/scss/layout/_main.scss

@@ -118,10 +118,7 @@
     }
 
     .license {
-        float: right;
-
         margin: 0;
-        margin-top: $length-10;
     }
 
     .subtitle {

assets/scss/pages/_content-editor.scss

@@ -3,7 +3,6 @@
   align-items: center;
 
   > :not(.edit-button) {
-    flex: 21;
     margin: 0;
   }
 }

templates/tutorialv2/includes/headline/header.part.html

@@ -1,21 +1,9 @@
-{% include "tutorialv2/includes/headline/licence.part.html" with licence=content.licence show_form=display_config.draft_actions.show_license_edit form=form_edit_license %}
-
-<h1 {% if show_thumbnail and content.image %}class="illu"{% endif %}>
-    {% if show_thumbnail and content.image %}
-        <img src="{{ content.image.physical.tutorial_illu.url }}" alt="" itemprop="thumbnailUrl">
-    {% endif %}
-    {{ title }}
-</h1>
-
-{% if subtitle %}
-    <h2 class="subtitle">
-        {{ subtitle }}
-    </h2>
-{% endif %}
+{% include "tutorialv2/includes/headline/title.part.html" with content=content title=title show_thumbnail=show_thumbnail show_form=display_config.draft_actions.show_title_edit form_title=form_edit_title form_subtitle=form_edit_subtitle %}
 
 <aside class="meta">
     <div class="meta-column">
         {% include "tutorialv2/includes/headline/authors.part.html" with db_content=db_content edit_authors=display_config.draft_actions.show_authors_management online_mode=display_config.online_config.enable_authors_online_mode %}
+        {% include "tutorialv2/includes/headline/licence.part.html" with licence=content.licence show_form=display_config.draft_actions.show_license_edit form=form_edit_license %}
         {% include "tutorialv2/includes/headline/contributions.part.html" %}
         {% include "tutorialv2/includes/headline/categories.part.html" %}
         {% include "tutorialv2/includes/headline/goals.part.html" with goals=publishablecontent.goals.all %}

templates/tutorialv2/includes/headline/title.part.html

@@ -0,0 +1,43 @@
+{% load i18n %}
+{% load crispy_forms_tags %}
+
+<div class="title-block">
+    {% if show_thumbnail and content.image %}
+        <div class="content-thumbnail-group">
+            <img class="thumbnail" src="{{ content.image.physical.tutorial_illu.url }}" alt="" itemprop="thumbnailUrl">
+        </div>
+    {% endif %}
+    <div class="content-title-and-subtitle-group">
+        <div class="content-title-group">
+            {% spaceless %}
+            <h1 class="title">{{ title }}</h1>
+            {% if show_form %}
+                <a href="#edit-title" class="open-modal edit-button" title="{% trans "Modifier le titre" %}">
+                    <span class="visuallyhidden">{% trans "Modifier le titre" %}</span>
+                </a>
+                {% crispy form_title %}
+            {% endif %}
+            {% endspaceless %}
+        </div>
+
+        <div class="content-subtitle-group">
+            {% spaceless %}
+            {% if show_form %}
+                {% if subtitle %}
+                    <p class="subtitle">{{ subtitle }}</p>
+                    <a href="#edit-subtitle" class="open-modal edit-button" title="{% trans "Modifier le sous-titre" %}">
+                        <span class="visuallyhidden">{% trans "Modifier le sous-titre" %}</span>
+                    </a>
+                {% else %}
+                    <a href="#edit-subtitle" class="open-modal" title="{% trans "Modifier le sous-titre" %}">
+                        {% trans "Ajoutez un sous-titre !" %}
+                    </a>
+                {% endif %}
+                {% crispy form_subtitle %}
+            {% else %}
+                <p class="subtitle">{{ subtitle }}</p>
+            {% endif %}
+            {% endspaceless %}
+        </div>
+    </div>
+</div>

zds/tutorialv2/forms.py

@@ -22,6 +22,8 @@ class FormWithTitle(forms.Form):
         label=_("Titre"), max_length=PublishableContent._meta.get_field("title").max_length, required=False
     )
 
+    error_messages = {"bad_slug": _("Le titre « {} » n'est pas autorisé, car son slug est invalide !")}
+
     def clean(self):
         cleaned_data = super().clean()
 
@@ -33,10 +35,8 @@ def clean(self):
 
         try:
             slugify_raise_on_invalid(title)
-        except InvalidSlugError as e:
-            self._errors["title"] = self.error_class(
-                [_("Ce titre n'est pas autorisé, son slug est invalide {} !").format(e)]
-            )
+        except InvalidSlugError:
+            self._errors["title"] = self.error_class([self.error_messages["bad_slug"].format(title)])
 
         return cleaned_data
 
@@ -197,6 +197,36 @@ def clean(self):
         return cleaned_data
 
 
+class EditContentForm(ContentForm):
+    title = None
+    description = None
+    type = None
+
+    def _create_layout(self):
+        self.helper.layout = Layout(
+            IncludeEasyMDE(),
+            Field("image"),
+            Field("introduction", css_class="md-editor preview-source"),
+            StrictButton(_("Aperçu"), type="preview", name="preview", css_class="btn btn-grey preview-btn"),
+            HTML(
+                '{% if form.introduction.value %}{% include "misc/preview.part.html" \
+                with text=form.introduction.value %}{% endif %}'
+            ),
+            Field("conclusion", css_class="md-editor preview-source"),
+            StrictButton(_("Aperçu"), type="preview", name="preview", css_class="btn btn-grey preview-btn"),
+            HTML(
+                '{% if form.conclusion.value %}{% include "misc/preview.part.html" \
+                with text=form.conclusion.value %}{% endif %}'
+            ),
+            Field("last_hash"),
+            Field("source"),
+            Field("subcategory", template="crispy/checkboxselectmultiple.html"),
+        )
+
+        self.helper.layout.append(Field("msg_commit"))
+        self.helper.layout.append(StrictButton("Valider", type="submit"))
+
+
 class ExtractForm(FormWithTitle):
     text = forms.CharField(
         label=_("Texte"),

zds/tutorialv2/tests/factories.py

@@ -85,7 +85,7 @@ def _generate(cls, create, attrs):
         conclusion_content = attrs.pop("conclusion", text)
 
         publishable_content = super()._generate(create, attrs)
-        publishable_content.gallery = GalleryFactory()
+        publishable_content.gallery = GalleryFactory(title=publishable_content.title)
         publishable_content.licence = licence
         for auth in auths:
             publishable_content.authors.add(auth)

zds/tutorialv2/tests/tests_opinion_views.py

@@ -123,20 +123,9 @@ def test_publish_content_change_title_before_watchdog(self, opinions_management)
         self.assertEqual(opinion.public_version.sha_public, opinion_draft.current_version)
 
         # Change the title:
-        random = "Whatever, we don't care about the details"
         result = self.client.post(
-            reverse("content:edit", args=[opinion.pk, opinion.slug]),
-            {
-                "title": "{} ({})".format(opinion.title, "modified"),
-                "description": random,
-                "introduction": random,
-                "conclusion": random,
-                "type": "OPINION",
-                "licence": opinion.licence.pk,
-                "subcategory": opinion.subcategory.first().pk,
-                "last_hash": opinion.load_version().compute_hash(),
-                "image": (settings.BASE_DIR / "fixtures" / "logo.png").open("rb"),
-            },
+            reverse("content:edit-title", args=[opinion.pk]),
+            {"title": f"{opinion.title} (modified)"},
             follow=False,
         )
         self.assertEqual(result.status_code, 302)

zds/tutorialv2/tests/tests_views/tests_content.py

@@ -303,8 +303,6 @@ def test_basic_tutorial_workflow(self):
         result = self.client.post(
             reverse("content:edit", args=[pk, slug]),
             {
-                "title": random,
-                "description": random,
                 "introduction": random,
                 "conclusion": random,
                 "type": "TUTORIAL",
@@ -319,17 +317,11 @@ def test_basic_tutorial_workflow(self):
         self.assertEqual(Image.objects.filter(gallery__pk=tuto.gallery.pk).count(), 2)  # new icon is uploaded
 
         tuto = PublishableContent.objects.get(pk=pk)
-        self.assertEqual(tuto.title, random)
-        self.assertEqual(tuto.description, random)
         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.licence, None)
-        self.assertNotEqual(versioned.slug, slug)
-
-        slug = tuto.slug  # make the title change also change the slug !!
 
         # preview container
         result = self.client.post(
@@ -632,7 +624,6 @@ def test_history_navigation(self):
         self.client.force_login(self.user_author)
 
         tuto = PublishableContent.objects.get(pk=self.tuto.pk)
-        versioned = tuto.load_version()
 
         # check access
         result = self.client.get(reverse("content:view", args=[tuto.pk, tuto.slug]), follow=False)
@@ -664,21 +655,9 @@ def test_history_navigation(self):
         old_slug_tuto = tuto.slug
         version_1 = tuto.sha_draft  # 'version 1' is the one before any change
 
-        new_licence = LicenceFactory()
-        random = "Pâques, c'est bientôt?"
-
         result = self.client.post(
-            reverse("content:edit", args=[tuto.pk, tuto.slug]),
-            {
-                "title": random,
-                "description": random,
-                "introduction": random,
-                "conclusion": random,
-                "type": "TUTORIAL",
-                "licence": new_licence.pk,
-                "subcategory": self.subcategory.pk,
-                "last_hash": versioned.compute_hash(),
-            },
+            reverse("content:edit-title", args=[tuto.pk]),
+            {"title": "Pâques, c'est bientôt?"},
             follow=False,
         )
         self.assertEqual(result.status_code, 302)
@@ -744,6 +723,7 @@ def test_history_navigation(self):
         # edit container:
         old_slug_part = self.part1.slug
         part1 = tuto.load_version().children[0]
+        random = "Un, deux, trois, je vais dans les bois"
         result = self.client.post(
             reverse(
                 "content:edit-container", kwargs={"pk": tuto.pk, "slug": tuto.slug, "container_slug": self.part1.slug}

zds/tutorialv2/tests/tests_views/tests_edgecases.py

@@ -36,18 +36,8 @@ def test_no_bad_slug_renaming_on_rename(self):
         # login with author
         self.client.force_login(self.author.user)
         result = self.client.post(
-            reverse("content:edit", args=[opinion.pk, opinion.slug]),
-            {
-                "title": "new title",
-                "description": "subtitle",
-                "introduction": "introduction",
-                "conclusion": "conclusion",
-                "type": "OPINION",
-                "licence": self.licence.pk,
-                "subcategory": self.subcategory.pk,
-                "last_hash": opinion.load_version().compute_hash(),
-                "image": (settings.BASE_DIR / "fixtures" / "logo.png").open("rb"),
-            },
+            reverse("content:edit-title", args=[opinion.pk]),
+            {"title": "new title"},
             follow=False,
         )
         self.assertEqual(result.status_code, 302)
@@ -56,18 +46,8 @@ def test_no_bad_slug_renaming_on_rename(self):
         result = self.client.get(article.get_absolute_url())
         self.assertEqual(200, result.status_code)
         result = self.client.post(
-            reverse("content:edit", args=[article.pk, article.slug]),
-            {
-                "title": "title",
-                "description": "subtitle",
-                "introduction": "introduction",
-                "conclusion": "conclusion",
-                "type": "ARTICLE",
-                "licence": self.licence.pk,
-                "subcategory": self.subcategory.pk,
-                "last_hash": article.load_version().compute_hash(),
-                "image": (settings.BASE_DIR / "fixtures" / "logo.png").open("rb"),
-            },
+            reverse("content:edit-title", args=[article.pk]),
+            {"title": "title"},
             follow=True,
         )
         self.assertEqual(200, result.status_code)