hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(front): Focus report comment input in report modal

Browse Source 
Closes #1236

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2023-04-21 15:43:36 +02:00
parent 2043c98717
commit 2c28312fc9
7 changed files with 58 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
js/src/components/Report/ReportModal.vue
View File

@@ -20,38 +20,40 @@
}}
</p>
</div>
<div class="">
<div class="" v-if="comment">
<article class="">
<div class="">
<figure class="h-8 w-8" v-if="comment?.actor?.avatar">
<img
:src="comment.actor.avatar.url"
alt=""
width="48"
height="48"
/>
</figure>
<AccountCircle v-else :size="48" />
</div>
<div class="">
<div class="prose dark:prose-invert">
<strong>{{ comment?.actor?.name }}</strong>
<small v-if="comment.actor"
>@{{ usernameWithDomain(comment?.actor) }}</small
>
<br />
<p v-html="comment.text"></p>
</div>
</div>
</article>
</div>
<div>
<article v-if="comment">
<div>
<figure class="h-8 w-8" v-if="comment?.actor?.avatar">
<img
:src="comment.actor.avatar.url"
alt=""
width="48"
height="48"
/>
</figure>
<AccountCircle v-else :size="48" />
</div>
<div class="prose dark:prose-invert">
<strong>{{ comment?.actor?.name }}</strong>
<small v-if="comment.actor"
>@{{ usernameWithDomain(comment?.actor) }}</small
>
<br />
<p v-html="comment.text"></p>
</div>
</article>
<o-field
:label="t('Additional comments')"
label-for="additional-comments"
>
<o-input v-model="content" type="textarea" id="additional-comments" />
<o-input
v-model="content"
type="textarea"
id="additional-comments"
autofocus
ref="reportAdditionalCommentsInput"
/>
</o-field>
<div class="control" v-if="outsideDomain">
@@ -91,6 +93,7 @@ import { useI18n } from "vue-i18n";
import { IComment } from "../../types/comment.model";
import { usernameWithDomain } from "@/types/actor";
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
import { useFocus } from "@vueuse/core";
const props = withDefaults(
defineProps<{
@@ -108,18 +111,17 @@ const props = withDefaults(
const emit = defineEmits(["close"]);
// @Component({
// mounted() {
// this.$data.isActive = true;
// },
// })
// isActive = false;
const content = ref("");
const forward = ref(false);
const reportAdditionalCommentsInput = ref();
// https://github.com/oruga-ui/oruga/issues/339
const reportAdditionalCommentsInputComp = computed(
() => reportAdditionalCommentsInput.value?.$refs.textarea
);
useFocus(reportAdditionalCommentsInputComp, { initialValue: true });
const { t } = useI18n({ useScope: "global" });
const translatedCancelText = computed((): string => {