Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-03 04:25:21 +02:00
Code Issues Releases Activity Actions

Add stimulus tooltip controller (#1065)

Browse source 
* Add Tooltip Stimulus controller

* Add test for tooltip

* Remove comma

* Normalize translations

* Use floating-ui instead popper

* Use component classes

* Increase cross axis value

* Cleanup

* Update app/views/accounts/show.html.erb

Use correct tailwind class

Co-authored-by: Zach Gollwitzer <zach.gollwitzer@gmail.com>
Signed-off-by: Tony Vincent <tonyvince7@gmail.com>

* Use default values for options

* Remove tooltip global variable

* Add arrow target

* Remove unused method

---------

Signed-off-by: Tony Vincent <tonyvince7@gmail.com>
Co-authored-by: Zach Gollwitzer <zach.gollwitzer@gmail.com>
This commit is contained in:
Tony Vincent 2024-08-08 12:53:27 +02:00 • committed by GitHub
parent 6e74414cb2
commit f315370512
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 164 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

26
app/views/accounts/_tooltip.html.erb Normal file
View file

@ -0,0 +1,26 @@
<%# locals: (account:) -%>
<div data-controller="tooltip" data-tooltip-target="element" data-tooltip-placement-value="right" data-tooltip-offset-value=10 data-tooltip-cross-axis-value=50>
<%= lucide_icon("info", class: "w-4 h-4 shrink-0 text-gray-500") %>
<div id="tooltip" role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
<div class="text-white">
<%= t(".total_value_tooltip") %>
</div>
<div class="flex pt-3">
<div class="text-gray-300">
<%= t(".holdings") %>
</div>
<div class="text-white ml-auto">
<%= tag.p format_money(account.investment.holdings_value, precision: 0) %>
</div>
</div>
<div class="flex">
<div class="text-gray-300">
<%= t(".cash") %>
</div>
<div class="text-white ml-auto">
<%= tag.p format_money(account.balance_money, precision: 0) %>
</div>
</div>
</div>
<div data-tooltip-target="arrow"></div>
</div>

7
app/views/accounts/show.html.erb
View file

@ -52,7 +52,12 @@
<div class="bg-white shadow-xs rounded-xl border border-alpha-black-25 rounded-lg">
<div class="p-4 flex justify-between">
<div class="space-y-2">
<%= tag.p t(".total_value"), class: "text-sm font-medium text-gray-500" %>
<div class="flex items-center gap-1">
<div>
<%= tag.p t(".total_value"), class: "text-sm font-medium text-gray-500" %>
</div>
<%= render "tooltip", account: @account if @account.investment? %>
</div>
<%= tag.p format_money(@account.value, precision: 0), class: "text-gray-900 text-3xl font-medium" %>
<div>
<% if @series.trend.direction.flat? %>