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 6 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
Unified 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 --> <!-- 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> {

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

Write Preview
Loading…
Cancel
Save