Compare commits

...

232 Commits

Author SHA1 Message Date
twl f6a3dc22f9 change emoji picker
12 months ago
twl e48d392c09 fix conficts
12 months ago
Not Sam 9c893479e0
update submodule
12 months ago
Not Sam 14eaeb3f26
Merge remote-tracking branch 'puni/fedi-absturztau-be' into froth
12 months ago
Not Sam 0344475722
Merge branch 'develop' of https://git.pleroma.social/pleroma/pleroma-fe into froth
12 months ago
Not Sam 450ee4d6d4
Undo puni's changes temporarily
12 months ago
HJ 58d0f9678b Merge branch 'fix-mentions-new-bugs' into 'develop'
12 months ago
HJ ddee8bb686 Merge branch 'proper-attachments' into 'develop'
12 months ago
HJ 56616787ec Merge branch 'fix-pinned-statuses' into 'develop'
12 months ago
HJ d3659b5597 Merge branch 'fix-1133' into 'develop'
12 months ago
Henry Jameson 373c30be69 fix #1133
12 months ago
Not Sam 3e9955fe20
Add a super basic keep reaction open button
12 months ago
Henry Jameson 7b60adb480 only for user TL
12 months ago
Henry Jameson 5864dc52f7 removed file because that logic has been removed
12 months ago
Henry Jameson a31ff20f50 lol, lmao, that was some shit, this is much easier and works all the time
12 months ago
Henry Jameson 2a97bdb39d fix pinned statuses appearing at the bottom of user timeline (and
12 months ago
Henry Jameson 86e3aefdab new unit tests
12 months ago
Henry Jameson a8d1987686 fix unit tests
12 months ago
Henry Jameson 0d073d607c enable link handling in user bios to fix links not having _blank
12 months ago
Henry Jameson 769a9a14fe add emoji to chat titles
12 months ago
Henry Jameson a61f6e1590 use rich content in interaction lists
12 months ago
Henry Jameson ee86f56469 more spacing fixes
12 months ago
Henry Jameson 17d6f1b53b more spacing fixes
12 months ago
Henry Jameson befd4d5fc7 improve unknown attachment handling
12 months ago
Henry Jameson 4c7edfc9a9 more spacing/wrapping fixes
12 months ago
Henry Jameson d361a4d7dc fix overflows
1 year ago
Henry Jameson 571e73a346 better approach to unescaping
1 year ago
Henry Jameson 39ecb33883 fix amps in links
1 year ago
Henry Jameson 0f01931309 make chat messages behave same as posts for animated gifs
1 year ago
Henry Jameson a9830ff491 support width/height img attributes
1 year ago
Henry Jameson 9a6363431d lint
1 year ago
Henry Jameson ea6114f63c better phrasing?
1 year ago
Henry Jameson bfb3a4364b options to disable (You)s and highlighting of yourself
1 year ago
Henry Jameson 6d3229b1a1 fix poast mentions tripping
1 year ago
Henry Jameson 06042569f1 fix alignment issues
1 year ago
Henry Jameson d1f02221cb changelog
1 year ago
Henry Jameson efd558f394 Merge remote-tracking branch 'origin/develop' into proper-attachments
1 year ago
Henry Jameson 94c37e8adf Merge remote-tracking branch 'origin/develop' into proper-attachments
1 year ago
Henry Jameson 56de3d2f52 fix too-many-attachments in notifications column
1 year ago
Henry Jameson c551e3e697 Merge remote-tracking branch 'origin/develop' into proper-attachments
1 year ago
Lynne 1b712bc1a0 Remove ruffle
1 year ago
Absturztaube 12db1d8719 Merge branch 'develop' into fedi-absturztau-be
1 year ago
Absturztaube b4b906689f add threading
1 year ago
Absturztaube d34cef391b resolve merge confilcts
1 year ago
Tusooa Zhu fe0e7bd63c
Fix timeline jump when scrolling
1 year ago
Tusooa Zhu 78f573af47
Make replying and mediaPlaying controlled
1 year ago
Tusooa Zhu 12ed9a1799
Fix virtual scrolling for tree threading
1 year ago
Tusooa Zhu 0b576b64e2
Clean up debug code for tree threading
1 year ago
Tusooa Zhu 708633d6b1
Fix controlled status display toggles
1 year ago
Tusooa Zhu 59a2f65a33
Add English translations for other replies count
1 year ago
Tusooa Zhu c069a9f799
Add other replies count for reply list link
1 year ago
Tusooa Zhu c634e15305
Do not display replies inside status as link if there are no other replies
1 year ago
Tusooa Zhu a1404f7735
Add English translation for position of other replies button pref
1 year ago
Tusooa Zhu 70ec3ad09e
Make position of other replies button a pref
1 year ago
Tusooa Zhu 8a4c0bfa18
Add English translation for show all conversation button improvement
1 year ago
Tusooa Zhu 00cc721344
Improve "show full conversation" interaction
1 year ago
Tusooa Zhu a917bdc34b
Make other replies button stretch along the row
1 year ago
Tusooa Zhu 4648bc6f72
Optimise thread ancestor borders
1 year ago
Tusooa Zhu 5643314922
Optimise thread ancestor display style
1 year ago
Tusooa Zhu 89761743b8
Reset thread open state when collapsed
1 year ago
Tusooa Zhu e01445b1d9
Clean up
1 year ago
Tusooa Zhu 5a37ea5a8e
Highlight ancestor of the current status when diving back to top
1 year ago
Tusooa Zhu 1fdba77ae5
Add English translation for Misskey-style tree view
1 year ago
Tusooa Zhu 7dd5e0fc8e
Implement Misskey-style tree view
1 year ago
Tusooa Zhu 38a67cc2e2
Remove horizontal border and thicken vertical border in a thread tree
1 year ago
Tusooa Zhu 2c91a020bc
Make dive/undive button clickable along the whole row
1 year ago
Tusooa Zhu 2a6f0c4a34
Optimize thread border radius
1 year ago
Tusooa Zhu f8d25d2c2a
Optimize thread display
1 year ago
Tusooa Zhu b7e179c1fe
Fix the bug where toggleShowingTall does not work
1 year ago
Tusooa Zhu 46feecee70
Fix status undefined in parentOf
1 year ago
Tusooa Zhu 9029344e1f
Add English translations for max depth in thread
1 year ago
Tusooa Zhu 891fb00107
Add settings for max depth in thread
1 year ago
Tusooa Zhu 640d3041ef
Use mergedConfig properly
1 year ago
Tusooa Zhu 28469988dd
Fallback to simpleTree style
1 year ago
Tusooa Zhu ac464be063
Undive when collapsed
1 year ago
Tusooa Zhu c221805695
Clean up
1 year ago
Tusooa Zhu 49398566d3
Lint
1 year ago
Tusooa Zhu 9ccc374feb
Add English translation for simple tree
1 year ago
Tusooa Zhu ad5c0abe14
Add simple tree style navigation
1 year ago
Tusooa Zhu ff59c5a785
Add English translation for diving
1 year ago
Tusooa Zhu 93bcee9516
Add dive functionality
1 year ago
Tusooa Zhu f0c717ce5f
Add English translations for diving
1 year ago
Tusooa Zhu 4f775b6be4
Support diving into one status in a conversation
1 year ago
Tusooa Zhu 436597a906
Make status display controlled
1 year ago
Tusooa Zhu e6120df550
Add English translations for message threading
1 year ago
Tusooa Zhu a4a0858110
Make show full thread message account for numbers
1 year ago
Tusooa Zhu b1f4b1bff3
Implement thread folding/expanding
1 year ago
Tusooa Zhu 814a27749a
Add tree-style thread display
1 year ago
Henry Jameson 49fe334186 play gifs when hovering over notification
1 year ago
Henry Jameson 14ec7d6a41 add attachment counter
1 year ago
Henry Jameson 7cc19ef2ea better media modal loading
1 year ago
Henry Jameson 0507eb6550 ability to move attachments around when making a new post
1 year ago
Henry Jameson 830a03a0d1 inline description display
1 year ago
Henry Jameson 34d265467a add media description into media modal
1 year ago
Henry Jameson f5823a96e9 add key attribute to make image refresh in media modal to give feedback
1 year ago
Henry Jameson 777f6c0162 Merge branch 'better-still-emoji' into proper-attachments
1 year ago
Henry Jameson 299c00cf74 fix video attachments in notifications not having pointer cursor
1 year ago
Henry Jameson 07c12ae162 replace poll with an icon in notifications
1 year ago
Henry Jameson c8a7b6f433 fix long posts double-fading in notifications
1 year ago
Henry Jameson 5431d8fe55 Merge branch 'better-still-emoji' into proper-attachments
1 year ago
Henry Jameson 6aa6f6f300 fix console errors
1 year ago
Henry Jameson 17d2eed06a Merge branch 'better-still-emoji' into proper-attachments
1 year ago
Absturztaube a0cf440fac swap of react and fav
2 years ago
Absturztaube d5e091e9af update readme
2 years ago
Absturztaube 5a5320b71c Merge branch 'tusooa/pleroma-fe-from/develop/tusooa/media-touch-actions' into fedi-absturztau-be
2 years ago
Absturztaube 7fe7339ea7 resolve merge conflicts
2 years ago
Tusooa Zhu 3b6b8b96c4
Bump pinch-zoom-element version
2 years ago
Tusooa Zhu 4c2a7aabe5
Clean up
2 years ago
Tusooa Zhu 3366c915e9
Check whether we swiped only for mouse pointer
2 years ago
Tusooa Zhu db71bbf358
Scale swipe threshold with viewport width
2 years ago
Tusooa Zhu 7b77c0c884
Update pinch-zoom-element
2 years ago
Tusooa Zhu 1478e72fcc
Allow pinch-zoom to fill the whole screen
2 years ago
Tusooa Zhu 33384af5df
Use native click for hiding overlay
2 years ago
Tusooa Zhu 9d4dd64276
Reset position on swipe end even if we cannot navigate
2 years ago
Tusooa Zhu e2f3929872
Make lint happy
2 years ago
Tusooa Zhu 4552c28e06
Prevent the click event from firing on content below modal
2 years ago
Tusooa Zhu 214338b9f0
Add missing swipe click component
2 years ago
Tusooa Zhu cd9384adae
Clean up
2 years ago
Tusooa Zhu 7469849c39
Add swipe-click handler to media modal
2 years ago
Tusooa Zhu 0a63208da7
Use pinch-zoom-element for pinch zoom functionality
2 years ago
Tusooa Zhu 0421c06d47
Add pan threshold
2 years ago
Tusooa Zhu 7d767f840b
Handle pinch action
2 years ago
Tusooa Zhu aa70c31950
Preview swipe action
2 years ago
Tusooa Zhu 61509d1b1e
Make media modal be aware of multi-touch actions
2 years ago
Absturztaube 2b6974dcad fix chats
2 years ago
Absturztaube 6594cdaa63 remove sorting because performance
2 years ago
Absturztaube b5cc8ec3ae update readme
2 years ago
Absturztaube 0fc86d5bfe add tags as buttons to posts
2 years ago
Absturztaube 77f8537f61 improved sidebar ordering when 3rd column is active
2 years ago
Absturztaube 240bce92cd Merge branch 'fix-themes-select' into fedi-absturztau-be
2 years ago
Absturztaube 9be1cc34ba temporary fix for external links
2 years ago
Henry Jameson b67db47c88 lint
2 years ago
Henry Jameson dd3fe61cf3 Merge branch 'better-still-emoji' into proper-attachments
2 years ago
Henry Jameson a2f21f4e13 fix description colliding with extra-long text
2 years ago
Henry Jameson 628b99d117 don't stretch columns when uploading media
2 years ago
Henry Jameson 5118eee19a fix videos not stretching to container
2 years ago
Henry Jameson 4ba8d95a10 fix videos and related not having working drag controls
2 years ago
Henry Jameson 4016182b89 fix z-indexes
2 years ago
Absturztaube 3336572a74 remove order style when sidebarAlign is active
2 years ago
Absturztaube fcf1c7b4b4 resolve merge conflicts
2 years ago
Henry Jameson 6b8b9c017f whoops
2 years ago
Henry Jameson 44b741e270 better attachments in uploading (grid layout)
2 years ago
Henry Jameson 8bab8658e8 better handling of unknown files, better upload display
2 years ago
Henry Jameson bfe31e20ea better compact attachments
2 years ago
Henry Jameson 5c2744b426 Merge branch 'better-still-emoji' into proper-attachments
2 years ago
Henry Jameson f35c090caa merged in compact notifs and improved upon it
2 years ago
Henry Jameson c1293c3afa Merge branch 'compact-notifs' into proper-attachments
2 years ago
Henry Jameson f15599e6e5 gallery in post status form!
2 years ago
Henry Jameson 90345f158f gallery now supports flash, fixes for flash component. refactored media modal
2 years ago
Henry Jameson e654fead23 refactored attachments and gallery. All attachments now are in gallery.
2 years ago
Eris 9c4957268d Use proper setting name
2 years ago
Eris 6689fed513 Use cleaner instance config check for shoutbox setting
2 years ago
Eris 4ecbb58086 Make locale language cleaner
2 years ago
Eris 0a3ce9cc8b Don't shorten shoutbox to SB
2 years ago
Eris dcfd178314 Fix lint error
2 years ago
Eris 1b26c713ef Update CHANGELOG.md
2 years ago
Eris 9e9ab5cec9 New option: Hide shoutbox
2 years ago
Henry Jameson a3c703bd37 compact notifs
2 years ago
Absturztaube c8e517828e Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube c44f2bbcd6 Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube 6064e31c5d Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube 97113bc5df minor fix to sub menu in nav panel
2 years ago
Absturztaube 7f05730e9b resolve merge conflicts and update fixes
2 years ago
Absturztaube 6ef591bdcc Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube 6e43a7d23c update readme
2 years ago
Absturztaube 862a5a86e7 compact user panel
2 years ago
Absturztaube f304fed1e9 added compact nav panel
2 years ago
Absturztaube 5ef3133f75 fix move notification column checkbox
2 years ago
Absturztaube 0cfd263ef4 Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube 94c96345e1 fix language stuff
2 years ago
Absturztaube ba808076ca resolve merge conflicts
2 years ago
Absturztaube eaaa64dde8 ble
2 years ago
Absturztaube 6b6558d924 add changes in readme
2 years ago
Absturztaube ecd5d78bc2 add zero width space when padding of emojis is disabled
2 years ago
Absturztaube a85c1d562c resolve merge conflicts
2 years ago
Absturztaube 2a71d425cd change repo paths
2 years ago
Absturztaube 381c4e7f82 resolve merge conflicts
2 years ago
Absturztaube 026dc263e5 Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube e15095d0dd Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube ad728d9046 resolve conflichts
2 years ago
Absturztaube a6822d26bb Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube 8065afc4d7 resolve merge conflicts
2 years ago
Absturztaube a43623c5a5 Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube 7a9bd70a09 Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube 575ce2c65e Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube 07853ed322 Merge branch 'develop' into fedi-absturztau-be
2 years ago
Absturztaube aabd393e15 add settings for third column
3 years ago
Absturztaube 1e65016d71 fix flex
3 years ago
Absturztaube 2478d8b04e change width
3 years ago
Absturztaube 2e2a261e3d move features panel to the right
3 years ago
Absturztaube ee67b579c5 add 3rd column for testing
3 years ago
Absturztaube 6a77b27a42 resolve merge conflicts
3 years ago
Absturztaube e77cd1d625 fix pleroma-mod-loader ref
3 years ago
Absturztaube f2f11f7f63 add to language switcher
3 years ago
Absturztaube 7668321c98 add en nyan
3 years ago
Absturztaube 2cd6d336ba remove dublicate
3 years ago
Absturztaube ee45f689ac remove dublicate add mod loader
3 years ago
Absturztaube 7b0425c985 Merge branch 'direct-conversations' into fedi-absturztau-be
3 years ago
Absturztaube 7fa2dfecc6 Merge branch 'direct-conversations' of https://git.pleroma.social/eugenijm/pleroma-fe into direct-conversations
3 years ago
eugenijm 0d7d8e9f33 Submit on enter fixes
3 years ago
eugenijm f2b3d1e6b0 Use streaming for real time updates instead of notifications, disable
3 years ago
eugenijm 6c2c0883ce Use since_id when pulling the current chat messages
3 years ago
eugenijm fdef990c6a Submit on enter, start a new line on shift+enter
3 years ago
eugenijm 5fc9ef0bfb WIP chat fixes
3 years ago
eugenijm b05a86b280 WIP keep the on screen keyboard after a message send.
3 years ago
eugenijm 5996954c4a Reset the chat list on logout
3 years ago
eugenijm c82436cd8a WIP Chat refactoring
3 years ago
eugenijm 93049e9d52 WIP preserve scroll position during posting form resize, attachment upload, window resize, disable auto-focus for mobile
3 years ago
eugenijm 5f7494f134 Chat header alignment fixes for the mobile layout
3 years ago
eugenijm c1faeacee8 Set file limit in the chat posting form
3 years ago
eugenijm 6b272b9c99 WIP chat improvements
3 years ago
eugenijm 3dbe0d1e61 WIP display updated_at in the chat list, use updated_at to keep the chat list sorted
3 years ago
eugenijm cf4d3ee1bf WIP display attachment type in the last message
3 years ago
eugenijm c9870a9d43 WIP keep last_message updated
3 years ago
eugenijm 09da927def WIP chat refactoring
3 years ago
eugenijm 99de78b80e WIP chat
3 years ago
eugenijm d2456d5fea Chat message deletion
3 years ago
eugenijm 855f36eeda wip
3 years ago
eugenijm 1b51b02483 WIP chat fixes
3 years ago
eugenijm 6c487f0c58 WIP attachments
3 years ago
eugenijm fc3d7a7565 WIP: add custom emoji
3 years ago
eugenijm 8a8a9ad562 WIP notification count
3 years ago
eugenijm d48b7a7d58 WIP chat
3 years ago
eugenijm 5fdb5c554d WIP load chat messages on scroll up
3 years ago
eugenijm 86cc4ce08d WIP attachments
3 years ago
eugenijm c273560408 WIP display the last message in the chat list
3 years ago
eugenijm 0f3c667eb8 wip
3 years ago
eugenijm bd5b3e8922 wip
3 years ago
eugenijm aa1f2a1c3f wip
3 years ago
eugenijm 5e93ca3edb WIP chat avatars
3 years ago
eugenijm f06ec18cd7 Chat fixes
3 years ago
eugenijm 804cf3abc5 WIP: Chats
3 years ago

@ -6,12 +6,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## Unreleased
### Fixed
- Completely hidden posts still had 1px border
- Attachments are ALWAYS in same order as user uploaded, no more "videos first"
- Attachment description is prefilled with backend-provided default when uploading
- Proper visual feedback that next image is loading when browsing
### Changed
- Settings window has been throughly rearranged to make make more sense and make navication settings easier.
- Uploaded attachments are uniform with displayed attachments
- Flash is watchable in media-modal (takes up nearly full screen though due to sizing issues)
- Notifications about likes/repeats/emoji reacts are now minimized so they always take up same amount of space irrelevant to size of post.
### Added
- Option to completely hide muted threads
- Ability to open videos in modal even if you disabled that feature, via an icon button
- New button on attachment that indicates that attachment has a description and shows a bar filled with description
- Attachments are truncated just like post contents
- Media modal now also displays description and counter position in gallery (i.e. 1/5)
- Ability to rearrange order of attachments when uploading
## [2.4.2] - 2022-01-09
### Added

@ -1 +1 @@
Subproject commit cfd4dd6404d2df6e07e646aff5ff1d606ed48228
Subproject commit 55348c5092b68544cf8d8c1bbe53e75b8757745f

@ -22,7 +22,7 @@
"@fortawesome/free-regular-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/vue-fontawesome": "^2.0.0",
"@kazvmoe-infra/pinch-zoom-element": "https://lily.kazv.moe/infra/pinch-zoom-element.git",
"@kazvmoe-infra/pinch-zoom-element": "^1.2.0",
"body-scroll-lock": "^2.6.4",
"chromatism": "^3.0.0",
"cropperjs": "^1.4.3",

@ -89,6 +89,7 @@ export default {
'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
}
},
fullscreenView () {
return {
'max-width': this.$store.getters.mergedConfig.fullscreenView ? 'initial' : 'null'

@ -28,7 +28,6 @@
<instance-specific-panel v-if="showInstanceSpecificPanel" />
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
<notifications v-if="currentUser && !thirdColumnEnabled" />
<features-panel v-if="!currentUser && !thirdColumnEnabled" />
</div>
</div>
</div>
@ -52,8 +51,8 @@
</div>
<div
v-if="thirdColumnEnabled"
:style="thirdColumnAlign"
class="sidebar-flexer mobile-hidden"
:style="notifsAlign"
>
<div class="sidebar-bounds">
<div class="sidebar-scroller">

@ -10,7 +10,12 @@ import {
faImage,
faVideo,
faPlayCircle,
faTimes
faTimes,
faStop,
faSearchPlus,
faTrashAlt,
faPencilAlt,
faAlignRight
} from '@fortawesome/free-solid-svg-icons'
library.add(
@ -19,27 +24,39 @@ library.add(
faImage,
faVideo,
faPlayCircle,
faTimes
faTimes,
faStop,
faSearchPlus,
faTrashAlt,
faPencilAlt,
faAlignRight
)
const Attachment = {
props: [
'attachment',
'description',
'hideDescription',
'nsfw',
'size',
'allowPlay',
'setMedia',
'naturalSizeLoad'
'remove',
'shiftUp',
'shiftDn',
'edit'
],
data () {
return {
localDescription: this.description || this.attachment.description,
nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
preloadImage: this.$store.getters.mergedConfig.preloadImage,
loading: false,
img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
modalOpen: false,
showHidden: false
showHidden: false,
flashLoaded: false,
showDescription: false
}
},
components: {
@ -47,8 +64,23 @@ const Attachment = {
VideoAttachment
},
computed: {
classNames () {
return [
{
'-loading': this.loading,
'-nsfw-placeholder': this.hidden,
'-editable': this.edit !== undefined
},
'-type-' + this.type,
this.size && '-size-' + this.size,
`-${this.useContainFit ? 'contain' : 'cover'}-fit`
]
},
usePlaceholder () {
return this.size === 'hide' || this.type === 'unknown'
return this.size === 'hide'
},
useContainFit () {
return this.$store.getters.mergedConfig.useContainFit
},
placeholderName () {
if (this.attachment.description === '' || !this.attachment.description) {
@ -72,24 +104,33 @@ const Attachment = {
return this.nsfw && this.hideNsfwLocal && !this.showHidden
},
isEmpty () {
return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
},
isSmall () {
return this.size === 'small'
},
fullwidth () {
if (this.size === 'hide') return false
return this.type === 'html' || this.type === 'audio' || this.type === 'unknown'
return (this.type === 'html' && !this.attachment.oembed)
},
useModal () {
const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
: this.mergedConfig.playVideosInModal
? ['image', 'video']
: ['image']
let modalTypes = []
switch (this.size) {
case 'hide':
case 'small':
modalTypes = ['image', 'video', 'audio', 'flash']
break
default:
modalTypes = this.mergedConfig.playVideosInModal
? ['image', 'video', 'flash']
: ['image']
break
}
return modalTypes.includes(this.type)
},
videoTag () {
return this.useModal ? 'button' : 'span'
},
...mapGetters(['mergedConfig'])
},
watch: {
localDescription (newVal) {
this.onEdit(newVal)
}
},
methods: {
linkClicked ({ target }) {
if (target.tagName === 'A') {
@ -98,12 +139,37 @@ const Attachment = {
},
openModal (event) {
if (this.useModal) {
event.stopPropagation()
event.preventDefault()
this.setMedia()
this.$store.dispatch('setCurrent', this.attachment)
this.$emit('setMedia')
this.$store.dispatch('setCurrentMedia', this.attachment)
} else if (this.type === 'unknown') {
window.open(this.attachment.url)
}
},
openModalForce (event) {
this.$emit('setMedia')
this.$store.dispatch('setCurrentMedia', this.attachment)
},
onEdit (event) {
this.edit && this.edit(this.attachment, event)
},
onRemove () {
this.remove && this.remove(this.attachment)
},
onShiftUp () {
this.shiftUp && this.shiftUp(this.attachment)
},
onShiftDn () {
this.shiftDn && this.shiftDn(this.attachment)
},
stopFlash () {
this.$refs.flash.closePlayer()
},
setFlashLoaded (event) {
this.flashLoaded = event
},
toggleDescription () {
this.showDescription = !this.showDescription
},
toggleHidden (event) {
if (
(this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
@ -130,7 +196,7 @@ const Attachment = {
onImageLoad (image) {
const width = image.naturalWidth
const height = image.naturalHeight
this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
}
}
}

@ -0,0 +1,268 @@
@import '../../_variables.scss';
.Attachment {
display: inline-flex;
flex-direction: column;
position: relative;
align-self: flex-start;
line-height: 0;
height: 100%;
border-style: solid;
border-width: 1px;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
.attachment-wrapper {
flex: 1 1 auto;
height: 100%;
position: relative;
overflow: hidden;
}
.description-container {
flex: 0 1 0;
display: flex;
padding-top: 0.5em;
z-index: 1;
p {
flex: 1;
text-align: center;
line-height: 1.5;
padding: 0.5em;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&.-static {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding-top: 0;
background: var(--popover);
box-shadow: var(--popupShadow);
}
}
.description-field {
flex: 1;
min-width: 0;
}
& .placeholder-container,
& .image-container,
& .audio-container,
& .video-container,
& .flash-container,
& .oembed-container {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.image-container {
.image {
width: 100%;
height: 100%;
}
}
& .flash-container,
& .video-container {
& .flash,
& video {
width: 100%;
height: 100%;
object-fit: contain;
align-self: center;
}
}
.audio-container {
display: flex;
align-items: flex-end;
audio {
width: 100%;
height: 100%;
}
}
.placeholder-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 0.5em;
}
.play-icon {
position: absolute;
font-size: 64px;
top: calc(50% - 32px);
left: calc(50% - 32px);
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
&::before {
margin: 0;
}
}
.attachment-buttons {
display: flex;
position: absolute;
right: 0;
top: 0;
margin-top: 0.5em;
margin-right: 0.5em;
z-index: 1;
.attachment-button {
padding: 0;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center;
width: 2em;
height: 2em;
margin-left: 0.5em;
font-size: 1.25em;
// TODO: theming? hard to theme with unknown background image color
background: rgba(230, 230, 230, 0.7);
.svg-inline--fa {
color: rgba(0, 0, 0, 0.6);
}
&:hover .svg-inline--fa {
color: rgba(0, 0, 0, 0.9);
}
}
}
.oembed-container {
line-height: 1.2em;
flex: 1 0 100%;
width: 100%;
margin-right: 15px;
display: flex;
img {
width: 100%;
}
.image {
flex: 1;
img {
border: 0px;
border-radius: 5px;
height: 100%;
object-fit: cover;
}
}
.text {
flex: 2;
margin: 8px;
word-break: break-all;
h1 {
font-size: 14px;
margin: 0px;
}
}
}
&.-size-small {
.play-icon {
zoom: 0.5;
opacity: 0.7;
}
.attachment-buttons {
zoom: 0.7;
opacity: 0.5;
}
}
&.-editable {
padding: 0.5em;
& .description-container,
& .attachment-buttons {
margin: 0;
}
}
&.-placeholder {
display: inline-block;
color: $fallback--link;
color: var(--postLink, $fallback--link);
overflow: hidden;
white-space: nowrap;
height: auto;
line-height: 1.5;
&:not(.-editable) {
border: none;
}
&.-editable {
display: flex;
flex-direction: row;
align-items: baseline;
& .description-container,
& .attachment-buttons {
margin: 0;
padding: 0;
position: relative;
}
.description-container {
flex: 1;
padding-left: 0.5em;
}
.attachment-buttons {
order: 99;
align-self: center;
}
}
a {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
svg {
color: inherit;
}
}
&.-loading {
cursor: progress;
}
&.-contain-fit {
img,
canvas {
object-fit: contain;
}
}
&.-cover-fit {
img,
canvas {
object-fit: cover;
}
}
}

@ -1,7 +1,8 @@
<template>
<div
<button
v-if="usePlaceholder"
:class="{ 'fullwidth': fullwidth }"
class="Attachment -placeholder button-unstyled"
:class="classNames"
@click="openModal"
>
<a
@ -13,310 +14,254 @@
:title="attachment.description"
>
<FAIcon :icon="placeholderIconClass" />
<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
</a>
</div>
<div
v-else
v-show="!isEmpty"
class="attachment"
:class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
>
<a
v-if="hidden"
class="image-attachment"
:href="attachment.url"
:alt="attachment.description"
:title="attachment.description"
@click.prevent.stop="toggleHidden"
<div
v-if="edit || remove"
class="attachment-buttons"
>
<img
:key="nsfwImage"
class="nsfw"
:src="nsfwImage"
:class="{'small': isSmall}"
<button
v-if="remove"
class="button-unstyled attachment-button"
@click.prevent="onRemove"
>
<FAIcon
v-if="type === 'video'"
class="play-icon"
icon="play-circle"
/>
</a>
<button
v-if="nsfw && hideNsfwLocal && !hidden"
class="button-unstyled hider"
@click.prevent="toggleHidden"
<FAIcon icon="trash-alt" />
</button>
</div>
<div
v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)"
class="description-container"
:class="{ '-static': !edit }"
>
<FAIcon icon="times" />
</button>
<a
v-if="type === 'image' && (!hidden || preloadImage)"
class="image-attachment"
:class="{'hidden': hidden && preloadImage }"
:href="attachment.url"
target="_blank"
@click="openModal"
<input
v-if="edit"
v-model="localDescription"
type="text"
class="description-field"
:placeholder="$t('post_status.media_description')"
@keydown.enter.prevent=""
>
<p v-else>
{{ localDescription }}
</p>
</div>
</button>
<div
v-else
class="Attachment"
:class="classNames"
>
<div
v-show="!isEmpty"
class="attachment-wrapper"
>
<StillImage
class="image"
:referrerpolicy="referrerpolicy"
:mimetype="attachment.mimetype"
:src="attachment.large_thumb_url || attachment.url"
:image-load-handler="onImageLoad"
<a
v-if="hidden"
class="image-container"
:href="attachment.url"
:alt="attachment.description"
/>
</a>
:title="attachment.description"
@click.prevent.stop="toggleHidden"
>
<img
:key="nsfwImage"
class="nsfw"
:src="nsfwImage"
>
<FAIcon
v-if="type === 'video'"
class="play-icon"
icon="play-circle"
/>
</a>
<div
v-if="!hidden"
class="attachment-buttons"
>
<button
v-if="type === 'flash' && flashLoaded"
class="button-unstyled attachment-button"
:title="$t('status.attachment_stop_flash')"
@click.prevent="stopFlash"
>
<FAIcon icon="stop" />
</button>
<button
v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
class="button-unstyled attachment-button"
:title="$t('status.show_attachment_description')"
@click.prevent="toggleDescription"
>
<FAIcon icon="align-right" />
</button>
<button
v-if="!useModal && type !== 'unknown'"
class="button-unstyled attachment-button"
:title="$t('status.show_attachment_in_modal')"
@click.prevent="openModalForce"
>
<FAIcon icon="search-plus" />
</button>
<button
v-if="nsfw && hideNsfwLocal"
class="button-unstyled attachment-button"
:title="$t('status.hide_attachment')"
@click.prevent="toggleHidden"
>
<FAIcon icon="times" />
</button>
<button
v-if="shiftUp"
class="button-unstyled attachment-button"
:title="$t('status.move_up')"
@click.prevent="onShiftUp"
>
<FAIcon icon="chevron-left" />
</button>
<button
v-if="shiftDn"
class="button-unstyled attachment-button"
:title="$t('status.move_down')"
@click.prevent="onShiftDn"
>
<FAIcon icon="chevron-right" />
</button>
<button
v-if="remove"
class="button-unstyled attachment-button"
:title="$t('status.remove_attachment')"
@click.prevent="onRemove"
>
<FAIcon icon="trash-alt" />
</button>
</div>
<a
v-if="type === 'video' && !hidden"
class="video-container"
:class="{'small': isSmall}"
:href="allowPlay ? undefined : attachment.url"
@click="openModal"
>
<VideoAttachment
class="video"
:attachment="attachment"
:controls="allowPlay"
@play="$emit('play')"
@pause="$emit('pause')"
/>
<FAIcon
v-if="!allowPlay"
class="play-icon"
icon="play-circle"
/>
</a>
<a
v-if="type === 'image' && (!hidden || preloadImage)"
class="image-container"
:class="{'-hidden': hidden && preloadImage }"
:href="attachment.url"
target="_blank"
@click.stop.prevent="openModal"
>
<StillImage
class="image"
:referrerpolicy="referrerpolicy"