github-personal/firezone
1
0
Fork 0
mirror of https://github.com/outbackdingo/firezone.git synced 2026-01-27 18:18:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(portal): Minor UI consistency fixes for resource/group select (#6860)

Browse Source 
- [x] Spacing consistency
- [x] Border radius consistency
- [x] Minor grammar
- [x] Dismiss select when item is selected
- [x] Add shadow to stand out from rest of form
- [x] Prevent from opening when disabled
- [x] Use `cursor-not-allowed` when disabled for consistency with other
form elements


Before


<img width="670" alt="Screenshot 2024-09-27 at 5 01 38 PM"
src="https://github.com/user-attachments/assets/79e3a4c6-4d23-4edd-93b2-149acc58c37b">



After


<img width="677" alt="Screenshot 2024-09-27 at 5 11 48 PM"
src="https://github.com/user-attachments/assets/e1453c05-fed7-4d87-a176-6f6ce1267488">

---------

Signed-off-by: Jamil <jamilbk@users.noreply.github.com>
Co-authored-by: Andrew Dryga <a@firezone.dev>
This commit is contained in:
Jamil
2024-10-01 09:14:45 -07:00
committed by GitHub
parent 05acdd5a03
commit b298e79d06
3 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
elixir/apps/web/lib/web/components/form_components/select_with_groups.ex
View File

@@ -165,7 +165,7 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
autocomplete={false}
class={[
input_class(),
not @disabled && "cursor-pointer",
(@disabled && "cursor-not-allowed") || "cursor-pointer",
@errors != [] && input_has_errors_class()
]}
value={@value_name}
@@ -181,14 +181,16 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
<div
class={[
"absolute top-1/2 end-2 -translate-y-1/2",
not @disabled && "cursor-pointer"
(@disabled && "cursor-not-allowed") || "cursor-pointer"
]}
phx-click={
JS.toggle_class("hidden",
to: "#select-#{@id}-dropdown"
)
|> JS.toggle_attribute({"aria-expanded", "true", "false"}, to: "##{@id}-input")
|> JS.focus(to: "#select-" <> @id <> "-search-input")
unless @disabled do
JS.toggle_class("hidden",
to: "#select-#{@id}-dropdown"
)
|> JS.toggle_attribute({"aria-expanded", "true", "false"}, to: "##{@id}-input")
|> JS.focus(to: "#select-" <> @id <> "-search-input")
end
}
>
<.icon name="hero-chevron-up-down" class="w-5 h-5" />
@@ -202,7 +204,7 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
"mt-2 pb-1 px-1 space-y-0.5 z-20",
"w-full bg-white",
input_border_class(),
"border border-gray-200 rounded-lg",
"border border-gray-200 rounded shadow",
"overflow-hidden"
]}
role="listbox"
@@ -213,7 +215,7 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
"max-h-72",
"overflow-y-auto overflow-x-hidden"
]}>
<div class="bg-white p-2 sticky top-0 z-40">
<div class="bg-white p-2 sticky top-1 z-40">
<input
name={"search_query-#{@id}"}
id={"select-" <> @id <> "-search-input"}
@@ -232,7 +234,7 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
<div>
<div class={[
"hidden only:block",
"py-2 px-4",
"py-2 px-2",
"text-sm text-neutral-400"
]}>
<%= if @no_search_results == [] do %>
@@ -261,7 +263,7 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
"block",
"w-full py-2 px-4",
"text-sm text-neutral-800",
"rounded-lg",
"rounded",
"hover:bg-neutral-100",
"focus:outline-none focus:bg-neutral-100",
value != @value && "cursor-pointer",
@@ -276,14 +278,21 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
checked={value == @value}
class="hidden"
/>
<div>
<div class={["flex items center"]}>
<div class={["text-gray-800"]}>
<%= render_slot(@option, slot_assigns) %>
</div>
<div :if={value == @value} class="ml-auto">
<.icon name="hero-check" class="w-4 h-4" />
</div>
<div
phx-click={
JS.toggle_class("hidden",
to: "#select-#{@id}-dropdown"
)
|> JS.toggle_attribute({"aria-expanded", "true", "false"})
|> JS.focus(to: "#select-" <> @id <> "-search-input")
}
class={["flex items-center"]}
>
<div class={["text-gray-800"]}>
<%= render_slot(@option, slot_assigns) %>
</div>
<div :if={value == @value} class="ml-auto">
<.icon name="hero-check" class="w-4 h-4" />
</div>
</div>
</label>

4
elixir/apps/web/lib/web/live/policies/edit.ex
View File

@@ -124,7 +124,7 @@ defmodule Web.Policies.Edit do
<% end %>
<span :if={resource.gateway_groups == []} class="text-red-800">
(not connected to any Sites)
(not connected to any Site)
</span>
<span
:if={length(resource.gateway_groups) > 0}
@@ -146,7 +146,7 @@ defmodule Web.Policies.Edit do
</:no_options>
<:no_search_results>
No resources found. Try a different search query or create a new one <.link
No Resources found. Try a different search query or create a new one <.link
navigate={~p"/#{@account}/resources/new"}
class={link_style()}
>here</.link>.

4
elixir/apps/web/lib/web/live/policies/new.ex
View File

@@ -113,7 +113,7 @@ defmodule Web.Policies.New do
<% end %>
<span :if={resource.gateway_groups == []} class="text-red-800">
(not connected to any Sites)
(not connected to any Site)
</span>
<span
:if={length(resource.gateway_groups) > 0}
@@ -135,7 +135,7 @@ defmodule Web.Policies.New do
</:no_options>
<:no_search_results>
No resources found. Try a different search query or create a new one <.link
No Resources found. Try a different search query or create a new one <.link
navigate={~p"/#{@account}/resources/new"}
class={link_style()}
>here</.link>.