From 263ef17816598bed203f609f3b88315a79aeecd9 Mon Sep 17 00:00:00 2001 From: sfr Date: Sun, 26 Jun 2022 17:51:13 +0000 Subject: [PATCH] Use textarea instead of input for composing alt text (#15) Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/15 Co-authored-by: sfr Co-committed-by: sfr --- src/components/attachment/attachment.js | 20 ++++++++++++++++++++ src/components/attachment/attachment.scss | 15 ++++++++++++++- src/components/attachment/attachment.vue | 9 +++++---- src/components/gallery/gallery.vue | 1 - 4 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index d62a4adc..65301e84 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -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) } } } diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index b2dea98d..9c787e09 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -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, diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 2a89886d..f2354524 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -248,14 +248,15 @@ class="description-container" :class="{ '-static': !edit }" > - + rows="1" + cols="1" + @input="resize" + />

{{ localDescription }}

diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index ccf6e3e2..3e0d23b6 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -171,7 +171,6 @@ .gallery-item { margin: 0; - height: 200px; } } }