Use textarea instead of input for composing alt text (#15)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/15
Co-authored-by: sfr <sol@solfisher.com>
Co-committed-by: sfr <sol@solfisher.com>
This commit is contained in:
sfr 2022-06-26 17:51:13 +00:00 committed by floatingghost
parent 7025cb8bb0
commit 263ef17816
4 changed files with 39 additions and 6 deletions

View file

@ -199,6 +199,26 @@ const Attachment = {
const width = image.naturalWidth
const height = image.naturalHeight
this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
},
resize (e) {
const target = e.target || e
if (!(target instanceof window.Element)) { return }
// Reset to default height for empty form, nothing else to do here.
if (target.value === '') {
target.style.height = null
this.$emit('resize')
return
}
const paddingString = getComputedStyle(target)['padding']
// remove -px suffix
const padding = Number(paddingString.substring(0, paddingString.length - 2))
target.style.height = 'auto'
const newHeight = Math.floor(target.scrollHeight - padding * 2)
target.style.height = `${newHeight}px`
this.$emit('resize', newHeight)
}
}
}

View file

@ -16,7 +16,7 @@
.attachment-wrapper {
flex: 1 1 auto;
height: 100%;
height: 200px;
position: relative;
overflow: hidden;
}
@ -52,6 +52,19 @@
.description-field {
flex: 1;
min-width: 0;
box-sizing: content-box;
overflow: hidden;
transition: min-height 200ms 100ms;
padding-bottom: var(--_padding);
height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
resize: none;
&.scrollable-form {
overflow-y: auto;
}
}
& .placeholder-container,

View file

@ -248,14 +248,15 @@
class="description-container"
:class="{ '-static': !edit }"
>
<input
<textarea
v-if="edit"
v-model="localDescription"
type="text"
class="description-field"
:placeholder="$t('post_status.media_description')"
@keydown.enter.prevent=""
>
rows="1"
cols="1"
@input="resize"
/>
<p v-else>
{{ localDescription }}
</p>

View file

@ -171,7 +171,6 @@
.gallery-item {
margin: 0;
height: 200px;
}
}
}