Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uku UI wip #4622

Closed
wants to merge 4 commits into from
Closed

Uku UI wip #4622

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eab541c
ukuwip
ukutaht Sep 24, 2024
f9d7318
ukuwip
ukutaht Sep 25, 2024
a90fe06
Tables & paddings
ukutaht Sep 25, 2024
cc72bc9
Imports exports
ukutaht Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions extra/lib/plausible_web/live/funnel_settings/form.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
onkeydown="return event.key != 'Enter';"
class="bg-white dark:bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-8"
>
<h2 class="text-xl font-black dark:text-gray-100 mb-6">
<.title class="mb-6">
<%= if @funnel, do: "Edit", else: "Add" %> Funnel
</h2>
</.title>

<.input
field={f[:name]}
Expand Down Expand Up @@ -116,26 +116,24 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
} />

<div class="mt-6">
<p id="funnel-eval" class="text-gray-500 dark:text-gray-400 mt-2 mb-2">
<p id="funnel-eval" class="text-gray-500 dark:text-gray-400 text-sm mt-2 mb-2">
<%= if @evaluation_result do %>
Last month conversion rate: <strong><%= List.last(@evaluation_result.steps).conversion_rate %></strong>%
<% end %>
</p>
</div>

<div class="mt-6">
<PlausibleWeb.Components.Generic.button
id="save"
type="submit"
class="w-full"
disabled={
has_steps_errors?(f) or map_size(@selections_made) < Funnel.min_steps() or
length(@step_ids) > map_size(@selections_made)
}
>
<span><%= if @funnel, do: "Update", else: "Add" %> Funnel</span>
</PlausibleWeb.Components.Generic.button>
</div>
<PlausibleWeb.Components.Generic.button
id="save"
type="submit"
class="w-full"
disabled={
has_steps_errors?(f) or map_size(@selections_made) < Funnel.min_steps() or
length(@step_ids) > map_size(@selections_made)
}
>
<span><%= if @funnel, do: "Update", else: "Add" %> Funnel</span>
</PlausibleWeb.Components.Generic.button>
</div>
</.form>
</div>
Expand Down Expand Up @@ -174,7 +172,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do

def add_step_button(assigns) do
~H"""
<a class="underline text-indigo-500 cursor-pointer mt-6" phx-click="add-step">
<a class="underline text-indigo-500 text-sm cursor-pointer mt-6" phx-click="add-step">
+ Add another step
</a>
"""
Expand Down
9 changes: 5 additions & 4 deletions extra/lib/plausible_web/live/funnel_settings/list.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
def render(assigns) do
~H"""
<div>
<.hr />
<.filter_bar filter_text={@filter_text} placeholder="Search Funnels">
<.button id="add-funnel-button" phx-click="add-funnel" mt?={false}>
Add Funnel
Expand All @@ -25,10 +24,12 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
<.table rows={@funnels}>
<:tbody :let={funnel}>
<.td truncate>
<%= funnel.name %>
<span class="font-medium"><%= funnel.name %></span>
</.td>
<.td hide_on_mobile>
<%= funnel.steps_count %>-step funnel
<span class="text-gray-500 dark:text-gray-400">
<%= funnel.steps_count %>-step funnel
</span>
</.td>
<.td actions>
<.edit_button phx-click="edit-funnel" phx-value-funnel-id={funnel.id} />
Expand All @@ -43,7 +44,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
</:tbody>
</.table>
<% else %>
<p class="mt-12 mb-8 text-center">
<p class="mt-12 mb-8 text-sm text-center">
<span :if={String.trim(@filter_text) != ""}>
No funnels found for this site. Please refine or
<.styled_link phx-click="reset-filter-text" id="reset-filter-hint">
Expand Down
87 changes: 52 additions & 35 deletions lib/plausible_web/components/generic.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ defmodule PlausibleWeb.Components.Generic do
yellow: %{
bg: "bg-yellow-50 dark:bg-yellow-100",
icon: "text-yellow-400",
title_text: "text-yellow-800 dark:text-yellow-900",
body_text: "text-yellow-700 dark:text-yellow-800 leading-5"
title_text: "text-sm text-yellow-800 dark:text-yellow-900",
body_text: "text-sm text-yellow-700 dark:text-yellow-800 leading-5"
},
red: %{
bg: "bg-red-100",
icon: "text-red-700",
title_text: "text-red-800 dark:text-red-900",
body_text: "text-red-700 dark:text-red-800"
title_text: "text-sm text-red-800 dark:text-red-900",
body_text: "text-sm text-red-700 dark:text-red-800"
}
}

Expand All @@ -33,7 +33,7 @@ defmodule PlausibleWeb.Components.Generic do
"border border-gray-300 dark:border-gray-500 text-red-700 bg-white dark:bg-gray-900 hover:text-red-500 dark:hover:text-red-400 focus:border-blue-300 dark:text-red-500 active:text-red-800"
}

@button_base_class "whitespace-nowrap truncate inline-flex items-center justify-center gap-x-2 rounded-md px-3.5 py-2.5 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:bg-gray-400 dark:disabled:text-white dark:disabled:text-gray-400 dark:disabled:bg-gray-700"
@button_base_class "whitespace-nowrap truncate inline-flex items-center justify-center gap-x-2 font-medium rounded-md px-3.5 py-2.5 text-sm shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:bg-gray-400 dark:disabled:text-white dark:disabled:text-gray-400 dark:disabled:bg-gray-700"

attr(:type, :string, default: "button")
attr(:theme, :string, default: "primary")
Expand Down Expand Up @@ -136,7 +136,7 @@ defmodule PlausibleWeb.Components.Generic do
def docs_info(assigns) do
~H"""
<a href={"https://plausible.io/docs/#{@slug}"} rel="noopener noreferrer" target="_blank">
<Heroicons.information_circle class="text-indigo-800 dark:text-indigo-500 w-6 h-6 stroke-2 absolute top-4 right-4 hover:text-indigo-500 dark:hover:text-indigo-300" />
<Heroicons.information_circle class="text-gray-500 dark:text-indigo-500 w-6 h-6 stroke-2 absolute top-4 right-4 hover:text-indigo-500 dark:hover:text-indigo-300" />
</a>
"""
end
Expand All @@ -152,8 +152,8 @@ defmodule PlausibleWeb.Components.Generic do
assigns = assign(assigns, :theme, Map.fetch!(@notice_themes, assigns.theme))

~H"""
<div id={@dismissable_id} class={[@dismissable_id && "hidden", "mb-4"]}>
<div class={["rounded-md p-8 relative", @theme.bg, @class]} {@rest}>
<div id={@dismissable_id} class={[@dismissable_id && "hidden"]}>
<div class={["rounded-md p-4 relative", @theme.bg, @class]} {@rest}>
<button
:if={@dismissable_id}
class={"absolute right-0 top-0 m-2 #{@theme.title_text}"}
Expand Down Expand Up @@ -358,7 +358,7 @@ defmodule PlausibleWeb.Components.Generic do

def settings_tiles(assigns) do
~H"""
<div class="sm:overflow-hidden text-gray-900 leading-5 dark:text-gray-100">
<div class="text-gray-900 leading-5 dark:text-gray-100">
<%= render_slot(@inner_block) %>
</div>
"""
Expand All @@ -368,23 +368,33 @@ defmodule PlausibleWeb.Components.Generic do
slot :inner_block, required: true
slot :title, required: true
slot :subtitle, required: true
attr :no_inner_pad, :boolean, default: false
attr :feature_mod, :atom, default: nil
attr :site, :any
attr :conn, :any

def tile(assigns) do
~H"""
<div class="shadow bg-white dark:bg-gray-800 sm:rounded-md mb-6">
<header class="relative border-b dark:border-gray-700 p-6">
<div class="shadow bg-white dark:bg-gray-800 rounded-md mb-6">
<header class="relative py-4 px-6">
<.title>
<%= render_slot(@title) %>

<.docs_info :if={@docs} slug={@docs} />
</.title>
<div class="text-sm mt-1 dark:text-gray-300 leading-5">
<div class="text-sm mt-px text-gray-500 dark:text-gray-400 leading-5">
<%= render_slot(@subtitle) %>
</div>
<%= if @feature_mod do %>
<PlausibleWeb.Components.Site.Feature.toggle
feature_mod={@feature_mod}
site={@site}
conn={@conn}
/>
<% end %>
<div class="border-b dark:border-gray-700 pb-4"></div>
</header>

<div class={[@no_inner_pad && "pb-2", @no_inner_pad || "pb-6 px-6 pt-2"]}>
<div class="pb-4 px-6">
<%= render_slot(@inner_block) %>
</div>
</div>
Expand Down Expand Up @@ -457,7 +467,7 @@ defmodule PlausibleWeb.Components.Generic do

def focus_list(assigns) do
~H"""
<ol class="list-disc space-y-1 ml-4 mt-1 mb-4">
<ol class="list-disc space-y-1 ml-4 text-sm">
<li :for={item <- @item} class="marker:text-indigo-700 dark:marker:text-indigo-700">
<%= render_slot(item) %>
</li>
Expand All @@ -474,15 +484,16 @@ defmodule PlausibleWeb.Components.Generic do
def focus_box(assigns) do
~H"""
<div
class="focus-box bg-white w-full max-w-lg mx-auto dark:bg-gray-800 text-black dark:text-gray-100 shadow-md rounded mb-4 mt-8"
class="bg-white w-full max-w-lg mx-auto dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-md rounded-md mt-12"
{@rest}
>
<div class="p-8">
<.title :if={@title != []}>
<%= render_slot(@title) %>
</.title>
<div></div>

<div :if={@subtitle != []} class="text-sm mt-2 dark:text-gray-200">
<div :if={@subtitle != []} class="text-sm mt-4 leading-6">
<%= render_slot(@subtitle) %>
</div>

Expand Down Expand Up @@ -514,13 +525,13 @@ defmodule PlausibleWeb.Components.Generic do

def table(assigns) do
~H"""
<table :if={not Enum.empty?(@rows)} class={[@width, "mb-2"]} {@rest}>
<thead :if={@thead}>
<tr>
<table :if={not Enum.empty?(@rows)} class={@width} {@rest}>
<thead :if={@thead != []}>
<tr class="border-b border-gray-200">
<%= render_slot(@thead) %>
</tr>
</thead>
<tbody>
<tbody class="divide-y divide-gray-200">
<tr :for={item <- @rows}>
<%= render_slot(@tbody, item) %>
</tr>
Expand All @@ -531,16 +542,27 @@ defmodule PlausibleWeb.Components.Generic do

slot :inner_block, required: true
attr :truncate, :boolean, default: false
attr :max_width, :string, default: ""
attr :actions, :boolean, default: nil
attr :hide_on_mobile, :boolean, default: nil
attr :rest, :global

def td(assigns) do
max_width =
cond do
assigns.max_width != "" -> assigns.max_width
assigns.truncate -> "max-w-sm"
true -> ""
end

assigns = assign(assigns, max_width: max_width)

~H"""
<td
class={[
"px-6 py-3 whitespace-nowrap",
@truncate && "truncate max-w-sm",
"text-sm px-6 py-3 first:pl-0 last:pr-0 whitespace-nowrap",
@truncate && "truncate",
@max_width,
@actions && "flex text-right justify-end",
@hide_on_mobile && "hidden md:table-cell"
]}
Expand All @@ -565,7 +587,7 @@ defmodule PlausibleWeb.Components.Generic do
if assigns[:invisible] do
"invisible"
else
"px-6 py-1 text-left text-sm font-semibold text-gray-500 dark:text-gray-400"
"px-6 first:pl-0 last:pr-0 py-3 text-left text-sm font-medium"
end

assigns = assign(assigns, class: class)
Expand Down Expand Up @@ -603,9 +625,9 @@ defmodule PlausibleWeb.Components.Generic do
</button>

<span class={[
"ml-2 font-medium leading-5",
"ml-2 font-medium leading-5 text-sm",
if(@disabled?,
do: "text-gray-500 dark:text-gray-300",
do: "text-gray-500 dark:text-gray-400",
else: "text-gray-900 dark:text-gray-100"
)
]}>
Expand Down Expand Up @@ -660,7 +682,7 @@ defmodule PlausibleWeb.Components.Generic do

def filter_bar(assigns) do
~H"""
<div class="p-6 flex items-center justify-between">
<div class="mb-6 flex items-center justify-between">
<div class="text-gray-800 inline-flex items-center">
<div :if={@filtering_enabled?} class="relative rounded-md shadow-sm flex">
<form id="filter-form" phx-change="filter" class="flex items-center">
Expand All @@ -671,7 +693,7 @@ defmodule PlausibleWeb.Components.Generic do
type="text"
name="filter-text"
id="filter-text"
class="pl-8 shadow-sm dark:bg-gray-900 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-800"
class="pl-8 text-sm shadow-sm dark:bg-gray-900 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-800"
placeholder={@placeholder}
value={@filter_text}
/>
Expand All @@ -690,12 +712,6 @@ defmodule PlausibleWeb.Components.Generic do
"""
end

def hr(assigns) do
~H"""
<hr class="border-t border-gray-200 dark:border-gray-700" />
"""
end

slot :inner_block, required: true
attr :class, :any, default: nil

Expand All @@ -708,10 +724,11 @@ defmodule PlausibleWeb.Components.Generic do
end

slot :inner_block, required: true
attr :class, :any, default: nil

def title(assigns) do
~H"""
<.h2 class="text-lg font-medium dark:text-gray-100">
<.h2 class={["text-lg font-medium text-gray-900 dark:text-gray-100 leading-7", @class]}>
<%= render_slot(@inner_block) %>
</.h2>
"""
Expand Down
15 changes: 14 additions & 1 deletion lib/plausible_web/live/components/form.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ defmodule PlausibleWeb.Live.Components.Form do
<.input name="my-input" errors={["oh no!"]} />
"""

@default_input_class "text-sm dark:bg-gray-900 block pl-3 py-2 border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 rounded-md"
@default_input_class "text-sm dark:bg-gray-900 block pl-3.5 py-2.5 border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 rounded-md"

attr(:id, :any, default: nil)
attr(:name, :any)
Expand Down Expand Up @@ -67,6 +67,19 @@ defmodule PlausibleWeb.Live.Components.Form do
|> input()
end

def input(%{type: "select"} = assigns) do
~H"""
<div phx-feedback-for={@name} class={@mt? && "mt-2"}>
<.label for={@id} class="mb-2"><%= @label %></.label>
<select id={@id} name={@name} multiple={@multiple} class={[@class, @width]} {@rest}>
<option :if={@prompt} value=""><%= @prompt %></option>
<%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
</select>
<.error :for={msg <- @errors}><%= msg %></.error>
</div>
"""
end

# All other inputs text, datetime-local, url, password, etc. are handled here...
def input(assigns) do
~H"""
Expand Down
Loading
Loading