Story #2111: Form post wisiwyg

.gitignore

@@ -101,6 +101,8 @@ __pypackages__/
 
 # Celery stuff
 celerybeat-schedule
+celerybeat-schedule-shm
+celerybeat-schedule-wal
 celerybeat.pid
 celerybeat-schedule*
 

core/views.py

@@ -1170,6 +1170,12 @@ def get_context_data(self, **kwargs):
                 {"value": "networking", "label": "Networking"},
             ]
         )
+        context["demo_dropdown_options"] = [
+            {"value": "blog", "label": "Blog"},
+            {"value": "link", "label": "Link"},
+            {"value": "news", "label": "News"},
+            {"value": "video", "label": "Video"},
+        ]
         context["create_account_card_preview_url"] = (
             f"{settings.STATIC_URL}img/checker.png"
         )

news/views.py

@@ -12,7 +12,7 @@
 from django.template.defaultfilters import date as datefilter
 from django.urls import reverse_lazy
 from django.utils.http import url_has_allowed_host_and_scheme
-from django.utils.timezone import now
+from django.utils.timezone import localtime, now
 from django.utils.translation import gettext as _
 from django.views.generic import (
     CreateView,
@@ -25,6 +25,7 @@
 )
 from django.views.generic.detail import SingleObjectMixin
 from itsdangerous import URLSafeTimedSerializer, SignatureExpired, BadData
+from waffle import flag_is_active
 
 from .acl import can_approve
 from .constants import NEWS_APPROVAL_SALT, MAGIC_LINK_EXPIRATION
@@ -286,7 +287,8 @@ def item_params(view):
 
     def dispatch(self, request, *args, **kwargs):
         """User must have a profile photo and a name to post an entry."""
-        if request.user.is_authenticated:
+        # With v3 flag, allow viewing the Create Post page for testing; backend may still require profile on submit
+        if not flag_is_active(request, "v3") and request.user.is_authenticated:
             missing_data = []
 
             if not request.user.display_name:
@@ -303,6 +305,11 @@ def dispatch(self, request, *args, **kwargs):
 
         return super().dispatch(request, *args, **kwargs)
 
+    def get_template_names(self):
+        if flag_is_active(self.request, "v3"):
+            return ["news/create_v3.html"]
+        return ["news/create.html"]
+
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         items = [
@@ -315,6 +322,19 @@ def get_context_data(self, **kwargs):
         if can_approve(self.request.user):
             items.append(self.item_params(PollCreateView))
         context["items"] = items
+        if flag_is_active(self.request, "v3"):
+            context["post_type_options"] = [
+                {"value": "blog", "label": _("Blog")},
+                {"value": "news", "label": _("News")},
+                {"value": "video", "label": _("Video")},
+                {"value": "link", "label": _("Link")},
+            ]
+            context["related_libraries_options"] = [{"value": "", "label": _("Select")}]
+            context["publish_at_initial"] = localtime(now()).strftime("%Y-%m-%dT%H:%M")
+            context["blogpost_create_url"] = reverse_lazy("news-blogpost-create")
+            context["news_create_url"] = reverse_lazy("news-news-create")
+            context["link_create_url"] = reverse_lazy("news-link-create")
+            context["video_create_url"] = reverse_lazy("news-video-create")
         return context
 
 

static/css/components.css

@@ -70,3 +70,7 @@ html.dark {
 @apply py-3 px-8 text-sm text-base font-medium text-white capitalize rounded-lg border md:py-1 md:px-4 md:text-lg text-orange border-orange dark:bg-slate dark:hover:bg-charcoal dark:text-white hover:drop-shadow-md
 
 }
+
+.v3-background{
+    background-color: var(--color-bg-primary);
+}

static/css/v3/components.css

@@ -9,6 +9,8 @@
 @import "./header.css";
 @import "./footer.css";
 @import "./forms.css";
+@import "./create-post-page.css";
+@import "./inputs-page.css";
 @import "./testimonial-card.css";
 @import "./card.css";
 @import "./event-cards.css";

static/css/v3/create-post-page.css

@@ -0,0 +1,83 @@
+/**
+ * Create post page layout (Django).
+ * BEM: .create-post-wrapper, .create-post-page, .create-post-page__*
+ */
+
+.create-post-wrapper {
+  width: 100%;
+  max-width: 694px;
+}
+
+.create-post-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xl);
+  align-items: stretch;
+  width: 100%;
+  max-width: 100%;
+}
+
+.create-post-page__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-large, 16px);
+}
+
+.create-post-page__title {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-2xl, 40px);
+  font-weight: var(--font-weight-medium, 500);
+  line-height: 1;
+  letter-spacing: -1px;
+  color: var(--color-text-primary, #050816);
+  margin: 0;
+}
+
+.create-post-page__subtitle {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-large, 24px);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: 1.33;
+  letter-spacing: -1px;
+  color: var(--color-text-secondary, #585a64);
+  padding: 0;
+}
+
+.create-post-page__card {
+  background: var(--color-surface-weak, #fff);
+  border: 1px solid var(--color-stroke-weak, rgba(5, 8, 22, 0.1));
+  border-radius: 16px;
+  padding: var(--space-large, 16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xlarge, 24px);
+}
+
+.create-post-page__link-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xlarge, 24px);
+}
+
+.create-post-page__actions {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-default, 8px);
+  flex-wrap: wrap;
+}
+
+.create-post-page__actions .btn {
+  flex: 1 1 0;
+  min-width: 128px;
+  justify-content: center;
+  text-decoration: none;
+}
+
+@media (max-width: 480px) {
+  .create-post-page__actions {
+    flex-direction: column;
+  }
+  .create-post-page__actions .btn {
+    min-width: 100%;
+  }
+}