Add ability to display media attachments, polls and statuses with hidden content

This commit is contained in:
Angelina Filippova 2019-10-04 00:45:21 +03:00
parent 2ea990f074
commit f5c088dc1a
2 changed files with 118 additions and 85 deletions

View file

@ -54,7 +54,40 @@
</div> </div>
</div> </div>
<div class="status-body"> <div class="status-body">
<span class="status-content" v-html="status.content"/> <div v-if="status.spoiler_text">
<strong>{{ status.spoiler_text }}</strong>
<el-button v-if="!showHiddenStatus" size="mini" class="show-more-button" @click="showHiddenStatus = true">Show more</el-button>
<el-button v-if="showHiddenStatus" size="mini" class="show-more-button" @click="showHiddenStatus = false">Show less</el-button>
<div v-if="showHiddenStatus">
<span class="status-content" v-html="status.content"/>
<div v-if="status.poll" class="poll">
<ul>
<li v-for="(option, index) in status.poll.options" :key="index">
{{ option.title }}
<el-progress :percentage="optionPercent(status.poll, option)" />
</li>
</ul>
</div>
<div v-for="(attachment, index) in status.media_attachments" :key="index" class="image">
<img :src="attachment.preview_url">
</div>
</div>
</div>
<div v-if="!status.spoiler_text">
<span class="status-content" v-html="status.content"/>
<div v-if="status.poll" class="poll">
<ul>
<li v-for="(option, index) in status.poll.options" :key="index">
{{ option.title }}
<el-progress :percentage="optionPercent(status.poll, option)" />
</li>
</ul>
</div>
<div v-for="(attachment, index) in status.media_attachments" :key="index" class="image">
<img :src="attachment.preview_url">
</div>
</div>
<a :href="status.url" target="_blank" class="account"> <a :href="status.url" target="_blank" class="account">
{{ parseTimestamp(status.created_at) }} {{ parseTimestamp(status.created_at) }}
</a> </a>
@ -66,13 +99,18 @@
import moment from 'moment' import moment from 'moment'
export default { export default {
name: 'Statuses', name: 'Status',
props: { props: {
status: { status: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() {
return {
showHiddenStatus: false
}
},
methods: { methods: {
capitalizeFirstLetter(str) { capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1) return str.charAt(0).toUpperCase() + str.slice(1)
@ -98,6 +136,13 @@ export default {
}) })
}) })
}, },
optionPercent(poll, pollOption) {
const allVotes = poll.options.reduce((acc, option) => (acc + option.votes_count), 0)
if (allVotes === 0) {
return 0
}
return +(pollOption.votes_count / allVotes * 100).toFixed(1)
},
parseTimestamp(timestamp) { parseTimestamp(timestamp) {
return moment(timestamp).format('YYYY-MM-DD HH:mm') return moment(timestamp).format('YYYY-MM-DD HH:mm')
} }
@ -106,66 +151,78 @@ export default {
</script> </script>
<style rel='stylesheet/scss' lang='scss'> <style rel='stylesheet/scss' lang='scss'>
.account { .account {
text-decoration: underline; text-decoration: underline;
line-height: 26px;
font-size: 13px;
}
.image {
width: 20%;
img {
width: 100%;
} }
.status-account { }
display: flex; .show-more-button {
align-items: center; margin-left: 5px;
}
.status-account {
display: flex;
align-items: center;
}
.status-avatar-img {
width: 15px;
height: 15px;
margin-right: 5px;
}
.status-account-name {
margin: 0;
height: 22px;
}
.status-body {
display: flex;
flex-direction: column;
}
.status-content {
font-size: 15px;
line-height: 26px;
}
.status-card {
margin-bottom: 15px;
}
.status-header {
display: flex;
justify-content: space-between;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.el-message {
min-width: 80%;
} }
.status-avatar-img { .el-message-box {
width: 15px; width: 80%;
height: 15px;
margin-right: 5px;
}
.status-account-name {
margin: 0;
height: 22px;
}
.status-body {
display: flex;
flex-direction: column;
}
.status-content {
font-size: 15px;
} }
.status-card { .status-card {
margin-bottom: 15px; .el-card__header {
} padding: 10px 17px;
.status-header {
display: flex;
justify-content: space-between;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.el-message {
min-width: 80%;
} }
.el-message-box { .el-tag {
width: 80%; margin: 3px 4px 3px 0;
} }
.status-card { .status-account-container {
.el-card__header { margin-bottom: 5px;
padding: 10px 17px; }
} .status-actions-button {
.el-tag { margin: 3px 0 3px;
margin: 3px 4px 3px 0; }
} .status-actions {
.status-account-container { display: flex;
margin-bottom: 5px; flex-wrap: wrap;
} }
.status-actions-button { .status-header {
margin: 3px 0 3px; display: flex;
} flex-direction: column;
.status-actions {
display: flex;
flex-wrap: wrap;
}
.status-header {
display: flex;
flex-direction: column;
}
} }
} }
}
</style> </style>

View file

@ -70,22 +70,8 @@
</el-row> </el-row>
<el-col :span="18"> <el-col :span="18">
<el-timeline class="statuses"> <el-timeline class="statuses">
<el-timeline-item v-for="status in statuses" :timestamp="createdAtLocaleString(status.created_at)" :key="status.id"> <el-timeline-item v-for="status in statuses" :key="status.id">
<el-card> <status :status="status"/>
<strong v-if="status.spoiler_text">{{ status.spoiler_text }}</strong>
<p v-if="status.content" v-html="status.content" />
<div v-if="status.poll" class="poll">
<ul>
<li v-for="(option, index) in status.poll.options" :key="index">
{{ option.title }}
<el-progress :percentage="optionPercent(status.poll, option)" />
</li>
</ul>
</div>
<div v-for="(attachment, index) in status.media_attachments" :key="index" class="image">
<img :src="attachment.preview_url">
</div>
</el-card>
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
</el-col> </el-col>
@ -94,8 +80,11 @@
</template> </template>
<script> <script>
import Status from '../status/Status'
export default { export default {
name: 'UsersShow', name: 'UsersShow',
components: { Status },
data() { data() {
return { return {
showPrivate: false showPrivate: false
@ -116,19 +105,6 @@ export default {
this.$store.dispatch('FetchData', { id: this.$route.params.id, godmode: false }) this.$store.dispatch('FetchData', { id: this.$route.params.id, godmode: false })
}, },
methods: { methods: {
optionPercent(poll, pollOption) {
const allVotes = poll.options.reduce((acc, option) => (acc + option.votes_count), 0)
if (allVotes === 0) {
return 0
}
return +(pollOption.votes_count / allVotes * 100).toFixed(1)
},
createdAtLocaleString(createdAt) {
const date = new Date(createdAt)
return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
},
onTogglePrivate() { onTogglePrivate() {
console.log(this.showPrivate) console.log(this.showPrivate)