graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui tweaks

Browse source
This commit is contained in:
Graham McIntire 2026-01-26 13:34:52 -06:00
parent 06fde717c0
commit 74f2970664
No known key found for this signature in database
3 changed files with 38 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
assets/js/app.ts
View file

@ -329,17 +329,37 @@ const CopyToClipboard = {
text = targetEl.innerText || targetEl.textContent || ""
}
// Trim any whitespace from the text
text = text.trim()
if (text) {
navigator.clipboard.writeText(text).then(() => {
console.log('Copied to clipboard successfully')
// Optional: Show visual feedback
const originalText = this.el.innerHTML
this.el.innerHTML = '<svg class="h-3 w-3 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> Copied!'
// Show visual feedback
const originalHTML = this.el.innerHTML
const originalClasses = this.el.className
// Update button to show success state
this.el.innerHTML = '<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg><span>Copied!</span>'
this.el.className = originalClasses.replace('bg-blue-600', 'bg-green-600').replace('hover:bg-blue-700', 'hover:bg-green-700').replace('bg-blue-500', 'bg-green-500').replace('hover:bg-blue-600', 'hover:bg-green-600')
setTimeout(() => {
this.el.innerHTML = originalText
this.el.innerHTML = originalHTML
this.el.className = originalClasses
}, 2000)
}).catch(err => {
console.error('Failed to copy:', err)
// Show error state
const originalHTML = this.el.innerHTML
const originalClasses = this.el.className
this.el.innerHTML = '<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg><span>Failed</span>'
this.el.className = originalClasses.replace('bg-blue-600', 'bg-red-600').replace('hover:bg-blue-700', 'hover:bg-red-700').replace('bg-blue-500', 'bg-red-500').replace('hover:bg-blue-600', 'hover:bg-red-600')
setTimeout(() => {
this.el.innerHTML = originalHTML
this.el.className = originalClasses
}, 2000)
})
} else {
console.error('No text found to copy')

13
lib/towerops_web/live/agent_live/index.html.heex
View file

@ -368,20 +368,25 @@
<input
type="text"
readonly
value={@new_token.token}
class="w-full font-mono text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-3 py-2 pr-24 text-gray-900 dark:text-white"
value={String.trim(@new_token.token)}
class="w-full font-mono text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-3 py-2 pr-28 text-gray-900 dark:text-white select-all"
id="agent-token-input"
onclick="this.select()"
/>
<button
type="button"
phx-hook="CopyToClipboard"
data-target="#agent-token-input"
id={"copy-token-#{@new_token.agent_token.id}"}
class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1 text-xs font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded shadow-sm transition-colors flex items-center gap-1.5"
>
<.icon name="hero-clipboard" class="h-4 w-4" />
<.icon name="hero-clipboard" class="h-3.5 w-3.5" />
<span>Copy</span>
</button>
</div>
<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
Click the token to select all, or use the Copy button
</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">

10
lib/towerops_web/live/device_live/index.html.heex
View file

@ -239,7 +239,7 @@
<%= for {device, device_index} <- Enum.with_index(devices) do %>
<tr
class={[
"border-t device-row",
"border-t device-row hover:bg-gray-50 dark:hover:bg-gray-800/50",
if(device_index == 0,
do: "border-gray-300 dark:border-white/15",
else: "border-gray-200 dark:border-white/10"
@ -262,7 +262,7 @@
<td
phx-click={JS.navigate(~p"/devices/#{device.id}")}
class={[
"py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50",
"py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white cursor-pointer",
@reorder_mode && "pl-2",
!@reorder_mode && "pl-4 sm:pl-3"
]}
@ -271,13 +271,13 @@
</td>
<td
phx-click={JS.navigate(~p"/devices/#{device.id}")}
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400 font-mono cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400 font-mono cursor-pointer"
>
{device.ip_address}
</td>
<td
phx-click={JS.navigate(~p"/devices/#{device.id}")}
class="px-3 py-4 text-sm whitespace-nowrap cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
class="px-3 py-4 text-sm whitespace-nowrap cursor-pointer"
>
<span class={[
"inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
@ -293,7 +293,7 @@
</td>
<td
phx-click={JS.navigate(~p"/devices/#{device.id}")}
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400 cursor-pointer"
>
<.timestamp datetime={device.last_checked_at} timezone={@timezone} />
</td>