Skip to content

Refactor: Components tree styling #291

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

Merged
GuzekAlan merged 8 commits into from
Apr 25, 2025
Merged

Refactor: Components tree styling #291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d86513d
formatting
GuzekAlan Apr 23, 2025
e42d9df
styling without w-full
GuzekAlan Apr 23, 2025
8c9493c
making only chevron collapse details via hook
GuzekAlan Apr 23, 2025
b6dc6a1
remove log
GuzekAlan Apr 23, 2025
04db498
add doc
GuzekAlan Apr 23, 2025
ee6fe85
highlighting fixed
GuzekAlan Apr 23, 2025
97fdaa4
remove hook, make only text select node, add underline
GuzekAlan Apr 24, 2025
77612a0
remove duplicate styling
GuzekAlan Apr 25, 2025
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
13 changes: 6 additions & 7 deletions lib/live_debugger/components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ defmodule LiveDebugger.Components do
@doc """
Collapsible element that can be toggled open and closed.
It uses the `details` and `summary` HTML elements.
If you add `hide-on-open` class to element it will be hidden when collapsible is opened.
`hide-on-open` and `show-on-open` css classes are used to hide or show elements based on the open state of the collapsible.
Comment thread
kraleppa marked this conversation as resolved.

## Examples

Expand Down Expand Up @@ -142,9 +142,8 @@ defmodule LiveDebugger.Components do
{show_collapsible_assign(@open)}
>
<summary
class={[
"block flex items-center cursor-pointer" | List.wrap(@label_class)
]}
id={@id <> "-summary"}
class={["flex items-center cursor-pointer" | List.wrap(@label_class)]}
{@rest}
>
<.icon name={@icon} class={["rotate-icon shrink-0" | List.wrap(@chevron_class)]} />
Expand Down Expand Up @@ -246,7 +245,7 @@ defmodule LiveDebugger.Components do
end

@doc """
Used to add Hook to element based on condition.
Used to add CollapsibleOpen hook to element based on condition.
"""
def show_collapsible_assign(true), do: %{:"phx-hook" => "CollapsibleOpen"}
def show_collapsible_assign(_), do: %{}
Expand Down Expand Up @@ -489,7 +488,7 @@ defmodule LiveDebugger.Components do
<svg
{@rest}
class={
["animate-spin", @size_class, unless(@show, do: "hidden")] ++
["animate-spin", @size_class, if(!@show, do: "hidden")] ++
List.wrap(@class)
}
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -521,7 +520,7 @@ defmodule LiveDebugger.Components do
@doc """
Renders a tooltip using Tooltip hook.
"""
attr(:id, :string, required: true)
attr(:id, :string, required: true, doc: "ID of the tooltip. Prefix is added automatically.")
attr(:content, :string, default: nil)
attr(:position, :string, default: "top", values: ["top", "bottom"])
attr(:rest, :global)
Expand Down
131 changes: 62 additions & 69 deletions lib/live_debugger/components/tree.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,23 +31,21 @@ defmodule LiveDebugger.Components.Tree do

def tree(assigns) do
~H"""
<div class={["min-h-20 w-full overflow-y-auto flex flex-col", @class]}>
<div class={["min-h-20 px-1 overflow-y-auto overflow-x-hidden flex flex-col", @class]}>
<div class="flex items-center justify-between">
<div class="shrink-0 font-medium text-secondary-text px-6 py-3"><%= @title %></div>
<%= if LiveDebugger.Feature.enabled?(:highlighting) do %>
<.toggle_switch label="Highlight" checked={@highlight?} phx-click="toggle-highlight" />
<% end %>
</div>
<div class="w-full px-1 overflow-y-auto">
<.tree_node
tree_id={@id}
tree_node={@tree_node}
selected_node_id={@selected_node_id}
root?={true}
max_opened_node_level={@max_opened_node_level}
level={0}
/>
</div>
<.tree_node
tree_id={@id}
tree_node={@tree_node}
selected_node_id={@selected_node_id}
root?={true}
max_opened_node_level={@max_opened_node_level}
level={0}
/>
</div>
"""
end
Expand Down Expand Up @@ -90,50 +88,46 @@ defmodule LiveDebugger.Components.Tree do
|> assign(:open, assigns.level < assigns.max_opened_node_level)

~H"""
<div class="relative flex max-w-full">
<div class="w-full">
<.collapsible
:if={@collapsible?}
id={"collapsible-#{@tree_node.parsed_id}-#{@tree_id}"}
chevron_class="text-accent-icon h-5 w-5"
open={@open}
label_class="w-full rounded-md py-1 hover:bg-surface-1-bg-hover"
style={style_for_padding(@level, @collapsible?)}
>
<:label>
<.label
tree_id={@tree_id}
selected?={@selected?}
parent_dom_id={@parent_dom_id}
node={@tree_node}
level={@level}
collapsible?={true}
/>
</:label>
<div class="flex flex-col">
<.tree_node
:for={child <- @tree_node.children}
tree_id={@tree_id}
parent_dom_id={if @tree_node[:dom_id], do: @tree_node.dom_id, else: @parent_dom_id}
tree_node={child}
selected_node_id={@selected_node_id}
root?={false}
max_opened_node_level={@max_opened_node_level}
level={@level + 1}
/>
</div>
</.collapsible>
<.collapsible
:if={@collapsible?}
id={"collapsible-#{@tree_node.parsed_id}-#{@tree_id}"}
chevron_class="text-accent-icon h-5 w-5"
open={@open}
label_class="rounded-md py-1 hover:bg-surface-1-bg-hover"
style={style_for_padding(@level, @collapsible?)}
>
<:label>
<.label
:if={not @collapsible?}
tree_id={@tree_id}
selected?={@selected?}
parent_dom_id={@parent_dom_id}
node={@tree_node}
level={@level}
collapsible?={false}
collapsible?={true}
/>
</:label>
<div class="flex flex-col">
<.tree_node
:for={child <- @tree_node.children}
tree_id={@tree_id}
parent_dom_id={if @tree_node[:dom_id], do: @tree_node.dom_id, else: @parent_dom_id}
tree_node={child}
selected_node_id={@selected_node_id}
root?={false}
max_opened_node_level={@max_opened_node_level}
level={@level + 1}
/>
</div>
</div>
</.collapsible>
<.label
:if={not @collapsible?}
tree_id={@tree_id}
selected?={@selected?}
parent_dom_id={@parent_dom_id}
node={@tree_node}
level={@level}
collapsible?={false}
/>
"""
end

Expand All @@ -143,43 +137,42 @@ defmodule LiveDebugger.Components.Tree do
attr(:level, :integer, required: true)
attr(:collapsible?, :boolean, required: true)
attr(:selected?, :boolean, required: true)
attr(:class, :string, default: nil)

defp label(assigns) do
assigns =
assign(assigns, :padding_style, style_for_padding(assigns.level, assigns.collapsible?))
assigns
|> assign(:padding_style, style_for_padding(assigns.level, assigns.collapsible?))
|> assign(:button_id, "tree-node-button-#{assigns.node.parsed_id}-#{assigns.tree_id}")

~H"""
<button
id={"tree-node-button-#{@node.parsed_id}-#{@tree_id}"}
phx-click="select_node"
phx-value-node_id={@node.parsed_id}
phx-value-search-attribute={get_search_attribute(@node)}
phx-value-search-value={get_search_value(@node, @parent_dom_id)}
phx-hook="Highlight"
<span
class={[
"flex w-full rounded-md hover:bg-surface-1-bg-hover",
unless(@collapsible?, do: "p-1"),
@class
"flex shrink grow items-center rounded-md hover:bg-surface-1-bg-hover",
if(!@collapsible?, do: "p-1")
]}
style={unless(@collapsible?, do: @padding_style)}
style={if(!@collapsible?, do: @padding_style)}
>
<div class="flex w-full gap-0.5 items-center">
<button
id={@button_id}
phx-hook="Highlight"
phx-click="select_node"
phx-value-node_id={@node.parsed_id}
phx-value-search-attribute={get_search_attribute(@node)}
phx-value-search-value={get_search_value(@node, @parent_dom_id)}
class="flex min-w-0 gap-0.5 items-center"
>
<.icon name={@node.icon} class="text-accent-icon w-5 h-5 shrink-0" />
<.tooltip
id={"tree-node-#{@node.parsed_id}-#{@tree_id}"}
content={@node.tooltip}
class="w-full flex overflow-x-hidden"
class="truncate"
>
<div class={[
"truncate",
if(@selected?, do: "font-semibold")
]}>
<span class={["hover:underline", if(@selected?, do: "font-semibold")]}>
<%= @node.label %>
</div>
</span>
</.tooltip>
</div>
</button>
</button>
</span>
"""
end

Expand Down
2 changes: 1 addition & 1 deletion lib/live_debugger/live_components/live_dropdown.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ defmodule LiveDebugger.LiveComponents.LiveDropdown do
variant={Map.get(button_slot, :variant, "secondary")}
size={Map.get(button_slot, :size, "sm")}
id={@id <> "-button"}
phx-click={unless @open, do: "open"}
phx-click={if !@open, do: "open"}
Comment thread
kraleppa marked this conversation as resolved.
phx-target={@myself}
>
<%= render_slot(button_slot) %>
Expand Down
4 changes: 3 additions & 1 deletion lib/live_debugger/services/module_discovery_service.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ defmodule LiveDebugger.Services.ModuleDiscoveryService do
@spec all_modules() :: [module()]
def all_modules() do
ModuleService.all()
|> Enum.map(fn {module_charlist, _, _} -> module_charlist |> to_string |> String.to_atom() end)
|> Enum.map(fn {module_charlist, _, _} ->
module_charlist |> to_string |> String.to_atom()
end)
end

@doc """
Expand Down