Skip to content
This repository has been archived by the owner on Sep 27, 2024. It is now read-only.

feat: Image upload improvements [MOSOWEB-25] #79

Merged
merged 1 commit into from
Nov 7, 2023
Merged

feat: Image upload improvements [MOSOWEB-25] #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 41 additions & 7 deletions components/publish/PublishAttachment.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ function toggleApply() {
</div>
</div>
<div absolute right-2 bottom-2>
<button class="bg-black/75" text-white px2 py1 rounded-2 @click="isEditDialogOpen = true">
{{ $t('action.edit') }}
<button class="bg-black/75 plusalt" text-white px2 py1 rounded-2 @click="isEditDialogOpen = true">
{{ $t('action.altplus') }}
</button>
</div>
<ModalDialog
Expand All @@ -51,26 +51,60 @@ function toggleApply() {
py-6
px-6 max-w-300
>
<div flex flex-justify-end mb>
<button btn-text p-0 @click="isEditDialogOpen = false">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this works, but I'm still so confused about the = false

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That closes the modal

<div i-ri:close-line />
</button>
</div>
<div flex flex-col-reverse gap-5 md:flex-row>
<div flex flex-col gap-2 justify-between>
<h1 id="edit-attachment" font-bold>
{{ $t('attachment.edit_title') }}
</h1>
<div hidden md:block>
<p mb-4>
{{ $t('attachment.alt-text-p-1') }}
</p>
<p mb-4>
{{ $t('attachment.alt-text-p-2') }}
</p>
<ul mb-4 list-disc list-inside>
<li>{{ $t('attachment.alt-point-1') }}</li>
<li>{{ $t('attachment.alt-point-2') }}</li>
<li>{{ $t('attachment.alt-point-3') }}</li>
<li>{{ $t('attachment.alt-point-4') }}</li>
<li>{{ $t('attachment.alt-point-5') }}</li>
</ul>
</div>
<div flex flex-col gap-2>
<textarea v-model="description" p-3 h-50 bg-base rounded-2 border-strong border-1 md:w-100 />
<textarea v-model="description" p-3 h-50 bg-base rounded-2 border-strong border-1 w-full :placeholder="$t('attachment.add_image_description')" />
<div flex flex-row-reverse>
<PublishCharacterCounter :length="description.length" :max="maxDescriptionLength" />
</div>
<button btn-outline :disabled="description.length > maxDescriptionLength" @click="toggleApply">
<button class="apply-btn" btn-solid rounded-3 text-sm w-full :disabled="description.length > maxDescriptionLength" @click="toggleApply">
{{ $t('action.apply') }}
</button>
</div>
<button btn-outline @click="isEditDialogOpen = false">
{{ $t('action.close') }}
</button>
</div>
<StatusAttachment :attachment="attachment" w-full is-preview />
</div>
</ModalDialog>
</div>
</template>

<style>
.plusalt {
align-items: center;
padding: 4px 16px;
background: rgba(21, 20, 26, 0.8);
border-radius: 360px;
font-weight: 500;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
}

.apply-btn {
border-radius: 360px;
}
</style>
9 changes: 5 additions & 4 deletions components/status/StatusAttachment.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ watch(shouldLoadAttachment, () => {
</script>

<template>
<div relative ma flex :gap="isAudio ? '2' : ''">
<div relative flex flex-items-start :gap="isAudio ? '2' : ''">
<template v-if="type === 'video'">
<button
type="button"
Expand Down Expand Up @@ -207,7 +207,6 @@ watch(shouldLoadAttachment, () => {
focus:outline-none
focus:ring="2 primary inset"
rounded-lg
h-full
w-full
aria-label="Open image preview dialog"
relative
Expand All @@ -227,9 +226,8 @@ watch(shouldLoadAttachment, () => {
}"
:should-load-image="shouldLoadAttachment"
rounded-lg
h-full
w-full
object-cover
object-contain
:draggable="shouldLoadAttachment"
:class="!shouldLoadAttachment ? 'brightness-60 hover:brightness-70 transition-filter' : ''"
/>
Expand Down Expand Up @@ -285,4 +283,7 @@ watch(shouldLoadAttachment, () => {
top: 50%;
translate: -50% -50%;
}
.status-attachment-image {
border-radius: 16px;
}
</style>
11 changes: 10 additions & 1 deletion locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"view_other_following": "Following from other instances may not be displayed."
},
"action": {
"altplus": "+ Alt",
"apply": "Apply",
"bookmark": "Bookmark",
"bookmarked": "Bookmarked",
Expand Down Expand Up @@ -93,7 +94,15 @@
"app_logo": "Mozilla Logo",
"app_name": "Mozilla Social",
"attachment": {
"edit_title": "Description",
"add_image_description": "Add image description",
"alt-point-1": "Capture important elements",
"alt-point-2": "Summarize text in images",
"alt-point-3": "Use regular sentence structure",
"alt-point-4": "Avoid redundant information",
"alt-point-5": "Focus on trends and key findings in complex visuals (like diagrams or maps)",
"alt-text-p-1": "Alt text provides image descriptions for people with vision impairments, low bandwidth connections, or those seeking extra context.",
"alt-text-p-2": "You can improve accessibility and understanding for everyone by writing clear, concise, and objective alt text.",
"edit_title": "Add alt text",
"remove_label": "Remove attachment"
},
"command": {
Expand Down
Loading