Merge remote-tracking branch 'origin/develop' into shigusegubu

* origin/develop: (509 commits)
  Clean up code
  Calculate display count from width
  Load emoji row by row
  Fix header indicator
  Use virtual scrolling for emoji picker
  Remove lozad
  Remove lozad code
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Ukrainian)
  Update dependency chromedriver to v108
  Include unpacked emojis in emoji picker
  Update dependency eslint to v8.31.0
  Fix list membership actions
  Update dependency webpack to v5.75.0
  Update dependency sass-loader to v13.2.0
  Update dependency nightwatch to v2.6.3
  Update dependency mini-css-extract-plugin to v2.7.2
  Translated using Weblate (Esperanto)
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Ukrainian)
  ...
shigusegubu
Henry Jameson 1 year ago
commit 569abbda9d
  1. 2
      .babelrc
  2. 5
      .eslintrc.js
  3. 1
      .gitignore
  4. 25
      .gitlab/issue_templates/Bug.md
  5. 11
      .gitlab/issue_templates/Suggestion.md
  6. 7
      .gitlab/issue_templates/default.md
  7. 30
      .gitlab/merge_request_templates/default.md
  8. 2
      .node-version
  9. 51
      CHANGELOG.md
  10. 2
      CONTRIBUTORS.md
  11. 27
      README.md
  12. 7
      build/build.js
  13. 27
      build/dev-server.js
  14. 27
      build/update-emoji.js
  15. 59
      build/webpack.base.conf.js
  16. 2
      build/webpack.dev.conf.js
  17. 13
      build/webpack.prod.conf.js
  18. BIN
      image-1.png
  19. BIN
      image.png
  20. 1
      index.html
  21. 154
      package.json
  22. 17
      src/App.js
  23. 67
      src/App.scss
  24. 31
      src/App.vue
  25. 17
      src/_mixins.scss
  26. BIN
      src/assets/pleromatan_apology.png
  27. BIN
      src/assets/pleromatan_apology_fox.png
  28. BIN
      src/assets/pleromatan_apology_fox_mask.png
  29. BIN
      src/assets/pleromatan_apology_mask.png
  30. 14
      src/boot/after_store.js
  31. 25
      src/boot/routes.js
  32. 2
      src/components/about/about.vue
  33. 7
      src/components/account_actions/account_actions.js
  34. 12
      src/components/account_actions/account_actions.vue
  35. 108
      src/components/announcement/announcement.js
  36. 136
      src/components/announcement/announcement.vue
  37. 13
      src/components/announcement_editor/announcement_editor.js
  38. 60
      src/components/announcement_editor/announcement_editor.vue
  39. 58
      src/components/announcements_page/announcements_page.js
  40. 79
      src/components/announcements_page/announcements_page.vue
  41. 3
      src/components/attachment/attachment.js
  42. 2
      src/components/avatar_list/avatar_list.vue
  43. 4
      src/components/basic_user_card/basic_user_card.js
  44. 19
      src/components/basic_user_card/basic_user_card.vue
  45. 12
      src/components/chat/chat.js
  46. 2
      src/components/chat_list/chat_list.vue
  47. 10
      src/components/chat_message/chat_message.vue
  48. 4
      src/components/chat_title/chat_title.vue
  49. 4
      src/components/checkbox/checkbox.vue
  50. 8
      src/components/color_input/color_input.scss
  51. 2
      src/components/color_input/color_input.vue
  52. 24
      src/components/conversation/conversation.js
  53. 70
      src/components/conversation/conversation.vue
  54. 24
      src/components/desktop_nav/desktop_nav.js
  55. 24
      src/components/desktop_nav/desktop_nav.scss
  56. 1
      src/components/desktop_nav/desktop_nav.vue
  57. 4
      src/components/domain_mute_card/domain_mute_card.vue
  58. 75
      src/components/edit_status_modal/edit_status_modal.js
  59. 48
      src/components/edit_status_modal/edit_status_modal.vue
  60. 198
      src/components/emoji_input/emoji_input.js
  61. 212
      src/components/emoji_input/emoji_input.vue
  62. 45
      src/components/emoji_input/suggestor.js
  63. 343
      src/components/emoji_picker/emoji_picker.js
  64. 61
      src/components/emoji_picker/emoji_picker.scss
  65. 212
      src/components/emoji_picker/emoji_picker.vue
  66. 84
      src/components/emoji_reactions/emoji_reactions.vue
  67. 51
      src/components/extra_buttons/extra_buttons.js
  68. 68
      src/components/extra_buttons/extra_buttons.vue
  69. 17
      src/components/favorite_button/favorite_button.js
  70. 63
      src/components/favorite_button/favorite_button.vue
  71. 2
      src/components/features_panel/features_panel.vue
  72. 2
      src/components/flash/flash.js
  73. 4
      src/components/follow_card/follow_card.js
  74. 11
      src/components/follow_card/follow_card.vue
  75. 2
      src/components/font_control/font_control.vue
  76. 4
      src/components/global_notice_list/global_notice_list.vue
  77. 4
      src/components/hashtag_link/hashtag_link.vue
  78. 2
      src/components/image_cropper/image_cropper.js
  79. 2
      src/components/instance_specific_panel/instance_specific_panel.vue
  80. 5
      src/components/interactions/interactions.js
  81. 9
      src/components/interactions/interactions.vue
  82. 1
      src/components/interface_language_switcher/interface_language_switcher.vue
  83. 27
      src/components/lists/lists.js
  84. 33
      src/components/lists/lists.vue
  85. 16
      src/components/lists_card/lists_card.js
  86. 51
      src/components/lists_card/lists_card.vue
  87. 145
      src/components/lists_edit/lists_edit.js
  88. 228
      src/components/lists_edit/lists_edit.vue
  89. 22
      src/components/lists_menu/lists_menu_content.js
  90. 12
      src/components/lists_menu/lists_menu_content.vue
  91. 36
      src/components/lists_timeline/lists_timeline.js
  92. 10
      src/components/lists_timeline/lists_timeline.vue
  93. 51
      src/components/lists_user_search/lists_user_search.js
  94. 47
      src/components/lists_user_search/lists_user_search.vue
  95. 2
      src/components/login_form/login_form.js
  96. 2
      src/components/login_form/login_form.vue
  97. 5
      src/components/media_upload/media_upload.js
  98. 2
      src/components/media_upload/media_upload.vue
  99. 2
      src/components/mention_link/mention_link.js
  100. 20
      src/components/mention_link/mention_link.vue
  101. Some files were not shown because too many files have changed in this diff Show More

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

@ -1,7 +1,7 @@
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
parser: '@babel/eslint-parser',
sourceType: 'module'
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
@ -21,6 +21,7 @@ module.exports = {
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'vue/require-prop-types': 0
'vue/require-prop-types': 0,
'vue/multi-word-component-names': 0
}
}

1
.gitignore vendored

@ -7,3 +7,4 @@ test/e2e/reports
selenium-debug.log
.idea/
config/local.json
static/emoji.json

@ -0,0 +1,25 @@
# Environment info
<!-- Everything is optional and where applicable but the more information the better. -->
* Browser, version, OS, platform:
* Instance URL:
* Frontend version (see settings -> about):
* Backend version (see settings -> about):
* Browser extensions (ublock, rikaichamp etc):
* Known instance/user customizations (i.e. pleromafe mods/forks, instance styles etc)
# Bug description & reproduction steps
<!-- Type out here how to reproduce the bug, what goes wrong and what should go right -->
<!-- Screenshots and videos help a lot ;) any observations might also help -->
<!-- Also mention if there any errors in browser's console if relevant -->
# Bug seriousness
<!-- Everything is optional and free-form -->
* How annoying it is:
* How often does it happen:
* How many people does it affect:
* Is there a workaround for it:
/label ~Bug

@ -0,0 +1,11 @@
# Behavior suggestion/Feature request
<!--
Type out what you want to see changed or what feature you want to see added to
PleormaFE. Please also explain how it would benefit users (or admins/moderators)
and what intended usecase is. Any background information (i.e. porting behavior
from other frontends/services, specific situations, personal preferences etc.)
as well as examples would be greatly appreciated.
-->
/label ~suggestion

@ -0,0 +1,7 @@
<!--
please use one of the templates if applicable, otherwise - type out here
in free-form
-->
/label ~needs-triage

@ -0,0 +1,30 @@
<!--
Feel free to submit merge requests that are work-in-progress, but mark them as
Draft: or WIP:.
Merge requests that have Draft or WIP status will not be merged and have less chances
of being reviewed, but you can still ask people to take a look if you need advice.
-->
# Changes
*
*
*
<!-- List what your merge request changes and how -->
<!--
Try to not to break existing behavior, if your changes do break existing behavior
make it configurable to toggle between old behavior and new. Which one should be
default is up to discussion.
-->
<!-- If your merge request resolves some issue link it like so: "Closes #99999" -->
<!--
If merge request adds some new feature that depends on backend:
1. Make sure it gracefully degrades if backend hasn't been updated to support the feature,
we try to make PleromaFE compatible with older versions of BE so that people can still
update frontend safely without updating backend since it's costly and much riskier.
2. Link related BE merge request here
-->
<!-- Screenshots are welcome -->
/label ~needs-review

@ -1 +1 @@
7.2.1
16.18.1

@ -3,51 +3,76 @@ 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/).
## Unreleased
## 2.5.0 - 23.12.2022
### Fixed
- AdminFE button no longer scrolls page to top when clicked
- UI no longer lags when switching between mobile and desktop mode
- Popovers no longer constrained by DOM hierarchy, shouldn't be cut off by anything
- Emoji autocomplete popover and picker popover stick to the text cursor.
- Attachments are ALWAYS in same order as user uploaded, no more "videos first"
- 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
- "Always show mobile button" is working now
- 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
- UI no longer lags when switching between mobile and desktop mode
- Popovers no longer constrained by DOM hierarchy, shouldn't be cut off by anything
- "Always show mobile button" is working now
- Additional HTML sanitization on frontend side in case backend sanitization fails
- Interaction list popovers now properly emojify names
- AdminFE button no longer scrolls page to top when clicked
- User handles with non-ascii domains now have less intrusive indicator for the domain name
- Completely hidden posts still no longer have 1px border
- A lot of accessibility improvements
### Changed
- Using Vue 3 now
- (You)s are optional (opt-in) now, bolding your nickname is also optional (opt-out)
- A lot of internal dependencies updated
- "(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 thoroughly rearranged to make more sense and make navigation 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.
- Notifications about likes/repeats/emoji reacts are now minimized so they always take up same amount of space irrelevant to size of post. (You can expand them to full if need be)
- Slight width/spacing adjustments
- More sizing stuff is font-size dependent now
- Scrollbars are styled/colorized now
- Scrollbars are toggleable (for stuff that didn't have visible scrollbars before) (opt-in)
- Updated localization files
- Top bar is more useful in mobile mode now.
- "Show new" button is way more compact in mobile mode
- Slightly adjusted placement and spacing of the topbar buttons so it's less easy to accidentally log yourself out
### Added
- 3 column mode: only enables when there's space for it (opt-out, customizable)
- Apologetic pleroma-tan
- New button on timeline header to change some of the new and often-used settings
- Support for lists
- Added ability to edit posts and view post edit history etc.
- Added ability to add personal note to users
- Added initial support for admin announcements
- Added ui for account migration
- Added ui for backups
- Added ability to force-unfollow a user from you
- Emoji are now grouped by pack
- Ability to pin navigation items and collapse the navigation menu
- Ability to rearrange order of attachments when uploading
- Ability to scroll column (or page) to top via panel header button
- 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
- Option to customize what clicking user avatar does in user popover
- Notifications for poll results
- "Favorites" link in navigation
- Very early and somewhat experimental system for automatic settings sync (used only for pinned navigation and apologetic pleroma-tan)
- Implemented remote interaction with statuses for anon visitors
- 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
- Timelines/panels and conversations have sticky headers now
- Added frontend ui for account migration
- Timelines/panels and conversations have sticky headers now (a bit glitchy on some browsers like safari) (opt-out)
## [2.4.2] - 2022-01-09

@ -10,3 +10,5 @@ Contributors of this project.
- shpuld (shpuld@shitposter.club): CSS and styling
- Vincent Guth (https://unsplash.com/photos/XrwVIFy6rTw): Background images.
- hj (hj@shigusegubu.club): Code
- Sean King (seanking@kazv.moe): Code
- tusooa (tusooa@kazv.moe): Code

@ -1,18 +1,19 @@
# Pleroma-FE
> A single column frontend designed for Pleroma.
> Highly-customizable frontend designed for Pleroma.
![screenshot](/uploads/796c5ecf985ed1e2b0943ee0df131ed0/DJVqSJ0.png)
![screenshot](./image-1.png)
# For Translators
To translate Pleroma-FE, add your language to [src/i18n/messages.js](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/messages.js). Pleroma-FE will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.
To translate Pleroma-FE, use our weblate server: https://translate.pleroma.social/. If you need to add your language it should be added as a json file in [src/i18n/](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/) folder and added in a list within [src/i18n/languages.js](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/languages.js).
# FOR ADMINS
Pleroma-FE will set your language by your browser locale, but you can change language in settings.
You don't need to build Pleroma-FE yourself. Those using the Pleroma backend will be able to use it out of the box.
# For instance admins
You don't need to build Pleroma-FE yourself. Those using the Pleroma backend will be able to use it out of the box. Information of customizing PleromaFE settings/defaults is in our [guide](https://docs-develop.pleroma.social/frontend/CONFIGURATION/) and in case you want to build your own custom version there's [another](https://docs-develop.pleroma.social/frontend/HACKING/)
## Build Setup
# Build Setup
``` bash
# install dependencies
@ -20,13 +21,13 @@ npm install -g yarn
yarn
# serve with hot reload at localhost:8080
npm run dev
yarn dev
# build for production with minification
npm run build
yarn build
# run unit tests
npm run unit
yarn unit
```
# For Contributors:
@ -40,10 +41,4 @@ FE Build process also leaves current commit hash in global variable `___pleromaf
# Configuration
Edit config.json for configuration.
## Options
### Login methods
```loginMethod``` can be set to either ```password``` (the default) or ```token```, which will use the full oauth redirection flow, which is useful for SSO situations.
Set configuration settings in AdminFE, additionally you can edit config.json. For more details see [documentation](https://docs-develop.pleroma.social/frontend/CONFIGURATION/).

@ -18,6 +18,9 @@ console.log(
var spinner = ora('building for production...')
spinner.start()
var updateEmoji = require('./update-emoji').updateEmoji
updateEmoji()
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
@ -33,4 +36,8 @@ webpack(webpackConfig, function (err, stats) {
chunks: false,
chunkModules: false
}) + '\n')
if (stats.hasErrors()) {
console.error('See above for errors.')
process.exit(1)
}
})

@ -10,6 +10,9 @@ var webpackConfig = process.env.NODE_ENV === 'testing'
? require('./webpack.prod.conf')
: require('./webpack.dev.conf')
var updateEmoji = require('./update-emoji').updateEmoji
updateEmoji()
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// Define HTTP proxies to your custom API backend
@ -29,18 +32,20 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, {
})
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// FIXME: The statement below gives error about hooks being required in webpack 5.
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// FIXME: This supposed to reload whole page when index.html is changed,
// however now it reloads entire page on every breath, i suppose the order
// of plugins changed or something. It's a minor thing and douesn't hurt
// disabling it, constant reloads hurt much more
// compiler.plugin('compilation', function (compilation) {
// compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// // FIXME: This supposed to reload whole page when index.html is changed,
// // however now it reloads entire page on every breath, i suppose the order
// // of plugins changed or something. It's a minor thing and douesn't hurt
// // disabling it, constant reloads hurt much more
// hotMiddleware.publish({ action: 'reload' })
// cb()
})
})
// // hotMiddleware.publish({ action: 'reload' })
// // cb()
// })
// })
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
@ -48,7 +53,7 @@ Object.keys(proxyTable).forEach(function (context) {
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(context, options))
app.use(proxyMiddleware.createProxyMiddleware(context, options))
})
// handle fallback for HTML5 history API

@ -0,0 +1,27 @@
module.exports = {
updateEmoji () {
const emojis = require('@kazvmoe-infra/unicode-emoji-json/data-by-group')
const fs = require('fs')
Object.keys(emojis)
.map(k => {
emojis[k].map(e => {
delete e.unicode_version
delete e.emoji_version
delete e.skin_tone_support_unicode_version
})
})
const res = {}
Object.keys(emojis)
.map(k => {
const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase()
res[groupId] = emojis[k]
})
console.info('Updating emojis...')
fs.writeFileSync('static/emoji.json', JSON.stringify(res))
console.info('Done.')
}
}

@ -2,9 +2,11 @@ var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack5-plugin')
var CopyPlugin = require('copy-webpack-plugin');
var { VueLoaderPlugin } = require('vue-loader')
var ESLintPlugin = require('eslint-webpack-plugin');
var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -22,7 +24,8 @@ module.exports = {
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
filename: '[name].js',
chunkFilename: '[name].js'
},
optimization: {
splitChunks: {
@ -30,7 +33,7 @@ module.exports = {
}
},
resolve: {
extensions: ['.js', '.jsx', '.vue'],
extensions: ['.mjs', '.js', '.jsx', '.vue'],
modules: [
path.join(__dirname, '../node_modules')
],
@ -40,25 +43,15 @@ module.exports = {
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
},
fallback: {
'querystring': require.resolve('querystring-es3'),
'url': require.resolve('url/')
}
},
module: {
noParse: /node_modules\/localforage\/dist\/localforage.js/,
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
include: projectRoot,
exclude: /node_modules/,
use: {
loader: 'eslint-loader',
options: {
formatter: require('eslint-friendly-formatter'),
sourceMap: config.build.productionSourceMap,
extract: true
}
}
},
{
enforce: 'post',
test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
@ -90,24 +83,23 @@ module.exports = {
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
type: 'asset',
generator: {
filename: utils.assetsPath('img/[name].[hash:7][ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
type: 'asset',
generator: {
filename: utils.assetsPath('fonts/[name].[hash:7][ext]')
}
},
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
}
]
},
plugins: [
@ -115,14 +107,17 @@ module.exports = {
entry: path.join(__dirname, '..', 'src/sw.js'),
filename: 'sw-pleroma.js'
}),
new ESLintPlugin({
extensions: ['js', 'vue'],
formatter: require('eslint-formatter-friendly')
}),
new VueLoaderPlugin(),
// This copies Ruffle's WASM to a directory so that JS side can access it
new CopyPlugin({
patterns: [
{
from: "node_modules/@ruffle-rs/ruffle/*",
to: "static/ruffle",
flatten: true
from: "node_modules/@ruffle-rs/ruffle/**/*",
to: "static/ruffle/[name][ext]"
},
],
options: {

@ -16,7 +16,7 @@ module.exports = merge(baseWebpackConfig, {
},
mode: 'development',
// eval-source-map is faster for development
devtool: '#eval-source-map',
devtool: 'eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env,

@ -5,6 +5,7 @@ var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
@ -19,12 +20,16 @@ var webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true })
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
devtool: config.build.productionSourceMap ? 'source-map' : false,
optimization: {
minimize: true,
splitChunks: {
chunks: 'all'
}
},
minimizer: [
`...`,
new CssMinimizerPlugin()
]
},
output: {
path: config.build.assetsRoot,
@ -60,9 +65,7 @@ var webpackConfig = merge(baseWebpackConfig, {
ignoreCustomComments: [/server-generated-meta/]
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}
}),
// split vendor js into its own file
// extract webpack runtime and module manifest to its own file in order to

Binary file not shown.

After

Width:  |  Height:  |  Size: 883 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

@ -15,5 +15,6 @@
<noscript>To use Pleroma, please enable JavaScript.</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<div id="popovers" />
</body>
</html>

@ -1,9 +1,9 @@
{
"name": "pleroma_fe",
"version": "1.0.0",
"description": "A Qvitter-style frontend for certain GS servers.",
"author": "Roger Braun <roger@rogerbraun.net>",
"private": true,
"version": "2.5.0",
"description": "Pleroma frontend, the default frontend of Pleroma social network server",
"author": "Pleroma contributors <https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/CONTRIBUTORS.md>",
"private": false,
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
@ -16,116 +16,114 @@
"lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"@babel/runtime": "7.18.6",
"@babel/runtime": "7.20.7",
"@chenfengyuan/vue-qrcode": "2.0.0",
"@fortawesome/fontawesome-svg-core": "1.3.0",
"@fortawesome/free-regular-svg-icons": "5.15.4",
"@fortawesome/free-solid-svg-icons": "5.15.4",
"@fortawesome/vue-fontawesome": "3.0.1",
"@fortawesome/fontawesome-svg-core": "6.2.1",
"@fortawesome/free-regular-svg-icons": "6.2.1",
"@fortawesome/free-solid-svg-icons": "6.2.1",
"@fortawesome/vue-fontawesome": "3.0.2",
"@kazvmoe-infra/pinch-zoom-element": "1.2.0",
"@ruffle-rs/ruffle": "^0.1.0-nightly.2022.7.12",
"@vuelidate/core": "2.0.0-alpha.42",
"@vuelidate/validators": "2.0.0-alpha.30",
"body-scroll-lock": "2.7.1",
"@kazvmoe-infra/unicode-emoji-json": "0.4.0",
"@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12",
"@vuelidate/core": "2.0.0",
"@vuelidate/validators": "2.0.0",
"body-scroll-lock": "3.1.5",
"chromatism": "3.0.0",
"click-outside-vue3": "4.0.1",
"cropperjs": "1.5.12",
"diff": "3.5.0",
"escape-html": "1.0.3",
"js-cookie": "^3.0.1",
"js-cookie": "3.0.1",
"localforage": "1.10.0",
"parse-link-header": "1.0.1",
"parse-link-header": "2.0.0",
"phoenix": "1.6.2",
"punycode.js": "2.1.0",
"qrcode": "1",
"utf8": "^3.0.0",
"vue": "^3.2.31",
"vue-i18n": "^9.2.0-beta.34",
"vue-router": "4.0.14",
"vue-template-compiler": "2.6.11",
"vuex": "4.0.2"
"qrcode": "1.5.0",
"querystring-es3": "0.2.1",
"url": "0.11.0",
"utf8": "3.0.0",
"vue": "3.2.45",
"vue-i18n": "9.2.2",
"vue-router": "4.1.6",
"vue-template-compiler": "2.7.14",
"vue-virtual-scroller": "^2.0.0-beta.7",
"vuex": "4.1.0"
},
"devDependencies": {
"@babel/core": "7.18.6",
"@babel/plugin-transform-runtime": "7.18.6",
"@babel/preset-env": "7.18.6",
"@babel/register": "7.18.6",
"@intlify/vue-i18n-loader": "^5.0.0",
"@babel/core": "7.20.7",
"@babel/eslint-parser": "7.19.1",
"@babel/plugin-transform-runtime": "7.19.6",
"@babel/preset-env": "7.20.2",
"@babel/register": "7.18.9",
"@intlify/vue-i18n-loader": "5.0.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.4.0",
"@vue/babel-plugin-jsx": "1.1.1",
"@vue/compiler-sfc": "^3.1.0",
"@vue/test-utils": "2.0.0-rc.17",
"autoprefixer": "6.7.7",
"babel-eslint": "7.2.3",
"babel-loader": "8.2.5",
"@vue/compiler-sfc": "3.2.45",
"@vue/test-utils": "2.2.6",
"autoprefixer": "10.4.13",
"babel-loader": "8.3.0",
"babel-plugin-lodash": "3.3.4",
"chai": "3.5.0",
"chai": "4.3.7",
"chalk": "1.1.3",
"chromedriver": "87.0.7",
"connect-history-api-fallback": "1.6.0",
"copy-webpack-plugin": "6.4.1",
"cross-spawn": "4.0.2",
"css-loader": "0.28.11",
"chromedriver": "108.0.0",
"connect-history-api-fallback": "2.0.0",
"copy-webpack-plugin": "11.0.0",
"cross-spawn": "7.0.3",
"css-loader": "6.7.3",
"css-minimizer-webpack-plugin": "4.2.2",
"custom-event-polyfill": "1.0.7",
"eslint": "5.16.0",
"eslint-config-standard": "12.0.0",
"eslint-friendly-formatter": "2.0.7",
"eslint-loader": "2.2.1",
"eslint": "8.31.0",
"eslint-config-standard": "17.0.0",
"eslint-formatter-friendly": "7.0.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-node": "7.0.1",
"eslint-plugin-promise": "4.3.1",
"eslint-plugin-standard": "4.1.0",
"eslint-plugin-vue": "5.2.3",
"eslint-plugin-n": "15.6.0",
"eslint-plugin-promise": "6.1.1",
"eslint-plugin-vue": "9.8.0",
"eslint-webpack-plugin": "3.2.0",
"eventsource-polyfill": "0.9.6",
"express": "4.18.1",
"file-loader": "3.0.1",
"express": "4.18.2",
"function-bind": "1.1.1",
"html-webpack-plugin": "3.2.0",
"http-proxy-middleware": "0.21.0",
"inject-loader": "2.0.1",
"html-webpack-plugin": "5.5.0",
"http-proxy-middleware": "2.0.6",
"iso-639-1": "2.1.15",
"isparta-loader": "2.0.0",
"json-loader": "0.5.7",
"karma": "6.4.0",
"karma-coverage": "1.1.2",
"karma-firefox-launcher": "1.3.0",
"karma": "6.4.1",
"karma-coverage": "2.2.0",
"karma-firefox-launcher": "2.1.2",
"karma-mocha": "2.0.1",
"karma-mocha-reporter": "2.2.5",
"karma-sinon-chai": "2.0.2",
"karma-sourcemap-loader": "0.3.8",
"karma-spec-reporter": "0.0.34",
"karma-webpack": "4.0.2",
"karma-spec-reporter": "0.0.36",
"karma-webpack": "5.0.0",
"lodash": "4.17.21",
"lolex": "1.6.0",
"mini-css-extract-plugin": "0.12.0",
"mocha": "3.5.3",
"nightwatch": "0.9.21",
"opn": "4.0.2",
"mini-css-extract-plugin": "2.7.2",
"mocha": "10.2.0",
"nightwatch": "2.6.3",
"opn": "5.5.0",
"ora": "0.4.1",
"postcss-loader": "3.0.0",
"raw-loader": "0.5.1",
"sass": "1.53.0",
"sass-loader": "7.3.1",
"postcss": "8.4.20",
"postcss-loader": "7.0.2",
"sass": "1.57.1",
"sass-loader": "13.2.0",
"selenium-server": "2.53.1",
"semver": "5.7.1",
"serviceworker-webpack-plugin": "1.0.1",
"semver": "7.3.8",
"serviceworker-webpack5-plugin": "2.0.0",
"shelljs": "0.8.5",
"sinon": "2.4.1",
"sinon-chai": "2.14.0",
"sinon": "14.0.2",
"sinon-chai": "3.7.0",
"stylelint": "13.13.1",
"stylelint-config-standard": "20.0.0",
"stylelint-rscss": "0.4.0",
"url-loader": "1.1.2",
"vue-loader": "^16.0.0",
"vue-style-loader": "4.1.2",
"webpack": "4.46.0",
"vue-loader": "17.0.1",
"vue-style-loader": "4.1.3",
"webpack": "5.75.0",
"webpack-dev-middleware": "3.7.3",
"webpack-hot-middleware": "2.25.1",
"webpack-hot-middleware": "2.25.3",
"webpack-merge": "0.20.0"
},
"engines": {
"node": ">= 4.0.0",
"node": ">= 16.0.0",
"npm": ">= 3.0.0"
}
}

@ -10,7 +10,9 @@ import MobilePostStatusButton from './components/mobile_post_status_button/mobil
import MobileNav from './components/mobile_nav/mobile_nav.vue'
import DesktopNav from './components/desktop_nav/desktop_nav.vue'
import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
import { windowWidth, windowHeight } from './services/window_utils/window_utils'
import { mapGetters } from 'vuex'
@ -32,8 +34,11 @@ export default {
MobileNav,
DesktopNav,
SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')),
UpdateNotification: defineAsyncComponent(() => import('./components/update_notification/update_notification.vue')),
UserReportingModal,
PostStatusModal,
EditStatusModal,
StatusHistoryModal,
GlobalNoticeList
},
data: () => ({
@ -59,6 +64,13 @@ export default {
'-' + this.layoutType
]
},
navClasses () {
const { navbarColumnStretch } = this.$store.getters.mergedConfig
return [
'-' + this.layoutType,
...(navbarColumnStretch ? ['-column-stretch'] : [])
]
},
currentUser () { return this.$store.state.users.currentUser },
userBackground () { return this.currentUser.background_image },
instanceBackground () {
@ -84,11 +96,16 @@ export default {
isChats () {
return this.$route.name === 'chat' || this.$route.name === 'chats'
},
isListEdit () {
return this.$route.name === 'lists-edit'
},
newPostButtonShown () {
if (this.isChats) return false
if (this.isListEdit) return false
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
},
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
editingAvailable () { return this.$store.state.instance.editingAvailable },
shoutboxPosition () {
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
},

@ -5,12 +5,12 @@
--navbar-height: 3.5rem;
--post-line-height: 1.4;
// Z-Index stuff
--ZI_media_modal: 90000;
--ZI_modals_popovers: 85000;
--ZI_modals: 80000;
--ZI_navbar_popovers: 75000;
--ZI_navbar: 70000;
--ZI_popovers: 60000;
--ZI_media_modal: 9000;
--ZI_modals_popovers: 8500;
--ZI_modals: 8000;
--ZI_navbar_popovers: 7500;
--ZI_navbar: 7000;
--ZI_popovers: 6000;
}
html {
@ -117,12 +117,28 @@ h4 {
margin: 0;
}
.iconLetter {
display: inline-block;
text-align: center;
font-weight: 1000;
}
i[class*=icon-],
.svg-inline--fa {
.svg-inline--fa,
.iconLetter {
color: $fallback--icon;
color: var(--icon, $fallback--icon);
}
.button-unstyled:hover,
a:hover {
> i[class*=icon-],
> .svg-inline--fa,
> .iconLetter {
color: var(--text);
}
}
nav {
z-index: var(--ZI_navbar);
color: var(--topBarText);
@ -141,6 +157,11 @@ nav {
grid-area: sidebar;
}
#modal {
position: absolute;
z-index: var(--ZI_modals);
}
.column.-scrollable {
top: var(--navbar-height);
position: sticky;
@ -182,13 +203,18 @@ nav {
.app-layout {
--miniColumn: 25rem;
--maxiColumn: minmax(var(--miniColumn), 45rem);
--maxiColumn: 45rem;
--columnGap: 1em;
--status-margin: 0.75em;
--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
position: relative;
display: grid;
grid-template-columns: var(--miniColumn) var(--maxiColumn);
grid-template-columns:
var(--effectiveSidebarColumnWidth)
var(--effectiveContentColumnWidth);
grid-template-areas: "sidebar content";
grid-template-rows: 1fr;
box-sizing: border-box;
@ -282,15 +308,24 @@ nav {
}
&.-reverse:not(.-wide):not(.-mobile) {
grid-template-columns: var(--maxiColumn) var(--miniColumn);
grid-template-columns:
var(--effectiveContentColumnWidth)
var(--effectiveSidebarColumnWidth);
grid-template-areas: "content sidebar";
}
&.-wide {
grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
grid-template-columns:
var(--effectiveSidebarColumnWidth)
var(--effectiveContentColumnWidth)
var(--effectiveNotifsColumnWidth);
grid-template-areas: "sidebar content notifs";
&.-reverse {
grid-template-columns:
var(--effectiveNotifsColumnWidth)
var(--effectiveContentColumnWidth)
var(--effectiveSidebarColumnWidth);
grid-template-areas: "notifs content sidebar";
}
}
@ -746,17 +781,23 @@ option {
}
.fa-scale-110 {
&.svg-inline--fa {
&.svg-inline--fa,
&.iconLetter {
font-size: 1.1em;
}
}
.fa-old-padding {
&.svg-inline--fa {
&.iconLetter,
&.svg-inline--fa, &-layer {
padding: 0 0.3em;
}
}
.veryfaint {
opacity: 0.25;
}
.login-hint {
text-align: center;

@ -8,15 +8,22 @@
class="app-bg-wrapper"
/>
<MobileNav v-if="layoutType === 'mobile'" />
<DesktopNav v-else />
<DesktopNav
v-else
:class="navClasses"
/>
<Notifications v-if="currentUser" />
<div
id="content"
class="app-layout container"
:class="classes"
>
<div class="underlay"/>
<div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
<div class="underlay" />
<div
id="sidebar"
class="column -scrollable"
:class="{ '-show-scrollbar': showScrollbars }"
>
<user-panel />
<template v-if="layoutType !== 'mobile'">
<nav-panel />
@ -26,7 +33,11 @@
<div id="notifs-sidebar" />
</template>
</div>
<div id="main-scroller" class="column main" :class="{ '-full-height': isChats }">
<main
id="main-scroller"
class="column main"
:class="{ '-full-height': isChats || isListEdit }"
>
<div
v-if="!currentUser"
class="login-hint panel panel-default"
@ -39,8 +50,12 @@
</router-link>
</div>
<router-view />
</div>
<div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
</main>
<div
id="notifs-column"
class="column -scrollable"
:class="{ '-show-scrollbar': showScrollbars }"
/>
</div>
<MediaModal />
<shout-panel
@ -52,10 +67,12 @@
<MobilePostStatusButton />
<UserReportingModal />
<PostStatusModal />
<EditStatusModal v-if="editingAvailable" />
<StatusHistoryModal v-if="editingAvailable" />
<SettingsModal />
<UpdateNotification />
<div id="modal" />
<GlobalNoticeList />
<div id="popovers" />
</div>
</template>

@ -0,0 +1,17 @@
@mixin unfocused-style {
@content;
&:focus:not(:focus-visible):not(:hover) {
@content;
}
}
@mixin focused-style {
&:hover, &:focus {
@content;
}
&:focus-visible {
@content;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 396 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 521 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

@ -1,6 +1,8 @@
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import vClickOutside from 'click-outside-vue3'
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
@ -12,7 +14,7 @@ import { windowWidth, windowHeight } from '../services/window_utils/window_utils
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
import { applyTheme } from '../services/style_setter/style_setter.js'
import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
import FaviconService from '../services/favicon_service/favicon_service.js'
let staticInitialResults = null
@ -156,7 +158,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
copyInstanceOption('hideSitename')
copyInstanceOption('sidebarRight')
return store.dispatch('setTheme', config['theme'])
return store.dispatch('setTheme', config.theme)
}
const getTOS = async ({ store }) => {
@ -197,7 +199,7 @@ const getStickers = async ({ store }) => {
const stickers = (await Promise.all(
Object.entries(values).map(async ([name, path]) => {
const resPack = await window.fetch(path + 'pack.json')
var meta = {}
let meta = {}
if (resPack.ok) {
meta = await resPack.json()
}
@ -251,6 +253,7 @@ const getNodeInfo = async ({ store }) => {
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
@ -319,6 +322,7 @@ const setConfig = async ({ store }) => {
}
const checkOAuthToken = async ({ store }) => {
// eslint-disable-next-line no-async-promise-executor
return new Promise(async (resolve, reject) => {
if (store.getters.getUserToken()) {
try {
@ -359,6 +363,8 @@ const afterStoreSetup = async ({ store, i18n }) => {
console.error('Failed to load any theme!')
}
applyConfig(store.state.config)
// Now we can try getting the server settings and logging in
// Most of these are preloaded into the index.html so blocking is minimized
await Promise.all([
@ -370,6 +376,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
// Start fetching things that don't need to block the UI
store.dispatch('fetchMutes')
store.dispatch('startFetchingAnnouncements')
getTOS({ store })
getStickers({ store })
@ -392,6 +399,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
app.use(vClickOutside)
app.use(VBodyScrollLock)
app.use(VueVirtualScroller)
app.component('FAIcon', FontAwesomeIcon)
app.component('FALayers', FontAwesomeLayers)

@ -20,6 +20,11 @@ import ShoutPanel from 'components/shout_panel/shout_panel.vue'
import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
import About from 'components/about/about.vue'
import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
import Lists from 'components/lists/lists.vue'
import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
import ListsEdit from 'components/lists_edit/lists_edit.vue'
import NavPanel from 'src/components/nav_panel/nav_panel.vue'
import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
export default (store) => {
const validateAuthenticatedRoute = (to, from, next) => {
@ -31,7 +36,8 @@ export default (store) => {
}
let routes = [
{ name: 'root',
{
name: 'root',
path: '/',
redirect: _to => {
return (store.state.users.currentUser
@ -45,17 +51,19 @@ export default (store) => {
{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
{ 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([^/@]+)',
component: RemoteUserResolver,
beforeEnter: validateAuthenticatedRoute
},
{ name: 'remote-user-profile',
{
name: 'remote-user-profile',
path: '/remote-users/:hostname/:username',
component: RemoteUserResolver,
beforeEnter: validateAuthenticatedRoute
},
{ name: 'external-user-profile', path: '/users/:id', component: UserProfile },
{ name: 'external-user-profile', path: '/users/$:id', component: UserProfile },
{ name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
{ name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
{ name: 'registration', path: '/registration', component: Registration },
@ -69,7 +77,14 @@ export default (store) => {
{ 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: 'about', path: '/about', component: About },
{ name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
{ name: 'announcements', path: '/announcements', component: AnnouncementsPage },
{ name: 'user-profile', path: '/users/:name', component: UserProfile },
{ name: 'legacy-user-profile', path: '/:name', component: UserProfile },
{ name: 'lists', path: '/lists', component: Lists },
{ name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
{ name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
{ name: 'lists-new', path: '/lists/new', component: ListsEdit },
{ name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute }
]
if (store.state.instance.pleromaChatMessagesAvailable) {

@ -8,7 +8,7 @@
</div>
</template>
<script src="./about.js" ></script>
<script src="./about.js"></script>
<style lang="scss">
</style>