trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

WIP: button and icon additions

Browse Source 
- 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
2025-10-13 21:38:12 +08:00
parent 461ee84d2a
commit b84546686a
2 changed files with 96 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/App.vue
View File

@@ -389,46 +389,56 @@
<!-- Sample data - replace with your actual data --> <!-- Sample data - replace with your actual data -->
<tr> <tr>
<td class="border border-slate-300 px-3 py-2"> <td class="border border-slate-300 px-3 py-2">
<label class="flex items-center gap-2"> <div class="flex items-center justify-between gap-2">
<input type="checkbox" checked /> <label class="flex items-center gap-2">
John Doe <input type="checkbox" checked />
John Doe
</label>
<!-- Friend indicator --> <!-- Friend indicator -->
<font-awesome <font-awesome
icon="user-circle" 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> </td>
</tr> </tr>
<tr> <tr>
<td class="border border-slate-300 px-3 py-2"> <td class="border border-slate-300 px-3 py-2">
<label class="flex items-center gap-2"> <div class="flex items-center justify-between gap-2">
<input type="checkbox" checked /> <label class="flex items-center gap-2">
Jane Smith <input type="checkbox" checked />
Jane Smith
</label>
<!-- Friend indicator --> <!-- Friend indicator -->
<font-awesome <font-awesome
icon="user-circle" 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> </td>
</tr> </tr>
<tr> <tr>
<td class="border border-slate-300 px-3 py-2"> <td class="border border-slate-300 px-3 py-2">
<label class="flex items-center gap-2"> <div class="flex items-center justify-between gap-2">
<input type="checkbox" checked /> <label class="flex items-center gap-2">
Jim Beam <input type="checkbox" checked />
</label> Jim Beam
</label>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="border border-slate-300 px-3 py-2"> <td class="border border-slate-300 px-3 py-2">
<label class="flex items-center gap-2"> <div class="flex items-center justify-between gap-2">
<input type="checkbox" checked /> <label class="flex items-center gap-2">
Susie Q <input type="checkbox" checked />
</label> Susie Q
</label>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@@ -482,6 +492,18 @@ export default class App extends Vue {
stopAsking = false; 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( async turnOffNotifications(
notification: NotificationIface, notification: NotificationIface,
): Promise<boolean> { ): Promise<boolean> {

92
src/components/MembersList.vue
View File

@@ -84,45 +84,62 @@
:key="member.member.memberId" :key="member.member.memberId"
class="border-b border-slate-300 py-1.5" class="border-b border-slate-300 py-1.5"
> >
<div class="flex items-center justify-between"> <div class="flex items-center gap-2 justify-between">
<div class="flex items-center overflow-hidden"> <div class="flex items-center gap-1 overflow-hidden">
<h3 class="font-semibold truncate"> <h3 class="font-semibold truncate">
{{ member.name || unnamedMember }} {{ member.name || unnamedMember }}
</h3> </h3>
<div <div
v-if="!getContactFor(member.did) && member.did !== activeDid" v-if="!getContactFor(member.did) && member.did !== activeDid"
class="flex justify-end" class="flex items-center gap-1"
> >
<button <button
class="btn-add-contact" class="btn-add-contact"
title="Add as contact" title="Add as contact"
@click="addAsContact(member)" @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> </button>
</div> </div>
</div> </div>
<div class="flex"> <span
<span v-if="
v-if=" showOrganizerTools && isOrganizer && member.did !== activeDid
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 <font-awesome
class="btn-admission" :icon="member.member.admitted ? 'minus' : 'plus'"
:title=" />
member.member.admitted ? 'Remove member' : 'Admit member' </button>
"
@click="checkWhetherContactBeforeAdmitting(member)" <button
> class="btn-info-admission"
<font-awesome title="Admission Info"
:icon="member.member.admitted ? 'minus' : 'plus'" @click="informAboutAdmission()"
class="text-sm" >
/> <font-awesome icon="circle-info" class="text-sm" />
</button> </button>
</span> </span>
</div>
</div> </div>
<p class="text-xs text-gray-600 truncate"> <p class="text-xs text-gray-600 truncate">
{{ member.did }} {{ member.did }}
@@ -143,6 +160,15 @@
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" /> <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
Refresh <span class="text-xs">(10s)</span> Refresh <span class="text-xs">(10s)</span>
</button> </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> </div>
<p v-if="members.length === 0" class="text-gray-500 py-4"> <p v-if="members.length === 0" class="text-gray-500 py-4">
@@ -338,7 +364,7 @@ export default class MembersList extends Vue {
informAboutAdmission() { informAboutAdmission() {
this.notify.info( 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, TIMEOUTS.VERY_LONG,
); );
} }
@@ -531,29 +557,23 @@ export default class MembersList extends Vue {
.btn-add-contact { .btn-add-contact {
/* stylelint-disable-next-line at-rule-no-unknown */ /* 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 bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800
transition-colors; transition-colors;
} }
.btn-info-contact { .btn-info-contact,
.btn-info-admission {
/* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */
@apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full @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 bg-slate-100 text-slate-400 hover:text-slate-600
transition-colors; transition-colors;
} }
.btn-admission { .btn-admission {
/* stylelint-disable-next-line at-rule-no-unknown */ /* 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 bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800
transition-colors; 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> </style>