trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 18 Releases 5 Wiki Activity
Browse Source

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
pull/208/head
Jose Olarte III 5 days ago
parent
461ee84d2a
commit
b84546686a
2 changed files with 95 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 58
      src/App.vue
  2. 90
      src/components/MembersList.vue

58
src/App.vue
View File

@ -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> {

90
src/components/MembersList.vue
View File

@ -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>
</div>
</div>
<div class="flex">
<span
v-if="
showOrganizerTools && isOrganizer && member.did !== activeDid
"
class="flex items-center"
>
<button
class="btn-admission"
:title="
member.member.admitted ? 'Remove member' : 'Admit member'
class="btn-info-contact"
title="Contact Info"
@click="
informAboutAddingContact(
getContactFor(member.did) !== undefined,
)
"
@click="checkWhetherContactBeforeAdmitting(member)"
>
<font-awesome
:icon="member.member.admitted ? 'minus' : 'plus'"
class="text-sm"
/>
<font-awesome icon="circle-info" class="text-sm" />
</button>
</span>
</div>
</div>
<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'
"
@click="checkWhetherContactBeforeAdmitting(member)"
>
<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
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
bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800
transition-colors;
}
</style>

Write Preview
Loading…
Cancel
Save