forked from jsnbuchanan/crowd-funder-for-time-pwa
WIP: button and icon additions
- Mirrored "Refresh" and "Visibility" buttons on top and bottom of member list - Added back info icons for list actions - When clicked, Person icon shows informative notification
This commit is contained in:
Jose Olarte III
58
src/App.vue
58
src/App.vue
@@ -389,46 +389,56 @@
|
||||
<!-- Sample data - replace with your actual data -->
|
||||
<tr>
|
||||
<td class="border border-slate-300 px-3 py-2">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" checked />
|
||||
John Doe
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" checked />
|
||||
John Doe
|
||||
</label>
|
||||
|
||||
<!-- Friend indicator -->
|
||||
<font-awesome
|
||||
icon="user-circle"
|
||||
class="fa-fw ms-auto text-slate-400"
|
||||
class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
|
||||
@click="showContactInfo"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-slate-300 px-3 py-2">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" checked />
|
||||
Jane Smith
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" checked />
|
||||
Jane Smith
|
||||
</label>
|
||||
|
||||
<!-- Friend indicator -->
|
||||
<font-awesome
|
||||
icon="user-circle"
|
||||
class="fa-fw ms-auto text-slate-400"
|
||||
class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
|
||||
@click="showContactInfo"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-slate-300 px-3 py-2">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" checked />
|
||||
Jim Beam
|
||||
</label>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" checked />
|
||||
Jim Beam
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-slate-300 px-3 py-2">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" checked />
|
||||
Susie Q
|
||||
</label>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" checked />
|
||||
Susie Q
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -482,6 +492,18 @@ export default class App extends Vue {
|
||||
|
||||
stopAsking = false;
|
||||
|
||||
showContactInfo() {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Contact Info",
|
||||
text: "This user is already your contact, but your activities are not visible to them yet.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
}
|
||||
|
||||
async turnOffNotifications(
|
||||
notification: NotificationIface,
|
||||
): Promise<boolean> {
|
||||
|
||||
@@ -84,45 +84,62 @@
|
||||
:key="member.member.memberId"
|
||||
class="border-b border-slate-300 py-1.5"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center overflow-hidden">
|
||||
<div class="flex items-center gap-2 justify-between">
|
||||
<div class="flex items-center gap-1 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
{{ member.name || unnamedMember }}
|
||||
</h3>
|
||||
<div
|
||||
v-if="!getContactFor(member.did) && member.did !== activeDid"
|
||||
class="flex justify-end"
|
||||
class="flex items-center gap-1"
|
||||
>
|
||||
<button
|
||||
class="btn-add-contact"
|
||||
title="Add as contact"
|
||||
@click="addAsContact(member)"
|
||||
>
|
||||
<font-awesome icon="circle-user" class="text-sm" />
|
||||
<font-awesome icon="circle-user" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn-info-contact"
|
||||
title="Contact Info"
|
||||
@click="
|
||||
informAboutAddingContact(
|
||||
getContactFor(member.did) !== undefined,
|
||||
)
|
||||
"
|
||||
>
|
||||
<font-awesome icon="circle-info" class="text-sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span
|
||||
v-if="
|
||||
showOrganizerTools && isOrganizer && member.did !== activeDid
|
||||
<span
|
||||
v-if="
|
||||
showOrganizerTools && isOrganizer && member.did !== activeDid
|
||||
"
|
||||
class="flex items-center gap-1"
|
||||
>
|
||||
<button
|
||||
class="btn-admission"
|
||||
:title="
|
||||
member.member.admitted ? 'Remove member' : 'Admit member'
|
||||
"
|
||||
class="flex items-center"
|
||||
@click="checkWhetherContactBeforeAdmitting(member)"
|
||||
>
|
||||
<button
|
||||
class="btn-admission"
|
||||
:title="
|
||||
member.member.admitted ? 'Remove member' : 'Admit member'
|
||||
"
|
||||
@click="checkWhetherContactBeforeAdmitting(member)"
|
||||
>
|
||||
<font-awesome
|
||||
:icon="member.member.admitted ? 'minus' : 'plus'"
|
||||
class="text-sm"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<font-awesome
|
||||
:icon="member.member.admitted ? 'minus' : 'plus'"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn-info-admission"
|
||||
title="Admission Info"
|
||||
@click="informAboutAdmission()"
|
||||
>
|
||||
<font-awesome icon="circle-info" class="text-sm" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600 truncate">
|
||||
{{ member.did }}
|
||||
@@ -143,6 +160,15 @@
|
||||
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
|
||||
Refresh <span class="text-xs">(10s)</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
|
||||
title="Set visibility for meeting members"
|
||||
@click="showAddMembersNotification"
|
||||
>
|
||||
<font-awesome icon="eye" />
|
||||
Set Visibility
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="members.length === 0" class="text-gray-500 py-4">
|
||||
@@ -338,7 +364,7 @@ export default class MembersList extends Vue {
|
||||
|
||||
informAboutAdmission() {
|
||||
this.notify.info(
|
||||
"This is to register people in Time Safari and to admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.",
|
||||
"This is to register people in Time Safari and to admit them to the meeting. A (+) symbol means they are not yet admitted and you can register and admit them. A (-) symbol means you can remove them, but they will stay registered.",
|
||||
TIMEOUTS.VERY_LONG,
|
||||
);
|
||||
}
|
||||
@@ -531,29 +557,23 @@ export default class MembersList extends Vue {
|
||||
|
||||
.btn-add-contact {
|
||||
/* stylelint-disable-next-line at-rule-no-unknown */
|
||||
@apply ml-2 w-5 h-5 flex items-center justify-center rounded-full
|
||||
@apply w-6 h-6 flex items-center justify-center rounded-full
|
||||
bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800
|
||||
transition-colors;
|
||||
}
|
||||
|
||||
.btn-info-contact {
|
||||
.btn-info-contact,
|
||||
.btn-info-admission {
|
||||
/* stylelint-disable-next-line at-rule-no-unknown */
|
||||
@apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full
|
||||
bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800
|
||||
@apply w-6 h-6 flex items-center justify-center rounded-full
|
||||
bg-slate-100 text-slate-400 hover:text-slate-600
|
||||
transition-colors;
|
||||
}
|
||||
|
||||
.btn-admission {
|
||||
/* stylelint-disable-next-line at-rule-no-unknown */
|
||||
@apply w-5 h-5 flex items-center justify-center rounded-full
|
||||
@apply w-6 h-6 flex items-center justify-center rounded-full
|
||||
bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800
|
||||
transition-colors;
|
||||
}
|
||||
|
||||
.btn-info-admission {
|
||||
/* stylelint-disable-next-line at-rule-no-unknown */
|
||||
@apply w-6 h-6 flex items-center justify-center rounded-full
|
||||
bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800
|
||||
transition-colors;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user