Browse Source

Update AdmitPendingMembersDialog.vue

feat: add DID display to Pending Members dialog

- Restructure member display with better visual hierarchy
- Add DID display with responsive truncation for mobile
- Simplify button labels ("Admit + Add Contacts" and "Admit Only")
pull/212/head
Jose Olarte III 2 weeks ago
parent
commit
ad51c187aa
  1. 18
      src/components/AdmitPendingMembersDialog.vue

18
src/components/AdmitPendingMembersDialog.vue

@ -52,7 +52,21 @@
:checked="isMemberSelected(member.did)" :checked="isMemberSelected(member.did)"
@change="toggleMemberSelection(member.did)" @change="toggleMemberSelection(member.did)"
/> />
<div class="">
<div class="text-sm font-semibold">
{{ member.name || SOMEONE_UNNAMED }} {{ member.name || SOMEONE_UNNAMED }}
</div>
<div
class="flex items-center gap-0.5 text-xs text-slate-500"
>
<span class="font-semibold sm:hidden">DID:</span>
<span
class="w-[35vw] sm:w-auto truncate text-left"
style="direction: rtl"
>{{ member.did }}</span
>
</div>
</div>
</label> </label>
<!-- Contact indicator - only show if they are already a contact --> <!-- Contact indicator - only show if they are already a contact -->
@ -81,7 +95,7 @@
]" ]"
@click="admitAndSetVisibility" @click="admitAndSetVisibility"
> >
Admit Pending + Add Contacts Admit + Add Contacts
</button> </button>
<button <button
v-if="pendingMembersData && pendingMembersData.length > 0" v-if="pendingMembersData && pendingMembersData.length > 0"
@ -94,7 +108,7 @@
]" ]"
@click="admitOnly" @click="admitOnly"
> >
Admit Pending Only Admit Only
</button> </button>
<button <button
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md" class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"

Loading…
Cancel
Save