hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

move emoji icon to bottom-left for textareas

Browse source
This commit is contained in:
Henry Jameson 2026-05-10 15:14:20 +03:00
commit b8dabf3a6b
2 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/emoji_input/emoji_input.vue
View file

@ -2,7 +2,7 @@
<div <div
ref="root" ref="root"
class="input emoji-input" class="input emoji-input"
:class="{ 'with-picker': !hideEmojiButton }" :class="{ '-with-picker': !hideEmojiButton, '-textarea': this.input?.tagName === 'TEXTAREA' }"
> >
<slot <slot
:id="'textbox-' + randomSeed" :id="'textbox-' + randomSeed"
@ -120,7 +120,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin: 0.2em 0.25em; padding: 0.2em 0.25em;
font-size: 1.3em; font-size: 1.3em;
cursor: pointer; cursor: pointer;
line-height: 1.2em; line-height: 1.2em;
@ -130,6 +130,12 @@
} }
} }
&.-textarea .emoji-picker-icon {
inset: auto;
bottom: 0;
left: 0;
}
.emoji-picker-panel { .emoji-picker-panel {
position: absolute; position: absolute;
z-index: 20; z-index: 20;
@ -151,8 +157,15 @@
outline: none; outline: none;
} }
&.with-picker input {
padding-right: 2em; &.-with-picker {
input {
padding-right: 2.4em;
}
textarea {
margin-bottom: 2.5em;
}
} }
.hidden-overlay { .hidden-overlay {

5
src/components/post_status_form/post_status_form.scss
View file

@ -208,14 +208,11 @@
padding: 0; padding: 0;
} }
.input.form-post-body { textarea.input.form-post-body {
// TODO: make a resizable textarea component? // TODO: make a resizable textarea component?
box-sizing: content-box; // needed for easier computation of dynamic size box-sizing: content-box; // needed for easier computation of dynamic size
overflow: hidden; overflow: hidden;
transition: min-height 200ms 100ms; transition: min-height 200ms 100ms;
// stock padding + 1 line of text (for counter)
padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
padding-right: 1.5em;
// two lines of text // two lines of text
height: calc(var(--post-line-height) * 1em); height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em); min-height: calc(var(--post-line-height) * 1em);