aboutsummaryrefslogtreecommitdiff
path: root/src/components/post_status_form
diff options
context:
space:
mode:
authorHJ <30-hj@users.noreply.git.pleroma.social>2024-07-31 16:31:06 +0000
committerHJ <30-hj@users.noreply.git.pleroma.social>2024-07-31 16:31:06 +0000
commit6bc020c733047d7033e508a2b4dffc581d703170 (patch)
treefe52d41d57c827e8872da21e5ac10d412058f43e /src/components/post_status_form
parent83acbf953a4f50a017e3e857ecbd0b008f0b3be0 (diff)
parent9d51eccf5dd0b4b773db5ec146d818b6c8fe18ac (diff)
Merge branch 'release/2.7.x' into 'master'
Release 2.7.0 See merge request pleroma/pleroma-fe!1928
Diffstat (limited to 'src/components/post_status_form')
-rw-r--r--src/components/post_status_form/post_status_form.js5
-rw-r--r--src/components/post_status_form/post_status_form.vue67
2 files changed, 19 insertions, 53 deletions
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 5564b118..563dfb96 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -87,7 +87,8 @@ const PostStatusForm = {
'fileLimit',
'submitOnEnter',
'emojiPickerPlacement',
- 'optimisticPosting'
+ 'optimisticPosting',
+ 'profileMention'
],
emits: [
'posted',
@@ -125,7 +126,7 @@ const PostStatusForm = {
const { scopeCopy } = this.$store.getters.mergedConfig
- if (this.replyTo) {
+ if (this.replyTo || this.profileMention) {
const currentUser = this.$store.state.users.currentUser
statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
}
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9b108a5a..cf411ff1 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -161,7 +161,7 @@
v-model="newStatus.spoilerText"
enable-emoji-picker
:suggest="emojiSuggestor"
- class="form-control"
+ class="input form-control"
>
<template #default="inputProps">
<input
@@ -171,7 +171,7 @@
:disabled="posting && !optimisticPosting"
v-bind="propsToNative(inputProps)"
size="1"
- class="form-post-subject"
+ class="input form-post-subject"
>
</template>
</EmojiInput>
@@ -180,7 +180,7 @@
v-model="newStatus.status"
:suggest="emojiUserSuggestor"
:placement="emojiPickerPlacement"
- class="form-control main-input"
+ class="input form-control main-input"
enable-emoji-picker
hide-emoji-button
:newline-on-ctrl-enter="submitOnEnter"
@@ -198,7 +198,7 @@
rows="1"
cols="1"
:disabled="posting && !optimisticPosting"
- class="form-post-body"
+ class="input form-post-body"
:class="{ 'scrollable-form': !!maxHeight }"
v-bind="propsToNative(inputProps)"
@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
@@ -237,7 +237,7 @@
<Select
id="post-content-type"
v-model="newStatus.contentType"
- class="form-control"
+ class="input form-control"
:attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
>
<option
@@ -375,8 +375,6 @@
<script src="./post_status_form.js"></script>
<style lang="scss">
-@import "../../variables";
-
.post-status-form {
position: relative;
@@ -437,15 +435,12 @@
.preview-error {
font-style: italic;
- color: $fallback--faint;
- color: var(--faint, $fallback--faint);
+ color: var(--textFaint);
}
.preview-status {
- border: 1px solid $fallback--border;
- border: 1px solid var(--border, $fallback--border);
- border-radius: $fallback--tooltipRadius;
- border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+ border: 1px solid var(--border);
+ border-radius: var(--roundness);
padding: 0.5em;
margin: 0;
}
@@ -456,8 +451,7 @@
.text-format {
.only-format {
- color: $fallback--faint;
- color: var(--faint, $fallback--faint);
+ color: var(--textFaint);
}
}
@@ -503,31 +497,6 @@
padding: 0 0.1em;
display: flex;
align-items: center;
-
- &.selected,
- &:hover {
- // needs to be specific to override icon default color
- svg,
- i,
- label {
- color: $fallback--lightText;
- color: var(--lightText, $fallback--lightText);
- }
- }
-
- &.disabled {
- svg,
- i {
- cursor: not-allowed;
- color: $fallback--icon;
- color: var(--btnDisabledText, $fallback--icon);
-
- &:hover {
- color: $fallback--icon;
- color: var(--btnDisabledText, $fallback--icon);
- }
- }
- }
}
.error {
@@ -580,7 +549,7 @@
line-height: 1.85;
}
- .form-post-body {
+ .input.form-post-body {
// TODO: make a resizable textarea component?
box-sizing: content-box; // needed for easier computation of dynamic size
overflow: hidden;
@@ -591,6 +560,7 @@
height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
resize: none;
+ background: transparent;
&.scrollable-form {
overflow-y: auto;
@@ -609,8 +579,7 @@
margin: 0 0.5em;
&.error {
- color: $fallback--cRed;
- color: var(--cRed, $fallback--cRed);
+ color: var(--cRed);
}
}
@@ -633,14 +602,10 @@
align-items: center;
justify-content: center;
opacity: 0.6;
- color: $fallback--text;
- color: var(--text, $fallback--text);
- background-color: $fallback--bg;
- background-color: var(--bg, $fallback--bg);
- border-radius: $fallback--tooltipRadius;
- border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
- border: 2px dashed $fallback--text;
- border: 2px dashed var(--text, $fallback--text);
+ color: var(--text);
+ background-color: var(--bg);
+ border-radius: var(--roundness);
+ border: 2px dashed var(--text);
}
}
</style>