Compare commits
No commits in common. "develop" and "mentions-clean" have entirely different histories.
develop
...
mentions-c
232 changed files with 4964 additions and 11857 deletions
4
.babelrc
4
.babelrc
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"presets": ["@babel/preset-env"],
|
"presets": ["@babel/preset-env", "@vue/babel-preset-jsx"],
|
||||||
"plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
|
"plugins": ["@babel/plugin-transform-runtime", "lodash"],
|
||||||
"comments": false
|
"comments": false
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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:12
|
image: node:10
|
||||||
|
|
||||||
stages:
|
stages:
|
||||||
- lint
|
- lint
|
||||||
|
|
|
||||||
57
CHANGELOG.md
57
CHANGELOG.md
|
|
@ -3,67 +3,12 @@ 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
|
## [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
|
|
||||||
### Added
|
### Added
|
||||||
- Added a quick settings to timeline header for easier access
|
- Added a quick settings to timeline header for easier access
|
||||||
- Added option to mark posts as sensitive by default
|
- Added option to mark posts as sensitive by default
|
||||||
- Added quick filters for notifications
|
- Added quick filters for notifications
|
||||||
- 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 "edit profile" button if viewing own profile which opens profile settings
|
|
||||||
|
|
||||||
### Fixed
|
|
||||||
- Fixed follow request count showing in the wrong location in mobile view
|
|
||||||
|
|
||||||
|
|
||||||
## [2.3.0] - 2021-03-01
|
## [2.3.0] - 2021-03-01
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@ Contributors of this project.
|
||||||
- Constance Variable (lambadalambda@social.heldscal.la): Code
|
- Constance Variable (lambadalambda@social.heldscal.la): Code
|
||||||
- Coco Snuss (cocosnuss@social.heldscal.la): Code
|
- Coco Snuss (cocosnuss@social.heldscal.la): Code
|
||||||
- wakarimasen (wakarimasen@shitposter.club): NSFW hiding image
|
- wakarimasen (wakarimasen@shitposter.club): NSFW hiding image
|
||||||
- eris (eris@disqordia.space): Code
|
|
||||||
- dtluna (dtluna@social.heldscal.la): Code
|
- dtluna (dtluna@social.heldscal.la): Code
|
||||||
- sonyam (sonyam@social.heldscal.la): Background images
|
- sonyam (sonyam@social.heldscal.la): Background images
|
||||||
- hakui (hakui@freezepeach.xyz): CSS and styling
|
- hakui (hakui@freezepeach.xyz): CSS and styling
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ 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
|
||||||
|
|
@ -30,16 +29,16 @@ module.exports = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.js', '.jsx', '.vue'],
|
extensions: ['.js', '.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: {
|
||||||
|
|
@ -59,28 +58,9 @@ 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$/,
|
||||||
loader: 'vue-loader',
|
use: 'vue-loader'
|
||||||
options: {
|
|
||||||
compilerOptions: {
|
|
||||||
isCustomElement(tag) {
|
|
||||||
if (tag === 'pinch-zoom') {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.jsx?$/,
|
test: /\.jsx?$/,
|
||||||
|
|
@ -115,7 +95,6 @@ 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: [
|
||||||
|
|
|
||||||
|
|
@ -21,9 +21,7 @@ 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(),
|
||||||
|
|
|
||||||
|
|
@ -36,9 +36,7 @@ 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({
|
||||||
|
|
|
||||||
|
|
@ -52,10 +52,7 @@ 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,
|
||||||
|
|
|
||||||
200
package.json
200
package.json
|
|
@ -16,111 +16,107 @@
|
||||||
"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.17.8",
|
"@babel/runtime": "^7.7.6",
|
||||||
"@chenfengyuan/vue-qrcode": "2.0.0",
|
"@chenfengyuan/vue-qrcode": "^1.0.0",
|
||||||
"@fortawesome/fontawesome-svg-core": "1.3.0",
|
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
||||||
"@fortawesome/free-regular-svg-icons": "5.15.4",
|
"@fortawesome/free-regular-svg-icons": "^5.15.1",
|
||||||
"@fortawesome/free-solid-svg-icons": "5.15.4",
|
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
||||||
"@fortawesome/vue-fontawesome": "3.0.0-5",
|
"@fortawesome/vue-fontawesome": "^2.0.0",
|
||||||
"@kazvmoe-infra/pinch-zoom-element": "1.2.0",
|
"body-scroll-lock": "^2.6.4",
|
||||||
"@vuelidate/core": "2.0.0-alpha.35",
|
"chromatism": "^3.0.0",
|
||||||
"@vuelidate/validators": "2.0.0-alpha.27",
|
"cropperjs": "^1.4.3",
|
||||||
"body-scroll-lock": "2.7.1",
|
"diff": "^3.0.1",
|
||||||
"chromatism": "3.0.0",
|
"escape-html": "^1.0.3",
|
||||||
"click-outside-vue3": "4.0.1",
|
"localforage": "^1.5.0",
|
||||||
"cropperjs": "1.5.12",
|
"parse-link-header": "^1.0.1",
|
||||||
"diff": "3.5.0",
|
"phoenix": "^1.3.0",
|
||||||
"escape-html": "1.0.3",
|
"portal-vue": "^2.1.4",
|
||||||
"localforage": "1.10.0",
|
"punycode.js": "^2.1.0",
|
||||||
"parse-link-header": "1.0.1",
|
"ruffle-mirror": "^2021.4.10",
|
||||||
"phoenix": "1.6.2",
|
"v-click-outside": "^2.1.1",
|
||||||
"punycode.js": "2.1.0",
|
"vue": "^2.6.11",
|
||||||
"qrcode": "1",
|
"vue-i18n": "^7.3.2",
|
||||||
"ruffle-mirror": "2021.12.31",
|
"vue-router": "^3.0.1",
|
||||||
"vue": "^3.2.31",
|
"vue-template-compiler": "^2.6.11",
|
||||||
"vue-i18n": "^9.2.0-beta.34",
|
"vuelidate": "^0.7.4",
|
||||||
"vue-router": "4.0.14",
|
"vuex": "^3.0.1"
|
||||||
"vue-template-compiler": "2.6.11",
|
|
||||||
"vuex": "4.0.2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "7.17.8",
|
"@babel/core": "^7.7.5",
|
||||||
"@babel/plugin-transform-runtime": "7.17.0",
|
"@babel/plugin-transform-runtime": "^7.7.6",
|
||||||
"@babel/preset-env": "7.16.11",
|
"@babel/preset-env": "^7.7.6",
|
||||||
"@babel/register": "7.17.7",
|
"@babel/register": "^7.7.4",
|
||||||
"@intlify/vue-i18n-loader": "^5.0.0",
|
"@ungap/event-target": "^0.1.0",
|
||||||
"@ungap/event-target": "0.2.3",
|
"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
|
||||||
"@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
|
"@vue/babel-preset-jsx": "^1.2.4",
|
||||||
"@vue/babel-plugin-jsx": "1.1.1",
|
"@vue/test-utils": "^1.0.0-beta.26",
|
||||||
"@vue/compiler-sfc": "^3.1.0",
|
"autoprefixer": "^6.4.0",
|
||||||
"@vue/test-utils": "2.0.0-rc.17",
|
"babel-eslint": "^7.0.0",
|
||||||
"autoprefixer": "6.7.7",
|
"babel-loader": "^8.0.6",
|
||||||
"babel-eslint": "7.2.3",
|
"babel-plugin-lodash": "^3.3.4",
|
||||||
"babel-loader": "8.2.4",
|
"chai": "^3.5.0",
|
||||||
"babel-plugin-lodash": "3.3.4",
|
"chalk": "^1.1.3",
|
||||||
"chai": "3.5.0",
|
"chromedriver": "^87.0.1",
|
||||||
"chalk": "1.1.3",
|
"connect-history-api-fallback": "^1.1.0",
|
||||||
"chromedriver": "87.0.7",
|
"copy-webpack-plugin": "^6.4.1",
|
||||||
"connect-history-api-fallback": "1.6.0",
|
"cross-spawn": "^4.0.2",
|
||||||
"copy-webpack-plugin": "6.4.1",
|
"css-loader": "^0.28.0",
|
||||||
"cross-spawn": "4.0.2",
|
"custom-event-polyfill": "^1.0.7",
|
||||||
"css-loader": "0.28.11",
|
"eslint": "^5.16.0",
|
||||||
"custom-event-polyfill": "1.0.7",
|
"eslint-config-standard": "^12.0.0",
|
||||||
"eslint": "5.16.0",
|
"eslint-friendly-formatter": "^2.0.5",
|
||||||
"eslint-config-standard": "12.0.0",
|
"eslint-loader": "^2.1.0",
|
||||||
"eslint-friendly-formatter": "2.0.7",
|
"eslint-plugin-import": "^2.13.0",
|
||||||
"eslint-loader": "2.2.1",
|
"eslint-plugin-node": "^7.0.0",
|
||||||
"eslint-plugin-import": "2.25.4",
|
"eslint-plugin-promise": "^4.0.0",
|
||||||
"eslint-plugin-node": "7.0.1",
|
"eslint-plugin-standard": "^4.0.0",
|
||||||
"eslint-plugin-promise": "4.3.1",
|
"eslint-plugin-vue": "^5.2.2",
|
||||||
"eslint-plugin-standard": "4.1.0",
|
"eventsource-polyfill": "^0.9.6",
|
||||||
"eslint-plugin-vue": "5.2.3",
|
"express": "^4.13.3",
|
||||||
"eventsource-polyfill": "0.9.6",
|
"file-loader": "^3.0.1",
|
||||||
"express": "4.17.3",
|
"function-bind": "^1.0.2",
|
||||||
"file-loader": "3.0.1",
|
"html-webpack-plugin": "^3.0.0",
|
||||||
"function-bind": "1.1.1",
|
"http-proxy-middleware": "^0.17.2",
|
||||||
"html-webpack-plugin": "3.2.0",
|
"inject-loader": "^2.0.1",
|
||||||
"http-proxy-middleware": "0.21.0",
|
"iso-639-1": "^2.0.3",
|
||||||
"inject-loader": "2.0.1",
|
"isparta-loader": "^2.0.0",
|
||||||
"iso-639-1": "2.1.13",
|
"json-loader": "^0.5.4",
|
||||||
"isparta-loader": "2.0.0",
|
"karma": "^3.0.0",
|
||||||
"json-loader": "0.5.7",
|
"karma-coverage": "^1.1.1",
|
||||||
"karma": "6.3.17",
|
"karma-firefox-launcher": "^1.1.0",
|
||||||
"karma-coverage": "1.1.2",
|
"karma-mocha": "^1.2.0",
|
||||||
"karma-firefox-launcher": "1.3.0",
|
"karma-mocha-reporter": "^2.2.1",
|
||||||
"karma-mocha": "2.0.1",
|
"karma-sinon-chai": "^2.0.2",
|
||||||
"karma-mocha-reporter": "2.2.5",
|
"karma-sourcemap-loader": "^0.3.7",
|
||||||
"karma-sinon-chai": "2.0.2",
|
"karma-spec-reporter": "0.0.26",
|
||||||
"karma-sourcemap-loader": "0.3.8",
|
"karma-webpack": "^4.0.0-rc.3",
|
||||||
"karma-spec-reporter": "0.0.33",
|
"lodash": "^4.16.4",
|
||||||
"karma-webpack": "4.0.2",
|
"lolex": "^1.4.0",
|
||||||
"lodash": "4.17.21",
|
"mini-css-extract-plugin": "^0.5.0",
|
||||||
"lolex": "1.6.0",
|
"mocha": "^3.1.0",
|
||||||
"mini-css-extract-plugin": "0.12.0",
|
"nightwatch": "^0.9.8",
|
||||||
"mocha": "3.5.3",
|
"opn": "^4.0.2",
|
||||||
"nightwatch": "0.9.21",
|
"ora": "^0.3.0",
|
||||||
"opn": "4.0.2",
|
"postcss-loader": "^3.0.0",
|
||||||
"ora": "0.4.1",
|
"raw-loader": "^0.5.1",
|
||||||
"postcss-loader": "3.0.0",
|
"sass": "^1.17.3",
|
||||||
"raw-loader": "0.5.1",
|
"sass-loader": "git://github.com/webpack-contrib/sass-loader",
|
||||||
"sass": "1.20.1",
|
|
||||||
"sass-loader": "7.2.0",
|
|
||||||
"selenium-server": "2.53.1",
|
"selenium-server": "2.53.1",
|
||||||
"semver": "5.6.0",
|
"semver": "^5.3.0",
|
||||||
"serviceworker-webpack-plugin": "1.0.1",
|
"serviceworker-webpack-plugin": "^1.0.0",
|
||||||
"shelljs": "0.8.5",
|
"shelljs": "^0.8.4",
|
||||||
"sinon": "2.4.1",
|
"sinon": "^2.1.0",
|
||||||
"sinon-chai": "2.14.0",
|
"sinon-chai": "^2.8.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": "^16.0.0",
|
"vue-loader": "^14.0.0",
|
||||||
"vue-style-loader": "4.1.2",
|
"vue-style-loader": "^4.0.0",
|
||||||
"webpack": "4.46.0",
|
"webpack": "^4.44.0",
|
||||||
"webpack-dev-middleware": "3.7.3",
|
"webpack-dev-middleware": "^3.6.0",
|
||||||
"webpack-hot-middleware": "2.24.3",
|
"webpack-hot-middleware": "^2.12.2",
|
||||||
"webpack-merge": "0.14.1"
|
"webpack-merge": "^0.14.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 4.0.0",
|
"node": ">= 4.0.0",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
|
||||||
"extends": [
|
|
||||||
"config:base"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
10
src/App.js
10
src/App.js
|
|
@ -46,7 +46,7 @@ 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)
|
||||||
},
|
},
|
||||||
unmounted () {
|
destroyed () {
|
||||||
window.removeEventListener('resize', this.updateMobileState)
|
window.removeEventListener('resize', this.updateMobileState)
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -65,7 +65,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
shout () { return this.$store.state.shout.joined },
|
shout () { return this.$store.state.shout.channel.state === '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 &&
|
||||||
|
|
@ -73,12 +73,6 @@ export default {
|
||||||
this.$store.state.instance.instanceSpecificPanelContent
|
this.$store.state.instance.instanceSpecificPanelContent
|
||||||
},
|
},
|
||||||
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
|
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
|
||||||
shoutboxPosition () {
|
|
||||||
return this.$store.getters.mergedConfig.showNewPostButton || false
|
|
||||||
},
|
|
||||||
hideShoutbox () {
|
|
||||||
return this.$store.getters.mergedConfig.hideShoutbox
|
|
||||||
},
|
|
||||||
isMobileLayout () { return this.$store.state.interface.mobileLayout },
|
isMobileLayout () { return this.$store.state.interface.mobileLayout },
|
||||||
privateMode () { return this.$store.state.instance.private },
|
privateMode () { return this.$store.state.instance.private },
|
||||||
sidebarAlign () {
|
sidebarAlign () {
|
||||||
|
|
|
||||||
|
|
@ -572,7 +572,7 @@ nav {
|
||||||
.fade-enter-active, .fade-leave-active {
|
.fade-enter-active, .fade-leave-active {
|
||||||
transition: opacity .2s
|
transition: opacity .2s
|
||||||
}
|
}
|
||||||
.fade-enter-from, .fade-leave-active {
|
.fade-enter, .fade-leave-active {
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
id="app-loaded"
|
id="app"
|
||||||
:style="bgStyle"
|
:style="bgStyle"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
@ -50,16 +50,15 @@
|
||||||
<media-modal />
|
<media-modal />
|
||||||
</div>
|
</div>
|
||||||
<shout-panel
|
<shout-panel
|
||||||
v-if="currentUser && shout && !hideShoutbox"
|
v-if="currentUser && shout"
|
||||||
:floating="true"
|
:floating="true"
|
||||||
class="floating-shout mobile-hidden"
|
class="floating-shout mobile-hidden"
|
||||||
:class="{ 'left': shoutboxPosition }"
|
|
||||||
/>
|
/>
|
||||||
<MobilePostStatusButton />
|
<MobilePostStatusButton />
|
||||||
<UserReportingModal />
|
<UserReportingModal />
|
||||||
<PostStatusModal />
|
<PostStatusModal />
|
||||||
<SettingsModal />
|
<SettingsModal />
|
||||||
<div id="modal" />
|
<portal-target name="modal" />
|
||||||
<GlobalNoticeList />
|
<GlobalNoticeList />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -30,5 +30,3 @@ $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;
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,7 @@
|
||||||
import { createApp } from 'vue'
|
import Vue from 'vue'
|
||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import VueRouter from 'vue-router'
|
||||||
import vClickOutside from 'click-outside-vue3'
|
|
||||||
|
|
||||||
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
|
|
||||||
|
|
||||||
import App from '../App.vue'
|
|
||||||
import routes from './routes'
|
import routes from './routes'
|
||||||
import VBodyScrollLock from 'src/directives/body_scroll_lock'
|
import App from '../App.vue'
|
||||||
|
|
||||||
import { windowWidth } from '../services/window_utils/window_utils'
|
import { windowWidth } 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'
|
||||||
|
|
@ -121,7 +115,6 @@ 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')
|
||||||
|
|
@ -373,32 +366,25 @@ const afterStoreSetup = async ({ store, i18n }) => {
|
||||||
getTOS({ store })
|
getTOS({ store })
|
||||||
getStickers({ store })
|
getStickers({ store })
|
||||||
|
|
||||||
const router = createRouter({
|
const router = new VueRouter({
|
||||||
history: createWebHistory(),
|
mode: 'history',
|
||||||
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 || { left: 0, top: 0 }
|
return savedPosition || { x: 0, y: 0 }
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const app = createApp(App)
|
/* eslint-disable no-new */
|
||||||
|
return new Vue({
|
||||||
app.use(router)
|
router,
|
||||||
app.use(store)
|
store,
|
||||||
app.use(i18n)
|
i18n,
|
||||||
|
el: '#app',
|
||||||
app.use(vClickOutside)
|
render: h => h(App)
|
||||||
app.use(VBodyScrollLock)
|
})
|
||||||
|
|
||||||
app.component('FAIcon', FontAwesomeIcon)
|
|
||||||
app.component('FALayers', FontAwesomeLayers)
|
|
||||||
|
|
||||||
app.mount('#app')
|
|
||||||
|
|
||||||
return app
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default afterStoreSetup
|
export default afterStoreSetup
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
@ -69,7 +69,7 @@ export default (store) => {
|
||||||
{ 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) {
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,6 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
emits: ['resetAsyncComponent'],
|
|
||||||
methods: {
|
methods: {
|
||||||
retry () {
|
retry () {
|
||||||
this.$emit('resetAsyncComponent')
|
this.$emit('resetAsyncComponent')
|
||||||
|
|
|
||||||
|
|
@ -11,12 +11,7 @@ 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(
|
||||||
|
|
@ -25,39 +20,27 @@ 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',
|
||||||
'remove',
|
'naturalSizeLoad'
|
||||||
'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: {
|
||||||
|
|
@ -66,23 +49,8 @@ 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'
|
return this.size === 'hide' || this.type === 'unknown'
|
||||||
},
|
|
||||||
useContainFit () {
|
|
||||||
return this.$store.getters.mergedConfig.useContainFit
|
|
||||||
},
|
},
|
||||||
placeholderName () {
|
placeholderName () {
|
||||||
if (this.attachment.description === '' || !this.attachment.description) {
|
if (this.attachment.description === '' || !this.attachment.description) {
|
||||||
|
|
@ -106,33 +74,24 @@ 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)
|
return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
|
||||||
|
},
|
||||||
|
isSmall () {
|
||||||
|
return this.size === 'small'
|
||||||
|
},
|
||||||
|
fullwidth () {
|
||||||
|
if (this.size === 'hide') return false
|
||||||
|
return this.type === 'html' || this.type === 'audio' || this.type === 'unknown'
|
||||||
},
|
},
|
||||||
useModal () {
|
useModal () {
|
||||||
let modalTypes = []
|
const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
|
||||||
switch (this.size) {
|
: this.mergedConfig.playVideosInModal
|
||||||
case 'hide':
|
? ['image', 'video']
|
||||||
case 'small':
|
|
||||||
modalTypes = ['image', 'video', 'audio', 'flash']
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
modalTypes = this.mergedConfig.playVideosInModal
|
|
||||||
? ['image', 'video', 'flash']
|
|
||||||
: ['image']
|
: ['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') {
|
||||||
|
|
@ -141,37 +100,12 @@ const Attachment = {
|
||||||
},
|
},
|
||||||
openModal (event) {
|
openModal (event) {
|
||||||
if (this.useModal) {
|
if (this.useModal) {
|
||||||
this.$emit('setMedia')
|
event.stopPropagation()
|
||||||
this.$store.dispatch('setCurrentMedia', this.attachment)
|
event.preventDefault()
|
||||||
} else if (this.type === 'unknown') {
|
this.setMedia()
|
||||||
window.open(this.attachment.url)
|
this.$store.dispatch('setCurrent', this.attachment)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
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) &&
|
||||||
|
|
@ -198,7 +132,7 @@ const Attachment = {
|
||||||
onImageLoad (image) {
|
onImageLoad (image) {
|
||||||
const width = image.naturalWidth
|
const width = image.naturalWidth
|
||||||
const height = image.naturalHeight
|
const height = image.naturalHeight
|
||||||
this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
|
this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,268 +0,0 @@
|
||||||
@import '../../_variables.scss';
|
|
||||||
|
|
||||||
.Attachment {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
align-self: flex-start;
|
|
||||||
line-height: 0;
|
|
||||||
height: 100%;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
border-radius: $fallback--attachmentRadius;
|
|
||||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
|
||||||
border-color: $fallback--border;
|
|
||||||
border-color: var(--border, $fallback--border);
|
|
||||||
|
|
||||||
.attachment-wrapper {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description-container {
|
|
||||||
flex: 0 1 0;
|
|
||||||
display: flex;
|
|
||||||
padding-top: 0.5em;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
p {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5;
|
|
||||||
padding: 0.5em;
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-static {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
background: var(--popover);
|
|
||||||
box-shadow: var(--popupShadow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.description-field {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .placeholder-container,
|
|
||||||
& .image-container,
|
|
||||||
& .audio-container,
|
|
||||||
& .video-container,
|
|
||||||
& .flash-container,
|
|
||||||
& .oembed-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-container {
|
|
||||||
.image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .flash-container,
|
|
||||||
& .video-container {
|
|
||||||
& .flash,
|
|
||||||
& video {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.audio-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
|
|
||||||
audio {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.play-icon {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 64px;
|
|
||||||
top: calc(50% - 32px);
|
|
||||||
left: calc(50% - 32px);
|
|
||||||
color: rgba(255, 255, 255, 0.75);
|
|
||||||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment-buttons {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
margin-top: 0.5em;
|
|
||||||
margin-right: 0.5em;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
.attachment-button {
|
|
||||||
padding: 0;
|
|
||||||
border-radius: $fallback--tooltipRadius;
|
|
||||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
|
||||||
text-align: center;
|
|
||||||
width: 2em;
|
|
||||||
height: 2em;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
font-size: 1.25em;
|
|
||||||
// TODO: theming? hard to theme with unknown background image color
|
|
||||||
background: rgba(230, 230, 230, 0.7);
|
|
||||||
|
|
||||||
.svg-inline--fa {
|
|
||||||
color: rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .svg-inline--fa {
|
|
||||||
color: rgba(0, 0, 0, 0.9);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.oembed-container {
|
|
||||||
line-height: 1.2em;
|
|
||||||
flex: 1 0 100%;
|
|
||||||
width: 100%;
|
|
||||||
margin-right: 15px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
flex: 1;
|
|
||||||
img {
|
|
||||||
border: 0px;
|
|
||||||
border-radius: 5px;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
flex: 2;
|
|
||||||
margin: 8px;
|
|
||||||
word-break: break-all;
|
|
||||||
h1 {
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-size-small {
|
|
||||||
.play-icon {
|
|
||||||
zoom: 0.5;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment-buttons {
|
|
||||||
zoom: 0.7;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-editable {
|
|
||||||
padding: 0.5em;
|
|
||||||
|
|
||||||
& .description-container,
|
|
||||||
& .attachment-buttons {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-placeholder {
|
|
||||||
display: inline-block;
|
|
||||||
color: $fallback--link;
|
|
||||||
color: var(--postLink, $fallback--link);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
height: auto;
|
|
||||||
line-height: 1.5;
|
|
||||||
|
|
||||||
&:not(.-editable) {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-editable {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: baseline;
|
|
||||||
|
|
||||||
& .description-container,
|
|
||||||
& .attachment-buttons {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description-container {
|
|
||||||
flex: 1;
|
|
||||||
padding-left: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment-buttons {
|
|
||||||
order: 99;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: inline-block;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-loading {
|
|
||||||
cursor: progress;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-contain-fit {
|
|
||||||
img,
|
|
||||||
canvas {
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-cover-fit {
|
|
||||||
img,
|
|
||||||
canvas {
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<button
|
<div
|
||||||
v-if="usePlaceholder"
|
v-if="usePlaceholder"
|
||||||
class="Attachment -placeholder button-unstyled"
|
:class="{ 'fullwidth': fullwidth }"
|
||||||
:class="classNames"
|
|
||||||
@click="openModal"
|
@click="openModal"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
|
|
@ -12,53 +11,20 @@
|
||||||
: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>{{ edit ? '' : placeholderName }}
|
<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
|
||||||
</a>
|
</a>
|
||||||
<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>
|
||||||
<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
|
||||||
class="Attachment"
|
|
||||||
:class="classNames"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-show="!isEmpty"
|
v-show="!isEmpty"
|
||||||
class="attachment-wrapper"
|
class="attachment"
|
||||||
|
:class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
v-if="hidden"
|
v-if="hidden"
|
||||||
class="image-container"
|
class="image-attachment"
|
||||||
:href="attachment.url"
|
:href="attachment.url"
|
||||||
:alt="attachment.description"
|
:alt="attachment.description"
|
||||||
:title="attachment.description"
|
:title="attachment.description"
|
||||||
|
|
@ -68,6 +34,7 @@
|
||||||
:key="nsfwImage"
|
:key="nsfwImage"
|
||||||
class="nsfw"
|
class="nsfw"
|
||||||
:src="nsfwImage"
|
:src="nsfwImage"
|
||||||
|
:class="{'small': isSmall}"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
v-if="type === 'video'"
|
v-if="type === 'video'"
|
||||||
|
|
@ -75,75 +42,21 @@
|
||||||
icon="play-circle"
|
icon="play-circle"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<div
|
|
||||||
v-if="!hidden"
|
|
||||||
class="attachment-buttons"
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
v-if="type === 'flash' && flashLoaded"
|
v-if="nsfw && hideNsfwLocal && !hidden"
|
||||||
class="button-unstyled attachment-button"
|
class="button-unstyled hider"
|
||||||
: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"
|
@click.prevent="toggleHidden"
|
||||||
>
|
>
|
||||||
<FAIcon icon="times" />
|
<FAIcon icon="times" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
v-if="shiftUp"
|
|
||||||
class="button-unstyled attachment-button"
|
|
||||||
:title="$t('status.move_up')"
|
|
||||||
@click.prevent="onShiftUp"
|
|
||||||
>
|
|
||||||
<FAIcon icon="chevron-left" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="shiftDn"
|
|
||||||
class="button-unstyled attachment-button"
|
|
||||||
:title="$t('status.move_down')"
|
|
||||||
@click.prevent="onShiftDn"
|
|
||||||
>
|
|
||||||
<FAIcon icon="chevron-right" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="remove"
|
|
||||||
class="button-unstyled attachment-button"
|
|
||||||
:title="$t('status.remove_attachment')"
|
|
||||||
@click.prevent="onRemove"
|
|
||||||
>
|
|
||||||
<FAIcon icon="trash-alt" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a
|
<a
|
||||||
v-if="type === 'image' && (!hidden || preloadImage)"
|
v-if="type === 'image' && (!hidden || preloadImage)"
|
||||||
class="image-container"
|
class="image-attachment"
|
||||||
:class="{'-hidden': hidden && preloadImage }"
|
:class="{'hidden': hidden && preloadImage }"
|
||||||
:href="attachment.url"
|
:href="attachment.url"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@click.stop.prevent="openModal"
|
@click="openModal"
|
||||||
>
|
>
|
||||||
<StillImage
|
<StillImage
|
||||||
class="image"
|
class="image"
|
||||||
|
|
@ -156,48 +69,26 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<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"
|
v-if="type === 'video' && !hidden"
|
||||||
class="video-container"
|
class="video-container"
|
||||||
:class="{ 'button-unstyled': 'isModal' }"
|
:class="{'small': isSmall}"
|
||||||
:href="attachment.url"
|
:href="allowPlay ? undefined : attachment.url"
|
||||||
@click.stop.prevent="openModal"
|
@click="openModal"
|
||||||
>
|
>
|
||||||
<VideoAttachment
|
<VideoAttachment
|
||||||
class="video"
|
class="video"
|
||||||
:attachment="attachment"
|
:attachment="attachment"
|
||||||
:controls="!useModal"
|
:controls="allowPlay"
|
||||||
@play="$emit('play')"
|
@play="$emit('play')"
|
||||||
@pause="$emit('pause')"
|
@pause="$emit('pause')"
|
||||||
/>
|
/>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
v-if="useModal"
|
v-if="!allowPlay"
|
||||||
class="play-icon"
|
class="play-icon"
|
||||||
icon="play-circle"
|
icon="play-circle"
|
||||||
/>
|
/>
|
||||||
</component>
|
</a>
|
||||||
|
|
||||||
<span
|
|
||||||
v-if="type === 'audio' && !hidden"
|
|
||||||
class="audio-container"
|
|
||||||
:href="attachment.url"
|
|
||||||
@click.stop.prevent="openModal"
|
|
||||||
>
|
|
||||||
<audio
|
<audio
|
||||||
v-if="type === 'audio'"
|
v-if="type === 'audio'"
|
||||||
:src="attachment.url"
|
:src="attachment.url"
|
||||||
|
|
@ -207,11 +98,10 @@
|
||||||
@play="$emit('play')"
|
@play="$emit('play')"
|
||||||
@pause="$emit('pause')"
|
@pause="$emit('pause')"
|
||||||
/>
|
/>
|
||||||
</span>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="type === 'html' && attachment.oembed"
|
v-if="type === 'html' && attachment.oembed"
|
||||||
class="oembed-container"
|
class="oembed"
|
||||||
@click.prevent="linkClicked"
|
@click.prevent="linkClicked"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
@ -228,41 +118,211 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span
|
|
||||||
v-if="type === 'flash' && !hidden"
|
|
||||||
class="flash-container"
|
|
||||||
:href="attachment.url"
|
|
||||||
@click.stop.prevent="openModal"
|
|
||||||
>
|
|
||||||
<Flash
|
<Flash
|
||||||
ref="flash"
|
v-if="type === 'flash'"
|
||||||
class="flash"
|
|
||||||
:src="attachment.large_thumb_url || attachment.url"
|
: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 src="./attachment.scss" lang="scss"></style>
|
<style lang="scss">
|
||||||
|
@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>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
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'
|
||||||
|
|
@ -6,8 +5,8 @@ import { mapGetters } from 'vuex'
|
||||||
|
|
||||||
const AuthForm = {
|
const AuthForm = {
|
||||||
name: 'AuthForm',
|
name: 'AuthForm',
|
||||||
render () {
|
render (createElement) {
|
||||||
return h(resolveComponent(this.authForm))
|
return createElement('component', { is: this.authForm })
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
authForm () {
|
authForm () {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
import UserCard from '../user_card/user_card.vue'
|
import UserCard from '../user_card/user_card.vue'
|
||||||
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'
|
|
||||||
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'
|
||||||
|
|
||||||
const BasicUserCard = {
|
const BasicUserCard = {
|
||||||
|
|
@ -14,8 +13,7 @@ const BasicUserCard = {
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
UserCard,
|
UserCard,
|
||||||
UserAvatar,
|
UserAvatar
|
||||||
RichContent
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleUserExpanded () {
|
toggleUserExpanded () {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
class="avatar"
|
class="avatar"
|
||||||
:user="user"
|
:user="user"
|
||||||
@click.prevent="toggleUserExpanded"
|
@click.prevent.native="toggleUserExpanded"
|
||||||
/>
|
/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<div
|
<div
|
||||||
|
|
@ -25,11 +25,17 @@
|
||||||
:title="user.name"
|
:title="user.name"
|
||||||
class="basic-user-card-user-name"
|
class="basic-user-card-user-name"
|
||||||
>
|
>
|
||||||
<RichContent
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
|
<span
|
||||||
|
v-if="user.name_html"
|
||||||
class="basic-user-card-user-name-value"
|
class="basic-user-card-user-name-value"
|
||||||
:html="user.name"
|
v-html="user.name_html"
|
||||||
:emoji="user.emoji"
|
|
||||||
/>
|
/>
|
||||||
|
<!-- eslint-enable vue/no-v-html -->
|
||||||
|
<span
|
||||||
|
v-else
|
||||||
|
class="basic-user-card-user-name-value"
|
||||||
|
>{{ user.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<router-link
|
<router-link
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ const Bookmarks = {
|
||||||
components: {
|
components: {
|
||||||
Timeline
|
Timeline
|
||||||
},
|
},
|
||||||
unmounted () {
|
destroyed () {
|
||||||
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
|
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@ const Chat = {
|
||||||
})
|
})
|
||||||
this.setChatLayout()
|
this.setChatLayout()
|
||||||
},
|
},
|
||||||
unmounted () {
|
destroyed () {
|
||||||
window.removeEventListener('scroll', this.handleScroll)
|
window.removeEventListener('scroll', this.handleScroll)
|
||||||
window.removeEventListener('resize', this.handleLayoutChange)
|
window.removeEventListener('resize', this.handleLayoutChange)
|
||||||
this.unsetChatLayout()
|
this.unsetChatLayout()
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<template>
|
||||||
<div
|
<div
|
||||||
ref="scrollable"
|
ref="scrollable"
|
||||||
class="scrollable-message-list"
|
class="scrollable-message-list"
|
||||||
|
|
@ -91,6 +92,7 @@
|
||||||
@resize="handleResize"
|
@resize="handleResize"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -40,11 +40,12 @@ const ChatListItem = {
|
||||||
const message = this.chat.lastMessage
|
const message = this.chat.lastMessage
|
||||||
const messageEmojis = message ? message.emojis : []
|
const messageEmojis = message ? message.emojis : []
|
||||||
const isYou = message && message.account_id === this.currentUser.id
|
const isYou = message && message.account_id === this.currentUser.id
|
||||||
const content = message ? (this.attachmentInfo || message.content) : ''
|
const content = message ? (this.attachmentInfo || message.content_raw) : ''
|
||||||
const messagePreview = isYou ? `<i>${this.$t('chats.you')}</i> ${content}` : content
|
const messagePreview = isYou ? `<i>${this.$t('chats.you')}</i> ${content}` : content
|
||||||
return {
|
return {
|
||||||
summary: '',
|
summary: '',
|
||||||
emojis: messageEmojis,
|
emojis: messageEmojis,
|
||||||
|
statusnet_html: messagePreview,
|
||||||
raw_html: messagePreview,
|
raw_html: messagePreview,
|
||||||
text: messagePreview,
|
text: messagePreview,
|
||||||
attachments: []
|
attachments: []
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,6 @@ const ChatMessage = {
|
||||||
'chatViewItem',
|
'chatViewItem',
|
||||||
'hoveredMessageChain'
|
'hoveredMessageChain'
|
||||||
],
|
],
|
||||||
emits: ['hover'],
|
|
||||||
components: {
|
components: {
|
||||||
Popover,
|
Popover,
|
||||||
Attachment,
|
Attachment,
|
||||||
|
|
@ -59,8 +58,9 @@ const ChatMessage = {
|
||||||
return {
|
return {
|
||||||
summary: '',
|
summary: '',
|
||||||
emojis: this.message.emojis,
|
emojis: this.message.emojis,
|
||||||
raw_html: this.message.content || '',
|
raw_html: this.message.content_raw,
|
||||||
text: this.message.content || '',
|
statusnet_html: this.message.content,
|
||||||
|
text: this.message.content,
|
||||||
attachments: this.message.attachments
|
attachments: this.message.attachments
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
.chat-message-wrapper {
|
.chat-message-wrapper {
|
||||||
|
|
||||||
&.hovered-message-chain {
|
&.hovered-message-chain {
|
||||||
.animated.Avatar {
|
.animated.Avatar {
|
||||||
canvas {
|
canvas {
|
||||||
|
|
@ -41,12 +40,6 @@
|
||||||
.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 {
|
||||||
|
|
@ -69,6 +62,10 @@
|
||||||
&.with-media {
|
&.with-media {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
.gallery-row {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -94,7 +91,7 @@
|
||||||
.without-attachment {
|
.without-attachment {
|
||||||
.message-content {
|
.message-content {
|
||||||
// TODO figure out how to do it properly
|
// TODO figure out how to do it properly
|
||||||
.RichContent::after {
|
.text::after {
|
||||||
margin-right: 5.4em;
|
margin-right: 5.4em;
|
||||||
content: " ";
|
content: " ";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,11 @@
|
||||||
|
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 {
|
export default Vue.component('chat-title', {
|
||||||
name: 'ChatTitle',
|
name: 'ChatTitle',
|
||||||
components: {
|
components: {
|
||||||
UserAvatar,
|
UserAvatar
|
||||||
RichContent
|
|
||||||
},
|
},
|
||||||
props: [
|
props: [
|
||||||
'user', 'withAvatar'
|
'user', 'withAvatar'
|
||||||
|
|
@ -24,4 +23,4 @@ export default {
|
||||||
return generateProfileLink(user.id, user.screen_name)
|
return generateProfileLink(user.id, user.screen_name)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
<div
|
<div
|
||||||
class="chat-title"
|
class="chat-title"
|
||||||
:title="title"
|
:title="title"
|
||||||
|
|
@ -13,14 +14,12 @@
|
||||||
height="23px"
|
height="23px"
|
||||||
/>
|
/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<RichContent
|
<span
|
||||||
v-if="user"
|
|
||||||
class="username"
|
class="username"
|
||||||
:title="'@'+user.screen_name_ui"
|
v-html="htmlTitle"
|
||||||
: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>
|
||||||
|
|
@ -35,8 +34,6 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
--emoji-size: 14px;
|
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -44,6 +41,14 @@
|
||||||
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 {
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,9 @@
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:checked="modelValue"
|
:checked="checked"
|
||||||
:indeterminate="indeterminate"
|
:indeterminate.prop="indeterminate"
|
||||||
@change="$emit('update:modelValue', $event.target.checked)"
|
@change="$emit('change', $event.target.checked)"
|
||||||
>
|
>
|
||||||
<i class="checkbox-indicator" />
|
<i class="checkbox-indicator" />
|
||||||
<span
|
<span
|
||||||
|
|
@ -22,9 +22,12 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
emits: ['update:modelValue'],
|
model: {
|
||||||
|
prop: 'checked',
|
||||||
|
event: 'change'
|
||||||
|
},
|
||||||
props: [
|
props: [
|
||||||
'modelValue',
|
'checked',
|
||||||
'indeterminate',
|
'indeterminate',
|
||||||
'disabled'
|
'disabled'
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -11,28 +11,28 @@
|
||||||
</label>
|
</label>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
|
v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
|
||||||
:model-value="present"
|
:checked="present"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
class="opt"
|
class="opt"
|
||||||
@update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
|
@change="$emit('input', typeof value === '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="modelValue || fallback"
|
:value="value || fallback"
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
@input="$emit('input', $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="modelValue || fallback"
|
:value="value || fallback"
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
@input="$emit('input', $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"
|
||||||
modelValue: {
|
value: {
|
||||||
required: false,
|
required: false,
|
||||||
type: String,
|
type: String,
|
||||||
default: undefined
|
default: undefined
|
||||||
|
|
@ -91,19 +91,18 @@ export default {
|
||||||
default: true
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
emits: ['update:modelValue'],
|
|
||||||
computed: {
|
computed: {
|
||||||
present () {
|
present () {
|
||||||
return typeof this.modelValue !== 'undefined'
|
return typeof this.value !== 'undefined'
|
||||||
},
|
},
|
||||||
validColor () {
|
validColor () {
|
||||||
return hex2rgb(this.modelValue || this.fallback)
|
return hex2rgb(this.value || this.fallback)
|
||||||
},
|
},
|
||||||
transparentColor () {
|
transparentColor () {
|
||||||
return this.modelValue === 'transparent'
|
return this.value === 'transparent'
|
||||||
},
|
},
|
||||||
computedColor () {
|
computedColor () {
|
||||||
return this.modelValue && this.modelValue.startsWith('--')
|
return this.value && this.value.startsWith('--')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,5 @@
|
||||||
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
|
||||||
|
|
@ -49,10 +35,7 @@ const conversation = {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
highlight: null,
|
highlight: null,
|
||||||
expanded: false,
|
expanded: false
|
||||||
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
|
|
||||||
statusContentPropertiesObject: {},
|
|
||||||
inlineDivePosition: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: [
|
props: [
|
||||||
|
|
@ -70,50 +53,12 @@ const conversation = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
maxDepthToShowByDefault () {
|
|
||||||
// maxDepthInThread = max number of depths that is *visible*
|
|
||||||
// since our depth starts with 0 and "showing" means "showing children"
|
|
||||||
// there is a -2 here
|
|
||||||
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 () {
|
hideStatus () {
|
||||||
return this.virtualHidden && this.suspendable
|
if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
|
||||||
|
return this.virtualHidden && this.$refs.statusComponent[0].suspendable
|
||||||
|
} else {
|
||||||
|
return this.virtualHidden
|
||||||
|
}
|
||||||
},
|
},
|
||||||
status () {
|
status () {
|
||||||
return this.$store.state.statuses.allStatusesObject[this.statusId]
|
return this.$store.state.statuses.allStatusesObject[this.statusId]
|
||||||
|
|
@ -145,121 +90,6 @@ 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
|
||||||
|
|
@ -279,71 +109,15 @@ 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) {
|
||||||
|
|
@ -358,8 +132,6 @@ const conversation = {
|
||||||
expanded (value) {
|
expanded (value) {
|
||||||
if (value) {
|
if (value) {
|
||||||
this.fetchConversation()
|
this.fetchConversation()
|
||||||
} else {
|
|
||||||
this.resetDisplayState()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
virtualHidden (value) {
|
virtualHidden (value) {
|
||||||
|
|
@ -389,8 +161,8 @@ const conversation = {
|
||||||
getReplies (id) {
|
getReplies (id) {
|
||||||
return this.replies[id] || []
|
return this.replies[id] || []
|
||||||
},
|
},
|
||||||
getHighlight () {
|
focused (id) {
|
||||||
return this.isExpanded ? this.highlight : null
|
return (this.isExpanded) && id === this.statusId
|
||||||
},
|
},
|
||||||
setHighlight (id) {
|
setHighlight (id) {
|
||||||
if (!id) return
|
if (!id) return
|
||||||
|
|
@ -398,139 +170,15 @@ 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 = {}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,146 +18,6 @@
|
||||||
{{ $t('timeline.collapse') }}
|
{{ $t('timeline.collapse') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="conversation-body panel-body">
|
|
||||||
<div
|
|
||||||
v-if="isTreeView"
|
|
||||||
class="thread-body"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="shouldShowAllConversationButton"
|
|
||||||
class="conversation-dive-to-top-level-box"
|
|
||||||
>
|
|
||||||
<i18n-t
|
|
||||||
keypath="status.show_all_conversation_with_icon"
|
|
||||||
tag="button"
|
|
||||||
class="button-unstyled -link"
|
|
||||||
@click.prevent="diveToTopLevel"
|
|
||||||
scope="global"
|
|
||||||
>
|
|
||||||
<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
|
<status
|
||||||
v-for="status in conversation"
|
v-for="status in conversation"
|
||||||
:key="status.id"
|
:key="status.id"
|
||||||
|
|
@ -173,22 +33,10 @@
|
||||||
:in-profile="inProfile"
|
:in-profile="inProfile"
|
||||||
:profile-user-id="profileUserId"
|
:profile-user-id="profileUserId"
|
||||||
class="conversation-status status-fadein panel-body"
|
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"
|
@goto="setHighlight"
|
||||||
@toggleExpanded="toggleExpanded"
|
@toggleExpanded="toggleExpanded"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
:style="hiddenStyle"
|
:style="hiddenStyle"
|
||||||
|
|
@ -201,45 +49,6 @@
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
.Conversation {
|
.Conversation {
|
||||||
.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;
|
||||||
|
|
@ -247,28 +56,12 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-ancestor-has-other-replies .conversation-status,
|
&.-expanded {
|
||||||
.thread-ancestor:last-child .conversation-status,
|
.conversation-status:last-child {
|
||||||
.thread-ancestor:last-child .thread-ancestor-dive-box,
|
|
||||||
&.-expanded .thread-tree .conversation-status {
|
|
||||||
border-bottom: none;
|
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 $fallback--panelRadius $fallback--panelRadius;
|
||||||
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
|
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
|
||||||
border-bottom: 1px solid var(--border, $fallback--border);
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
<search-bar
|
<search-bar
|
||||||
v-if="currentUser || !privateMode"
|
v-if="currentUser || !privateMode"
|
||||||
@toggled="onSearchBarToggled"
|
@toggled="onSearchBarToggled"
|
||||||
@click.stop
|
@click.stop.native
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
class="button-unstyled nav-icon"
|
class="button-unstyled nav-icon"
|
||||||
|
|
@ -52,7 +52,6 @@
|
||||||
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
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,6 @@ library.add(
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const EmojiInput = {
|
const EmojiInput = {
|
||||||
emits: ['update:modelValue', 'shown'],
|
|
||||||
props: {
|
props: {
|
||||||
suggest: {
|
suggest: {
|
||||||
/**
|
/**
|
||||||
|
|
@ -58,7 +57,8 @@ const EmojiInput = {
|
||||||
required: true,
|
required: true,
|
||||||
type: Function
|
type: Function
|
||||||
},
|
},
|
||||||
modelValue: {
|
// TODO VUE3: change to modelValue, change 'input' event to 'input'
|
||||||
|
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.modelValue && this.caret) {
|
if (this.value && this.caret) {
|
||||||
const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
|
const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
|
||||||
return word
|
return word
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -189,11 +189,8 @@ const EmojiInput = {
|
||||||
img: imageUrl || ''
|
img: imageUrl || ''
|
||||||
}))
|
}))
|
||||||
},
|
},
|
||||||
suggestions: {
|
suggestions (newValue) {
|
||||||
handler (newValue) {
|
|
||||||
this.$nextTick(this.resize)
|
this.$nextTick(this.resize)
|
||||||
},
|
|
||||||
deep: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -228,13 +225,13 @@ const EmojiInput = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
replace (replacement) {
|
replace (replacement) {
|
||||||
const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
|
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
|
||||||
this.$emit('update:modelValue', newValue)
|
this.$emit('input', newValue)
|
||||||
this.caret = 0
|
this.caret = 0
|
||||||
},
|
},
|
||||||
insert ({ insertion, keepOpen, surroundingSpace = true }) {
|
insert ({ insertion, keepOpen, surroundingSpace = true }) {
|
||||||
const before = this.modelValue.substring(0, this.caret) || ''
|
const before = this.value.substring(0, this.caret) || ''
|
||||||
const after = this.modelValue.substring(this.caret) || ''
|
const after = this.value.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
|
||||||
|
|
@ -262,7 +259,7 @@ const EmojiInput = {
|
||||||
after
|
after
|
||||||
].join('')
|
].join('')
|
||||||
this.keepOpen = keepOpen
|
this.keepOpen = keepOpen
|
||||||
this.$emit('update:modelValue', newValue)
|
this.$emit('input', 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()
|
||||||
|
|
@ -281,8 +278,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.modelValue, this.wordAtCaret, replacement)
|
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
|
||||||
this.$emit('update:modelValue', newValue)
|
this.$emit('input', newValue)
|
||||||
this.highlighted = 0
|
this.highlighted = 0
|
||||||
const position = this.wordAtCaret.start + replacement.length
|
const position = this.wordAtCaret.start + replacement.length
|
||||||
|
|
||||||
|
|
@ -458,7 +455,7 @@ const EmojiInput = {
|
||||||
this.showPicker = false
|
this.showPicker = false
|
||||||
this.setCaret(e)
|
this.setCaret(e)
|
||||||
this.resize()
|
this.resize()
|
||||||
this.$emit('update:modelValue', e.target.value)
|
this.$emit('input', e.target.value)
|
||||||
},
|
},
|
||||||
onClickInput (e) {
|
onClickInput (e) {
|
||||||
this.showPicker = false
|
this.showPicker = false
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
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 {
|
||||||
|
|
@ -58,7 +57,7 @@ const EmojiPicker = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
|
StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
|
||||||
Checkbox
|
Checkbox
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -80,7 +79,7 @@ const EmojiPicker = {
|
||||||
},
|
},
|
||||||
highlight (key) {
|
highlight (key) {
|
||||||
const ref = this.$refs['group-' + key]
|
const ref = this.$refs['group-' + key]
|
||||||
const top = ref.offsetTop
|
const top = ref[0].offsetTop
|
||||||
this.setShowStickers(false)
|
this.setShowStickers(false)
|
||||||
this.activeGroup = key
|
this.activeGroup = key
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
@ -97,7 +96,7 @@ const EmojiPicker = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
triggerLoadMore (target) {
|
triggerLoadMore (target) {
|
||||||
const ref = this.$refs['group-end-custom']
|
const ref = this.$refs['group-end-custom'][0]
|
||||||
if (!ref) return
|
if (!ref) return
|
||||||
const bottom = ref.offsetTop + ref.offsetHeight
|
const bottom = ref.offsetTop + ref.offsetHeight
|
||||||
|
|
||||||
|
|
@ -120,7 +119,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.offsetTop <= top) {
|
if (ref[0].offsetTop <= top) {
|
||||||
this.activeGroup = group.id
|
this.activeGroup = group.id
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,18 @@ const Exporter = {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'export.csv'
|
default: 'export.csv'
|
||||||
},
|
},
|
||||||
exportButtonLabel: { type: String },
|
exportButtonLabel: {
|
||||||
processingMessage: { type: String }
|
type: String,
|
||||||
|
default () {
|
||||||
|
return this.$t('exporter.export')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
processingMessage: {
|
||||||
|
type: String,
|
||||||
|
default () {
|
||||||
|
return this.$t('exporter.processing')
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -7,14 +7,14 @@
|
||||||
spin
|
spin
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<span>{{ processingMessage || $t('exporter.processing') }}</span>
|
<span>{{ processingMessage }}</span>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
v-else
|
v-else
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
@click="process"
|
@click="process"
|
||||||
>
|
>
|
||||||
{{ exportButtonLabel || $t('exporter.export') }}
|
{{ exportButtonLabel }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -39,13 +39,12 @@ const Flash = {
|
||||||
this.player = 'error'
|
this.player = 'error'
|
||||||
})
|
})
|
||||||
this.ruffleInstance = player
|
this.ruffleInstance = player
|
||||||
this.$emit('playerOpened')
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
closePlayer () {
|
closePlayer () {
|
||||||
this.ruffleInstance && this.ruffleInstance.remove()
|
console.log(this.ruffleInstance)
|
||||||
|
this.ruffleInstance.remove()
|
||||||
this.player = false
|
this.player = false
|
||||||
this.$emit('playerClosed')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,13 @@
|
||||||
</p>
|
</p>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="player"
|
||||||
|
class="button-unstyled hider"
|
||||||
|
@click="closePlayer"
|
||||||
|
>
|
||||||
|
<FAIcon icon="stop" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -44,9 +51,8 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
.Flash {
|
.Flash {
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 260px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.player {
|
.player {
|
||||||
|
|
@ -54,16 +60,6 @@
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
@ -80,5 +76,13 @@
|
||||||
display: none;
|
display: none;
|
||||||
visibility: 'hidden';
|
visibility: 'hidden';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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', 'user', 'labelFollowing', 'buttonClass'],
|
props: ['relationship', 'labelFollowing', 'buttonClass'],
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
inProgress: false
|
inProgress: false
|
||||||
|
|
@ -14,7 +14,7 @@ export default {
|
||||||
if (this.inProgress || this.relationship.following) {
|
if (this.inProgress || this.relationship.following) {
|
||||||
return this.$t('user_card.follow_unfollow')
|
return this.$t('user_card.follow_unfollow')
|
||||||
} else if (this.relationship.requested) {
|
} else if (this.relationship.requested) {
|
||||||
return this.$t('user_card.follow_cancel')
|
return this.$t('user_card.follow_again')
|
||||||
} else {
|
} else {
|
||||||
return this.$t('user_card.follow')
|
return this.$t('user_card.follow')
|
||||||
}
|
}
|
||||||
|
|
@ -29,14 +29,11 @@ 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: {
|
||||||
onClick () {
|
onClick () {
|
||||||
this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
|
this.relationship.following ? this.unfollow() : this.follow()
|
||||||
},
|
},
|
||||||
follow () {
|
follow () {
|
||||||
this.inProgress = true
|
this.inProgress = true
|
||||||
|
|
|
||||||
|
|
@ -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="disabled"
|
:disabled="inProgress"
|
||||||
:title="title"
|
:title="title"
|
||||||
@click="onClick"
|
@click="onClick"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,6 @@
|
||||||
: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>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { set } from 'lodash'
|
import { set } from 'vue'
|
||||||
import Select from '../select/select.vue'
|
import Select from '../select/select.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -6,12 +6,11 @@ export default {
|
||||||
Select
|
Select
|
||||||
},
|
},
|
||||||
props: [
|
props: [
|
||||||
'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
|
'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
|
||||||
],
|
],
|
||||||
emits: ['update:modelValue'],
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
lValue: this.modelValue,
|
lValue: this.value,
|
||||||
availableOptions: [
|
availableOptions: [
|
||||||
this.noInherit ? '' : 'inherit',
|
this.noInherit ? '' : 'inherit',
|
||||||
'custom',
|
'custom',
|
||||||
|
|
@ -23,7 +22,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeUpdate () {
|
beforeUpdate () {
|
||||||
this.lValue = this.modelValue
|
this.lValue = this.value
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
present () {
|
present () {
|
||||||
|
|
@ -38,7 +37,7 @@ export default {
|
||||||
},
|
},
|
||||||
set (v) {
|
set (v) {
|
||||||
set(this.lValue, 'family', v)
|
set(this.lValue, 'family', v)
|
||||||
this.$emit('update:modelValue', this.lValue)
|
this.$emit('input', this.lValue)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
isCustom () {
|
isCustom () {
|
||||||
|
|
|
||||||
|
|
@ -15,14 +15,13 @@
|
||||||
class="opt exlcude-disabled"
|
class="opt exlcude-disabled"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
:checked="present"
|
:checked="present"
|
||||||
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
|
@input="$emit('input', typeof value === '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"
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,15 @@
|
||||||
import Attachment from '../attachment/attachment.vue'
|
import Attachment from '../attachment/attachment.vue'
|
||||||
import { sumBy, set } from 'lodash'
|
import { chunk, last, dropRight, sumBy } 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 },
|
||||||
|
|
@ -29,70 +18,26 @@ const Gallery = {
|
||||||
if (!this.attachments) {
|
if (!this.attachments) {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
const attachments = this.limit > 0
|
const rows = chunk(this.attachments, 3)
|
||||||
? this.attachments.slice(0, this.limit)
|
if (last(rows).length === 1 && rows.length > 1) {
|
||||||
: this.attachments
|
// if 1 attachment on last row -> add it to the previous row instead
|
||||||
if (this.size === 'hide') {
|
const lastAttachment = last(rows)[0]
|
||||||
return attachments.map(item => ({ minimal: true, items: [item] }))
|
const allButLastRow = dropRight(rows)
|
||||||
|
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
|
||||||
},
|
},
|
||||||
attachmentsDimensionalScore () {
|
useContainFit () {
|
||||||
return this.rows.reduce((acc, row) => {
|
return this.$store.getters.mergedConfig.useContainFit
|
||||||
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, width, height }) {
|
onNaturalSizeLoad (id, size) {
|
||||||
set(this.sizes, id, { width, height })
|
this.$set(this.sizes, id, size)
|
||||||
},
|
},
|
||||||
rowStyle (row) {
|
rowStyle (itemsPerRow) {
|
||||||
if (row.audio) {
|
return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
|
||||||
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))
|
||||||
|
|
@ -101,16 +46,6 @@ 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)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
ref="galleryContainer"
|
ref="galleryContainer"
|
||||||
class="Gallery"
|
style="width: 100%;"
|
||||||
:class="{ '-long': tooManyAttachments && hidingLong }"
|
|
||||||
>
|
>
|
||||||
<div class="gallery-rows">
|
|
||||||
<div
|
<div
|
||||||
v-for="(row, rowIndex) in rows"
|
v-for="(row, index) in rows"
|
||||||
:key="rowIndex"
|
:key="index"
|
||||||
class="gallery-row"
|
class="gallery-row"
|
||||||
:style="rowStyle(row)"
|
:style="rowStyle(row.length)"
|
||||||
:class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
|
:class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
|
||||||
>
|
>
|
||||||
<div
|
<div class="gallery-row-inner">
|
||||||
class="gallery-row-inner"
|
<attachment
|
||||||
:class="{ '-grid': grid }"
|
v-for="attachment in row"
|
||||||
>
|
|
||||||
<Attachment
|
|
||||||
v-for="(attachment, attachmentIndex) in row.items"
|
|
||||||
:key="attachment.id"
|
:key="attachment.id"
|
||||||
class="gallery-item"
|
:set-media="setMedia"
|
||||||
:nsfw="nsfw"
|
:nsfw="nsfw"
|
||||||
:attachment="attachment"
|
:attachment="attachment"
|
||||||
:size="size"
|
:allow-play="false"
|
||||||
:editable="editable"
|
:natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
|
||||||
:remove="removeAttachment"
|
:style="itemStyle(attachment.id, row)"
|
||||||
: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>
|
</div>
|
||||||
<div
|
|
||||||
v-if="tooManyAttachments"
|
|
||||||
class="many-attachments"
|
|
||||||
>
|
|
||||||
<div class="many-attachments-text">
|
|
||||||
{{ $t("status.many_attachments", { number: attachments.length }) }}
|
|
||||||
</div>
|
|
||||||
<div class="many-attachments-buttons">
|
|
||||||
<span
|
|
||||||
v-if="!hidingLong"
|
|
||||||
class="many-attachments-button"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script src='./gallery.js'></script>
|
<script src='./gallery.js'></script>
|
||||||
|
|
@ -88,66 +31,12 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
.Gallery {
|
|
||||||
.gallery-rows {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-row {
|
.gallery-row {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 0;
|
height: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-top: 0.5em;
|
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;
|
||||||
|
|
@ -159,24 +48,9 @@
|
||||||
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-item {
|
.gallery-row-inner .attachment {
|
||||||
margin: 0 0.5em 0 0;
|
margin: 0 0.5em 0 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -187,5 +61,32 @@
|
||||||
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>
|
||||||
|
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
|
|
||||||
|
|
||||||
const HashtagLink = {
|
|
||||||
name: 'HashtagLink',
|
|
||||||
props: {
|
|
||||||
url: {
|
|
||||||
required: true,
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
required: true,
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
tag: {
|
|
||||||
required: false,
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick () {
|
|
||||||
const tag = this.tag || extractTagFromUrl(this.url)
|
|
||||||
if (tag) {
|
|
||||||
const link = this.generateTagLink(tag)
|
|
||||||
this.$router.push(link)
|
|
||||||
} else {
|
|
||||||
window.open(this.url, '_blank')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
generateTagLink (tag) {
|
|
||||||
return `/tag/${tag}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default HashtagLink
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
.HashtagLink {
|
|
||||||
position: relative;
|
|
||||||
white-space: normal;
|
|
||||||
display: inline-block;
|
|
||||||
color: var(--link);
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
<template>
|
|
||||||
<span
|
|
||||||
class="HashtagLink"
|
|
||||||
>
|
|
||||||
<!-- eslint-disable vue/no-v-html -->
|
|
||||||
<a
|
|
||||||
:href="url"
|
|
||||||
class="original"
|
|
||||||
target="_blank"
|
|
||||||
@click.prevent="onClick"
|
|
||||||
v-html="content"
|
|
||||||
/>
|
|
||||||
<!-- eslint-enable vue/no-v-html -->
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script src="./hashtag_link.js"/>
|
|
||||||
|
|
||||||
<style lang="scss" src="./hashtag_link.scss"/>
|
|
||||||
|
|
@ -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)
|
||||||
},
|
},
|
||||||
beforeUnmount: function () {
|
beforeDestroy: function () {
|
||||||
// remove the event listeners
|
// remove the event listeners
|
||||||
const trigger = this.getTriggerDOM()
|
const trigger = this.getTriggerDOM()
|
||||||
if (trigger) {
|
if (trigger) {
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,24 @@ const Importer = {
|
||||||
type: Function,
|
type: Function,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
submitButtonLabel: { type: String },
|
submitButtonLabel: {
|
||||||
successMessage: { type: String },
|
type: String,
|
||||||
errorMessage: { type: String }
|
default () {
|
||||||
|
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 {
|
||||||
|
|
|
||||||
|
|
@ -18,31 +18,21 @@
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
@click="submit"
|
@click="submit"
|
||||||
>
|
>
|
||||||
{{ submitButtonLabel || $t('importer.submit') }}
|
{{ submitButtonLabel }}
|
||||||
</button>
|
</button>
|
||||||
<div v-if="success">
|
<div v-if="success">
|
||||||
<button
|
|
||||||
class="button-unstyled"
|
|
||||||
@click="dismiss"
|
|
||||||
>
|
|
||||||
<FAIcon
|
<FAIcon
|
||||||
icon="times"
|
icon="times"
|
||||||
|
@click="dismiss"
|
||||||
/>
|
/>
|
||||||
</button>
|
<p>{{ successMessage }}</p>
|
||||||
{{ ' ' }}
|
|
||||||
<span>{{ successMessage || $t('importer.success') }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="error">
|
<div v-else-if="error">
|
||||||
<button
|
|
||||||
class="button-unstyled"
|
|
||||||
@click="dismiss"
|
|
||||||
>
|
|
||||||
<FAIcon
|
<FAIcon
|
||||||
icon="times"
|
icon="times"
|
||||||
|
@click="dismiss"
|
||||||
/>
|
/>
|
||||||
</button>
|
<p>{{ errorMessage }}</p>
|
||||||
{{ ' ' }}
|
|
||||||
<span>{{ errorMessage || $t('importer.error') }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
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'],
|
||||||
|
|
@ -21,8 +20,7 @@ const Interactions = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Notifications,
|
Notifications
|
||||||
TabSwitcher
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
<label for="interface-language-switcher">
|
<label for="interface-language-switcher">
|
||||||
{{ $t('settings.interfaceLanguage') }}
|
{{ $t('settings.interfaceLanguage') }}
|
||||||
</label>
|
</label>
|
||||||
{{ ' ' }}
|
|
||||||
<Select
|
<Select
|
||||||
id="interface-language-switcher"
|
id="interface-language-switcher"
|
||||||
v-model="language"
|
v-model="language"
|
||||||
|
|
|
||||||
|
|
@ -76,15 +76,11 @@
|
||||||
>
|
>
|
||||||
<div class="alert error">
|
<div class="alert error">
|
||||||
{{ error }}
|
{{ error }}
|
||||||
<button
|
|
||||||
class="button-unstyled"
|
|
||||||
@click="clearError"
|
|
||||||
>
|
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
icon="times"
|
icon="times"
|
||||||
|
@click="clearError"
|
||||||
/>
|
/>
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,24 @@
|
||||||
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 PinchZoom from '../pinch_zoom/pinch_zoom.vue'
|
|
||||||
import SwipeClick from '../swipe_click/swipe_click.vue'
|
|
||||||
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 fileTypeService from '../../services/file_type/file_type.service.js'
|
||||||
|
import GestureService from '../../services/gesture_service/gesture_service'
|
||||||
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,
|
||||||
PinchZoom,
|
Modal
|
||||||
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 () {
|
||||||
|
|
@ -49,9 +27,6 @@ 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
|
||||||
},
|
},
|
||||||
|
|
@ -62,62 +37,43 @@ const MediaModal = {
|
||||||
return this.media.length > 1
|
return this.media.length > 1
|
||||||
},
|
},
|
||||||
type () {
|
type () {
|
||||||
return this.currentMedia ? this.getType(this.currentMedia) : null
|
return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created () {
|
||||||
|
this.mediaSwipeGestureRight = GestureService.swipeGesture(
|
||||||
|
GestureService.DIRECTION_RIGHT,
|
||||||
|
this.goPrev,
|
||||||
|
50
|
||||||
|
)
|
||||||
|
this.mediaSwipeGestureLeft = GestureService.swipeGesture(
|
||||||
|
GestureService.DIRECTION_LEFT,
|
||||||
|
this.goNext,
|
||||||
|
50
|
||||||
|
)
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getType (media) {
|
mediaTouchStart (e) {
|
||||||
return fileTypeService.fileType(media.mimetype)
|
GestureService.beginSwipe(e, this.mediaSwipeGestureRight)
|
||||||
|
GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
|
||||||
|
},
|
||||||
|
mediaTouchMove (e) {
|
||||||
|
GestureService.updateSwipe(e, this.mediaSwipeGestureRight)
|
||||||
|
GestureService.updateSwipe(e, this.mediaSwipeGestureLeft)
|
||||||
},
|
},
|
||||||
hide () {
|
hide () {
|
||||||
// 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')
|
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)
|
||||||
const newMedia = this.media[prevIndex]
|
this.$store.dispatch('setCurrent', 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)
|
||||||
const newMedia = this.media[nextIndex]
|
this.$store.dispatch('setCurrent', 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) {
|
||||||
|
|
@ -142,7 +98,7 @@ const MediaModal = {
|
||||||
document.addEventListener('keyup', this.handleKeyupEvent)
|
document.addEventListener('keyup', this.handleKeyupEvent)
|
||||||
document.addEventListener('keydown', this.handleKeydownEvent)
|
document.addEventListener('keydown', this.handleKeydownEvent)
|
||||||
},
|
},
|
||||||
unmounted () {
|
destroyed () {
|
||||||
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)
|
||||||
|
|
|
||||||
|
|
@ -2,38 +2,18 @@
|
||||||
<Modal
|
<Modal
|
||||||
v-if="showing"
|
v-if="showing"
|
||||||
class="media-modal-view"
|
class="media-modal-view"
|
||||||
@backdropClicked="hideIfNotSwiped"
|
@backdropClicked="hide"
|
||||||
>
|
|
||||||
<SwipeClick
|
|
||||||
v-if="type === 'image'"
|
|
||||||
ref="swipeClick"
|
|
||||||
class="modal-image-container"
|
|
||||||
:direction="swipeDirection"
|
|
||||||
:threshold="swipeThreshold"
|
|
||||||
@preview-requested="handleSwipePreview"
|
|
||||||
@swipe-finished="handleSwipeEnd"
|
|
||||||
@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
|
<img
|
||||||
:class="{ loading }"
|
v-if="type === 'image'"
|
||||||
class="modal-image"
|
class="modal-image"
|
||||||
:src="currentMedia.url"
|
:src="currentMedia.url"
|
||||||
:alt="currentMedia.description"
|
:alt="currentMedia.description"
|
||||||
:title="currentMedia.description"
|
:title="currentMedia.description"
|
||||||
@load="onImageLoaded"
|
@touchstart.stop="mediaTouchStart"
|
||||||
|
@touchmove.stop="mediaTouchMove"
|
||||||
|
@click="hide"
|
||||||
>
|
>
|
||||||
</PinchZoom>
|
|
||||||
</SwipeClick>
|
|
||||||
<VideoAttachment
|
<VideoAttachment
|
||||||
v-if="type === 'video'"
|
v-if="type === 'video'"
|
||||||
class="modal-image"
|
class="modal-image"
|
||||||
|
|
@ -48,84 +28,38 @@
|
||||||
: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 modal-view-button-arrow modal-view-button-arrow--prev"
|
class="modal-view-button-arrow modal-view-button-arrow--prev"
|
||||||
@click.stop.prevent="goPrev"
|
@click.stop.prevent="goPrev"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="button-icon arrow-icon"
|
class="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 modal-view-button-arrow modal-view-button-arrow--next"
|
class="modal-view-button-arrow modal-view-button-arrow--next"
|
||||||
@click.stop.prevent="goNext"
|
@click.stop.prevent="goNext"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="button-icon arrow-icon"
|
class="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-button-icon-height: 3em;
|
|
||||||
$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.media-modal-view {
|
.modal-view.media-modal-view {
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.modal-view-button-arrow,
|
.modal-view-button-arrow {
|
||||||
.modal-view-button-hide {
|
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
|
|
@ -133,15 +67,12 @@ $modal-view-button-icon-margin: 0.5em;
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-modal-view {
|
|
||||||
@keyframes media-fadein {
|
@keyframes media-fadein {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -151,73 +82,21 @@ $modal-view-button-icon-margin: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-image-container {
|
|
||||||
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 {
|
.modal-image {
|
||||||
max-width: 100%;
|
max-width: 90%;
|
||||||
max-height: 100%;
|
max-height: 90%;
|
||||||
|
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
|
||||||
image-orientation: from-image; // NOTE: only FF supports this
|
image-orientation: from-image; // NOTE: only FF supports this
|
||||||
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
|
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
|
||||||
|
|
||||||
&.loading {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-spinner {
|
.modal-view-button-arrow {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
display: block;
|
||||||
display: flex;
|
top: 50%;
|
||||||
justify-content: center;
|
margin-top: -50px;
|
||||||
align-items: center;
|
width: 70px;
|
||||||
|
height: 100px;
|
||||||
svg {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-view-button {
|
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -227,33 +106,14 @@ $modal-view-button-icon-margin: 0.5em;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
|
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: 14px;
|
|
||||||
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 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 35px;
|
||||||
line-height: $modal-view-button-icon-height;
|
height: 30px;
|
||||||
|
width: 32px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 30px;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: rgba(0,0,0,.3);
|
background-color: rgba(0,0,0,.3);
|
||||||
|
|
@ -262,25 +122,14 @@ $modal-view-button-icon-margin: 0.5em;
|
||||||
&--prev {
|
&--prev {
|
||||||
left: 0;
|
left: 0;
|
||||||
.arrow-icon {
|
.arrow-icon {
|
||||||
left: $modal-view-button-icon-margin;
|
left: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--next {
|
&--next {
|
||||||
right: 0;
|
right: 0;
|
||||||
.arrow-icon {
|
.arrow-icon {
|
||||||
right: $modal-view-button-icon-margin;
|
right: 6px;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-view-button-hide {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
.button-icon {
|
|
||||||
top: $modal-view-button-icon-margin;
|
|
||||||
right: $modal-view-button-icon-margin;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,9 @@
|
||||||
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 {
|
|
||||||
faAt
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
|
|
||||||
library.add(
|
|
||||||
faAt
|
|
||||||
)
|
|
||||||
|
|
||||||
const MentionLink = {
|
const MentionLink = {
|
||||||
name: 'MentionLink',
|
name: 'MentionLink',
|
||||||
components: {
|
|
||||||
UserAvatar
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
url: {
|
url: {
|
||||||
required: true,
|
required: true,
|
||||||
|
|
@ -25,47 +13,37 @@ const MentionLink = {
|
||||||
required: true,
|
required: true,
|
||||||
type: String
|
type: String
|
||||||
},
|
},
|
||||||
userId: {
|
firstMention: {
|
||||||
required: false,
|
required: false,
|
||||||
type: String
|
type: Boolean,
|
||||||
},
|
default: false
|
||||||
userScreenName: {
|
|
||||||
required: false,
|
|
||||||
type: String
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onClick () {
|
onClick () {
|
||||||
const link = generateProfileLink(
|
const link = generateProfileLink(this.user.id, this.user.screen_name)
|
||||||
this.userId || this.user.id,
|
|
||||||
this.userScreenName || this.user.screen_name
|
|
||||||
)
|
|
||||||
this.$router.push(link)
|
this.$router.push(link)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
user () {
|
user () {
|
||||||
return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
|
return this.$store.getters.findUserByUrl(this.url)
|
||||||
},
|
},
|
||||||
isYou () {
|
isYou () {
|
||||||
// FIXME why user !== currentUser???
|
// FIXME why user !== currentUser???
|
||||||
return this.user && this.user.id === this.currentUser.id
|
return this.user.screen_name === this.currentUser.screen_name
|
||||||
},
|
},
|
||||||
userName () {
|
userName () {
|
||||||
return this.user && this.userNameFullUi.split('@')[0]
|
return 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.screen_name
|
||||||
},
|
},
|
||||||
userNameFullUi () {
|
userNameFullUi () {
|
||||||
return this.user && this.user.screen_name_ui
|
return this.user.screen_name_ui
|
||||||
},
|
},
|
||||||
highlight () {
|
highlight () {
|
||||||
return this.user && this.mergedConfig.highlight[this.user.screen_name]
|
return this.mergedConfig.highlight[this.user.screen_name]
|
||||||
},
|
},
|
||||||
highlightType () {
|
highlightType () {
|
||||||
return this.highlight && ('-' + this.highlight.type)
|
return this.highlight && ('-' + this.highlight.type)
|
||||||
|
|
@ -73,6 +51,12 @@ const MentionLink = {
|
||||||
highlightClass () {
|
highlightClass () {
|
||||||
if (this.highlight) return highlightClass(this.user)
|
if (this.highlight) return highlightClass(this.user)
|
||||||
},
|
},
|
||||||
|
oldPlace () {
|
||||||
|
return this.mergedConfig.mentionsOldPlace
|
||||||
|
},
|
||||||
|
oldStyle () {
|
||||||
|
return this.mergedConfig.mentionsOldStyle
|
||||||
|
},
|
||||||
style () {
|
style () {
|
||||||
if (this.highlight) {
|
if (this.highlight) {
|
||||||
const {
|
const {
|
||||||
|
|
@ -87,43 +71,14 @@ const MentionLink = {
|
||||||
classnames () {
|
classnames () {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
'-you': this.isYou && this.shouldBoldenYou,
|
'-you': this.isYou,
|
||||||
'-highlighted': this.highlight
|
'-highlighted': this.highlight,
|
||||||
|
'-firstMention': this.firstMention,
|
||||||
|
'-oldStyle': this.oldStyle
|
||||||
},
|
},
|
||||||
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
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,18 @@
|
||||||
@import '../../_variables.scss';
|
|
||||||
|
|
||||||
.MentionLink {
|
.MentionLink {
|
||||||
position: relative;
|
position: relative;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
display: inline;
|
display: inline-block;
|
||||||
color: var(--link);
|
color: var(--link);
|
||||||
word-break: normal;
|
margin-right: 0.25em;
|
||||||
|
|
||||||
& .new,
|
& .new,
|
||||||
& .original {
|
& .original {
|
||||||
display: inline;
|
display: inline-block;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mention-avatar {
|
.original {
|
||||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
opacity: 0.5;
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
vertical-align: middle;
|
|
||||||
user-select: none;
|
|
||||||
margin-right: 0.2em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.full {
|
.full {
|
||||||
|
|
@ -36,21 +29,13 @@
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
margin-top: 0.25em;
|
margin-top: 0.25em;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
user-select: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .short.-with-tooltip,
|
|
||||||
& .you {
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& .short,
|
& .short,
|
||||||
& .full {
|
& .full {
|
||||||
white-space: nowrap;
|
&::before {
|
||||||
|
content: '@';
|
||||||
}
|
}
|
||||||
|
|
||||||
.shortName {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.new {
|
.new {
|
||||||
|
|
@ -61,18 +46,47 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.at {
|
&:not(.-oldStyle) {
|
||||||
color: var(--link);
|
.short {
|
||||||
opacity: 0.8;
|
line-height: 1.5;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
color: var(--faint);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
height: 50%;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding: 0 0.1em;
|
vertical-align: 6%;
|
||||||
vertical-align: -25%;
|
}
|
||||||
margin: 0;
|
}
|
||||||
|
|
||||||
|
.you {
|
||||||
|
padding-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.short {
|
||||||
|
padding-left: 0.25em;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userName {
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--link);
|
||||||
|
line-height: inherit;
|
||||||
|
margin-left: 0.125em;
|
||||||
|
padding-left: 0.125em;
|
||||||
|
padding-right: 0.25em;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
border-top-right-radius: var(--btnRadius);
|
||||||
|
border-bottom-right-radius: var(--btnRadius);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-striped {
|
&.-striped {
|
||||||
& .shortName,
|
& .userName,
|
||||||
& .full {
|
& .full {
|
||||||
background-image:
|
background-image:
|
||||||
repeating-linear-gradient(
|
repeating-linear-gradient(
|
||||||
|
|
@ -86,30 +100,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-solid {
|
&.-solid {
|
||||||
& .shortName,
|
& .userName,
|
||||||
& .full {
|
& .full {
|
||||||
background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
|
background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-side {
|
&.-side {
|
||||||
& .shortName,
|
& .userName,
|
||||||
& .userNameFull {
|
& .userNameFull {
|
||||||
box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
|
box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:not(.-oldPlace) {
|
||||||
|
.new.-firstMention {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:hover .new .full {
|
&:hover .new .full {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: initial;
|
pointer-events: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.serverName.-faded {
|
|
||||||
color: var(--faintLink, $fallback--link);
|
|
||||||
}
|
|
||||||
|
|
||||||
.full .-faded {
|
|
||||||
color: var(--faint, $fallback--faint);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,75 +1,42 @@
|
||||||
<template>
|
<template>
|
||||||
<span
|
<span
|
||||||
class="MentionLink"
|
class="MentionLink"
|
||||||
|
:class="{ '-oldPlace': oldPlace }"
|
||||||
>
|
>
|
||||||
<!-- eslint-disable vue/no-v-html -->
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
<a
|
<a
|
||||||
v-if="!user"
|
v-if="!user"
|
||||||
:href="url"
|
href="url"
|
||||||
class="original"
|
class="original"
|
||||||
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"
|
||||||
:class="classnames"
|
:class="classnames"
|
||||||
>
|
>
|
||||||
<a
|
<button
|
||||||
class="short button-unstyled"
|
class="short"
|
||||||
:class="{ '-with-tooltip': shouldShowTooltip }"
|
:class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
|
||||||
:href="url"
|
|
||||||
@click.prevent="onClick"
|
@click.prevent="onClick"
|
||||||
>
|
>
|
||||||
<!-- eslint-disable vue/no-v-html -->
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
<UserAvatar
|
<span class="shortName"><span class="userName" v-html="userName" /></span><span class="you" v-if="isYou">{{ $t('status.you')}}</span>
|
||||||
v-if="shouldShowAvatar"
|
|
||||||
class="mention-avatar"
|
|
||||||
:user="user"
|
|
||||||
/><span
|
|
||||||
class="shortName"
|
|
||||||
><FAIcon
|
|
||||||
v-if="useAtIcon"
|
|
||||||
size="sm"
|
|
||||||
icon="at"
|
|
||||||
class="at"
|
|
||||||
/>{{ !useAtIcon ? '@' : '' }}<span
|
|
||||||
class="userName"
|
|
||||||
v-html="userName"
|
|
||||||
/><span
|
|
||||||
v-if="shouldShowFullUserName"
|
|
||||||
class="serverName"
|
|
||||||
:class="{ '-faded': shouldFadeDomain }"
|
|
||||||
v-html="'@' + serverName"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-if="isYou && shouldShowYous"
|
|
||||||
:class="{ '-you': shouldBoldenYou }"
|
|
||||||
> {{ ' ' + $t('status.you') }}</span>
|
|
||||||
<!-- eslint-enable vue/no-v-html -->
|
<!-- eslint-enable vue/no-v-html -->
|
||||||
</a><span
|
</button>
|
||||||
v-if="shouldShowTooltip"
|
<span
|
||||||
|
v-if="userName !== userNameFull"
|
||||||
class="full popover-default"
|
class="full popover-default"
|
||||||
:class="[highlightType]"
|
:class="[highlightType]"
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="userNameFull"
|
|
||||||
>
|
>
|
||||||
<!-- eslint-disable vue/no-v-html -->
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
@<span
|
<span class="userNameFull" v-html="userNameFull" />
|
||||||
class="userName"
|
|
||||||
v-html="userName"
|
|
||||||
/><span
|
|
||||||
class="serverName"
|
|
||||||
:class="{ '-faded': shouldFadeDomain }"
|
|
||||||
v-html="'@' + serverName"
|
|
||||||
/>
|
|
||||||
<!-- eslint-enable vue/no-v-html -->
|
<!-- eslint-enable vue/no-v-html -->
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script src="./mention_link.js"/>
|
<script src="./mention_link.js"/>
|
||||||
|
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
import MentionLink from 'src/components/mention_link/mention_link.vue'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
|
|
||||||
export const MENTIONS_LIMIT = 5
|
|
||||||
|
|
||||||
const MentionsLine = {
|
|
||||||
name: 'MentionsLine',
|
|
||||||
props: {
|
|
||||||
mentions: {
|
|
||||||
required: true,
|
|
||||||
type: Array
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: () => ({ expanded: false }),
|
|
||||||
components: {
|
|
||||||
MentionLink
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
mentionsComputed () {
|
|
||||||
return this.mentions.slice(0, MENTIONS_LIMIT)
|
|
||||||
},
|
|
||||||
extraMentions () {
|
|
||||||
return this.mentions.slice(MENTIONS_LIMIT)
|
|
||||||
},
|
|
||||||
manyMentions () {
|
|
||||||
return this.extraMentions.length > 0
|
|
||||||
},
|
|
||||||
...mapGetters(['mergedConfig'])
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleShowMore () {
|
|
||||||
this.expanded = !this.expanded
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MentionsLine
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
.MentionsLine {
|
|
||||||
word-break: break-all;
|
|
||||||
|
|
||||||
.mention-link:not(:first-child)::before {
|
|
||||||
content: ' ';
|
|
||||||
}
|
|
||||||
|
|
||||||
.showMoreLess {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
white-space: normal;
|
|
||||||
color: var(--link);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<template>
|
|
||||||
<span class="MentionsLine">
|
|
||||||
<MentionLink
|
|
||||||
v-for="mention in mentionsComputed"
|
|
||||||
:key="mention.index"
|
|
||||||
class="mention-link"
|
|
||||||
:content="mention.content"
|
|
||||||
:url="mention.url"
|
|
||||||
/><span
|
|
||||||
v-if="manyMentions"
|
|
||||||
class="extraMentions"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="expanded"
|
|
||||||
class="fullExtraMentions"
|
|
||||||
>
|
|
||||||
<MentionLink
|
|
||||||
v-for="mention in extraMentions"
|
|
||||||
:key="mention.index"
|
|
||||||
class="mention-link"
|
|
||||||
:content="mention.content"
|
|
||||||
:url="mention.url"
|
|
||||||
/>
|
|
||||||
</span><button
|
|
||||||
v-if="!expanded"
|
|
||||||
class="button-unstyled showMoreLess"
|
|
||||||
@click="toggleShowMore"
|
|
||||||
>
|
|
||||||
{{ $t('status.plus_more', { number: extraMentions.length }) }}
|
|
||||||
</button><button
|
|
||||||
v-if="expanded"
|
|
||||||
class="button-unstyled showMoreLess"
|
|
||||||
@click="toggleShowMore"
|
|
||||||
>
|
|
||||||
{{ $t('general.show_less') }}
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<script src="./mentions_line.js" ></script>
|
|
||||||
<style lang="scss" src="./mentions_line.scss" />
|
|
||||||
|
|
@ -56,15 +56,11 @@
|
||||||
>
|
>
|
||||||
<div class="alert error">
|
<div class="alert error">
|
||||||
{{ error }}
|
{{ error }}
|
||||||
<button
|
|
||||||
class="button-unstyled"
|
|
||||||
@click="clearError"
|
|
||||||
>
|
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
icon="times"
|
icon="times"
|
||||||
|
@click="clearError"
|
||||||
/>
|
/>
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -58,16 +58,12 @@
|
||||||
>
|
>
|
||||||
<div class="alert error">
|
<div class="alert error">
|
||||||
{{ error }}
|
{{ error }}
|
||||||
<button
|
|
||||||
class="button-unstyled"
|
|
||||||
@click="clearError"
|
|
||||||
>
|
|
||||||
<FAIcon
|
<FAIcon
|
||||||
size="lg"
|
size="lg"
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
icon="times"
|
icon="times"
|
||||||
|
@click="clearError"
|
||||||
/>
|
/>
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -99,9 +99,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
a {
|
|
||||||
color: var(--topBarLink, $fallback--link);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-inner-nav {
|
.mobile-inner-nav {
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ const MobilePostStatusButton = {
|
||||||
}
|
}
|
||||||
window.addEventListener('resize', this.handleOSK)
|
window.addEventListener('resize', this.handleOSK)
|
||||||
},
|
},
|
||||||
unmounted () {
|
destroyed () {
|
||||||
if (this.autohideFloatingPostButton) {
|
if (this.autohideFloatingPostButton) {
|
||||||
this.deactivateFloatingPostButtonAutohide()
|
this.deactivateFloatingPostButtonAutohide()
|
||||||
}
|
}
|
||||||
|
|
@ -44,9 +44,6 @@ const MobilePostStatusButton = {
|
||||||
|
|
||||||
return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
|
return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
|
||||||
},
|
},
|
||||||
isPersistent () {
|
|
||||||
return !!this.$store.getters.mergedConfig.showNewPostButton
|
|
||||||
},
|
|
||||||
autohideFloatingPostButton () {
|
autohideFloatingPostButton () {
|
||||||
return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
|
return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
<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 }"
|
||||||
: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>
|
||||||
|
|
@ -14,8 +15,7 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
.MobilePostButton {
|
.new-status-button {
|
||||||
&.button-default {
|
|
||||||
width: 5em;
|
width: 5em;
|
||||||
height: 5em;
|
height: 5em;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
|
@ -34,7 +34,6 @@
|
||||||
|
|
||||||
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%);
|
||||||
|
|
@ -48,7 +47,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 801px) {
|
@media all and (min-width: 801px) {
|
||||||
.new-status-button:not(.always-show) {
|
.new-status-button {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -132,7 +132,7 @@
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
</Popover>
|
</Popover>
|
||||||
<teleport to="#modal">
|
<portal 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>
|
||||||
</teleport>
|
</portal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,56 +1,17 @@
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import { get } from 'lodash'
|
import { get } from 'lodash'
|
||||||
|
|
||||||
/**
|
|
||||||
* This is for backwards compatibility. We originally didn't recieve
|
|
||||||
* extra info like a reason why an instance was rejected/quarantined/etc.
|
|
||||||
* Because we didn't want to break backwards compatibility it was decided
|
|
||||||
* to add an extra "info" key.
|
|
||||||
*/
|
|
||||||
const toInstanceReasonObject = (instances, info, key) => {
|
|
||||||
return instances.map(instance => {
|
|
||||||
if (info[key] && info[key][instance] && info[key][instance]['reason']) {
|
|
||||||
return { instance: instance, reason: info[key][instance]['reason'] }
|
|
||||||
}
|
|
||||||
return { instance: instance, reason: '' }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const MRFTransparencyPanel = {
|
const MRFTransparencyPanel = {
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
federationPolicy: state => get(state, 'instance.federationPolicy'),
|
federationPolicy: state => get(state, 'instance.federationPolicy'),
|
||||||
mrfPolicies: state => get(state, 'instance.federationPolicy.mrf_policies', []),
|
mrfPolicies: state => get(state, 'instance.federationPolicy.mrf_policies', []),
|
||||||
quarantineInstances: state => toInstanceReasonObject(
|
quarantineInstances: state => get(state, 'instance.federationPolicy.quarantined_instances', []),
|
||||||
get(state, 'instance.federationPolicy.quarantined_instances', []),
|
acceptInstances: state => get(state, 'instance.federationPolicy.mrf_simple.accept', []),
|
||||||
get(state, 'instance.federationPolicy.quarantined_instances_info', []),
|
rejectInstances: state => get(state, 'instance.federationPolicy.mrf_simple.reject', []),
|
||||||
'quarantined_instances'
|
ftlRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
|
||||||
),
|
mediaNsfwInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
|
||||||
acceptInstances: state => toInstanceReasonObject(
|
mediaRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
|
||||||
get(state, 'instance.federationPolicy.mrf_simple.accept', []),
|
|
||||||
get(state, 'instance.federationPolicy.mrf_simple_info', []),
|
|
||||||
'accept'
|
|
||||||
),
|
|
||||||
rejectInstances: state => toInstanceReasonObject(
|
|
||||||
get(state, 'instance.federationPolicy.mrf_simple.reject', []),
|
|
||||||
get(state, 'instance.federationPolicy.mrf_simple_info', []),
|
|
||||||
'reject'
|
|
||||||
),
|
|
||||||
ftlRemovalInstances: state => toInstanceReasonObject(
|
|
||||||
get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
|
|
||||||
get(state, 'instance.federationPolicy.mrf_simple_info', []),
|
|
||||||
'federated_timeline_removal'
|
|
||||||
),
|
|
||||||
mediaNsfwInstances: state => toInstanceReasonObject(
|
|
||||||
get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
|
|
||||||
get(state, 'instance.federationPolicy.mrf_simple_info', []),
|
|
||||||
'media_nsfw'
|
|
||||||
),
|
|
||||||
mediaRemovalInstances: state => toInstanceReasonObject(
|
|
||||||
get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
|
|
||||||
get(state, 'instance.federationPolicy.mrf_simple_info', []),
|
|
||||||
'media_removal'
|
|
||||||
),
|
|
||||||
keywordsFtlRemoval: state => get(state, 'instance.federationPolicy.mrf_keyword.federated_timeline_removal', []),
|
keywordsFtlRemoval: state => get(state, 'instance.federationPolicy.mrf_keyword.federated_timeline_removal', []),
|
||||||
keywordsReject: state => get(state, 'instance.federationPolicy.mrf_keyword.reject', []),
|
keywordsReject: state => get(state, 'instance.federationPolicy.mrf_keyword.reject', []),
|
||||||
keywordsReplace: state => get(state, 'instance.federationPolicy.mrf_keyword.replace', [])
|
keywordsReplace: state => get(state, 'instance.federationPolicy.mrf_keyword.replace', [])
|
||||||
|
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
.mrf-section {
|
|
||||||
margin: 1em;
|
|
||||||
|
|
||||||
table {
|
|
||||||
width:100%;
|
|
||||||
text-align: left;
|
|
||||||
padding-left:10px;
|
|
||||||
padding-bottom:20px;
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
width: 180px;
|
|
||||||
max-width: 360px;
|
|
||||||
overflow: hidden;
|
|
||||||
vertical-align: text-top;
|
|
||||||
}
|
|
||||||
|
|
||||||
th+th, td+td {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -31,24 +31,13 @@
|
||||||
|
|
||||||
<p>{{ $t("about.mrf.simple.accept_desc") }}</p>
|
<p>{{ $t("about.mrf.simple.accept_desc") }}</p>
|
||||||
|
|
||||||
<table>
|
<ul>
|
||||||
<tr>
|
<li
|
||||||
<th>{{ $t("about.mrf.simple.instance") }}</th>
|
v-for="instance in acceptInstances"
|
||||||
<th>{{ $t("about.mrf.simple.reason") }}</th>
|
:key="instance"
|
||||||
</tr>
|
v-text="instance"
|
||||||
<tr
|
/>
|
||||||
v-for="entry in acceptInstances"
|
</ul>
|
||||||
:key="entry.instance + '_accept'"
|
|
||||||
>
|
|
||||||
<td>{{ entry.instance }}</td>
|
|
||||||
<td v-if="entry.reason === ''">
|
|
||||||
{{ $t("about.mrf.simple.not_applicable") }}
|
|
||||||
</td>
|
|
||||||
<td v-else>
|
|
||||||
{{ entry.reason }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="rejectInstances.length">
|
<div v-if="rejectInstances.length">
|
||||||
|
|
@ -56,24 +45,13 @@
|
||||||
|
|
||||||
<p>{{ $t("about.mrf.simple.reject_desc") }}</p>
|
<p>{{ $t("about.mrf.simple.reject_desc") }}</p>
|
||||||
|
|
||||||
<table>
|
<ul>
|
||||||
<tr>
|
<li
|
||||||
<th>{{ $t("about.mrf.simple.instance") }}</th>
|
v-for="instance in rejectInstances"
|
||||||
<th>{{ $t("about.mrf.simple.reason") }}</th>
|
:key="instance"
|
||||||
</tr>
|
v-text="instance"
|
||||||
<tr
|
/>
|
||||||
v-for="entry in rejectInstances"
|
</ul>
|
||||||
:key="entry.instance + '_reject'"
|
|
||||||
>
|
|
||||||
<td>{{ entry.instance }}</td>
|
|
||||||
<td v-if="entry.reason === ''">
|
|
||||||
{{ $t("about.mrf.simple.not_applicable") }}
|
|
||||||
</td>
|
|
||||||
<td v-else>
|
|
||||||
{{ entry.reason }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="quarantineInstances.length">
|
<div v-if="quarantineInstances.length">
|
||||||
|
|
@ -81,24 +59,13 @@
|
||||||
|
|
||||||
<p>{{ $t("about.mrf.simple.quarantine_desc") }}</p>
|
<p>{{ $t("about.mrf.simple.quarantine_desc") }}</p>
|
||||||
|
|
||||||
<table>
|
<ul>
|
||||||
<tr>
|
<li
|
||||||
<th>{{ $t("about.mrf.simple.instance") }}</th>
|
v-for="instance in quarantineInstances"
|
||||||
<th>{{ $t("about.mrf.simple.reason") }}</th>
|
:key="instance"
|
||||||
</tr>
|
v-text="instance"
|
||||||
<tr
|
/>
|
||||||
v-for="entry in quarantineInstances"
|
</ul>
|
||||||
:key="entry.instance + '_quarantine'"
|
|
||||||
>
|
|
||||||
<td>{{ entry.instance }}</td>
|
|
||||||
<td v-if="entry.reason === ''">
|
|
||||||
{{ $t("about.mrf.simple.not_applicable") }}
|
|
||||||
</td>
|
|
||||||
<td v-else>
|
|
||||||
{{ entry.reason }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="ftlRemovalInstances.length">
|
<div v-if="ftlRemovalInstances.length">
|
||||||
|
|
@ -106,24 +73,13 @@
|
||||||
|
|
||||||
<p>{{ $t("about.mrf.simple.ftl_removal_desc") }}</p>
|
<p>{{ $t("about.mrf.simple.ftl_removal_desc") }}</p>
|
||||||
|
|
||||||
<table>
|
<ul>
|
||||||
<tr>
|
<li
|
||||||
<th>{{ $t("about.mrf.simple.instance") }}</th>
|
v-for="instance in ftlRemovalInstances"
|
||||||
<th>{{ $t("about.mrf.simple.reason") }}</th>
|
:key="instance"
|
||||||
</tr>
|
v-text="instance"
|
||||||
<tr
|
/>
|
||||||
v-for="entry in ftlRemovalInstances"
|
</ul>
|
||||||
:key="entry.instance + '_ftl_removal'"
|
|
||||||
>
|
|
||||||
<td>{{ entry.instance }}</td>
|
|
||||||
<td v-if="entry.reason === ''">
|
|
||||||
{{ $t("about.mrf.simple.not_applicable") }}
|
|
||||||
</td>
|
|
||||||
<td v-else>
|
|
||||||
{{ entry.reason }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="mediaNsfwInstances.length">
|
<div v-if="mediaNsfwInstances.length">
|
||||||
|
|
@ -131,24 +87,13 @@
|
||||||
|
|
||||||
<p>{{ $t("about.mrf.simple.media_nsfw_desc") }}</p>
|
<p>{{ $t("about.mrf.simple.media_nsfw_desc") }}</p>
|
||||||
|
|
||||||
<table>
|
<ul>
|
||||||
<tr>
|
<li
|
||||||
<th>{{ $t("about.mrf.simple.instance") }}</th>
|
v-for="instance in mediaNsfwInstances"
|
||||||
<th>{{ $t("about.mrf.simple.reason") }}</th>
|
:key="instance"
|
||||||
</tr>
|
v-text="instance"
|
||||||
<tr
|
/>
|
||||||
v-for="entry in mediaNsfwInstances"
|
</ul>
|
||||||
:key="entry.instance + '_media_nsfw'"
|
|
||||||
>
|
|
||||||
<td>{{ entry.instance }}</td>
|
|
||||||
<td v-if="entry.reason === ''">
|
|
||||||
{{ $t("about.mrf.simple.not_applicable") }}
|
|
||||||
</td>
|
|
||||||
<td v-else>
|
|
||||||
{{ entry.reason }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="mediaRemovalInstances.length">
|
<div v-if="mediaRemovalInstances.length">
|
||||||
|
|
@ -156,24 +101,13 @@
|
||||||
|
|
||||||
<p>{{ $t("about.mrf.simple.media_removal_desc") }}</p>
|
<p>{{ $t("about.mrf.simple.media_removal_desc") }}</p>
|
||||||
|
|
||||||
<table>
|
<ul>
|
||||||
<tr>
|
<li
|
||||||
<th>{{ $t("about.mrf.simple.instance") }}</th>
|
v-for="instance in mediaRemovalInstances"
|
||||||
<th>{{ $t("about.mrf.simple.reason") }}</th>
|
:key="instance"
|
||||||
</tr>
|
v-text="instance"
|
||||||
<tr
|
/>
|
||||||
v-for="entry in mediaRemovalInstances"
|
</ul>
|
||||||
:key="entry.instance + '_media_removal'"
|
|
||||||
>
|
|
||||||
<td>{{ entry.instance }}</td>
|
|
||||||
<td v-if="entry.reason === ''">
|
|
||||||
{{ $t("about.mrf.simple.not_applicable") }}
|
|
||||||
</td>
|
|
||||||
<td v-else>
|
|
||||||
{{ entry.reason }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 v-if="hasKeywordPolicies">
|
<h2 v-if="hasKeywordPolicies">
|
||||||
|
|
@ -227,6 +161,7 @@
|
||||||
<script src="./mrf_transparency_panel.js"></script>
|
<script src="./mrf_transparency_panel.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../_variables.scss';
|
.mrf-section {
|
||||||
@import './mrf_transparency_panel.scss';
|
margin: 1em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ import Status from '../status/status.vue'
|
||||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||||
import UserCard from '../user_card/user_card.vue'
|
import UserCard from '../user_card/user_card.vue'
|
||||||
import Timeago from '../timeago/timeago.vue'
|
import Timeago from '../timeago/timeago.vue'
|
||||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
|
||||||
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
|
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
|
||||||
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
|
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
|
||||||
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'
|
||||||
|
|
@ -45,8 +44,7 @@ const Notification = {
|
||||||
UserAvatar,
|
UserAvatar,
|
||||||
UserCard,
|
UserCard,
|
||||||
Timeago,
|
Timeago,
|
||||||
Status,
|
Status
|
||||||
RichContent
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleUserExpanded () {
|
toggleUserExpanded () {
|
||||||
|
|
|
||||||
|
|
@ -2,19 +2,6 @@
|
||||||
|
|
||||||
// TODO Copypaste from Status, should unify it somehow
|
// TODO Copypaste from Status, should unify it somehow
|
||||||
.Notification {
|
.Notification {
|
||||||
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;
|
||||||
height: 1.2em;
|
height: 1.2em;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<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"
|
||||||
/>
|
/>
|
||||||
|
|
@ -33,7 +32,7 @@
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
class="avatar-container"
|
class="avatar-container"
|
||||||
:href="$router.resolve(userProfileLink).href"
|
:href="notification.from_profile.statusnet_profile_url"
|
||||||
@click.stop.prevent.capture="toggleUserExpanded"
|
@click.stop.prevent.capture="toggleUserExpanded"
|
||||||
>
|
>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
|
|
@ -52,29 +51,23 @@
|
||||||
<span class="notification-details">
|
<span class="notification-details">
|
||||||
<div class="name-and-action">
|
<div class="name-and-action">
|
||||||
<!-- eslint-disable vue/no-v-html -->
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
<bdi v-if="!!notification.from_profile.name_html">
|
<bdi
|
||||||
<RichContent
|
v-if="!!notification.from_profile.name_html"
|
||||||
class="username"
|
class="username"
|
||||||
:title="'@'+notification.from_profile.screen_name_ui"
|
:title="'@'+notification.from_profile.screen_name_ui"
|
||||||
:html="notification.from_profile.name_html"
|
v-html="notification.from_profile.name_html"
|
||||||
:emoji="notification.from_profile.emoji"
|
|
||||||
/>
|
/>
|
||||||
</bdi>
|
|
||||||
<!-- eslint-enable vue/no-v-html -->
|
<!-- eslint-enable vue/no-v-html -->
|
||||||
<span
|
<span
|
||||||
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'">
|
||||||
|
|
@ -83,7 +76,6 @@
|
||||||
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'">
|
||||||
|
|
@ -91,7 +83,6 @@
|
||||||
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'">
|
||||||
|
|
@ -99,7 +90,6 @@
|
||||||
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'">
|
||||||
|
|
@ -107,17 +97,13 @@
|
||||||
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-t
|
<i18n path="notifications.reacted_with">
|
||||||
scope="global"
|
|
||||||
keypath="notifications.reacted_with"
|
|
||||||
>
|
|
||||||
<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
|
<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
|
||||||
</i18n-t>
|
</i18n>
|
||||||
</small>
|
</small>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -171,27 +157,19 @@
|
||||||
<div
|
<div
|
||||||
v-if="notification.type === 'follow_request'"
|
v-if="notification.type === 'follow_request'"
|
||||||
style="white-space: nowrap;"
|
style="white-space: nowrap;"
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="button-unstyled"
|
|
||||||
:title="$t('tool_tip.accept_follow_request')"
|
|
||||||
@click="approveUser()"
|
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
icon="check"
|
icon="check"
|
||||||
class="fa-scale-110 fa-old-padding follow-request-accept"
|
class="fa-scale-110 fa-old-padding follow-request-accept"
|
||||||
|
:title="$t('tool_tip.accept_follow_request')"
|
||||||
|
@click="approveUser()"
|
||||||
/>
|
/>
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="button-unstyled"
|
|
||||||
:title="$t('tool_tip.reject_follow_request')"
|
|
||||||
@click="denyUser()"
|
|
||||||
>
|
|
||||||
<FAIcon
|
<FAIcon
|
||||||
icon="times"
|
icon="times"
|
||||||
class="fa-scale-110 fa-old-padding follow-request-reject"
|
class="fa-scale-110 fa-old-padding follow-request-reject"
|
||||||
|
:title="$t('tool_tip.reject_follow_request')"
|
||||||
|
@click="denyUser()"
|
||||||
/>
|
/>
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
@ -203,9 +181,8 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<StatusContent
|
<status-content
|
||||||
class="faint"
|
class="faint"
|
||||||
:compact="true"
|
|
||||||
:status="notification.action"
|
:status="notification.action"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,11 @@
|
||||||
|
|
||||||
.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 {
|
||||||
|
|
@ -64,6 +69,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.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);
|
||||||
|
|
@ -71,6 +78,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.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);
|
||||||
|
|
@ -139,6 +148,13 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
vertical-align: middle;
|
||||||
|
object-fit: contain
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeago {
|
.timeago {
|
||||||
|
|
|
||||||
|
|
@ -11,21 +11,21 @@
|
||||||
</label>
|
</label>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
v-if="typeof fallback !== 'undefined'"
|
v-if="typeof fallback !== 'undefined'"
|
||||||
:model-value="present"
|
:checked="present"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
class="opt"
|
class="opt"
|
||||||
@update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
|
@change="$emit('input', !present ? fallback : undefined)"
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
:id="name"
|
:id="name"
|
||||||
class="input-number"
|
class="input-number"
|
||||||
type="number"
|
type="number"
|
||||||
:value="modelValue || fallback"
|
:value="value || fallback"
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
max="1"
|
max="1"
|
||||||
min="0"
|
min="0"
|
||||||
step=".05"
|
step=".05"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
@input="$emit('input', $event.target.value)"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -37,12 +37,11 @@ export default {
|
||||||
Checkbox
|
Checkbox
|
||||||
},
|
},
|
||||||
props: [
|
props: [
|
||||||
'name', 'modelValue', 'fallback', 'disabled'
|
'name', 'value', 'fallback', 'disabled'
|
||||||
],
|
],
|
||||||
emits: ['update:modelValue'],
|
|
||||||
computed: {
|
computed: {
|
||||||
present () {
|
present () {
|
||||||
return typeof this.modelValue !== 'undefined'
|
return typeof this.value !== 'undefined'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
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)()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
<template>
|
|
||||||
<pinch-zoom
|
|
||||||
class="pinch-zoom-parent"
|
|
||||||
v-bind="$attrs"
|
|
||||||
v-on="$listeners"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</pinch-zoom>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script src="./pinch_zoom.js"></script>
|
|
||||||
|
|
@ -1,14 +1,10 @@
|
||||||
import Timeago from 'components/timeago/timeago.vue'
|
import Timeago from '../timeago/timeago.vue'
|
||||||
import RichContent from 'components/rich_content/rich_content.jsx'
|
|
||||||
import { forEach, map } from 'lodash'
|
import { forEach, map } from 'lodash'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Poll',
|
name: 'Poll',
|
||||||
props: ['basePoll', 'emoji'],
|
props: ['basePoll'],
|
||||||
components: {
|
components: { Timeago },
|
||||||
Timeago,
|
|
||||||
RichContent
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
|
|
@ -21,7 +17,7 @@ export default {
|
||||||
}
|
}
|
||||||
this.$store.dispatch('trackPoll', this.pollId)
|
this.$store.dispatch('trackPoll', this.pollId)
|
||||||
},
|
},
|
||||||
unmounted () {
|
destroyed () {
|
||||||
this.$store.dispatch('untrackPoll', this.pollId)
|
this.$store.dispatch('untrackPoll', this.pollId)
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
|
|
@ -17,11 +17,8 @@
|
||||||
<span class="result-percentage">
|
<span class="result-percentage">
|
||||||
{{ percentageForOption(option.votes_count) }}%
|
{{ percentageForOption(option.votes_count) }}%
|
||||||
</span>
|
</span>
|
||||||
<RichContent
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||||
:html="option.title_html"
|
<span v-html="option.title_html" />
|
||||||
:handle-links="false"
|
|
||||||
:emoji="emoji"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="result-fill"
|
class="result-fill"
|
||||||
|
|
@ -45,11 +42,8 @@
|
||||||
:value="index"
|
:value="index"
|
||||||
>
|
>
|
||||||
<label class="option-vote">
|
<label class="option-vote">
|
||||||
<RichContent
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||||
:html="option.title_html"
|
<div v-html="option.title_html" />
|
||||||
:handle-links="false"
|
|
||||||
:emoji="emoji"
|
|
||||||
/>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -71,18 +65,13 @@
|
||||||
{{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} ·
|
{{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} ·
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<span>
|
<i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
|
||||||
<i18n-t
|
|
||||||
scope="global"
|
|
||||||
:keypath="expired ? 'polls.expired' : 'polls.expires_in'"
|
|
||||||
>
|
|
||||||
<Timeago
|
<Timeago
|
||||||
:time="expiresAt"
|
:time="expiresAt"
|
||||||
:auto-update="60"
|
:auto-update="60"
|
||||||
:now-threshold="0"
|
:now-threshold="0"
|
||||||
/>
|
/>
|
||||||
</i18n-t>
|
</i18n>
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,6 @@
|
||||||
:max="maxExpirationInCurrentUnit"
|
:max="maxExpirationInCurrentUnit"
|
||||||
@change="expiryAmountChange"
|
@change="expiryAmountChange"
|
||||||
>
|
>
|
||||||
{{ ' ' }}
|
|
||||||
<Select
|
<Select
|
||||||
v-model="expiryUnit"
|
v-model="expiryUnit"
|
||||||
unstyled="true"
|
unstyled="true"
|
||||||
|
|
|
||||||
|
|
@ -178,7 +178,7 @@ const Popover = {
|
||||||
created () {
|
created () {
|
||||||
document.addEventListener('click', this.onClickOutside)
|
document.addEventListener('click', this.onClickOutside)
|
||||||
},
|
},
|
||||||
unmounted () {
|
destroyed () {
|
||||||
document.removeEventListener('click', this.onClickOutside)
|
document.removeEventListener('click', this.onClickOutside)
|
||||||
this.hidePopover()
|
this.hidePopover()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
.popover-trigger-button {
|
.popover-trigger-button {
|
||||||
display: inline-block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover {
|
.popover {
|
||||||
|
|
@ -149,30 +149,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ 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'
|
||||||
|
|
@ -78,12 +77,6 @@ const PostStatusForm = {
|
||||||
'emojiPickerPlacement',
|
'emojiPickerPlacement',
|
||||||
'optimisticPosting'
|
'optimisticPosting'
|
||||||
],
|
],
|
||||||
emits: [
|
|
||||||
'posted',
|
|
||||||
'resize',
|
|
||||||
'mediaplay',
|
|
||||||
'mediapause'
|
|
||||||
],
|
|
||||||
components: {
|
components: {
|
||||||
MediaUpload,
|
MediaUpload,
|
||||||
EmojiInput,
|
EmojiInput,
|
||||||
|
|
@ -92,8 +85,7 @@ const PostStatusForm = {
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Select,
|
Select,
|
||||||
Attachment,
|
Attachment,
|
||||||
StatusContent,
|
StatusContent
|
||||||
Gallery
|
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.updateIdempotencyKey()
|
this.updateIdempotencyKey()
|
||||||
|
|
@ -396,21 +388,6 @@ 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)
|
||||||
|
|
|
||||||
|
|
@ -18,12 +18,11 @@
|
||||||
<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
|
<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<i18n-t
|
<i18n
|
||||||
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
|
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
|
||||||
keypath="post_status.account_not_locked_warning"
|
path="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"
|
||||||
|
|
@ -31,7 +30,7 @@
|
||||||
>
|
>
|
||||||
{{ $t('post_status.account_not_locked_warning_link') }}
|
{{ $t('post_status.account_not_locked_warning_link') }}
|
||||||
</button>
|
</button>
|
||||||
</i18n-t>
|
</i18n>
|
||||||
<p
|
<p
|
||||||
v-if="!hideScopeNotice && newStatus.visibility === 'public'"
|
v-if="!hideScopeNotice && newStatus.visibility === 'public'"
|
||||||
class="visibility-notice notice-dismissible"
|
class="visibility-notice notice-dismissible"
|
||||||
|
|
@ -282,32 +281,38 @@
|
||||||
class="alert error"
|
class="alert error"
|
||||||
>
|
>
|
||||||
Error: {{ error }}
|
Error: {{ error }}
|
||||||
<button
|
|
||||||
class="button-unstyled"
|
|
||||||
@click="clearError"
|
|
||||||
>
|
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
icon="times"
|
icon="times"
|
||||||
|
@click="clearError"
|
||||||
/>
|
/>
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<gallery
|
<div class="attachments">
|
||||||
v-if="newStatus.files && newStatus.files.length > 0"
|
<div
|
||||||
class="attachments"
|
v-for="file in newStatus.files"
|
||||||
:grid="true"
|
:key="file.url"
|
||||||
:nsfw="false"
|
class="media-upload-wrapper"
|
||||||
:attachments="newStatus.files"
|
>
|
||||||
:descriptions="newStatus.mediaDescriptions"
|
<button
|
||||||
|
class="button-unstyled hider"
|
||||||
|
@click="removeMediaFile(file)"
|
||||||
|
>
|
||||||
|
<FAIcon icon="times" />
|
||||||
|
</button>
|
||||||
|
<attachment
|
||||||
|
:attachment="file"
|
||||||
:set-media="() => $store.dispatch('setMedia', newStatus.files)"
|
:set-media="() => $store.dispatch('setMedia', newStatus.files)"
|
||||||
:editable="true"
|
size="small"
|
||||||
:edit-attachment="editAttachment"
|
allow-play="false"
|
||||||
: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)"
|
|
||||||
/>
|
/>
|
||||||
|
<input
|
||||||
|
v-model="newStatus.mediaDescriptions[file.id]"
|
||||||
|
type="text"
|
||||||
|
:placeholder="$t('post_status.media_description')"
|
||||||
|
@keydown.enter.prevent=""
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
|
v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
|
||||||
class="upload_settings"
|
class="upload_settings"
|
||||||
|
|
@ -325,13 +330,26 @@
|
||||||
<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;
|
||||||
|
|
@ -489,6 +507,15 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.attachments .media-upload-wrapper {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.attachment {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -589,4 +616,11 @@
|
||||||
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>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ const PublicAndExternalTimeline = {
|
||||||
created () {
|
created () {
|
||||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' })
|
this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' })
|
||||||
},
|
},
|
||||||
unmounted () {
|
destroyed () {
|
||||||
this.$store.dispatch('stopFetchingTimeline', 'publicAndExternal')
|
this.$store.dispatch('stopFetchingTimeline', 'publicAndExternal')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ const PublicTimeline = {
|
||||||
created () {
|
created () {
|
||||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'public' })
|
this.$store.dispatch('startFetchingTimeline', { timeline: 'public' })
|
||||||
},
|
},
|
||||||
unmounted () {
|
destroyed () {
|
||||||
this.$store.dispatch('stopFetchingTimeline', 'public')
|
this.$store.dispatch('stopFetchingTimeline', 'public')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
class="opt"
|
class="opt"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
:checked="present"
|
:checked="present"
|
||||||
@change="$emit('update:modelValue', !present ? fallback : undefined)"
|
@input="$emit('input', !present ? fallback : undefined)"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
v-if="typeof fallback !== 'undefined'"
|
v-if="typeof fallback !== 'undefined'"
|
||||||
|
|
@ -26,23 +26,23 @@
|
||||||
:id="name"
|
:id="name"
|
||||||
class="input-number"
|
class="input-number"
|
||||||
type="range"
|
type="range"
|
||||||
:value="modelValue || fallback"
|
:value="value || fallback"
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
:max="max || hardMax || 100"
|
:max="max || hardMax || 100"
|
||||||
:min="min || hardMin || 0"
|
:min="min || hardMin || 0"
|
||||||
:step="step || 1"
|
:step="step || 1"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
@input="$emit('input', $event.target.value)"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
:id="name"
|
:id="name"
|
||||||
class="input-number"
|
class="input-number"
|
||||||
type="number"
|
type="number"
|
||||||
:value="modelValue || fallback"
|
:value="value || fallback"
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
:max="hardMax"
|
:max="hardMax"
|
||||||
:min="hardMin"
|
:min="hardMin"
|
||||||
:step="step || 1"
|
:step="step || 1"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
@input="$emit('input', $event.target.value)"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -50,12 +50,11 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: [
|
props: [
|
||||||
'name', 'modelValue', 'fallback', 'disabled', 'label', 'max', 'min', 'step', 'hardMin', 'hardMax'
|
'name', 'value', 'fallback', 'disabled', 'label', 'max', 'min', 'step', 'hardMin', 'hardMax'
|
||||||
],
|
],
|
||||||
emits: ['update:modelValue'],
|
|
||||||
computed: {
|
computed: {
|
||||||
present () {
|
present () {
|
||||||
return typeof this.modelValue !== 'undefined'
|
return typeof this.value !== 'undefined'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import useVuelidate from '@vuelidate/core'
|
import { validationMixin } from 'vuelidate'
|
||||||
import { required, requiredIf, sameAs } from '@vuelidate/validators'
|
import { required, requiredIf, sameAs } from 'vuelidate/lib/validators'
|
||||||
import { mapActions, mapState } from 'vuex'
|
import { mapActions, mapState } from 'vuex'
|
||||||
|
|
||||||
const registration = {
|
const registration = {
|
||||||
setup () { return { v$: useVuelidate() } },
|
mixins: [validationMixin],
|
||||||
data: () => ({
|
data: () => ({
|
||||||
user: {
|
user: {
|
||||||
email: '',
|
email: '',
|
||||||
|
|
@ -24,7 +24,7 @@ const registration = {
|
||||||
password: { required },
|
password: { required },
|
||||||
confirm: {
|
confirm: {
|
||||||
required,
|
required,
|
||||||
sameAs: sameAs(this.user.password)
|
sameAsPassword: sameAs('password')
|
||||||
},
|
},
|
||||||
reason: { required: requiredIf(() => this.accountApprovalRequired) }
|
reason: { required: requiredIf(() => this.accountApprovalRequired) }
|
||||||
}
|
}
|
||||||
|
|
@ -65,9 +65,9 @@ const registration = {
|
||||||
this.user.captcha_token = this.captcha.token
|
this.user.captcha_token = this.captcha.token
|
||||||
this.user.captcha_answer_data = this.captcha.answer_data
|
this.user.captcha_answer_data = this.captcha.answer_data
|
||||||
|
|
||||||
this.v$.$touch()
|
this.$v.$touch()
|
||||||
|
|
||||||
if (!this.v$.$invalid) {
|
if (!this.$v.$invalid) {
|
||||||
try {
|
try {
|
||||||
await this.signUp(this.user)
|
await this.signUp(this.user)
|
||||||
this.$router.push({ name: 'friends' })
|
this.$router.push({ name: 'friends' })
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<div class="text-fields">
|
<div class="text-fields">
|
||||||
<div
|
<div
|
||||||
class="form-group"
|
class="form-group"
|
||||||
:class="{ 'form-group--error': v$.user.username.$error }"
|
:class="{ 'form-group--error': $v.user.username.$error }"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="form--label"
|
class="form--label"
|
||||||
|
|
@ -20,18 +20,18 @@
|
||||||
>{{ $t('login.username') }}</label>
|
>{{ $t('login.username') }}</label>
|
||||||
<input
|
<input
|
||||||
id="sign-up-username"
|
id="sign-up-username"
|
||||||
v-model.trim="v$.user.username.$model"
|
v-model.trim="$v.user.username.$model"
|
||||||
:disabled="isPending"
|
:disabled="isPending"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
:placeholder="$t('registration.username_placeholder')"
|
:placeholder="$t('registration.username_placeholder')"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="v$.user.username.$dirty"
|
v-if="$v.user.username.$dirty"
|
||||||
class="form-error"
|
class="form-error"
|
||||||
>
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-if="!v$.user.username.required">
|
<li v-if="!$v.user.username.required">
|
||||||
<span>{{ $t('registration.validations.username_required') }}</span>
|
<span>{{ $t('registration.validations.username_required') }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="form-group"
|
class="form-group"
|
||||||
:class="{ 'form-group--error': v$.user.fullname.$error }"
|
:class="{ 'form-group--error': $v.user.fullname.$error }"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="form--label"
|
class="form--label"
|
||||||
|
|
@ -47,18 +47,18 @@
|
||||||
>{{ $t('registration.fullname') }}</label>
|
>{{ $t('registration.fullname') }}</label>
|
||||||
<input
|
<input
|
||||||
id="sign-up-fullname"
|
id="sign-up-fullname"
|
||||||
v-model.trim="v$.user.fullname.$model"
|
v-model.trim="$v.user.fullname.$model"
|
||||||
:disabled="isPending"
|
:disabled="isPending"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
:placeholder="$t('registration.fullname_placeholder')"
|
:placeholder="$t('registration.fullname_placeholder')"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="v$.user.fullname.$dirty"
|
v-if="$v.user.fullname.$dirty"
|
||||||
class="form-error"
|
class="form-error"
|
||||||
>
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-if="!v$.user.fullname.required">
|
<li v-if="!$v.user.fullname.required">
|
||||||
<span>{{ $t('registration.validations.fullname_required') }}</span>
|
<span>{{ $t('registration.validations.fullname_required') }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="form-group"
|
class="form-group"
|
||||||
:class="{ 'form-group--error': v$.user.email.$error }"
|
:class="{ 'form-group--error': $v.user.email.$error }"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="form--label"
|
class="form--label"
|
||||||
|
|
@ -74,18 +74,18 @@
|
||||||
>{{ $t('registration.email') }}</label>
|
>{{ $t('registration.email') }}</label>
|
||||||
<input
|
<input
|
||||||
id="email"
|
id="email"
|
||||||
v-model="v$.user.email.$model"
|
v-model="$v.user.email.$model"
|
||||||
:disabled="isPending"
|
:disabled="isPending"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
type="email"
|
type="email"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="v$.user.email.$dirty"
|
v-if="$v.user.email.$dirty"
|
||||||
class="form-error"
|
class="form-error"
|
||||||
>
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-if="!v$.user.email.required">
|
<li v-if="!$v.user.email.required">
|
||||||
<span>{{ $t('registration.validations.email_required') }}</span>
|
<span>{{ $t('registration.validations.email_required') }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -107,7 +107,7 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="form-group"
|
class="form-group"
|
||||||
:class="{ 'form-group--error': v$.user.password.$error }"
|
:class="{ 'form-group--error': $v.user.password.$error }"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="form--label"
|
class="form--label"
|
||||||
|
|
@ -122,11 +122,11 @@
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="v$.user.password.$dirty"
|
v-if="$v.user.password.$dirty"
|
||||||
class="form-error"
|
class="form-error"
|
||||||
>
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-if="!v$.user.password.required">
|
<li v-if="!$v.user.password.required">
|
||||||
<span>{{ $t('registration.validations.password_required') }}</span>
|
<span>{{ $t('registration.validations.password_required') }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -134,7 +134,7 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="form-group"
|
class="form-group"
|
||||||
:class="{ 'form-group--error': v$.user.confirm.$error }"
|
:class="{ 'form-group--error': $v.user.confirm.$error }"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="form--label"
|
class="form--label"
|
||||||
|
|
@ -149,14 +149,14 @@
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="v$.user.confirm.$dirty"
|
v-if="$v.user.confirm.$dirty"
|
||||||
class="form-error"
|
class="form-error"
|
||||||
>
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-if="!v$.user.confirm.required">
|
<li v-if="!$v.user.confirm.required">
|
||||||
<span>{{ $t('registration.validations.password_confirmation_required') }}</span>
|
<span>{{ $t('registration.validations.password_confirmation_required') }}</span>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="!v$.user.confirm.sameAsPassword">
|
<li v-if="!$v.user.confirm.sameAsPassword">
|
||||||
<span>{{ $t('registration.validations.password_confirmation_match') }}</span>
|
<span>{{ $t('registration.validations.password_confirmation_match') }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,19 @@
|
||||||
|
import Vue from 'vue'
|
||||||
import { unescape, flattenDeep } from 'lodash'
|
import { unescape, flattenDeep } from 'lodash'
|
||||||
import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
|
import { convertHtml, getTagName, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
|
||||||
import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
|
|
||||||
import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
|
|
||||||
import StillImage from 'src/components/still-image/still-image.vue'
|
import StillImage from 'src/components/still-image/still-image.vue'
|
||||||
import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
|
import MentionLink from 'src/components/mention_link/mention_link.vue'
|
||||||
import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
|
|
||||||
|
|
||||||
import './rich_content.scss'
|
import './rich_content.scss'
|
||||||
|
|
||||||
/**
|
export default Vue.component('RichContent', {
|
||||||
* RichContent, The Über-powered component for rendering Post HTML.
|
|
||||||
*
|
|
||||||
* This takes post HTML and does multiple things to it:
|
|
||||||
* - Groups all mentions into <MentionsLine>, this affects all mentions regardles
|
|
||||||
* of where they are (beginning/middle/end), even single mentions are converted
|
|
||||||
* to a <MentionsLine> containing single <MentionLink>.
|
|
||||||
* - Replaces emoji shortcodes with <StillImage>'d images.
|
|
||||||
*
|
|
||||||
* There are two problems with this component's architecture:
|
|
||||||
* 1. Parsing HTML and rendering are inseparable. Attempts to separate the two
|
|
||||||
* proven to be a massive overcomplication due to amount of things done here.
|
|
||||||
* 2. We need to output both render and some extra data, which seems to be imp-
|
|
||||||
* possible in vue. Current solution is to emit 'parseReady' event when parsing
|
|
||||||
* is done within render() function.
|
|
||||||
*
|
|
||||||
* Apart from that one small hiccup with emit in render this _should_ be vue3-ready
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'RichContent',
|
name: 'RichContent',
|
||||||
components: {
|
|
||||||
MentionsLine,
|
|
||||||
HashtagLink
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
// Original html content
|
// Original html content
|
||||||
html: {
|
html: {
|
||||||
required: true,
|
required: true,
|
||||||
type: String
|
type: String
|
||||||
},
|
},
|
||||||
attentions: {
|
|
||||||
required: false,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
// Emoji object, as in status.emojis, note the "s" at the end...
|
// Emoji object, as in status.emojis, note the "s" at the end...
|
||||||
emoji: {
|
emoji: {
|
||||||
required: true,
|
required: true,
|
||||||
|
|
@ -52,86 +24,40 @@ export default {
|
||||||
required: false,
|
required: false,
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
|
||||||
// Meme arrows
|
|
||||||
greentext: {
|
|
||||||
required: false,
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// NEVER EVER TOUCH DATA INSIDE RENDER
|
render (h) {
|
||||||
render () {
|
|
||||||
// Pre-process HTML
|
|
||||||
const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
|
|
||||||
let currentMentions = null // Current chain of mentions, we group all mentions together
|
|
||||||
// This is used to recover spacing removed when parsing mentions
|
|
||||||
let lastSpacing = ''
|
|
||||||
|
|
||||||
const lastTags = [] // Tags that appear at the end of post body
|
|
||||||
const writtenMentions = [] // All mentions that appear in post body
|
|
||||||
const invisibleMentions = [] // All mentions that go beyond the limiter (see MentionsLine)
|
|
||||||
// to collapse too many mentions in a row
|
|
||||||
const writtenTags = [] // All tags that appear in post body
|
|
||||||
// unique index for vue "tag" property
|
|
||||||
let mentionIndex = 0
|
|
||||||
let tagsIndex = 0
|
|
||||||
|
|
||||||
const renderImage = (tag) => {
|
const renderImage = (tag) => {
|
||||||
return <StillImage
|
return <StillImage
|
||||||
{...getAttrs(tag)}
|
{...{ attrs: getAttrs(tag) }}
|
||||||
class="img"
|
class="img"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
const renderMention = (attrs, children, encounteredText) => {
|
||||||
const renderHashtag = (attrs, children, encounteredTextReverse) => {
|
return <MentionLink
|
||||||
const { index, ...linkData } = getLinkData(attrs, children, tagsIndex++)
|
url={attrs.href}
|
||||||
writtenTags.push(linkData)
|
content={flattenDeep(children).join('')}
|
||||||
if (!encounteredTextReverse) {
|
firstMention={!encounteredText}
|
||||||
lastTags.push(linkData)
|
/>
|
||||||
}
|
|
||||||
const { url, tag, content } = linkData
|
|
||||||
return <HashtagLink url={url} tag={tag} content={content}/>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderMention = (attrs, children) => {
|
let encounteredText = false
|
||||||
const linkData = getLinkData(attrs, children, mentionIndex++)
|
// Processor to use with mini_html_converter
|
||||||
linkData.notifying = this.attentions.some(a => a.statusnet_profile_url === linkData.url)
|
const processItem = (item) => {
|
||||||
writtenMentions.push(linkData)
|
// Handle text noes - just add emoji
|
||||||
if (currentMentions === null) {
|
|
||||||
currentMentions = []
|
|
||||||
}
|
|
||||||
currentMentions.push(linkData)
|
|
||||||
if (currentMentions.length > MENTIONS_LIMIT) {
|
|
||||||
invisibleMentions.push(linkData)
|
|
||||||
}
|
|
||||||
if (currentMentions.length === 1) {
|
|
||||||
return <MentionsLine mentions={ currentMentions } />
|
|
||||||
} else {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Processor to use with html_tree_converter
|
|
||||||
const processItem = (item, index, array, what) => {
|
|
||||||
// Handle text nodes - just add emoji
|
|
||||||
if (typeof item === 'string') {
|
if (typeof item === 'string') {
|
||||||
const emptyText = item.trim() === ''
|
const emptyText = item.trim()
|
||||||
if (item.includes('\n')) {
|
if (!emptyText) {
|
||||||
currentMentions = null
|
return encounteredText ? item : item.trim()
|
||||||
}
|
}
|
||||||
if (emptyText) {
|
let unescapedItem = unescape(item)
|
||||||
// don't include spaces when processing mentions - we'll include them
|
if (!encounteredText) {
|
||||||
// in MentionsLine
|
unescapedItem = unescapedItem.trimStart()
|
||||||
lastSpacing = item
|
encounteredText = true
|
||||||
// Don't remove last space in a container (fixes poast mentions)
|
|
||||||
return (index !== array.length - 1) && (currentMentions !== null) ? item.trim() : item
|
|
||||||
}
|
}
|
||||||
|
|
||||||
currentMentions = null
|
|
||||||
if (item.includes(':')) {
|
if (item.includes(':')) {
|
||||||
item = ['', processTextForEmoji(
|
return processTextForEmoji(
|
||||||
item,
|
unescapedItem,
|
||||||
this.emoji,
|
this.emoji,
|
||||||
({ shortcode, url }) => {
|
({ shortcode, url }) => {
|
||||||
return <StillImage
|
return <StillImage
|
||||||
|
|
@ -141,192 +67,37 @@ export default {
|
||||||
alt={`:${shortcode}:`}
|
alt={`:${shortcode}:`}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
)]
|
)
|
||||||
|
} else {
|
||||||
|
return unescapedItem
|
||||||
}
|
}
|
||||||
return item
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle tag nodes
|
// Handle tag nodes
|
||||||
if (Array.isArray(item)) {
|
if (Array.isArray(item)) {
|
||||||
const [opener, children, closer] = item
|
|
||||||
const Tag = getTagName(opener)
|
|
||||||
const attrs = getAttrs(opener)
|
|
||||||
const previouslyMentions = currentMentions !== null
|
|
||||||
/* During grouping of mentions we trim all the empty text elements
|
|
||||||
* This padding is added to recover last space removed in case
|
|
||||||
* we have a tag right next to mentions
|
|
||||||
*/
|
|
||||||
const mentionsLinePadding =
|
|
||||||
// Padding is only needed if we just finished parsing mentions
|
|
||||||
previouslyMentions &&
|
|
||||||
// Don't add padding if content is string and has padding already
|
|
||||||
!(children && typeof children[0] === 'string' && children[0].match(/^\s/))
|
|
||||||
? lastSpacing
|
|
||||||
: ''
|
|
||||||
switch (Tag) {
|
|
||||||
case 'br':
|
|
||||||
currentMentions = null
|
|
||||||
break
|
|
||||||
case 'img': // replace images with StillImage
|
|
||||||
return ['', [mentionsLinePadding, renderImage(opener)], '']
|
|
||||||
case 'a': // replace mentions with MentionLink
|
|
||||||
if (!this.handleLinks) break
|
|
||||||
if (attrs['class'] && attrs['class'].includes('mention')) {
|
|
||||||
// Handling mentions here
|
|
||||||
return renderMention(attrs, children)
|
|
||||||
} else {
|
|
||||||
currentMentions = null
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'span':
|
|
||||||
if (this.handleLinks && attrs['class'] && attrs['class'].includes('h-card')) {
|
|
||||||
return ['', children.map(processItem), '']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (children !== undefined) {
|
|
||||||
return [
|
|
||||||
'',
|
|
||||||
[
|
|
||||||
mentionsLinePadding,
|
|
||||||
[opener, children.map(processItem), closer]
|
|
||||||
],
|
|
||||||
''
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
return ['', [mentionsLinePadding, item], '']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Processor for back direction (for finding "last" stuff, just easier this way)
|
|
||||||
let encounteredTextReverse = false
|
|
||||||
const processItemReverse = (item, index, array, what) => {
|
|
||||||
// Handle text nodes - just add emoji
|
|
||||||
if (typeof item === 'string') {
|
|
||||||
const emptyText = item.trim() === ''
|
|
||||||
if (emptyText) return item
|
|
||||||
if (!encounteredTextReverse) encounteredTextReverse = true
|
|
||||||
return unescape(item)
|
|
||||||
} else if (Array.isArray(item)) {
|
|
||||||
// Handle tag nodes
|
|
||||||
const [opener, children] = item
|
const [opener, children] = item
|
||||||
const Tag = opener === '' ? '' : getTagName(opener)
|
const Tag = getTagName(opener)
|
||||||
switch (Tag) {
|
switch (Tag) {
|
||||||
|
case 'img': // replace images with StillImage
|
||||||
|
return renderImage(opener)
|
||||||
case 'a': // replace mentions with MentionLink
|
case 'a': // replace mentions with MentionLink
|
||||||
if (!this.handleLinks) break
|
if (!this.handleLinks) break
|
||||||
const attrs = getAttrs(opener)
|
const attrs = getAttrs(opener)
|
||||||
// should only be this
|
if (attrs['class'] && attrs['class'].includes('mention')) {
|
||||||
if (
|
return renderMention(attrs, children, encounteredText)
|
||||||
(attrs['class'] && attrs['class'].includes('hashtag')) || // Pleroma style
|
|
||||||
(attrs['rel'] === 'tag') // Mastodon style
|
|
||||||
) {
|
|
||||||
return renderHashtag(attrs, children, encounteredTextReverse)
|
|
||||||
} else {
|
|
||||||
attrs.target = '_blank'
|
|
||||||
const newChildren = [...children].reverse().map(processItemReverse).reverse()
|
|
||||||
|
|
||||||
return <a {...attrs}>
|
|
||||||
{ newChildren }
|
|
||||||
</a>
|
|
||||||
}
|
}
|
||||||
case '':
|
|
||||||
return [...children].reverse().map(processItemReverse).reverse()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Render tag as is
|
// Render tag as is
|
||||||
if (children !== undefined) {
|
if (children !== undefined) {
|
||||||
const newChildren = Array.isArray(children)
|
return <Tag {...{ attrs: getAttrs(opener) }}>
|
||||||
? [...children].reverse().map(processItemReverse).reverse()
|
{ children.map(processItem) }
|
||||||
: children
|
|
||||||
return <Tag {...getAttrs(opener)}>
|
|
||||||
{ newChildren }
|
|
||||||
</Tag>
|
</Tag>
|
||||||
} else {
|
} else {
|
||||||
return <Tag/>
|
return <Tag/>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return item
|
|
||||||
}
|
}
|
||||||
|
return <span class="RichContent">
|
||||||
const pass1 = convertHtmlToTree(html).map(processItem)
|
{ convertHtml(this.html).map(processItem) }
|
||||||
const pass2 = [...pass1].reverse().map(processItemReverse).reverse()
|
|
||||||
// DO NOT USE SLOTS they cause a re-render feedback loop here.
|
|
||||||
// slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
|
|
||||||
// at least until vue3?
|
|
||||||
const result = <span class="RichContent">
|
|
||||||
{ pass2 }
|
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
const event = {
|
|
||||||
lastTags,
|
|
||||||
writtenMentions,
|
|
||||||
writtenTags,
|
|
||||||
invisibleMentions
|
|
||||||
}
|
|
||||||
|
|
||||||
// DO NOT MOVE TO UPDATE. BAD IDEA.
|
|
||||||
this.$emit('parseReady', event)
|
|
||||||
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLinkData = (attrs, children, index) => {
|
|
||||||
const stripTags = (item) => {
|
|
||||||
if (typeof item === 'string') {
|
|
||||||
return item
|
|
||||||
} else {
|
|
||||||
return item[1].map(stripTags).join('')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const textContent = children.map(stripTags).join('')
|
|
||||||
return {
|
|
||||||
index,
|
|
||||||
url: attrs.href,
|
|
||||||
tag: attrs['data-tag'],
|
|
||||||
content: flattenDeep(children).join(''),
|
|
||||||
textContent
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Pre-processing HTML
|
|
||||||
*
|
|
||||||
* Currently this does one thing:
|
|
||||||
* - add green/cyantexting
|
|
||||||
*
|
|
||||||
* @param {String} html - raw HTML to process
|
|
||||||
* @param {Boolean} greentext - whether to enable greentexting or not
|
|
||||||
*/
|
|
||||||
export const preProcessPerLine = (html, greentext) => {
|
|
||||||
const greentextHandle = new Set(['p', 'div'])
|
|
||||||
|
|
||||||
const lines = convertHtmlToLines(html)
|
|
||||||
const newHtml = lines.reverse().map((item, index, array) => {
|
|
||||||
if (!item.text) return item
|
|
||||||
const string = item.text
|
|
||||||
|
|
||||||
// Greentext stuff
|
|
||||||
if (
|
|
||||||
// Only if greentext is engaged
|
|
||||||
greentext &&
|
|
||||||
// Only handle p's and divs. Don't want to affect blockquotes, code etc
|
|
||||||
item.level.every(l => greentextHandle.has(l)) &&
|
|
||||||
// Only if line begins with '>' or '<'
|
|
||||||
(string.includes('>') || string.includes('<'))
|
|
||||||
) {
|
|
||||||
const cleanedString = string.replace(/<[^>]+?>/gi, '') // remove all tags
|
|
||||||
.replace(/@\w+/gi, '') // remove mentions (even failed ones)
|
|
||||||
.trim()
|
|
||||||
if (cleanedString.startsWith('>')) {
|
|
||||||
return `<span class='greentext'>${string}</span>`
|
|
||||||
} else if (cleanedString.startsWith('<')) {
|
|
||||||
return `<span class='cyantext'>${string}</span>`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return string
|
|
||||||
}).reverse().join('')
|
|
||||||
|
|
||||||
return { newHtml }
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji {
|
.emoji {
|
||||||
display: inline-block;
|
|
||||||
width: var(--emoji-size, 32px);
|
width: var(--emoji-size, 32px);
|
||||||
height: var(--emoji-size, 32px);
|
height: var(--emoji-size, 32px);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
{{ ' ' }}
|
|
||||||
<button
|
<button
|
||||||
v-if="showPrivate"
|
v-if="showPrivate"
|
||||||
class="button-unstyled scope"
|
class="button-unstyled scope"
|
||||||
|
|
@ -30,7 +29,6 @@
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
{{ ' ' }}
|
|
||||||
<button
|
<button
|
||||||
v-if="showUnlisted"
|
v-if="showUnlisted"
|
||||||
class="button-unstyled scope"
|
class="button-unstyled scope"
|
||||||
|
|
@ -44,7 +42,6 @@
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
{{ ' ' }}
|
|
||||||
<button
|
<button
|
||||||
v-if="showPublic"
|
v-if="showPublic"
|
||||||
class="button-unstyled scope"
|
class="button-unstyled scope"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import FollowCard from '../follow_card/follow_card.vue'
|
import FollowCard from '../follow_card/follow_card.vue'
|
||||||
import Conversation from '../conversation/conversation.vue'
|
import Conversation from '../conversation/conversation.vue'
|
||||||
import Status from '../status/status.vue'
|
import Status from '../status/status.vue'
|
||||||
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
|
|
||||||
import map from 'lodash/map'
|
import map from 'lodash/map'
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
import {
|
import {
|
||||||
|
|
@ -18,8 +17,7 @@ const Search = {
|
||||||
components: {
|
components: {
|
||||||
FollowCard,
|
FollowCard,
|
||||||
Conversation,
|
Conversation,
|
||||||
Status,
|
Status
|
||||||
TabSwitcher
|
|
||||||
},
|
},
|
||||||
props: [
|
props: [
|
||||||
'query'
|
'query'
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,12 @@ library.add(
|
||||||
)
|
)
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
emits: ['update:modelValue'],
|
model: {
|
||||||
|
prop: 'value',
|
||||||
|
event: 'change'
|
||||||
|
},
|
||||||
props: [
|
props: [
|
||||||
'modelValue',
|
'value',
|
||||||
'disabled',
|
'disabled',
|
||||||
'unstyled',
|
'unstyled',
|
||||||
'kind'
|
'kind'
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<label
|
<label
|
||||||
class="Select input"
|
class="Select input"
|
||||||
|
|
@ -5,12 +6,11 @@
|
||||||
>
|
>
|
||||||
<select
|
<select
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:value="modelValue"
|
:value="value"
|
||||||
@change="$emit('update:modelValue', $event.target.value)"
|
@change="$emit('change', $event.target.value)"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</select>
|
</select>
|
||||||
{{ ' ' }}
|
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="select-down-icon"
|
class="select-down-icon"
|
||||||
icon="chevron-down"
|
icon="chevron-down"
|
||||||
|
|
@ -23,8 +23,7 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
/* TODO fix order of styles */
|
.Select {
|
||||||
label.Select {
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
select {
|
select {
|
||||||
|
|
@ -52,7 +51,6 @@ label.Select {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 0.875em;
|
|
||||||
color: $fallback--text;
|
color: $fallback--text;
|
||||||
color: var(--inputText, $fallback--text);
|
color: var(--inputText, $fallback--text);
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue