Update tunit editor

Now with fancy new radio-buttons.

assets/css/app.css

@@ -3,4 +3,5 @@
 @import "tailwindcss/utilities";
 
 /* This file is for your main application CSS */
-@import "./article.css"
+@import "./article.css";
+@import "./tunit-editor.css";

assets/css/tunit-editor.css

@@ -0,0 +1,3 @@
+.tunit-status input[type="radio"]:checked+label {
+  @apply opacity-100 text-gray-100
+}

lib/outlook_web/components/tunit_editor_component.ex

@@ -3,49 +3,48 @@ defmodule OutlookWeb.TunitEditorComponent do
   use Phoenix.Component
 
   import OutlookWeb.CoreComponents
-  # alias Phoenix.LiveView.JS
-
-  defp statuses do
-    [ {:untranslated, "bg-red-800 col-span-3 disabled:border-gray-600"},
-      {:passable, "bg-amber-500 col-span-2 disabled:border-gray-600"},
-      {:done, "bg-green-700 disabled:border-gray-600"} ]
-  end
 
   attr :current_tunit, :any
   attr :target, :string
 
   def tunit_editor(assigns) do
-    assigns = unless assigns.current_tunit do
-      assigns
-      |> assign(
-        current_tunit: %Outlook.InternalTree.TranslationUnit{},
-        disabled: true
-      )
-    else
-      assigns |> assign(disabled: false)
-    end
     ~H"""
-      <div id="translation-unit-editor" phx-nohook="tunit_editor">
-        <%!-- <div class="h-48 p-2 border border-slate-500 rounded" contenteditable phx-no-change="update_current_tunit">
-          <%= @current_tunit.content |> raw %>
-        </div> --%>
-        <form phx-change="update_current_tunit" phx-target={@target} disabled={@disabled}>
-          <textarea name="content" class="h-48 rounded border-slate-500 resize-none w-full"><%= @current_tunit.content %></textarea>
-        </form>
-      </div>
-      <div class="grid grid-cols-scheise gap-3">
-        <div :for={{status, class} <- statuses()}>
-          <.status_button class={class} status={status} target={@target} disabled={@current_tunit.status == status}></.status_button>
-        </div>
+    <div id="translation-unit-editor" phx-nohook="tunit_editor">
+      <%!-- <div class="h-48 p-2 border border-slate-500 rounded" contenteditable phx-no-change="update_current_tunit">
+        <%= @current_tunit.content |> raw %>
+      </div> --%>
+      <form phx-change="update_current_tunit" phx-target={@target}>
+        <textarea name="content" class="h-48 rounded border-slate-500 resize-none w-full"
+          disabled={!@current_tunit.status}><%= @current_tunit.content %></textarea>
+      </form>
+      <.status_selector target={@target} disabled={!@current_tunit.status} tunit={@current_tunit} />
+    </div>
+    """
+  end
+
+  defp statuses() do
+    [ {:untranslated, "bg-red-800"},
+      {:passable, "bg-amber-500"},
+      {:done, "bg-green-700"} ]
+  end
+
+  defp status_selector(assigns) do
+    ~H"""
+    <form phx-change="tunit_status" phx-target={@target}>
+      <div class="tunit-status flex justify-center">
+        <.status_button :for={{status, class} <- statuses()} forstatus={status}
+          status={@tunit.status} class={class} disabled={@disabled} />
       </div>
+    </form>
     """
   end
 
   defp status_button(assigns) do
     ~H"""
-      <.link  phx-click="tunit_status" phx-value-status={@status} phx-target={@target}>
-        <.button class={@class} title="select translation status" disabled={@disabled}><%= @status |> to_string %></.button>
-      </.link>
+    <input type="radio" name="status" id={@forstatus} value={@forstatus} class="hidden"
+      disabled={@disabled} checked={@status == @forstatus}>
+    <label for={@forstatus} title="change translation status"
+      class={[@class, "p-2 px-4 mx-4 text-center opacity-30 rounded-lg"]}><%= @forstatus %></label>
     """
   end
 end

lib/outlook_web/live/translation_live/form_component.ex

@@ -27,7 +27,6 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
               options={Application.get_env(:outlook,:deepl)[:target_langs]} />
           <.input field={{f, :title}} type="text" label="title" />
           <.input field={{f, :teaser}} type="textarea" label="teaser" class="h-28" />
-          <%!-- <.input field={{f, :content}} type="text" label="content" /> --%>
           <.input field={{f, :date}} type="datetime-local" label="date" />
           <div class="flex items-center justify-between">
             <.input field={{f, :public}} type="checkbox" label="public" />
@@ -56,7 +55,7 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
     {:ok,
      socket
      |> assign(assigns)
-     |> assign(:current_tunit, nil)
+     |> assign(:current_tunit, %TranslationUnit{status: nil})
      |> assign(:changeset, changeset)
      |> assign_article_tree(translation)
      |> assign(:deepl_progress, nil)}

lib/outlook_web/live/translation_live/new_edit.ex

@@ -50,6 +50,7 @@ defmodule OutlookWeb.TranslationLive.NewEdit do
 
   defp common_assigns(socket) do
     assign(socket, form_cmpnt_id: @form_cmpnt_id)
+    |> assign(:page_title, page_title(socket.assigns.live_action))
   end
 
   @impl true