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

visually combine subject and content into one input

Browse source
This commit is contained in:
Henry Jameson 2025-08-14 12:59:51 +03:00
commit 6e479d246b
3 changed files with 69 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template> <template>
<div <div
ref="root" ref="root"
class="input emoji-input" class="emoji-input"
:class="{ 'with-picker': !hideEmojiButton }" :class="{ 'with-picker': !hideEmojiButton }"
> >
<slot <slot

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

@ -216,6 +216,10 @@
position: relative; position: relative;
} }
.subject-input {
border-bottom: 1px solid var(--border);
}
.character-counter { .character-counter {
position: absolute; position: absolute;
bottom: 0; bottom: 0;

125
src/components/post_status_form/post_status_form.vue
View file

@ -156,67 +156,69 @@
class="preview-status" class="preview-status"
/> />
</div> </div>
<EmojiInput <div class="input">
v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)" <EmojiInput
v-model="newStatus.spoilerText" v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
enable-emoji-picker v-model="newStatus.spoilerText"
:suggest="emojiSuggestor" enable-emoji-picker
class="input form-control" :suggest="emojiSuggestor"
> class="input form-control subject-input unstyled"
<template #default="inputProps"> >
<input <template #default="inputProps">
v-model="newStatus.spoilerText" <input
type="text" v-model="newStatus.spoilerText"
:placeholder="$t('post_status.content_warning')" type="text"
:disabled="posting && !optimisticPosting" :placeholder="$t('post_status.content_warning')"
v-bind="propsToNative(inputProps)" :disabled="posting && !optimisticPosting"
size="1" v-bind="propsToNative(inputProps)"
class="input form-post-subject" size="1"
> class="input form-post-subject"
</template> >
</EmojiInput> </template>
<EmojiInput </EmojiInput>
ref="emoji-input" <EmojiInput
v-model="newStatus.status" ref="emoji-input"
:suggest="emojiUserSuggestor" v-model="newStatus.status"
:placement="emojiPickerPlacement" :suggest="emojiUserSuggestor"
class="input form-control main-input" :placement="emojiPickerPlacement"
enable-sticker-picker class="input form-control main-input unstyled"
enable-emoji-picker enable-sticker-picker
hide-emoji-button enable-emoji-picker
:newline-on-ctrl-enter="submitOnEnter" hide-emoji-button
@input="onEmojiInputInput" :newline-on-ctrl-enter="submitOnEnter"
@sticker-uploaded="addMediaFile" @input="onEmojiInputInput"
@sticker-upload-failed="uploadFailed" @sticker-uploaded="addMediaFile"
@shown="handleEmojiInputShow" @sticker-upload-failed="uploadFailed"
> @shown="handleEmojiInputShow"
<template #default="inputProps"> >
<textarea <template #default="inputProps">
ref="textarea" <textarea
v-model="newStatus.status" ref="textarea"
:placeholder="placeholder || $t('post_status.default')" v-model="newStatus.status"
rows="1" :placeholder="placeholder || $t('post_status.default')"
cols="1" rows="1"
:disabled="posting && !optimisticPosting" cols="1"
class="input form-post-body" :disabled="posting && !optimisticPosting"
:class="{ 'scrollable-form': !!maxHeight }" class="input form-post-body"
v-bind="propsToNative(inputProps)" :class="{ 'scrollable-form': !!maxHeight }"
@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)" v-bind="propsToNative(inputProps)"
@keydown.meta.enter="postStatus($event, newStatus)" @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)" @keydown.meta.enter="postStatus($event, newStatus)"
@input="resize" @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
@compositionupdate="resize" @input="resize"
@paste="paste" @compositionupdate="resize"
/> @paste="paste"
<p />
v-if="hasStatusLengthLimit" <p
class="character-counter faint" v-if="hasStatusLengthLimit"
:class="{ error: isOverLengthLimit }" class="character-counter faint"
> :class="{ error: isOverLengthLimit }"
{{ charactersLeft }} >
</p> {{ charactersLeft }}
</template> </p>
</EmojiInput> </template>
</EmojiInput>
</div>
<div <div
v-if="!disableScopeSelector" v-if="!disableScopeSelector"
class="visibility-tray" class="visibility-tray"
@ -238,6 +240,7 @@
v-model="newStatus.contentType" v-model="newStatus.contentType"
class="input form-control" class="input form-control"
:attrs="{ 'aria-label': $t('post_status.content_type_selection') }" :attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
unstyled="true"
> >
<option <option
v-for="postFormat in postFormats" v-for="postFormat in postFormats"