Skip to content

Commit 4c689dd

Browse files
hhubert6hhubert6
authored
Enhanement: Create groups for setting (#958)
* Group settings * Fixes * CR suggestions
1 parent 84720b3 commit 4c689dd

5 files changed

Lines changed: 68 additions & 39 deletions

File tree

‎assets/app/styles/colors.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070

7171
/* SWM Yellow */
7272
--swm-yellow-20: #fffae1;
73+
--swm-yellow-30: #fef3c6;
7374
--swm-yellow-40: #fff1b2;
7475
--swm-yellow-60: #ffe780;
7576
--swm-yellow-80: #ffe04b;

‎assets/app/styles/themes/light.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@
7878
--info-text: var(--primary-text);
7979

8080
/* Warning */
81-
--warning-bg: var(--swm-yellow-20);
82-
--warning-border: var(--swm-yellow-40);
81+
--warning-bg: var(--swm-yellow-30);
82+
--warning-border: var(--swm-yellow-60);
8383
--warning-text: var(--primary-text);
8484

8585
--search-highlight-bg: var(--swm-yellow-80);

‎lib/live_debugger/app/settings/web/components.ex‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,27 @@ defmodule LiveDebugger.App.Settings.Web.Components do
99

1010
attr(:id, :string, required: true)
1111
attr(:label, :string, required: true)
12-
attr(:description, :string, required: true)
12+
attr(:description_text, :string)
1313
attr(:checked, :boolean, default: false)
1414
attr(:rest, :global)
1515

16+
slot(:description)
17+
1618
def settings_switch(assigns) do
1719
~H"""
18-
<div class="flex items-center">
20+
<div class="flex items-start">
1921
<.toggle_switch
2022
id={@id}
2123
checked={@checked}
22-
wrapper_class="pr-3 py-0"
24+
wrapper_class="!pr-3 !py-1"
2325
{@rest}
2426
phx-change={clear_flash("#flash-info", :info)}
2527
/>
2628
<div class="flex flex-col gap-0.5">
2729
<p class="font-semibold"><%= @label %></p>
28-
<p class="text-secondary-text"><%= @description %></p>
30+
<p class="text-secondary-text">
31+
<%= if(@description != [], do: render_slot(@description), else: @description_text) %>
32+
</p>
2933
</div>
3034
</div>
3135
"""

‎lib/live_debugger/app/settings/web/settings_live.ex‎

Lines changed: 55 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ defmodule LiveDebugger.App.Settings.Web.SettingsLive do
1616
alias LiveDebugger.Bus
1717
alias LiveDebugger.App.Events.UserRefreshedTrace
1818

19+
@config_browser_features_docs_url "https://hexdocs.pm/live_debugger/config.html#browser-features"
1920
@available_settings SettingsStorage.available_settings() |> Enum.map(&Atom.to_string/1)
2021

2122
@impl true
@@ -27,6 +28,7 @@ defmodule LiveDebugger.App.Settings.Web.SettingsLive do
2728
socket
2829
|> assign(return_to: params["return_to"])
2930
|> assign(settings: SettingsStorage.get_all())
31+
|> assign(config_browser_features_docs_url: @config_browser_features_docs_url)
3032
|> noreply()
3133
end
3234

@@ -50,56 +52,78 @@ defmodule LiveDebugger.App.Settings.Web.SettingsLive do
5052
5153
<%!-- Upper section --%>
5254
<div class="mt-6 bg-surface-0-bg rounded shadow-custom border border-default-border">
53-
<%!-- Appearance --%>
54-
<div class="p-6">
55-
<p class="font-semibold mb-3">Appearance</p>
56-
<div class="flex gap-2">
57-
<SettingsComponents.dark_mode_button />
58-
<SettingsComponents.light_mode_button />
55+
<div class="p-6 flex flex-col gap-3">
56+
<p class="font-semibold mb-3 text-sm">Display</p>
57+
<div>
58+
<p class="font-semibold mb-3">Mode</p>
59+
<div class="flex gap-2 mb-4">
60+
<SettingsComponents.dark_mode_button />
61+
<SettingsComponents.light_mode_button />
62+
</div>
5963
</div>
64+
<SettingsComponents.settings_switch
65+
id="highlight-in-browser-switch"
66+
label="Highlight components"
67+
checked={@settings[:highlight_in_browser]}
68+
phx-click="update"
69+
phx-value-setting="highlight_in_browser"
70+
>
71+
<:description>
72+
When enabled, it will highlight LiveViews and LiveComponents in the browser using Components Tree and Active LiveViews.
73+
For this feature to work, you must have enabled browser features (See
74+
<.link
75+
href={@config_browser_features_docs_url}
76+
target="_blank"
77+
class="text-link-primary hover:text-link-primary-hover"
78+
>
79+
docs
80+
</.link>
81+
for config).
82+
</:description>
83+
</SettingsComponents.settings_switch>
84+
<SettingsComponents.settings_switch
85+
id="debug-button-switch"
86+
label="Show Debug Button"
87+
description_text="When enabled, a debug button will be added to every LiveView page, allowing you to quickly open LiveDebugger for the current page."
88+
checked={@settings[:debug_button]}
89+
phx-click="update"
90+
phx-value-setting="debug_button"
91+
/>
6092
</div>
61-
<%!-- Checkboxes --%>
6293
<div class="p-6 border-t border-default-border flex flex-col gap-3">
94+
<p class="font-semibold mb-3 text-sm">Debugging behavior</p>
6395
<SettingsComponents.settings_switch
6496
id="dead-view-mode-switch"
6597
label="Enable DeadView mode"
66-
description="When enabled, LiveDebugger won't redirect to new LiveView after page redirect or reload, allowing you to browse assigns and traces of dead LiveViews."
98+
description_text="When enabled, LiveDebugger won't redirect to new LiveView after page redirect or reload, allowing you to browse assigns and traces of dead LiveViews."
6799
checked={@settings[:dead_view_mode]}
68100
phx-click="update"
69101
phx-value-setting="dead_view_mode"
70102
/>
71-
72-
<SettingsComponents.settings_switch
73-
id="garbage-collection-switch"
74-
label="Garbage Collection"
75-
description="When enabled, LiveDebugger will remove old data to free up memory. Disabling this option will lead to increased memory usage."
76-
checked={@settings[:garbage_collection]}
77-
phx-click="update"
78-
phx-value-setting="garbage_collection"
79-
/>
80-
<SettingsComponents.settings_switch
81-
id="debug-button-switch"
82-
label="Debug Button"
83-
description="When enabled, a debug button will be added to every LiveView page, allowing you to quickly open LiveDebugger for the current page."
84-
checked={@settings[:debug_button]}
85-
phx-click="update"
86-
phx-value-setting="debug_button"
87-
/>
88103
<SettingsComponents.settings_switch
89104
id="tracing-enabled-on-start-switch"
90105
label="Tracing enabled on start"
91-
description="When enabled, LiveDebugger will start tracing as soon as you open the debugger. When disabled, LiveDebugger still records all traces, but you will need to manually start tracing to see new traces coming."
106+
description_text="When enabled, LiveDebugger will start tracing as soon as you open the debugger. When disabled, LiveDebugger still records all traces, but you will need to manually start tracing to see new traces coming."
92107
checked={@settings[:tracing_enabled_on_start]}
93108
phx-click="update"
94109
phx-value-setting="tracing_enabled_on_start"
95110
/>
111+
</div>
112+
<div class="p-6 border-t border-default-border flex flex-col gap-3">
113+
<div class="flex gap-3 mb-3 items-center">
114+
<p class="font-semibold text-sm">Performance & memory</p>
115+
<div class="flex gap-1 items-center bg-warning-bg border border-warning-border rounded-full text-warning-text py-1 px-2">
116+
<.icon name="icon-triangle-alert" class="w-3 h-3" />
117+
<span class="text-[11px] font-semibold">High impact</span>
118+
</div>
119+
</div>
96120
<SettingsComponents.settings_switch
97-
id="highlight-in-browser-switch"
98-
label="Highlight components"
99-
description="When enabled, it will highlight LiveViews and LiveComponent in the browser using Components Tree and Active LiveViews. For this feature to work, you must have enabled browser features (See docs for config)."
100-
checked={@settings[:highlight_in_browser]}
121+
id="garbage-collection-switch"
122+
label="Garbage Collection"
123+
description_text="When enabled, LiveDebugger will remove old data to free up memory. Disabling this option will lead to increased memory usage."
124+
checked={@settings[:garbage_collection]}
101125
phx-click="update"
102-
phx-value-setting="highlight_in_browser"
126+
phx-value-setting="garbage_collection"
103127
/>
104128
</div>
105129
</div>

‎lib/live_debugger/app/web/components.ex‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -990,7 +990,7 @@ defmodule LiveDebugger.App.Web.Components do
990990
Based on [Tailwind CSS Toggle - Flowbite](https://flowbite.com/docs/forms/toggle)
991991
"""
992992
attr(:checked, :boolean, default: false, doc: "Whether the switch is checked.")
993-
attr(:label, :string, default: "", doc: "Label for the switch.")
993+
attr(:label, :string, default: nil, doc: "Label for the switch.")
994994
attr(:wrapper_class, :any, default: nil, doc: "Additional classes to add to the switch.")
995995
attr(:id, :string, required: true, doc: "ID of the switch.")
996996
attr(:disabled, :boolean, default: false, doc: "Whether the switch is disabled.")
@@ -1004,7 +1004,7 @@ defmodule LiveDebugger.App.Web.Components do
10041004
if(@disabled, do: "opacity-50 pointer-events-none", else: "cursor-pointer")
10051005
] ++ List.wrap(@wrapper_class)
10061006
}>
1007-
<span class="text-xs font-normal text-primary-text mx-2">
1007+
<span :if={@label} class="text-xs font-normal text-primary-text mx-2">
10081008
<%= @label %>
10091009
</span>
10101010
<form>

0 commit comments

Comments
 (0)