2 Commits

  1. 9
      CHANGELOG.md
  2. 81
      assets/css/app.scss
  3. 15
      assets/js/app.js
  4. 32
      lib/mirage_web/live/goto_anything_live.ex
  5. 6
      lib/mirage_web/live/goto_anything_live.html.leex
  6. 2
      mix.exs

9
CHANGELOG.md

@ -5,6 +5,15 @@ See [Conventional Commits](Https://conventionalcommits.org) for commit guideline
<!-- changelog -->
## [v0.53.0](https://git.inhji.de/inhji/mirage/compare/v0.52.2...v0.53.0) (2021-02-21)
### Features:
* add mobile first search button
## [v0.52.2](https://git.inhji.de/inhji/mirage/compare/v0.52.1...v0.52.2) (2021-02-21)

81
assets/css/app.scss

@ -294,45 +294,67 @@ kbd {
}
}
#goto-anything {
position: absolute;
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-wrapper {
&.closed {
#goto-anything-button {
display: none;
position: absolute;
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%;
}
}
form { margin: 0; }
input {
padding: 1rem;
border: none;
width: 100%;
#goto-anything {
position: absolute;
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);
&:focus-visible {
outline: none;
&.closed {
display: none;
}
form { margin: 0; }
input {
padding: 1rem;
border: none;
width: 100%;
@include color-assign(background-color, surface);
&:focus-visible {
outline: none;
border: none;
}
}
}
.results {
padding: 1rem;
.results {
padding: 1rem;
.result {
padding-bottom: 1rem;
.result {
padding-bottom: 1rem;
&:last-child { padding-bottom: 0; }
&:last-child { padding-bottom: 0; }
}
}
}
}
/* === Content === */
article {
@ -373,6 +395,17 @@ article {
.flex-grid {
display: block;
}
#goto-anything-wrapper {
#goto-anything {
left: 5%;
width: 90%;
}
#goto-anything-button {
display: block;
}
}
}
/* === Helpers === */

15
assets/js/app.js

@ -21,12 +21,23 @@ import TableSort from "tablesort"
import {NoteForm, GotoAnything, onKeydown} from "./hooks"
const handledKeys = ["p"]
const Hooks = {NoteForm, GotoAnything}
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
params: {_csrf_token: csrfToken},
hooks: {NoteForm, GotoAnything},
metadata: {keydown: onKeydown}
hooks: Hooks,
metadata: {keydown: (e, el) => {
if (handledKeys.includes(e.key) && e.ctrlKey)
e.preventDefault()
console.log(e)
return {
key: e.key,
ctrlKey: e.ctrlKey
}
}}
})
// Show progress bar on live navigation and form submits

32
lib/mirage_web/live/goto_anything_live.ex

@ -3,24 +3,35 @@ defmodule MirageWeb.GotoAnythingLive do
@impl true
def mount(_params, _session, socket) do
{:ok, socket |> assign(%{popup_class: "closed", results: []})}
{:ok, socket |> assign(:results, []) |> close_popup()}
end
@impl true
def handle_event("hotkey", %{"key" => "p", "ctrlKey" => true}, socket) do
{:noreply, socket |> assign(%{popup_class: "open"})}
{:noreply, open_popup(socket)}
end
@impl true
def handle_event("hotkey", %{"key" => "Escape", "ctrlKey" => false}, socket) do
{:noreply, socket |> assign(%{popup_class: "closed"})}
{:noreply, close_popup(socket)}
end
@impl true
def handle_event("hotkey", _params, socket) do
def handle_event("hotkey", params, socket) do
IO.inspect(params)
{: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
@ -36,9 +47,22 @@ defmodule MirageWeb.GotoAnythingLive do
{:noreply, socket}
end
@impl true
def handle_event("search", %{"ctrlKey" => false, "key" => "Escape", "value" => _}, socket) do
{:noreply, close_popup(socket)}
end
@impl true
def handle_event("search", %{"key" => _, "value" => query}, socket) do
results = Mirage.Notes.search_notes(query)
{:noreply, socket |> assign(%{results: results})}
end
defp open_popup(socket) do
socket |> assign(%{popup_class: "open"})
end
defp close_popup(socket) do
socket |> assign(%{popup_class: "closed"})
end
end

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

@ -25,4 +25,8 @@
<% end %>
<% end %>
</div>
</div>
</div>
<a href="#" id="goto-anything-button" class="button" phx-click="button">
<span>☕</span>
</a>

2
mix.exs

@ -1,7 +1,7 @@
defmodule Mirage.MixProject do
use Mix.Project
@version "0.52.2"
@version "0.53.0"
def project do
[

Loading…
Cancel
Save