kosmos/akkounts
kosmos/akkounts
8
1
Fork 0
Code Issues 19 Pull Requests 1 Actions Packages Releases 12 Activity

Add a clipboard controller and wire up the copy button

Browse Source
This commit is contained in:
Râu Cao 2023-01-09 17:35:20 +08:00
parent 6ad02e69a2
commit 87aae35974
Signed by: raucao
GPG Key ID: 15E65F399D084BA9
3 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/javascript/controllers/clipboard_controller.js Normal file
View File

@ -0,0 +1,16 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["source", "trigger"]
copy (event) {
event.preventDefault();
navigator.clipboard.writeText(this.sourceTarget.value);
this.triggerTarget.querySelector('.content-initial').classList.add('hidden');
this.triggerTarget.querySelector('.content-active').classList.remove('hidden');
setTimeout(() => {
this.triggerTarget.querySelector('.content-initial').classList.remove('hidden');
this.triggerTarget.querySelector('.content-active').classList.add('hidden');
}, 2000)
}
}

2
app/views/icons/_check.html.erb
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check <%= custom_class %>"><polyline points="20 6 9 17 4 12"></polyline></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 262 B

After

Width:  |  Height:  |  Size: 283 B

10
app/views/settings/profile/index.html.erb
View File

@ -6,15 +6,17 @@
<p class="mb-1">
<%= label :user_address, 'User address', class: 'font-bold' %>
</p>
<p class="flex gap-1 mb-2 sm:block">
<p data-controller="clipboard" class="flex gap-1 mb-2 sm:block">
<input type="text" id="user_address" class="flex-1 sm:w-3/5"
value=<%= @user.address %> disabled="disabled" />
value=<%= @user.address %> disabled="disabled"
data-clipboard-target="source" />
<button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
data-clipboard-target="trigger" data-action="clipboard#copy"
title="Copy to clipboard">
<span class="icon-initial">
<span class="content-initial">
<%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
</span>
<span class="icon-active hidden">
<span class="content-active hidden">
<%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
</span>
</button>