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

UI small fixes #2266

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

UI small fixes #2266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5d95c25
feat: improving readability for projects menu
oliveirarleo Jul 8, 2024
82b6022
feat: improving saving button flickering
oliveirarleo Jul 8, 2024
2be8d67
chore: making buttons text uniform
oliveirarleo Jul 8, 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
2 changes: 1 addition & 1 deletion lib/lightning_web/live/auth_providers/form_component.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ defmodule LightningWeb.AuthProvidersLive.FormComponent do
<div class="flex">
<div class="flex-none">
<.submit_button
phx-disable-with="Saving"
phx-disable-with="Saving..."
disabled={[email protected]?}
>
Save
Expand Down
1 change: 1 addition & 0 deletions lib/lightning_web/live/components/form.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ defmodule LightningWeb.Components.Form do
py-2
px-4
border
min-w-\[7rem\]
border-transparent
shadow-sm
text-sm
Expand Down
138 changes: 73 additions & 65 deletions lib/lightning_web/live/components/menu.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,74 +57,82 @@ defmodule LightningWeb.Components.Menu do

def projects_dropdown(assigns) do
~H"""
<div class="relative my-4 mx-2 px-2">
<button
type="button"
class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3
<%= if length(assigns[:projects]) == 0 do %>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When accessing assigns in Heex templates, please use @projects - that way the renderer can optimise for diffs/prevent rerenderers.

The example below, assigns[:selected_project] is an exception to the rule since in that specific case we don't know if there is an assign with that key.

But for any other case, we always use the @name style.

<div class="p-2 mb-4 mt-4 text-center text-primary-300 bg-primary-800">
<span class="inline-block align-middle text-sm">
You don't have access to any projects
</span>
</div>
<% else %>
<div class="relative my-4 mx-2 px-2">
<button
type="button"
class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3
pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300
focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
aria-haspopup="listbox"
aria-expanded="true"
aria-labelledby="listbox-label"
phx-click={show_dropdown("project-picklist")}
>
<span class="block truncate">
<%= if assigns[:selected_project],
do: @selected_project.name,
else: "Go to project" %>
</span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<svg
class="h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
clip-rule="evenodd"
/>
</svg>
</span>
</button>
<ul
id="project-picklist"
class="hidden absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
tabindex="-1"
role="listbox"
aria-labelledby="listbox-label"
aria-activedescendant="listbox-option-3"
phx-click-away={hide_dropdown("project-picklist")}
>
<%= for project <- @projects do %>
<.link navigate={~p"/projects/#{project.id}/w"}>
<li
class={[
"text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9 hover:bg-indigo-600 group hover:text-white"
]}
role="option"
aria-haspopup="listbox"
aria-expanded="true"
aria-labelledby="listbox-label"
phx-click={show_dropdown("project-picklist")}
>
<span class="block truncate">
<%= if assigns[:selected_project],
do: @selected_project.name,
else: "Go to project" %>
</span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<svg
class="h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<span class={[
"font-normal block truncate",
assigns[:project] && @project.id == project.id && "font-semibold"
]}>
<%= project.name %>
</span>
<span class={[
"absolute inset-y-0 right-0 flex items-center pr-4",
(!assigns[:project] || @project.id != project.id) && "hidden"
]}>
<.icon
name="hero-check"
class="group-hover:text-white text-indigo-600"
/>
</span>
</li>
</.link>
<% end %>
</ul>
</div>
<path
fill-rule="evenodd"
d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
clip-rule="evenodd"
/>
</svg>
</span>
</button>
<ul
id="project-picklist"
class="hidden absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
tabindex="-1"
role="listbox"
aria-labelledby="listbox-label"
aria-activedescendant="listbox-option-3"
phx-click-away={hide_dropdown("project-picklist")}
>
<%= for project <- @projects do %>
<.link navigate={~p"/projects/#{project.id}/w"}>
<li
class={[
"text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9 hover:bg-indigo-600 group hover:text-white"
]}
role="option"
>
<span class={[
"font-normal block truncate",
assigns[:project] && @project.id == project.id && "font-semibold"
]}>
<%= project.name %>
</span>
<span class={[
"absolute inset-y-0 right-0 flex items-center pr-4",
(!assigns[:project] || @project.id != project.id) && "hidden"
]}>
<.icon
name="hero-check"
class="group-hover:text-white text-indigo-600"
/>
</span>
</li>
</.link>
<% end %>
</ul>
</div>
<% end %>
"""
end

Expand Down
5 changes: 4 additions & 1 deletion lib/lightning_web/live/first_setup_live/superuser.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,10 @@
</div>

<div class="mt-2">
<.submit_button phx-disable-with="Saving" disabled={[email protected]?}>
<.submit_button
phx-disable-with="Saving..."
disabled={[email protected]?}
>
Save
</.submit_button>
</div>
Expand Down
5 changes: 4 additions & 1 deletion lib/lightning_web/live/project_live/form_component.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,10 @@
</.link>
</span>
<div class="inline-block">
<.submit_button phx-disable-with="Saving" disabled={[email protected]?}>
<.submit_button
phx-disable-with="Saving..."
disabled={[email protected]?}
>
Save
</.submit_button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion lib/lightning_web/live/project_live/github_sync_component.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@
"Contact an editor or admin to sync."
}
phx-click="initiate-sync"
phx-disable-with="Syncing.."
phx-disable-with="Syncing..."
phx-target={@myself}
class="bg-primary-600 hover:bg-primary-700 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
Expand Down
4 changes: 2 additions & 2 deletions lib/lightning_web/live/project_live/settings.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@
!(@project_changeset.valid? and can_edit_project(assigns) and
can_edit_project(assigns))
}
phx-disable-with="Saving"
phx-disable-with="Saving..."
>
Save
</Form.submit_button>
Expand Down Expand Up @@ -994,7 +994,7 @@
not @project_changeset.valid? or
not @can_edit_data_retention
}
phx-disable-with="Saving"
phx-disable-with="Saving..."
>
Save
</Form.submit_button>
Expand Down