Skip to content

Commit

Permalink
feat: added copy to clipboard button
Browse files Browse the repository at this point in the history
  • Loading branch information
@CS76
CS76 committed Aug 31, 2024
1 parent 3f1bdcf commit 884fe74
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 8 deletions.
20 changes: 20 additions & 0 deletions app/Livewire/CopyButton.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<?php

namespace App\Livewire;

use Livewire\Component;

class CopyButton extends Component
{
public $textToCopy;

public function mount($textToCopy)
{
$this->textToCopy = $textToCopy;
}

public function render()
{
return view('livewire.copy-button');
}
}
19 changes: 19 additions & 0 deletions resources/views/livewire/copy-button.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<span x-data="{ copied: false }">
<span x-ref="copyText" class="hidden">{{ $textToCopy }}</span>
<button @click="navigator.clipboard.writeText($refs.copyText.textContent).then(() => copied = true)"
class="relative text-center align-middle font-sans text-xs font-medium uppercase transition-all" type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg x-show="!copied" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" class="w-5 h-5 text-dark">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75">
</path>
</svg>
<svg x-show="copied" class="size-4 text-gray-600 rotate-6"
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">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
</button>
</span>
37 changes: 29 additions & 8 deletions resources/views/livewire/molecule-details.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,74 +199,95 @@ class="text-lg font-medium leading-6 text-gray-900">
<article>
<div class="">
<section id="representations" class="my-4">
<div class="group/item -ml-4 rounded-xl p-4 hover:bg-slate-100">
<div class="group -ml-4 rounded-xl p-4 hover:bg-slate-100">
<dt
class="text-sm font-medium text-gray-500 sm:flex sm:justify-between">
COCONUT id
</dt>
<div class="mt-1 break-all text-sm text-gray-900">
{{ $molecule->identifier }}
<span class="float-end mr-2 group-hover:block hidden">
<livewire:copy-button text-to-copy="{{ $molecule->identifier }}" />
</span>
</div>
</div>
<div class="group/item -ml-4 rounded-xl p-4 hover:bg-slate-100">
<div class="group -ml-4 rounded-xl p-4 hover:bg-slate-100">
<dt
class="text-sm font-medium text-gray-500 sm:flex sm:justify-between">
Name
</dt>
<div class="mt-1 break-all text-sm text-gray-900">
{{ $molecule->name ? $molecule->name : '-' }}
<span class="float-end mr-2 group-hover:block hidden">
<livewire:copy-button text-to-copy="{{ $molecule->name }}" />
</span>
</div>
</div>
<div class="group/item -ml-4 rounded-xl p-4 hover:bg-slate-100">
<div class="group -ml-4 rounded-xl p-4 hover:bg-slate-100">
<dt
class="text-sm font-medium text-gray-500 sm:flex sm:justify-between">
IUPAC name
</dt>
<div class="mt-1 break-all text-sm text-gray-900">
{{ $molecule->iupac_name }}
<span class="float-end mr-2 group-hover:block hidden">
<livewire:copy-button text-to-copy="{{ $molecule->iupac_name }}" />
</span>
</div>
</div>
<div class="group/item -ml-4 rounded-xl p-4 hover:bg-slate-100">
<div class="group -ml-4 rounded-xl p-4 hover:bg-slate-100">
<dt
class="text-sm font-medium text-gray-500 sm:flex sm:justify-between">
InChI
</dt>
<div class="mt-1 break-all text-sm text-gray-900">
{{ $molecule->standard_inchi }}
<span class="float-end mr-2 group-hover:block hidden">
<livewire:copy-button text-to-copy="{{ $molecule->standard_inchi }}" />
</span>
</div>
</div>
<div class="group/item -ml-4 rounded-xl p-4 hover:bg-slate-100">
<div class="group -ml-4 rounded-xl p-4 hover:bg-slate-100">
<dt
class="text-sm font-medium text-gray-500 sm:flex sm:justify-between">
InChIKey
</dt>
<div class="mt-1 break-all text-sm text-gray-900">
{{ $molecule->standard_inchi_key }}
<span class="float-end mr-2 group-hover:block hidden">
<livewire:copy-button text-to-copy="{{ $molecule->standard_inchi_key }}" />
</span>
</div>
</div>
<div class="group/item -ml-4 rounded-xl p-4 hover:bg-slate-100">
<div class="group -ml-4 rounded-xl p-4 hover:bg-slate-100">
<dt
class="text-sm font-medium text-gray-500 sm:flex sm:justify-between">
Canonical SMILES (RDKit)
</dt>
<div class="mt-1 break-all text-sm text-gray-900">
{{ $molecule->canonical_smiles }}
<span class="float-end mr-2 group-hover:block hidden">
<livewire:copy-button text-to-copy="{{ $molecule->canonical_smiles }}" />
</span>
</div>
</div>
@if ($molecule->properties)
<div class="group/item -ml-4 rounded-xl p-4 hover:bg-slate-100">
<div class="group -ml-4 rounded-xl p-4 hover:bg-slate-100">
<div class="sm:flex sm:justify-between">
<div class="text-sm font-medium text-gray-500"> Murcko
Framework
</div>
</div>
<div class="mt-1 break-all text-sm text-gray-900">
{{ $molecule->properties->murcko_framework ? $molecule->properties->murcko_framework : '-' }}
<span class="float-end mr-2 group-hover:block hidden">
<livewire:copy-button text-to-copy="{{ $molecule->murcko_framework }}" />
</span>
</div>
</div>
@endif
@if ($molecule->synonyms && count($molecule->synonyms) > 0)
<div class="group/item -ml-4 rounded-xl p-4 hover:bg-slate-100">
<div class="group -ml-4 rounded-xl p-4 hover:bg-slate-100">
<dt
class="text-sm font-medium text-gray-500 sm:flex sm:justify-between">
Synonyms
Expand Down

0 comments on commit 884fe74

Please sign in to comment.