update components
This commit is contained in:
oliviasculley
parent
aa314e5ca1
commit
e35bdf101b
|
|
@ -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"""
|
||||
<header class="mb-8 px-8 py-4 w-full bg-primary-400">
|
||||
<nav role="navigation">
|
||||
<div class="flex flex-row justify-between items-center space-x-4">
|
||||
<div class="flex flex-row justify-start items-center space-x-2">
|
||||
<%= link to: Routes.live_path(LokalWeb.Endpoint, PageLive) do %>
|
||||
<h1 class="leading-5 text-xl text-white hover:underline">
|
||||
Lokal
|
||||
</h1>
|
||||
<% end %>
|
||||
<%= if @title_content do %>
|
||||
<span>|</span>
|
||||
<%= render_slot(@title_content) %>
|
||||
<% end %>
|
||||
</div>
|
||||
<ul class="flex flex-row flex-wrap justify-center items-center
|
||||
text-lg space-x-4 text-lg text-white">
|
||||
<form phx-change="suggest" phx-submit="search">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
class="input input-primary"
|
||||
placeholder="Search"
|
||||
list="results"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<datalist id="results">
|
||||
<%= for {app, _vsn} <- @results do %>
|
||||
<option value={app}>
|
||||
"> <%= app %>
|
||||
</option>
|
||||
<% end %>
|
||||
</datalist>
|
||||
</form>
|
||||
<%= if @current_user do %>
|
||||
<li>
|
||||
<%= @current_user.email %>
|
||||
</li>
|
||||
<li>
|
||||
<%= link("Settings",
|
||||
class: "hover:underline",
|
||||
to: Routes.user_settings_path(LokalWeb.Endpoint, :edit)
|
||||
) %>
|
||||
</li>
|
||||
<li>
|
||||
<%= link("Log out",
|
||||
class: "hover:underline",
|
||||
to: Routes.user_session_path(LokalWeb.Endpoint, :delete),
|
||||
method: :delete
|
||||
) %>
|
||||
</li>
|
||||
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
|
||||
<li>
|
||||
<%= link("LiveDashboard",
|
||||
class: "hover:underline",
|
||||
to: Routes.live_dashboard_path(LokalWeb.Endpoint, :home)
|
||||
) %>
|
||||
</li>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<li>
|
||||
<%= link("Register",
|
||||
class: "hover:underline",
|
||||
to: Routes.user_registration_path(LokalWeb.Endpoint, :new)
|
||||
) %>
|
||||
</li>
|
||||
<li>
|
||||
<%= link("Log in",
|
||||
class: "hover:underline",
|
||||
to: Routes.user_session_path(LokalWeb.Endpoint, :new)
|
||||
) %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<%= if @flash && @flash |> Map.has_key?(:info) do %>
|
||||
<p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
|
||||
<%= live_flash(@flash, :info) %>
|
||||
</p>
|
||||
<% end %>
|
||||
<%= if @flash && @flash |> Map.has_key?(:error) do %>
|
||||
<p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error">
|
||||
<%= live_flash(@flash, :error) %>
|
||||
</p>
|
||||
<% end %>
|
||||
</header>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
|
@ -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"""
|
||||
<nav role="navigation" class="mb-8 px-8 py-4 w-full bg-primary-400">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-center">
|
||||
<div class="mb-4 sm:mb-0 sm:mr-8 flex flex-row justify-start items-center space-x-2">
|
||||
<%= live_redirect("Lokal",
|
||||
to: Routes.live_path(Endpoint, PageLive),
|
||||
class: "mx-2 my-1 leading-5 text-xl text-white hover:underline"
|
||||
) %>
|
||||
|
||||
<%= if @title_content do %>
|
||||
<span class="mx-2 my-1">
|
||||
|
|
||||
</span>
|
||||
<%= @title_content %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<hr class="mb-2 sm:hidden hr-light" />
|
||||
|
||||
<ul
|
||||
class="flex flex-row flex-wrap justify-center items-center
|
||||
text-lg text-white text-ellipsis"
|
||||
>
|
||||
<%= if @current_user do %>
|
||||
<form phx-change="suggest" phx-submit="search">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
class="input input-primary"
|
||||
placeholder="Search"
|
||||
list="results"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<datalist id="results">
|
||||
<%= for {app, _vsn} <- @results do %>
|
||||
<option value={app}>
|
||||
"> <%= app %>
|
||||
</option>
|
||||
<% end %>
|
||||
</datalist>
|
||||
</form>
|
||||
<%= if @current_user.role == :admin do %>
|
||||
<li class="mx-2 my-1">
|
||||
<%= live_redirect(gettext("Invites"),
|
||||
to: Routes.invite_index_path(Endpoint, :index),
|
||||
class: "text-primary-600 text-white hover:underline"
|
||||
) %>
|
||||
</li>
|
||||
<% end %>
|
||||
<li class="mx-2 my-1">
|
||||
<%= live_redirect(@current_user.email,
|
||||
to: Routes.user_settings_path(Endpoint, :edit),
|
||||
class: "text-primary-600 text-white hover:underline truncate"
|
||||
) %>
|
||||
</li>
|
||||
<li class="mx-2 my-1">
|
||||
<%= link to: Routes.user_session_path(Endpoint, :delete),
|
||||
method: :delete,
|
||||
data: [confirm: dgettext("prompts", "Are you sure you want to log out?")] do %>
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
<% end %>
|
||||
</li>
|
||||
<%= if @current_user.role == :admin and function_exported?(Routes, :live_dashboard_path, 2) do %>
|
||||
<li class="mx-2 my-1">
|
||||
<%= live_redirect to: Routes.live_dashboard_path(Endpoint, :home),
|
||||
class: "text-primary-600 text-white hover:underline" do %>
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= if Accounts.allow_registration?() do %>
|
||||
<li class="mx-2 my-1">
|
||||
<%= live_redirect(dgettext("actions", "Register"),
|
||||
to: Routes.user_registration_path(Endpoint, :new),
|
||||
class: "text-primary-600 text-white hover:underline truncate"
|
||||
) %>
|
||||
</li>
|
||||
<% end %>
|
||||
<li class="mx-2 my-1">
|
||||
<%= live_redirect(dgettext("actions", "Log in"),
|
||||
to: Routes.user_session_path(Endpoint, :new),
|
||||
class: "text-primary-600 text-white hover:underline truncate"
|
||||
) %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
|
@ -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 %>
|
||||
/>
|
||||
</.modal>
|
||||
"""
|
||||
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 %>
|
||||
<span class="hidden"></span>
|
||||
<% end %>
|
||||
|
||||
<div
|
||||
id="modal"
|
||||
class="fixed z-10 left-0 top-0 pointer-events-none
|
||||
w-full h-full overflow-hidden
|
||||
p-4 sm:p-8 flex flex-col justify-center items-center"
|
||||
>
|
||||
<div
|
||||
id="modal-content"
|
||||
class="fade-in-scale w-full max-w-3xl relative
|
||||
pointer-events-auto overflow-hidden
|
||||
px-8 py-4 sm:py-8 flex flex-col justify-center items-center
|
||||
flex flex-col justify-start items-center
|
||||
bg-white border-2 rounded-lg"
|
||||
>
|
||||
<%= live_patch to: @return_to,
|
||||
id: "close",
|
||||
class:
|
||||
"absolute top-8 right-10
|
||||
text-gray-500 hover:text-gray-800
|
||||
transition-all duration-500 ease-in-out",
|
||||
phx_remove: hide_modal() do %>
|
||||
<i class="fa-fw fa-lg fas fa-times"></i>
|
||||
<% end %>
|
||||
|
||||
<div
|
||||
class="overflow-x-hidden overflow-y-auto w-full p-8 flex flex-col space-y-4 justify-start items-center"
|
||||
>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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"""
|
||||
<div id="<%= @id %>" class="phx-modal"
|
||||
phx-capture-click="close"
|
||||
phx-window-keydown="close"
|
||||
phx-key="escape"
|
||||
phx-target="#<%= @id %>"
|
||||
phx-page-loading>
|
||||
|
||||
<div class="phx-modal-content">
|
||||
<%= live_patch raw("×"), to: @return_to, class: "phx-modal-close" %>
|
||||
<%= live_component @component, @opts %>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_event("close", _, socket) do
|
||||
{:noreply, push_patch(socket, to: socket.assigns.return_to)}
|
||||
end
|
||||
end
|
||||
Loading…
Reference in New Issue