Merge branch 'fix-event-view-window-title' into 'main'
Fix: Window title in Event View doesn't show the Event title See merge request framasoft/mobilizon!1518
This commit is contained in:
Thomas Citharel
82
src/components/Account/IdentityPicker.vue
Normal file
82
src/components/Account/IdentityPicker.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<header class="">
|
||||
<h2 class="">{{ t("Pick an identity") }}</h2>
|
||||
</header>
|
||||
<section class="">
|
||||
<transition-group
|
||||
tag="ul"
|
||||
class="grid grid-cols-1 gap-y-3 m-5 max-w-md"
|
||||
enter-active-class="duration-300 ease-out"
|
||||
enter-from-class="transform opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="duration-200 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="transform opacity-0"
|
||||
>
|
||||
<li
|
||||
class="relative focus-within:shadow-lg"
|
||||
v-for="identity in identities"
|
||||
:key="identity?.id"
|
||||
>
|
||||
<input
|
||||
class="sr-only peer"
|
||||
type="radio"
|
||||
:value="identity"
|
||||
name="availableActors"
|
||||
v-model="currentIdentity"
|
||||
:id="`availableActor-${identity?.id}`"
|
||||
/>
|
||||
<label
|
||||
class="flex items-center gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
|
||||
:for="`availableActor-${identity?.id}`"
|
||||
>
|
||||
<figure class="h-12 w-12" v-if="identity?.avatar">
|
||||
<img
|
||||
class="rounded-full h-full w-full object-cover"
|
||||
:src="identity.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
<div class="flex-1 w-px">
|
||||
<h3 class="line-clamp-2">{{ identity?.name }}</h3>
|
||||
<small class="flex truncate">{{
|
||||
`@${identity?.preferredUsername}`
|
||||
}}</small>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</transition-group>
|
||||
</section>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IPerson } from "@/types/actor";
|
||||
import { useCurrentUserIdentities } from "@/composition/apollo/actor";
|
||||
import { computed } from "vue";
|
||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { identities } = useCurrentUserIdentities();
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: IPerson;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const currentIdentity = computed<IPerson>({
|
||||
get(): IPerson {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(identity: IPerson) {
|
||||
emit("update:modelValue", identity);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
111
src/components/Account/IdentityPickerWrapper.vue
Normal file
111
src/components/Account/IdentityPickerWrapper.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-if="inline && currentIdentity"
|
||||
class="inline box cursor-pointer"
|
||||
@click="activateModal"
|
||||
>
|
||||
<div class="flex gap-1">
|
||||
<div class="">
|
||||
<figure class="" v-if="currentIdentity.avatar">
|
||||
<img
|
||||
class="rounded-full"
|
||||
:src="currentIdentity.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
</div>
|
||||
<div class="" v-if="currentIdentity.name">
|
||||
<p class="">{{ currentIdentity.name }}</p>
|
||||
<p class="">
|
||||
{{ `@${currentIdentity.preferredUsername}` }}
|
||||
<span v-if="masked">{{ t("(Masked)") }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="" v-else>
|
||||
{{ `@${currentIdentity.preferredUsername}` }}
|
||||
</div>
|
||||
<o-button
|
||||
variant="text"
|
||||
v-if="identities && identities.length > 1"
|
||||
@click="activateModal"
|
||||
>
|
||||
{{ t("Change") }}
|
||||
</o-button>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-else-if="currentIdentity"
|
||||
class="cursor-pointer"
|
||||
@click="activateModal"
|
||||
>
|
||||
<figure class="h-12 w-12" v-if="currentIdentity.avatar">
|
||||
<img
|
||||
class="rounded-full object-cover h-full"
|
||||
:src="currentIdentity.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
</span>
|
||||
<o-modal
|
||||
v-model:active="isComponentModalActive"
|
||||
:close-button-aria-label="t('Close')"
|
||||
>
|
||||
<identity-picker v-if="currentIdentity" v-model="currentIdentity" />
|
||||
</o-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useCurrentUserIdentities } from "@/composition/apollo/actor";
|
||||
import { computed, ref } from "vue";
|
||||
import { IPerson } from "../../types/actor";
|
||||
import IdentityPicker from "./IdentityPicker.vue";
|
||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { identities } = useCurrentUserIdentities();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: IPerson;
|
||||
inline?: boolean;
|
||||
masked?: boolean;
|
||||
}>(),
|
||||
{
|
||||
inline: true,
|
||||
masked: false,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const isComponentModalActive = ref(false);
|
||||
|
||||
const currentIdentity = computed({
|
||||
get(): IPerson | undefined {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(identity: IPerson | undefined) {
|
||||
emit("update:modelValue", identity);
|
||||
isComponentModalActive.value = false;
|
||||
},
|
||||
});
|
||||
|
||||
const hasOtherIdentities = computed((): boolean => {
|
||||
return identities.value !== undefined && identities.value.length > 1;
|
||||
});
|
||||
|
||||
const activateModal = (): void => {
|
||||
if (hasOtherIdentities.value) {
|
||||
isComponentModalActive.value = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -95,7 +95,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import EventComment from "@/components/Comment/EventComment.vue";
|
||||
import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
|
||||
import IdentityPickerWrapper from "@/components/Account/IdentityPickerWrapper.vue";
|
||||
import { CommentModeration } from "@/types/enums";
|
||||
import { CommentModel, IComment } from "../../types/comment.model";
|
||||
import {
|
||||
|
||||
@@ -340,7 +340,7 @@ import { IActor, IPerson } from "@/types/actor";
|
||||
import { IEvent } from "@/types/event.model";
|
||||
import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
|
||||
import ReportModal from "@/components/Report/ReportModal.vue";
|
||||
import IdentityPicker from "@/views/Account/IdentityPicker.vue";
|
||||
import IdentityPicker from "@/components/Account/IdentityPicker.vue";
|
||||
import { EventJoinOptions, ParticipantRole, MemberRole } from "@/types/enums";
|
||||
import { GRAPHQL_API_ENDPOINT } from "@/api/_entrypoint";
|
||||
import { computed, defineAsyncComponent, inject, onMounted, ref } from "vue";
|
||||
|
||||
Reference in New Issue
Block a user