soem changes
This commit is contained in:
parent
e3da619b0a
commit
49677f2d9b
8 changed files with 225 additions and 117 deletions
|
|
@ -56,7 +56,7 @@ defmodule ZoeyscomputerWeb.CodeBlock do
|
|||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="overflow-x-scroll bg-ctp-mantle">
|
||||
<div class="bg-ctp-mantle">
|
||||
<div class="relative bg-ctp-crust">
|
||||
<%= if @line_numbers do %>
|
||||
<div class="absolute bg-ctp-crust left-0 top-0 bottom-0 ctp-bg-crust min-w-12 flex flex-col items-end py-4 ctp-text-surface2 select-none">
|
||||
|
|
@ -72,7 +72,10 @@ defmodule ZoeyscomputerWeb.CodeBlock do
|
|||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class={["bg-ctp-mantle overflow-x-scroll pb-0.5", @line_numbers && "pl-12"]}>
|
||||
<div class={[
|
||||
"bg-ctp-mantle overflow-x-scroll scrollbar scrollbar-track-ctp-base scrollbar-thumb-ctp-mauve pb-0.5",
|
||||
@line_numbers && "pl-12"
|
||||
]}>
|
||||
<pre
|
||||
class="p-4 leading-6 text-sm mb-4"
|
||||
id={"code-block-#{id}"}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
|
||||
phx-key="escape"
|
||||
phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
|
||||
class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-ctp-base p-14 shadow-lg ring-1 transition"
|
||||
class="shadow-ctp-mauve/10 ring-ctp-mauve/10 relative hidden rounded-2xl bg-ctp-base p-14 shadow-lg ring-1 transition"
|
||||
>
|
||||
<div class="absolute top-6 right-5">
|
||||
<button
|
||||
|
|
@ -340,7 +340,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
<select
|
||||
id={@id}
|
||||
name={@name}
|
||||
class="mt-2 block w-full rounded-md border border-gray-300 bg-ctp-base shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
|
||||
class="mt-2 block w-full rounded-md border border-gray-300 bg-ctp-base shadow-sm focus:border-ctp-blue focus:ring-0 sm:text-sm"
|
||||
multiple={@multiple}
|
||||
{@rest}
|
||||
>
|
||||
|
|
@ -361,7 +361,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
name={@name}
|
||||
class={[
|
||||
"mt-2 block w-full bg-ctp-base rounded-lg text-ctp-text focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]",
|
||||
@errors == [] && "border-ctp-surface2 focus:border-zinc-400",
|
||||
@errors == [] && "border-ctp-surface2 focus:border-ctp-overlay0",
|
||||
@errors != [] && "border-rose-400 focus:border-rose-400"
|
||||
]}
|
||||
{@rest}
|
||||
|
|
@ -500,7 +500,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
~H"""
|
||||
<div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
|
||||
<table class="w-[40rem] mt-11 sm:w-full">
|
||||
<thead class="text-sm text-left leading-6 text-zinc-500">
|
||||
<thead class="text-sm text-left leading-6 text-ctp-text">
|
||||
<tr>
|
||||
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
|
||||
<th :if={@action != []} class="relative p-0 pb-4">
|
||||
|
|
@ -511,27 +511,35 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
<tbody
|
||||
id={@id}
|
||||
phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
|
||||
class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-ctp-overlay1"
|
||||
class="relative divide-y divide-ctp-overlay0 border-t border-ctp-overlay1 text-sm leading-6 text-ctp-overlay1"
|
||||
>
|
||||
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
|
||||
<tr
|
||||
:for={row <- @rows}
|
||||
id={@row_id && @row_id.(row)}
|
||||
class="group hover:bg-ctp-mauve hover:scale-105 transition-all duration-250"
|
||||
>
|
||||
<td
|
||||
:for={{col, i} <- Enum.with_index(@col)}
|
||||
phx-click={@row_click && @row_click.(row)}
|
||||
class={["relative p-0", @row_click && "hover:cursor-pointer"]}
|
||||
>
|
||||
<div class="block py-4 pr-6">
|
||||
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
|
||||
<span class={["relative", i == 0 && "font-semibold text-ctp-overlay2"]}>
|
||||
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-ctp-mauve sm:rounded-l-xl" />
|
||||
<span class={[
|
||||
"relative",
|
||||
i == 0 && "font-semibold text-ctp-overlay2 group-hover:text-ctp-crust"
|
||||
]}>
|
||||
<%= render_slot(col, @row_item.(row)) %>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td :if={@action != []} class="relative w-14 p-0">
|
||||
<div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
|
||||
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
|
||||
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-ctp-mauve sm:rounded-r-xl" />
|
||||
|
||||
<span
|
||||
:for={action <- @action}
|
||||
class="relative ml-4 font-semibold leading-6 text-ctp-overlay2 hover:text-ctp-overlay1"
|
||||
class="relative ml-4 font-semibold leading-6 text-ctp-overlay2 group-hover:text-ctp-crust"
|
||||
>
|
||||
<%= render_slot(action, @row_item.(row)) %>
|
||||
</span>
|
||||
|
|
@ -561,9 +569,9 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
def list(assigns) do
|
||||
~H"""
|
||||
<div class="mt-14">
|
||||
<dl class="-my-4 divide-y divide-zinc-100">
|
||||
<dl class="-my-4 divide-y divide-ctp-overlay0">
|
||||
<div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
|
||||
<dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
|
||||
<dt class="w-1/4 flex-none text-ctp-text"><%= item.title %></dt>
|
||||
<dd class="text-ctp-overlay1"><%= render_slot(item) %></dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
|
||||
import Mogrify
|
||||
alias Zoeyscomputer.IdGenerator
|
||||
use ZoeyscomputerWeb, :live_component
|
||||
|
||||
alias Zoeyscomputer.Images
|
||||
|
|
@ -19,7 +21,24 @@ defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
|
|||
phx-change="validate"
|
||||
phx-submit="save"
|
||||
>
|
||||
<.input field={@form[:file]} type="text" label="File" />
|
||||
<.live_file_input upload={@uploads.image} />
|
||||
<section phx-drop-target={@uploads.image.ref}>
|
||||
<%= for entry <- @uploads.image.entries do %>
|
||||
<article class="upload-entry">
|
||||
<figure>
|
||||
<.live_img_preview entry={entry} />
|
||||
<figcaption><%= entry.client_name %></figcaption>
|
||||
</figure>
|
||||
<progress class="w-full" value={entry.progress} max="100">
|
||||
<%= entry.progress %>
|
||||
</progress>
|
||||
</article>
|
||||
<% end %>
|
||||
|
||||
<%= for err <- upload_errors(@uploads.image) do %>
|
||||
<p class="alert alert-danger"><%= error_to_string(err) %></p>
|
||||
<% end %>
|
||||
</section>
|
||||
<:actions>
|
||||
<.button phx-disable-with="Saving...">Save Image</.button>
|
||||
</:actions>
|
||||
|
|
@ -28,8 +47,18 @@ defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
|
|||
"""
|
||||
end
|
||||
|
||||
defp error_to_string(:too_large), do: "Too Large"
|
||||
defp error_to_string(:not_accepted), do: "Not Accepted"
|
||||
|
||||
defp error_to_string(:too_manu_files), do: "Too many files!"
|
||||
|
||||
@impl true
|
||||
def update(%{image: image} = assigns, socket) do
|
||||
socket =
|
||||
socket
|
||||
|> assign(:uploaded_files, [])
|
||||
|> allow_upload(:image, accept: ~w(.jpg .jpeg .png), max_entries: 2)
|
||||
|
||||
{:ok,
|
||||
socket
|
||||
|> assign(assigns)
|
||||
|
|
@ -44,8 +73,29 @@ defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
|
|||
{:noreply, assign(socket, form: to_form(changeset, action: :validate))}
|
||||
end
|
||||
|
||||
def handle_event("save", %{"image" => image_params}, socket) do
|
||||
save_image(socket, socket.assigns.action, image_params)
|
||||
@impl true
|
||||
def handle_event("save", _params, socket) do
|
||||
uploaded_files =
|
||||
consume_uploaded_entries(socket, :image, fn %{path: path}, _entry ->
|
||||
dest = Path.join("/tmp/", Path.basename(path))
|
||||
File.cp(path, dest)
|
||||
|
||||
handle_upload(dest)
|
||||
end)
|
||||
|
||||
update(socket, :uploaded_files, &(&1 ++ uploaded_files))
|
||||
|
||||
save_image(socket, socket.assigns.action, %{file: uploaded_files})
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_event("validate", _params, socket) do
|
||||
{:noreply, socket}
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_event("cancel-upload", %{"ref" => ref}, socket) do
|
||||
{:noreply, cancel_upload(socket, :image, ref)}
|
||||
end
|
||||
|
||||
defp save_image(socket, :edit, image_params) do
|
||||
|
|
@ -63,6 +113,27 @@ defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
|
|||
end
|
||||
end
|
||||
|
||||
defp handle_upload(path) do
|
||||
id = IdGenerator.generate()
|
||||
key = "uploads/#{id}.png"
|
||||
bucket = "imgs"
|
||||
|
||||
try do
|
||||
image = open(path) |> format("png") |> save()
|
||||
IO.inspect(image)
|
||||
|
||||
{:ok, new_file_binary} = File.read(image.path)
|
||||
|
||||
case ExAws.S3.put_object(bucket, key, new_file_binary, %{content_type: "image/png"})
|
||||
|> ExAws.request() do
|
||||
{:ok, _response} -> {:ok, id}
|
||||
{:error, reason} -> {:error, reason}
|
||||
end
|
||||
after
|
||||
File.rm(path)
|
||||
end
|
||||
end
|
||||
|
||||
defp save_image(socket, :new, image_params) do
|
||||
case Images.create_image(image_params) do
|
||||
{:ok, image} ->
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ defmodule ZoeyscomputerWeb.ImageLive.Index do
|
|||
@impl true
|
||||
def mount(_params, _session, socket) do
|
||||
current_user = socket.assigns.current_user
|
||||
|
||||
{:ok, stream(socket, :images, Images.list_images_by_user(current_user))}
|
||||
end
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue