diff --git a/frontend/app/components/entity/EntityLogoMobile.vue b/frontend/app/components/entity/EntityLogoMobile.vue new file mode 100644 index 000000000..590c33c67 --- /dev/null +++ b/frontend/app/components/entity/EntityLogoMobile.vue @@ -0,0 +1,88 @@ + + + + diff --git a/frontend/app/components/header/app-page/HeaderAppPage.vue b/frontend/app/components/header/app-page/HeaderAppPage.vue index c2e8ea7cf..482af3b92 100644 --- a/frontend/app/components/header/app-page/HeaderAppPage.vue +++ b/frontend/app/components/header/app-page/HeaderAppPage.vue @@ -42,7 +42,7 @@
-

+

{{ headerName }}

diff --git a/frontend/app/components/sidebar/left/content/SidebarLeftContentEvent.vue b/frontend/app/components/sidebar/left/content/SidebarLeftContentEvent.vue index b156144d1..f7978bc87 100644 --- a/frontend/app/components/sidebar/left/content/SidebarLeftContentEvent.vue +++ b/frontend/app/components/sidebar/left/content/SidebarLeftContentEvent.vue @@ -35,9 +35,7 @@ entityType: EntityType.EVENT, }) " - :aria-label=" - $t('i18n.components.sidebar_left_content_event.edit_aria_label') - " + :aria-label="$t('i18n.components._global.edit_aria_label')" class="absolute bottom-1 right-1 z-10 flex rounded-md border border-black/80 bg-white/80 p-1 text-black/80 focus-brand dark:border-white/80 dark:bg-black/80 dark:text-white/80" />
diff --git a/frontend/app/components/sidebar/left/content/SidebarLeftContentGroupPage.vue b/frontend/app/components/sidebar/left/content/SidebarLeftContentGroupPage.vue index 80e1fda22..7586d7bbf 100644 --- a/frontend/app/components/sidebar/left/content/SidebarLeftContentGroupPage.vue +++ b/frontend/app/components/sidebar/left/content/SidebarLeftContentGroupPage.vue @@ -25,9 +25,7 @@ (sidebar.collapsed == false || sidebar.collapsedSwitch == false) " @click="showToastError('THIS FEATURE IS COMING SOON!')" - :aria-label=" - $t('i18n.components.sidebar_left_content_group_page.edit_aria_label') - " + :aria-label="$t('i18n.components._global.edit_aria_label')" class="absolute bottom-1 right-1 z-10 flex rounded-md border border-black/80 bg-white/80 p-1 text-black/80 focus-brand dark:border-white/80 dark:bg-black/80 dark:text-white/80" > diff --git a/frontend/app/components/sidebar/left/content/SidebarLeftContentOrganization.vue b/frontend/app/components/sidebar/left/content/SidebarLeftContentOrganization.vue index dcbc00eb6..fb0fa774a 100644 --- a/frontend/app/components/sidebar/left/content/SidebarLeftContentOrganization.vue +++ b/frontend/app/components/sidebar/left/content/SidebarLeftContentOrganization.vue @@ -35,11 +35,7 @@ entityType: EntityType.ORGANIZATION, }) " - :aria-label=" - $t( - 'i18n.components.sidebar_left_content_organization.edit_aria_label' - ) - " + :aria-label="$t('i18n.components._global.edit_aria_label')" class="absolute bottom-1 right-1 z-10 flex rounded-md border border-black/80 bg-white/80 p-1 text-black/80 focus-brand dark:border-white/80 dark:bg-black/80 dark:text-white/80" /> diff --git a/frontend/app/layouts/event/EventPage.vue b/frontend/app/layouts/event/EventPage.vue index 9caa2b2c8..e63ceee6d 100644 --- a/frontend/app/layouts/event/EventPage.vue +++ b/frontend/app/layouts/event/EventPage.vue @@ -14,6 +14,15 @@ class="bg-layer-0 pt-14 transition-[padding] duration-500 md:pt-0" :class="sidebarContentDynamicClass" > + const aboveMediumBP = useBreakpoint("md"); -const paramsEventId = useRoute().params.eventId; +const route = useRoute(); +const paramsEventId = route.params.eventId; const eventId = typeof paramsEventId === "string" ? paramsEventId : undefined; const { data: event } = useGetEvent(eventId || ""); +const eventIconUrl = computed(() => + event.value?.iconUrl?.fileObject + ? `/api/${event.value.iconUrl.fileObject}` + : "" +); +const eventLogoAccentClass = computed(() => + event.value?.type === "learn" ? "bg-learn-blue" : "bg-action-red" +); + +const normalizedRoutePath = computed(() => route.path.replace(/\/$/, "")); +const showMobileEntityShortcut = computed( + () => + !aboveMediumBP.value && + !!event.value && + !!eventId && + !normalizedRoutePath.value.endsWith(`/events/${eventId}`) +); + const sidebarHover = ref(false); const sidebarContentScrollable = useState("sidebarContentScrollable"); const { getSidebarContentDynamicClass, getSidebarFooterDynamicClass } = @@ -42,4 +70,17 @@ const sidebarContentDynamicClass = getSidebarContentDynamicClass( ); const sidebarFooterDynamicClass = getSidebarFooterDynamicClass(sidebarHover); + +const { openModal } = useModalHandlers("ModalUploadImageIcon"); + +function handleEditEventLogo(): void { + if (!event.value?.id) { + return; + } + + openModal({ + entityId: event.value.id, + entityType: EntityType.EVENT, + }); +} diff --git a/frontend/app/layouts/group/GroupPage.vue b/frontend/app/layouts/group/GroupPage.vue index 1855d8054..421cbc3ff 100644 --- a/frontend/app/layouts/group/GroupPage.vue +++ b/frontend/app/layouts/group/GroupPage.vue @@ -17,6 +17,14 @@ class="bg-layer-0 pt-8 transition-[padding] duration-500 md:pt-0" :class="sidebarContentDynamicClass" > + + group.value?.iconUrl?.fileObject + ? `/api/${group.value.iconUrl.fileObject}` + : "" +); +const showMobileEntityShortcut = computed( + () => !aboveMediumBP.value && !!group.value +); + const sidebarHover = ref(false); const sidebarContentScrollable = useState("sidebarContentScrollable"); const { getSidebarContentDynamicClass, getSidebarFooterDynamicClass } = @@ -45,4 +62,9 @@ const sidebarContentDynamicClass = getSidebarContentDynamicClass( ); const sidebarFooterDynamicClass = getSidebarFooterDynamicClass(sidebarHover); +const { showToastError } = useToaster(); + +function handleEditGroupLogo(): void { + showToastError("THIS FEATURE IS COMING SOON!"); +} diff --git a/frontend/app/layouts/organization/OrganizationPage.vue b/frontend/app/layouts/organization/OrganizationPage.vue index 89172b939..44457fbd2 100644 --- a/frontend/app/layouts/organization/OrganizationPage.vue +++ b/frontend/app/layouts/organization/OrganizationPage.vue @@ -11,9 +11,17 @@ />
+
const aboveMediumBP = useBreakpoint("md"); -const paramsOrgId = useRoute().params.orgId; +const route = useRoute(); +const paramsOrgId = route.params.orgId; const orgId = typeof paramsOrgId === "string" ? paramsOrgId : undefined; const { data: organization } = useGetOrganization(orgId || ""); +const organizationIconUrl = computed(() => + organization.value?.iconUrl?.fileObject + ? `/api/${organization.value.iconUrl.fileObject}` + : "" +); + +const normalizedRoutePath = computed(() => route.path.replace(/\/$/, "")); +const showMobileEntityShortcut = computed( + () => + !aboveMediumBP.value && + !!organization.value && + !!orgId && + !normalizedRoutePath.value.endsWith(`/organizations/${orgId}`) +); + const sidebarHover = ref(false); const sidebarContentScrollable = useState("sidebarContentScrollable"); const { getSidebarContentDynamicClass, getSidebarFooterDynamicClass } = @@ -42,4 +66,17 @@ const sidebarContentDynamicClass = getSidebarContentDynamicClass( ); const sidebarFooterDynamicClass = getSidebarFooterDynamicClass(sidebarHover); + +const { openModal } = useModalHandlers("ModalUploadImageIcon"); + +function handleEditOrganizationLogo(): void { + if (!organization.value?.id) { + return; + } + + openModal({ + entityId: organization.value.id, + entityType: EntityType.ORGANIZATION, + }); +} diff --git a/frontend/app/pages/organizations/[orgId]/about.vue b/frontend/app/pages/organizations/[orgId]/about.vue index 9d59fe63b..2ce400f83 100644 --- a/frontend/app/pages/organizations/[orgId]/about.vue +++ b/frontend/app/pages/organizations/[orgId]/about.vue @@ -1,24 +1,25 @@