Mergan/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'upstream/develop' into develop

Browse source
This commit is contained in:
FloatingGhost 2022-06-08 18:09:16 +01:00
commit f6cf509a04
229 changed files with 9798 additions and 5400 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.babelrc
View file

@ -1,5 +1,5 @@
{ {
"presets": ["@babel/preset-env", "@vue/babel-preset-jsx"], "presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime", "lodash"], "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
"comments": false "comments": false
} }

2
.gitlab-ci.yml
View file

@ -1,7 +1,7 @@
# This file is a template, and might need editing before it works on your project. # This file is a template, and might need editing before it works on your project.
# Official framework image. Look for the different tagged releases at: # Official framework image. Look for the different tagged releases at:
# https://hub.docker.com/r/library/node/tags/ # https://hub.docker.com/r/library/node/tags/
image: node:10 image: node:12
stages: stages:
- lint - lint

53
CHANGELOG.md
View file

@ -3,6 +3,56 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## Unreleased
### Fixed
- AdminFE button no longer scrolls page to top when clicked
- Pinned statuses no longer appear at bottom of user timeline (still appear as part of the timeline when fetched deep enough)
- Fixed many many bugs related to new mentions, including spacing and alignment issues
- Links in profile bios now properly open in new tabs
- Inline images now respect their intended width/height attributes
- Links with `&` in them work properly now
- Interaction list popovers now properly emojify names
- 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
- (You)s are optional (opt-in) now, bolding your nickname is also optional (opt-out)
- User highlight background now also covers the `@`
- Reverted back to textual `@`, svg version is opt-in.
- 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
- Options to show domains in mentions
- Option to show user avatars in mention links (opt-in)
- Option to disable the tooltip for mentions
- 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
- Enabled users to zoom and pan images in media viewer with mouse and touch
## [2.4.2] - 2022-01-09
### Added
- Added Apply and Reset buttons to the bottom of theme tab to minimize UI travel
- Implemented user option to always show floating New Post button (normally mobile-only)
- Display reasons for instance specific policies
- Added functionality to cancel follow request
### Fixed
- Fixed link to external profile not working on user profiles
- Fixed mobile shoutbox display
- Fixed favicon badge not working in Chrome
- Escape html more properly in subject/display name
## [2.4.0] - 2021-08-08 ## [2.4.0] - 2021-08-08
### Added ### Added
- Added a quick settings to timeline header for easier access - Added a quick settings to timeline header for easier access
@ -11,12 +61,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Implemented user option to change sidebar position to the right side - Implemented user option to change sidebar position to the right side
- Implemented user option to hide floating shout panel - Implemented user option to hide floating shout panel
- Implemented "edit profile" button if viewing own profile which opens profile settings - Implemented "edit profile" button if viewing own profile which opens profile settings
- Added Apply and Reset buttons to the bottom of theme tab to minimize UI travel
- Implemented user option to always show floating New Post button (normally mobile-only)
### Fixed ### Fixed
- Fixed follow request count showing in the wrong location in mobile view - Fixed follow request count showing in the wrong location in mobile view
## [2.3.0] - 2021-03-01 ## [2.3.0] - 2021-03-01
### Fixed ### Fixed
- Button to remove uploaded media in post status form is now properly placed and sized. - Button to remove uploaded media in post status form is now properly placed and sized.

29
build/webpack.base.conf.js
View file

@ -4,6 +4,7 @@ var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../') var projectRoot = path.resolve(__dirname, '../')
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin') var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
var CopyPlugin = require('copy-webpack-plugin'); var CopyPlugin = require('copy-webpack-plugin');
var { VueLoaderPlugin } = require('vue-loader')
var env = process.env.NODE_ENV var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -29,16 +30,16 @@ module.exports = {
} }
}, },
resolve: { resolve: {
extensions: ['.js', '.vue'], extensions: ['.js', '.jsx', '.vue'],
modules: [ modules: [
path.join(__dirname, '../node_modules') path.join(__dirname, '../node_modules')
], ],
alias: { alias: {
'vue$': 'vue/dist/vue.runtime.common',
'static': path.resolve(__dirname, '../static'), 'static': path.resolve(__dirname, '../static'),
'src': path.resolve(__dirname, '../src'), 'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'), 'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components') 'components': path.resolve(__dirname, '../src/components'),
'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
} }
}, },
module: { module: {
@ -58,9 +59,28 @@ module.exports = {
} }
} }
}, },
{
enforce: 'post',
test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
type: 'javascript/auto',
loader: '@intlify/vue-i18n-loader',
include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
path.resolve(__dirname, '../src/i18n')
]
},
{ {
test: /\.vue$/, test: /\.vue$/,
use: 'vue-loader' loader: 'vue-loader',
options: {
compilerOptions: {
isCustomElement(tag) {
if (tag === 'pinch-zoom') {
return true
}
return false
}
}
}
}, },
{ {
test: /\.jsx?$/, test: /\.jsx?$/,
@ -95,6 +115,7 @@ module.exports = {
entry: path.join(__dirname, '..', 'src/sw.js'), entry: path.join(__dirname, '..', 'src/sw.js'),
filename: 'sw-pleroma.js' filename: 'sw-pleroma.js'
}), }),
new VueLoaderPlugin(),
// This copies Ruffle's WASM to a directory so that JS side can access it // This copies Ruffle's WASM to a directory so that JS side can access it
new CopyPlugin({ new CopyPlugin({
patterns: [ patterns: [

4
build/webpack.dev.conf.js
View file

@ -21,7 +21,9 @@ module.exports = merge(baseWebpackConfig, {
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': config.dev.env, 'process.env': config.dev.env,
'COMMIT_HASH': JSON.stringify('DEV'), 'COMMIT_HASH': JSON.stringify('DEV'),
'DEV_OVERRIDES': JSON.stringify(config.dev.settings) 'DEV_OVERRIDES': JSON.stringify(config.dev.settings),
'__VUE_OPTIONS_API__': true,
'__VUE_PROD_DEVTOOLS__': false
}), }),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),

4
build/webpack.prod.conf.js
View file

@ -36,7 +36,9 @@ var webpackConfig = merge(baseWebpackConfig, {
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': env, 'process.env': env,
'COMMIT_HASH': JSON.stringify(commitHash), 'COMMIT_HASH': JSON.stringify(commitHash),
'DEV_OVERRIDES': JSON.stringify(undefined) 'DEV_OVERRIDES': JSON.stringify(undefined),
'__VUE_OPTIONS_API__': true,
'__VUE_PROD_DEVTOOLS__': false
}), }),
// extract css into its own file // extract css into its own file
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({

5
config/index.js
View file

@ -52,7 +52,10 @@ module.exports = {
target, target,
changeOrigin: true, changeOrigin: true,
cookieDomainRewrite: 'localhost', cookieDomainRewrite: 'localhost',
ws: true ws: true,
headers: {
'Origin': target
}
}, },
'/oauth/revoke': { '/oauth/revoke': {
target, target,

201
package.json
View file

@ -16,107 +16,112 @@
"lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs" "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.7.6", "@babel/runtime": "7.17.8",
"@chenfengyuan/vue-qrcode": "^1.0.0", "@chenfengyuan/vue-qrcode": "2.0.0",
"@fortawesome/fontawesome-svg-core": "^1.2.32", "@fortawesome/fontawesome-svg-core": "1.3.0",
"@fortawesome/free-regular-svg-icons": "^5.15.1", "@fortawesome/free-regular-svg-icons": "5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.1", "@fortawesome/free-solid-svg-icons": "5.15.4",
"@fortawesome/vue-fontawesome": "^2.0.0", "@fortawesome/vue-fontawesome": "3.0.0-5",
"body-scroll-lock": "^2.6.4", "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
"chromatism": "^3.0.0", "@vuelidate/core": "2.0.0-alpha.41",
"cropperjs": "^1.4.3", "@vuelidate/validators": "2.0.0-alpha.27",
"diff": "^3.0.1", "body-scroll-lock": "2.7.1",
"escape-html": "^1.0.3", "chromatism": "3.0.0",
"localforage": "^1.5.0", "click-outside-vue3": "4.0.1",
"parse-link-header": "^1.0.1", "cropperjs": "1.5.12",
"phoenix": "^1.3.0", "diff": "3.5.0",
"portal-vue": "^2.1.4", "escape-html": "1.0.3",
"punycode.js": "^2.1.0", "js-cookie": "^3.0.1",
"ruffle-mirror": "^2021.4.10", "localforage": "1.10.0",
"v-click-outside": "^2.1.1", "parse-link-header": "1.0.1",
"vue": "^2.6.11", "phoenix": "1.6.2",
"vue-i18n": "^7.3.2", "punycode.js": "2.1.0",
"vue-router": "^3.0.1", "qrcode": "1",
"vue-template-compiler": "^2.6.11", "ruffle-mirror": "2021.12.31",
"vuelidate": "^0.7.4", "vue": "^3.2.31",
"vuex": "^3.0.1" "vue-i18n": "^9.2.0-beta.34",
"vue-router": "4.0.14",
"vue-template-compiler": "2.6.11",
"vuex": "4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.7.5", "@babel/core": "7.17.8",
"@babel/plugin-transform-runtime": "^7.7.6", "@babel/plugin-transform-runtime": "7.17.0",
"@babel/preset-env": "^7.7.6", "@babel/preset-env": "7.16.11",
"@babel/register": "^7.7.4", "@babel/register": "7.17.7",
"@ungap/event-target": "^0.1.0", "@intlify/vue-i18n-loader": "^5.0.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@ungap/event-target": "0.2.3",
"@vue/babel-preset-jsx": "^1.2.4", "@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
"@vue/test-utils": "^1.0.0-beta.26", "@vue/babel-plugin-jsx": "1.1.1",
"autoprefixer": "^6.4.0", "@vue/compiler-sfc": "^3.1.0",
"babel-eslint": "^7.0.0", "@vue/test-utils": "2.0.0-rc.17",
"babel-loader": "^8.0.6", "autoprefixer": "6.7.7",
"babel-plugin-lodash": "^3.3.4", "babel-eslint": "7.2.3",
"chai": "^3.5.0", "babel-loader": "8.2.4",
"chalk": "^1.1.3", "babel-plugin-lodash": "3.3.4",
"chromedriver": "^87.0.1", "chai": "3.5.0",
"connect-history-api-fallback": "^1.1.0", "chalk": "1.1.3",
"copy-webpack-plugin": "^6.4.1", "chromedriver": "87.0.7",
"cross-spawn": "^4.0.2", "connect-history-api-fallback": "1.6.0",
"css-loader": "^0.28.0", "copy-webpack-plugin": "6.4.1",
"custom-event-polyfill": "^1.0.7", "cross-spawn": "4.0.2",
"eslint": "^5.16.0", "css-loader": "0.28.11",
"eslint-config-standard": "^12.0.0", "custom-event-polyfill": "1.0.7",
"eslint-friendly-formatter": "^2.0.5", "eslint": "5.16.0",
"eslint-loader": "^2.1.0", "eslint-config-standard": "12.0.0",
"eslint-plugin-import": "^2.13.0", "eslint-friendly-formatter": "2.0.7",
"eslint-plugin-node": "^7.0.0", "eslint-loader": "2.2.1",
"eslint-plugin-promise": "^4.0.0", "eslint-plugin-import": "2.25.4",
"eslint-plugin-standard": "^4.0.0", "eslint-plugin-node": "7.0.1",
"eslint-plugin-vue": "^5.2.2", "eslint-plugin-promise": "4.3.1",
"eventsource-polyfill": "^0.9.6", "eslint-plugin-standard": "4.1.0",
"express": "^4.13.3", "eslint-plugin-vue": "5.2.3",
"file-loader": "^3.0.1", "eventsource-polyfill": "0.9.6",
"function-bind": "^1.0.2", "express": "4.17.3",
"html-webpack-plugin": "^3.0.0", "file-loader": "3.0.1",
"http-proxy-middleware": "^0.17.2", "function-bind": "1.1.1",
"inject-loader": "^2.0.1", "html-webpack-plugin": "3.2.0",
"iso-639-1": "^2.0.3", "http-proxy-middleware": "0.21.0",
"isparta-loader": "^2.0.0", "inject-loader": "2.0.1",
"json-loader": "^0.5.4", "iso-639-1": "2.1.13",
"karma": "^3.0.0", "isparta-loader": "2.0.0",
"karma-coverage": "^1.1.1", "json-loader": "0.5.7",
"karma-firefox-launcher": "^1.1.0", "karma": "6.3.17",
"karma-mocha": "^1.2.0", "karma-coverage": "1.1.2",
"karma-mocha-reporter": "^2.2.1", "karma-firefox-launcher": "1.3.0",
"karma-sinon-chai": "^2.0.2", "karma-mocha": "2.0.1",
"karma-sourcemap-loader": "^0.3.7", "karma-mocha-reporter": "2.2.5",
"karma-spec-reporter": "0.0.26", "karma-sinon-chai": "2.0.2",
"karma-webpack": "^4.0.0-rc.3", "karma-sourcemap-loader": "0.3.8",
"lodash": "^4.16.4", "karma-spec-reporter": "0.0.33",
"lolex": "^1.4.0", "karma-webpack": "4.0.2",
"mini-css-extract-plugin": "^0.5.0", "lodash": "4.17.21",
"mocha": "^3.1.0", "lolex": "1.6.0",
"nightwatch": "^0.9.8", "mini-css-extract-plugin": "0.12.0",
"opn": "^4.0.2", "mocha": "3.5.3",
"ora": "^0.3.0", "nightwatch": "0.9.21",
"postcss-loader": "^3.0.0", "opn": "4.0.2",
"raw-loader": "^0.5.1", "ora": "0.4.1",
"sass": "^1.17.3", "postcss-loader": "3.0.0",
"sass-loader": "git://github.com/webpack-contrib/sass-loader", "raw-loader": "0.5.1",
"sass": "1.20.1",
"sass-loader": "7.2.0",
"selenium-server": "2.53.1", "selenium-server": "2.53.1",
"semver": "^5.3.0", "semver": "5.7.1",
"serviceworker-webpack-plugin": "^1.0.0", "serviceworker-webpack-plugin": "1.0.1",
"shelljs": "^0.8.4", "shelljs": "0.8.5",
"sinon": "^2.1.0", "sinon": "2.4.1",
"sinon-chai": "^2.8.0", "sinon-chai": "2.14.0",
"stylelint": "^13.6.1", "stylelint": "13.6.1",
"stylelint-config-standard": "^20.0.0", "stylelint-config-standard": "20.0.0",
"stylelint-rscss": "^0.4.0", "stylelint-rscss": "0.4.0",
"url-loader": "^1.1.2", "url-loader": "1.1.2",
"vue-loader": "^14.0.0", "vue-loader": "^16.0.0",
"vue-style-loader": "^4.0.0", "vue-style-loader": "4.1.2",
"webpack": "^4.44.0", "webpack": "4.46.0",
"webpack-dev-middleware": "^3.6.0", "webpack-dev-middleware": "3.7.3",
"webpack-hot-middleware": "^2.12.2", "webpack-hot-middleware": "2.24.3",
"webpack-merge": "^0.14.1" "webpack-merge": "0.20.0"
}, },
"engines": { "engines": {
"node": ">= 4.0.0", "node": ">= 4.0.0",

6
renovate.json Normal file
View file

@ -0,0 +1,6 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [
"config:base"
]
}

49
src/App.js
View file

@ -1,6 +1,5 @@
import UserPanel from './components/user_panel/user_panel.vue' import UserPanel from './components/user_panel/user_panel.vue'
import NavPanel from './components/nav_panel/nav_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue'
import Notifications from './components/notifications/notifications.vue'
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
import FeaturesPanel from './components/features_panel/features_panel.vue' import FeaturesPanel from './components/features_panel/features_panel.vue'
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
@ -16,13 +15,14 @@ import PostStatusModal from './components/post_status_modal/post_status_modal.vu
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
import { windowWidth, windowHeight } from './services/window_utils/window_utils' import { windowWidth, windowHeight } from './services/window_utils/window_utils'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { defineAsyncComponent } from 'vue'
export default { export default {
name: 'app', name: 'app',
components: { components: {
UserPanel, UserPanel,
NavPanel, NavPanel,
Notifications, Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
InstanceSpecificPanel, InstanceSpecificPanel,
FeaturesPanel, FeaturesPanel,
WhoToFollowPanel, WhoToFollowPanel,
@ -46,10 +46,20 @@ export default {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
window.addEventListener('resize', this.updateMobileState) window.addEventListener('resize', this.updateMobileState)
}, },
destroyed () { unmounted () {
window.removeEventListener('resize', this.updateMobileState) window.removeEventListener('resize', this.updateMobileState)
}, },
computed: { computed: {
classes () {
return [
{
'-reverse': this.reverseLayout,
'-no-sticky-headers': this.noSticky,
'-has-new-post-button': this.newPostButtonShown
},
'-' + this.layoutType
]
},
currentUser () { return this.$store.state.users.currentUser }, currentUser () { return this.$store.state.users.currentUser },
userBackground () { return this.currentUser.background_image }, userBackground () { return this.currentUser.background_image },
instanceBackground () { instanceBackground () {
@ -65,38 +75,45 @@ export default {
} }
} }
}, },
shout () { return this.$store.state.shout.channel.state === 'joined' }, shout () { return this.$store.state.shout.joined },
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
showInstanceSpecificPanel () { showInstanceSpecificPanel () {
return this.$store.state.instance.showInstanceSpecificPanel && return this.$store.state.instance.showInstanceSpecificPanel &&
!this.$store.getters.mergedConfig.hideISP && !this.$store.getters.mergedConfig.hideISP &&
this.$store.state.instance.instanceSpecificPanelContent this.$store.state.instance.instanceSpecificPanelContent
}, },
isChats () {
return this.$route.name === 'chat' || this.$route.name === 'chats'
},
newPostButtonShown () {
if (this.isChats) return false
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
},
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
shoutboxPosition () { shoutboxPosition () {
return this.$store.getters.mergedConfig.showNewPostButton || false return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
}, },
hideShoutbox () { hideShoutbox () {
return this.$store.getters.mergedConfig.hideShoutbox return this.$store.getters.mergedConfig.hideShoutbox
}, },
isMobileLayout () { return this.$store.state.interface.mobileLayout }, layoutType () { return this.$store.state.interface.layoutType },
privateMode () { return this.$store.state.instance.private }, privateMode () { return this.$store.state.instance.private },
sidebarAlign () { reverseLayout () {
return { const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0 if (this.layoutType !== 'wide') {
return reverseSetting
} else {
return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
} }
}, },
noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])
}, },
methods: { methods: {
updateMobileState () { updateMobileState () {
const mobileLayout = windowWidth() <= 800 this.$store.dispatch('setLayoutWidth', windowWidth())
const layoutHeight = windowHeight() this.$store.dispatch('setLayoutHeight', windowHeight())
const changed = mobileLayout !== this.isMobileLayout
if (changed) {
this.$store.dispatch('setMobileLayout', mobileLayout)
}
this.$store.dispatch('setLayoutHeight', layoutHeight)
} }
} }
} }

843
src/App.scss
View file

File diff suppressed because it is too large Load diff

46
src/App.vue
View file

@ -1,39 +1,32 @@
<template> <template>
<div <div
id="app" id="app-loaded"
:style="bgStyle" :style="bgStyle"
> >
<div <div
id="app_bg_wrapper" id="app_bg_wrapper"
class="app-bg-wrapper" class="app-bg-wrapper"
/> />
<MobileNav v-if="isMobileLayout" /> <MobileNav v-if="layoutType === 'mobile'" />
<DesktopNav v-else /> <DesktopNav v-else />
<div class="app-bg-wrapper app-container-wrapper" /> <Notifications v-if="currentUser" />
<div <div
id="content" id="content"
class="container underlay" class="app-layout container"
:class="classes"
> >
<div <div class="underlay"/>
class="sidebar-flexer mobile-hidden" <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
:style="sidebarAlign" <user-panel />
> <template v-if="layoutType !== 'mobile'">
<div class="sidebar-bounds"> <nav-panel />
<div class="sidebar-scroller"> <instance-specific-panel v-if="showInstanceSpecificPanel" />
<div class="sidebar"> <features-panel v-if="!currentUser && showFeaturesPanel" />
<user-panel /> <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
<div v-if="!isMobileLayout"> <div id="notifs-sidebar" />
<nav-panel /> </template>
<instance-specific-panel v-if="showInstanceSpecificPanel" />
<features-panel v-if="!currentUser && showFeaturesPanel" />
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
<notifications v-if="currentUser" />
</div>
</div>
</div>
</div>
</div> </div>
<div class="main"> <div id="main-scroller" class="column main" :class="{ '-full-height': isChats }">
<div <div
v-if="!currentUser" v-if="!currentUser"
class="login-hint panel panel-default" class="login-hint panel panel-default"
@ -47,19 +40,20 @@
</div> </div>
<router-view /> <router-view />
</div> </div>
<media-modal /> <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
</div> </div>
<media-modal />
<shout-panel <shout-panel
v-if="currentUser && shout && !hideShoutbox" v-if="currentUser && shout && !hideShoutbox"
:floating="true" :floating="true"
class="floating-shout mobile-hidden" class="floating-shout mobile-hidden"
:class="{ 'left': shoutboxPosition }" :class="{ '-left': shoutboxPosition }"
/> />
<MobilePostStatusButton /> <MobilePostStatusButton />
<UserReportingModal /> <UserReportingModal />
<PostStatusModal /> <PostStatusModal />
<SettingsModal /> <SettingsModal />
<portal-target name="modal" /> <div id="modal" />
<GlobalNoticeList /> <GlobalNoticeList />
</div> </div>
</template> </template>

2
src/_variables.scss
View file

@ -30,3 +30,5 @@ $fallback--attachmentRadius: 10px;
$fallback--chatMessageRadius: 10px; $fallback--chatMessageRadius: 10px;
$fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
$status-margin: 0.75em;

48
src/boot/after_store.js
View file

@ -1,8 +1,14 @@
import Vue from 'vue' import { createApp } from 'vue'
import VueRouter from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes' import vClickOutside from 'click-outside-vue3'
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
import App from '../App.vue' import App from '../App.vue'
import { windowWidth } from '../services/window_utils/window_utils' import routes from './routes'
import VBodyScrollLock from 'src/directives/body_scroll_lock'
import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js' import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
@ -115,6 +121,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
copyInstanceOption('nsfwCensorImage') copyInstanceOption('nsfwCensorImage')
copyInstanceOption('background') copyInstanceOption('background')
copyInstanceOption('hidePostStats') copyInstanceOption('hidePostStats')
copyInstanceOption('hideBotIndication')
copyInstanceOption('hideUserStats') copyInstanceOption('hideUserStats')
copyInstanceOption('hideFilteredStatuses') copyInstanceOption('hideFilteredStatuses')
copyInstanceOption('logo') copyInstanceOption('logo')
@ -325,8 +332,8 @@ const checkOAuthToken = async ({ store }) => {
} }
const afterStoreSetup = async ({ store, i18n }) => { const afterStoreSetup = async ({ store, i18n }) => {
const width = windowWidth() store.dispatch('setLayoutWidth', windowWidth())
store.dispatch('setMobileLayout', width <= 800) store.dispatch('setLayoutHeight', windowHeight())
FaviconService.initFaviconService() FaviconService.initFaviconService()
@ -366,25 +373,32 @@ const afterStoreSetup = async ({ store, i18n }) => {
getTOS({ store }) getTOS({ store })
getStickers({ store }) getStickers({ store })
const router = new VueRouter({ const router = createRouter({
mode: 'history', history: createWebHistory(),
routes: routes(store), routes: routes(store),
scrollBehavior: (to, _from, savedPosition) => { scrollBehavior: (to, _from, savedPosition) => {
if (to.matched.some(m => m.meta.dontScroll)) { if (to.matched.some(m => m.meta.dontScroll)) {
return false return false
} }
return savedPosition || { x: 0, y: 0 } return savedPosition || { left: 0, top: 0 }
} }
}) })
/* eslint-disable no-new */ const app = createApp(App)
return new Vue({
router, app.use(router)
store, app.use(store)
i18n, app.use(i18n)
el: '#app',
render: h => h(App) app.use(vClickOutside)
}) app.use(VBodyScrollLock)
app.component('FAIcon', FontAwesomeIcon)
app.component('FALayers', FontAwesomeLayers)
app.mount('#app')
return app
} }
export default afterStoreSetup export default afterStoreSetup

6
src/boot/routes.js
View file

@ -46,7 +46,7 @@ export default (store) => {
{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline }, { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
{ name: 'remote-user-profile-acct', { name: 'remote-user-profile-acct',
path: '/remote-users/(@?):username([^/@]+)@:hostname([^/@]+)', path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
component: RemoteUserResolver, component: RemoteUserResolver,
beforeEnter: validateAuthenticatedRoute beforeEnter: validateAuthenticatedRoute
}, },
@ -62,14 +62,14 @@ export default (store) => {
{ name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true }, { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
{ name: 'registration-token', path: '/registration/:token', component: Registration }, { name: 'registration-token', path: '/registration/:token', component: Registration },
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute }, { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
{ name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute }, { name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
{ name: 'login', path: '/login', component: AuthForm }, { name: 'login', path: '/login', component: AuthForm },
{ name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) }, { name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) }, { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) }, { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute }, { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
{ name: 'about', path: '/about', component: About }, { name: 'about', path: '/about', component: About },
{ name: 'user-profile', path: '/(users/)?:name', component: UserProfile } { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
] ]
if (store.state.instance.pleromaChatMessagesAvailable) { if (store.state.instance.pleromaChatMessagesAvailable) {

2
src/components/about/about.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="sidebar"> <div class="column-inner">
<instance-specific-panel v-if="showInstanceSpecificPanel" /> <instance-specific-panel v-if="showInstanceSpecificPanel" />
<staff-panel /> <staff-panel />
<terms-of-service-panel /> <terms-of-service-panel />

2
src/components/account_actions/account_actions.js
View file

@ -40,7 +40,7 @@ const AccountActions = {
openChat () { openChat () {
this.$router.push({ this.$router.push({
name: 'chat', name: 'chat',
params: { recipient_id: this.user.id } params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id }
}) })
} }
}, },

4
src/components/account_actions/account_actions.vue
View file

@ -74,10 +74,6 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.AccountActions { .AccountActions {
button.dropdown-item {
margin-left: 0;
}
.ellipsis-button { .ellipsis-button {
width: 2.5em; width: 2.5em;
margin: -0.5em 0; margin: -0.5em 0;

1
src/components/async_component_error/async_component_error.vue
View file

@ -19,6 +19,7 @@
<script> <script>
export default { export default {
emits: ['resetAsyncComponent'],
methods: { methods: {
retry () { retry () {
this.$emit('resetAsyncComponent') this.$emit('resetAsyncComponent')

112
src/components/attachment/attachment.js
View file

@ -11,7 +11,12 @@ import {
faImage, faImage,
faVideo, faVideo,
faPlayCircle, faPlayCircle,
faTimes faTimes,
faStop,
faSearchPlus,
faTrashAlt,
faPencilAlt,
faAlignRight
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
@ -20,27 +25,39 @@ library.add(
faImage, faImage,
faVideo, faVideo,
faPlayCircle, faPlayCircle,
faTimes faTimes,
faStop,
faSearchPlus,
faTrashAlt,
faPencilAlt,
faAlignRight
) )
const Attachment = { const Attachment = {
props: [ props: [
'attachment', 'attachment',
'description',
'hideDescription',
'nsfw', 'nsfw',
'size', 'size',
'allowPlay',
'setMedia', 'setMedia',
'naturalSizeLoad' 'remove',
'shiftUp',
'shiftDn',
'edit'
], ],
data () { data () {
return { return {
localDescription: this.description || this.attachment.description,
nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage, nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw, hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
preloadImage: this.$store.getters.mergedConfig.preloadImage, preloadImage: this.$store.getters.mergedConfig.preloadImage,
loading: false, loading: false,
img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
modalOpen: false, modalOpen: false,
showHidden: false showHidden: false,
flashLoaded: false,
showDescription: false
} }
}, },
components: { components: {
@ -49,8 +66,23 @@ const Attachment = {
VideoAttachment VideoAttachment
}, },
computed: { 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 () { usePlaceholder () {
return this.size === 'hide' || this.type === 'unknown' return this.size === 'hide'
},
useContainFit () {
return this.$store.getters.mergedConfig.useContainFit
}, },
placeholderName () { placeholderName () {
if (this.attachment.description === '' || !this.attachment.description) { if (this.attachment.description === '' || !this.attachment.description) {
@ -74,24 +106,33 @@ const Attachment = {
return this.nsfw && this.hideNsfwLocal && !this.showHidden return this.nsfw && this.hideNsfwLocal && !this.showHidden
}, },
isEmpty () { isEmpty () {
return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown' return (this.type === 'html' && !this.attachment.oembed)
},
isSmall () {
return this.size === 'small'
},
fullwidth () {
if (this.size === 'hide') return false
return this.type === 'html' || this.type === 'audio' || this.type === 'unknown'
}, },
useModal () { useModal () {
const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio'] let modalTypes = []
: this.mergedConfig.playVideosInModal switch (this.size) {
? ['image', 'video'] case 'hide':
: ['image'] case 'small':
modalTypes = ['image', 'video', 'audio', 'flash']
break
default:
modalTypes = this.mergedConfig.playVideosInModal
? ['image', 'video', 'flash']
: ['image']
break
}
return modalTypes.includes(this.type) return modalTypes.includes(this.type)
}, },
videoTag () {
return this.useModal ? 'button' : 'span'
},
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])
}, },
watch: {
localDescription (newVal) {
this.onEdit(newVal)
}
},
methods: { methods: {
linkClicked ({ target }) { linkClicked ({ target }) {
if (target.tagName === 'A') { if (target.tagName === 'A') {
@ -100,12 +141,37 @@ const Attachment = {
}, },
openModal (event) { openModal (event) {
if (this.useModal) { if (this.useModal) {
event.stopPropagation() this.$emit('setMedia')
event.preventDefault() this.$store.dispatch('setCurrentMedia', this.attachment)
this.setMedia() } else if (this.type === 'unknown') {
this.$store.dispatch('setCurrent', this.attachment) 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) { toggleHidden (event) {
if ( if (
(this.mergedConfig.useOneClickNsfw && !this.showHidden) && (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
@ -132,7 +198,7 @@ const Attachment = {
onImageLoad (image) { onImageLoad (image) {
const width = image.naturalWidth const width = image.naturalWidth
const height = image.naturalHeight const height = image.naturalHeight
this.naturalSizeLoad && this.naturalSizeLoad({ width, height }) this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
} }
} }
} }

268
src/components/attachment/attachment.scss Normal file
View file

@ -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: 1rem;
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;
}
}
}

542
src/components/attachment/attachment.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<div <button
v-if="usePlaceholder" v-if="usePlaceholder"
:class="{ 'fullwidth': fullwidth }" class="Attachment -placeholder button-unstyled"
:class="classNames"
@click="openModal" @click="openModal"
> >
<a <a
@ -11,318 +12,257 @@
:href="attachment.url" :href="attachment.url"
:alt="attachment.description" :alt="attachment.description"
:title="attachment.description" :title="attachment.description"
@click.prevent
> >
<FAIcon :icon="placeholderIconClass" /> <FAIcon :icon="placeholderIconClass" />
<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }} <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
</a> </a>
</div> <div
v-if="edit || remove"
class="attachment-buttons"
>
<button
v-if="remove"
class="button-unstyled attachment-button"
@click.prevent="onRemove"
>
<FAIcon icon="trash-alt" />
</button>
</div>
<div
v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)"
class="description-container"
:class="{ '-static': !edit }"
>
<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 <div
v-else v-else
v-show="!isEmpty" class="Attachment"
class="attachment" :class="classNames"
: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"
>
<img
:key="nsfwImage"
class="nsfw"
:src="nsfwImage"
:class="{'small': isSmall}"
>
<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="times" />
</button>
<a
v-if="type === 'image' && (!hidden || preloadImage)"
class="image-attachment"
:class="{'hidden': hidden && preloadImage }"
:href="attachment.url"
target="_blank"
@click="openModal"
>
<StillImage
class="image"
:referrerpolicy="referrerpolicy"
:mimetype="attachment.mimetype"
:src="attachment.large_thumb_url || attachment.url"
:image-load-handler="onImageLoad"
:alt="attachment.description"
/>
</a>
<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>
<audio
v-if="type === 'audio'"
:src="attachment.url"
:alt="attachment.description"
:title="attachment.description"
controls
@play="$emit('play')"
@pause="$emit('pause')"
/>
<div <div
v-if="type === 'html' && attachment.oembed" v-show="!isEmpty"
class="oembed" class="attachment-wrapper"
@click.prevent="linkClicked"
> >
<div <a
v-if="attachment.thumb_url" v-if="hidden"
class="image" class="image-container"
:href="attachment.url"
:alt="attachment.description"
:title="attachment.description"
@click.prevent.stop="toggleHidden"
> >
<img :src="attachment.thumb_url"> <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> </div>
<div class="text">
<!-- eslint-disable vue/no-v-html -->
<h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
<div v-html="attachment.oembed.oembedHTML" />
<!-- eslint-enable vue/no-v-html -->
</div>
</div>
<Flash <a
v-if="type === 'flash'" v-if="type === 'image' && (!hidden || preloadImage)"
:src="attachment.large_thumb_url || attachment.url" class="image-container"
/> :class="{'-hidden': hidden && preloadImage }"
:href="attachment.url"
target="_blank"
@click.stop.prevent="openModal"
>
<StillImage
class="image"
:referrerpolicy="referrerpolicy"
:mimetype="attachment.mimetype"
:src="attachment.large_thumb_url || attachment.url"
:image-load-handler="onImageLoad"
:alt="attachment.description"
/>
</a>
<a
v-if="type === 'unknown' && !hidden"
class="placeholder-container"
:href="attachment.url"
target="_blank"
>
<FAIcon
size="5x"
:icon="placeholderIconClass"
/>
<p>
{{ localDescription }}
</p>
</a>
<component
:is="videoTag"
v-if="type === 'video' && !hidden"
class="video-container"
:class="{ 'button-unstyled': 'isModal' }"
:href="attachment.url"
@click.stop.prevent="openModal"
>
<VideoAttachment
class="video"
:attachment="attachment"
:controls="!useModal"
@play="$emit('play')"
@pause="$emit('pause')"
/>
<FAIcon
v-if="useModal"
class="play-icon"
icon="play-circle"
/>
</component>
<span
v-if="type === 'audio' && !hidden"
class="audio-container"
:href="attachment.url"
@click.stop.prevent="openModal"
>
<audio
v-if="type === 'audio'"
:src="attachment.url"
:alt="attachment.description"
:title="attachment.description"
controls
@play="$emit('play')"
@pause="$emit('pause')"
/>
</span>
<div
v-if="type === 'html' && attachment.oembed"
class="oembed-container"
@click.prevent="linkClicked"
>
<div
v-if="attachment.thumb_url"
class="image"
>
<img :src="attachment.thumb_url">
</div>
<div class="text">
<!-- eslint-disable vue/no-v-html -->
<h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
<div v-html="attachment.oembed.oembedHTML" />
<!-- eslint-enable vue/no-v-html -->
</div>
</div>
<span
v-if="type === 'flash' && !hidden"
class="flash-container"
:href="attachment.url"
@click.stop.prevent="openModal"
>
<Flash
ref="flash"
class="flash"
:src="attachment.large_thumb_url || attachment.url"
@playerOpened="setFlashLoaded(true)"
@playerClosed="setFlashLoaded(false)"
/>
</span>
</div>
<div
v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))"
class="description-container"
:class="{ '-static': !edit }"
>
<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>
</div> </div>
</template> </template>
<script src="./attachment.js"></script> <script src="./attachment.js"></script>
<style lang="scss"> <style src="./attachment.scss" lang="scss"></style>
@import '../../_variables.scss';
.attachments {
display: flex;
flex-wrap: wrap;
.non-gallery {
max-width: 100%;
}
.placeholder {
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%;
svg {
color: inherit;
}
}
.nsfw-placeholder {
cursor: pointer;
&.loading {
cursor: progress;
}
}
.attachment {
position: relative;
margin-top: 0.5em;
align-self: flex-start;
line-height: 0;
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);
overflow: hidden;
}
.non-gallery.attachment {
&.flash,
&.video {
flex: 1 0 40%;
}
.nsfw {
height: 260px;
}
.small {
height: 120px;
flex-grow: 0;
}
.video {
height: 260px;
display: flex;
}
video {
max-height: 100%;
object-fit: contain;
}
}
.fullwidth {
flex-basis: 100%;
}
// fixes small gap below video
&.video {
line-height: 0;
}
.video-container {
display: flex;
max-height: 100%;
}
.video {
width: 100%;
height: 100%;
}
.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);
}
.play-icon::before {
margin: 0;
}
&.html {
flex-basis: 90%;
width: 100%;
display: flex;
}
.hider {
position: absolute;
right: 0;
margin: 10px;
padding: 0;
z-index: 4;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center;
width: 2em;
height: 2em;
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);
}
}
video {
z-index: 0;
}
audio {
width: 100%;
}
img.media-upload {
line-height: 0;
max-height: 200px;
max-width: 100%;
}
.oembed {
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;
}
}
}
.image-attachment {
&,
& .image {
width: 100%;
height: 100%;
}
&.hidden {
display: none;
}
.nsfw {
object-fit: cover;
width: 100%;
height: 100%;
}
img {
image-orientation: from-image; // NOTE: only FF supports this
}
}
}
</style>

5
src/components/auth_form/auth_form.js
View file

@ -1,3 +1,4 @@
import { h, resolveComponent } from 'vue'
import LoginForm from '../login_form/login_form.vue' import LoginForm from '../login_form/login_form.vue'
import MFARecoveryForm from '../mfa_form/recovery_form.vue' import MFARecoveryForm from '../mfa_form/recovery_form.vue'
import MFATOTPForm from '../mfa_form/totp_form.vue' import MFATOTPForm from '../mfa_form/totp_form.vue'
@ -5,8 +6,8 @@ import { mapGetters } from 'vuex'
const AuthForm = { const AuthForm = {
name: 'AuthForm', name: 'AuthForm',
render (createElement) { render () {
return createElement('component', { is: this.authForm }) return h(resolveComponent(this.authForm))
}, },
computed: { computed: {
authForm () { authForm () {

2
src/components/basic_user_card/basic_user_card.vue
View file

@ -4,7 +4,7 @@
<UserAvatar <UserAvatar
class="avatar" class="avatar"
:user="user" :user="user"
@click.prevent.native="toggleUserExpanded" @click.prevent="toggleUserExpanded"
/> />
</router-link> </router-link>
<div <div

2
src/components/bookmark_timeline/bookmark_timeline.js
View file

@ -9,7 +9,7 @@ const Bookmarks = {
components: { components: {
Timeline Timeline
}, },
destroyed () { unmounted () {
this.$store.commit('clearTimeline', { timeline: 'bookmarks' }) this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
} }
} }

99
src/components/chat/chat.js
View file

@ -6,7 +6,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
import ChatTitle from '../chat_title/chat_title.vue' import ChatTitle from '../chat_title/chat_title.vue'
import chatService from '../../services/chat_service/chat_service.js' import chatService from '../../services/chat_service/chat_service.js'
import { promiseInterval } from '../../services/promise_interval/promise_interval.js' import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js' import { getScrollPosition, getNewTopPosition, isBottomedOut, isScrollable } from './chat_layout_utils.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faChevronDown, faChevronDown,
@ -20,7 +20,7 @@ library.add(
) )
const BOTTOMED_OUT_OFFSET = 10 const BOTTOMED_OUT_OFFSET = 10
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
const SAFE_RESIZE_TIME_OFFSET = 100 const SAFE_RESIZE_TIME_OFFSET = 100
const MARK_AS_READ_DELAY = 1500 const MARK_AS_READ_DELAY = 1500
const MAX_RETRIES = 10 const MAX_RETRIES = 10
@ -43,7 +43,7 @@ const Chat = {
}, },
created () { created () {
this.startFetching() this.startFetching()
window.addEventListener('resize', this.handleLayoutChange) window.addEventListener('resize', this.handleResize)
}, },
mounted () { mounted () {
window.addEventListener('scroll', this.handleScroll) window.addEventListener('scroll', this.handleScroll)
@ -52,15 +52,11 @@ const Chat = {
} }
this.$nextTick(() => { this.$nextTick(() => {
this.updateScrollableContainerHeight()
this.handleResize() this.handleResize()
}) })
this.setChatLayout()
}, },
destroyed () { unmounted () {
window.removeEventListener('scroll', this.handleScroll) window.removeEventListener('scroll', this.handleScroll)
window.removeEventListener('resize', this.handleLayoutChange)
this.unsetChatLayout()
if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false) if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
this.$store.dispatch('clearCurrentChat') this.$store.dispatch('clearCurrentChat')
}, },
@ -96,8 +92,7 @@ const Chat = {
...mapState({ ...mapState({
backendInteractor: state => state.api.backendInteractor, backendInteractor: state => state.api.backendInteractor,
mastoUserSocketStatus: state => state.api.mastoUserSocketStatus, mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
mobileLayout: state => state.interface.mobileLayout, mobileLayout: state => state.interface.layoutType === 'mobile',
layoutHeight: state => state.interface.layoutHeight,
currentUser: state => state.users.currentUser currentUser: state => state.users.currentUser
}) })
}, },
@ -115,9 +110,6 @@ const Chat = {
'$route': function () { '$route': function () {
this.startFetching() this.startFetching()
}, },
layoutHeight () {
this.handleResize({ expand: true })
},
mastoUserSocketStatus (newValue) { mastoUserSocketStatus (newValue) {
if (newValue === WSConnectionStatus.JOINED) { if (newValue === WSConnectionStatus.JOINED) {
this.fetchChat({ isFirstFetch: true }) this.fetchChat({ isFirstFetch: true })
@ -132,7 +124,6 @@ const Chat = {
onFilesDropped () { onFilesDropped () {
this.$nextTick(() => { this.$nextTick(() => {
this.handleResize() this.handleResize()
this.updateScrollableContainerHeight()
}) })
}, },
handleVisibilityChange () { handleVisibilityChange () {
@ -142,43 +133,7 @@ const Chat = {
} }
}) })
}, },
setChatLayout () { // "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
// This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
// This layout prevents empty spaces from being visible at the bottom
// of the chat on iOS Safari (`safe-area-inset`) when
// - the on-screen keyboard appears and the user starts typing
// - the user selects the text inside the input area
// - the user selects and deletes the text that is multiple lines long
// TODO: unify the chat layout with the global layout.
let html = document.querySelector('html')
if (html) {
html.classList.add('chat-layout')
}
this.$nextTick(() => {
this.updateScrollableContainerHeight()
})
},
unsetChatLayout () {
let html = document.querySelector('html')
if (html) {
html.classList.remove('chat-layout')
}
},
handleLayoutChange () {
this.$nextTick(() => {
this.updateScrollableContainerHeight()
this.scrollDown()
})
},
// Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
updateScrollableContainerHeight () {
const header = this.$refs.header
const footer = this.$refs.footer
const inner = this.mobileLayout ? window.document.body : this.$refs.inner
this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
},
// Preserves the scroll position when OSK appears or the posting form changes its height.
handleResize (opts = {}) { handleResize (opts = {}) {
const { expand = false, delayed = false } = opts const { expand = false, delayed = false } = opts
@ -190,29 +145,20 @@ const Chat = {
} }
this.$nextTick(() => { this.$nextTick(() => {
this.updateScrollableContainerHeight() const { offsetHeight = undefined } = getScrollPosition()
const { offsetHeight = undefined } = this.lastScrollPosition
this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)
const diff = this.lastScrollPosition.offsetHeight - offsetHeight const diff = this.lastScrollPosition.offsetHeight - offsetHeight
if (diff < 0 || (!this.bottomedOut() && expand)) { if (diff !== 0 || (!this.bottomedOut() && expand)) {
this.$nextTick(() => { this.$nextTick(() => {
this.updateScrollableContainerHeight() window.scrollTo({ top: window.scrollY + diff })
this.$refs.scrollable.scrollTo({
top: this.$refs.scrollable.scrollTop - diff,
left: 0
})
}) })
} }
this.lastScrollPosition = getScrollPosition()
}) })
}, },
scrollDown (options = {}) { scrollDown (options = {}) {
const { behavior = 'auto', forceRead = false } = options const { behavior = 'auto', forceRead = false } = options
const scrollable = this.$refs.scrollable
if (!scrollable) { return }
this.$nextTick(() => { this.$nextTick(() => {
scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior }) window.scrollTo({ top: document.documentElement.scrollHeight, behavior })
}) })
if (forceRead) { if (forceRead) {
this.readChat() this.readChat()
@ -228,11 +174,10 @@ const Chat = {
}) })
}, },
bottomedOut (offset) { bottomedOut (offset) {
return isBottomedOut(this.$refs.scrollable, offset) return isBottomedOut(offset)
}, },
reachedTop () { reachedTop () {
const scrollable = this.$refs.scrollable return window.scrollY <= 0
return scrollable && scrollable.scrollTop <= 0
}, },
cullOlderCheck () { cullOlderCheck () {
window.setTimeout(() => { window.setTimeout(() => {
@ -263,10 +208,9 @@ const Chat = {
} }
}, 200), }, 200),
handleScrollUp (positionBeforeLoading) { handleScrollUp (positionBeforeLoading) {
const positionAfterLoading = getScrollPosition(this.$refs.scrollable) const positionAfterLoading = getScrollPosition()
this.$refs.scrollable.scrollTo({ window.scrollTo({
top: getNewTopPosition(positionBeforeLoading, positionAfterLoading), top: getNewTopPosition(positionBeforeLoading, positionAfterLoading)
left: 0
}) })
}, },
fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) { fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
@ -285,22 +229,18 @@ const Chat = {
chatService.clear(chatMessageService) chatService.clear(chatMessageService)
} }
const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable) const positionBeforeUpdate = getScrollPosition()
this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => { this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
this.$nextTick(() => { this.$nextTick(() => {
if (fetchOlderMessages) { if (fetchOlderMessages) {
this.handleScrollUp(positionBeforeUpdate) this.handleScrollUp(positionBeforeUpdate)
} }
if (isFirstFetch) {
this.updateScrollableContainerHeight()
}
// In vertical screens, the first batch of fetched messages may not always take the // In vertical screens, the first batch of fetched messages may not always take the
// full height of the scrollable container. // full height of the scrollable container.
// If this is the case, we want to fetch the messages until the scrollable container // If this is the case, we want to fetch the messages until the scrollable container
// is fully populated so that the user has the ability to scroll up and load the history. // is fully populated so that the user has the ability to scroll up and load the history.
if (!isScrollable(this.$refs.scrollable) && messages.length > 0) { if (!isScrollable() && messages.length > 0) {
this.fetchChat({ maxId: this.currentChatMessageService.minId }) this.fetchChat({ maxId: this.currentChatMessageService.minId })
} }
}) })
@ -336,9 +276,6 @@ const Chat = {
this.handleResize() this.handleResize()
// When the posting form size changes because of a media attachment, we need an extra resize // When the posting form size changes because of a media attachment, we need an extra resize
// to account for the potential delay in the DOM update. // to account for the potential delay in the DOM update.
setTimeout(() => {
this.updateScrollableContainerHeight()
}, SAFE_RESIZE_TIME_OFFSET)
this.scrollDown({ forceRead: true }) this.scrollDown({ forceRead: true })
}) })
}, },

88
src/components/chat/chat.scss
View file

@ -1,28 +1,22 @@
.chat-view { .chat-view {
display: flex; display: flex;
height: calc(100vh - 60px); height: 100%;
width: 100%;
.chat-title {
// prevents chat header jumping on when the user avatar loads
height: 28px;
}
.chat-view-inner { .chat-view-inner {
height: auto; height: auto;
width: 100%; width: 100%;
overflow: visible; overflow: visible;
display: flex; display: flex;
margin: 0.5em 0.5em 0 0.5em;
} }
.chat-view-body { .chat-view-body {
box-sizing: border-box;
background-color: var(--chatBg, $fallback--bg); background-color: var(--chatBg, $fallback--bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
overflow: visible; overflow: visible;
min-height: 100%; min-height: calc(100vh - var(--navbar-height));
margin: 0 0 0 0; margin: 0 0 0 0;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0; border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
@ -32,36 +26,32 @@
} }
} }
.scrollable-message-list { .message-list {
padding: 0 0.8em; padding: 0 0.8em;
height: 100%; height: 100%;
overflow-y: scroll;
overflow-x: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: end;
} }
.footer { .footer {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
z-index: 1;
} }
.chat-view-heading { .chat-view-heading {
align-items: center; grid-template-columns: auto minmax(50%, 1fr);
justify-content: space-between;
top: 50px;
display: flex;
z-index: 2;
position: sticky;
overflow: hidden;
} }
.go-back-button { .go-back-button {
cursor: pointer;
width: 28px;
text-align: center; text-align: center;
padding: 0.6em; line-height: 1;
margin: -0.6em 0.6em -0.6em -0.6em; height: 100%;
align-self: start;
width: var(--__panel-heading-height-inner);
} }
.jump-to-bottom-button { .jump-to-bottom-button {
@ -115,56 +105,4 @@
} }
} }
} }
@media all and (max-width: 800px) {
height: 100%;
overflow: hidden;
.chat-view-inner {
overflow: hidden;
height: 100%;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.chat-view-body {
display: flex;
min-height: auto;
overflow: hidden;
height: 100%;
margin: 0;
border-radius: 0;
}
.chat-view-heading {
box-sizing: border-box;
position: static;
z-index: 9999;
top: 0;
margin-top: 0;
border-radius: 0;
/* This practically overlays the panel heading color over panel background
* color. This is needed because we allow transparent panel background and
* it doesn't work well in this "disjointed panel header" case
*/
background:
linear-gradient(to top, var(--panel), var(--panel)),
linear-gradient(to top, var(--bg), var(--bg));
height: 50px;
}
.scrollable-message-list {
display: unset;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.footer {
position: sticky;
bottom: auto;
}
}
} }

135
src/components/chat/chat.vue
View file

@ -2,23 +2,22 @@
<div class="chat-view"> <div class="chat-view">
<div class="chat-view-inner"> <div class="chat-view-inner">
<div <div
id="nav"
ref="inner" ref="inner"
class="panel-default panel chat-view-body" class="panel-default panel chat-view-body"
> >
<div <div
ref="header" ref="header"
class="panel-heading chat-view-heading mobile-hidden" class="panel-heading -sticky chat-view-heading"
> >
<a <button
class="go-back-button" class="button-unstyled go-back-button"
@click="goBack" @click="goBack"
> >
<FAIcon <FAIcon
size="lg" size="lg"
icon="chevron-left" icon="chevron-left"
/> />
</a> </button>
<div class="title text-center"> <div class="title text-center">
<ChatTitle <ChatTitle
:user="recipient" :user="recipient"
@ -26,73 +25,69 @@
/> />
</div> </div>
</div> </div>
<template> <div
<div class="message-list"
ref="scrollable" :style="{ height: scrollableContainerHeight }"
class="scrollable-message-list" >
:style="{ height: scrollableContainerHeight }" <template v-if="!errorLoadingChat">
@scroll="handleScroll" <ChatMessage
> v-for="chatViewItem in chatViewItems"
<template v-if="!errorLoadingChat"> :key="chatViewItem.id"
<ChatMessage :author="recipient"
v-for="chatViewItem in chatViewItems" :chat-view-item="chatViewItem"
:key="chatViewItem.id" :hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
:author="recipient" @hover="onMessageHover"
:chat-view-item="chatViewItem"
:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
@hover="onMessageHover"
/>
</template>
<div
v-else
class="chat-loading-error"
>
<div class="alert error">
{{ $t('chats.error_loading_chat') }}
</div>
</div>
</div>
<div
ref="footer"
class="panel-body footer"
>
<div
class="jump-to-bottom-button"
:class="{ 'visible': jumpToBottomButtonVisible }"
@click="scrollDown({ behavior: 'smooth' })"
>
<span>
<FAIcon icon="chevron-down" />
<div
v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count"
>
{{ newMessageCount }}
</div>
</span>
</div>
<PostStatusForm
:disable-subject="true"
:disable-scope-selector="true"
:disable-notice="true"
:disable-lock-warning="true"
:disable-polls="true"
:disable-sensitivity-checkbox="true"
:disable-submit="errorLoadingChat || !currentChat"
:disable-preview="true"
:optimistic-posting="true"
:post-handler="sendMessage"
:submit-on-enter="!mobileLayout"
:preserve-focus="!mobileLayout"
:auto-focus="!mobileLayout"
:placeholder="formPlaceholder"
:file-limit="1"
max-height="160"
emoji-picker-placement="top"
@resize="handleResize"
/> />
</template>
<div
v-else
class="chat-loading-error"
>
<div class="alert error">
{{ $t('chats.error_loading_chat') }}
</div>
</div> </div>
</template> </div>
<div
ref="footer"
class="panel-body footer"
>
<div
class="jump-to-bottom-button"
:class="{ 'visible': jumpToBottomButtonVisible }"
@click="scrollDown({ behavior: 'smooth' })"
>
<span>
<FAIcon icon="chevron-down" />
<div
v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count"
>
{{ newMessageCount }}
</div>
</span>
</div>
<PostStatusForm
:disable-subject="true"
:disable-scope-selector="true"
:disable-notice="true"
:disable-lock-warning="true"
:disable-polls="true"
:disable-sensitivity-checkbox="true"
:disable-submit="errorLoadingChat || !currentChat"
:disable-preview="true"
:optimistic-posting="true"
:post-handler="sendMessage"
:submit-on-enter="!mobileLayout"
:preserve-focus="!mobileLayout"
:auto-focus="!mobileLayout"
:placeholder="formPlaceholder"
:file-limit="1"
max-height="160"
emoji-picker-placement="top"
@resize="handleResize"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

27
src/components/chat/chat_layout_utils.js
View file

@ -1,9 +1,9 @@
// Captures a scroll position // Captures a scroll position
export const getScrollPosition = (el) => { export const getScrollPosition = () => {
return { return {
scrollTop: el.scrollTop, scrollTop: window.scrollY,
scrollHeight: el.scrollHeight, scrollHeight: document.documentElement.scrollHeight,
offsetHeight: el.offsetHeight offsetHeight: window.innerHeight
} }
} }
@ -13,21 +13,12 @@ export const getNewTopPosition = (previousPosition, newPosition) => {
return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight) return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
} }
export const isBottomedOut = (el, offset = 0) => { export const isBottomedOut = (offset = 0) => {
if (!el) { return } const scrollHeight = window.scrollY + offset
const scrollHeight = el.scrollTop + offset const totalHeight = document.documentElement.scrollHeight - window.innerHeight
const totalHeight = el.scrollHeight - el.offsetHeight
return totalHeight <= scrollHeight return totalHeight <= scrollHeight
} }
// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form.
export const scrollableContainerHeight = (inner, header, footer) => {
return inner.offsetHeight - header.clientHeight - footer.clientHeight
}
// Returns whether or not the scrollbar is visible. // Returns whether or not the scrollbar is visible.
export const isScrollable = (el) => { export const isScrollable = () => {
if (!el) return return document.documentElement.scrollHeight > window.innerHeight
return el.scrollHeight > el.clientHeight
} }

2
src/components/chat_list/chat_list.vue
View file

@ -6,7 +6,7 @@
v-else v-else
class="chat-list panel panel-default" class="chat-list panel panel-default"
> >
<div class="panel-heading"> <div class="panel-heading -sticky">
<span class="title"> <span class="title">
{{ $t("chats.chats") }} {{ $t("chats.chats") }}
</span> </span>

4
src/components/chat_list_item/chat_list_item.scss
View file

@ -43,7 +43,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
flex-shrink: 1; flex-shrink: 1;
line-height: 1.4em; line-height: var(--post-line-height);
} }
.chat-preview { .chat-preview {
@ -82,7 +82,7 @@
} }
.time-wrapper { .time-wrapper {
line-height: 1.4em; line-height: var(--post-line-height);
} }
.chat-preview-body { .chat-preview-body {

1
src/components/chat_message/chat_message.js
View file

@ -27,6 +27,7 @@ const ChatMessage = {
'chatViewItem', 'chatViewItem',
'hoveredMessageChain' 'hoveredMessageChain'
], ],
emits: ['hover'],
components: { components: {
Popover, Popover,
Attachment, Attachment,

11
src/components/chat_message/chat_message.scss
View file

@ -1,6 +1,7 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.chat-message-wrapper { .chat-message-wrapper {
&.hovered-message-chain { &.hovered-message-chain {
.animated.Avatar { .animated.Avatar {
canvas { canvas {
@ -40,6 +41,12 @@
.chat-message { .chat-message {
display: flex; display: flex;
padding-bottom: 0.5em; padding-bottom: 0.5em;
.status-body:hover {
--_still-image-img-visibility: visible;
--_still-image-canvas-visibility: hidden;
--_still-image-label-visibility: hidden;
}
} }
.avatar-wrapper { .avatar-wrapper {
@ -62,10 +69,6 @@
&.with-media { &.with-media {
width: 100%; width: 100%;
.gallery-row {
overflow: hidden;
}
.status { .status {
width: 100%; width: 100%;
} }

8
src/components/chat_new/chat_new.scss
View file

@ -22,10 +22,10 @@
} }
.go-back-button { .go-back-button {
cursor: pointer;
width: 28px;
text-align: center; text-align: center;
padding: 0.6em; line-height: 1;
margin: -0.6em 0.6em -0.6em -0.6em; height: 100%;
align-self: start;
width: var(--__panel-heading-height-inner);
} }
} }

7
src/components/chat_new/chat_new.vue
View file

@ -1,21 +1,20 @@
<template> <template>
<div <div
id="nav"
class="panel-default panel chat-new" class="panel-default panel chat-new"
> >
<div <div
ref="header" ref="header"
class="panel-heading" class="panel-heading"
> >
<a <button
class="go-back-button" class="button-unstyled go-back-button"
@click="goBack" @click="goBack"
> >
<FAIcon <FAIcon
size="lg" size="lg"
icon="chevron-left" icon="chevron-left"
/> />
</a> </button>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<div class="input-search"> <div class="input-search">

9
src/components/chat_title/chat_title.js
View file

@ -1,11 +1,12 @@
import Vue from 'vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import UserAvatar from '../user_avatar/user_avatar.vue' import UserAvatar from '../user_avatar/user_avatar.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
export default Vue.component('chat-title', { export default {
name: 'ChatTitle', name: 'ChatTitle',
components: { components: {
UserAvatar UserAvatar,
RichContent
}, },
props: [ props: [
'user', 'withAvatar' 'user', 'withAvatar'
@ -23,4 +24,4 @@ export default Vue.component('chat-title', {
return generateProfileLink(user.id, user.screen_name) return generateProfileLink(user.id, user.screen_name)
} }
} }
}) }

36
src/components/chat_title/chat_title.vue
View file

@ -1,25 +1,26 @@
<template> <template>
<!-- eslint-disable vue/no-v-html -->
<div <div
class="chat-title" class="chat-title"
:title="title" :title="title"
> >
<router-link <router-link
class="avatar-container"
v-if="withAvatar && user" v-if="withAvatar && user"
:to="getUserProfileLink(user)" :to="getUserProfileLink(user)"
> >
<UserAvatar <UserAvatar
class="titlebar-avatar"
:user="user" :user="user"
width="23px"
height="23px"
/> />
</router-link> </router-link>
<span <RichContent
v-if="user"
class="username" class="username"
v-html="htmlTitle" :title="'@'+(user && user.screen_name_ui)"
:html="htmlTitle"
:emoji="user.emoji || []"
/> />
</div> </div>
<!-- eslint-enable vue/no-v-html -->
</template> </template>
<script src="./chat_title.js"></script> <script src="./chat_title.js"></script>
@ -32,7 +33,8 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
align-items: center;
--emoji-size: 14px;
.username { .username {
max-width: 100%; max-width: 100%;
@ -41,21 +43,17 @@
display: inline; display: inline;
word-wrap: break-word; word-wrap: break-word;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
.emoji {
width: 14px;
height: 14px;
vertical-align: middle;
object-fit: contain
}
} }
.Avatar { .avatar-container {
width: 23px; align-self: center;
height: 23px; line-height: 1;
margin-right: 0.5em; }
.titlebar-avatar {
margin-right: 0.5em;
height: 1.5em;
width: 1.5em;
border-radius: $fallback--avatarAltRadius; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);

13
src/components/checkbox/checkbox.vue
View file

@ -6,9 +6,9 @@
<input <input
type="checkbox" type="checkbox"
:disabled="disabled" :disabled="disabled"
:checked="checked" :checked="modelValue"
:indeterminate.prop="indeterminate" :indeterminate="indeterminate"
@change="$emit('change', $event.target.checked)" @change="$emit('update:modelValue', $event.target.checked)"
> >
<i class="checkbox-indicator" /> <i class="checkbox-indicator" />
<span <span
@ -22,12 +22,9 @@
<script> <script>
export default { export default {
model: { emits: ['update:modelValue'],
prop: 'checked',
event: 'change'
},
props: [ props: [
'checked', 'modelValue',
'indeterminate', 'indeterminate',
'disabled' 'disabled'
] ]

23
src/components/color_input/color_input.vue
View file

@ -11,28 +11,28 @@
</label> </label>
<Checkbox <Checkbox
v-if="typeof fallback !== 'undefined' && showOptionalTickbox" v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
:checked="present" :model-value="present"
:disabled="disabled" :disabled="disabled"
class="opt" class="opt"
@change="$emit('input', typeof value === 'undefined' ? fallback : undefined)" @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
/> />
<div class="input color-input-field"> <div class="input color-input-field">
<input <input
:id="name + '-t'" :id="name + '-t'"
class="textColor unstyled" class="textColor unstyled"
type="text" type="text"
:value="value || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('input', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >
<input <input
v-if="validColor" v-if="validColor"
:id="name" :id="name"
class="nativeColor unstyled" class="nativeColor unstyled"
type="color" type="color"
:value="value || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('input', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >
<div <div
v-if="transparentColor" v-if="transparentColor"
@ -67,7 +67,7 @@ export default {
}, },
// Color value, should be required but vue cannot tell the difference // Color value, should be required but vue cannot tell the difference
// between "property missing" and "property set to undefined" // between "property missing" and "property set to undefined"
value: { modelValue: {
required: false, required: false,
type: String, type: String,
default: undefined default: undefined
@ -91,18 +91,19 @@ export default {
default: true default: true
} }
}, },
emits: ['update:modelValue'],
computed: { computed: {
present () { present () {
return typeof this.value !== 'undefined' return typeof this.modelValue !== 'undefined'
}, },
validColor () { validColor () {
return hex2rgb(this.value || this.fallback) return hex2rgb(this.modelValue || this.fallback)
}, },
transparentColor () { transparentColor () {
return this.value === 'transparent' return this.modelValue === 'transparent'
}, },
computedColor () { computedColor () {
return this.value && this.value.startsWith('--') return this.modelValue && this.modelValue.startsWith('--')
} }
} }
} }

378
src/components/conversation/conversation.js
View file

@ -1,5 +1,19 @@
import { reduce, filter, findIndex, clone, get } from 'lodash' import { reduce, filter, findIndex, clone, get } from 'lodash'
import Status from '../status/status.vue' import Status from '../status/status.vue'
import ThreadTree from '../thread_tree/thread_tree.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faAngleDoubleDown,
faAngleDoubleLeft,
faChevronLeft
} from '@fortawesome/free-solid-svg-icons'
library.add(
faAngleDoubleDown,
faAngleDoubleLeft,
faChevronLeft
)
const sortById = (a, b) => { const sortById = (a, b) => {
const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@ -35,7 +49,10 @@ const conversation = {
data () { data () {
return { return {
highlight: null, highlight: null,
expanded: false expanded: false,
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
statusContentPropertiesObject: {},
inlineDivePosition: null
} }
}, },
props: [ props: [
@ -53,12 +70,50 @@ const conversation = {
} }
}, },
computed: { computed: {
hideStatus () { maxDepthToShowByDefault () {
if (this.$refs.statusComponent && this.$refs.statusComponent[0]) { // maxDepthInThread = max number of depths that is *visible*
return this.virtualHidden && this.$refs.statusComponent[0].suspendable // since our depth starts with 0 and "showing" means "showing children"
} else { // there is a -2 here
return this.virtualHidden const maxDepth = this.$store.getters.mergedConfig.maxDepthInThread - 2
return maxDepth >= 1 ? maxDepth : 1
},
displayStyle () {
return this.$store.getters.mergedConfig.conversationDisplay
},
isTreeView () {
return !this.isLinearView
},
treeViewIsSimple () {
return !this.$store.getters.mergedConfig.conversationTreeAdvanced
},
isLinearView () {
return this.displayStyle === 'linear'
},
shouldFadeAncestors () {
return this.$store.getters.mergedConfig.conversationTreeFadeAncestors
},
otherRepliesButtonPosition () {
return this.$store.getters.mergedConfig.conversationOtherRepliesButton
},
showOtherRepliesButtonBelowStatus () {
return this.otherRepliesButtonPosition === 'below'
},
showOtherRepliesButtonInsideStatus () {
return this.otherRepliesButtonPosition === 'inside'
},
suspendable () {
if (this.isTreeView) {
return Object.entries(this.statusContentProperties)
.every(([k, prop]) => !prop.replying && prop.mediaPlaying.length === 0)
} }
if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
return this.$refs.statusComponent.every(s => s.suspendable)
} else {
return true
}
},
hideStatus () {
return this.virtualHidden && this.suspendable
}, },
status () { status () {
return this.$store.state.statuses.allStatusesObject[this.statusId] return this.$store.state.statuses.allStatusesObject[this.statusId]
@ -90,6 +145,121 @@ const conversation = {
return sortAndFilterConversation(conversation, this.status) return sortAndFilterConversation(conversation, this.status)
}, },
statusMap () {
return this.conversation.reduce((res, s) => {
res[s.id] = s
return res
}, {})
},
threadTree () {
const reverseLookupTable = this.conversation.reduce((table, status, index) => {
table[status.id] = index
return table
}, {})
const threads = this.conversation.reduce((a, cur) => {
const id = cur.id
a.forest[id] = this.getReplies(id)
.map(s => s.id)
return a
}, {
forest: {}
})
const walk = (forest, topLevel, depth = 0, processed = {}) => topLevel.map(id => {
if (processed[id]) {
return []
}
processed[id] = true
return [{
status: this.conversation[reverseLookupTable[id]],
id,
depth
}, walk(forest, forest[id], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
}).reduce((a, b) => a.concat(b), [])
const linearized = walk(threads.forest, this.topLevel.map(k => k.id))
return linearized
},
replyIds () {
return this.conversation.map(k => k.id)
.reduce((res, id) => {
res[id] = (this.replies[id] || []).map(k => k.id)
return res
}, {})
},
totalReplyCount () {
const sizes = {}
const subTreeSizeFor = (id) => {
if (sizes[id]) {
return sizes[id]
}
sizes[id] = 1 + this.replyIds[id].map(cid => subTreeSizeFor(cid)).reduce((a, b) => a + b, 0)
return sizes[id]
}
this.conversation.map(k => k.id).map(subTreeSizeFor)
return Object.keys(sizes).reduce((res, id) => {
res[id] = sizes[id] - 1 // exclude itself
return res
}, {})
},
totalReplyDepth () {
const depths = {}
const subTreeDepthFor = (id) => {
if (depths[id]) {
return depths[id]
}
depths[id] = 1 + this.replyIds[id].map(cid => subTreeDepthFor(cid)).reduce((a, b) => a > b ? a : b, 0)
return depths[id]
}
this.conversation.map(k => k.id).map(subTreeDepthFor)
return Object.keys(depths).reduce((res, id) => {
res[id] = depths[id] - 1 // exclude itself
return res
}, {})
},
depths () {
return this.threadTree.reduce((a, k) => {
a[k.id] = k.depth
return a
}, {})
},
topLevel () {
const topLevel = this.conversation.reduce((tl, cur) =>
tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation)
return topLevel
},
otherTopLevelCount () {
return this.topLevel.length - 1
},
showingTopLevel () {
if (this.canDive && this.diveRoot) {
return [this.statusMap[this.diveRoot]]
}
return this.topLevel
},
diveRoot () {
const statusId = this.inlineDivePosition || this.statusId
const isTopLevel = !this.parentOf(statusId)
return isTopLevel ? null : statusId
},
diveDepth () {
return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0
},
diveMode () {
return this.canDive && !!this.diveRoot
},
shouldShowAllConversationButton () {
// The "show all conversation" button tells the user that there exist
// other toplevel statuses, so do not show it if there is only a single root
return this.isTreeView && this.isExpanded && this.diveMode && this.topLevel.length > 1
},
shouldShowAncestors () {
return this.isTreeView && this.isExpanded && this.ancestorsOf(this.diveRoot).length
},
replies () { replies () {
let i = 1 let i = 1
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
@ -109,15 +279,71 @@ const conversation = {
}, {}) }, {})
}, },
isExpanded () { isExpanded () {
return this.expanded || this.isPage return !!(this.expanded || this.isPage)
}, },
hiddenStyle () { hiddenStyle () {
const height = (this.status && this.status.virtualHeight) || '120px' const height = (this.status && this.status.virtualHeight) || '120px'
return this.virtualHidden ? { height } : {} return this.virtualHidden ? { height } : {}
},
threadDisplayStatus () {
return this.conversation.reduce((a, k) => {
const id = k.id
const depth = this.depths[id]
const status = (() => {
if (this.threadDisplayStatusObject[id]) {
return this.threadDisplayStatusObject[id]
}
if ((depth - this.diveDepth) <= this.maxDepthToShowByDefault) {
return 'showing'
} else {
return 'hidden'
}
})()
a[id] = status
return a
}, {})
},
statusContentProperties () {
return this.conversation.reduce((a, k) => {
const id = k.id
const props = (() => {
const def = {
showingTall: false,
expandingSubject: false,
showingLongSubject: false,
isReplying: false,
mediaPlaying: []
}
if (this.statusContentPropertiesObject[id]) {
return {
...def,
...this.statusContentPropertiesObject[id]
}
}
return def
})()
a[id] = props
return a
}, {})
},
canDive () {
return this.isTreeView && this.isExpanded
},
focused () {
return (id) => {
return (this.isExpanded) && id === this.highlight
}
},
maybeHighlight () {
return this.isExpanded ? this.highlight : null
} }
}, },
components: { components: {
Status Status,
ThreadTree
}, },
watch: { watch: {
statusId (newVal, oldVal) { statusId (newVal, oldVal) {
@ -132,6 +358,8 @@ const conversation = {
expanded (value) { expanded (value) {
if (value) { if (value) {
this.fetchConversation() this.fetchConversation()
} else {
this.resetDisplayState()
} }
}, },
virtualHidden (value) { virtualHidden (value) {
@ -161,8 +389,8 @@ const conversation = {
getReplies (id) { getReplies (id) {
return this.replies[id] || [] return this.replies[id] || []
}, },
focused (id) { getHighlight () {
return (this.isExpanded) && id === this.statusId return this.isExpanded ? this.highlight : null
}, },
setHighlight (id) { setHighlight (id) {
if (!id) return if (!id) return
@ -170,15 +398,139 @@ const conversation = {
this.$store.dispatch('fetchFavsAndRepeats', id) this.$store.dispatch('fetchFavsAndRepeats', id)
this.$store.dispatch('fetchEmojiReactionsBy', id) this.$store.dispatch('fetchEmojiReactionsBy', id)
}, },
getHighlight () {
return this.isExpanded ? this.highlight : null
},
toggleExpanded () { toggleExpanded () {
this.expanded = !this.expanded this.expanded = !this.expanded
}, },
getConversationId (statusId) { getConversationId (statusId) {
const status = this.$store.state.statuses.allStatusesObject[statusId] const status = this.$store.state.statuses.allStatusesObject[statusId]
return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id')) return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id'))
},
setThreadDisplay (id, nextStatus) {
this.threadDisplayStatusObject = {
...this.threadDisplayStatusObject,
[id]: nextStatus
}
},
toggleThreadDisplay (id) {
const curStatus = this.threadDisplayStatus[id]
const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
this.setThreadDisplay(id, nextStatus)
},
setThreadDisplayRecursively (id, nextStatus) {
this.setThreadDisplay(id, nextStatus)
this.getReplies(id).map(k => k.id).map(id => this.setThreadDisplayRecursively(id, nextStatus))
},
showThreadRecursively (id) {
this.setThreadDisplayRecursively(id, 'showing')
},
setStatusContentProperty (id, name, value) {
this.statusContentPropertiesObject = {
...this.statusContentPropertiesObject,
[id]: {
...this.statusContentPropertiesObject[id],
[name]: value
}
}
},
toggleStatusContentProperty (id, name) {
this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
},
leastVisibleAncestor (id) {
let cur = id
let parent = this.parentOf(cur)
while (cur) {
// if the parent is showing it means cur is visible
if (this.threadDisplayStatus[parent] === 'showing') {
return cur
}
parent = this.parentOf(parent)
cur = this.parentOf(cur)
}
// nothing found, fall back to toplevel
return this.topLevel[0] ? this.topLevel[0].id : undefined
},
diveIntoStatus (id, preventScroll) {
this.tryScrollTo(id)
},
diveToTopLevel () {
this.tryScrollTo(this.topLevelAncestorOrSelfId(this.diveRoot) || this.topLevel[0].id)
},
// only used when we are not on a page
undive () {
this.inlineDivePosition = null
this.setHighlight(this.statusId)
},
tryScrollTo (id) {
if (!id) {
return
}
if (this.isPage) {
// set statusId
this.$router.push({ name: 'conversation', params: { id } })
} else {
this.inlineDivePosition = id
}
// Because the conversation can be unmounted when out of sight
// and mounted again when it comes into sight,
// the `mounted` or `created` function in `status` should not
// contain scrolling calls, as we do not want the page to jump
// when we scroll with an expanded conversation.
//
// Now the method is to rely solely on the `highlight` watcher
// in `status` components.
// In linear views, all statuses are rendered at all times, but
// in tree views, it is possible that a change in active status
// removes and adds status components (e.g. an originally child
// status becomes an ancestor status, and thus they will be
// different).
// Here, let the components be rendered first, in order to trigger
// the `highlight` watcher.
this.$nextTick(() => {
this.setHighlight(id)
})
},
goToCurrent () {
this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
},
statusById (id) {
return this.statusMap[id]
},
parentOf (id) {
const status = this.statusById(id)
if (!status) {
return undefined
}
const { in_reply_to_status_id: parentId } = status
if (!this.statusMap[parentId]) {
return undefined
}
return parentId
},
parentOrSelf (id) {
return this.parentOf(id) || id
},
// Ancestors of some status, from top to bottom
ancestorsOf (id) {
const ancestors = []
let cur = this.parentOf(id)
while (cur) {
ancestors.unshift(this.statusMap[cur])
cur = this.parentOf(cur)
}
return ancestors
},
topLevelAncestorOrSelfId (id) {
let cur = id
let parent = this.parentOf(id)
while (parent) {
cur = this.parentOf(cur)
parent = this.parentOf(parent)
}
return cur
},
resetDisplayState () {
this.undive()
this.threadDisplayStatusObject = {}
} }
} }
} }

265
src/components/conversation/conversation.vue
View file

@ -7,7 +7,7 @@
> >
<div <div
v-if="isExpanded" v-if="isExpanded"
class="panel-heading conversation-heading" class="panel-heading conversation-heading -sticky"
> >
<span class="title"> {{ $t('timeline.conversation') }} </span> <span class="title"> {{ $t('timeline.conversation') }} </span>
<button <button
@ -18,24 +18,176 @@
{{ $t('timeline.collapse') }} {{ $t('timeline.collapse') }}
</button> </button>
</div> </div>
<status <div class="conversation-body panel-body">
v-for="status in conversation" <div
:key="status.id" v-if="isTreeView"
ref="statusComponent" class="thread-body"
:inline-expanded="collapsable && isExpanded" >
:statusoid="status" <div
:expandable="!isExpanded" v-if="shouldShowAllConversationButton"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]" class="conversation-dive-to-top-level-box"
:focused="focused(status.id)" >
:in-conversation="isExpanded" <i18n-t
:highlight="getHighlight()" keypath="status.show_all_conversation_with_icon"
:replies="getReplies(status.id)" tag="button"
:in-profile="inProfile" class="button-unstyled -link"
:profile-user-id="profileUserId" @click.prevent="diveToTopLevel"
class="conversation-status status-fadein panel-body" scope="global"
@goto="setHighlight" >
@toggleExpanded="toggleExpanded" <template #icon>
/> <FAIcon
icon="angle-double-left"
/>
</template>
<template #text>
<span>
{{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
</span>
</template>
</i18n-t>
</div>
<div
v-if="shouldShowAncestors"
class="thread-ancestors"
>
<div
v-for="status in ancestorsOf(diveRoot)"
:key="status.id"
class="thread-ancestor"
:class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
>
<status
ref="statusComponent"
:inline-expanded="collapsable && isExpanded"
:statusoid="status"
:expandable="!isExpanded"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:focused="focused(status.id)"
:in-conversation="isExpanded"
:highlight="getHighlight()"
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body"
:simple-tree="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
:show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
:dive="() => diveIntoStatus(status.id)"
:controlled-showing-tall="statusContentProperties[status.id].showingTall"
:controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
:controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
:controlled-replying="statusContentProperties[status.id].replying"
:controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
:controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
:controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
:controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
:controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
:controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
/>
<div
v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
class="thread-ancestor-dive-box"
>
<div
class="thread-ancestor-dive-box-inner"
>
<i18n-t
tag="button"
scope="global"
keypath="status.ancestor_follow_with_icon"
class="button-unstyled -link thread-tree-show-replies-button"
@click.prevent="diveIntoStatus(status.id)"
>
<template #icon>
<FAIcon
icon="angle-double-right"
/>
</template>
<template #text>
<span>
{{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
</span>
</template>
</i18n-t>
</div>
</div>
</div>
</div>
<thread-tree
v-for="status in showingTopLevel"
:key="status.id"
ref="statusComponent"
:depth="0"
:status="status"
:in-profile="inProfile"
:conversation="conversation"
:collapsable="collapsable"
:is-expanded="isExpanded"
:pinned-status-ids-object="pinnedStatusIdsObject"
:profile-user-id="profileUserId"
:focused="focused"
:get-replies="getReplies"
:highlight="maybeHighlight"
:set-highlight="setHighlight"
:toggle-expanded="toggleExpanded"
:simple="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
:dive="canDive ? diveIntoStatus : undefined"
/>
</div>
<div
v-if="isLinearView"
class="thread-body"
>
<status
v-for="status in conversation"
:key="status.id"
ref="statusComponent"
:inline-expanded="collapsable && isExpanded"
:statusoid="status"
:expandable="!isExpanded"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:focused="focused(status.id)"
:in-conversation="isExpanded"
:highlight="getHighlight()"
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
/>
</div>
</div>
</div> </div>
<div <div
v-else v-else
@ -49,6 +201,48 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.Conversation { .Conversation {
z-index: 1;
.conversation-dive-to-top-level-box {
padding: var(--status-margin, $status-margin);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-radius: 0;
/* Make the button stretch along the whole row */
display: flex;
align-items: stretch;
flex-direction: column;
}
.thread-ancestors {
margin-left: var(--status-margin, $status-margin);
border-left: 2px solid var(--border, $fallback--border);
}
.thread-ancestor.-faded .StatusContent {
--link: var(--faintLink);
--text: var(--faint);
color: var(--text);
}
.thread-ancestor-dive-box {
padding-left: var(--status-margin, $status-margin);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-radius: 0;
/* Make the button stretch along the whole row */
&, &-inner {
display: flex;
align-items: stretch;
flex-direction: column;
}
}
.thread-ancestor-dive-box-inner {
padding: var(--status-margin, $status-margin);
}
.conversation-status { .conversation-status {
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-style: solid; border-bottom-style: solid;
@ -56,12 +250,33 @@
border-radius: 0; border-radius: 0;
} }
&.-expanded { .thread-ancestor-has-other-replies .conversation-status,
.conversation-status:last-child { .thread-ancestor:last-child .conversation-status,
border-bottom: none; .thread-ancestor:last-child .thread-ancestor-dive-box,
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; &:last-child .conversation-status,
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); &.-expanded .thread-tree .conversation-status {
} border-bottom: none;
}
.thread-ancestors + .thread-tree > .conversation-status {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--border, $fallback--border);
}
/* expanded conversation in timeline */
&.status-fadein.-expanded .thread-body {
border-left-width: 4px;
border-left-style: solid;
border-left-color: $fallback--cRed;
border-left-color: var(--cRed, $fallback--cRed);
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
border-bottom: 1px solid var(--border, $fallback--border);
}
&.-expanded.status-fadein {
margin: calc(var(--status-margin, $status-margin) / 2);
} }
} }
</style> </style>

12
src/components/desktop_nav/desktop_nav.scss
View file

@ -1,9 +1,7 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.DesktopNav { .DesktopNav {
height: 50px;
width: 100%; width: 100%;
position: fixed;
a { a {
color: var(--topBarLink, $fallback--link); color: var(--topBarLink, $fallback--link);
@ -11,7 +9,7 @@
.inner-nav { .inner-nav {
display: grid; display: grid;
grid-template-rows: 50px; grid-template-rows: var(--navbar-height);
grid-template-columns: 2fr auto 2fr; grid-template-columns: 2fr auto 2fr;
grid-template-areas: "sitename logo actions"; grid-template-areas: "sitename logo actions";
box-sizing: border-box; box-sizing: border-box;
@ -20,7 +18,7 @@
max-width: 980px; max-width: 980px;
} }
&.-logoLeft { &.-logoLeft .inner-nav {
grid-template-columns: auto 2fr 2fr; grid-template-columns: auto 2fr 2fr;
grid-template-areas: "logo sitename actions"; grid-template-areas: "logo sitename actions";
} }
@ -77,7 +75,7 @@
img { img {
display: inline-block; display: inline-block;
height: 50px; height: var(--navbar-height);
} }
} }
@ -103,8 +101,8 @@
.item { .item {
flex: 1; flex: 1;
line-height: 50px; line-height: var(--navbar-height);
height: 50px; height: var(--navbar-height);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

3
src/components/desktop_nav/desktop_nav.vue
View file

@ -34,7 +34,7 @@
<search-bar <search-bar
v-if="currentUser || !privateMode" v-if="currentUser || !privateMode"
@toggled="onSearchBarToggled" @toggled="onSearchBarToggled"
@click.stop.native @click.stop
/> />
<button <button
class="button-unstyled nav-icon" class="button-unstyled nav-icon"
@ -52,6 +52,7 @@
href="/pleroma/admin/#/login-pleroma" href="/pleroma/admin/#/login-pleroma"
class="nav-icon" class="nav-icon"
target="_blank" target="_blank"
@click.stop
> >
<FAIcon <FAIcon
fixed-width fixed-width

9
src/components/dialog_modal/dialog_modal.vue
View file

@ -58,16 +58,7 @@
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
.dialog-modal-heading { .dialog-modal-heading {
padding: .5em .5em;
margin-right: auto;
margin-bottom: 0;
white-space: nowrap;
color: var(--panelText);
background-color: $fallback--fg;
background-color: var(--panel, $fallback--fg);
.title { .title {
margin-bottom: 0;
text-align: center; text-align: center;
} }
} }

31
src/components/emoji_input/emoji_input.js
View file

@ -31,6 +31,7 @@ library.add(
*/ */
const EmojiInput = { const EmojiInput = {
emits: ['update:modelValue', 'shown'],
props: { props: {
suggest: { suggest: {
/** /**
@ -57,8 +58,7 @@ const EmojiInput = {
required: true, required: true,
type: Function type: Function
}, },
// TODO VUE3: change to modelValue, change 'input' event to 'input' modelValue: {
value: {
/** /**
* Used for v-model * Used for v-model
*/ */
@ -137,8 +137,8 @@ const EmojiInput = {
return (this.wordAtCaret || {}).word || '' return (this.wordAtCaret || {}).word || ''
}, },
wordAtCaret () { wordAtCaret () {
if (this.value && this.caret) { if (this.modelValue && this.caret) {
const word = Completion.wordAtPosition(this.value, this.caret - 1) || {} const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
return word return word
} }
} }
@ -189,8 +189,11 @@ const EmojiInput = {
img: imageUrl || '' img: imageUrl || ''
})) }))
}, },
suggestions (newValue) { suggestions: {
this.$nextTick(this.resize) handler (newValue) {
this.$nextTick(this.resize)
},
deep: true
} }
}, },
methods: { methods: {
@ -225,13 +228,13 @@ const EmojiInput = {
} }
}, },
replace (replacement) { replace (replacement) {
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement) const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
this.$emit('input', newValue) this.$emit('update:modelValue', newValue)
this.caret = 0 this.caret = 0
}, },
insert ({ insertion, keepOpen, surroundingSpace = true }) { insert ({ insertion, keepOpen, surroundingSpace = true }) {
const before = this.value.substring(0, this.caret) || '' const before = this.modelValue.substring(0, this.caret) || ''
const after = this.value.substring(this.caret) || '' const after = this.modelValue.substring(this.caret) || ''
/* Using a bit more smart approach to padding emojis with spaces: /* Using a bit more smart approach to padding emojis with spaces:
* - put a space before cursor if there isn't one already, unless we * - put a space before cursor if there isn't one already, unless we
@ -259,7 +262,7 @@ const EmojiInput = {
after after
].join('') ].join('')
this.keepOpen = keepOpen this.keepOpen = keepOpen
this.$emit('input', newValue) this.$emit('update:modelValue', newValue)
const position = this.caret + (insertion + spaceAfter + spaceBefore).length const position = this.caret + (insertion + spaceAfter + spaceBefore).length
if (!keepOpen) { if (!keepOpen) {
this.input.focus() this.input.focus()
@ -278,8 +281,8 @@ const EmojiInput = {
if (len > 0 || suggestion) { if (len > 0 || suggestion) {
const chosenSuggestion = suggestion || this.suggestions[this.highlighted] const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
const replacement = chosenSuggestion.replacement const replacement = chosenSuggestion.replacement
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement) const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
this.$emit('input', newValue) this.$emit('update:modelValue', newValue)
this.highlighted = 0 this.highlighted = 0
const position = this.wordAtCaret.start + replacement.length const position = this.wordAtCaret.start + replacement.length
@ -455,7 +458,7 @@ const EmojiInput = {
this.showPicker = false this.showPicker = false
this.setCaret(e) this.setCaret(e)
this.resize() this.resize()
this.$emit('input', e.target.value) this.$emit('update:modelValue', e.target.value)
}, },
onClickInput (e) { onClickInput (e) {
this.showPicker = false this.showPicker = false

2
src/components/emoji_input/emoji_input.vue
View file

@ -78,7 +78,7 @@
top: 0; top: 0;
right: 0; right: 0;
margin: .2em .25em; margin: .2em .25em;
font-size: 16px; font-size: 1.3em;
cursor: pointer; cursor: pointer;
line-height: 24px; line-height: 24px;

9
src/components/emoji_picker/emoji_picker.js
View file

@ -1,3 +1,4 @@
import { defineAsyncComponent } from 'vue'
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
@ -57,7 +58,7 @@ const EmojiPicker = {
} }
}, },
components: { components: {
StickerPicker: () => import('../sticker_picker/sticker_picker.vue'), StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
Checkbox Checkbox
}, },
methods: { methods: {
@ -79,7 +80,7 @@ const EmojiPicker = {
}, },
highlight (key) { highlight (key) {
const ref = this.$refs['group-' + key] const ref = this.$refs['group-' + key]
const top = ref[0].offsetTop const top = ref.offsetTop
this.setShowStickers(false) this.setShowStickers(false)
this.activeGroup = key this.activeGroup = key
this.$nextTick(() => { this.$nextTick(() => {
@ -96,7 +97,7 @@ const EmojiPicker = {
} }
}, },
triggerLoadMore (target) { triggerLoadMore (target) {
const ref = this.$refs['group-end-custom'][0] const ref = this.$refs['group-end-custom']
if (!ref) return if (!ref) return
const bottom = ref.offsetTop + ref.offsetHeight const bottom = ref.offsetTop + ref.offsetHeight
@ -119,7 +120,7 @@ const EmojiPicker = {
this.$nextTick(() => { this.$nextTick(() => {
this.emojisView.forEach(group => { this.emojisView.forEach(group => {
const ref = this.$refs['group-' + group.id] const ref = this.$refs['group-' + group.id]
if (ref[0].offsetTop <= top) { if (ref.offsetTop <= top) {
this.activeGroup = group.id this.activeGroup = group.id
} }
}) })

8
src/components/emoji_picker/emoji_picker.scss
View file

@ -7,7 +7,7 @@
right: 0; right: 0;
left: 0; left: 0;
margin: 0 !important; margin: 0 !important;
z-index: 1; z-index: 100;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg); background-color: var(--popover, $fallback--bg);
color: $fallback--link; color: $fallback--link;
@ -73,12 +73,13 @@
&-item { &-item {
padding: 0 7px; padding: 0 7px;
cursor: pointer; cursor: pointer;
font-size: 24px; font-size: 1.85em;
&.disabled { &.disabled {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
&.active { &.active {
border-bottom: 4px solid; border-bottom: 4px solid;
@ -151,9 +152,10 @@
justify-content: left; justify-content: left;
&-title { &-title {
font-size: 12px; font-size: 0.85em;
width: 100%; width: 100%;
margin: 0; margin: 0;
&.disabled { &.disabled {
display: none; display: none;
} }

14
src/components/exporter/exporter.js
View file

@ -15,18 +15,8 @@ const Exporter = {
type: String, type: String,
default: 'export.csv' default: 'export.csv'
}, },
exportButtonLabel: { exportButtonLabel: { type: String },
type: String, processingMessage: { type: String }
default () {
return this.$t('exporter.export')
}
},
processingMessage: {
type: String,
default () {
return this.$t('exporter.processing')
}
}
}, },
data () { data () {
return { return {

4
src/components/exporter/exporter.vue
View file

@ -7,14 +7,14 @@
spin spin
/> />
<span>{{ processingMessage }}</span> <span>{{ processingMessage || $t('exporter.processing') }}</span>
</div> </div>
<button <button
v-else v-else
class="btn button-default" class="btn button-default"
@click="process" @click="process"
> >
{{ exportButtonLabel }} {{ exportButtonLabel || $t('exporter.export') }}
</button> </button>
</div> </div>
</template> </template>

5
src/components/flash/flash.js
View file

@ -39,12 +39,13 @@ const Flash = {
this.player = 'error' this.player = 'error'
}) })
this.ruffleInstance = player this.ruffleInstance = player
this.$emit('playerOpened')
}) })
}, },
closePlayer () { closePlayer () {
console.log(this.ruffleInstance) this.ruffleInstance && this.ruffleInstance.remove()
this.ruffleInstance.remove()
this.player = false this.player = false
this.$emit('playerClosed')
} }
} }
} }

28
src/components/flash/flash.vue
View file

@ -36,13 +36,6 @@
</p> </p>
</span> </span>
</button> </button>
<button
v-if="player"
class="button-unstyled hider"
@click="closePlayer"
>
<FAIcon icon="stop" />
</button>
</div> </div>
</template> </template>
@ -51,8 +44,9 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.Flash { .Flash {
display: inline-block;
width: 100%; width: 100%;
height: 260px; height: 100%;
position: relative; position: relative;
.player { .player {
@ -60,6 +54,16 @@
width: 100%; width: 100%;
} }
.placeholder {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
color: var(--link);
}
.hider { .hider {
top: 0; top: 0;
} }
@ -76,13 +80,5 @@
display: none; display: none;
visibility: 'hidden'; visibility: 'hidden';
} }
.placeholder {
height: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
} }
</style> </style>

5
src/components/follow_button/follow_button.js
View file

@ -1,6 +1,6 @@
import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate' import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
export default { export default {
props: ['relationship', 'labelFollowing', 'buttonClass'], props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
data () { data () {
return { return {
inProgress: false inProgress: false
@ -29,6 +29,9 @@ export default {
} else { } else {
return this.$t('user_card.follow') return this.$t('user_card.follow')
} }
},
disabled () {
return this.inProgress || this.user.deactivated
} }
}, },
methods: { methods: {

2
src/components/follow_button/follow_button.vue
View file

@ -2,7 +2,7 @@
<button <button
class="btn button-default follow-button" class="btn button-default follow-button"
:class="{ toggled: isPressed }" :class="{ toggled: isPressed }"
:disabled="inProgress" :disabled="disabled"
:title="title" :title="title"
@click="onClick" @click="onClick"
> >

1
src/components/follow_card/follow_card.vue
View file

@ -20,6 +20,7 @@
:relationship="relationship" :relationship="relationship"
:label-following="$t('user_card.follow_unfollow')" :label-following="$t('user_card.follow_unfollow')"
class="follow-card-follow-button" class="follow-card-follow-button"
:user="user"
/> />
</template> </template>
</div> </div>

11
src/components/font_control/font_control.js
View file

@ -1,4 +1,4 @@
import { set } from 'vue' import { set } from 'lodash'
import Select from '../select/select.vue' import Select from '../select/select.vue'
export default { export default {
@ -6,11 +6,12 @@ export default {
Select Select
}, },
props: [ props: [
'name', 'label', 'value', 'fallback', 'options', 'no-inherit' 'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
], ],
emits: ['update:modelValue'],
data () { data () {
return { return {
lValue: this.value, lValue: this.modelValue,
availableOptions: [ availableOptions: [
this.noInherit ? '' : 'inherit', this.noInherit ? '' : 'inherit',
'custom', 'custom',
@ -22,7 +23,7 @@ export default {
} }
}, },
beforeUpdate () { beforeUpdate () {
this.lValue = this.value this.lValue = this.modelValue
}, },
computed: { computed: {
present () { present () {
@ -37,7 +38,7 @@ export default {
}, },
set (v) { set (v) {
set(this.lValue, 'family', v) set(this.lValue, 'family', v)
this.$emit('input', this.lValue) this.$emit('update:modelValue', this.lValue)
} }
}, },
isCustom () { isCustom () {

3
src/components/font_control/font_control.vue
View file

@ -15,13 +15,14 @@
class="opt exlcude-disabled" class="opt exlcude-disabled"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@input="$emit('input', typeof value === 'undefined' ? fallback : undefined)" @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
> >
<label <label
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
class="opt-l" class="opt-l"
:for="name + '-o'" :for="name + '-o'"
/> />
{{ ' ' }}
<Select <Select
:id="name + '-font-switcher'" :id="name + '-font-switcher'"
v-model="preset" v-model="preset"

97
src/components/gallery/gallery.js
View file

@ -1,15 +1,26 @@
import Attachment from '../attachment/attachment.vue' import Attachment from '../attachment/attachment.vue'
import { chunk, last, dropRight, sumBy } from 'lodash' import { sumBy, set } from 'lodash'
const Gallery = { const Gallery = {
props: [ props: [
'attachments', 'attachments',
'limitRows',
'descriptions',
'limit',
'nsfw', 'nsfw',
'setMedia' 'setMedia',
'size',
'editable',
'removeAttachment',
'shiftUpAttachment',
'shiftDnAttachment',
'editAttachment',
'grid'
], ],
data () { data () {
return { return {
sizes: {} sizes: {},
hidingLong: true
} }
}, },
components: { Attachment }, components: { Attachment },
@ -18,26 +29,70 @@ const Gallery = {
if (!this.attachments) { if (!this.attachments) {
return [] return []
} }
const rows = chunk(this.attachments, 3) const attachments = this.limit > 0
if (last(rows).length === 1 && rows.length > 1) { ? this.attachments.slice(0, this.limit)
// if 1 attachment on last row -> add it to the previous row instead : this.attachments
const lastAttachment = last(rows)[0] if (this.size === 'hide') {
const allButLastRow = dropRight(rows) return attachments.map(item => ({ minimal: true, items: [item] }))
last(allButLastRow).push(lastAttachment)
return allButLastRow
} }
const rows = this.grid
? [{ grid: true, items: attachments }]
: attachments.reduce((acc, attachment, i) => {
if (attachment.mimetype.includes('audio')) {
return [...acc, { audio: true, items: [attachment] }, { items: [] }]
}
if (!(
attachment.mimetype.includes('image') ||
attachment.mimetype.includes('video') ||
attachment.mimetype.includes('flash')
)) {
return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
}
const maxPerRow = 3
const attachmentsRemaining = this.attachments.length - i + 1
const currentRow = acc[acc.length - 1].items
currentRow.push(attachment)
if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
return [...acc, { items: [] }]
} else {
return acc
}
}, [{ items: [] }]).filter(_ => _.items.length > 0)
return rows return rows
}, },
useContainFit () { attachmentsDimensionalScore () {
return this.$store.getters.mergedConfig.useContainFit return this.rows.reduce((acc, row) => {
let size = 0
if (row.minimal) {
size += 1 / 8
} else if (row.audio) {
size += 1 / 4
} else {
size += 1 / (row.items.length + 0.6)
}
return acc + size
}, 0)
},
tooManyAttachments () {
if (this.editable || this.size === 'small') {
return false
} else if (this.size === 'hide') {
return this.attachments.length > 8
} else {
return this.attachmentsDimensionalScore > 1
}
} }
}, },
methods: { methods: {
onNaturalSizeLoad (id, size) { onNaturalSizeLoad ({ id, width, height }) {
this.$set(this.sizes, id, size) set(this.sizes, id, { width, height })
}, },
rowStyle (itemsPerRow) { rowStyle (row) {
return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` } if (row.audio) {
return { 'padding-bottom': '25%' } // fixed reduced height for audio
} else if (!row.minimal && !row.grid) {
return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
}
}, },
itemStyle (id, row) { itemStyle (id, row) {
const total = sumBy(row, item => this.getAspectRatio(item.id)) const total = sumBy(row, item => this.getAspectRatio(item.id))
@ -46,6 +101,16 @@ const Gallery = {
getAspectRatio (id) { getAspectRatio (id) {
const size = this.sizes[id] const size = this.sizes[id]
return size ? size.width / size.height : 1 return size ? size.width / size.height : 1
},
toggleHidingLong (event) {
this.hidingLong = event
},
openGallery () {
this.$store.dispatch('setMedia', this.attachments)
this.$store.dispatch('setCurrentMedia', this.attachments[0])
},
onMedia () {
this.$store.dispatch('setMedia', this.attachments)
} }
} }
} }

201
src/components/gallery/gallery.vue
View file

@ -1,26 +1,83 @@
<template> <template>
<div <div
ref="galleryContainer" ref="galleryContainer"
style="width: 100%;" class="Gallery"
:class="{ '-long': tooManyAttachments && hidingLong }"
> >
<div class="gallery-rows">
<div
v-for="(row, rowIndex) in rows"
:key="rowIndex"
class="gallery-row"
:style="rowStyle(row)"
:class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
>
<div
class="gallery-row-inner"
:class="{ '-grid': grid }"
>
<Attachment
v-for="(attachment, attachmentIndex) in row.items"
:key="attachment.id"
class="gallery-item"
:nsfw="nsfw"
:attachment="attachment"
:size="size"
:editable="editable"
:remove="removeAttachment"
:shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
:shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
:edit="editAttachment"
:description="descriptions && descriptions[attachment.id]"
:hide-description="size === 'small' || tooManyAttachments && hidingLong"
:style="itemStyle(attachment.id, row.items)"
@setMedia="onMedia"
@naturalSizeLoad="onNaturalSizeLoad"
/>
</div>
</div>
</div>
<div <div
v-for="(row, index) in rows" v-if="tooManyAttachments"
:key="index" class="many-attachments"
class="gallery-row"
:style="rowStyle(row.length)"
:class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
> >
<div class="gallery-row-inner"> <div class="many-attachments-text">
<attachment {{ $t("status.many_attachments", { number: attachments.length }) }}
v-for="attachment in row" </div>
:key="attachment.id" <div class="many-attachments-buttons">
:set-media="setMedia" <span
:nsfw="nsfw" v-if="!hidingLong"
:attachment="attachment" class="many-attachments-button"
:allow-play="false" >
:natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)" <button
:style="itemStyle(attachment.id, row)" class="button-unstyled -link"
/> @click="toggleHidingLong(true)"
>
{{ $t("status.collapse_attachments") }}
</button>
</span>
<span
v-if="hidingLong"
class="many-attachments-button"
>
<button
class="button-unstyled -link"
@click="toggleHidingLong(false)"
>
{{ $t("status.show_all_attachments") }}
</button>
</span>
<span
v-if="hidingLong"
class="many-attachments-button"
>
<button
class="button-unstyled -link"
@click="openGallery"
>
{{ $t("status.open_gallery") }}
</button>
</span>
</div> </div>
</div> </div>
</div> </div>
@ -31,12 +88,66 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.gallery-row { .Gallery {
position: relative; .gallery-rows {
height: 0; display: flex;
width: 100%; flex-direction: column;
flex-grow: 1; }
margin-top: 0.5em;
.gallery-row {
position: relative;
height: 0;
width: 100%;
flex-grow: 1;
&:not(:first-child) {
margin-top: 0.5em;
}
}
&.-long {
.gallery-rows {
max-height: 25em;
overflow: hidden;
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 */
-webkit-mask-composite: xor;
mask-composite: exclude;
}
}
.many-attachments-text {
text-align: center;
line-height: 2;
}
.many-attachments-buttons {
display: flex;
}
.many-attachments-button {
display: flex;
flex: 1;
justify-content: center;
line-height: 2;
button {
padding: 0 2em;
}
}
.gallery-row {
&.-grid,
&.-minimal {
height: auto;
.gallery-row-inner {
position: relative;
}
}
}
.gallery-row-inner { .gallery-row-inner {
position: absolute; position: absolute;
@ -48,9 +159,24 @@
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-content: stretch; align-content: stretch;
&.-grid {
width: 100%;
height: auto;
position: relative;
display: grid;
grid-column-gap: 0.5em;
grid-row-gap: 0.5em;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
.gallery-item {
margin: 0;
height: 200px;
}
}
} }
.gallery-row-inner .attachment { .gallery-item {
margin: 0 0.5em 0 0; margin: 0 0.5em 0 0;
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
@ -61,32 +187,5 @@
margin: 0; margin: 0;
} }
} }
.image-attachment {
width: 100%;
height: 100%;
}
.video-container {
height: 100%;
}
&.contain-fit {
img,
video,
canvas {
object-fit: contain;
height: 100%;
}
}
&.cover-fit {
img,
video,
canvas {
object-fit: cover;
}
}
} }
</style> </style>

11
src/components/global_notice_list/global_notice_list.vue
View file

@ -44,20 +44,18 @@
max-width: calc(100% - 3em); max-width: calc(100% - 3em);
display: flex; display: flex;
padding-left: 1.5em; padding-left: 1.5em;
line-height: 2em; line-height: 2;
margin-bottom: 0.5em;
.notice-message { .notice-message {
flex: 1 1 100%; flex: 1 1 100%;
} }
i {
flex: 0 0;
width: 1.5em;
cursor: pointer;
}
} }
.global-error { .global-error {
background-color: var(--alertPopupError, $fallback--cRed); background-color: var(--alertPopupError, $fallback--cRed);
color: var(--alertPopupErrorText, $fallback--text); color: var(--alertPopupErrorText, $fallback--text);
.svg-inline--fa { .svg-inline--fa {
color: var(--alertPopupErrorText, $fallback--text); color: var(--alertPopupErrorText, $fallback--text);
} }
@ -66,6 +64,7 @@
.global-warning { .global-warning {
background-color: var(--alertPopupWarning, $fallback--cOrange); background-color: var(--alertPopupWarning, $fallback--cOrange);
color: var(--alertPopupWarningText, $fallback--text); color: var(--alertPopupWarningText, $fallback--text);
.svg-inline--fa { .svg-inline--fa {
color: var(--alertPopupWarningText, $fallback--text); color: var(--alertPopupWarningText, $fallback--text);
} }

2
src/components/image_cropper/image_cropper.js
View file

@ -117,7 +117,7 @@ const ImageCropper = {
const fileInput = this.$refs.input const fileInput = this.$refs.input
fileInput.addEventListener('change', this.readFile) fileInput.addEventListener('change', this.readFile)
}, },
beforeDestroy: function () { beforeUnmount: function () {
// remove the event listeners // remove the event listeners
const trigger = this.getTriggerDOM() const trigger = this.getTriggerDOM()
if (trigger) { if (trigger) {

21
src/components/importer/importer.js
View file

@ -15,24 +15,9 @@ const Importer = {
type: Function, type: Function,
required: true required: true
}, },
submitButtonLabel: { submitButtonLabel: { type: String },
type: String, successMessage: { type: String },
default () { errorMessage: { type: String }
return this.$t('importer.submit')
}
},
successMessage: {
type: String,
default () {
return this.$t('importer.success')
}
},
errorMessage: {
type: String,
default () {
return this.$t('importer.error')
}
}
}, },
data () { data () {
return { return {

28
src/components/importer/importer.vue
View file

@ -18,21 +18,31 @@
class="btn button-default" class="btn button-default"
@click="submit" @click="submit"
> >
{{ submitButtonLabel }} {{ submitButtonLabel || $t('importer.submit') }}
</button> </button>
<div v-if="success"> <div v-if="success">
<FAIcon <button
icon="times" class="button-unstyled"
@click="dismiss" @click="dismiss"
/> >
<p>{{ successMessage }}</p> <FAIcon
icon="times"
/>
</button>
{{ ' ' }}
<span>{{ successMessage || $t('importer.success') }}</span>
</div> </div>
<div v-else-if="error"> <div v-else-if="error">
<FAIcon <button
icon="times" class="button-unstyled"
@click="dismiss" @click="dismiss"
/> >
<p>{{ errorMessage }}</p> <FAIcon
icon="times"
/>
</button>
{{ ' ' }}
<span>{{ errorMessage || $t('importer.error') }}</span>
</div> </div>
</div> </div>
</template> </template>

4
src/components/interactions/interactions.js
View file

@ -1,4 +1,5 @@
import Notifications from '../notifications/notifications.vue' import Notifications from '../notifications/notifications.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
const tabModeDict = { const tabModeDict = {
mentions: ['mention'], mentions: ['mention'],
@ -20,7 +21,8 @@ const Interactions = {
} }
}, },
components: { components: {
Notifications Notifications,
TabSwitcher
} }
} }

39
src/components/interface_language_switcher/interface_language_switcher.vue
View file

@ -1,11 +1,12 @@
<template> <template>
<div> <div>
<label for="interface-language-switcher"> <label for="interface-language-switcher">
{{ $t('settings.interfaceLanguage') }} {{ promptText }}
</label> </label>
{{ ' ' }}
<Select <Select
id="interface-language-switcher" id="interface-language-switcher"
v-model="language" v-model="controlledLanguage"
> >
<option <option
v-for="lang in languages" v-for="lang in languages"
@ -19,39 +20,43 @@
</template> </template>
<script> <script>
import languagesObject from '../../i18n/messages'
import localeService from '../../services/locale/locale.service.js' import localeService from '../../services/locale/locale.service.js'
import ISO6391 from 'iso-639-1'
import _ from 'lodash'
import Select from '../select/select.vue' import Select from '../select/select.vue'
export default { export default {
components: { components: {
Select Select
}, },
props: {
promptText: {
type: String,
required: true
},
language: {
type: String,
required: true
},
setLanguage: {
type: Function,
required: true
}
},
computed: { computed: {
languages () { languages () {
return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name)) return localeService.languages
}, },
language: { controlledLanguage: {
get: function () { return this.$store.getters.mergedConfig.interfaceLanguage }, get: function () { return this.language },
set: function (val) { set: function (val) {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) this.setLanguage(val)
} }
} }
}, },
methods: { methods: {
getLanguageName (code) { getLanguageName (code) {
const specialLanguageNames = { return localeService.getLanguageName(code)
'ja_easy': 'やさしいにほんご',
'zh': '简体中文',
'zh_Hant': '繁體中文'
}
const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
const browserLocale = localeService.internalToBrowserLocale(code)
return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
} }
} }
} }

2
src/components/link-preview/link-preview.vue
View file

@ -63,7 +63,7 @@
} }
.card-host { .card-host {
font-size: 12px; font-size: 0.85em;
} }
.card-description { .card-description {

14
src/components/login_form/login_form.vue
View file

@ -76,11 +76,15 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<FAIcon <button
class="fa-scale-110 fa-old-padding" class="button-unstyled"
icon="times"
@click="clearError" @click="clearError"
/> >
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div> </div>
</div> </div>
</div> </div>
@ -97,7 +101,7 @@
padding: 0.6em; padding: 0.6em;
.btn { .btn {
min-height: 28px; min-height: 2em;
width: 10em; width: 10em;
} }

100
src/components/media_modal/media_modal.js
View file

@ -1,24 +1,46 @@
import StillImage from '../still-image/still-image.vue' import StillImage from '../still-image/still-image.vue'
import VideoAttachment from '../video_attachment/video_attachment.vue' import VideoAttachment from '../video_attachment/video_attachment.vue'
import Modal from '../modal/modal.vue' import Modal from '../modal/modal.vue'
import fileTypeService from '../../services/file_type/file_type.service.js' import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
import SwipeClick from '../swipe_click/swipe_click.vue'
import GestureService from '../../services/gesture_service/gesture_service' import GestureService from '../../services/gesture_service/gesture_service'
import Flash from 'src/components/flash/flash.vue'
import fileTypeService from '../../services/file_type/file_type.service.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faChevronLeft, faChevronLeft,
faChevronRight faChevronRight,
faCircleNotch,
faTimes
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faChevronLeft, faChevronLeft,
faChevronRight faChevronRight,
faCircleNotch,
faTimes
) )
const MediaModal = { const MediaModal = {
components: { components: {
StillImage, StillImage,
VideoAttachment, VideoAttachment,
Modal PinchZoom,
SwipeClick,
Modal,
Flash
},
data () {
return {
loading: false,
swipeDirection: GestureService.DIRECTION_LEFT,
swipeThreshold: () => {
const considerableMoveRatio = 1 / 4
return window.innerWidth * considerableMoveRatio
},
pinchZoomMinScale: 1,
pinchZoomScaleResetLimit: 1.2
}
}, },
computed: { computed: {
showing () { showing () {
@ -27,6 +49,9 @@ const MediaModal = {
media () { media () {
return this.$store.state.mediaViewer.media return this.$store.state.mediaViewer.media
}, },
description () {
return this.currentMedia.description
},
currentIndex () { currentIndex () {
return this.$store.state.mediaViewer.currentIndex return this.$store.state.mediaViewer.currentIndex
}, },
@ -37,43 +62,62 @@ const MediaModal = {
return this.media.length > 1 return this.media.length > 1
}, },
type () { type () {
return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null return this.currentMedia ? this.getType(this.currentMedia) : null
} }
}, },
created () {
this.mediaSwipeGestureRight = GestureService.swipeGesture(
GestureService.DIRECTION_RIGHT,
this.goPrev,
50
)
this.mediaSwipeGestureLeft = GestureService.swipeGesture(
GestureService.DIRECTION_LEFT,
this.goNext,
50
)
},
methods: { methods: {
mediaTouchStart (e) { getType (media) {
GestureService.beginSwipe(e, this.mediaSwipeGestureRight) return fileTypeService.fileType(media.mimetype)
GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
},
mediaTouchMove (e) {
GestureService.updateSwipe(e, this.mediaSwipeGestureRight)
GestureService.updateSwipe(e, this.mediaSwipeGestureLeft)
}, },
hide () { hide () {
this.$store.dispatch('closeMediaViewer') // HACK: Closing immediately via a touch will cause the click
// to be processed on the content below the overlay
const transitionTime = 100 // ms
setTimeout(() => {
this.$store.dispatch('closeMediaViewer')
}, transitionTime)
},
hideIfNotSwiped (event) {
// If we have swiped over SwipeClick, do not trigger hide
const comp = this.$refs.swipeClick
if (!comp) {
this.hide()
} else {
comp.$gesture.click(event)
}
}, },
goPrev () { goPrev () {
if (this.canNavigate) { if (this.canNavigate) {
const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1) const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
this.$store.dispatch('setCurrent', this.media[prevIndex]) const newMedia = this.media[prevIndex]
if (this.getType(newMedia) === 'image') {
this.loading = true
}
this.$store.dispatch('setCurrentMedia', newMedia)
} }
}, },
goNext () { goNext () {
if (this.canNavigate) { if (this.canNavigate) {
const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1) const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
this.$store.dispatch('setCurrent', this.media[nextIndex]) const newMedia = this.media[nextIndex]
if (this.getType(newMedia) === 'image') {
this.loading = true
}
this.$store.dispatch('setCurrentMedia', newMedia)
}
},
onImageLoaded () {
this.loading = false
},
handleSwipePreview (offsets) {
this.$refs.pinchZoom.setTransform({ scale: 1, x: offsets[0], y: 0 })
},
handleSwipeEnd (sign) {
this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
if (sign > 0) {
this.goNext()
} else if (sign < 0) {
this.goPrev()
} }
}, },
handleKeyupEvent (e) { handleKeyupEvent (e) {
@ -98,7 +142,7 @@ const MediaModal = {
document.addEventListener('keyup', this.handleKeyupEvent) document.addEventListener('keyup', this.handleKeyupEvent)
document.addEventListener('keydown', this.handleKeydownEvent) document.addEventListener('keydown', this.handleKeydownEvent)
}, },
destroyed () { unmounted () {
window.removeEventListener('popstate', this.hide) window.removeEventListener('popstate', this.hide)
document.removeEventListener('keyup', this.handleKeyupEvent) document.removeEventListener('keyup', this.handleKeyupEvent)
document.removeEventListener('keydown', this.handleKeydownEvent) document.removeEventListener('keydown', this.handleKeydownEvent)

289
src/components/media_modal/media_modal.vue
View file

@ -2,18 +2,38 @@
<Modal <Modal
v-if="showing" v-if="showing"
class="media-modal-view" class="media-modal-view"
@backdropClicked="hide" @backdropClicked="hideIfNotSwiped"
> >
<img <SwipeClick
v-if="type === 'image'" v-if="type === 'image'"
class="modal-image" ref="swipeClick"
:src="currentMedia.url" class="modal-image-container"
:alt="currentMedia.description" :direction="swipeDirection"
:title="currentMedia.description" :threshold="swipeThreshold"
@touchstart.stop="mediaTouchStart" @preview-requested="handleSwipePreview"
@touchmove.stop="mediaTouchMove" @swipe-finished="handleSwipeEnd"
@click="hide" @swipeless-clicked="hide"
> >
<PinchZoom
ref="pinchZoom"
class="modal-image-container-inner"
selector=".modal-image"
reach-min-scale-strategy="reset"
stop-propagate-handled="stop-propgate-handled"
:allow-pan-min-scale="pinchZoomMinScale"
:min-scale="pinchZoomMinScale"
:reset-to-min-scale-limit="pinchZoomScaleResetLimit"
>
<img
:class="{ loading }"
class="modal-image"
:src="currentMedia.url"
:alt="currentMedia.description"
:title="currentMedia.description"
@load="onImageLoaded"
>
</PinchZoom>
</SwipeClick>
<VideoAttachment <VideoAttachment
v-if="type === 'video'" v-if="type === 'video'"
class="modal-image" class="modal-image"
@ -28,38 +48,84 @@
:title="currentMedia.description" :title="currentMedia.description"
controls controls
/> />
<Flash
v-if="type === 'flash'"
class="modal-image"
:src="currentMedia.url"
:alt="currentMedia.description"
:title="currentMedia.description"
/>
<button <button
v-if="canNavigate" v-if="canNavigate"
:title="$t('media_modal.previous')" :title="$t('media_modal.previous')"
class="modal-view-button-arrow modal-view-button-arrow--prev" class="modal-view-button modal-view-button-arrow modal-view-button-arrow--prev"
@click.stop.prevent="goPrev" @click.stop.prevent="goPrev"
> >
<FAIcon <FAIcon
class="arrow-icon" class="button-icon arrow-icon"
icon="chevron-left" icon="chevron-left"
/> />
</button> </button>
<button <button
v-if="canNavigate" v-if="canNavigate"
:title="$t('media_modal.next')" :title="$t('media_modal.next')"
class="modal-view-button-arrow modal-view-button-arrow--next" class="modal-view-button modal-view-button-arrow modal-view-button-arrow--next"
@click.stop.prevent="goNext" @click.stop.prevent="goNext"
> >
<FAIcon <FAIcon
class="arrow-icon" class="button-icon arrow-icon"
icon="chevron-right" icon="chevron-right"
/> />
</button> </button>
<button
class="modal-view-button modal-view-button-hide"
:title="$t('media_modal.hide')"
@click.stop.prevent="hide"
>
<FAIcon
class="button-icon"
icon="times"
/>
</button>
<span
v-if="description"
class="description"
>
{{ description }}
</span>
<span
class="counter"
>
{{ $tc('media_modal.counter', currentIndex + 1, { current: currentIndex + 1, total: media.length }) }}
</span>
<span
v-if="loading"
class="loading-spinner"
>
<FAIcon
spin
icon="circle-notch"
size="5x"
/>
</span>
</Modal> </Modal>
</template> </template>
<script src="./media_modal.js"></script> <script src="./media_modal.js"></script>
<style lang="scss"> <style lang="scss">
.modal-view.media-modal-view { $modal-view-button-icon-height: 3em;
z-index: 1001; $modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
$modal-view-button-icon-width: 3em;
$modal-view-button-icon-margin: 0.5em;
.modal-view-button-arrow { .modal-view.media-modal-view {
z-index: 9000;
flex-direction: column;
.modal-view-button-arrow,
.modal-view-button-hide {
opacity: 0.75; opacity: 0.75;
&:focus, &:focus,
@ -67,69 +133,154 @@
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
} }
overflow: hidden;
} }
@keyframes media-fadein { .media-modal-view {
from { @keyframes media-fadein {
opacity: 0; from {
} opacity: 0;
to { }
opacity: 1; to {
} opacity: 1;
}
.modal-image {
max-width: 90%;
max-height: 90%;
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
image-orientation: from-image; // NOTE: only FF supports this
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
}
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
border: 0;
padding: 0;
opacity: 0;
box-shadow: none;
background: none;
appearance: none;
overflow: visible;
cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
.arrow-icon {
position: absolute;
top: 35px;
height: 30px;
width: 32px;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
}
&--prev {
left: 0;
.arrow-icon {
left: 6px;
} }
} }
&--next { .modal-image-container {
right: 0; display: flex;
overflow: hidden;
align-items: center;
flex-direction: column;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
flex-grow: 1;
justify-content: center;
&-inner {
width: 100%;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.description,
.counter {
/* Hardcoded since background is also hardcoded */
color: white;
margin-top: 1em;
text-shadow: 0 0 10px black, 0 0 10px black;
padding: 0.2em 2em;
}
.description {
flex: 0 0 auto;
overflow-y: auto;
min-height: 1em;
max-width: 500px;
max-height: 9.5em;
word-break: break-all;
}
.modal-image {
max-width: 100%;
max-height: 100%;
image-orientation: from-image; // NOTE: only FF supports this
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
&.loading {
opacity: 0.5;
}
}
.loading-spinner {
width: 100%;
height: 100%;
position: absolute;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
svg {
color: white;
}
}
.modal-view-button {
border: 0;
padding: 0;
opacity: 0;
box-shadow: none;
background: none;
appearance: none;
overflow: visible;
cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
height: $modal-view-button-icon-height;
width: $modal-view-button-icon-width;
.button-icon {
position: absolute;
height: $modal-view-button-icon-height;
width: $modal-view-button-icon-width;
font-size: 1rem;
line-height: $modal-view-button-icon-height;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
}
}
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: $modal-view-button-icon-half-height;
width: $modal-view-button-icon-width;
height: $modal-view-button-icon-height;
.arrow-icon { .arrow-icon {
right: 6px; position: absolute;
top: 0;
line-height: $modal-view-button-icon-height;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
}
&--prev {
left: 0;
.arrow-icon {
left: $modal-view-button-icon-margin;
}
}
&--next {
right: 0;
.arrow-icon {
right: $modal-view-button-icon-margin;
}
}
}
.modal-view-button-hide {
position: absolute;
top: 0;
right: 0;
.button-icon {
top: $modal-view-button-icon-margin;
right: $modal-view-button-icon-margin;
} }
} }
} }

8
src/components/media_upload/media_upload.vue
View file

@ -17,9 +17,9 @@
/> />
<input <input
v-if="uploadReady" v-if="uploadReady"
class="hidden-input-file"
:disabled="disabled" :disabled="disabled"
type="file" type="file"
style="position: fixed; top: -100em"
multiple="true" multiple="true"
@change="change" @change="change"
> >
@ -32,6 +32,10 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.media-upload { .media-upload {
cursor: pointer; cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
.hidden-input-file {
display: none;
}
} }
</style> </style>

41
src/components/mention_link/mention_link.js
View file

@ -1,6 +1,7 @@
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters, mapState } from 'vuex' import { mapGetters, mapState } from 'vuex'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import UserAvatar from '../user_avatar/user_avatar.vue'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faAt faAt
@ -12,6 +13,9 @@ library.add(
const MentionLink = { const MentionLink = {
name: 'MentionLink', name: 'MentionLink',
components: {
UserAvatar
},
props: { props: {
url: { url: {
required: true, required: true,
@ -50,6 +54,10 @@ const MentionLink = {
userName () { userName () {
return this.user && this.userNameFullUi.split('@')[0] return this.user && this.userNameFullUi.split('@')[0]
}, },
serverName () {
// XXX assumed that domain does not contain @
return this.user && (this.userNameFullUi.split('@')[1] || this.$store.getters.instanceDomain)
},
userNameFull () { userNameFull () {
return this.user && this.user.screen_name return this.user && this.user.screen_name
}, },
@ -79,12 +87,43 @@ const MentionLink = {
classnames () { classnames () {
return [ return [
{ {
'-you': this.isYou, '-you': this.isYou && this.shouldBoldenYou,
'-highlighted': this.highlight '-highlighted': this.highlight
}, },
this.highlightType this.highlightType
] ]
}, },
useAtIcon () {
return this.mergedConfig.useAtIcon
},
isRemote () {
return this.userName !== this.userNameFull
},
shouldShowFullUserName () {
const conf = this.mergedConfig.mentionLinkDisplay
if (conf === 'short') {
return false
} else if (conf === 'full') {
return true
} else { // full_for_remote
return this.isRemote
}
},
shouldShowTooltip () {
return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
},
shouldShowAvatar () {
return this.mergedConfig.mentionLinkShowAvatar
},
shouldShowYous () {
return this.mergedConfig.mentionLinkShowYous
},
shouldBoldenYou () {
return this.mergedConfig.mentionLinkBoldenYou
},
shouldFadeDomain () {
return this.mergedConfig.mentionLinkFadeDomain
},
...mapGetters(['mergedConfig']), ...mapGetters(['mergedConfig']),
...mapState({ ...mapState({
currentUser: state => state.users.currentUser currentUser: state => state.users.currentUser

38
src/components/mention_link/mention_link.scss
View file

@ -1,15 +1,27 @@
@import '../../_variables.scss';
.MentionLink { .MentionLink {
position: relative; position: relative;
white-space: normal; white-space: normal;
display: inline-block; display: inline;
color: var(--link); color: var(--link);
word-break: normal;
& .new, & .new,
& .original { & .original {
display: inline-block; display: inline;
border-radius: 2px; border-radius: 2px;
} }
.mention-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
width: 1.5em;
height: 1.5em;
vertical-align: middle;
user-select: none;
margin-right: 0.2em;
}
.full { .full {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
@ -27,7 +39,8 @@
user-select: all; user-select: all;
} }
.short { & .short.-with-tooltip,
& .you {
user-select: none; user-select: none;
} }
@ -36,6 +49,10 @@
white-space: nowrap; white-space: nowrap;
} }
.shortName {
white-space: normal;
}
.new { .new {
&.-you { &.-you {
& .shortName, & .shortName,
@ -48,7 +65,6 @@
color: var(--link); color: var(--link);
opacity: 0.8; opacity: 0.8;
display: inline-block; display: inline-block;
height: 50%;
line-height: 1; line-height: 1;
padding: 0 0.1em; padding: 0 0.1em;
vertical-align: -25%; vertical-align: -25%;
@ -56,7 +72,7 @@
} }
&.-striped { &.-striped {
& .userName, & .shortName,
& .full { & .full {
background-image: background-image:
repeating-linear-gradient( repeating-linear-gradient(
@ -70,14 +86,14 @@
} }
&.-solid { &.-solid {
& .userName, & .shortName,
& .full { & .full {
background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2)); background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
} }
} }
&.-side { &.-side {
& .userName, & .shortName,
& .userNameFull { & .userNameFull {
box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor); box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
} }
@ -88,4 +104,12 @@
opacity: 1; opacity: 1;
pointer-events: initial; pointer-events: initial;
} }
.serverName.-faded {
color: var(--faintLink, $fallback--link);
}
.full .-faded {
color: var(--faint, $fallback--faint);
}
} }

38
src/components/mention_link/mention_link.vue
View file

@ -9,9 +9,7 @@
class="original" class="original"
target="_blank" target="_blank"
v-html="content" v-html="content"
/> /><!-- eslint-enable vue/no-v-html --><span
<!-- eslint-enable vue/no-v-html -->
<span
v-if="user" v-if="user"
class="new" class="new"
:style="style" :style="style"
@ -19,6 +17,7 @@
> >
<a <a
class="short button-unstyled" class="short button-unstyled"
:class="{ '-with-tooltip': shouldShowTooltip }"
:href="url" :href="url"
@click.prevent="onClick" @click.prevent="onClick"
> >
@ -26,22 +25,37 @@
<span class="shortName">@<span <span class="shortName">@<span
class="userName" class="userName"
v-html="userName" v-html="userName"
/></span> /><span
v-if="shouldShowFullUserName"
class="serverName"
:class="{ '-faded': shouldFadeDomain }"
v-html="'@' + serverName"
/>
</span>
<span <span
v-if="isYou" v-if="isYou && shouldShowYous"
class="you" :class="{ '-you': shouldBoldenYou }"
>{{ $t('status.you') }}</span> > {{ ' ' + $t('status.you') }}</span>
<!-- eslint-enable vue/no-v-html --> <!-- eslint-enable vue/no-v-html -->
</a> </a><span
<span v-if="shouldShowTooltip"
v-if="userName !== userNameFull"
class="full popover-default" class="full popover-default"
:class="[highlightType]" :class="[highlightType]"
> >
<span <span
class="userNameFull" class="userNameFull"
v-text="'@' + userNameFull" >
/> <!-- eslint-disable vue/no-v-html -->
@<span
class="userName"
v-html="userName"
/><span
class="serverName"
:class="{ '-faded': shouldFadeDomain }"
v-html="'@' + serverName"
/>
<!-- eslint-enable vue/no-v-html -->
</span>
</span> </span>
</span> </span>
</span> </span>

12
src/components/mentions_line/mentions_line.scss
View file

@ -1,11 +1,13 @@
.MentionsLine { .MentionsLine {
word-break: break-all;
.mention-link:not(:first-child)::before {
content: ' ';
}
.showMoreLess { .showMoreLess {
margin-left: 0.5em;
white-space: normal; white-space: normal;
color: var(--link); color: var(--link);
} }
.fullExtraMentions,
.mention-link:not(:last-child) {
margin-right: 0.25em;
}
} }

2
src/components/mentions_line/mentions_line.vue
View file

@ -6,7 +6,6 @@
class="mention-link" class="mention-link"
:content="mention.content" :content="mention.content"
:url="mention.url" :url="mention.url"
:first-mention="false"
/><span /><span
v-if="manyMentions" v-if="manyMentions"
class="extraMentions" class="extraMentions"
@ -21,7 +20,6 @@
class="mention-link" class="mention-link"
:content="mention.content" :content="mention.content"
:url="mention.url" :url="mention.url"
:first-mention="false"
/> />
</span><button </span><button
v-if="!expanded" v-if="!expanded"

12
src/components/mfa_form/recovery_form.vue
View file

@ -56,11 +56,15 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<FAIcon <button
class="fa-scale-110 fa-old-padding" class="button-unstyled"
icon="times"
@click="clearError" @click="clearError"
/> >
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div> </div>
</div> </div>
</div> </div>

14
src/components/mfa_form/totp_form.vue
View file

@ -58,12 +58,16 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<FAIcon <button
size="lg" class="button-unstyled"
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError" @click="clearError"
/> >
<FAIcon
size="lg"
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div> </div>
</div> </div>
</div> </div>

3
src/components/mobile_nav/mobile_nav.js
View file

@ -78,7 +78,8 @@ const MobileNav = {
this.$store.dispatch('logout') this.$store.dispatch('logout')
}, },
markNotificationsAsSeen () { markNotificationsAsSeen () {
this.$refs.notifications.markAsSeen() // this.$refs.notifications.markAsSeen()
this.$store.dispatch('markNotificationsAsSeen')
}, },
onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) { onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
if (scrollTop + clientHeight >= scrollHeight) { if (scrollTop + clientHeight >= scrollHeight) {

20
src/components/mobile_nav/mobile_nav.vue
View file

@ -5,7 +5,6 @@
<nav <nav
id="nav" id="nav"
class="mobile-nav" class="mobile-nav"
:class="{ 'mobile-hidden': isChat }"
@click="scrollToTop()" @click="scrollToTop()"
> >
<div class="item"> <div class="item">
@ -51,7 +50,7 @@
<div <div
v-if="currentUser" v-if="currentUser"
class="mobile-notifications-drawer" class="mobile-notifications-drawer"
:class="{ 'closed': !notificationsOpen }" :class="{ '-closed': !notificationsOpen }"
@touchstart.stop="notificationsTouchStart" @touchstart.stop="notificationsTouchStart"
@touchmove.stop="notificationsTouchMove" @touchmove.stop="notificationsTouchMove"
> >
@ -69,12 +68,9 @@
</div> </div>
<div <div
class="mobile-notifications" class="mobile-notifications"
id="mobile-notifications"
@scroll="onScroll" @scroll="onScroll"
> >
<Notifications
ref="notifications"
:no-heading="true"
/>
</div> </div>
</div> </div>
<SideDrawer <SideDrawer
@ -92,13 +88,14 @@
.MobileNav { .MobileNav {
.mobile-nav { .mobile-nav {
display: grid; display: grid;
line-height: 50px; line-height: var(--navbar-height);
height: 50px;
grid-template-rows: 50px; grid-template-rows: 50px;
grid-template-columns: 2fr auto; grid-template-columns: 2fr auto;
width: 100%; width: 100%;
position: fixed;
box-sizing: border-box; box-sizing: border-box;
a {
color: var(--topBarLink, $fallback--link);
}
} }
.mobile-inner-nav { .mobile-inner-nav {
@ -153,8 +150,9 @@
z-index: 1001; z-index: 1001;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&.closed { &.-closed {
transform: translateX(100%); transform: translateX(100%);
box-shadow: none;
} }
} }
@ -182,7 +180,7 @@
.mobile-notifications { .mobile-notifications {
margin-top: 50px; margin-top: 50px;
width: 100vw; width: 100vw;
height: calc(100vh - 50px); height: calc(100vh - var(--navbar-height));
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;

4
src/components/mobile_post_status_button/mobile_post_status_button.js
View file

@ -29,7 +29,7 @@ const MobilePostStatusButton = {
} }
window.addEventListener('resize', this.handleOSK) window.addEventListener('resize', this.handleOSK)
}, },
destroyed () { unmounted () {
if (this.autohideFloatingPostButton) { if (this.autohideFloatingPostButton) {
this.deactivateFloatingPostButtonAutohide() this.deactivateFloatingPostButtonAutohide()
} }
@ -45,7 +45,7 @@ const MobilePostStatusButton = {
return this.autohideFloatingPostButton && (this.hidden || this.inputActive) return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
}, },
isPersistent () { isPersistent () {
return !!this.$store.getters.mergedConfig.showNewPostButton return !!this.$store.getters.mergedConfig.alwaysShowNewPostButton
}, },
autohideFloatingPostButton () { autohideFloatingPostButton () {
return !!this.$store.getters.mergedConfig.autohideFloatingPostButton return !!this.$store.getters.mergedConfig.autohideFloatingPostButton

55
src/components/mobile_post_status_button/mobile_post_status_button.vue
View file

@ -1,13 +1,12 @@
<template> <template>
<div v-if="isLoggedIn"> <button
<button v-if="isLoggedIn"
class="button-default new-status-button" class="MobilePostButton button-default new-status-button"
:class="{ 'hidden': isHidden, 'always-show': isPersistent }" :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
@click="openPostForm" @click="openPostForm"
> >
<FAIcon icon="pen" /> <FAIcon icon="pen" />
</button> </button>
</div>
</template> </template>
<script src="./mobile_post_status_button.js"></script> <script src="./mobile_post_status_button.js"></script>
@ -15,25 +14,27 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.new-status-button { .MobilePostButton {
width: 5em; &.button-default {
height: 5em; width: 5em;
border-radius: 100%; height: 5em;
position: fixed; border-radius: 100%;
bottom: 1.5em; position: fixed;
right: 1.5em; bottom: 1.5em;
// TODO: this needs its own color, it has to stand out enough and link color right: 1.5em;
// is not very optimal for this particular use. // TODO: this needs its own color, it has to stand out enough and link color
background-color: $fallback--fg; // is not very optimal for this particular use.
background-color: var(--btn, $fallback--fg); background-color: $fallback--fg;
display: flex; background-color: var(--btn, $fallback--fg);
justify-content: center; display: flex;
align-items: center; justify-content: center;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3); align-items: center;
z-index: 10; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
z-index: 10;
transition: 0.35s transform; transition: 0.35s transform;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
&.hidden { &.hidden {
transform: translateY(150%); transform: translateY(150%);

2
src/components/modal/modal.vue
View file

@ -35,7 +35,7 @@ export default {
<style lang="scss"> <style lang="scss">
.modal-view { .modal-view {
z-index: 1000; z-index: 2000;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;

4
src/components/moderation_tools/moderation_tools.vue
View file

@ -132,7 +132,7 @@
</button> </button>
</template> </template>
</Popover> </Popover>
<portal to="modal"> <teleport to="#modal">
<DialogModal <DialogModal
v-if="showDeleteUserDialog" v-if="showDeleteUserDialog"
:on-cancel="deleteUserDialog.bind(this, false)" :on-cancel="deleteUserDialog.bind(this, false)"
@ -156,7 +156,7 @@
</button> </button>
</template> </template>
</DialogModal> </DialogModal>
</portal> </teleport>
</div> </div>
</template> </template>

13
src/components/notification/notification.scss
View file

@ -2,7 +2,18 @@
// TODO Copypaste from Status, should unify it somehow // TODO Copypaste from Status, should unify it somehow
.Notification { .Notification {
--emoji-size: 14px; border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
word-wrap: break-word;
word-break: break-word;
--emoji-size: 14px;
&:hover {
--_still-image-img-visibility: visible;
--_still-image-canvas-visibility: hidden;
--_still-image-label-visibility: hidden;
}
&.-muted { &.-muted {
padding: 0.25em 0.6em; padding: 0.25em 0.6em;

55
src/components/notification/notification.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<Status <Status
v-if="notification.type === 'mention'" v-if="notification.type === 'mention'"
class="Notification"
:compact="true" :compact="true"
:statusoid="notification.status" :statusoid="notification.status"
/> />
@ -32,7 +33,7 @@
> >
<a <a
class="avatar-container" class="avatar-container"
:href="notification.from_profile.statusnet_profile_url" :href="$router.resolve(userProfileLink).href"
@click.stop.prevent.capture="toggleUserExpanded" @click.stop.prevent.capture="toggleUserExpanded"
> >
<UserAvatar <UserAvatar
@ -64,12 +65,16 @@
v-else v-else
class="username" class="username"
:title="'@'+notification.from_profile.screen_name_ui" :title="'@'+notification.from_profile.screen_name_ui"
>{{ notification.from_profile.name }}</span> >
{{ notification.from_profile.name }}
</span>
{{ ' ' }}
<span v-if="notification.type === 'like'"> <span v-if="notification.type === 'like'">
<FAIcon <FAIcon
class="type-icon" class="type-icon"
icon="star" icon="star"
/> />
{{ ' ' }}
<small>{{ $t('notifications.favorited_you') }}</small> <small>{{ $t('notifications.favorited_you') }}</small>
</span> </span>
<span v-if="notification.type === 'repeat'"> <span v-if="notification.type === 'repeat'">
@ -78,6 +83,7 @@
icon="retweet" icon="retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
{{ ' ' }}
<small>{{ $t('notifications.repeated_you') }}</small> <small>{{ $t('notifications.repeated_you') }}</small>
</span> </span>
<span v-if="notification.type === 'follow'"> <span v-if="notification.type === 'follow'">
@ -85,6 +91,7 @@
class="type-icon" class="type-icon"
icon="user-plus" icon="user-plus"
/> />
{{ ' ' }}
<small>{{ $t('notifications.followed_you') }}</small> <small>{{ $t('notifications.followed_you') }}</small>
</span> </span>
<span v-if="notification.type === 'follow_request'"> <span v-if="notification.type === 'follow_request'">
@ -92,6 +99,7 @@
class="type-icon" class="type-icon"
icon="user" icon="user"
/> />
{{ ' ' }}
<small>{{ $t('notifications.follow_request') }}</small> <small>{{ $t('notifications.follow_request') }}</small>
</span> </span>
<span v-if="notification.type === 'move'"> <span v-if="notification.type === 'move'">
@ -99,15 +107,27 @@
class="type-icon" class="type-icon"
icon="suitcase-rolling" icon="suitcase-rolling"
/> />
{{ ' ' }}
<small>{{ $t('notifications.migrated_to') }}</small> <small>{{ $t('notifications.migrated_to') }}</small>
</span> </span>
<span v-if="notification.type === 'pleroma:emoji_reaction'"> <span v-if="notification.type === 'pleroma:emoji_reaction'">
<small> <small>
<i18n path="notifications.reacted_with"> <i18n-t
scope="global"
keypath="notifications.reacted_with"
>
<span class="emoji-reaction-emoji">{{ notification.emoji }}</span> <span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
</i18n> </i18n-t>
</small> </small>
</span> </span>
<span v-if="notification.type === 'poll'">
<FAIcon
class="type-icon"
icon="poll-h"
/>
{{ ' ' }}
<small>{{ $t('notifications.poll_ended') }}</small>
</span>
</div> </div>
<div <div
v-if="isStatusNotification" v-if="isStatusNotification"
@ -160,18 +180,26 @@
v-if="notification.type === 'follow_request'" v-if="notification.type === 'follow_request'"
style="white-space: nowrap;" style="white-space: nowrap;"
> >
<FAIcon <button
icon="check" class="button-unstyled"
class="fa-scale-110 fa-old-padding follow-request-accept"
:title="$t('tool_tip.accept_follow_request')" :title="$t('tool_tip.accept_follow_request')"
@click="approveUser()" @click="approveUser()"
/> >
<FAIcon <FAIcon
icon="times" icon="check"
class="fa-scale-110 fa-old-padding follow-request-reject" class="fa-scale-110 fa-old-padding follow-request-accept"
/>
</button>
<button
class="button-unstyled"
:title="$t('tool_tip.reject_follow_request')" :title="$t('tool_tip.reject_follow_request')"
@click="denyUser()" @click="denyUser()"
/> >
<FAIcon
icon="times"
class="fa-scale-110 fa-old-padding follow-request-reject"
/>
</button>
</div> </div>
</div> </div>
<div <div
@ -183,8 +211,9 @@
</router-link> </router-link>
</div> </div>
<template v-else> <template v-else>
<status-content <StatusContent
class="faint" class="faint"
:compact="true"
:status="notification.action" :status="notification.action"
/> />
</template> </template>

22
src/components/notifications/notification_filters.vue
View file

@ -61,10 +61,19 @@
:class="{ 'menu-checkbox-checked': filters.moves }" :class="{ 'menu-checkbox-checked': filters.moves }"
/>{{ $t('settings.notification_visibility_moves') }} />{{ $t('settings.notification_visibility_moves') }}
</button> </button>
<button
class="button-default dropdown-item"
@click="toggleNotificationFilter('polls')"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.polls }"
/>{{ $t('settings.notification_visibility_polls') }}
</button>
</div> </div>
</template> </template>
<template v-slot:trigger> <template v-slot:trigger>
<button class="button-unstyled"> <button class="filter-trigger-button button-unstyled">
<FAIcon icon="filter" /> <FAIcon icon="filter" />
</button> </button>
</template> </template>
@ -107,15 +116,14 @@ export default {
align-self: stretch; align-self: stretch;
> button { > button {
font-size: 1.2em;
padding-left: 0.7em;
padding-right: 0.2em;
line-height: 100%; line-height: 100%;
height: 100%; height: 100%;
} width: var(--__panel-heading-height-inner);
text-align: center;
.dropdown-item { svg {
margin: 0; font-size: 1.2em;
}
} }
} }

18
src/components/notifications/notifications.js
View file

@ -23,13 +23,13 @@ const Notifications = {
NotificationFilters NotificationFilters
}, },
props: { props: {
// Disables display of panel header
noHeading: Boolean,
// Disables panel styles, unread mark, potentially other notification-related actions // Disables panel styles, unread mark, potentially other notification-related actions
// meant for "Interactions" timeline // meant for "Interactions" timeline
minimalMode: Boolean, minimalMode: Boolean,
// Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline // Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
filterMode: Array filterMode: Array,
// Disable teleporting (i.e. for /users/user/notifications)
disableTeleport: Boolean
}, },
data () { data () {
return { return {
@ -65,6 +65,18 @@ const Notifications = {
loading () { loading () {
return this.$store.state.statuses.notifications.loading return this.$store.state.statuses.notifications.loading
}, },
noHeading () {
const { layoutType } = this.$store.state.interface
return this.minimalMode || layoutType === 'mobile'
},
teleportTarget () {
const { layoutType } = this.$store.state.interface
const map = {
wide: '#notifs-column',
mobile: '#mobile-notifications'
}
return map[layoutType] || '#notifs-sidebar'
},
notificationsToDisplay () { notificationsToDisplay () {
return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount) return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
}, },

28
src/components/notifications/notifications.scss
View file

@ -11,10 +11,6 @@
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
.notifications-footer {
border: none;
}
.notification { .notification {
position: relative; position: relative;
@ -37,11 +33,6 @@
.notification { .notification {
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
word-wrap: break-word;
word-break: break-word;
&:hover .animated.Avatar { &:hover .animated.Avatar {
canvas { canvas {
@ -52,6 +43,10 @@
} }
} }
&:last-child .Notification {
border-bottom: none;
}
.non-mention { .non-mention {
display: flex; display: flex;
flex: 1; flex: 1;
@ -69,8 +64,6 @@
} }
.follow-request-accept { .follow-request-accept {
cursor: pointer;
&:hover { &:hover {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
@ -78,8 +71,6 @@
} }
.follow-request-reject { .follow-request-reject {
cursor: pointer;
&:hover { &:hover {
color: $fallback--cRed; color: $fallback--cRed;
color: var(--cRed, $fallback--cRed); color: var(--cRed, $fallback--cRed);
@ -122,13 +113,13 @@
} }
.emoji-reaction-emoji { .emoji-reaction-emoji {
font-size: 16px; font-size: 1.3em;
} }
.notification-details { .notification-details {
min-width: 0px; min-width: 0;
word-wrap: break-word; word-wrap: break-word;
line-height:18px; line-height: var(--post-line-height);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@ -151,7 +142,7 @@
} }
.timeago { .timeago {
margin-right: .2em; margin-right: 0.2em;
} }
.status-content { .status-content {
@ -164,7 +155,8 @@
margin: 0 0 0.3em; margin: 0 0 0.3em;
padding: 0; padding: 0;
font-size: 1em; font-size: 1em;
line-height:20px; line-height: 1.5;
small { small {
font-weight: lighter; font-weight: lighter;
} }

120
src/components/notifications/notifications.vue
View file

@ -1,69 +1,71 @@
<template> <template>
<div <teleport :disabled="minimalMode || disableTeleport" :to="teleportTarget">
:class="{ minimal: minimalMode }" <div
class="Notifications" :class="{ minimal: minimalMode }"
> class="Notifications"
<div :class="mainClass"> >
<div <div :class="mainClass">
v-if="!noHeading"
class="panel-heading"
>
<div class="title">
{{ $t('notifications.notifications') }}
<span
v-if="unseenCount"
class="badge badge-notification unseen-count"
>{{ unseenCount }}</span>
</div>
<button
v-if="unseenCount"
class="button-default read-button"
@click.prevent="markAsSeen"
>
{{ $t('notifications.read') }}
</button>
<NotificationFilters />
</div>
<div class="panel-body">
<div <div
v-for="notification in notificationsToDisplay" v-if="!noHeading"
:key="notification.id" class="notifications-heading panel-heading -sticky"
class="notification"
:class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
> >
<div class="notification-overlay" /> <div class="title">
<notification :notification="notification" /> {{ $t('notifications.notifications') }}
</div> <span
</div> v-if="unseenCount"
<div class="panel-footer notifications-footer"> class="badge badge-notification unseen-count"
<div >{{ unseenCount }}</span>
v-if="bottomedOut" </div>
class="new-status-notification text-center faint" <button
> v-if="unseenCount"
{{ $t('notifications.no_more_notifications') }} class="button-default read-button"
</div> @click.prevent="markAsSeen"
<button >
v-else-if="!loading" {{ $t('notifications.read') }}
class="button-unstyled -link -fullwidth" </button>
@click.prevent="fetchOlderNotifications()" <NotificationFilters />
> </div>
<div class="new-status-notification text-center"> <div class="panel-body">
{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }} <div
v-for="notification in notificationsToDisplay"
:key="notification.id"
class="notification"
:class="{unseen: !minimalMode && !notification.seen}"
>
<div class="notification-overlay" />
<notification :notification="notification" />
</div>
</div>
<div class="panel-footer">
<div
v-if="bottomedOut"
class="new-status-notification text-center faint"
>
{{ $t('notifications.no_more_notifications') }}
</div>
<button
v-else-if="!loading"
class="button-unstyled -link -fullwidth"
@click.prevent="fetchOlderNotifications()"
>
<div class="new-status-notification text-center">
{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
</div>
</button>
<div
v-else
class="new-status-notification text-center"
>
<FAIcon
icon="circle-notch"
spin
size="lg"
/>
</div> </div>
</button>
<div
v-else
class="new-status-notification text-center"
>
<FAIcon
icon="circle-notch"
spin
size="lg"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </teleport>
</template> </template>
<script src="./notifications.js"></script> <script src="./notifications.js"></script>

13
src/components/opacity_input/opacity_input.vue
View file

@ -11,21 +11,21 @@
</label> </label>
<Checkbox <Checkbox
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
:checked="present" :model-value="present"
:disabled="disabled" :disabled="disabled"
class="opt" class="opt"
@change="$emit('input', !present ? fallback : undefined)" @update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
/> />
<input <input
:id="name" :id="name"
class="input-number" class="input-number"
type="number" type="number"
:value="value || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
max="1" max="1"
min="0" min="0"
step=".05" step=".05"
@input="$emit('input', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >
</div> </div>
</template> </template>
@ -37,11 +37,12 @@ export default {
Checkbox Checkbox
}, },
props: [ props: [
'name', 'value', 'fallback', 'disabled' 'name', 'modelValue', 'fallback', 'disabled'
], ],
emits: ['update:modelValue'],
computed: { computed: {
present () { present () {
return typeof this.value !== 'undefined' return typeof this.modelValue !== 'undefined'
} }
} }
} }

10
src/components/password_reset/password_reset.vue
View file

@ -91,14 +91,18 @@
flex-direction: column; flex-direction: column;
margin-top: 0.6em; margin-top: 0.6em;
max-width: 18rem; max-width: 18rem;
> * {
min-width: 0;
}
} }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 1em; margin-bottom: 1em;
padding: 0.3em 0.0em 0.3em; padding: 0.3em 0;
line-height: 24px; line-height: 1.85em;
} }
.error { .error {
@ -110,7 +114,7 @@
.alert { .alert {
padding: 0.5em; padding: 0.5em;
margin: 0.3em 0.0em 1em; margin: 0.3em 0 1em;
} }
.password-reset-required { .password-reset-required {

13
src/components/pinch_zoom/pinch_zoom.js Normal file
View file

@ -0,0 +1,13 @@
import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
export default {
methods: {
setTransform ({ scale, x, y }) {
this.$el.setTransform({ scale, x, y })
}
},
created () {
// Make lint happy
(() => PinchZoom)()
}
}

11
src/components/pinch_zoom/pinch_zoom.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<pinch-zoom
class="pinch-zoom-parent"
v-bind="$attrs"
v-on="$listeners"
>
<slot />
</pinch-zoom>
</template>
<script src="./pinch_zoom.js"></script>

2
src/components/poll/poll.js
View file

@ -21,7 +21,7 @@ export default {
} }
this.$store.dispatch('trackPoll', this.pollId) this.$store.dispatch('trackPoll', this.pollId)
}, },
destroyed () { unmounted () {
this.$store.dispatch('untrackPoll', this.pollId) this.$store.dispatch('untrackPoll', this.pollId)
}, },
computed: { computed: {

19
src/components/poll/poll.vue
View file

@ -71,13 +71,18 @@
{{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp; {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
</template> </template>
</div> </div>
<i18n :path="expired ? 'polls.expired' : 'polls.expires_in'"> <span>
<Timeago <i18n-t
:time="expiresAt" scope="global"
:auto-update="60" :keypath="expired ? 'polls.expired' : 'polls.expires_in'"
:now-threshold="0" >
/> <Timeago
</i18n> :time="expiresAt"
:auto-update="60"
:now-threshold="0"
/>
</i18n-t>
</span>
</div> </div>
</div> </div>
</template> </template>

1
src/components/poll/poll_form.vue
View file

@ -72,6 +72,7 @@
:max="maxExpirationInCurrentUnit" :max="maxExpirationInCurrentUnit"
@change="expiryAmountChange" @change="expiryAmountChange"
> >
{{ ' ' }}
<Select <Select
v-model="expiryUnit" v-model="expiryUnit"
unstyled="true" unstyled="true"

2
src/components/popover/popover.js
View file

@ -178,7 +178,7 @@ const Popover = {
created () { created () {
document.addEventListener('click', this.onClickOutside) document.addEventListener('click', this.onClickOutside)
}, },
destroyed () { unmounted () {
document.removeEventListener('click', this.onClickOutside) document.removeEventListener('click', this.onClickOutside)
this.hidePopover() this.hidePopover()
} }

69
src/components/popover/popover.vue
View file

@ -5,7 +5,7 @@
> >
<button <button
ref="trigger" ref="trigger"
class="button-unstyled -fullwidth popover-trigger-button" class="button-unstyled popover-trigger-button"
type="button" type="button"
@click="onClick" @click="onClick"
> >
@ -33,11 +33,11 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.popover-trigger-button { .popover-trigger-button {
display: block; display: inline-block;
} }
.popover { .popover {
z-index: 8; z-index: 500;
position: absolute; position: absolute;
min-width: 0; min-width: 0;
} }
@ -45,8 +45,19 @@
.popover-default { .popover-default {
transition: opacity 0.3s; transition: opacity 0.3s;
box-shadow: 1px 1px 4px rgba(0,0,0,.6); &:after {
box-shadow: var(--panelShadow); content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--panelShadow);
pointer-events: none;
}
border-radius: $fallback--btnRadius; border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius); border-radius: var(--btnRadius, $fallback--btnRadius);
@ -65,11 +76,11 @@
.dropdown-menu { .dropdown-menu {
display: block; display: block;
padding: .5rem 0; padding: .5rem 0;
font-size: 1rem; font-size: 1em;
text-align: left; text-align: left;
list-style: none; list-style: none;
max-width: 100vw; max-width: 100vw;
z-index: 10; z-index: 200;
white-space: nowrap; white-space: nowrap;
.dropdown-divider { .dropdown-divider {
@ -82,9 +93,9 @@
.dropdown-item { .dropdown-item {
line-height: 21px; line-height: 21px;
overflow: auto; overflow: hidden;
display: block; display: block;
padding: .5em 0.75em; padding: 0.5em 0.75em;
clear: both; clear: both;
font-weight: 400; font-weight: 400;
text-align: inherit; text-align: inherit;
@ -110,14 +121,15 @@
&:active, &:hover { &:active, &:hover {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--selectedMenuPopover, $fallback--lightBg); background-color: var(--selectedMenuPopover, $fallback--lightBg);
color: $fallback--link; box-shadow: none;
color: var(--selectedMenuPopoverText, $fallback--link); --btnText: var(--selectedMenuPopoverText, $fallback--link);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint); --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon); --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
svg { svg {
color: var(--selectedMenuPopoverIcon, $fallback--icon); color: var(--selectedMenuPopoverIcon, $fallback--icon);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
} }
} }
@ -142,12 +154,41 @@
content: '✓'; content: '✓';
} }
&.menu-checkbox-radio::after { &.-radio {
font-size: 2em; border-radius: 9999px;
content: '•';
&.menu-checkbox-checked::after {
font-size: 2em;
content: '•';
}
} }
} }
} }
.button-default.dropdown-item {
&,
i[class*=icon-] {
color: $fallback--text;
color: var(--btnText, $fallback--text);
}
&:active {
background-color: $fallback--lightBg;
background-color: var(--selectedMenuPopover, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuPopoverText, $fallback--link);
}
&:disabled {
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
}
} }
</style> </style>

27
src/components/post_status_form/post_status_form.js
View file

@ -4,6 +4,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
import EmojiInput from '../emoji_input/emoji_input.vue' import EmojiInput from '../emoji_input/emoji_input.vue'
import PollForm from '../poll/poll_form.vue' import PollForm from '../poll/poll_form.vue'
import Attachment from '../attachment/attachment.vue' import Attachment from '../attachment/attachment.vue'
import Gallery from 'src/components/gallery/gallery.vue'
import StatusContent from '../status_content/status_content.vue' import StatusContent from '../status_content/status_content.vue'
import fileTypeService from '../../services/file_type/file_type.service.js' import fileTypeService from '../../services/file_type/file_type.service.js'
import { findOffset } from '../../services/offset_finder/offset_finder.service.js' import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
@ -77,6 +78,12 @@ const PostStatusForm = {
'emojiPickerPlacement', 'emojiPickerPlacement',
'optimisticPosting' 'optimisticPosting'
], ],
emits: [
'posted',
'resize',
'mediaplay',
'mediapause'
],
components: { components: {
MediaUpload, MediaUpload,
EmojiInput, EmojiInput,
@ -85,7 +92,8 @@ const PostStatusForm = {
Checkbox, Checkbox,
Select, Select,
Attachment, Attachment,
StatusContent StatusContent,
Gallery
}, },
mounted () { mounted () {
this.updateIdempotencyKey() this.updateIdempotencyKey()
@ -391,6 +399,21 @@ const PostStatusForm = {
this.newStatus.files.splice(index, 1) this.newStatus.files.splice(index, 1)
this.$emit('resize') this.$emit('resize')
}, },
editAttachment (fileInfo, newText) {
this.newStatus.mediaDescriptions[fileInfo.id] = newText
},
shiftUpMediaFile (fileInfo) {
const { files } = this.newStatus
const index = this.newStatus.files.indexOf(fileInfo)
files.splice(index, 1)
files.splice(index - 1, 0, fileInfo)
},
shiftDnMediaFile (fileInfo) {
const { files } = this.newStatus
const index = this.newStatus.files.indexOf(fileInfo)
files.splice(index, 1)
files.splice(index + 1, 0, fileInfo)
},
uploadFailed (errString, templateArgs) { uploadFailed (errString, templateArgs) {
templateArgs = templateArgs || {} templateArgs = templateArgs || {}
this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs) this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
@ -466,7 +489,7 @@ const PostStatusForm = {
const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom'] const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr) const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)
const scrollerRef = this.$el.closest('.sidebar-scroller') || const scrollerRef = this.$el.closest('.column.-scrollable') ||
this.$el.closest('.post-form-modal-view') || this.$el.closest('.post-form-modal-view') ||
window window

163
src/components/post_status_form/post_status_form.vue
View file

@ -8,21 +8,13 @@
@submit.prevent @submit.prevent
@dragover.prevent="fileDrag" @dragover.prevent="fileDrag"
> >
<div
v-show="showDropIcon !== 'hide'"
:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
class="drop-indicator"
@dragleave="fileDragStop"
@drop.stop="fileDrop"
>
<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
</div>
<div class="form-group"> <div class="form-group">
<i18n <i18n-t
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning" v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
path="post_status.account_not_locked_warning" keypath="post_status.account_not_locked_warning"
tag="p" tag="p"
class="visibility-notice" class="visibility-notice"
scope="global"
> >
<button <button
class="button-unstyled -link" class="button-unstyled -link"
@ -30,7 +22,7 @@
> >
{{ $t('post_status.account_not_locked_warning_link') }} {{ $t('post_status.account_not_locked_warning_link') }}
</button> </button>
</i18n> </i18n-t>
<p <p
v-if="!hideScopeNotice && newStatus.visibility === 'public'" v-if="!hideScopeNotice && newStatus.visibility === 'public'"
class="visibility-notice notice-dismissible" class="visibility-notice notice-dismissible"
@ -276,43 +268,46 @@
{{ $t('post_status.post') }} {{ $t('post_status.post') }}
</button> </button>
</div> </div>
<div
v-show="showDropIcon !== 'hide'"
:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
class="drop-indicator"
@dragleave="fileDragStop"
@drop.stop="fileDrop"
>
<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
</div>
<div <div
v-if="error" v-if="error"
class="alert error" class="alert error"
> >
Error: {{ error }} Error: {{ error }}
<FAIcon <button
class="fa-scale-110 fa-old-padding" class="button-unstyled"
icon="times"
@click="clearError" @click="clearError"
/>
</div>
<div class="attachments">
<div
v-for="file in newStatus.files"
:key="file.url"
class="media-upload-wrapper"
> >
<button <FAIcon
class="button-unstyled hider" class="fa-scale-110 fa-old-padding"
@click="removeMediaFile(file)" icon="times"
>
<FAIcon icon="times" />
</button>
<attachment
:attachment="file"
:set-media="() => $store.dispatch('setMedia', newStatus.files)"
size="small"
allow-play="false"
/> />
<input </button>
v-model="newStatus.mediaDescriptions[file.id]"
type="text"
:placeholder="$t('post_status.media_description')"
@keydown.enter.prevent=""
>
</div>
</div> </div>
<gallery
v-if="newStatus.files && newStatus.files.length > 0"
class="attachments"
:grid="true"
:nsfw="false"
:attachments="newStatus.files"
:descriptions="newStatus.mediaDescriptions"
:set-media="() => $store.dispatch('setMedia', newStatus.files)"
:editable="true"
:edit-attachment="editAttachment"
:remove-attachment="removeMediaFile"
:shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
:shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
@play="$emit('mediaplay', attachment.id)"
@pause="$emit('mediapause', attachment.id)"
/>
<div <div
v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox" v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
class="upload_settings" class="upload_settings"
@ -330,31 +325,18 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.tribute-container {
ul {
padding: 0px;
li {
display: flex;
align-items: center;
}
}
img {
padding: 3px;
width: 16px;
height: 16px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
}
.post-status-form { .post-status-form {
position: relative; position: relative;
.attachments {
margin-bottom: 0.5em;
}
.form-bottom { .form-bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0.5em; padding: 0.5em;
height: 32px; height: 2.5em;
button { button {
width: 10em; width: 10em;
@ -412,7 +394,6 @@
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
padding: 0.5em; padding: 0.5em;
margin: 0; margin: 0;
line-height: 1.4em;
} }
.text-format { .text-format {
@ -426,13 +407,16 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 5px; padding-top: 5px;
align-items: baseline;
} }
.media-upload-icon, .poll-icon, .emoji-icon { .media-upload-icon, .poll-icon, .emoji-icon {
font-size: 26px; font-size: 1.85em;
line-height: 1.1; line-height: 1.1;
flex: 1; flex: 1;
padding: 0 0.1em; padding: 0 0.1em;
display: flex;
align-items: center;
&.selected, &:hover { &.selected, &:hover {
// needs to be specific to override icon default color // needs to be specific to override icon default color
@ -459,21 +443,17 @@
// Order is not necessary but a good indicator // Order is not necessary but a good indicator
.media-upload-icon { .media-upload-icon {
order: 1; order: 1;
text-align: left; justify-content: left;
} }
.emoji-icon { .emoji-icon {
order: 2; order: 2;
text-align: center; justify-content: center;
} }
.poll-icon { .poll-icon {
order: 3; order: 3;
text-align: right; justify-content: right;
}
.poll-icon {
cursor: pointer;
} }
.error { .error {
@ -507,19 +487,6 @@
flex-direction: column; flex-direction: column;
} }
.attachments .media-upload-wrapper {
position: relative;
.attachment {
margin: 0;
padding: 0;
}
}
.btn {
cursor: pointer;
}
.btn[disabled] { .btn[disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
@ -535,26 +502,20 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.25em 0.5em 0.5em; padding: 0.25em 0.5em 0.5em;
line-height:24px; line-height: 1.85;
}
form textarea.form-cw {
line-height:16px;
resize: none;
overflow: hidden;
transition: min-height 200ms 100ms;
min-height: 1px;
} }
.form-post-body { .form-post-body {
height: 16px; // Only affects the empty-height // TODO: make a resizable textarea component?
line-height: 16px; box-sizing: content-box; // needed for easier computation of dynamic size
resize: none;
overflow: hidden; overflow: hidden;
transition: min-height 200ms 100ms; transition: min-height 200ms 100ms;
padding-bottom: 1.75em; // stock padding + 1 line of text (for counter)
min-height: 1px; padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
box-sizing: content-box; // two lines of text
height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
resize: none;
&.scrollable-form { &.scrollable-form {
overflow-y: auto; overflow-y: auto;
@ -578,10 +539,6 @@
} }
} }
.btn {
cursor: pointer;
}
.btn[disabled] { .btn[disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
@ -598,7 +555,6 @@
.drop-indicator { .drop-indicator {
position: absolute; position: absolute;
z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 5em; font-size: 5em;
@ -616,11 +572,4 @@
border: 2px dashed var(--text, $fallback--text); border: 2px dashed var(--text, $fallback--text);
} }
} }
// todo: unify with attachment.vue (otherwise the uploaded images are not minified unless a status with an attachment was displayed before)
img.media-upload, .media-upload-container > video {
line-height: 0;
max-height: 200px;
max-width: 100%;
}
</style> </style>

Some files were not shown because too many files have changed in this diff Show more