Improve styling of imports list (#4069)

This commit is contained in:
Adrian Gruntkowski 2024-05-06 10:38:37 +02:00 committed by GitHub
parent 035cb3a379
commit 39357150e9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -121,74 +121,87 @@ defmodule PlausibleWeb.Live.ImportsExportsSettings do
</div>
<ul :if={not Enum.empty?(@site_imports)}>
<li :for={entry <- @site_imports} class="py-4 flex items-center justify-between space-x-4">
<.import_entry entry={entry} site={@site} pageview_counts={@pageview_counts} />
</li>
</ul>
"""
end
defp import_entry(assigns) do
label_class =
if assigns.entry.live_status != SiteImport.failed() do
"ml-2"
end
assigns = assign(assigns, :label_class, label_class)
~H"""
<div class="flex flex-col">
<div class="flex items-center text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
<Heroicons.clock
:if={entry.live_status == SiteImport.pending()}
:if={@entry.live_status == SiteImport.pending()}
class="block h-6 w-5 text-indigo-600 dark:text-green-600"
/>
<.spinner
:if={entry.live_status == SiteImport.importing()}
:if={@entry.live_status == SiteImport.importing()}
class="block h-6 w-5 text-indigo-600 dark:text-green-600"
/>
<Heroicons.check
:if={entry.live_status == SiteImport.completed()}
:if={@entry.live_status == SiteImport.completed()}
class="block h-6 w-5 text-indigo-600 dark:text-green-600"
/>
<Heroicons.exclamation_triangle
:if={entry.live_status == SiteImport.failed()}
:if={@entry.live_status == SiteImport.failed()}
class="block h-6 w-5 text-red-700 dark:text-red-700"
/>
<div :if={entry.live_status == SiteImport.failed()}>
<div :if={@entry.live_status == SiteImport.failed()} class="ml-2 mr-1">
Import failed -
</div>
<.tooltip :if={entry.tooltip} wrapper_class="ml-2 grow" class="justify-left">
<%= Plausible.Imported.SiteImport.label(entry.site_import) %>
<.tooltip :if={@entry.tooltip} wrapper_class={[@label_class, "grow"]} class="justify-left">
<%= Plausible.Imported.SiteImport.label(@entry.site_import) %>
<:tooltip_content>
<.notice_message message_label={entry.tooltip} />
<.notice_message message_label={@entry.tooltip} />
</:tooltip_content>
</.tooltip>
<div :if={!entry.tooltip} class="ml-2">
<%= Plausible.Imported.SiteImport.label(entry.site_import) %>
<div :if={!@entry.tooltip} class={[@label_class]}>
<%= Plausible.Imported.SiteImport.label(@entry.site_import) %>
</div>
<div :if={entry.live_status == SiteImport.completed()} class="text-xs font-normal ml-1">
<div :if={@entry.live_status == SiteImport.completed()} class="text-xs font-normal ml-1">
(<%= PlausibleWeb.StatsView.large_number_format(
pageview_count(entry.site_import, @pageview_counts)
pageview_count(@entry.site_import, @pageview_counts)
) %> page views)
</div>
</div>
<div class="text-sm leading-5 text-gray-500 dark:text-gray-200">
From <%= format_date(entry.site_import.start_date) %> to <%= format_date(
entry.site_import.end_date
From <%= format_date(@entry.site_import.start_date) %> to <%= format_date(
@entry.site_import.end_date
) %>
<%= if entry.live_status == SiteImport.completed() do %>
<%= if @entry.live_status == SiteImport.completed() do %>
(imported
<% else %>
(started
<% end %>
on <%= format_date(entry.site_import.inserted_at) %>)
on <%= format_date(@entry.site_import.inserted_at) %>)
</div>
</div>
<.button
data-to={"/#{URI.encode_www_form(@site.domain)}/settings/forget-import/#{entry.site_import.id}"}
data-to={"/#{URI.encode_www_form(@site.domain)}/settings/forget-import/#{@entry.site_import.id}"}
theme="danger"
data-method="delete"
data-csrf={Plug.CSRFProtection.get_csrf_token()}
class="sm:ml-3 sm:w-auto w-full"
data-confirm="Are you sure you want to delete this import?"
>
<span :if={entry.live_status == SiteImport.completed()}>
<span :if={@entry.live_status == SiteImport.completed()}>
Delete Import
</span>
<span :if={entry.live_status == SiteImport.failed()}>
<span :if={@entry.live_status == SiteImport.failed()}>
Discard
</span>
<span :if={entry.live_status not in [SiteImport.completed(), SiteImport.failed()]}>
<span :if={@entry.live_status not in [SiteImport.completed(), SiteImport.failed()]}>
Cancel Import
</span>
</.button>
</li>
</ul>
"""
end