Merge pull request #514 from eyra/context-menu

Context menu
eyra · Dec 7, 2023 · e45458a · e45458a
2 parents 59ac2de + 5c7907f
commit e45458a
Show file tree

Hide file tree

Showing 24 changed files with 286 additions and 32 deletions.
diff --git a/core/assets/tailwind.config.js b/core/assets/tailwind.config.js
@@ -18,11 +18,6 @@ module.exports = {
     { pattern: /border-./ },
   ],
   theme: {
-    boxShadow: {
-      top4px: "inset 0 4px 0 0 rgba(0, 0, 0, 0.15)",
-      top2px: "inset 0 2px 0 0 rgba(0, 0, 0, 0.15)",
-      "2xl": "0 5px 20px 0px rgba(0, 0, 0, 0.08)",
-    },
     colors: {
       primary: "#4272EF",
       primarylight: "#E3EAFD",
@@ -49,6 +44,11 @@ module.exports = {
       surfconext: "#4DB2CF",
     },
     extend: {
+      boxShadow: {
+        top4px: "inset 0 4px 0 0 rgba(0, 0, 0, 0.15);",
+        top2px: "inset 0 2px 0 0 rgba(0, 0, 0, 0.15;);",
+        floating: "0px 5px 20px 0px rgba(0, 0, 0, 0.10);",
+      },
       transitionDuration: {
         2000: "2000ms",
       },

diff --git a/core/frameworks/pixel/components/radio_group.ex b/core/frameworks/pixel/components/radio_group.ex
@@ -42,7 +42,7 @@ defmodule Frameworks.Pixel.RadioGroup do
   @impl true
   def render(assigns) do
     ~H"""
-    <div>
+    <div class="ml-[6px]">
       <.form id={"#{@id}_form"} for={@form} phx-change="change" phx-target={@myself}>
         <div class="flex flex-row gap-8">
           <%= for item <- @items do %>

diff --git a/core/frameworks/pixel/components/takeover.ex b/core/frameworks/pixel/components/takeover.ex
@@ -0,0 +1,36 @@
+defmodule Frameworks.Pixel.Takeover do
+  use CoreWeb, :html
+
+  alias Frameworks.Pixel.Button
+
+  attr(:title, :string, required: true)
+  attr(:target, :any, required: true)
+
+  slot(:inner_block)
+
+  def takeover(%{target: target} = assigns) do
+    close_button = %{
+      action: %{type: :send, event: "takeover_close", target: target},
+      face: %{type: :icon, icon: :close}
+    }
+
+    assigns = assign(assigns, close_button: close_button)
+
+    ~H"""
+    <div class="px-12 pt-6 pb-12 bg-white shadow-floating rounded relative">
+      <div class="sticky top-10">
+        <div class="flex flex-row">
+          <div class="flex-grow" />
+          <Button.dynamic {@close_button} />
+        </div>
+      </div>
+      <div class="flex flex-col">
+        <Text.title2><%= @title %></Text.title2>
+        <div class="">
+          <%= render_slot(@inner_block) %>
+        </div>
+      </div>
+    </div>
+    """
+  end
+end
diff --git a/core/lib/core_web/controllers/layouts/error.html.heex b/core/lib/core_web/controllers/layouts/error.html.heex
@@ -16,7 +16,7 @@
     <script src="/js/app.js" defer></script>
   </head>
   <body class="font-body bg-grey5 scrollbar-hidden" x-data="{ overlay: false}" >
-    <div class="fixed z-10 w-full h-full bg-black bg-opacity-20" x-show="overlay"></div>
+    <div class="fixed z-10 w-full h-full bg-black bg-opacity-30" x-show="overlay"></div>
     <div class="flex flex-row">
       <div class="flex flex-col w-full">
         <div class="flex-grow">

diff --git a/core/lib/core_web/ui/dialog/dialog.ex b/core/lib/core_web/ui/dialog/dialog.ex
@@ -10,7 +10,7 @@ defmodule CoreWeb.UI.Dialog do
 
   def dialog(assigns) do
     ~H"""
-    <div class="p-8 bg-white shadow-2xl min-w-dialog-width sm:min-w-dialog-width-sm rounded">
+    <div class="h-full p-8 bg-white shadow-2xl min-w-dialog-width sm:min-w-dialog-width-sm rounded">
       <div class="flex flex-col gap-4 sm:gap-8">
         <div class="text-title5 font-title5 sm:text-title3 sm:font-title3">
           <%= @title %>

diff --git a/core/lib/core_web/ui/popup.ex b/core/lib/core_web/ui/popup.ex
@@ -5,7 +5,7 @@ defmodule CoreWeb.UI.Popup do
 
   def popup(assigns) do
     ~H"""
-    <div class="fixed z-20 left-0 top-0 w-full h-full bg-black bg-opacity-20">
+    <div class="fixed z-20 left-0 top-0 w-full h-full bg-black bg-opacity-30">
       <div class="flex flex-row items-center justify-center w-full h-full">
         <%= render_slot(@inner_block) %>
       </div>

diff --git a/core/priv/gettext/en/LC_MESSAGES/eyra-consent.po b/core/priv/gettext/en/LC_MESSAGES/eyra-consent.po
@@ -26,3 +26,7 @@ msgstr "Please not that this version of the consent text has already been signed
 #, elixir-autogen, elixir-format
 msgid "out_of_sync.error.message"
 msgstr "The consent text has been changed. Please refresh the page to continue."
+
+#, elixir-autogen, elixir-format
+msgid "signature.view.title"
+msgstr "Consent"
diff --git a/core/priv/gettext/eyra-consent.pot b/core/priv/gettext/eyra-consent.pot
@@ -26,3 +26,7 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "out_of_sync.error.message"
 msgstr ""
+
+#, elixir-autogen, elixir-format
+msgid "signature.view.title"
+msgstr ""
diff --git a/core/priv/gettext/nl/LC_MESSAGES/eyra-consent.po b/core/priv/gettext/nl/LC_MESSAGES/eyra-consent.po
@@ -26,3 +26,7 @@ msgstr "Deze versie van de tekst voor toestemming is al ondertekend door partici
 #, elixir-autogen, elixir-format
 msgid "out_of_sync.error.message"
 msgstr "De toestemmingstekst is aangepast. Ververs de pagina om verder te gaan."
+
+#, elixir-autogen, elixir-format
+msgid "signature.view.title"
+msgstr "Toestemming"
diff --git a/core/systems/admin/config_page.ex b/core/systems/admin/config_page.ex
@@ -99,7 +99,7 @@ defmodule Systems.Admin.ConfigPage do
     <.workspace title={dgettext("eyra-admin", "config.title")} menus={@menus}>
       <%= if @popup do %>
         <.popup>
-          <div class="p-8 w-popup-md bg-white shadow-2xl rounded">
+          <div class="p-8 w-popup-md bg-white shadow-floating rounded">
             <.live_component id={:config_page_popup} module={@popup.module} {@popup} />
           </div>
         </.popup>

diff --git a/core/systems/assignment/crew_page.ex b/core/systems/assignment/crew_page.ex
@@ -34,7 +34,8 @@ defmodule Systems.Assignment.CrewPage do
       |> assign(
         id: id,
         model: model,
-        image_info: nil
+        image_info: nil,
+        popup: nil
       )
       |> update_panel_info(session)
       |> observe_view_model()
@@ -106,6 +107,17 @@ defmodule Systems.Assignment.CrewPage do
     {:noreply, socket |> store(key, data)}
   end
 
+  @impl true
+  def handle_event("show_popup", %{ref: %{id: id, module: module}, params: params}, socket) do
+    popup = %{module: module, params: Map.put(params, :id, id)}
+    {:noreply, socket |> assign(popup: popup)}
+  end
+
+  @impl true
+  def handle_event("hide_popup", _, socket) do
+    {:noreply, socket |> assign(popup: nil)}
+  end
+
   def store(
         %{assigns: %{panel_info: panel_info, model: assignment, remote_ip: remote_ip}} = socket,
         key,
@@ -138,6 +150,15 @@ defmodule Systems.Assignment.CrewPage do
           <% end %>
           </div>
         </:header>
+
+        <%= if @popup do %>
+          <.popup>
+            <div class="w-3/5 h-4/5 overflow-y-scroll">
+              <.live_component id={:page_popup} module={@popup.module} {@popup.params} />
+            </div>
+          </.popup>
+        <% end %>
+
         <div id={:crew_page} class="w-full h-full flex flex-col" phx-hook="ViewportResize">
           <.flow fabric={@fabric} />
         </div>

diff --git a/core/systems/assignment/crew_page_builder.ex b/core/systems/assignment/crew_page_builder.ex
@@ -61,14 +61,35 @@ defmodule Systems.Assignment.CrewPageBuilder do
     end
   end
 
-  defp work_view(assignment, %{fabric: fabric} = assigns, _) do
+  defp work_view(
+         %{consent_agreement: consent_agreement} = assignment,
+         %{fabric: fabric, current_user: user} = assigns,
+         _
+       ) do
     work_items = work_items(assignment, assigns)
+    context_menu_items = context_menu_items(assignment, assigns)
 
     Fabric.prepare_child(fabric, :work_view, Assignment.CrewWorkView, %{
-      work_items: work_items
+      work_items: work_items,
+      consent_agreement: consent_agreement,
+      context_menu_items: context_menu_items,
+      user: user
     })
   end
 
+  defp context_menu_items(%{consent_agreement: consent_agreement}, _assigns) do
+    items = []
+
+    items =
+      if consent_agreement do
+        items ++ [%{id: :consent, label: "Consent"}]
+      else
+        items
+      end
+
+    items
+  end
+
   defp work_items(%{status: status, crew: crew} = assignment, %{current_user: user} = assigns) do
     if is_tester?(assignment, assigns) or status == :online do
       member = Crew.Public.get_member(crew, user)

diff --git a/core/systems/assignment/crew_work_view.ex b/core/systems/assignment/crew_work_view.ex
@@ -8,18 +8,34 @@ defmodule Systems.Assignment.CrewWorkView do
     Assignment,
     Crew,
     Workflow,
-    Project
+    Project,
+    Content,
+    Consent
   }
 
-  def update(%{work_items: work_items}, socket) do
+  def update(
+        %{
+          work_items: work_items,
+          consent_agreement: consent_agreement,
+          context_menu_items: context_menu_items,
+          user: user
+        },
+        socket
+      ) do
     {
       :ok,
       socket
-      |> assign(work_items: work_items)
+      |> assign(
+        work_items: work_items,
+        consent_agreement: consent_agreement,
+        context_menu_items: context_menu_items,
+        user: user
+      )
       |> update_selected_item_id()
       |> update_selected_item()
       |> compose_child(:work_list_view)
       |> compose_child(:start_view)
+      |> compose_child(:context_menu)
       |> update_child(:tool_ref_view)
     }
   end
@@ -62,6 +78,8 @@ defmodule Systems.Assignment.CrewWorkView do
     socket |> assign(selected_item: selected_item)
   end
 
+  # Compose
+
   @impl true
   def compose(:start_view, %{selected_item: selected_item}) when not is_nil(selected_item) do
     %{module: Assignment.StartView, params: %{work_item: selected_item}}
@@ -95,18 +113,30 @@ defmodule Systems.Assignment.CrewWorkView do
   @impl true
   def compose(:tool_ref_view, _assigns), do: nil
 
-  defp map_item({%{id: id, title: title, group: group}, task}) do
-    %{id: id, title: title, icon: group, status: task_status(task)}
+  def compose(:context_menu, %{context_menu_items: []}) do
+    nil
   end
 
-  defp task_status(%{status: status}), do: status
-  defp task_status(_), do: :pending
+  def compose(:context_menu, %{context_menu_items: context_menu_items}) do
+    %{
+      module: Content.ContextMenu,
+      params: %{
+        items: context_menu_items
+      }
+    }
+  end
 
-  defp lock_task(socket, task) do
-    Crew.Public.lock_task(task)
-    socket
+  def compose(:consent_page, %{consent_agreement: consent_agreement, user: user}) do
+    %{
+      module: Consent.SignatureView,
+      params: %{
+        signature: Consent.Public.get_signature(consent_agreement, user)
+      }
+    }
   end
 
+  # Events
+
   @impl true
   def handle_event(
         "complete_task",
@@ -157,6 +187,23 @@ defmodule Systems.Assignment.CrewWorkView do
     }
   end
 
+  @impl true
+  def handle_event("show", %{page: :consent}, socket) do
+    {
+      :noreply,
+      socket
+      |> compose_child(:consent_page)
+      |> show_popup(:consent_page)
+    }
+  end
+
+  @impl true
+  def handle_event("close", %{source: %{name: :consent_page}}, socket) do
+    {:noreply, socket |> hide_popup(:consent_page)}
+  end
+
+  # Private
+
   defp handle_feldspar_event(%{assigns: %{selected_item: {_, task}}} = socket, %{
          "__type__" => "CommandSystemExit",
          "code" => code,
@@ -188,6 +235,18 @@ defmodule Systems.Assignment.CrewWorkView do
     socket |> Frameworks.Pixel.Flash.put_error("Unsupported event")
   end
 
+  defp map_item({%{id: id, title: title, group: group}, task}) do
+    %{id: id, title: title, icon: group, status: task_status(task)}
+  end
+
+  defp task_status(%{status: status}), do: status
+  defp task_status(_), do: :pending
+
+  defp lock_task(socket, task) do
+    Crew.Public.lock_task(task)
+    socket
+  end
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -216,6 +275,8 @@ defmodule Systems.Assignment.CrewWorkView do
             <.child name={:start_view} fabric={@fabric} />
           </div>
         <% end %>
+        <%!-- floating button --%>
+        <.child name={:context_menu} fabric={@fabric} />
       </div>
     """
   end

diff --git a/core/systems/assignment/ticket_view.ex b/core/systems/assignment/ticket_view.ex
@@ -8,7 +8,7 @@ defmodule Systems.Assignment.TicketView do
 
   def normal(assigns) do
     ~H"""
-    <div class="flex flex-row gap-12 rounded-lg shadow-2xl p-8 h-full bg-tertiary">
+    <div class="flex flex-row gap-12 rounded-lg shadow-floating p-8 h-full bg-tertiary">
       <Text.title4><%= dgettext("eyra-assignment", "ticket.title") %></Text.title4>
       <Text.title4><%= @public_id %></Text.title4>
     </div>

diff --git a/core/systems/benchmark/tool_page.ex b/core/systems/benchmark/tool_page.ex
@@ -69,7 +69,7 @@ defmodule Systems.Benchmark.ToolPage do
       <.stripped title={@vm.hero_title} menus={@menus}>
         <%= if @popup do %>
           <.popup>
-            <div class="p-8 w-popup-md bg-white shadow-2xl rounded">
+            <div class="p-8 w-popup-md bg-white shadow-floating rounded">
               <.live_component {@popup} />
             </div>
           </.popup>

diff --git a/core/systems/budget/funding_page.ex b/core/systems/budget/funding_page.ex
@@ -289,7 +289,7 @@ defmodule Systems.Budget.FundingPage do
     <.workspace title={dgettext("eyra-budget", "funding.title")} menus={@menus}>
       <%= if @popup do %>
         <.popup>
-          <div class="p-8 w-popup-md bg-white shadow-2xl rounded">
+          <div class="p-8 w-popup-md bg-white shadow-floating rounded">
             <.live_component id={:funding_popup} module={@popup.module} {@popup} />
           </div>
         </.popup>

diff --git a/core/systems/campaign/overview_page.ex b/core/systems/campaign/overview_page.ex
@@ -217,7 +217,7 @@ defmodule Systems.Campaign.OverviewPage do
 
       <%= if @popup do %>
         <.popup>
-          <div class="p-8 w-popup-md bg-white shadow-2xl rounded">
+          <div class="p-8 w-popup-md bg-white shadow-floating rounded">
             <.live_component id={:campaign_overview_popup} module={@popup.module} {@popup} />
           </div>
         </.popup>

diff --git a/core/systems/consent/_public.ex b/core/systems/consent/_public.ex
@@ -96,7 +96,8 @@ defmodule Systems.Consent.Public do
       join: r in Consent.RevisionModel,
       on: r.id == s.revision_id,
       where: s.user_id == ^user_id,
-      where: r.agreement_id == ^agreement_id
+      where: r.agreement_id == ^agreement_id,
+      preload: [:revision]
     )
     |> Repo.all()
     |> List.first()