Merge branch 'develop' into xenofem/pleroma-fe-rebased-image-description-authoring
This commit is contained in:
Shpuld Shpuldson
commit
79011e02ef
@ -44,14 +44,14 @@ const StatusContent = {
|
||||
return lengthScore > 20
|
||||
},
|
||||
longSubject () {
|
||||
return this.status.summary.length > 900
|
||||
return this.status.summary.length > 240
|
||||
},
|
||||
// When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
|
||||
mightHideBecauseSubject () {
|
||||
return this.status.summary && (!this.tallStatus || this.localCollapseSubjectDefault)
|
||||
return !!this.status.summary && this.localCollapseSubjectDefault
|
||||
},
|
||||
mightHideBecauseTall () {
|
||||
return this.tallStatus && (!this.status.summary || !this.localCollapseSubjectDefault)
|
||||
return this.tallStatus && !(this.status.summary && this.localCollapseSubjectDefault)
|
||||
},
|
||||
hideSubjectStatus () {
|
||||
return this.mightHideBecauseSubject && !this.expandingSubject
|
||||
@ -142,12 +142,6 @@ const StatusContent = {
|
||||
return html
|
||||
}
|
||||
},
|
||||
contentHtml () {
|
||||
if (!this.status.summary_html) {
|
||||
return this.postBodyHtml
|
||||
}
|
||||
return this.status.summary_html + '<br />' + this.postBodyHtml
|
||||
},
|
||||
...mapGetters(['mergedConfig']),
|
||||
...mapState({
|
||||
betterShadow: state => state.interface.browserSupport.cssFilter,
|
||||
|
||||
@ -3,18 +3,57 @@
|
||||
<div class="status-body">
|
||||
<slot name="header" />
|
||||
<div
|
||||
v-if="longSubject"
|
||||
class="status-content-wrapper"
|
||||
:class="{ 'tall-status': !showingLongSubject }"
|
||||
v-if="status.summary_html"
|
||||
class="summary-wrapper"
|
||||
:class="{ 'tall-subject': (longSubject && !showingLongSubject) }"
|
||||
>
|
||||
<div
|
||||
class="media-body summary"
|
||||
@click.prevent="linkClicked"
|
||||
v-html="status.summary_html"
|
||||
/>
|
||||
<a
|
||||
v-if="!showingLongSubject"
|
||||
class="tall-status-hider"
|
||||
:class="{ 'tall-status-hider_focused': focused }"
|
||||
v-if="longSubject && showingLongSubject"
|
||||
href="#"
|
||||
class="tall-subject-hider"
|
||||
@click.prevent="showingLongSubject=false"
|
||||
>{{ $t("status.hide_full_subject") }}</a>
|
||||
<a
|
||||
v-else-if="longSubject"
|
||||
class="tall-subject-hider"
|
||||
:class="{ 'tall-subject-hider_focused': focused }"
|
||||
href="#"
|
||||
@click.prevent="showingLongSubject=true"
|
||||
>
|
||||
{{ $t("status.show_full_subject") }}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
:class="{'tall-status': hideTallStatus}"
|
||||
class="status-content-wrapper"
|
||||
>
|
||||
<a
|
||||
v-if="hideTallStatus"
|
||||
class="tall-status-hider"
|
||||
:class="{ 'tall-status-hider_focused': focused }"
|
||||
href="#"
|
||||
@click.prevent="toggleShowMore"
|
||||
>
|
||||
{{ $t("general.show_more") }}
|
||||
</a>
|
||||
<div
|
||||
v-if="!hideSubjectStatus"
|
||||
class="status-content media-body"
|
||||
@click.prevent="linkClicked"
|
||||
v-html="postBodyHtml"
|
||||
/>
|
||||
<a
|
||||
v-if="hideSubjectStatus"
|
||||
href="#"
|
||||
class="cw-status-hider"
|
||||
@click.prevent="toggleShowMore"
|
||||
>
|
||||
{{ $t("status.show_content") }}
|
||||
<span
|
||||
v-if="hasImageAttachments"
|
||||
class="icon-picture"
|
||||
@ -28,54 +67,14 @@
|
||||
class="icon-link"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
class="status-content media-body"
|
||||
@click.prevent="linkClicked"
|
||||
v-html="contentHtml"
|
||||
/>
|
||||
<a
|
||||
v-if="showingLongSubject"
|
||||
href="#"
|
||||
class="status-unhider"
|
||||
@click.prevent="showingLongSubject=false"
|
||||
>{{ $t("general.show_less") }}</a>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
:class="{'tall-status': hideTallStatus}"
|
||||
class="status-content-wrapper"
|
||||
>
|
||||
<a
|
||||
v-if="hideTallStatus"
|
||||
class="tall-status-hider"
|
||||
:class="{ 'tall-status-hider_focused': focused }"
|
||||
href="#"
|
||||
@click.prevent="toggleShowMore"
|
||||
>{{ $t("general.show_more") }}</a>
|
||||
<div
|
||||
v-if="!hideSubjectStatus"
|
||||
class="status-content media-body"
|
||||
@click.prevent="linkClicked"
|
||||
v-html="contentHtml"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="status-content media-body"
|
||||
@click.prevent="linkClicked"
|
||||
v-html="status.summary_html"
|
||||
/>
|
||||
<a
|
||||
v-if="hideSubjectStatus"
|
||||
href="#"
|
||||
class="cw-status-hider"
|
||||
@click.prevent="toggleShowMore"
|
||||
>{{ $t("general.show_more") }}</a>
|
||||
<a
|
||||
v-if="showingMore"
|
||||
href="#"
|
||||
class="status-unhider"
|
||||
@click.prevent="toggleShowMore"
|
||||
>{{ $t("general.show_less") }}</a>
|
||||
>
|
||||
{{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-if="status.poll && status.poll.options">
|
||||
@ -129,6 +128,12 @@ $status-margin: 0.75em;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.status-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.tall-status {
|
||||
position: relative;
|
||||
height: 220px;
|
||||
@ -136,7 +141,7 @@ $status-margin: 0.75em;
|
||||
overflow-y: hidden;
|
||||
z-index: 1;
|
||||
.status-content {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
|
||||
linear-gradient(to top, white, white);
|
||||
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
||||
@ -176,6 +181,38 @@ $status-margin: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-wrapper {
|
||||
margin-bottom: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: var(--border, $fallback--border);
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.summary {
|
||||
font-style: italic;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.tall-subject {
|
||||
position: relative;
|
||||
.summary {
|
||||
max-height: 2em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.tall-subject-hider {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
// position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
font-family: var(--postFont, sans-serif);
|
||||
line-height: 1.4em;
|
||||
|
||||
@ -637,7 +637,11 @@
|
||||
"status_unavailable": "Status unavailable",
|
||||
"copy_link": "Copy link to status",
|
||||
"thread_muted": "Thread muted",
|
||||
"thread_muted_and_words": ", has words:"
|
||||
"thread_muted_and_words": ", has words:",
|
||||
"show_full_subject": "Show full subject",
|
||||
"hide_full_subject": "Hide full subject",
|
||||
"show_content": "Show content",
|
||||
"hide_content": "Hide content"
|
||||
},
|
||||
"user_card": {
|
||||
"approve": "Approve",
|
||||
|
||||
@ -476,7 +476,14 @@
|
||||
"backend_version": "Backend Versie",
|
||||
"title": "Versie"
|
||||
},
|
||||
"mutes_and_blocks": "Negeringen en Blokkades"
|
||||
"mutes_and_blocks": "Negeringen en Blokkades",
|
||||
"profile_fields": {
|
||||
"value": "Inhoud",
|
||||
"name": "Label",
|
||||
"add_field": "Veld Toevoegen",
|
||||
"label": "Profiel metadata"
|
||||
},
|
||||
"bot": "Dit is een bot account"
|
||||
},
|
||||
"timeline": {
|
||||
"collapse": "Inklappen",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user