Browse Source

feat: make goto anything global, add selection

main
Inhji Y. 7 months ago
parent
commit
0c63b9d87e
  1. 69
      assets/css/app.scss
  2. 77
      lib/mirage_web/live/goto_anything_live.ex
  3. 27
      lib/mirage_web/live/goto_anything_live.html.leex
  4. 4
      lib/mirage_web/live/home_live.html.leex
  5. 4
      lib/mirage_web/live/inbox_live.html.leex
  6. 4
      lib/mirage_web/live/note_live/index.html.leex
  7. 4
      lib/mirage_web/live/note_live/show.html.leex
  8. 4
      lib/mirage_web/templates/layout/root.html.leex

69
assets/css/app.scss

@ -276,61 +276,44 @@ kbd {
}
}
#goto-anything-wrapper {
#goto-anything {
position: fixed;
top: 5rem;
left: 15rem;
width: 30rem;
border: 1px solid white;
box-shadow: $shadow;
@include color-assign(background-color, surface);
@include color-assign(border-color, surface);
#goto-anything-button {
&.closed {
display: none;
position: fixed;
z-index: 10;
right: 20px;
bottom: 20px;
border-radius: 100px;
width: 1rem;
height: 1rem;
line-height: 0;
padding: 25px;
span {
margin-left: -12px;
font-size: 150%;
}
}
#goto-anything {
position: fixed;
top: 5rem;
left: 15rem;
width: 30rem;
border: 1px solid white;
box-shadow: $shadow;
@include color-assign(background-color, surface);
@include color-assign(border-color, surface);
&.closed {
display: none;
}
form { margin: 0; }
form { margin: 0; }
input {
padding: 1rem;
border: none;
width: 100%;
@include color-assign(background-color, surface);
input {
padding: 1rem;
&:focus-visible {
outline: none;
border: none;
width: 100%;
@include color-assign(background-color, surface);
}
}
&:focus-visible {
outline: none;
border: none;
}
.results {
a {
text-decoration: none;
}
.results {
.result {
padding: 1rem;
.result {
padding-bottom: 1rem;
&:last-child { padding-bottom: 0; }
&.active {
@include color-assign(background-color, surface-var);
}
}
}

77
lib/mirage_web/live/goto_anything_live.ex

@ -3,7 +3,10 @@ defmodule MirageWeb.GotoAnythingLive do
@impl true
def mount(_params, _session, socket) do
{:ok, socket |> assign(:results, []) |> close_popup()}
{:ok, socket
|> assign(:results, [])
|> assign(:selection, -1)
|> close_popup()}
end
@impl true
@ -21,26 +24,23 @@ defmodule MirageWeb.GotoAnythingLive do
{:noreply, socket}
end
def handle_event("button", _params, socket) do
new_class =
case socket.assigns.popup_class do
"open" -> "closed"
"closed" -> "open"
end
{:noreply, socket |> assign(%{popup_class: new_class})}
end
@impl true
def handle_event("search", %{"key" => "Enter", "value" => _}, socket) do
results = socket.assigns.results
def handle_event("search", %{"key" => "Enter", "value" => _}, %{assigns: assigns} = socket) do
results = assigns.results
selection = assigns.selection
IO.inspect(assigns)
IO.inspect("Results at ENTER: #{results |> Enum.count()}")
socket =
if not Enum.empty?(results) do
note = List.first(results)
push_redirect(socket, to: Routes.note_show_path(socket, :show, note))
else
note = Enum.at(results, selection)
socket
|> push_redirect(to: Routes.note_show_path(socket, :show, note))
|> close_popup()
else
socket |> close_popup()
end
{:noreply, socket}
@ -51,17 +51,52 @@ defmodule MirageWeb.GotoAnythingLive do
{:noreply, close_popup(socket)}
end
@impl true
def handle_event("search", %{"ctrlKey" => false, "key" => "ArrowUp", "value" => _}, socket) do
{:noreply, dec_selection(socket)}
end
@impl true
def handle_event("search", %{"ctrlKey" => false, "key" => "ArrowDown", "value" => _}, socket) do
{:noreply, inc_selection(socket)}
end
@impl true
def handle_event("search", %{"key" => _, "value" => query}, socket) do
results = Mirage.Notes.search_notes(query)
{:noreply, socket |> assign(%{results: results})}
IO.inspect("Results at SEARCH: #{Enum.count(results)}")
{:noreply,
socket
|> assign(:results, results)
|> assign(:selection, 0)}
end
defp open_popup(socket) do
socket |> assign(%{popup_class: "open"})
defp open_popup(socket), do: socket |> assign(%{popup_class: "open"})
defp close_popup(socket), do: socket |> assign(%{popup_class: "closed"})
defp inc_selection(%{assigns: assigns} = socket) do
selection = assigns.selection
results = Enum.count(assigns.results)
selection = cond do
selection >= results -> selection
true -> selection + 1
end
socket |> assign(:selection, selection)
end
defp close_popup(socket) do
socket |> assign(%{popup_class: "closed"})
defp dec_selection(%{assigns: assigns} = socket) do
selection = assigns.selection
results = Enum.count(assigns.results)
selection = cond do
selection <= 0 -> selection
true -> selection - 1
end
socket |> assign(:selection, selection)
end
end

27
lib/mirage_web/live/goto_anything_live.html.leex

@ -5,7 +5,7 @@
placeholder="Search for anything..."
autocomplete="off"
phx-keydown="search"
phx-debounce="100">
phx-debounce="10">
</form>
<div class="results">
@ -15,18 +15,19 @@
<div>yet</div>
</div>
<% else %>
<%= for note <- @results do %>
<div class="card result">
<strong><%= note.title %></strong>
<div>
<%= live_redirect "Go to Note", to: Routes.note_show_path(@socket, :show, note.id) %>
</div>
</div>
<%= for {note, index} <- @results |> Enum.with_index() do %>
<%= live_redirect to: Routes.note_show_path(@socket, :show, note.id) do %>
<div class='card result <%= if index == @selection, do: "active", else: "" %>'>
<strong><%= note.title %></strong>
<p class="tags">
<span class="tag">Views: <%= note.views %></span>
<%= for topic <- note.topics do %>
<span class="tag"><%= topic.text %></span>
<% end %>
</p>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div>
<a href="#" id="goto-anything-button" class="button" phx-click="button">
<span>☕</span>
</a>
</div>

4
lib/mirage_web/live/home_live.html.leex

@ -1,7 +1,3 @@
<%= if @current_user do %>
<%= live_render @socket, MirageWeb.GotoAnythingLive, id: "goto-anything-wrapper" %>
<% end %>
<header class="hero">
<h1><%= raw @_s.user_title.value %></h1>
<p><%= raw @_s.user_tagline.value %></p>

4
lib/mirage_web/live/inbox_live.html.leex

@ -1,7 +1,3 @@
<%= if @current_user do %>
<%= live_render @socket, MirageWeb.GotoAnythingLive, id: "goto-anything-wrapper" %>
<% end %>
<header class="hero">
<h1>Inbox</h1>
</header>

4
lib/mirage_web/live/note_live/index.html.leex

@ -1,7 +1,3 @@
<%= if @current_user do %>
<%= live_render @socket, MirageWeb.GotoAnythingLive, id: "goto-anything-wrapper" %>
<% end %>
<header class="hero">
<h1>Listing Notes</h1>
<%= if @current_user do %>

4
lib/mirage_web/live/note_live/show.html.leex

@ -1,7 +1,3 @@
<%= if @current_user do %>
<%= live_render @socket, MirageWeb.GotoAnythingLive, id: "goto-anything-wrapper" %>
<% end %>
<%= if @live_action in [:edit] do %>
<%= live_modal @socket, MirageWeb.NoteLive.FormComponent,
id: @note.id,

4
lib/mirage_web/templates/layout/root.html.leex

@ -13,7 +13,7 @@
<body class="<%= body_class(assigns) %>">
<div class="container">
<%= if @current_user do %>
<%= render "_sidebar.html", assigns %>
<%= render "_sidebar.html", assigns %>
<% end %>
<div id="wrapper">
@ -21,6 +21,8 @@
<%= @inner_content %>
<%= render "_footer.html", assigns %>
</div>
<%= live_render @conn, MirageWeb.GotoAnythingLive %>
</div>
</body>
</html>

Loading…
Cancel
Save