Add QR code icon, button, modal for invites

Using https://excid3.github.io/tailwindcss-stimulus-components/
This commit is contained in:
Râu Cao
2023-06-27 17:23:43 +02:00
parent 7ebcf55669
commit fadcc15865
12 changed files with 93 additions and 6 deletions

View File

@@ -8,20 +8,25 @@
</p>
<ul class="md:w-3/4">
<% @invitations_unused.each do |invitation| %>
<li class="font-mono mb-2 flex gap-1" data-controller="clipboard">
<input type="text" disabled class="relative grow"
<li class="mb-2 flex gap-1" data-controller="clipboard modal">
<input type="text" disabled class="relative grow font-mono"
value="<%= invitation_url(invitation.token) %>"
data-clipboard-target="source" />
<button id="copy-user-address" class="btn-md btn-icon btn-blue shrink-0 w-auto"
<button class="btn-md btn-icon btn-outline shrink-0 w-auto"
data-clipboard-target="trigger" data-action="clipboard#copy"
title="Copy to clipboard">
<span class="content-initial">
<%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
<%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
</span>
<span class="content-active hidden">
<%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
<%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
</span>
</button>
<button class="btn-md btn-icon btn-outline shrink-0 w-auto"
data-action="click->modal#open" title="Show QR code">
<%= render partial: "icons/qr_code", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
</button>
<%= render QrCodeModalComponent.new(qr_content: invitation_url(invitation.token)) %>
</li>
<% end %>
</ul>