Add QR code icon, button, modal for invites
Using https://excid3.github.io/tailwindcss-stimulus-components/
This commit is contained in:
parent
83e3e2ecd8
commit
c78df9e5f1
|
@ -2,6 +2,7 @@
|
|||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
@import "components/animations";
|
||||
@import "components/base";
|
||||
@import "components/buttons";
|
||||
@import "components/dashboard_services";
|
||||
|
|
16
app/assets/stylesheets/components/animations.css
Normal file
16
app/assets/stylesheets/components/animations.css
Normal file
|
@ -0,0 +1,16 @@
|
|||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation-name: scaleIn;
|
||||
animation-duration: 0.15s;
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1);
|
||||
}
|
15
app/components/modal_component.html.erb
Normal file
15
app/components/modal_component.html.erb
Normal file
|
@ -0,0 +1,15 @@
|
|||
<div data-modal-target="container"
|
||||
data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
|
||||
class="hidden animate-scale-in fixed inset-0 overflow-y-auto flex items-center justify-center"
|
||||
style="z-index: 9999;">
|
||||
<div class="max-h-screen w-auto max-w-lg relative">
|
||||
<div class="m-1 bg-white rounded shadow">
|
||||
<div class="p-8">
|
||||
<%= content %>
|
||||
<div class="flex justify-end items-center flex-wrap mt-6">
|
||||
<button class="btn-md btn-blue" data-action="click->modal#close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
2
app/components/modal_component.rb
Normal file
2
app/components/modal_component.rb
Normal file
|
@ -0,0 +1,2 @@
|
|||
class ModalComponent < ViewComponent::Base
|
||||
end
|
6
app/components/qr_code_modal_component.html.erb
Normal file
6
app/components/qr_code_modal_component.html.erb
Normal file
|
@ -0,0 +1,6 @@
|
|||
<%= render ModalComponent.new do %>
|
||||
<% if @descripton.present? %>
|
||||
<p class="mb-6"><%= @description %></p>
|
||||
<% end %>
|
||||
<p><%= raw @qr_code_svg %></p>
|
||||
<% end %>
|
24
app/components/qr_code_modal_component.rb
Normal file
24
app/components/qr_code_modal_component.rb
Normal file
|
@ -0,0 +1,24 @@
|
|||
require "rqrcode"
|
||||
|
||||
class QrCodeModalComponent < ViewComponent::Base
|
||||
def initialize(qr_content:, description: nil)
|
||||
@description = description
|
||||
@qr_code_svg = qr_code_svg(qr_content)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def qr_code_svg(content)
|
||||
qr_code = RQRCode::QRCode.new(content)
|
||||
qr_code.as_svg(
|
||||
color: "000",
|
||||
shape_rendering: "crispEdges",
|
||||
module_size: 6,
|
||||
standalone: true,
|
||||
use_path: true,
|
||||
svg_attributes: {
|
||||
class: 'inline-block'
|
||||
}
|
||||
)
|
||||
end
|
||||
end
|
|
@ -1,7 +1,10 @@
|
|||
import { Application } from "@hotwired/stimulus"
|
||||
import { Modal } from "tailwindcss-stimulus-components"
|
||||
|
||||
const application = Application.start()
|
||||
|
||||
application.register('modal', Modal)
|
||||
|
||||
// Configure Stimulus development experience
|
||||
application.debug = false
|
||||
window.Stimulus = application
|
||||
|
|
11
app/views/icons/_qr_code.html.erb
Normal file
11
app/views/icons/_qr_code.html.erb
Normal file
|
@ -0,0 +1,11 @@
|
|||
<svg class="icon-qr-code <%= custom_class %>" fill="currentColor" width="90" height="90" version="1.1" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="path2" d="m22.014 22.612c0-2.5389 2.0586-4.5976 4.5976-4.5976h9.1937c2.539 0 4.5976 2.0587 4.5976 4.5976v6.1937c0 2.539-2.0586 4.5976-4.5976 4.5976h-9.1937c-2.539 0-4.5976-2.0586-4.5976-4.5976z"/>
|
||||
<path id="path4" d="m22.014 61.598c0-2.539 2.0586-4.5976 4.5976-4.5976h9.1937c2.539 0 4.5976 2.0586 4.5976 4.5976v6.1937c0 2.539-2.0586 4.5976-4.5976 4.5976h-9.1937c-2.539 0-4.5976-2.0586-4.5976-4.5976z"/>
|
||||
<path id="path6" d="m50 22.612c0-2.5389 2.0586-4.5976 4.5976-4.5976h9.1937c2.539 0 4.5976 2.0587 4.5976 4.5976v6.1937c0 2.539-2.0586 4.5976-4.5976 4.5976h-9.1937c-2.539 0-4.5976-2.0586-4.5976-4.5976z"/>
|
||||
<path id="path8" d="m50 61.598c0-2.539 2.0586-4.5976 4.5976-4.5976h9.1937c2.539 0 4.5976 2.0586 4.5976 4.5976v6.1937c0 2.539-2.0586 4.5976-4.5976 4.5976h-9.1937c-2.539 0-4.5976-2.0586-4.5976-4.5976z"/>
|
||||
<path id="path10" d="m8.85 45c0-1.7397 1.4103-3.15 3.15-3.15h66.5c1.7397 0 3.15 1.4103 3.15 3.15s-1.4103 3.15-3.15 3.15h-66.5c-1.7397 0-3.15-1.4103-3.15-3.15z" clip-rule="evenodd" fill-rule="evenodd"/>
|
||||
<path id="path12" d="m11.566 0c-6.3876 0-11.566 5.1782-11.566 11.566v14.627c0 1.7713 1.4359 3.2073 3.2072 3.2073s3.2072-1.436 3.2072-3.2073v-14.627c0-2.845 2.3064-5.1514 5.1514-5.1514h14.627c1.7713 0 3.2073-1.4359 3.2073-3.2072s-1.436-3.2072-3.2073-3.2072z" clip-rule="evenodd" fill-rule="evenodd"/>
|
||||
<path id="path14" d="m11.566 90c-6.3876 0-11.566-5.1782-11.566-11.566v-14.628c0-1.7713 1.4359-3.2072 3.2072-3.2072s3.2072 1.4359 3.2072 3.2072v14.628c0 2.845 2.3064 5.1513 5.1514 5.1513h14.627c1.7713 0 3.2073 1.436 3.2073 3.2073 0 1.7712-1.436 3.2072-3.2073 3.2072z" clip-rule="evenodd" fill-rule="evenodd"/>
|
||||
<path id="path16" d="m78.434 0c6.3876 0 11.566 5.1782 11.566 11.566v14.627c0 1.7713-1.4359 3.2073-3.2072 3.2073s-3.2072-1.436-3.2072-3.2073v-14.627c0-2.845-2.3064-5.1514-5.1514-5.1514h-14.627c-1.7713 0-3.2073-1.4359-3.2073-3.2072s1.436-3.2072 3.2073-3.2072z" clip-rule="evenodd" fill-rule="evenodd"/>
|
||||
<path id="path18" d="m78.434 90c6.3876 0 11.566-5.1782 11.566-11.566v-14.628c0-1.7713-1.4359-3.2072-3.2072-3.2072s-3.2072 1.4359-3.2072 3.2072v14.628c0 2.845-2.3064 5.1513-5.1514 5.1513h-14.627c-1.7713 0-3.2073 1.436-3.2073 3.2073 0 1.7712 1.436 3.2072 3.2073 3.2072z" clip-rule="evenodd" fill-rule="evenodd"/>
|
||||
</svg>
|
After Width: | Height: | Size: 2.4 KiB |
|
@ -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>
|
||||
|
|
|
@ -6,3 +6,4 @@ pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
|
|||
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
|
||||
pin_all_from "app/javascript/controllers", under: "controllers"
|
||||
pin "bech32" # @2.0.0
|
||||
pin "tailwindcss-stimulus-components" # @3.0.4
|
||||
|
|
|
@ -5,7 +5,8 @@ module.exports = {
|
|||
'./app/components/**/*.rb',
|
||||
'./app/views/**/*.html.erb',
|
||||
'./app/helpers/**/*.rb',
|
||||
'./app/javascript/**/*.js'
|
||||
'./app/javascript/**/*.js',
|
||||
'./vendor/javascript/tailwindcss-stimulus-components.js'
|
||||
],
|
||||
safelist: [
|
||||
'bg-gray-100', 'text-gray-800',
|
||||
|
|
2
vendor/javascript/tailwindcss-stimulus-components.js
vendored
Normal file
2
vendor/javascript/tailwindcss-stimulus-components.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user