diff --git a/lib/lokal_web/component/topbar.ex b/lib/lokal_web/component/topbar.ex deleted file mode 100644 index ab003402..00000000 --- a/lib/lokal_web/component/topbar.ex +++ /dev/null @@ -1,104 +0,0 @@ -defmodule LokalWeb.Components.Topbar do - @moduledoc """ - Phoenix.Component for rendering an interactive topbar - Assign - """ - - use LokalWeb, :component - alias LokalWeb.PageLive - - def topbar(assigns) do - assigns = - %{results: [], title_content: nil, current_user: nil, flash: nil} - |> Map.merge(assigns) - - ~H""" -
- - <%= if @flash && @flash |> Map.has_key?(:info) do %> - - <% end %> - <%= if @flash && @flash |> Map.has_key?(:error) do %> - - <% end %> -
- """ - end -end diff --git a/lib/lokal_web/components/topbar.ex b/lib/lokal_web/components/topbar.ex new file mode 100644 index 00000000..4a0da9a3 --- /dev/null +++ b/lib/lokal_web/components/topbar.ex @@ -0,0 +1,106 @@ +defmodule LokalWeb.Components.Topbar do + @moduledoc """ + Component that renders a topbar with user functions/links + """ + + use LokalWeb, :component + + alias Lokal.Accounts + alias LokalWeb.{Endpoint, PageLive} + + def topbar(assigns) do + assigns = + %{results: [], title_content: nil, flash: nil, current_user: nil} |> Map.merge(assigns) + + ~H""" + + """ + end +end diff --git a/lib/lokal_web/live/live_helpers.ex b/lib/lokal_web/live/live_helpers.ex index eee3e9ba..a851eea8 100644 --- a/lib/lokal_web/live/live_helpers.ex +++ b/lib/lokal_web/live/live_helpers.ex @@ -4,28 +4,9 @@ defmodule LokalWeb.LiveHelpers do """ import Phoenix.LiveView.Helpers - import Phoenix.LiveView, only: [assign_new: 3] + import Phoenix.LiveView alias Lokal.Accounts - - @doc """ - Renders a component inside the `LokalWeb.ModalComponent` component. - - The rendered modal receives a `:return_to` option to properly update - the URL when the modal is closed. - - ## Examples - - <%= live_modal LokalWeb.TagLive.FormComponent, - id: @tag.id || :new, - action: @live_action, - tag: @tag, - return_to: Routes.tag_index_path(@socket, :index) %> - """ - def live_modal(component, opts) do - path = Keyword.fetch!(opts, :return_to) - modal_opts = [id: :modal, return_to: path, component: component, opts: opts] - live_component(LokalWeb.ModalComponent, modal_opts) - end + alias Phoenix.LiveView.JS def assign_defaults(socket, %{"user_token" => user_token} = _session) do socket @@ -37,4 +18,78 @@ defmodule LokalWeb.LiveHelpers do def assign_defaults(socket, _session) do socket end + + @doc """ + Renders a live component inside a modal. + + The rendered modal receives a `:return_to` option to properly update + the URL when the modal is closed. + + ## Examples + + <.modal return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}> + <.live_component + module={<%= inspect context.web_module %>.<%= inspect Module.concat(schema.web_namespace, schema.alias) %>Live.FormComponent} + id={@<%= schema.singular %>.id || :new} + title={@page_title} + action={@live_action} + return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)} + <%= schema.singular %>: @<%= schema.singular %> + /> + + """ + def modal(assigns) do + ~H""" + <%= live_patch to: @return_to, + id: "modal-bg", + class: + "fade-in fixed z-10 left-0 top-0 + w-full h-full overflow-hidden + p-8 flex flex-col justify-center items-center cursor-auto", + style: "background-color: rgba(0,0,0,0.4);", + phx_remove: hide_modal() + do %> + + <% end %> + + + """ + end + + def hide_modal(js \\ %JS{}) do + js + |> JS.hide(to: "#modal", transition: "fade-out") + |> JS.hide(to: "#modal-bg", transition: "fade-out") + |> JS.hide(to: "#modal-content", transition: "fade-out-scale") + end end diff --git a/lib/lokal_web/live/modal_component.ex b/lib/lokal_web/live/modal_component.ex deleted file mode 100644 index b55e8706..00000000 --- a/lib/lokal_web/live/modal_component.ex +++ /dev/null @@ -1,30 +0,0 @@ -defmodule LokalWeb.ModalComponent do - @moduledoc """ - Component that provides a floating modal - """ - - use LokalWeb, :live_component - - @impl true - def render(assigns) do - ~L""" -
- -
- <%= live_patch raw("×"), to: @return_to, class: "phx-modal-close" %> - <%= live_component @component, @opts %> -
-
- """ - end - - @impl true - def handle_event("close", _, socket) do - {:noreply, push_patch(socket, to: socket.assigns.return_to)} - end -end