diff --git a/.eslintrc.js b/.eslintrc.js index 3c48baa893..361cff5f2b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -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 } } diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index ab60117331..305155d84b 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -1,7 +1,7 @@ # 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: # https://hub.docker.com/r/library/node/tags/ -image: node:12 +image: node:16 stages: - lint diff --git a/.node-version b/.node-version index b26a34e470..431076a948 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -7.2.1 +16.16.0 diff --git a/CHANGELOG.md b/CHANGELOG.md index fac68ac04d..b7eea72722 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,17 +16,26 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - 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 ### Changed +- Using Vue 3 now - (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. +- 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. +- 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) ### Added +- 3 column mode: only enables when there's space for it (opt-out, customizable) - Options to show domains in mentions - Option to show user avatars in mention links (opt-in) - Option to disable the tooltip for mentions @@ -37,6 +46,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - 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 diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index f8c544d702..d8a4228dfc 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -5,6 +5,8 @@ var projectRoot = path.resolve(__dirname, '../') var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-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 @@ -30,7 +32,7 @@ module.exports = { } }, resolve: { - extensions: ['.js', '.jsx', '.vue'], + extensions: ['.mjs', '.js', '.jsx', '.vue'], modules: [ path.join(__dirname, '../node_modules') ], @@ -45,20 +47,6 @@ module.exports = { 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 @@ -108,6 +96,11 @@ module.exports = { } } }, + { + test: /\.mjs$/, + include: /node_modules/, + type: 'javascript/auto' + } ] }, plugins: [ @@ -115,12 +108,16 @@ 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-mirror/*", + from: "node_modules/@ruffle-rs/ruffle/*", to: "static/ruffle", flatten: true }, diff --git a/package.json b/package.json index f9c0e436f1..e7033b7548 100644 --- a/package.json +++ b/package.json @@ -16,16 +16,17 @@ "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs" }, "dependencies": { - "@babel/runtime": "7.18.6", + "@babel/runtime": "7.18.9", "@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/fontawesome-svg-core": "6.1.2", + "@fortawesome/free-regular-svg-icons": "6.1.2", + "@fortawesome/free-solid-svg-icons": "6.1.2", "@fortawesome/vue-fontawesome": "3.0.1", "@kazvmoe-infra/pinch-zoom-element": "1.2.0", - "@vuelidate/core": "2.0.0-alpha.42", - "@vuelidate/validators": "2.0.0-alpha.30", - "body-scroll-lock": "2.7.1", + "@ruffle-rs/ruffle": "^0.1.0-nightly.2022.7.12", + "@vuelidate/core": "2.0.0-alpha.43", + "@vuelidate/validators": "2.0.0-alpha.31", + "body-scroll-lock": "3.1.5", "chromatism": "3.0.0", "click-outside-vue3": "4.0.1", "cropperjs": "1.5.12", @@ -37,46 +38,44 @@ "phoenix": "1.6.2", "punycode.js": "2.1.0", "qrcode": "1", - "ruffle-mirror": "2021.12.31", "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", + "vue": "3.2.37", + "vue-i18n": "9.2.0", + "vue-router": "4.1.3", + "vue-template-compiler": "2.7.8", "vuex": "4.0.2" }, "devDependencies": { - "@babel/core": "7.18.6", - "@babel/plugin-transform-runtime": "7.18.6", - "@babel/preset-env": "7.18.6", - "@babel/register": "7.18.6", + "@babel/core": "7.18.9", + "@babel/plugin-transform-runtime": "7.18.9", + "@babel/preset-env": "7.18.9", + "@babel/register": "7.18.9", + "@babel/eslint-parser": "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-plugin-jsx": "1.1.1", - "@vue/compiler-sfc": "^3.1.0", - "@vue/test-utils": "2.0.0-rc.17", + "@vue/compiler-sfc": "3.2.37", + "@vue/test-utils": "2.0.2", "autoprefixer": "6.7.7", - "babel-eslint": "7.2.3", "babel-loader": "8.2.5", "babel-plugin-lodash": "3.3.4", "chai": "3.5.0", "chalk": "1.1.3", - "chromedriver": "87.0.7", + "chromedriver": "103.0.0", "connect-history-api-fallback": "1.6.0", "copy-webpack-plugin": "6.4.1", "cross-spawn": "4.0.2", "css-loader": "0.28.11", "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.20.0", + "eslint-config-standard": "17.0.0", + "eslint-formatter-friendly": "7.0.0", + "eslint-webpack-plugin": "2.7.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.2.4", + "eslint-plugin-promise": "6.0.0", + "eslint-plugin-vue": "9.3.0", "eventsource-polyfill": "0.9.6", "express": "4.18.1", "file-loader": "3.0.1", @@ -105,7 +104,7 @@ "ora": "0.4.1", "postcss-loader": "3.0.0", "raw-loader": "0.5.1", - "sass": "1.53.0", + "sass": "1.54.0", "sass-loader": "7.3.1", "selenium-server": "2.53.1", "semver": "5.7.1", @@ -118,7 +117,7 @@ "stylelint-rscss": "0.4.0", "url-loader": "1.1.2", "vue-loader": "^16.0.0", - "vue-style-loader": "4.1.2", + "vue-style-loader": "4.1.3", "webpack": "4.46.0", "webpack-dev-middleware": "3.7.3", "webpack-hot-middleware": "2.25.1", diff --git a/src/App.js b/src/App.js index f01f878826..d596768599 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,6 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance import FeaturesPanel from './components/features_panel/features_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' import ShoutPanel from './components/shout_panel/shout_panel.vue' -import SettingsModal from './components/settings_modal/settings_modal.vue' import MediaModal from './components/media_modal/media_modal.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue' @@ -32,7 +31,7 @@ export default { MobilePostStatusButton, MobileNav, DesktopNav, - SettingsModal, + SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')), UserReportingModal, PostStatusModal, GlobalNoticeList diff --git a/src/App.scss b/src/App.scss index 7e6d0dfc55..ab025d63f6 100644 --- a/src/App.scss +++ b/src/App.scss @@ -4,6 +4,13 @@ :root { --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; } html { @@ -117,7 +124,7 @@ i[class*=icon-], } nav { - z-index: 1000; + z-index: var(--ZI_navbar); color: var(--topBarText); background-color: $fallback--fg; background-color: var(--topBar, $fallback--fg); @@ -828,7 +835,7 @@ option { // Vue transitions .fade-enter-active, .fade-leave-active { - transition: opacity 0.2s; + transition: opacity 0.3s; } .fade-enter-from, diff --git a/src/App.vue b/src/App.vue index 21f6f6868c..0efadaf041 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,8 +15,12 @@ class="app-layout container" :class="classes" > -
-