CHORE: Improve UI (#112)
* Refactor merchant details layout for improved responsiveness and styling in index.html * Revamp key pair component layout with improved styling and functionality. Added a header with a toggle for showing the private key, enhanced QR code display for both public and private keys, and included copy buttons for better user interaction. Update key pair component styling and functionality: adjust QR code dimensions, improve key display format with truncation, and refine button margins for enhanced user experience. Add 'show-buttons' prop to QR code components in key pair template for improved functionality Update key pair component layout to use 'col-sm-6' for responsive design of QR code sections, enhancing display on smaller screens. * Enhance direct messages component layout with improved styling and responsiveness. Updated class names for better alignment, added ellipsis for long customer labels, and modified button styles for consistency. Improved select options display with custom templates for better user experience. * Refactor customer label generation in direct messages component for improved readability. Added checks for undefined customer data, enhanced label formatting with truncation for long descriptions, and adjusted unread message display format. * make format
This commit is contained in:
PatMulligan
GitHub
parent
d43a3b196c
commit
33c62ba1ea
5 changed files with 138 additions and 64 deletions
|
|
@ -50,13 +50,16 @@ window.app.component('direct-messages', {
|
|||
methods: {
|
||||
sendMessage: async function () {},
|
||||
buildCustomerLabel: function (c) {
|
||||
let label = `${c.profile.name || 'unknown'} ${c.profile.about || ''}`
|
||||
if (c.unread_messages) {
|
||||
label += `[new: ${c.unread_messages}]`
|
||||
if (!c) return ''
|
||||
let label = c.profile.name || 'unknown'
|
||||
if (c.profile.about) {
|
||||
label += ` - ${c.profile.about.substring(0, 30)}`
|
||||
if (c.profile.about.length > 30) label += '...'
|
||||
}
|
||||
label += ` (${c.public_key.slice(0, 16)}...${c.public_key.slice(
|
||||
c.public_key.length - 16
|
||||
)}`
|
||||
if (c.unread_messages) {
|
||||
label = `[${c.unread_messages} new] ${label}`
|
||||
}
|
||||
label += ` (${c.public_key.slice(0, 8)}...${c.public_key.slice(-8)})`
|
||||
return label
|
||||
},
|
||||
getDirectMessages: async function (pubkey) {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<div>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<div class="row items-center q-col-gutter-sm">
|
||||
<div class="col-auto">
|
||||
<h6 class="text-subtitle1 q-my-none">Messages</h6>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="col-auto">
|
||||
<q-badge v-if="unreadMessages" color="primary" outline
|
||||
><span v-text="unreadMessages"></span> new</q-badge
|
||||
>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-auto q-ml-auto">
|
||||
<q-btn
|
||||
v-if="activePublicKey"
|
||||
@click="showClientOrders"
|
||||
unelevated
|
||||
outline
|
||||
class="float-right"
|
||||
size="sm"
|
||||
>Client Orders</q-btn
|
||||
>
|
||||
</div>
|
||||
|
|
@ -26,22 +26,40 @@
|
|||
<q-separator></q-separator>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<div class="row q-col-gutter-sm items-end">
|
||||
<div class="col" style="min-width: 0">
|
||||
<q-select
|
||||
v-model="activePublicKey"
|
||||
:options="customers.map(c => ({label: buildCustomerLabel(c), value: c.public_key}))"
|
||||
label="Select Customer"
|
||||
emit-value
|
||||
@input="selectActiveCustomer()"
|
||||
:display-value="activePublicKey ? buildCustomerLabel(customers.find(c => c.public_key === activePublicKey)) : ''"
|
||||
class="ellipsis"
|
||||
>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<span v-text="scope.opt.label.split('(')[0]"></span>
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
class="text-mono"
|
||||
style="word-break: break-all"
|
||||
>
|
||||
<span v-text="scope.opt.value"></span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
label="Add"
|
||||
label="ADD"
|
||||
color="primary"
|
||||
class="float-right q-mt-md"
|
||||
unelevated
|
||||
@click="showAddPublicKey = true"
|
||||
>
|
||||
<q-tooltip> Add a public key to chat with </q-tooltip>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,93 @@
|
|||
<div>
|
||||
<q-separator></q-separator>
|
||||
<div class="row q-mt-md">
|
||||
<div class="col-6 q-pl-xl">Public Key</div>
|
||||
<div class="col-6">
|
||||
<q-toggle v-model="showPrivateKey" class="q-pl-xl" color="secodary">
|
||||
Show Private Key
|
||||
</q-toggle>
|
||||
</div>
|
||||
|
||||
<!-- Header with toggle -->
|
||||
<div class="row items-center justify-between q-mt-md q-px-md">
|
||||
<div class="text-subtitle2">Keys</div>
|
||||
<q-toggle
|
||||
v-model="showPrivateKey"
|
||||
color="primary"
|
||||
label="Show Private Key"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="text-center q-mb-lg cursor-pointer">
|
||||
<q-responsive :ratio="1" class="q-mx-xl" @click="copyText(publicKey)">
|
||||
<lnbits-qrcode
|
||||
:value="publicKey"
|
||||
:options="{width: 250}"
|
||||
class="rounded-borders"
|
||||
></lnbits-qrcode>
|
||||
</q-responsive>
|
||||
<small><span v-text="publicKey"></span><br />Click to copy</small>
|
||||
</div>
|
||||
<!-- QR Codes Container -->
|
||||
<div class="row q-col-gutter-md q-pa-md">
|
||||
<!-- Public Key QR -->
|
||||
<div class="col-12" :class="showPrivateKey ? 'col-sm-6' : ''">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="text-center">
|
||||
<div class="text-subtitle2 q-mb-sm">Public Key</div>
|
||||
<div
|
||||
class="cursor-pointer q-mx-auto"
|
||||
style="max-width: 200px"
|
||||
@click="copyText(publicKey)"
|
||||
>
|
||||
<q-responsive :ratio="1">
|
||||
<lnbits-qrcode
|
||||
:value="publicKey"
|
||||
:options="{width: 200}"
|
||||
:show-buttons="false"
|
||||
class="rounded-borders"
|
||||
></lnbits-qrcode>
|
||||
</q-responsive>
|
||||
</div>
|
||||
<div class="q-mt-md text-caption text-mono" style="padding: 0 16px">
|
||||
<span v-text="publicKey.substring(0, 8)"></span>...<span
|
||||
v-text="publicKey.substring(publicKey.length - 8)"
|
||||
></span>
|
||||
</div>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
size="sm"
|
||||
icon="content_copy"
|
||||
label="Click to copy"
|
||||
@click="copyText(publicKey)"
|
||||
class="q-mt-xs"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-6 cursor-pointer">
|
||||
<div v-if="showPrivateKey">
|
||||
<div class="text-center q-mb-lg">
|
||||
<q-responsive
|
||||
:ratio="1"
|
||||
class="q-mx-xl"
|
||||
|
||||
<!-- Private Key QR (conditional) -->
|
||||
<div v-if="showPrivateKey" class="col-12 col-sm-6">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="text-center">
|
||||
<div class="text-subtitle2 q-mb-sm text-warning">
|
||||
<q-icon name="warning"></q-icon>
|
||||
Private Key (Keep Secret!)
|
||||
</div>
|
||||
<div
|
||||
class="cursor-pointer q-mx-auto"
|
||||
style="max-width: 200px"
|
||||
@click="copyText(privateKey)"
|
||||
>
|
||||
<lnbits-qrcode :value="privateKey"></lnbits-qrcode>
|
||||
</q-responsive>
|
||||
<small><span v-text="privateKey"></span><br />Click to copy</small>
|
||||
</div>
|
||||
</div>
|
||||
<q-responsive :ratio="1">
|
||||
<lnbits-qrcode
|
||||
:value="privateKey"
|
||||
:options="{width: 200}"
|
||||
:show-buttons="false"
|
||||
class="rounded-borders"
|
||||
></lnbits-qrcode>
|
||||
</q-responsive>
|
||||
</div>
|
||||
<div class="q-mt-md text-caption text-mono" style="padding: 0 16px">
|
||||
<span v-text="privateKey.substring(0, 8)"></span>...<span
|
||||
v-text="privateKey.substring(privateKey.length - 8)"
|
||||
></span>
|
||||
</div>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
size="sm"
|
||||
icon="content_copy"
|
||||
label="Click to copy"
|
||||
@click="copyText(privateKey)"
|
||||
class="q-mt-xs"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@
|
|||
/>
|
||||
</q-td>
|
||||
|
||||
|
||||
<q-td key="id" :props="props"
|
||||
><span v-text="shortLabel(props.row.name)"></span
|
||||
></q-td>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
<div v-if="merchant && merchant.id">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="row items-center q-col-gutter-sm">
|
||||
<div class="col-12 col-sm-auto">
|
||||
<merchant-details
|
||||
:merchant-id="merchant.id"
|
||||
:inkey="g.user.wallets[0].inkey"
|
||||
|
|
@ -16,25 +16,26 @@
|
|||
@merchant-deleted="handleMerchantDeleted"
|
||||
></merchant-details>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-toggle
|
||||
@update:model-value="toggleMerchantState()"
|
||||
size="md"
|
||||
checked-icon="check"
|
||||
v-model="merchant.config.active"
|
||||
color="primary"
|
||||
unchecked-icon="clear"
|
||||
class="float-left"
|
||||
/>
|
||||
<span
|
||||
v-text="merchant.config.active ? 'Accepting Orders': 'Orders Paused'"
|
||||
></span>
|
||||
<div class="col-12 col-sm-auto q-mx-sm">
|
||||
<div class="row items-center no-wrap">
|
||||
<q-toggle
|
||||
@update:model-value="toggleMerchantState()"
|
||||
size="md"
|
||||
checked-icon="check"
|
||||
v-model="merchant.config.active"
|
||||
color="primary"
|
||||
unchecked-icon="clear"
|
||||
/>
|
||||
<span
|
||||
class="q-ml-sm"
|
||||
v-text="merchant.config.active ? 'Accepting Orders': 'Orders Paused'"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="col-12 col-sm-auto q-ml-sm-auto">
|
||||
<shipping-zones
|
||||
:inkey="g.user.wallets[0].inkey"
|
||||
:adminkey="g.user.wallets[0].adminkey"
|
||||
class="float-right"
|
||||
></shipping-zones>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue