Commit a290f536 authored by Shpuld Shpludson's avatar Shpuld Shpludson

Merge branch 'develop' into 'feat/rich-text-preview'

# Conflicts:
#   src/i18n/en.json
parents 61f34ff3 82944f86
Pipeline #27836 passed with stages
in 6 minutes and 48 seconds
......@@ -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,45 +3,32 @@
<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) }"
>
<a
v-if="!showingLongSubject"
class="tall-status-hider"
:class="{ 'tall-status-hider_focused': focused }"
href="#"
@click.prevent="showingLongSubject=true"
>
{{ $t("general.show_more") }}
<span
v-if="hasImageAttachments"
class="icon-picture"
/>
<span
v-if="hasVideoAttachments"
class="icon-video"
/>
<span
v-if="status.card"
class="icon-link"
/>
</a>
<div
class="status-content media-body"
class="media-body summary"
@click.prevent="linkClicked"
v-html="contentHtml"
v-html="status.summary_html"
/>
<a
v-if="showingLongSubject"
v-if="longSubject && showingLongSubject"
href="#"
class="status-unhider"
class="tall-subject-hider"
@click.prevent="showingLongSubject=false"
>{{ $t("general.show_less") }}</a>
>{{ $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
v-else
:class="{'tall-status': hideTallStatus}"
class="status-content-wrapper"
>
......@@ -51,31 +38,43 @@
:class="{ 'tall-status-hider_focused': focused }"
href="#"
@click.prevent="toggleShowMore"
>{{ $t("general.show_more") }}</a>
>
{{ $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"
v-html="postBodyHtml"
/>
<a
v-if="hideSubjectStatus"
href="#"
class="cw-status-hider"
@click.prevent="toggleShowMore"
>{{ $t("general.show_more") }}</a>
>
{{ $t("status.show_content") }}
<span
v-if="hasImageAttachments"
class="icon-picture"
/>
<span
v-if="hasVideoAttachments"
class="icon-video"
/>
<span
v-if="status.card"
class="icon-link"
/>
</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;
......
......@@ -638,7 +638,11 @@
"thread_muted": "Thread muted",
"thread_muted_and_words": ", has words:",
"preview": "Preview",
"preview_empty": "Empty"
"preview_empty": "Empty",
"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",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment