update with bookmarks, clean up some code
This commit is contained in:
Shpuld Shpuldson
commit
ddde05771f
59 changed files with 982 additions and 236 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>
|
||||
|
|
@ -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')"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
import { mapState } from 'vuex'
|
||||
|
||||
const timelineRoutes = [
|
||||
'friends',
|
||||
'dms',
|
||||
'public-timeline',
|
||||
'public-external-timeline'
|
||||
]
|
||||
import { timelineNames } from '../timeline_menu/timeline_menu.js'
|
||||
|
||||
const NavPanel = {
|
||||
created () {
|
||||
|
|
@ -15,7 +9,7 @@ const NavPanel = {
|
|||
},
|
||||
computed: {
|
||||
onTimelineRoute () {
|
||||
return timelineRoutes.includes(this.$route.name)
|
||||
return !!timelineNames()[this.$route.name]
|
||||
},
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
:to="{ name: 'friends' }"
|
||||
:class="onTimelineRoute && 'router-link-active'"
|
||||
>
|
||||
<i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
|
||||
<i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-else-if="!privateMode">
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -62,6 +62,11 @@
|
|||
<i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li @click="toggleDrawer">
|
||||
<router-link :to="{ name: 'bookmarks'}">
|
||||
<i class="button-icon icon-bookmark" /> {{ $t("nav.bookmarks") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -55,13 +55,21 @@
|
|||
>
|
||||
{{ $t("status.show_content") }}
|
||||
<span
|
||||
v-if="hasImageAttachments"
|
||||
v-if="attachmentTypes.includes('image')"
|
||||
class="icon-picture"
|
||||
/>
|
||||
<span
|
||||
v-if="hasVideoAttachments"
|
||||
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"
|
||||
|
|
@ -217,6 +225,9 @@ $status-margin: 0.75em;
|
|||
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"
|
||||
|
|
|
|||
|
|
@ -139,7 +139,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
|
||||
|
|
|
|||
|
|
@ -1,6 +1,18 @@
|
|||
import Popover from '../popover/popover.vue'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
// Route -> i18n key mapping, exported andnot in the computed
|
||||
// because nav panel benefits from the same information.
|
||||
export const timelineNames = () => {
|
||||
return {
|
||||
'friends': 'nav.timeline',
|
||||
'bookmarks': 'nav.bookmarks',
|
||||
'dms': 'nav.dms',
|
||||
'public-timeline': 'nav.public_tl',
|
||||
'public-external-timeline': 'nav.twkn'
|
||||
}
|
||||
}
|
||||
|
||||
const TimelineMenu = {
|
||||
components: {
|
||||
Popover
|
||||
|
|
@ -17,11 +29,14 @@ const TimelineMenu = {
|
|||
},
|
||||
methods: {
|
||||
openMenu () {
|
||||
// Tried using $nextTick, but the animation wouldn't
|
||||
// play, I assume it played too quickly
|
||||
// $nextTick is too fast, animation won't play back but
|
||||
// instead starts in fully open position. Low values
|
||||
// like 1-5 work on fast machines but not on mobile, 25
|
||||
// seems like a good compromise that plays without significant
|
||||
// added lag.
|
||||
setTimeout(() => {
|
||||
this.isOpen = true
|
||||
}, 1)
|
||||
}, 25)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -30,13 +45,8 @@ const TimelineMenu = {
|
|||
privateMode: state => state.instance.private,
|
||||
federating: state => state.instance.federating
|
||||
}),
|
||||
timelineNamesForRoute () {
|
||||
return {
|
||||
'friends': this.$t('nav.timeline'),
|
||||
'dms': this.$t('nav.dms'),
|
||||
'public-timeline': this.$t('nav.public_tl'),
|
||||
'public-external-timeline': this.$t('nav.twkn')
|
||||
}
|
||||
timelineNames () {
|
||||
return timelineNames()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,11 @@
|
|||
<i class="button-icon icon-home-2" />{{ $t("nav.timeline") }}
|
||||
</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">
|
||||
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
|
||||
<i class="button-icon icon-mail-alt" />{{ $t("nav.dms") }}
|
||||
|
|
@ -40,7 +45,7 @@
|
|||
slot="trigger"
|
||||
class="title timeline-menu-title"
|
||||
>
|
||||
<span>{{ timelineNamesForRoute[$route.name] }}</span>
|
||||
<span>{{ $t(timelineNames[$route.name]) }}</span>
|
||||
<i class="icon-down-open" />
|
||||
</div>
|
||||
</Popover>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue