From d6c7fde40cdb2d82eec343a31c6b1b326e53cb5e Mon Sep 17 00:00:00 2001 From: mohamad Date: Sat, 7 Jun 2025 16:50:39 +0200 Subject: [PATCH] Refactor ChoresPage and GroupDetailPage for improved UI and functionality - Enhanced the ChoresPage by refining button attributes for accessibility and improving layout consistency. - Updated the GroupDetailPage to include a more interactive member avatar list and streamlined invite member functionality. - Introduced new styles for better visual hierarchy and user experience across both pages. - Implemented click-outside functionality for member menus and invite UI to enhance usability. --- fe/src/pages/ChoresPage.vue | 76 ++++++----- fe/src/pages/GroupDetailPage.vue | 217 ++++++++++++++++++++++++++----- 2 files changed, 227 insertions(+), 66 deletions(-) diff --git a/fe/src/pages/ChoresPage.vue b/fe/src/pages/ChoresPage.vue index f984162..5a35f83 100644 --- a/fe/src/pages/ChoresPage.vue +++ b/fe/src/pages/ChoresPage.vue @@ -36,12 +36,14 @@
@@ -86,7 +88,8 @@
{{ day.date.getDate() }}
@@ -123,7 +126,8 @@

{{ chore.name }}

- {{ chore.type === 'personal' ? t('choresPage.listView.choreTypePersonal') : getGroupName(chore.group_id) || t('choresPage.listView.choreTypeGroupFallback') }} + {{ chore.type === 'personal' ? t('choresPage.listView.choreTypePersonal') : + getGroupName(chore.group_id) || t('choresPage.listView.choreTypeGroupFallback') }} {{ formatFrequency(chore.frequency) }} @@ -137,7 +141,8 @@
check_circle_outline - {{ t('choresPage.listView.completedDatePrefix') }} {{ formatDate(chore.completed_at || chore.next_due_date) }} + {{ t('choresPage.listView.completedDatePrefix') }} {{ formatDate(chore.completed_at || + chore.next_due_date) }}
{{ chore.description }} @@ -153,11 +158,14 @@ :title="t('choresPage.listView.actions.undoTitle')"> undo {{ t('choresPage.listView.actions.undoText') }} - - +
@@ -178,17 +187,19 @@ aria-modal="true" :aria-labelledby="isEditing ? 'editChoreModalTitle' : 'newChoreModalTitle'">
-

{{ isEditing ? t('choresPage.choreModal.editTitle') : t('choresPage.choreModal.newTitle') - }}

-
- +
@@ -244,16 +255,19 @@
- - - + + +
- +
@@ -266,7 +280,8 @@

{{ t('choresPage.deleteDialog.title') }}

-
@@ -274,7 +289,8 @@

{{ t('choresPage.deleteDialog.confirmationText') }}

- +
@@ -286,7 +302,8 @@

{{ t('choresPage.shortcutsModal.title') }}

-
@@ -1296,7 +1313,7 @@ onBeforeUnmount(() => { /* Adjusted gap */ margin-bottom: 2rem; padding: 1.5rem; - background: white; + background: rgb(255, 248, 240); border-radius: 18px; border: 3px solid #111; box-shadow: 6px 6px 0 #111; @@ -1372,14 +1389,14 @@ onBeforeUnmount(() => { .neo-tab-btn.active { background: #111; - color: white; + color: rgb(255, 248, 240); box-shadow: 3px 3px 0 #111; /* Ensure active shadow is consistent */ } .neo-tab-count { background: rgba(255, 255, 255, 0.2); - color: white; + color: rgb(255, 248, 240); /* Assuming active tab has dark background */ padding: 0.1em 0.5em; border-radius: 1rem; @@ -1439,14 +1456,13 @@ onBeforeUnmount(() => { .neo-toggle-btn.active { background: #111; - color: white; + color: rgb(255, 248, 240); } /* Action button styles */ .neo-action-button { - background: #fff; + background: rgb(255, 178, 107); border: 3px solid #111; - border-radius: 8px; padding: 0.6rem 1rem; font-weight: 700; cursor: pointer; @@ -1486,7 +1502,7 @@ onBeforeUnmount(() => { margin: 2rem 0; border: 3px solid #111; border-radius: 18px; - background: #fff; + background: rgb(255, 248, 240); box-shadow: 6px 6px 0 #111; } @@ -1670,13 +1686,13 @@ onBeforeUnmount(() => { } .loading-spinner { - border-top-color: #fff; + border-top-color: rgb(255, 248, 240); } } /* Calendar View Styles */ .calendar-view { - background: white; + background: rgb(255, 248, 240); border-radius: 18px; border: 3px solid #111; box-shadow: 6px 6px 0 #111; diff --git a/fe/src/pages/GroupDetailPage.vue b/fe/src/pages/GroupDetailPage.vue index feaa9a1..aa15afe 100644 --- a/fe/src/pages/GroupDetailPage.vue +++ b/fe/src/pages/GroupDetailPage.vue @@ -9,39 +9,47 @@
-
- - -
- -
-
- -
- {{ t('groupDetailPage.members.title') }} - - -
- {{ member.email }} +
+ +
+
+
+
+ {{ member.email.charAt(0).toUpperCase() }} +
+
+
+ {{ member.email }} + +
+
+ + + {{ t('groupDetailPage.members.removeButton') }} +
- - {{ - t('groupDetailPage.members.removeButton') }} - - - -
- -

{{ t('groupDetailPage.members.emptyState') }}

+
+ - -
- {{ t('groupDetailPage.invites.title') }} + +
+
+ {{ t('groupDetailPage.invites.title') }} + + +
+

Invite new members by generating a shareable code.

{{ inviteCode ? t('groupDetailPage.invites.regenerateButton') : @@ -58,15 +66,13 @@

{{ t('groupDetailPage.invites.copySuccess') }}

-
- -

{{ t('groupDetailPage.invites.emptyState') }}

-
+
+
-
+
{{ t('groupDetailPage.lists.title') }}
@@ -86,7 +92,7 @@ {{ chore.name }} {{ t('groupDetailPage.chores.duePrefix') }} {{ formatDate(chore.next_due_date) - }} + }}
@@ -155,6 +161,7 @@ import VBadge from '@/components/valerie/VBadge.vue'; import VInput from '@/components/valerie/VInput.vue'; import VFormField from '@/components/valerie/VFormField.vue'; import VIcon from '@/components/valerie/VIcon.vue'; +import { onClickOutside } from '@vueuse/core' const { t } = useI18n(); @@ -186,6 +193,21 @@ const inviteExpiresAt = ref(null); const generatingInvite = ref(false); const copySuccess = ref(false); const removingMember = ref(null); +const showInviteUI = ref(false); +const activeMemberMenu = ref(null); + +const memberMenuRef = ref(null) +const inviteUIRef = ref(null) +const addMemberButtonRef = ref(null) +const avatarsContainerRef = ref(null) + +onClickOutside(memberMenuRef, () => { + activeMemberMenu.value = null +}, { ignore: [avatarsContainerRef] }) + +onClickOutside(inviteUIRef, () => { + showInviteUI.value = false +}, { ignore: [addMemberButtonRef] }) // groupId is directly from props.id now, which comes from the route path param const groupId = computed(() => props.id); @@ -286,9 +308,10 @@ const copyInviteCodeHandler = async () => { }; const canRemoveMember = (member: GroupMember): boolean => { - // Only allow removing members if the current user is the owner - // and the member is not the owner themselves - return group.value?.members?.some(m => m.role === 'owner' && m.id === member.id) === false; + // Simplification: For now, assume a user with role 'owner' can remove anyone but another owner. + // A real implementation would check the current user's ID against the member to prevent self-removal. + const isOwner = group.value?.members?.find(m => m.id === member.id)?.role === 'owner'; + return !isOwner; }; const removeMember = async (memberId: number) => { @@ -390,6 +413,23 @@ const getSplitTypeBadgeVariant = (type: string): BadgeVariant => { return colorMap[type] || 'neutral'; }; +const toggleMemberMenu = (memberId: number) => { + if (activeMemberMenu.value === memberId) { + activeMemberMenu.value = null; + } else { + activeMemberMenu.value = memberId; + // Close invite UI if it's open + showInviteUI.value = false; + } +}; + +const toggleInviteUI = () => { + showInviteUI.value = !showInviteUI.value; + if (showInviteUI.value) { + activeMemberMenu.value = null; // Close any open member menu + } +}; + onMounted(() => { fetchGroupDetails(); loadUpcomingChores(); @@ -483,6 +523,111 @@ onMounted(() => { } } +.member-avatar-list { + display: flex; + align-items: flex-end; +} + +.member-avatars { + display: flex; + padding-left: 12px; +} + +.member-avatar { + position: relative; + margin-left: -12px; +} + +.avatar-circle { + width: 40px; + height: 40px; + border-radius: 50%; + background-color: var(--primary); + color: var(--dark); + display: flex; + align-items: center; + justify-content: center; + font-weight: 900; + border: 2px solid var(--light); + cursor: pointer; + transition: transform 0.2s ease; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.avatar-circle:hover { + transform: scale(1.1); + z-index: 10; +} + +.member-menu { + position: absolute; + top: 110%; + right: -10px; + background: white; + border-radius: 8px; + border: 2px solid var(--dark); + box-shadow: var(--shadow-md); + width: 220px; + z-index: 100; + overflow: hidden; + /* padding: 0.5rem; */ +} + +.popup-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0.5rem 0.5rem 1rem; + border-bottom: 2px solid #eee; +} + +.member-menu-content { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.add-member-btn { + width: 40px; + height: 40px; + border-radius: 50%; + background: var(--light); + border: 2px dashed var(--dark); + color: var(--dark); + font-size: 1.5rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + margin-left: -8px; + z-index: 1; +} + +.add-member-btn:hover { + background: var(--secondary); + transform: scale(1.1); + border-style: solid; +} + +.header-title-text { + margin: 0; +} + +.invite-popup { + position: absolute; + top: calc(16%); + right: 10%; + width: 27%; + background: white; + border-radius: 12px; + border: 2px solid var(--dark); + box-shadow: var(--shadow-md); + z-index: 100; + padding: 0.75rem; +} + /* Members List Styles */ .neo-members-list { display: flex;