feat: Change protected indicator styling (#828)

* feat: Change protected indicator styling

* fix: apply review comment
This commit is contained in:
Alessio Cappa
2026-01-30 12:20:30 +01:00
committed by GitHub
parent 440d4427fb
commit 47897fadd0

View File

@@ -3,26 +3,31 @@
<%# Protection indicator - shows when entry is protected from sync overwrites %>
<%= turbo_frame_tag dom_id(entry, :protection) do %>
<% if entry.protected_from_sync? && !entry.excluded? %>
<details class="mx-4 my-3 border border-primary rounded-lg overflow-hidden">
<summary class="flex items-center gap-2 cursor-pointer p-3 bg-container hover:bg-surface-hover list-none [&::-webkit-details-marker]:hidden">
<%= icon "lock", size: "sm", class: "text-secondary" %>
<span class="text-sm font-medium text-primary flex-1"><%= t("entries.protection.title") %></span>
<%= icon "chevron-down", size: "sm", class: "text-secondary transition-transform [[open]>&]:rotate-180" %>
<details class="group shadow-border-xs bg-container rounded-xl mb-3 text-xs text-secondary">
<summary class="flex items-center justify-between gap-2 cursor-pointer px-3 py-2">
<div class="flex items-center gap-2">
<%= icon "lock", size: "sm", color: "info" %>
<span class="font-medium uppercase"><%= t("entries.protection.title") %></span>
</div>
<%= icon "chevron-down", color: "info", class: "transition-transform [[open]>&]:rotate-180" %>
</summary>
<div class="p-4 border-t border-primary bg-surface-inset space-y-4">
<p class="text-sm text-secondary">
<div class="px-3 py-2 space-y-2">
<p class="text-sm">
<%= t("entries.protection.description") %>
</p>
<% if entry.locked_field_names.any? %>
<div class="space-y-2">
<p class="text-xs font-medium text-secondary"><%= t("entries.protection.locked_fields_label") %></p>
<% entry.locked_fields_with_timestamps.each do |field, timestamp| %>
<div class="flex items-center justify-between text-sm">
<span class="text-primary"><%= field.humanize %></span>
<span class="text-secondary"><%= timestamp.respond_to?(:strftime) ? l(timestamp.to_date, format: :long) : timestamp %></span>
</div>
<% end %>
<div class="px-3 py-2 space-y-2 bg-surface-inset rounded-lg">
<div class="space-y-2">
<p class="text-sm font-medium"><%= t("entries.protection.locked_fields_label") %></p>
<% entry.locked_fields_with_timestamps.each do |field, timestamp| %>
<div class="flex items-center justify-between text-xs gap-2 mb-1">
<span><%= entry.class.human_attribute_name(field) %></span>
<hr class="grow border-dashed border-secondary">
<span><%= timestamp.respond_to?(:strftime) ? l(timestamp.to_date, format: :long) : timestamp %></span>
</div>
<% end %>
</div>
</div>
<% end %>