Merge branch 'develop' of git.pleroma.social:pleroma/pleroma-fe into develop
This commit is contained in:
sadposter
commit
954d5c05df
76 changed files with 1639 additions and 468 deletions
|
|
@ -8,7 +8,6 @@ const Attachment = {
|
|||
props: [
|
||||
'attachment',
|
||||
'nsfw',
|
||||
'statusId',
|
||||
'size',
|
||||
'allowPlay',
|
||||
'setMedia',
|
||||
|
|
@ -30,9 +29,21 @@ const Attachment = {
|
|||
VideoAttachment
|
||||
},
|
||||
computed: {
|
||||
usePlaceHolder () {
|
||||
usePlaceholder () {
|
||||
return this.size === 'hide' || this.type === 'unknown'
|
||||
},
|
||||
placeholderName () {
|
||||
if (this.attachment.description === '' || !this.attachment.description) {
|
||||
return this.type.toUpperCase()
|
||||
}
|
||||
return this.attachment.description
|
||||
},
|
||||
placeholderIconClass () {
|
||||
if (this.type === 'image') return 'icon-picture'
|
||||
if (this.type === 'video') return 'icon-video'
|
||||
if (this.type === 'audio') return 'icon-music'
|
||||
return 'icon-doc'
|
||||
},
|
||||
referrerpolicy () {
|
||||
return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
|
||||
},
|
||||
|
|
@ -49,7 +60,15 @@ const Attachment = {
|
|||
return this.size === 'small'
|
||||
},
|
||||
fullwidth () {
|
||||
return this.type === 'html' || this.type === 'audio'
|
||||
if (this.size === 'hide') return false
|
||||
return this.type === 'html' || this.type === 'audio' || this.type === 'unknown'
|
||||
},
|
||||
useModal () {
|
||||
const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
|
||||
: this.mergedConfig.playVideosInModal
|
||||
? ['image', 'video']
|
||||
: ['image']
|
||||
return modalTypes.includes(this.type)
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
},
|
||||
|
|
@ -60,12 +79,7 @@ const Attachment = {
|
|||
}
|
||||
},
|
||||
openModal (event) {
|
||||
const modalTypes = this.mergedConfig.playVideosInModal
|
||||
? ['image', 'video']
|
||||
: ['image']
|
||||
if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
|
||||
this.usePlaceHolder
|
||||
) {
|
||||
if (this.useModal) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
this.setMedia()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="usePlaceHolder"
|
||||
v-if="usePlaceholder"
|
||||
:class="{ 'fullwidth': fullwidth }"
|
||||
@click="openModal"
|
||||
>
|
||||
<a
|
||||
|
|
@ -8,8 +9,11 @@
|
|||
class="placeholder"
|
||||
target="_blank"
|
||||
:href="attachment.url"
|
||||
:alt="attachment.description"
|
||||
:title="attachment.description"
|
||||
>
|
||||
[{{ nsfw ? "NSFW/" : "" }}{{ type.toUpperCase() }}]
|
||||
<span :class="placeholderIconClass" />
|
||||
<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -22,6 +26,8 @@
|
|||
v-if="hidden"
|
||||
class="image-attachment"
|
||||
:href="attachment.url"
|
||||
:alt="attachment.description"
|
||||
:title="attachment.description"
|
||||
@click.prevent="toggleHidden"
|
||||
>
|
||||
<img
|
||||
|
|
@ -51,7 +57,6 @@
|
|||
:class="{'hidden': hidden && preloadImage }"
|
||||
:href="attachment.url"
|
||||
target="_blank"
|
||||
:title="attachment.description"
|
||||
@click="openModal"
|
||||
>
|
||||
<StillImage
|
||||
|
|
@ -59,6 +64,7 @@
|
|||
:mimetype="attachment.mimetype"
|
||||
:src="attachment.large_thumb_url || attachment.url"
|
||||
:image-load-handler="onImageLoad"
|
||||
:alt="attachment.description"
|
||||
/>
|
||||
</a>
|
||||
|
||||
|
|
@ -83,6 +89,8 @@
|
|||
<audio
|
||||
v-if="type === 'audio'"
|
||||
:src="attachment.url"
|
||||
:alt="attachment.description"
|
||||
:title="attachment.description"
|
||||
controls
|
||||
/>
|
||||
|
||||
|
|
@ -116,22 +124,19 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.attachment.media-upload-container {
|
||||
flex: 0 0 auto;
|
||||
max-height: 200px;
|
||||
.non-gallery {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
video {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 4px;
|
||||
display: inline-block;
|
||||
padding: 0.3em 1em 0.3em 0;
|
||||
color: $fallback--link;
|
||||
color: var(--postLink, $fallback--link);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.nsfw-placeholder {
|
||||
|
|
|
|||
17
src/components/bookmark_timeline/bookmark_timeline.js
Normal file
17
src/components/bookmark_timeline/bookmark_timeline.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import Timeline from '../timeline/timeline.vue'
|
||||
|
||||
const Bookmarks = {
|
||||
computed: {
|
||||
timeline () {
|
||||
return this.$store.state.statuses.timelines.bookmarks
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Timeline
|
||||
},
|
||||
destroyed () {
|
||||
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
|
||||
}
|
||||
}
|
||||
|
||||
export default Bookmarks
|
||||
9
src/components/bookmark_timeline/bookmark_timeline.vue
Normal file
9
src/components/bookmark_timeline/bookmark_timeline.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<Timeline
|
||||
:title="$t('nav.bookmarks')"
|
||||
:timeline="timeline"
|
||||
:timeline-name="'bookmarks'"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script src="./bookmark_timeline.js"></script>
|
||||
|
|
@ -431,6 +431,7 @@ const EmojiInput = {
|
|||
const offsetBottom = offsetTop + offsetHeight
|
||||
|
||||
panel.style.top = offsetBottom + 'px'
|
||||
if (!picker) return
|
||||
picker.$el.style.top = offsetBottom + 'px'
|
||||
picker.$el.style.bottom = 'auto'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,16 @@ const ExtraButtons = {
|
|||
navigator.clipboard.writeText(this.statusLink)
|
||||
.then(() => this.$emit('onSuccess'))
|
||||
.catch(err => this.$emit('onError', err.error.error))
|
||||
},
|
||||
bookmarkStatus () {
|
||||
this.$store.dispatch('bookmark', { id: this.status.id })
|
||||
.then(() => this.$emit('onSuccess'))
|
||||
.catch(err => this.$emit('onError', err.error.error))
|
||||
},
|
||||
unbookmarkStatus () {
|
||||
this.$store.dispatch('unbookmark', { id: this.status.id })
|
||||
.then(() => this.$emit('onSuccess'))
|
||||
.catch(err => this.$emit('onError', err.error.error))
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,22 @@
|
|||
>
|
||||
<i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="!status.bookmarked"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="bookmarkStatus"
|
||||
@click="close"
|
||||
>
|
||||
<i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="status.bookmarked"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="unbookmarkStatus"
|
||||
@click="close"
|
||||
>
|
||||
<i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="canDelete"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
|
|
|
|||
|
|
@ -50,9 +50,7 @@
|
|||
align-content: stretch;
|
||||
}
|
||||
|
||||
// FIXME: specificity problem with this and .attachments.attachment
|
||||
// we shouldn't have the need for .image here
|
||||
.attachment.image {
|
||||
.gallery-row-inner .attachment {
|
||||
margin: 0 0.5em 0 0;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
|
|
|
|||
15
src/components/global_notice_list/global_notice_list.js
Normal file
15
src/components/global_notice_list/global_notice_list.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
|
||||
const GlobalNoticeList = {
|
||||
computed: {
|
||||
notices () {
|
||||
return this.$store.state.interface.globalNotices
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeNotice (notice) {
|
||||
this.$store.dispatch('removeGlobalNotice', notice)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default GlobalNoticeList
|
||||
77
src/components/global_notice_list/global_notice_list.vue
Normal file
77
src/components/global_notice_list/global_notice_list.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div class="global-notice-list">
|
||||
<div
|
||||
v-for="(notice, index) in notices"
|
||||
:key="index"
|
||||
class="alert global-notice"
|
||||
:class="{ ['global-' + notice.level]: true }"
|
||||
>
|
||||
<div class="notice-message">
|
||||
{{ $t(notice.messageKey, notice.messageArgs) }}
|
||||
</div>
|
||||
<i
|
||||
class="button-icon icon-cancel"
|
||||
@click="closeNotice(notice)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./global_notice_list.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.global-notice-list {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.global-notice {
|
||||
pointer-events: auto;
|
||||
text-align: center;
|
||||
width: 40em;
|
||||
max-width: calc(100% - 3em);
|
||||
display: flex;
|
||||
padding-left: 1.5em;
|
||||
line-height: 2em;
|
||||
.notice-message {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
i {
|
||||
flex: 0 0;
|
||||
width: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.global-error {
|
||||
background-color: var(--alertPopupError, $fallback--cRed);
|
||||
color: var(--alertPopupErrorText, $fallback--text);
|
||||
i {
|
||||
color: var(--alertPopupErrorText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.global-warning {
|
||||
background-color: var(--alertPopupWarning, $fallback--cOrange);
|
||||
color: var(--alertPopupWarningText, $fallback--text);
|
||||
i {
|
||||
color: var(--alertPopupWarningText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.global-info {
|
||||
background-color: var(--alertPopupNeutral, $fallback--fg);
|
||||
color: var(--alertPopupNeutralText, $fallback--text);
|
||||
i {
|
||||
color: var(--alertPopupNeutralText, $fallback--text);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,6 +8,8 @@
|
|||
v-if="type === 'image'"
|
||||
class="modal-image"
|
||||
:src="currentMedia.url"
|
||||
:alt="currentMedia.description"
|
||||
:title="currentMedia.description"
|
||||
@touchstart.stop="mediaTouchStart"
|
||||
@touchmove.stop="mediaTouchMove"
|
||||
@click="hide"
|
||||
|
|
@ -18,6 +20,14 @@
|
|||
:attachment="currentMedia"
|
||||
:controls="true"
|
||||
/>
|
||||
<audio
|
||||
v-if="type === 'audio'"
|
||||
class="modal-image"
|
||||
:src="currentMedia.url"
|
||||
:alt="currentMedia.description"
|
||||
:title="currentMedia.description"
|
||||
controls
|
||||
/>
|
||||
<button
|
||||
v-if="canNavigate"
|
||||
:title="$t('media_modal.previous')"
|
||||
|
|
|
|||
|
|
@ -17,6 +17,11 @@
|
|||
<i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="currentUser">
|
||||
<router-link :to="{ name: 'bookmarks'}">
|
||||
<i class="button-icon icon-bookmark" /> {{ $t("nav.bookmarks") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="currentUser && currentUser.locked">
|
||||
<router-link :to="{ name: 'friend-requests' }">
|
||||
<i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,11 @@ const Notifications = {
|
|||
seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const store = this.$store
|
||||
const credentials = store.state.users.currentUser.credentials
|
||||
notificationsFetcher.fetchAndUpdate({ store, credentials })
|
||||
},
|
||||
computed: {
|
||||
mainClass () {
|
||||
return this.minimalMode ? '' : 'panel panel-default'
|
||||
|
|
@ -56,11 +61,6 @@ const Notifications = {
|
|||
components: {
|
||||
Notification
|
||||
},
|
||||
created () {
|
||||
const { dispatch } = this.$store
|
||||
|
||||
dispatch('fetchAndUpdateNotifications')
|
||||
},
|
||||
watch: {
|
||||
unseenCount (count) {
|
||||
if (count > 0) {
|
||||
|
|
|
|||
|
|
@ -118,6 +118,11 @@
|
|||
flex: 1;
|
||||
padding-left: 0.8em;
|
||||
min-width: 0;
|
||||
|
||||
.timeago {
|
||||
min-width: 3em;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-reaction-emoji {
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@ import MediaUpload from '../media_upload/media_upload.vue'
|
|||
import ScopeSelector from '../scope_selector/scope_selector.vue'
|
||||
import EmojiInput from '../emoji_input/emoji_input.vue'
|
||||
import PollForm from '../poll/poll_form.vue'
|
||||
import Attachment from '../attachment/attachment.vue'
|
||||
import StatusContent from '../status_content/status_content.vue'
|
||||
import fileTypeService from '../../services/file_type/file_type.service.js'
|
||||
import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
|
||||
import { reject, map, uniqBy } from 'lodash'
|
||||
import { reject, map, uniqBy, debounce } from 'lodash'
|
||||
import suggestor from '../emoji_input/suggestor.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
|
|
@ -38,7 +40,9 @@ const PostStatusForm = {
|
|||
EmojiInput,
|
||||
PollForm,
|
||||
ScopeSelector,
|
||||
Checkbox
|
||||
Checkbox,
|
||||
Attachment,
|
||||
StatusContent
|
||||
},
|
||||
mounted () {
|
||||
this.resize(this.$refs.textarea)
|
||||
|
|
@ -78,13 +82,16 @@ const PostStatusForm = {
|
|||
nsfw: false,
|
||||
files: [],
|
||||
poll: {},
|
||||
mediaDescriptions: {},
|
||||
visibility: scope,
|
||||
contentType
|
||||
},
|
||||
caret: 0,
|
||||
pollFormVisible: false,
|
||||
showDropIcon: 'hide',
|
||||
dropStopTimeout: null
|
||||
dropStopTimeout: null,
|
||||
preview: null,
|
||||
previewLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -163,18 +170,29 @@ const PostStatusForm = {
|
|||
this.newStatus.poll &&
|
||||
this.newStatus.poll.error
|
||||
},
|
||||
showPreview () {
|
||||
return !!this.preview || this.previewLoading
|
||||
},
|
||||
emptyStatus () {
|
||||
return this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
},
|
||||
watch: {
|
||||
'newStatus.contentType': function () {
|
||||
this.autoPreview()
|
||||
},
|
||||
'newStatus.spoilerText': function () {
|
||||
this.autoPreview()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
postStatus (newStatus) {
|
||||
async postStatus (newStatus) {
|
||||
if (this.posting) { return }
|
||||
if (this.submitDisabled) { return }
|
||||
|
||||
if (this.newStatus.status === '') {
|
||||
if (this.newStatus.files.length === 0) {
|
||||
this.error = 'Cannot post an empty status with no files'
|
||||
return
|
||||
}
|
||||
if (this.emptyStatus) {
|
||||
this.error = this.$t('post_status.empty_status_error')
|
||||
return
|
||||
}
|
||||
|
||||
const poll = this.pollFormVisible ? this.newStatus.poll : {}
|
||||
|
|
@ -184,7 +202,16 @@ const PostStatusForm = {
|
|||
}
|
||||
|
||||
this.posting = true
|
||||
statusPoster.postStatus({
|
||||
|
||||
try {
|
||||
await this.setAllMediaDescriptions()
|
||||
} catch (e) {
|
||||
this.error = this.$t('post_status.media_description_error')
|
||||
this.posting = false
|
||||
return
|
||||
}
|
||||
|
||||
const data = await statusPoster.postStatus({
|
||||
status: newStatus.status,
|
||||
spoilerText: newStatus.spoilerText || null,
|
||||
visibility: newStatus.visibility,
|
||||
|
|
@ -194,29 +221,83 @@ const PostStatusForm = {
|
|||
inReplyToStatusId: this.replyTo,
|
||||
contentType: newStatus.contentType,
|
||||
poll
|
||||
}).then((data) => {
|
||||
if (!data.error) {
|
||||
this.newStatus = {
|
||||
status: '',
|
||||
spoilerText: '',
|
||||
files: [],
|
||||
visibility: newStatus.visibility,
|
||||
contentType: newStatus.contentType,
|
||||
poll: {}
|
||||
}
|
||||
this.pollFormVisible = false
|
||||
this.$refs.mediaUpload.clearFile()
|
||||
this.clearPollForm()
|
||||
this.$emit('posted')
|
||||
let el = this.$el.querySelector('textarea')
|
||||
el.style.height = 'auto'
|
||||
el.style.height = undefined
|
||||
this.error = null
|
||||
} else {
|
||||
this.error = data.error
|
||||
}
|
||||
this.posting = false
|
||||
})
|
||||
|
||||
if (!data.error) {
|
||||
this.newStatus = {
|
||||
status: '',
|
||||
spoilerText: '',
|
||||
files: [],
|
||||
visibility: newStatus.visibility,
|
||||
contentType: newStatus.contentType,
|
||||
poll: {},
|
||||
mediaDescriptions: {}
|
||||
}
|
||||
this.pollFormVisible = false
|
||||
this.$refs.mediaUpload.clearFile()
|
||||
this.clearPollForm()
|
||||
this.$emit('posted')
|
||||
let el = this.$el.querySelector('textarea')
|
||||
el.style.height = 'auto'
|
||||
el.style.height = undefined
|
||||
this.error = null
|
||||
if (this.preview) this.previewStatus()
|
||||
} else {
|
||||
this.error = data.error
|
||||
}
|
||||
|
||||
this.posting = false
|
||||
},
|
||||
previewStatus () {
|
||||
if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
|
||||
this.preview = { error: this.$t('post_status.preview_empty') }
|
||||
this.previewLoading = false
|
||||
return
|
||||
}
|
||||
const newStatus = this.newStatus
|
||||
this.previewLoading = true
|
||||
statusPoster.postStatus({
|
||||
status: newStatus.status,
|
||||
spoilerText: newStatus.spoilerText || null,
|
||||
visibility: newStatus.visibility,
|
||||
sensitive: newStatus.nsfw,
|
||||
media: [],
|
||||
store: this.$store,
|
||||
inReplyToStatusId: this.replyTo,
|
||||
contentType: newStatus.contentType,
|
||||
poll: {},
|
||||
preview: true
|
||||
}).then((data) => {
|
||||
// Don't apply preview if not loading, because it means
|
||||
// user has closed the preview manually.
|
||||
if (!this.previewLoading) return
|
||||
if (!data.error) {
|
||||
this.preview = data
|
||||
} else {
|
||||
this.preview = { error: data.error }
|
||||
}
|
||||
}).catch((error) => {
|
||||
this.preview = { error }
|
||||
}).finally(() => {
|
||||
this.previewLoading = false
|
||||
})
|
||||
},
|
||||
debouncePreviewStatus: debounce(function () { this.previewStatus() }, 500),
|
||||
autoPreview () {
|
||||
if (!this.preview) return
|
||||
this.previewLoading = true
|
||||
this.debouncePreviewStatus()
|
||||
},
|
||||
closePreview () {
|
||||
this.preview = null
|
||||
this.previewLoading = false
|
||||
},
|
||||
togglePreview () {
|
||||
if (this.showPreview) {
|
||||
this.closePreview()
|
||||
} else {
|
||||
this.previewStatus()
|
||||
}
|
||||
},
|
||||
addMediaFile (fileInfo) {
|
||||
this.newStatus.files.push(fileInfo)
|
||||
|
|
@ -239,6 +320,7 @@ const PostStatusForm = {
|
|||
return fileTypeService.fileType(fileInfo.mimetype)
|
||||
},
|
||||
paste (e) {
|
||||
this.autoPreview()
|
||||
this.resize(e)
|
||||
if (e.clipboardData.files.length > 0) {
|
||||
// prevent pasting of file as text
|
||||
|
|
@ -273,6 +355,7 @@ const PostStatusForm = {
|
|||
}
|
||||
},
|
||||
onEmojiInputInput (e) {
|
||||
this.autoPreview()
|
||||
this.$nextTick(() => {
|
||||
this.resize(this.$refs['textarea'])
|
||||
})
|
||||
|
|
@ -388,6 +471,15 @@ const PostStatusForm = {
|
|||
},
|
||||
dismissScopeNotice () {
|
||||
this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
|
||||
},
|
||||
setMediaDescription (id) {
|
||||
const description = this.newStatus.mediaDescriptions[id]
|
||||
if (!description || description.trim() === '') return
|
||||
return statusPoster.setMediaDescription({ store: this.$store, id, description })
|
||||
},
|
||||
setAllMediaDescriptions () {
|
||||
const ids = this.newStatus.files.map(file => file.id)
|
||||
return Promise.all(ids.map(id => this.setMediaDescription(id)))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,6 +69,44 @@
|
|||
<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
|
||||
<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
|
||||
</p>
|
||||
<div class="preview-heading faint">
|
||||
<a
|
||||
class="preview-toggle faint"
|
||||
@click.stop.prevent="togglePreview"
|
||||
>
|
||||
{{ $t('post_status.preview') }}
|
||||
<i
|
||||
class="icon-down-open"
|
||||
:style="{ transform: showPreview ? 'rotate(0deg)' : 'rotate(-90deg)' }"
|
||||
/>
|
||||
</a>
|
||||
<i
|
||||
v-show="previewLoading"
|
||||
class="icon-spin3 animate-spin"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showPreview"
|
||||
class="preview-container"
|
||||
>
|
||||
<div
|
||||
v-if="!preview"
|
||||
class="preview-status"
|
||||
>
|
||||
{{ $t('general.loading') }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="preview.error"
|
||||
class="preview-status preview-error"
|
||||
>
|
||||
{{ preview.error }}
|
||||
</div>
|
||||
<StatusContent
|
||||
v-else
|
||||
:status="preview"
|
||||
class="preview-status"
|
||||
/>
|
||||
</div>
|
||||
<EmojiInput
|
||||
v-if="newStatus.spoilerText || alwaysShowSubject"
|
||||
v-model="newStatus.spoilerText"
|
||||
|
|
@ -77,7 +115,6 @@
|
|||
class="form-control"
|
||||
>
|
||||
<input
|
||||
|
||||
v-model="newStatus.spoilerText"
|
||||
type="text"
|
||||
:placeholder="$t('post_status.content_warning')"
|
||||
|
|
@ -245,27 +282,18 @@
|
|||
class="fa button-icon icon-cancel"
|
||||
@click="removeMediaFile(file)"
|
||||
/>
|
||||
<div class="media-upload-container attachment">
|
||||
<img
|
||||
v-if="type(file) === 'image'"
|
||||
class="thumbnail media-upload"
|
||||
:src="file.url"
|
||||
>
|
||||
<video
|
||||
v-if="type(file) === 'video'"
|
||||
:src="file.url"
|
||||
controls
|
||||
/>
|
||||
<audio
|
||||
v-if="type(file) === 'audio'"
|
||||
:src="file.url"
|
||||
controls
|
||||
/>
|
||||
<a
|
||||
v-if="type(file) === 'unknown'"
|
||||
:href="file.url"
|
||||
>{{ file.url }}</a>
|
||||
</div>
|
||||
<attachment
|
||||
:attachment="file"
|
||||
:set-media="() => $store.dispatch('setMedia', newStatus.files)"
|
||||
size="small"
|
||||
allow-play="false"
|
||||
/>
|
||||
<input
|
||||
v-model="newStatus.mediaDescriptions[file.id]"
|
||||
type="text"
|
||||
:placeholder="$t('post_status.media_description')"
|
||||
@keydown.enter.prevent=""
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -302,14 +330,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.post-status-form {
|
||||
.visibility-tray {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-status-form {
|
||||
.form-bottom {
|
||||
display: flex;
|
||||
|
|
@ -336,6 +356,48 @@
|
|||
max-width: 10em;
|
||||
}
|
||||
|
||||
.preview-heading {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.icon-spin3 {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-toggle {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-down-open {
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.preview-error {
|
||||
font-style: italic;
|
||||
color: $fallback--faint;
|
||||
color: var(--faint, $fallback--faint);
|
||||
}
|
||||
|
||||
.preview-status {
|
||||
border: 1px solid $fallback--border;
|
||||
border: 1px solid var(--border, $fallback--border);
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.text-format {
|
||||
.only-format {
|
||||
color: $fallback--faint;
|
||||
|
|
@ -343,6 +405,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.visibility-tray {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.media-upload-icon, .poll-icon, .emoji-icon {
|
||||
font-size: 26px;
|
||||
flex: 1;
|
||||
|
|
@ -381,11 +449,9 @@
|
|||
}
|
||||
|
||||
.media-upload-wrapper {
|
||||
flex: 0 0 auto;
|
||||
max-width: 100%;
|
||||
min-width: 50px;
|
||||
margin-right: .2em;
|
||||
margin-bottom: .5em;
|
||||
width: 18em;
|
||||
|
||||
.icon-cancel {
|
||||
display: inline-block;
|
||||
|
|
@ -399,6 +465,20 @@
|
|||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
img, video {
|
||||
object-fit: contain;
|
||||
max-height: 10em;
|
||||
}
|
||||
|
||||
.video {
|
||||
max-height: 10em;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.status-input-wrapper {
|
||||
|
|
@ -408,28 +488,13 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
.media-upload-wrapper .attachments {
|
||||
padding: 0 0.5em;
|
||||
|
||||
.attachment {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid $fallback--border;
|
||||
border: 1px solid var(--border, $fallback--border);
|
||||
text-align: center;
|
||||
|
||||
audio {
|
||||
min-width: 300px;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-align: left;
|
||||
line-height: 1.2;
|
||||
padding: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
>.panel-body {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,9 @@ const FilteringTab = {
|
|||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
replyVisibility () {
|
||||
this.$store.dispatch('queueFlushAll')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import unescape from 'lodash/unescape'
|
||||
import merge from 'lodash/merge'
|
||||
import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
|
||||
import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
|
||||
import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
|
||||
|
|
@ -16,6 +17,7 @@ const ProfileTab = {
|
|||
newLocked: this.$store.state.users.currentUser.locked,
|
||||
newNoRichText: this.$store.state.users.currentUser.no_rich_text,
|
||||
newDefaultScope: this.$store.state.users.currentUser.default_scope,
|
||||
newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
|
||||
hideFollows: this.$store.state.users.currentUser.hide_follows,
|
||||
hideFollowers: this.$store.state.users.currentUser.hide_followers,
|
||||
hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count,
|
||||
|
|
@ -23,6 +25,7 @@ const ProfileTab = {
|
|||
showRole: this.$store.state.users.currentUser.show_role,
|
||||
role: this.$store.state.users.currentUser.role,
|
||||
discoverable: this.$store.state.users.currentUser.discoverable,
|
||||
bot: this.$store.state.users.currentUser.bot,
|
||||
allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
|
||||
pickAvatarBtnVisible: true,
|
||||
bannerUploading: false,
|
||||
|
|
@ -62,6 +65,45 @@ const ProfileTab = {
|
|||
...this.$store.state.instance.emoji,
|
||||
...this.$store.state.instance.customEmoji
|
||||
] })
|
||||
},
|
||||
userSuggestor () {
|
||||
return suggestor({
|
||||
users: this.$store.state.users.users,
|
||||
updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
|
||||
})
|
||||
},
|
||||
fieldsLimits () {
|
||||
return this.$store.state.instance.fieldsLimits
|
||||
},
|
||||
maxFields () {
|
||||
return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
|
||||
},
|
||||
defaultAvatar () {
|
||||
return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
|
||||
},
|
||||
defaultBanner () {
|
||||
return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
|
||||
},
|
||||
isDefaultAvatar () {
|
||||
const baseAvatar = this.$store.state.instance.defaultAvatar
|
||||
return !(this.$store.state.users.currentUser.profile_image_url) ||
|
||||
this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
|
||||
},
|
||||
isDefaultBanner () {
|
||||
const baseBanner = this.$store.state.instance.defaultBanner
|
||||
return !(this.$store.state.users.currentUser.cover_photo) ||
|
||||
this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
|
||||
},
|
||||
isDefaultBackground () {
|
||||
return !(this.$store.state.users.currentUser.background_image)
|
||||
},
|
||||
avatarImgSrc () {
|
||||
const src = this.$store.state.users.currentUser.profile_image_url_original
|
||||
return (!src) ? this.defaultAvatar : src
|
||||
},
|
||||
bannerImgSrc () {
|
||||
const src = this.$store.state.users.currentUser.cover_photo
|
||||
return (!src) ? this.defaultBanner : src
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -74,17 +116,21 @@ const ProfileTab = {
|
|||
// Backend notation.
|
||||
/* eslint-disable camelcase */
|
||||
display_name: this.newName,
|
||||
fields_attributes: this.newFields.filter(el => el != null),
|
||||
default_scope: this.newDefaultScope,
|
||||
no_rich_text: this.newNoRichText,
|
||||
hide_follows: this.hideFollows,
|
||||
hide_followers: this.hideFollowers,
|
||||
discoverable: this.discoverable,
|
||||
bot: this.bot,
|
||||
allow_following_move: this.allowFollowingMove,
|
||||
hide_follows_count: this.hideFollowsCount,
|
||||
hide_followers_count: this.hideFollowersCount,
|
||||
show_role: this.showRole
|
||||
/* eslint-enable camelcase */
|
||||
} }).then((user) => {
|
||||
this.newFields.splice(user.fields.length)
|
||||
merge(this.newFields, user.fields)
|
||||
this.$store.commit('addNewUsers', [user])
|
||||
this.$store.commit('setCurrentUser', user)
|
||||
})
|
||||
|
|
@ -92,6 +138,16 @@ const ProfileTab = {
|
|||
changeVis (visibility) {
|
||||
this.newDefaultScope = visibility
|
||||
},
|
||||
addField () {
|
||||
if (this.newFields.length < this.maxFields) {
|
||||
this.newFields.push({ name: '', value: '' })
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
deleteField (index, event) {
|
||||
this.$delete(this.newFields, index)
|
||||
},
|
||||
uploadFile (slot, e) {
|
||||
const file = e.target.files[0]
|
||||
if (!file) { return }
|
||||
|
|
@ -121,11 +177,29 @@ const ProfileTab = {
|
|||
}
|
||||
reader.readAsDataURL(file)
|
||||
},
|
||||
resetAvatar () {
|
||||
const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
|
||||
if (confirmed) {
|
||||
this.submitAvatar(undefined, '')
|
||||
}
|
||||
},
|
||||
resetBanner () {
|
||||
const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
|
||||
if (confirmed) {
|
||||
this.submitBanner('')
|
||||
}
|
||||
},
|
||||
resetBackground () {
|
||||
const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
|
||||
if (confirmed) {
|
||||
this.submitBackground('')
|
||||
}
|
||||
},
|
||||
submitAvatar (cropper, file) {
|
||||
const that = this
|
||||
return new Promise((resolve, reject) => {
|
||||
function updateAvatar (avatar) {
|
||||
that.$store.state.api.backendInteractor.updateAvatar({ avatar })
|
||||
that.$store.state.api.backendInteractor.updateProfileImages({ avatar })
|
||||
.then((user) => {
|
||||
that.$store.commit('addNewUsers', [user])
|
||||
that.$store.commit('setCurrentUser', user)
|
||||
|
|
@ -143,11 +217,11 @@ const ProfileTab = {
|
|||
}
|
||||
})
|
||||
},
|
||||
submitBanner () {
|
||||
if (!this.bannerPreview) { return }
|
||||
submitBanner (banner) {
|
||||
if (!this.bannerPreview && banner !== '') { return }
|
||||
|
||||
this.bannerUploading = true
|
||||
this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner })
|
||||
this.$store.state.api.backendInteractor.updateProfileImages({ banner })
|
||||
.then((user) => {
|
||||
this.$store.commit('addNewUsers', [user])
|
||||
this.$store.commit('setCurrentUser', user)
|
||||
|
|
@ -158,11 +232,11 @@ const ProfileTab = {
|
|||
})
|
||||
.then(() => { this.bannerUploading = false })
|
||||
},
|
||||
submitBg () {
|
||||
if (!this.backgroundPreview) { return }
|
||||
let background = this.background
|
||||
submitBackground (background) {
|
||||
if (!this.backgroundPreview && background !== '') { return }
|
||||
|
||||
this.backgroundUploading = true
|
||||
this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => {
|
||||
this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => {
|
||||
if (!data.error) {
|
||||
this.$store.commit('addNewUsers', [data])
|
||||
this.$store.commit('setCurrentUser', data)
|
||||
|
|
|
|||
|
|
@ -13,8 +13,14 @@
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.banner {
|
||||
.banner-background-preview {
|
||||
max-width: 100%;
|
||||
width: 300px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.uploading {
|
||||
|
|
@ -26,18 +32,40 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.bg {
|
||||
max-width: 100%;
|
||||
.current-avatar-container {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.current-avatar {
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: $fallback--avatarRadius;
|
||||
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
right: 0.2em;
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0.7;
|
||||
color: white;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.oauth-tokens {
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -79,4 +107,22 @@
|
|||
.setting-subitem {
|
||||
margin-left: 1.75em;
|
||||
}
|
||||
|
||||
.profile-fields {
|
||||
display: flex;
|
||||
|
||||
&>.emoji-input {
|
||||
flex: 1 1 auto;
|
||||
margin: 0 .2em .5em;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&>.icon-container {
|
||||
width: 20px;
|
||||
|
||||
&>.icon-cancel {
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,6 +95,59 @@
|
|||
{{ $t('settings.discoverable') }}
|
||||
</Checkbox>
|
||||
</p>
|
||||
<div v-if="maxFields > 0">
|
||||
<p>{{ $t('settings.profile_fields.label') }}</p>
|
||||
<div
|
||||
v-for="(_, i) in newFields"
|
||||
:key="i"
|
||||
class="profile-fields"
|
||||
>
|
||||
<EmojiInput
|
||||
v-model="newFields[i].name"
|
||||
enable-emoji-picker
|
||||
hide-emoji-button
|
||||
:suggest="userSuggestor"
|
||||
>
|
||||
<input
|
||||
v-model="newFields[i].name"
|
||||
:placeholder="$t('settings.profile_fields.name')"
|
||||
>
|
||||
</EmojiInput>
|
||||
<EmojiInput
|
||||
v-model="newFields[i].value"
|
||||
enable-emoji-picker
|
||||
hide-emoji-button
|
||||
:suggest="userSuggestor"
|
||||
>
|
||||
<input
|
||||
v-model="newFields[i].value"
|
||||
:placeholder="$t('settings.profile_fields.value')"
|
||||
>
|
||||
</EmojiInput>
|
||||
<div
|
||||
class="icon-container"
|
||||
>
|
||||
<i
|
||||
v-show="newFields.length > 1"
|
||||
class="icon-cancel"
|
||||
@click="deleteField(i)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
v-if="newFields.length < maxFields"
|
||||
class="add-field faint"
|
||||
@click="addField"
|
||||
>
|
||||
<i class="icon-plus" />
|
||||
{{ $t("settings.profile_fields.add_field") }}
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
<Checkbox v-model="bot">
|
||||
{{ $t('settings.bot') }}
|
||||
</Checkbox>
|
||||
</p>
|
||||
<button
|
||||
:disabled="newName && newName.length === 0"
|
||||
class="btn btn-default"
|
||||
|
|
@ -108,11 +161,19 @@
|
|||
<p class="visibility-notice">
|
||||
{{ $t('settings.avatar_size_instruction') }}
|
||||
</p>
|
||||
<p>{{ $t('settings.current_avatar') }}</p>
|
||||
<img
|
||||
:src="user.profile_image_url_original"
|
||||
class="current-avatar"
|
||||
>
|
||||
<div class="current-avatar-container">
|
||||
<img
|
||||
:src="user.profile_image_url_original"
|
||||
class="current-avatar"
|
||||
>
|
||||
<i
|
||||
v-if="!isDefaultAvatar && pickAvatarBtnVisible"
|
||||
:title="$t('settings.reset_avatar')"
|
||||
class="reset-button icon-cancel"
|
||||
type="button"
|
||||
@click="resetAvatar"
|
||||
/>
|
||||
</div>
|
||||
<p>{{ $t('settings.set_new_avatar') }}</p>
|
||||
<button
|
||||
v-show="pickAvatarBtnVisible"
|
||||
|
|
@ -131,15 +192,20 @@
|
|||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{ $t('settings.profile_banner') }}</h2>
|
||||
<p>{{ $t('settings.current_profile_banner') }}</p>
|
||||
<img
|
||||
:src="user.cover_photo"
|
||||
class="banner"
|
||||
>
|
||||
<div class="banner-background-preview">
|
||||
<img :src="user.cover_photo">
|
||||
<i
|
||||
v-if="!isDefaultBanner"
|
||||
:title="$t('settings.reset_profile_banner')"
|
||||
class="reset-button icon-cancel"
|
||||
type="button"
|
||||
@click="resetBanner"
|
||||
/>
|
||||
</div>
|
||||
<p>{{ $t('settings.set_new_profile_banner') }}</p>
|
||||
<img
|
||||
v-if="bannerPreview"
|
||||
class="banner"
|
||||
class="banner-background-preview"
|
||||
:src="bannerPreview"
|
||||
>
|
||||
<div>
|
||||
|
|
@ -155,7 +221,7 @@
|
|||
<button
|
||||
v-else-if="bannerPreview"
|
||||
class="btn btn-default"
|
||||
@click="submitBanner"
|
||||
@click="submitBanner(banner)"
|
||||
>
|
||||
{{ $t('general.submit') }}
|
||||
</button>
|
||||
|
|
@ -172,10 +238,20 @@
|
|||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{ $t('settings.profile_background') }}</h2>
|
||||
<div class="banner-background-preview">
|
||||
<img :src="user.background_image">
|
||||
<i
|
||||
v-if="!isDefaultBackground"
|
||||
:title="$t('settings.reset_profile_background')"
|
||||
class="reset-button icon-cancel"
|
||||
type="button"
|
||||
@click="resetBackground"
|
||||
/>
|
||||
</div>
|
||||
<p>{{ $t('settings.set_new_profile_background') }}</p>
|
||||
<img
|
||||
v-if="backgroundPreview"
|
||||
class="bg"
|
||||
class="banner-background-preview"
|
||||
:src="backgroundPreview"
|
||||
>
|
||||
<div>
|
||||
|
|
@ -191,7 +267,7 @@
|
|||
<button
|
||||
v-else-if="backgroundPreview"
|
||||
class="btn btn-default"
|
||||
@click="submitBg"
|
||||
@click="submitBackground(background)"
|
||||
>
|
||||
{{ $t('general.submit') }}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -65,6 +65,14 @@
|
|||
<i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="currentUser"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'bookmarks'}">
|
||||
<i class="button-icon icon-bookmark" /> {{ $t("nav.bookmarks") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="currentUser && currentUser.locked"
|
||||
@click="toggleDrawer"
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ import map from 'lodash/map'
|
|||
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
|
||||
|
||||
const StaffPanel = {
|
||||
created () {
|
||||
const nicknames = this.$store.state.instance.staffAccounts
|
||||
nicknames.forEach(nickname => this.$store.dispatch('fetchUserIfMissing', nickname))
|
||||
},
|
||||
components: {
|
||||
BasicUserCard
|
||||
},
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ const Status = {
|
|||
return this.mergedConfig.hideFilteredStatuses
|
||||
},
|
||||
hideStatus () {
|
||||
return (this.hideReply || this.deleted) || (this.muted && this.hideFilteredStatuses)
|
||||
return this.deleted || (this.muted && this.hideFilteredStatuses)
|
||||
},
|
||||
isFocused () {
|
||||
// retweet or root of an expanded conversation
|
||||
|
|
@ -164,37 +164,6 @@ const Status = {
|
|||
return user && user.screen_name
|
||||
}
|
||||
},
|
||||
hideReply () {
|
||||
if (this.mergedConfig.replyVisibility === 'all') {
|
||||
return false
|
||||
}
|
||||
if (this.inConversation || !this.isReply) {
|
||||
return false
|
||||
}
|
||||
if (this.status.user.id === this.currentUser.id) {
|
||||
return false
|
||||
}
|
||||
if (this.status.type === 'retweet') {
|
||||
return false
|
||||
}
|
||||
const checkFollowing = this.mergedConfig.replyVisibility === 'following'
|
||||
for (var i = 0; i < this.status.attentions.length; ++i) {
|
||||
if (this.status.user.id === this.status.attentions[i].id) {
|
||||
continue
|
||||
}
|
||||
// There's zero guarantee of this working. If we happen to have that user and their
|
||||
// relationship in store then it will work, but there's kinda little chance of having
|
||||
// them for people you're not following.
|
||||
const relationship = this.$store.state.users.relationships[this.status.attentions[i].id]
|
||||
if (checkFollowing && relationship && relationship.following) {
|
||||
return false
|
||||
}
|
||||
if (this.status.attentions[i].id === this.currentUser.id) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return this.status.attentions.length > 0
|
||||
},
|
||||
replySubject () {
|
||||
if (!this.status.summary) return ''
|
||||
const decodedSummary = unescape(this.status.summary)
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@
|
|||
>
|
||||
<StatusPopover
|
||||
v-if="!isPreview"
|
||||
:status-id="status.in_reply_to_status_id"
|
||||
:status-id="status.parent_visible && status.in_reply_to_status_id"
|
||||
class="reply-to-popover"
|
||||
style="min-width: 0"
|
||||
>
|
||||
|
|
@ -208,7 +208,12 @@
|
|||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
||||
>
|
||||
<i class="button-icon icon-reply" />
|
||||
<span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
|
||||
<span
|
||||
class="faint-link reply-to-text"
|
||||
:class="{ 'strikethrough': !status.parent_visible }"
|
||||
>
|
||||
{{ $t('status.reply_to') }}
|
||||
</span>
|
||||
</a>
|
||||
</StatusPopover>
|
||||
<span
|
||||
|
|
@ -372,9 +377,6 @@ $status-margin: 0.75em;
|
|||
}
|
||||
|
||||
.status-el {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
border-left-width: 0px;
|
||||
min-width: 0;
|
||||
border-color: $fallback--border;
|
||||
|
|
@ -418,7 +420,7 @@ $status-margin: 0.75em;
|
|||
max-width: 85%;
|
||||
font-weight: bold;
|
||||
|
||||
img {
|
||||
img.emoji {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
vertical-align: middle;
|
||||
|
|
@ -526,6 +528,10 @@ $status-margin: 0.75em;
|
|||
margin: 0 0.4em 0 0.2em;
|
||||
}
|
||||
|
||||
.strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.replies-separator {
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -99,15 +99,8 @@ const StatusContent = {
|
|||
file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
|
||||
)
|
||||
},
|
||||
hasImageAttachments () {
|
||||
return this.status.attachments.some(
|
||||
file => fileType.fileType(file.mimetype) === 'image'
|
||||
)
|
||||
},
|
||||
hasVideoAttachments () {
|
||||
return this.status.attachments.some(
|
||||
file => fileType.fileType(file.mimetype) === 'video'
|
||||
)
|
||||
attachmentTypes () {
|
||||
return this.status.attachments.map(file => fileType.fileType(file.mimetype))
|
||||
},
|
||||
maxThumbnails () {
|
||||
return this.mergedConfig.maxThumbnails
|
||||
|
|
@ -142,12 +135,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) }"
|
||||
>
|
||||
<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("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"
|
||||
/>
|
||||
{{ $t("status.show_full_subject") }}
|
||||
</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"
|
||||
>
|
||||
|
|
@ -51,31 +38,51 @@
|
|||
: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="attachmentTypes.includes('image')"
|
||||
class="icon-picture"
|
||||
/>
|
||||
<span
|
||||
v-if="attachmentTypes.includes('video')"
|
||||
class="icon-video"
|
||||
/>
|
||||
<span
|
||||
v-if="attachmentTypes.includes('audio')"
|
||||
class="icon-music"
|
||||
/>
|
||||
<span
|
||||
v-if="attachmentTypes.includes('unknown')"
|
||||
class="icon-doc"
|
||||
/>
|
||||
<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 +136,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 +149,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,10 +189,45 @@ $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;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
|
||||
blockquote {
|
||||
margin: 0.2em 0 0.2em 2em;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@ const StatusPopover = {
|
|||
methods: {
|
||||
enter () {
|
||||
if (!this.status) {
|
||||
if (!this.statusId) {
|
||||
this.error = true
|
||||
return
|
||||
}
|
||||
this.$store.dispatch('fetchStatus', this.statusId)
|
||||
.then(data => (this.error = false))
|
||||
.catch(e => (this.error = true))
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ const StillImage = {
|
|||
'referrerpolicy',
|
||||
'mimetype',
|
||||
'imageLoadError',
|
||||
'imageLoadHandler'
|
||||
'imageLoadHandler',
|
||||
'alt'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@
|
|||
<img
|
||||
ref="src"
|
||||
:key="src"
|
||||
:alt="alt"
|
||||
:title="alt"
|
||||
:src="src"
|
||||
:referrerpolicy="referrerpolicy"
|
||||
@load="onLoad"
|
||||
|
|
|
|||
|
|
@ -45,11 +45,15 @@ const Timeline = {
|
|||
newStatusCount () {
|
||||
return this.timeline.newStatusCount
|
||||
},
|
||||
newStatusCountStr () {
|
||||
showLoadButton () {
|
||||
if (this.timelineError || this.errorData) return false
|
||||
return this.timeline.newStatusCount > 0 || this.timeline.flushMarker !== 0
|
||||
},
|
||||
loadButtonString () {
|
||||
if (this.timeline.flushMarker !== 0) {
|
||||
return ''
|
||||
return this.$t('timeline.reload')
|
||||
} else {
|
||||
return ` (${this.newStatusCount})`
|
||||
return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
|
||||
}
|
||||
},
|
||||
classes () {
|
||||
|
|
@ -112,8 +116,6 @@ const Timeline = {
|
|||
if (e.key === '.') this.showNewStatuses()
|
||||
},
|
||||
showNewStatuses () {
|
||||
if (this.newStatusCount === 0) return
|
||||
|
||||
if (this.timeline.flushMarker !== 0) {
|
||||
this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
|
||||
this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
|
||||
|
|
@ -135,7 +137,7 @@ const Timeline = {
|
|||
showImmediately: true,
|
||||
userId: this.userId,
|
||||
tag: this.tag
|
||||
}).then(statuses => {
|
||||
}).then(({ statuses }) => {
|
||||
store.commit('setLoading', { timeline: this.timelineName, value: false })
|
||||
if (statuses && statuses.length === 0) {
|
||||
this.bottomedOut = true
|
||||
|
|
|
|||
|
|
@ -19,14 +19,14 @@
|
|||
{{ errorData.statusText }}
|
||||
</div>
|
||||
<button
|
||||
v-if="timeline.newStatusCount > 0 && !timelineError && !errorData"
|
||||
v-else-if="showLoadButton"
|
||||
class="loadmore-button"
|
||||
@click.prevent="showNewStatuses"
|
||||
>
|
||||
{{ $t('timeline.show_new') }}{{ newStatusCountStr }}
|
||||
{{ loadButtonString }}
|
||||
</button>
|
||||
<div
|
||||
v-if="!timeline.newStatusCount > 0 && !timelineError && !errorData"
|
||||
v-else
|
||||
class="loadmore-text faint"
|
||||
@click.prevent
|
||||
>
|
||||
|
|
|
|||
|
|
@ -8,26 +8,20 @@ const UserAvatar = {
|
|||
],
|
||||
data () {
|
||||
return {
|
||||
showPlaceholder: false
|
||||
showPlaceholder: false,
|
||||
defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`
|
||||
}
|
||||
},
|
||||
components: {
|
||||
StillImage
|
||||
},
|
||||
computed: {
|
||||
imgSrc () {
|
||||
return this.showPlaceholder ? '/images/avi.png' : this.user.profile_image_url_original
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
imgSrc (src) {
|
||||
return (!src || this.showPlaceholder) ? this.defaultAvatar : src
|
||||
},
|
||||
imageLoadError () {
|
||||
this.showPlaceholder = true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
src () {
|
||||
this.showPlaceholder = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
class="avatar"
|
||||
:alt="user.screen_name"
|
||||
:title="user.screen_name"
|
||||
:src="imgSrc"
|
||||
:src="imgSrc(user.profile_image_url_original)"
|
||||
:class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
|
||||
:image-load-error="imageLoadError"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -70,10 +70,20 @@
|
|||
>
|
||||
@{{ user.screen_name }}
|
||||
</router-link>
|
||||
<span
|
||||
v-if="!hideBio && !!visibleRole"
|
||||
class="alert staff"
|
||||
>{{ visibleRole }}</span>
|
||||
<template v-if="!hideBio">
|
||||
<span
|
||||
v-if="!!visibleRole"
|
||||
class="alert user-role"
|
||||
>
|
||||
{{ visibleRole }}
|
||||
</span>
|
||||
<span
|
||||
v-if="user.bot"
|
||||
class="alert user-role"
|
||||
>
|
||||
bot
|
||||
</span>
|
||||
</template>
|
||||
<span v-if="user.locked"><i class="icon icon-lock" /></span>
|
||||
<span
|
||||
v-if="!mergedConfig.hideUserStats && !hideBio"
|
||||
|
|
@ -458,7 +468,7 @@
|
|||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
.staff {
|
||||
.user-role {
|
||||
flex: none;
|
||||
text-transform: capitalize;
|
||||
color: $fallback--text;
|
||||
|
|
|
|||
|
|
@ -10,9 +10,7 @@
|
|||
:hide-bio="true"
|
||||
rounded="top"
|
||||
/>
|
||||
<div class="panel-footer">
|
||||
<PostStatusForm />
|
||||
</div>
|
||||
<PostStatusForm />
|
||||
</div>
|
||||
<auth-form
|
||||
v-else
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
:src="attachment.url"
|
||||
:loop="loopVideo"
|
||||
:controls="controls"
|
||||
:alt="attachment.description"
|
||||
:title="attachment.description"
|
||||
playsinline
|
||||
@loadeddata="onVideoDataLoad"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ function showWhoToFollow (panel, reply) {
|
|||
|
||||
panel.usersToFollow.forEach((toFollow, index) => {
|
||||
let user = shuffled[index]
|
||||
let img = user.avatar || '/images/avi.png'
|
||||
let img = user.avatar || this.$store.state.instance.defaultAvatar
|
||||
let name = user.acct
|
||||
|
||||
toFollow.img = img
|
||||
|
|
@ -38,13 +38,7 @@ function getWhoToFollow (panel) {
|
|||
|
||||
const WhoToFollowPanel = {
|
||||
data: () => ({
|
||||
usersToFollow: new Array(3).fill().map(x => (
|
||||
{
|
||||
img: '/images/avi.png',
|
||||
name: '',
|
||||
id: 0
|
||||
}
|
||||
))
|
||||
usersToFollow: []
|
||||
}),
|
||||
computed: {
|
||||
user: function () {
|
||||
|
|
@ -68,6 +62,13 @@ const WhoToFollowPanel = {
|
|||
},
|
||||
mounted:
|
||||
function () {
|
||||
this.usersToFollow = new Array(3).fill().map(x => (
|
||||
{
|
||||
img: this.$store.state.instance.defaultAvatar,
|
||||
name: '',
|
||||
id: 0
|
||||
}
|
||||
))
|
||||
if (this.suggestionsEnabled) {
|
||||
getWhoToFollow(this)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue