plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-11-25 07:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

Make tooltip alignment configurable WIP

Browse Source
This commit is contained in:
Adrian Gruntkowski 2024-09-17 19:13:20 +02:00
parent 912b61bc9c
commit e8d1a0d1bd
2 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/plausible_web/components/generic.ex
View File

@ -336,6 +336,7 @@ defmodule PlausibleWeb.Components.Generic do
end
attr :sticky?, :boolean, default: true
attr :align, :string, default: "left"
slot :inner_block, required: true
slot :tooltip_content, required: true
@ -345,14 +346,29 @@ defmodule PlausibleWeb.Components.Generic do
show_inner = if assigns[:sticky?], do: "hovered || sticky", else: "hovered"
assigns = assign(assigns, wrapper_data: wrapper_data, show_inner: show_inner)
align_class =
if assigns.align == "left" do
"left-0"
else
"right-0"
end
assigns =
assign(assigns,
wrapper_data: wrapper_data,
show_inner: show_inner,
align_class: align_class
)
~H"""
<div x-data={@wrapper_data} class="tooltip-wrapper w-full relative">
<div
x-cloak
x-show={@show_inner}
class="tooltip-content z-[1000] bg-gray-900 rounded text-white absolute bottom-24 sm:bottom-7 left-0 sm:w-72 p-4 text-sm font-medium"
class={[
"tooltip-content z-[1000] bg-gray-900 rounded text-white absolute bottom-[120%] sm:bottom-7 sm:w-72 p-4 text-sm font-medium",
@align_class
]}
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"

25
lib/plausible_web/live/shields/country_rules.ex
View File

@ -149,16 +149,21 @@ defmodule PlausibleWeb.Live.Shields.CountryRules do
</span>
</td>
<td class="px-6 py-4 text-sm font-medium text-right">
<button
id={"remove-country-rule-#{rule.id}"}
phx-target={@myself}
phx-click="remove-country-rule"
phx-value-rule-id={rule.id}
class="text-sm text-red-600"
data-confirm="Are you sure you want to revoke this rule?"
>
Remove
</button>
<PlausibleWeb.Components.Generic.tooltip align="right">
<:tooltip_content>
Added at <%= format_added_at(rule.inserted_at, @site.timezone) %> by <%= rule.added_by %>
</:tooltip_content>
<button
id={"remove-country-rule-#{rule.id}"}
phx-target={@myself}
phx-click="remove-country-rule"
phx-value-rule-id={rule.id}
class="text-sm text-red-600"
data-confirm="Are you sure you want to revoke this rule?"
>
Remove
</button>
</PlausibleWeb.Components.Generic.tooltip>
</td>
</tr>
<% end %>