Merge branch 'develop' of https://git.pleroma.social/pleroma/pleroma-fe into feat/report-notification
This commit is contained in:
Ilja
commit
18d69f93d3
4
.babelrc
4
.babelrc
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"presets": ["@babel/preset-env", "@vue/babel-preset-jsx"],
|
||||
"plugins": ["@babel/plugin-transform-runtime", "lodash"],
|
||||
"presets": ["@babel/preset-env"],
|
||||
"plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
|
||||
"comments": false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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:10
|
||||
image: node:12
|
||||
|
||||
stages:
|
||||
- lint
|
||||
|
|
|
|||
|
|
@ -37,6 +37,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
|
||||
- Added frontend ui for account migration
|
||||
|
||||
|
||||
## [2.4.2] - 2022-01-09
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ var utils = require('./utils')
|
|||
var projectRoot = path.resolve(__dirname, '../')
|
||||
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
|
||||
var CopyPlugin = require('copy-webpack-plugin');
|
||||
var { VueLoaderPlugin } = require('vue-loader')
|
||||
|
||||
var env = process.env.NODE_ENV
|
||||
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
|
||||
|
|
@ -29,16 +30,16 @@ module.exports = {
|
|||
}
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.vue'],
|
||||
extensions: ['.js', '.jsx', '.vue'],
|
||||
modules: [
|
||||
path.join(__dirname, '../node_modules')
|
||||
],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.runtime.common',
|
||||
'static': path.resolve(__dirname, '../static'),
|
||||
'src': path.resolve(__dirname, '../src'),
|
||||
'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: {
|
||||
|
|
@ -58,9 +59,28 @@ module.exports = {
|
|||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
enforce: 'post',
|
||||
test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
|
||||
type: 'javascript/auto',
|
||||
loader: '@intlify/vue-i18n-loader',
|
||||
include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
|
||||
path.resolve(__dirname, '../src/i18n')
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
use: 'vue-loader'
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
compilerOptions: {
|
||||
isCustomElement(tag) {
|
||||
if (tag === 'pinch-zoom') {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
|
|
@ -95,6 +115,7 @@ module.exports = {
|
|||
entry: path.join(__dirname, '..', 'src/sw.js'),
|
||||
filename: 'sw-pleroma.js'
|
||||
}),
|
||||
new VueLoaderPlugin(),
|
||||
// This copies Ruffle's WASM to a directory so that JS side can access it
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
|
|
|
|||
|
|
@ -21,7 +21,9 @@ module.exports = merge(baseWebpackConfig, {
|
|||
new webpack.DefinePlugin({
|
||||
'process.env': config.dev.env,
|
||||
'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
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
|
|
|
|||
|
|
@ -36,7 +36,9 @@ var webpackConfig = merge(baseWebpackConfig, {
|
|||
new webpack.DefinePlugin({
|
||||
'process.env': env,
|
||||
'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
|
||||
new MiniCssExtractPlugin({
|
||||
|
|
|
|||
|
|
@ -52,7 +52,10 @@ module.exports = {
|
|||
target,
|
||||
changeOrigin: true,
|
||||
cookieDomainRewrite: 'localhost',
|
||||
ws: true
|
||||
ws: true,
|
||||
headers: {
|
||||
'Origin': target
|
||||
}
|
||||
},
|
||||
'/oauth/revoke': {
|
||||
target,
|
||||
|
|
|
|||
85
package.json
85
package.json
|
|
@ -16,44 +16,49 @@
|
|||
"lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "7.17.7",
|
||||
"@chenfengyuan/vue-qrcode": "1.0.2",
|
||||
"@babel/runtime": "7.18.6",
|
||||
"@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": "2.0.6",
|
||||
"@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",
|
||||
"chromatism": "3.0.0",
|
||||
"click-outside-vue3": "4.0.1",
|
||||
"cropperjs": "1.5.12",
|
||||
"diff": "3.5.0",
|
||||
"escape-html": "1.0.3",
|
||||
"localforage": "1.7.3",
|
||||
"js-cookie": "^3.0.1",
|
||||
"localforage": "1.10.0",
|
||||
"parse-link-header": "1.0.1",
|
||||
"phoenix": "1.4.0",
|
||||
"portal-vue": "2.1.7",
|
||||
"phoenix": "1.6.2",
|
||||
"punycode.js": "2.1.0",
|
||||
"ruffle-mirror": "2021.4.11",
|
||||
"v-click-outside": "2.1.5",
|
||||
"vue": "2.6.11",
|
||||
"vue-i18n": "7.8.1",
|
||||
"vue-router": "3.0.2",
|
||||
"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",
|
||||
"vuelidate": "0.7.7",
|
||||
"vuex": "3.0.1"
|
||||
"vuex": "4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.17.7",
|
||||
"@babel/plugin-transform-runtime": "7.17.0",
|
||||
"@babel/preset-env": "7.16.11",
|
||||
"@babel/register": "7.17.7",
|
||||
"@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",
|
||||
"@ungap/event-target": "0.2.3",
|
||||
"@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
|
||||
"@vue/babel-preset-jsx": "1.2.4",
|
||||
"@vue/test-utils": "1.0.0-beta.28",
|
||||
"@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.3",
|
||||
"babel-loader": "8.2.5",
|
||||
"babel-plugin-lodash": "3.3.4",
|
||||
"chai": "3.5.0",
|
||||
"chalk": "1.1.3",
|
||||
|
|
@ -66,58 +71,58 @@
|
|||
"eslint": "5.16.0",
|
||||
"eslint-config-standard": "12.0.0",
|
||||
"eslint-friendly-formatter": "2.0.7",
|
||||
"eslint-loader": "2.1.2",
|
||||
"eslint-plugin-import": "2.17.2",
|
||||
"eslint-loader": "2.2.1",
|
||||
"eslint-plugin-import": "2.26.0",
|
||||
"eslint-plugin-node": "7.0.1",
|
||||
"eslint-plugin-promise": "4.1.1",
|
||||
"eslint-plugin-standard": "4.0.0",
|
||||
"eslint-plugin-promise": "4.3.1",
|
||||
"eslint-plugin-standard": "4.1.0",
|
||||
"eslint-plugin-vue": "5.2.3",
|
||||
"eventsource-polyfill": "0.9.6",
|
||||
"express": "4.16.4",
|
||||
"express": "4.18.1",
|
||||
"file-loader": "3.0.1",
|
||||
"function-bind": "1.1.1",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"http-proxy-middleware": "0.17.4",
|
||||
"http-proxy-middleware": "0.21.0",
|
||||
"inject-loader": "2.0.1",
|
||||
"iso-639-1": "2.0.3",
|
||||
"iso-639-1": "2.1.15",
|
||||
"isparta-loader": "2.0.0",
|
||||
"json-loader": "0.5.7",
|
||||
"karma": "3.1.4",
|
||||
"karma": "6.4.0",
|
||||
"karma-coverage": "1.1.2",
|
||||
"karma-firefox-launcher": "1.1.0",
|
||||
"karma-mocha": "1.3.0",
|
||||
"karma-firefox-launcher": "1.3.0",
|
||||
"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.33",
|
||||
"karma-spec-reporter": "0.0.34",
|
||||
"karma-webpack": "4.0.2",
|
||||
"lodash": "4.17.21",
|
||||
"lolex": "1.6.0",
|
||||
"mini-css-extract-plugin": "0.5.0",
|
||||
"mini-css-extract-plugin": "0.12.0",
|
||||
"mocha": "3.5.3",
|
||||
"nightwatch": "0.9.21",
|
||||
"opn": "4.0.2",
|
||||
"ora": "0.3.0",
|
||||
"ora": "0.4.1",
|
||||
"postcss-loader": "3.0.0",
|
||||
"raw-loader": "0.5.1",
|
||||
"sass": "1.20.1",
|
||||
"sass-loader": "7.2.0",
|
||||
"sass": "1.53.0",
|
||||
"sass-loader": "7.3.1",
|
||||
"selenium-server": "2.53.1",
|
||||
"semver": "5.6.0",
|
||||
"semver": "5.7.1",
|
||||
"serviceworker-webpack-plugin": "1.0.1",
|
||||
"shelljs": "0.8.5",
|
||||
"sinon": "2.4.1",
|
||||
"sinon-chai": "2.14.0",
|
||||
"stylelint": "13.6.1",
|
||||
"stylelint": "13.13.1",
|
||||
"stylelint-config-standard": "20.0.0",
|
||||
"stylelint-rscss": "0.4.0",
|
||||
"url-loader": "1.1.2",
|
||||
"vue-loader": "14.2.4",
|
||||
"vue-loader": "^16.0.0",
|
||||
"vue-style-loader": "4.1.2",
|
||||
"webpack": "4.46.0",
|
||||
"webpack-dev-middleware": "3.7.3",
|
||||
"webpack-hot-middleware": "2.24.3",
|
||||
"webpack-merge": "0.14.1"
|
||||
"webpack-hot-middleware": "2.25.1",
|
||||
"webpack-merge": "0.20.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
|
|
|
|||
49
src/App.js
49
src/App.js
|
|
@ -1,6 +1,5 @@
|
|||
import UserPanel from './components/user_panel/user_panel.vue'
|
||||
import NavPanel from './components/nav_panel/nav_panel.vue'
|
||||
import Notifications from './components/notifications/notifications.vue'
|
||||
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
|
||||
import FeaturesPanel from './components/features_panel/features_panel.vue'
|
||||
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
|
||||
|
|
@ -16,13 +15,14 @@ import PostStatusModal from './components/post_status_modal/post_status_modal.vu
|
|||
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
|
||||
import { windowWidth, windowHeight } from './services/window_utils/window_utils'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
UserPanel,
|
||||
NavPanel,
|
||||
Notifications,
|
||||
Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
|
||||
InstanceSpecificPanel,
|
||||
FeaturesPanel,
|
||||
WhoToFollowPanel,
|
||||
|
|
@ -46,10 +46,20 @@ export default {
|
|||
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
|
||||
window.addEventListener('resize', this.updateMobileState)
|
||||
},
|
||||
destroyed () {
|
||||
unmounted () {
|
||||
window.removeEventListener('resize', this.updateMobileState)
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
{
|
||||
'-reverse': this.reverseLayout,
|
||||
'-no-sticky-headers': this.noSticky,
|
||||
'-has-new-post-button': this.newPostButtonShown
|
||||
},
|
||||
'-' + this.layoutType
|
||||
]
|
||||
},
|
||||
currentUser () { return this.$store.state.users.currentUser },
|
||||
userBackground () { return this.currentUser.background_image },
|
||||
instanceBackground () {
|
||||
|
|
@ -65,38 +75,45 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
shout () { return this.$store.state.shout.channel.state === 'joined' },
|
||||
shout () { return this.$store.state.shout.joined },
|
||||
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
|
||||
showInstanceSpecificPanel () {
|
||||
return this.$store.state.instance.showInstanceSpecificPanel &&
|
||||
!this.$store.getters.mergedConfig.hideISP &&
|
||||
this.$store.state.instance.instanceSpecificPanelContent
|
||||
},
|
||||
isChats () {
|
||||
return this.$route.name === 'chat' || this.$route.name === 'chats'
|
||||
},
|
||||
newPostButtonShown () {
|
||||
if (this.isChats) return false
|
||||
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
|
||||
},
|
||||
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
|
||||
shoutboxPosition () {
|
||||
return this.$store.getters.mergedConfig.showNewPostButton || false
|
||||
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
|
||||
},
|
||||
hideShoutbox () {
|
||||
return this.$store.getters.mergedConfig.hideShoutbox
|
||||
},
|
||||
isMobileLayout () { return this.$store.state.interface.mobileLayout },
|
||||
layoutType () { return this.$store.state.interface.layoutType },
|
||||
privateMode () { return this.$store.state.instance.private },
|
||||
sidebarAlign () {
|
||||
return {
|
||||
'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
|
||||
reverseLayout () {
|
||||
const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
|
||||
if (this.layoutType !== 'wide') {
|
||||
return reverseSetting
|
||||
} else {
|
||||
return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
|
||||
}
|
||||
},
|
||||
noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
|
||||
showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
|
||||
...mapGetters(['mergedConfig'])
|
||||
},
|
||||
methods: {
|
||||
updateMobileState () {
|
||||
const mobileLayout = windowWidth() <= 800
|
||||
const layoutHeight = windowHeight()
|
||||
const changed = mobileLayout !== this.isMobileLayout
|
||||
if (changed) {
|
||||
this.$store.dispatch('setMobileLayout', mobileLayout)
|
||||
}
|
||||
this.$store.dispatch('setLayoutHeight', layoutHeight)
|
||||
this.$store.dispatch('setLayoutWidth', windowWidth())
|
||||
this.$store.dispatch('setLayoutHeight', windowHeight())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
842
src/App.scss
842
src/App.scss
File diff suppressed because it is too large
Load Diff
46
src/App.vue
46
src/App.vue
|
|
@ -1,39 +1,32 @@
|
|||
<template>
|
||||
<div
|
||||
id="app"
|
||||
id="app-loaded"
|
||||
:style="bgStyle"
|
||||
>
|
||||
<div
|
||||
id="app_bg_wrapper"
|
||||
class="app-bg-wrapper"
|
||||
/>
|
||||
<MobileNav v-if="isMobileLayout" />
|
||||
<MobileNav v-if="layoutType === 'mobile'" />
|
||||
<DesktopNav v-else />
|
||||
<div class="app-bg-wrapper app-container-wrapper" />
|
||||
<Notifications v-if="currentUser" />
|
||||
<div
|
||||
id="content"
|
||||
class="container underlay"
|
||||
class="app-layout container"
|
||||
:class="classes"
|
||||
>
|
||||
<div
|
||||
class="sidebar-flexer mobile-hidden"
|
||||
:style="sidebarAlign"
|
||||
>
|
||||
<div class="sidebar-bounds">
|
||||
<div class="sidebar-scroller">
|
||||
<div class="sidebar">
|
||||
<user-panel />
|
||||
<div v-if="!isMobileLayout">
|
||||
<nav-panel />
|
||||
<instance-specific-panel v-if="showInstanceSpecificPanel" />
|
||||
<features-panel v-if="!currentUser && showFeaturesPanel" />
|
||||
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
|
||||
<notifications v-if="currentUser" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="underlay"/>
|
||||
<div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
|
||||
<user-panel />
|
||||
<template v-if="layoutType !== 'mobile'">
|
||||
<nav-panel />
|
||||
<instance-specific-panel v-if="showInstanceSpecificPanel" />
|
||||
<features-panel v-if="!currentUser && showFeaturesPanel" />
|
||||
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
|
||||
<div id="notifs-sidebar" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div id="main-scroller" class="column main" :class="{ '-full-height': isChats }">
|
||||
<div
|
||||
v-if="!currentUser"
|
||||
class="login-hint panel panel-default"
|
||||
|
|
@ -47,19 +40,20 @@
|
|||
</div>
|
||||
<router-view />
|
||||
</div>
|
||||
<media-modal />
|
||||
<div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
|
||||
</div>
|
||||
<media-modal />
|
||||
<shout-panel
|
||||
v-if="currentUser && shout && !hideShoutbox"
|
||||
:floating="true"
|
||||
class="floating-shout mobile-hidden"
|
||||
:class="{ 'left': shoutboxPosition }"
|
||||
:class="{ '-left': shoutboxPosition }"
|
||||
/>
|
||||
<MobilePostStatusButton />
|
||||
<UserReportingModal />
|
||||
<PostStatusModal />
|
||||
<SettingsModal />
|
||||
<portal-target name="modal" />
|
||||
<div id="modal" />
|
||||
<GlobalNoticeList />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import routes from './routes'
|
||||
import { createApp } from 'vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import vClickOutside from 'click-outside-vue3'
|
||||
|
||||
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
|
||||
|
||||
import App from '../App.vue'
|
||||
import { windowWidth } from '../services/window_utils/window_utils'
|
||||
import routes from './routes'
|
||||
import VBodyScrollLock from 'src/directives/body_scroll_lock'
|
||||
|
||||
import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
|
||||
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
|
||||
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
|
||||
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
|
||||
|
|
@ -326,8 +332,8 @@ const checkOAuthToken = async ({ store }) => {
|
|||
}
|
||||
|
||||
const afterStoreSetup = async ({ store, i18n }) => {
|
||||
const width = windowWidth()
|
||||
store.dispatch('setMobileLayout', width <= 800)
|
||||
store.dispatch('setLayoutWidth', windowWidth())
|
||||
store.dispatch('setLayoutHeight', windowHeight())
|
||||
|
||||
FaviconService.initFaviconService()
|
||||
|
||||
|
|
@ -367,25 +373,32 @@ const afterStoreSetup = async ({ store, i18n }) => {
|
|||
getTOS({ store })
|
||||
getStickers({ store })
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: routes(store),
|
||||
scrollBehavior: (to, _from, savedPosition) => {
|
||||
if (to.matched.some(m => m.meta.dontScroll)) {
|
||||
return false
|
||||
}
|
||||
return savedPosition || { x: 0, y: 0 }
|
||||
return savedPosition || { left: 0, top: 0 }
|
||||
}
|
||||
})
|
||||
|
||||
/* eslint-disable no-new */
|
||||
return new Vue({
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
app.use(store)
|
||||
app.use(i18n)
|
||||
|
||||
app.use(vClickOutside)
|
||||
app.use(VBodyScrollLock)
|
||||
|
||||
app.component('FAIcon', FontAwesomeIcon)
|
||||
app.component('FALayers', FontAwesomeLayers)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
return app
|
||||
}
|
||||
|
||||
export default afterStoreSetup
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default (store) => {
|
|||
{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
|
||||
{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
|
||||
{ name: 'remote-user-profile-acct',
|
||||
path: '/remote-users/(@?):username([^/@]+)@:hostname([^/@]+)',
|
||||
path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
|
||||
component: RemoteUserResolver,
|
||||
beforeEnter: validateAuthenticatedRoute
|
||||
},
|
||||
|
|
@ -62,14 +62,14 @@ export default (store) => {
|
|||
{ name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
|
||||
{ name: 'registration-token', path: '/registration/:token', component: Registration },
|
||||
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
|
||||
{ name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
|
||||
{ name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
|
||||
{ name: 'login', path: '/login', component: AuthForm },
|
||||
{ name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
|
||||
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
|
||||
{ name: '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: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
|
||||
]
|
||||
|
||||
if (store.state.instance.pleromaChatMessagesAvailable) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="sidebar">
|
||||
<div class="column-inner">
|
||||
<instance-specific-panel v-if="showInstanceSpecificPanel" />
|
||||
<staff-panel />
|
||||
<terms-of-service-panel />
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const AccountActions = {
|
|||
openChat () {
|
||||
this.$router.push({
|
||||
name: 'chat',
|
||||
params: { recipient_id: this.user.id }
|
||||
params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id }
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -74,10 +74,6 @@
|
|||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
.AccountActions {
|
||||
button.dropdown-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.ellipsis-button {
|
||||
width: 2.5em;
|
||||
margin: -0.5em 0;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['resetAsyncComponent'],
|
||||
methods: {
|
||||
retry () {
|
||||
this.$emit('resetAsyncComponent')
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@
|
|||
margin: 8px;
|
||||
word-break: break-all;
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
font-size: 1rem;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { h, resolveComponent } from 'vue'
|
||||
import LoginForm from '../login_form/login_form.vue'
|
||||
import MFARecoveryForm from '../mfa_form/recovery_form.vue'
|
||||
import MFATOTPForm from '../mfa_form/totp_form.vue'
|
||||
|
|
@ -5,8 +6,8 @@ import { mapGetters } from 'vuex'
|
|||
|
||||
const AuthForm = {
|
||||
name: 'AuthForm',
|
||||
render (createElement) {
|
||||
return createElement('component', { is: this.authForm })
|
||||
render () {
|
||||
return h(resolveComponent(this.authForm))
|
||||
},
|
||||
computed: {
|
||||
authForm () {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<UserAvatar
|
||||
class="avatar"
|
||||
:user="user"
|
||||
@click.prevent.native="toggleUserExpanded"
|
||||
@click.prevent="toggleUserExpanded"
|
||||
/>
|
||||
</router-link>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const Bookmarks = {
|
|||
components: {
|
||||
Timeline
|
||||
},
|
||||
destroyed () {
|
||||
unmounted () {
|
||||
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
|
|||
import ChatTitle from '../chat_title/chat_title.vue'
|
||||
import chatService from '../../services/chat_service/chat_service.js'
|
||||
import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
|
||||
import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js'
|
||||
import { getScrollPosition, getNewTopPosition, isBottomedOut, isScrollable } from './chat_layout_utils.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faChevronDown,
|
||||
|
|
@ -20,7 +20,7 @@ library.add(
|
|||
)
|
||||
|
||||
const BOTTOMED_OUT_OFFSET = 10
|
||||
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
|
||||
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
|
||||
const SAFE_RESIZE_TIME_OFFSET = 100
|
||||
const MARK_AS_READ_DELAY = 1500
|
||||
const MAX_RETRIES = 10
|
||||
|
|
@ -43,7 +43,7 @@ const Chat = {
|
|||
},
|
||||
created () {
|
||||
this.startFetching()
|
||||
window.addEventListener('resize', this.handleLayoutChange)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
|
|
@ -52,15 +52,11 @@ const Chat = {
|
|||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.updateScrollableContainerHeight()
|
||||
this.handleResize()
|
||||
})
|
||||
this.setChatLayout()
|
||||
},
|
||||
destroyed () {
|
||||
unmounted () {
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
window.removeEventListener('resize', this.handleLayoutChange)
|
||||
this.unsetChatLayout()
|
||||
if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
|
||||
this.$store.dispatch('clearCurrentChat')
|
||||
},
|
||||
|
|
@ -96,8 +92,7 @@ const Chat = {
|
|||
...mapState({
|
||||
backendInteractor: state => state.api.backendInteractor,
|
||||
mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
|
||||
mobileLayout: state => state.interface.mobileLayout,
|
||||
layoutHeight: state => state.interface.layoutHeight,
|
||||
mobileLayout: state => state.interface.layoutType === 'mobile',
|
||||
currentUser: state => state.users.currentUser
|
||||
})
|
||||
},
|
||||
|
|
@ -115,9 +110,6 @@ const Chat = {
|
|||
'$route': function () {
|
||||
this.startFetching()
|
||||
},
|
||||
layoutHeight () {
|
||||
this.handleResize({ expand: true })
|
||||
},
|
||||
mastoUserSocketStatus (newValue) {
|
||||
if (newValue === WSConnectionStatus.JOINED) {
|
||||
this.fetchChat({ isFirstFetch: true })
|
||||
|
|
@ -132,7 +124,6 @@ const Chat = {
|
|||
onFilesDropped () {
|
||||
this.$nextTick(() => {
|
||||
this.handleResize()
|
||||
this.updateScrollableContainerHeight()
|
||||
})
|
||||
},
|
||||
handleVisibilityChange () {
|
||||
|
|
@ -142,43 +133,7 @@ const Chat = {
|
|||
}
|
||||
})
|
||||
},
|
||||
setChatLayout () {
|
||||
// This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
|
||||
// This layout prevents empty spaces from being visible at the bottom
|
||||
// of the chat on iOS Safari (`safe-area-inset`) when
|
||||
// - the on-screen keyboard appears and the user starts typing
|
||||
// - the user selects the text inside the input area
|
||||
// - the user selects and deletes the text that is multiple lines long
|
||||
// TODO: unify the chat layout with the global layout.
|
||||
let html = document.querySelector('html')
|
||||
if (html) {
|
||||
html.classList.add('chat-layout')
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.updateScrollableContainerHeight()
|
||||
})
|
||||
},
|
||||
unsetChatLayout () {
|
||||
let html = document.querySelector('html')
|
||||
if (html) {
|
||||
html.classList.remove('chat-layout')
|
||||
}
|
||||
},
|
||||
handleLayoutChange () {
|
||||
this.$nextTick(() => {
|
||||
this.updateScrollableContainerHeight()
|
||||
this.scrollDown()
|
||||
})
|
||||
},
|
||||
// Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
|
||||
updateScrollableContainerHeight () {
|
||||
const header = this.$refs.header
|
||||
const footer = this.$refs.footer
|
||||
const inner = this.mobileLayout ? window.document.body : this.$refs.inner
|
||||
this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
|
||||
},
|
||||
// Preserves the scroll position when OSK appears or the posting form changes its height.
|
||||
// "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
|
||||
handleResize (opts = {}) {
|
||||
const { expand = false, delayed = false } = opts
|
||||
|
||||
|
|
@ -190,29 +145,20 @@ const Chat = {
|
|||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.updateScrollableContainerHeight()
|
||||
|
||||
const { offsetHeight = undefined } = this.lastScrollPosition
|
||||
this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)
|
||||
|
||||
const { offsetHeight = undefined } = getScrollPosition()
|
||||
const diff = this.lastScrollPosition.offsetHeight - offsetHeight
|
||||
if (diff < 0 || (!this.bottomedOut() && expand)) {
|
||||
if (diff !== 0 || (!this.bottomedOut() && expand)) {
|
||||
this.$nextTick(() => {
|
||||
this.updateScrollableContainerHeight()
|
||||
this.$refs.scrollable.scrollTo({
|
||||
top: this.$refs.scrollable.scrollTop - diff,
|
||||
left: 0
|
||||
})
|
||||
window.scrollTo({ top: window.scrollY + diff })
|
||||
})
|
||||
}
|
||||
this.lastScrollPosition = getScrollPosition()
|
||||
})
|
||||
},
|
||||
scrollDown (options = {}) {
|
||||
const { behavior = 'auto', forceRead = false } = options
|
||||
const scrollable = this.$refs.scrollable
|
||||
if (!scrollable) { return }
|
||||
this.$nextTick(() => {
|
||||
scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
|
||||
window.scrollTo({ top: document.documentElement.scrollHeight, behavior })
|
||||
})
|
||||
if (forceRead) {
|
||||
this.readChat()
|
||||
|
|
@ -228,11 +174,10 @@ const Chat = {
|
|||
})
|
||||
},
|
||||
bottomedOut (offset) {
|
||||
return isBottomedOut(this.$refs.scrollable, offset)
|
||||
return isBottomedOut(offset)
|
||||
},
|
||||
reachedTop () {
|
||||
const scrollable = this.$refs.scrollable
|
||||
return scrollable && scrollable.scrollTop <= 0
|
||||
return window.scrollY <= 0
|
||||
},
|
||||
cullOlderCheck () {
|
||||
window.setTimeout(() => {
|
||||
|
|
@ -263,10 +208,9 @@ const Chat = {
|
|||
}
|
||||
}, 200),
|
||||
handleScrollUp (positionBeforeLoading) {
|
||||
const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
|
||||
this.$refs.scrollable.scrollTo({
|
||||
top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
|
||||
left: 0
|
||||
const positionAfterLoading = getScrollPosition()
|
||||
window.scrollTo({
|
||||
top: getNewTopPosition(positionBeforeLoading, positionAfterLoading)
|
||||
})
|
||||
},
|
||||
fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
|
||||
|
|
@ -285,22 +229,18 @@ const Chat = {
|
|||
chatService.clear(chatMessageService)
|
||||
}
|
||||
|
||||
const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
|
||||
const positionBeforeUpdate = getScrollPosition()
|
||||
this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
|
||||
this.$nextTick(() => {
|
||||
if (fetchOlderMessages) {
|
||||
this.handleScrollUp(positionBeforeUpdate)
|
||||
}
|
||||
|
||||
if (isFirstFetch) {
|
||||
this.updateScrollableContainerHeight()
|
||||
}
|
||||
|
||||
// In vertical screens, the first batch of fetched messages may not always take the
|
||||
// full height of the scrollable container.
|
||||
// If this is the case, we want to fetch the messages until the scrollable container
|
||||
// is fully populated so that the user has the ability to scroll up and load the history.
|
||||
if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
|
||||
if (!isScrollable() && messages.length > 0) {
|
||||
this.fetchChat({ maxId: this.currentChatMessageService.minId })
|
||||
}
|
||||
})
|
||||
|
|
@ -336,9 +276,6 @@ const Chat = {
|
|||
this.handleResize()
|
||||
// When the posting form size changes because of a media attachment, we need an extra resize
|
||||
// to account for the potential delay in the DOM update.
|
||||
setTimeout(() => {
|
||||
this.updateScrollableContainerHeight()
|
||||
}, SAFE_RESIZE_TIME_OFFSET)
|
||||
this.scrollDown({ forceRead: true })
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,28 +1,22 @@
|
|||
.chat-view {
|
||||
display: flex;
|
||||
height: calc(100vh - 60px);
|
||||
width: 100%;
|
||||
|
||||
.chat-title {
|
||||
// prevents chat header jumping on when the user avatar loads
|
||||
height: 28px;
|
||||
}
|
||||
height: 100%;
|
||||
|
||||
.chat-view-inner {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
margin: 0.5em 0.5em 0 0.5em;
|
||||
}
|
||||
|
||||
.chat-view-body {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--chatBg, $fallback--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
min-height: 100%;
|
||||
min-height: calc(100vh - var(--navbar-height));
|
||||
margin: 0 0 0 0;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
|
||||
|
|
@ -32,36 +26,32 @@
|
|||
}
|
||||
}
|
||||
|
||||
.scrollable-message-list {
|
||||
.message-list {
|
||||
padding: 0 0.8em;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.chat-view-heading {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
top: 50px;
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
position: sticky;
|
||||
overflow: hidden;
|
||||
grid-template-columns: auto minmax(50%, 1fr);
|
||||
}
|
||||
|
||||
.go-back-button {
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
padding: 0.6em;
|
||||
margin: -0.6em 0.6em -0.6em -0.6em;
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
align-self: start;
|
||||
width: var(--__panel-heading-height-inner);
|
||||
}
|
||||
|
||||
.jump-to-bottom-button {
|
||||
|
|
@ -115,56 +105,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.chat-view-inner {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.chat-view-body {
|
||||
display: flex;
|
||||
min-height: auto;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.chat-view-heading {
|
||||
box-sizing: border-box;
|
||||
position: static;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
border-radius: 0;
|
||||
|
||||
/* This practically overlays the panel heading color over panel background
|
||||
* color. This is needed because we allow transparent panel background and
|
||||
* it doesn't work well in this "disjointed panel header" case
|
||||
*/
|
||||
background:
|
||||
linear-gradient(to top, var(--panel), var(--panel)),
|
||||
linear-gradient(to top, var(--bg), var(--bg));
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.scrollable-message-list {
|
||||
display: unset;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: sticky;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,23 +2,22 @@
|
|||
<div class="chat-view">
|
||||
<div class="chat-view-inner">
|
||||
<div
|
||||
id="nav"
|
||||
ref="inner"
|
||||
class="panel-default panel chat-view-body"
|
||||
>
|
||||
<div
|
||||
ref="header"
|
||||
class="panel-heading chat-view-heading mobile-hidden"
|
||||
class="panel-heading -sticky chat-view-heading"
|
||||
>
|
||||
<a
|
||||
class="go-back-button"
|
||||
<button
|
||||
class="button-unstyled go-back-button"
|
||||
@click="goBack"
|
||||
>
|
||||
<FAIcon
|
||||
size="lg"
|
||||
icon="chevron-left"
|
||||
/>
|
||||
</a>
|
||||
</button>
|
||||
<div class="title text-center">
|
||||
<ChatTitle
|
||||
:user="recipient"
|
||||
|
|
@ -26,73 +25,69 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template>
|
||||
<div
|
||||
ref="scrollable"
|
||||
class="scrollable-message-list"
|
||||
:style="{ height: scrollableContainerHeight }"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<template v-if="!errorLoadingChat">
|
||||
<ChatMessage
|
||||
v-for="chatViewItem in chatViewItems"
|
||||
:key="chatViewItem.id"
|
||||
:author="recipient"
|
||||
:chat-view-item="chatViewItem"
|
||||
:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
|
||||
@hover="onMessageHover"
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
class="chat-loading-error"
|
||||
>
|
||||
<div class="alert error">
|
||||
{{ $t('chats.error_loading_chat') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="footer"
|
||||
class="panel-body footer"
|
||||
>
|
||||
<div
|
||||
class="jump-to-bottom-button"
|
||||
:class="{ 'visible': jumpToBottomButtonVisible }"
|
||||
@click="scrollDown({ behavior: 'smooth' })"
|
||||
>
|
||||
<span>
|
||||
<FAIcon icon="chevron-down" />
|
||||
<div
|
||||
v-if="newMessageCount"
|
||||
class="badge badge-notification unread-chat-count unread-message-count"
|
||||
>
|
||||
{{ newMessageCount }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<PostStatusForm
|
||||
:disable-subject="true"
|
||||
:disable-scope-selector="true"
|
||||
:disable-notice="true"
|
||||
:disable-lock-warning="true"
|
||||
:disable-polls="true"
|
||||
:disable-sensitivity-checkbox="true"
|
||||
:disable-submit="errorLoadingChat || !currentChat"
|
||||
:disable-preview="true"
|
||||
:optimistic-posting="true"
|
||||
:post-handler="sendMessage"
|
||||
:submit-on-enter="!mobileLayout"
|
||||
:preserve-focus="!mobileLayout"
|
||||
:auto-focus="!mobileLayout"
|
||||
:placeholder="formPlaceholder"
|
||||
:file-limit="1"
|
||||
max-height="160"
|
||||
emoji-picker-placement="top"
|
||||
@resize="handleResize"
|
||||
<div
|
||||
class="message-list"
|
||||
:style="{ height: scrollableContainerHeight }"
|
||||
>
|
||||
<template v-if="!errorLoadingChat">
|
||||
<ChatMessage
|
||||
v-for="chatViewItem in chatViewItems"
|
||||
:key="chatViewItem.id"
|
||||
:author="recipient"
|
||||
:chat-view-item="chatViewItem"
|
||||
:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
|
||||
@hover="onMessageHover"
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
class="chat-loading-error"
|
||||
>
|
||||
<div class="alert error">
|
||||
{{ $t('chats.error_loading_chat') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
ref="footer"
|
||||
class="panel-body footer"
|
||||
>
|
||||
<div
|
||||
class="jump-to-bottom-button"
|
||||
:class="{ 'visible': jumpToBottomButtonVisible }"
|
||||
@click="scrollDown({ behavior: 'smooth' })"
|
||||
>
|
||||
<span>
|
||||
<FAIcon icon="chevron-down" />
|
||||
<div
|
||||
v-if="newMessageCount"
|
||||
class="badge badge-notification unread-chat-count unread-message-count"
|
||||
>
|
||||
{{ newMessageCount }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<PostStatusForm
|
||||
:disable-subject="true"
|
||||
:disable-scope-selector="true"
|
||||
:disable-notice="true"
|
||||
:disable-lock-warning="true"
|
||||
:disable-polls="true"
|
||||
:disable-sensitivity-checkbox="true"
|
||||
:disable-submit="errorLoadingChat || !currentChat"
|
||||
:disable-preview="true"
|
||||
:optimistic-posting="true"
|
||||
:post-handler="sendMessage"
|
||||
:submit-on-enter="!mobileLayout"
|
||||
:preserve-focus="!mobileLayout"
|
||||
:auto-focus="!mobileLayout"
|
||||
:placeholder="formPlaceholder"
|
||||
:file-limit="1"
|
||||
max-height="160"
|
||||
emoji-picker-placement="top"
|
||||
@resize="handleResize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// Captures a scroll position
|
||||
export const getScrollPosition = (el) => {
|
||||
export const getScrollPosition = () => {
|
||||
return {
|
||||
scrollTop: el.scrollTop,
|
||||
scrollHeight: el.scrollHeight,
|
||||
offsetHeight: el.offsetHeight
|
||||
scrollTop: window.scrollY,
|
||||
scrollHeight: document.documentElement.scrollHeight,
|
||||
offsetHeight: window.innerHeight
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -13,21 +13,12 @@ export const getNewTopPosition = (previousPosition, newPosition) => {
|
|||
return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
|
||||
}
|
||||
|
||||
export const isBottomedOut = (el, offset = 0) => {
|
||||
if (!el) { return }
|
||||
const scrollHeight = el.scrollTop + offset
|
||||
const totalHeight = el.scrollHeight - el.offsetHeight
|
||||
export const isBottomedOut = (offset = 0) => {
|
||||
const scrollHeight = window.scrollY + offset
|
||||
const totalHeight = document.documentElement.scrollHeight - window.innerHeight
|
||||
return totalHeight <= scrollHeight
|
||||
}
|
||||
|
||||
// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form.
|
||||
export const scrollableContainerHeight = (inner, header, footer) => {
|
||||
return inner.offsetHeight - header.clientHeight - footer.clientHeight
|
||||
}
|
||||
|
||||
// Returns whether or not the scrollbar is visible.
|
||||
export const isScrollable = (el) => {
|
||||
if (!el) return
|
||||
|
||||
return el.scrollHeight > el.clientHeight
|
||||
export const isScrollable = () => {
|
||||
return document.documentElement.scrollHeight > window.innerHeight
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
v-else
|
||||
class="chat-list panel panel-default"
|
||||
>
|
||||
<div class="panel-heading">
|
||||
<div class="panel-heading -sticky">
|
||||
<span class="title">
|
||||
{{ $t("chats.chats") }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex-shrink: 1;
|
||||
line-height: 1.4em;
|
||||
line-height: var(--post-line-height);
|
||||
}
|
||||
|
||||
.chat-preview {
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
|
||||
.time-wrapper {
|
||||
line-height: 1.4em;
|
||||
line-height: var(--post-line-height);
|
||||
}
|
||||
|
||||
.chat-preview-body {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ const ChatMessage = {
|
|||
'chatViewItem',
|
||||
'hoveredMessageChain'
|
||||
],
|
||||
emits: ['hover'],
|
||||
components: {
|
||||
Popover,
|
||||
Attachment,
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@
|
|||
}
|
||||
|
||||
.go-back-button {
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
padding: 0.6em;
|
||||
margin: -0.6em 0.6em -0.6em -0.6em;
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
align-self: start;
|
||||
width: var(--__panel-heading-height-inner);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
<template>
|
||||
<div
|
||||
id="nav"
|
||||
class="panel-default panel chat-new"
|
||||
>
|
||||
<div
|
||||
ref="header"
|
||||
class="panel-heading"
|
||||
>
|
||||
<a
|
||||
class="go-back-button"
|
||||
<button
|
||||
class="button-unstyled go-back-button"
|
||||
@click="goBack"
|
||||
>
|
||||
<FAIcon
|
||||
size="lg"
|
||||
icon="chevron-left"
|
||||
/>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<div class="input-search">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import Vue from 'vue'
|
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||
|
||||
export default Vue.component('chat-title', {
|
||||
export default {
|
||||
name: 'ChatTitle',
|
||||
components: {
|
||||
UserAvatar
|
||||
UserAvatar,
|
||||
RichContent
|
||||
},
|
||||
props: [
|
||||
'user', 'withAvatar'
|
||||
|
|
@ -23,4 +24,4 @@ export default Vue.component('chat-title', {
|
|||
return generateProfileLink(user.id, user.screen_name)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,20 +4,21 @@
|
|||
:title="title"
|
||||
>
|
||||
<router-link
|
||||
class="avatar-container"
|
||||
v-if="withAvatar && user"
|
||||
:to="getUserProfileLink(user)"
|
||||
>
|
||||
<UserAvatar
|
||||
class="titlebar-avatar"
|
||||
:user="user"
|
||||
width="23px"
|
||||
height="23px"
|
||||
/>
|
||||
</router-link>
|
||||
<RichContent
|
||||
v-if="user"
|
||||
class="username"
|
||||
:title="'@'+user.screen_name_ui"
|
||||
:title="'@'+(user && user.screen_name_ui)"
|
||||
:html="htmlTitle"
|
||||
:emoji="user.emoji"
|
||||
:emoji="user.emoji || []"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -32,7 +33,6 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
|
||||
--emoji-size: 14px;
|
||||
|
||||
|
|
@ -45,11 +45,15 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.Avatar {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
margin-right: 0.5em;
|
||||
.avatar-container {
|
||||
align-self: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.titlebar-avatar {
|
||||
margin-right: 0.5em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
<input
|
||||
type="checkbox"
|
||||
:disabled="disabled"
|
||||
:checked="checked"
|
||||
:indeterminate.prop="indeterminate"
|
||||
@change="$emit('change', $event.target.checked)"
|
||||
:checked="modelValue"
|
||||
:indeterminate="indeterminate"
|
||||
@change="$emit('update:modelValue', $event.target.checked)"
|
||||
>
|
||||
<i class="checkbox-indicator" />
|
||||
<span
|
||||
|
|
@ -22,12 +22,9 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
model: {
|
||||
prop: 'checked',
|
||||
event: 'change'
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
props: [
|
||||
'checked',
|
||||
'modelValue',
|
||||
'indeterminate',
|
||||
'disabled'
|
||||
]
|
||||
|
|
|
|||
|
|
@ -11,28 +11,28 @@
|
|||
</label>
|
||||
<Checkbox
|
||||
v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
|
||||
:checked="present"
|
||||
:model-value="present"
|
||||
:disabled="disabled"
|
||||
class="opt"
|
||||
@change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
|
||||
@update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
|
||||
/>
|
||||
<div class="input color-input-field">
|
||||
<input
|
||||
:id="name + '-t'"
|
||||
class="textColor unstyled"
|
||||
type="text"
|
||||
:value="value || fallback"
|
||||
:value="modelValue || fallback"
|
||||
:disabled="!present || disabled"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
<input
|
||||
v-if="validColor"
|
||||
:id="name"
|
||||
class="nativeColor unstyled"
|
||||
type="color"
|
||||
:value="value || fallback"
|
||||
:value="modelValue || fallback"
|
||||
:disabled="!present || disabled"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
<div
|
||||
v-if="transparentColor"
|
||||
|
|
@ -67,7 +67,7 @@ export default {
|
|||
},
|
||||
// Color value, should be required but vue cannot tell the difference
|
||||
// between "property missing" and "property set to undefined"
|
||||
value: {
|
||||
modelValue: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: undefined
|
||||
|
|
@ -91,18 +91,19 @@ export default {
|
|||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
computed: {
|
||||
present () {
|
||||
return typeof this.value !== 'undefined'
|
||||
return typeof this.modelValue !== 'undefined'
|
||||
},
|
||||
validColor () {
|
||||
return hex2rgb(this.value || this.fallback)
|
||||
return hex2rgb(this.modelValue || this.fallback)
|
||||
},
|
||||
transparentColor () {
|
||||
return this.value === 'transparent'
|
||||
return this.modelValue === 'transparent'
|
||||
},
|
||||
computedColor () {
|
||||
return this.value && this.value.startsWith('--')
|
||||
return this.modelValue && this.modelValue.startsWith('--')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
>
|
||||
<div
|
||||
v-if="isExpanded"
|
||||
class="panel-heading conversation-heading"
|
||||
class="panel-heading conversation-heading -sticky"
|
||||
>
|
||||
<span class="title"> {{ $t('timeline.conversation') }} </span>
|
||||
<button
|
||||
|
|
@ -27,20 +27,24 @@
|
|||
v-if="shouldShowAllConversationButton"
|
||||
class="conversation-dive-to-top-level-box"
|
||||
>
|
||||
<i18n
|
||||
path="status.show_all_conversation_with_icon"
|
||||
<i18n-t
|
||||
keypath="status.show_all_conversation_with_icon"
|
||||
tag="button"
|
||||
class="button-unstyled -link"
|
||||
@click.prevent="diveToTopLevel"
|
||||
scope="global"
|
||||
>
|
||||
<FAIcon
|
||||
place="icon"
|
||||
icon="angle-double-left"
|
||||
/>
|
||||
<span place="text">
|
||||
{{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
|
||||
</span>
|
||||
</i18n>
|
||||
<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"
|
||||
|
|
@ -96,20 +100,24 @@
|
|||
<div
|
||||
class="thread-ancestor-dive-box-inner"
|
||||
>
|
||||
<i18n
|
||||
<i18n-t
|
||||
tag="button"
|
||||
path="status.ancestor_follow_with_icon"
|
||||
scope="global"
|
||||
keypath="status.ancestor_follow_with_icon"
|
||||
class="button-unstyled -link thread-tree-show-replies-button"
|
||||
@click.prevent="diveIntoStatus(status.id)"
|
||||
>
|
||||
<FAIcon
|
||||
place="icon"
|
||||
icon="angle-double-right"
|
||||
/>
|
||||
<span place="text">
|
||||
{{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
|
||||
</span>
|
||||
</i18n>
|
||||
<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>
|
||||
|
|
@ -193,6 +201,8 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.Conversation {
|
||||
z-index: 1;
|
||||
|
||||
.conversation-dive-to-top-level-box {
|
||||
padding: var(--status-margin, $status-margin);
|
||||
border-bottom-width: 1px;
|
||||
|
|
@ -215,6 +225,7 @@
|
|||
--text: var(--faint);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.thread-ancestor-dive-box {
|
||||
padding-left: var(--status-margin, $status-margin);
|
||||
border-bottom-width: 1px;
|
||||
|
|
@ -242,6 +253,7 @@
|
|||
.thread-ancestor-has-other-replies .conversation-status,
|
||||
.thread-ancestor:last-child .conversation-status,
|
||||
.thread-ancestor:last-child .thread-ancestor-dive-box,
|
||||
&:last-child .conversation-status,
|
||||
&.-expanded .thread-tree .conversation-status {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
@ -262,5 +274,9 @@
|
|||
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
|
||||
border-bottom: 1px solid var(--border, $fallback--border);
|
||||
}
|
||||
|
||||
&.-expanded.status-fadein {
|
||||
margin: calc(var(--status-margin, $status-margin) / 2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.DesktopNav {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
|
||||
input {
|
||||
color: var(--inputTopbarText, var(--inputText));
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
|
|
@ -11,7 +13,7 @@
|
|||
|
||||
.inner-nav {
|
||||
display: grid;
|
||||
grid-template-rows: 50px;
|
||||
grid-template-rows: var(--navbar-height);
|
||||
grid-template-columns: 2fr auto 2fr;
|
||||
grid-template-areas: "sitename logo actions";
|
||||
box-sizing: border-box;
|
||||
|
|
@ -20,7 +22,7 @@
|
|||
max-width: 980px;
|
||||
}
|
||||
|
||||
&.-logoLeft {
|
||||
&.-logoLeft .inner-nav {
|
||||
grid-template-columns: auto 2fr 2fr;
|
||||
grid-template-areas: "logo sitename actions";
|
||||
}
|
||||
|
|
@ -77,7 +79,7 @@
|
|||
|
||||
img {
|
||||
display: inline-block;
|
||||
height: 50px;
|
||||
height: var(--navbar-height);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -103,8 +105,8 @@
|
|||
|
||||
.item {
|
||||
flex: 1;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
line-height: var(--navbar-height);
|
||||
height: var(--navbar-height);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<search-bar
|
||||
v-if="currentUser || !privateMode"
|
||||
@toggled="onSearchBarToggled"
|
||||
@click.stop.native
|
||||
@click.stop
|
||||
/>
|
||||
<button
|
||||
class="button-unstyled nav-icon"
|
||||
|
|
|
|||
|
|
@ -58,16 +58,7 @@
|
|||
background-color: var(--bg, $fallback--bg);
|
||||
|
||||
.dialog-modal-heading {
|
||||
padding: .5em .5em;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0;
|
||||
white-space: nowrap;
|
||||
color: var(--panelText);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--panel, $fallback--fg);
|
||||
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ library.add(
|
|||
*/
|
||||
|
||||
const EmojiInput = {
|
||||
emits: ['update:modelValue', 'shown'],
|
||||
props: {
|
||||
suggest: {
|
||||
/**
|
||||
|
|
@ -57,8 +58,7 @@ const EmojiInput = {
|
|||
required: true,
|
||||
type: Function
|
||||
},
|
||||
// TODO VUE3: change to modelValue, change 'input' event to 'input'
|
||||
value: {
|
||||
modelValue: {
|
||||
/**
|
||||
* Used for v-model
|
||||
*/
|
||||
|
|
@ -137,8 +137,8 @@ const EmojiInput = {
|
|||
return (this.wordAtCaret || {}).word || ''
|
||||
},
|
||||
wordAtCaret () {
|
||||
if (this.value && this.caret) {
|
||||
const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
|
||||
if (this.modelValue && this.caret) {
|
||||
const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
|
||||
return word
|
||||
}
|
||||
}
|
||||
|
|
@ -189,8 +189,11 @@ const EmojiInput = {
|
|||
img: imageUrl || ''
|
||||
}))
|
||||
},
|
||||
suggestions (newValue) {
|
||||
this.$nextTick(this.resize)
|
||||
suggestions: {
|
||||
handler (newValue) {
|
||||
this.$nextTick(this.resize)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -225,13 +228,13 @@ const EmojiInput = {
|
|||
}
|
||||
},
|
||||
replace (replacement) {
|
||||
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
|
||||
this.$emit('input', newValue)
|
||||
const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
|
||||
this.$emit('update:modelValue', newValue)
|
||||
this.caret = 0
|
||||
},
|
||||
insert ({ insertion, keepOpen, surroundingSpace = true }) {
|
||||
const before = this.value.substring(0, this.caret) || ''
|
||||
const after = this.value.substring(this.caret) || ''
|
||||
const before = this.modelValue.substring(0, this.caret) || ''
|
||||
const after = this.modelValue.substring(this.caret) || ''
|
||||
|
||||
/* Using a bit more smart approach to padding emojis with spaces:
|
||||
* - put a space before cursor if there isn't one already, unless we
|
||||
|
|
@ -259,7 +262,7 @@ const EmojiInput = {
|
|||
after
|
||||
].join('')
|
||||
this.keepOpen = keepOpen
|
||||
this.$emit('input', newValue)
|
||||
this.$emit('update:modelValue', newValue)
|
||||
const position = this.caret + (insertion + spaceAfter + spaceBefore).length
|
||||
if (!keepOpen) {
|
||||
this.input.focus()
|
||||
|
|
@ -278,8 +281,8 @@ const EmojiInput = {
|
|||
if (len > 0 || suggestion) {
|
||||
const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
|
||||
const replacement = chosenSuggestion.replacement
|
||||
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
|
||||
this.$emit('input', newValue)
|
||||
const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
|
||||
this.$emit('update:modelValue', newValue)
|
||||
this.highlighted = 0
|
||||
const position = this.wordAtCaret.start + replacement.length
|
||||
|
||||
|
|
@ -455,7 +458,7 @@ const EmojiInput = {
|
|||
this.showPicker = false
|
||||
this.setCaret(e)
|
||||
this.resize()
|
||||
this.$emit('input', e.target.value)
|
||||
this.$emit('update:modelValue', e.target.value)
|
||||
},
|
||||
onClickInput (e) {
|
||||
this.showPicker = false
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
top: 0;
|
||||
right: 0;
|
||||
margin: .2em .25em;
|
||||
font-size: 16px;
|
||||
font-size: 1.3em;
|
||||
cursor: pointer;
|
||||
line-height: 24px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { defineAsyncComponent } from 'vue'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
|
|
@ -5,6 +6,7 @@ import {
|
|||
faStickyNote,
|
||||
faSmileBeam
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { trim } from 'lodash'
|
||||
|
||||
library.add(
|
||||
faBoxOpen,
|
||||
|
|
@ -57,7 +59,7 @@ const EmojiPicker = {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
|
||||
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
|
||||
Checkbox
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -79,7 +81,7 @@ const EmojiPicker = {
|
|||
},
|
||||
highlight (key) {
|
||||
const ref = this.$refs['group-' + key]
|
||||
const top = ref[0].offsetTop
|
||||
const top = ref.offsetTop
|
||||
this.setShowStickers(false)
|
||||
this.activeGroup = key
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -96,7 +98,7 @@ const EmojiPicker = {
|
|||
}
|
||||
},
|
||||
triggerLoadMore (target) {
|
||||
const ref = this.$refs['group-end-custom'][0]
|
||||
const ref = this.$refs['group-end-custom']
|
||||
if (!ref) return
|
||||
const bottom = ref.offsetTop + ref.offsetHeight
|
||||
|
||||
|
|
@ -119,7 +121,7 @@ const EmojiPicker = {
|
|||
this.$nextTick(() => {
|
||||
this.emojisView.forEach(group => {
|
||||
const ref = this.$refs['group-' + group.id]
|
||||
if (ref[0].offsetTop <= top) {
|
||||
if (ref.offsetTop <= top) {
|
||||
this.activeGroup = group.id
|
||||
}
|
||||
})
|
||||
|
|
@ -175,7 +177,7 @@ const EmojiPicker = {
|
|||
filteredEmoji () {
|
||||
return filterByKeyword(
|
||||
this.$store.state.instance.customEmoji || [],
|
||||
this.keyword
|
||||
trim(this.keyword)
|
||||
)
|
||||
},
|
||||
customEmojiBuffer () {
|
||||
|
|
@ -196,7 +198,7 @@ const EmojiPicker = {
|
|||
id: 'standard',
|
||||
text: this.$t('emoji.unicode'),
|
||||
icon: 'box-open',
|
||||
emojis: filterByKeyword(standardEmojis, this.keyword)
|
||||
emojis: filterByKeyword(standardEmojis, trim(this.keyword))
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
right: 0;
|
||||
left: 0;
|
||||
margin: 0 !important;
|
||||
z-index: 1;
|
||||
z-index: 100;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--popover, $fallback--bg);
|
||||
color: $fallback--link;
|
||||
|
|
@ -73,12 +73,13 @@
|
|||
&-item {
|
||||
padding: 0 7px;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
font-size: 1.85em;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid;
|
||||
|
||||
|
|
@ -151,9 +152,10 @@
|
|||
justify-content: left;
|
||||
|
||||
&-title {
|
||||
font-size: 12px;
|
||||
font-size: 0.85em;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
&.disabled {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
type="text"
|
||||
class="form-control"
|
||||
:placeholder="$t('emoji.search_emoji')"
|
||||
@input="$event.target.composing = false"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -15,18 +15,8 @@ const Exporter = {
|
|||
type: String,
|
||||
default: 'export.csv'
|
||||
},
|
||||
exportButtonLabel: {
|
||||
type: String,
|
||||
default () {
|
||||
return this.$t('exporter.export')
|
||||
}
|
||||
},
|
||||
processingMessage: {
|
||||
type: String,
|
||||
default () {
|
||||
return this.$t('exporter.processing')
|
||||
}
|
||||
}
|
||||
exportButtonLabel: { type: String },
|
||||
processingMessage: { type: String }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
spin
|
||||
/>
|
||||
|
||||
<span>{{ processingMessage }}</span>
|
||||
<span>{{ processingMessage || $t('exporter.processing') }}</span>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
class="btn button-default"
|
||||
@click="process"
|
||||
>
|
||||
{{ exportButtonLabel }}
|
||||
{{ exportButtonLabel || $t('exporter.export') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { set } from 'vue'
|
||||
import { set } from 'lodash'
|
||||
import Select from '../select/select.vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -6,11 +6,12 @@ export default {
|
|||
Select
|
||||
},
|
||||
props: [
|
||||
'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
|
||||
'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
|
||||
],
|
||||
emits: ['update:modelValue'],
|
||||
data () {
|
||||
return {
|
||||
lValue: this.value,
|
||||
lValue: this.modelValue,
|
||||
availableOptions: [
|
||||
this.noInherit ? '' : 'inherit',
|
||||
'custom',
|
||||
|
|
@ -22,7 +23,7 @@ export default {
|
|||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
this.lValue = this.value
|
||||
this.lValue = this.modelValue
|
||||
},
|
||||
computed: {
|
||||
present () {
|
||||
|
|
@ -37,7 +38,7 @@ export default {
|
|||
},
|
||||
set (v) {
|
||||
set(this.lValue, 'family', v)
|
||||
this.$emit('input', this.lValue)
|
||||
this.$emit('update:modelValue', this.lValue)
|
||||
}
|
||||
},
|
||||
isCustom () {
|
||||
|
|
|
|||
|
|
@ -15,13 +15,14 @@
|
|||
class="opt exlcude-disabled"
|
||||
type="checkbox"
|
||||
:checked="present"
|
||||
@input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
|
||||
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
|
||||
>
|
||||
<label
|
||||
v-if="typeof fallback !== 'undefined'"
|
||||
class="opt-l"
|
||||
:for="name + '-o'"
|
||||
/>
|
||||
{{ ' ' }}
|
||||
<Select
|
||||
:id="name + '-font-switcher'"
|
||||
v-model="preset"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Attachment from '../attachment/attachment.vue'
|
||||
import { sumBy } from 'lodash'
|
||||
import { sumBy, set } from 'lodash'
|
||||
|
||||
const Gallery = {
|
||||
props: [
|
||||
|
|
@ -85,7 +85,7 @@ const Gallery = {
|
|||
},
|
||||
methods: {
|
||||
onNaturalSizeLoad ({ id, width, height }) {
|
||||
this.$set(this.sizes, id, { width, height })
|
||||
set(this.sizes, id, { width, height })
|
||||
},
|
||||
rowStyle (row) {
|
||||
if (row.audio) {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
class="gallery-item"
|
||||
:nsfw="nsfw"
|
||||
:attachment="attachment"
|
||||
:allow-play="false"
|
||||
:size="size"
|
||||
:editable="editable"
|
||||
:remove="removeAttachment"
|
||||
|
|
|
|||
|
|
@ -44,20 +44,18 @@
|
|||
max-width: calc(100% - 3em);
|
||||
display: flex;
|
||||
padding-left: 1.5em;
|
||||
line-height: 2em;
|
||||
line-height: 2;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
.notice-message {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
i {
|
||||
flex: 0 0;
|
||||
width: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.global-error {
|
||||
background-color: var(--alertPopupError, $fallback--cRed);
|
||||
color: var(--alertPopupErrorText, $fallback--text);
|
||||
|
||||
.svg-inline--fa {
|
||||
color: var(--alertPopupErrorText, $fallback--text);
|
||||
}
|
||||
|
|
@ -66,6 +64,7 @@
|
|||
.global-warning {
|
||||
background-color: var(--alertPopupWarning, $fallback--cOrange);
|
||||
color: var(--alertPopupWarningText, $fallback--text);
|
||||
|
||||
.svg-inline--fa {
|
||||
color: var(--alertPopupWarningText, $fallback--text);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ const ImageCropper = {
|
|||
const fileInput = this.$refs.input
|
||||
fileInput.addEventListener('change', this.readFile)
|
||||
},
|
||||
beforeDestroy: function () {
|
||||
beforeUnmount: function () {
|
||||
// remove the event listeners
|
||||
const trigger = this.getTriggerDOM()
|
||||
if (trigger) {
|
||||
|
|
|
|||
|
|
@ -15,24 +15,9 @@ const Importer = {
|
|||
type: Function,
|
||||
required: true
|
||||
},
|
||||
submitButtonLabel: {
|
||||
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')
|
||||
}
|
||||
}
|
||||
submitButtonLabel: { type: String },
|
||||
successMessage: { type: String },
|
||||
errorMessage: { type: String }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -18,21 +18,31 @@
|
|||
class="btn button-default"
|
||||
@click="submit"
|
||||
>
|
||||
{{ submitButtonLabel }}
|
||||
{{ submitButtonLabel || $t('importer.submit') }}
|
||||
</button>
|
||||
<div v-if="success">
|
||||
<FAIcon
|
||||
icon="times"
|
||||
<button
|
||||
class="button-unstyled"
|
||||
@click="dismiss"
|
||||
/>
|
||||
<p>{{ successMessage }}</p>
|
||||
>
|
||||
<FAIcon
|
||||
icon="times"
|
||||
/>
|
||||
</button>
|
||||
{{ ' ' }}
|
||||
<span>{{ successMessage || $t('importer.success') }}</span>
|
||||
</div>
|
||||
<div v-else-if="error">
|
||||
<FAIcon
|
||||
icon="times"
|
||||
<button
|
||||
class="button-unstyled"
|
||||
@click="dismiss"
|
||||
/>
|
||||
<p>{{ errorMessage }}</p>
|
||||
>
|
||||
<FAIcon
|
||||
icon="times"
|
||||
/>
|
||||
</button>
|
||||
{{ ' ' }}
|
||||
<span>{{ errorMessage || $t('importer.error') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import Notifications from '../notifications/notifications.vue'
|
||||
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
|
||||
|
||||
const tabModeDict = {
|
||||
mentions: ['mention'],
|
||||
|
|
@ -23,7 +24,8 @@ const Interactions = {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
Notifications
|
||||
Notifications,
|
||||
TabSwitcher
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<label for="interface-language-switcher">
|
||||
{{ $t('settings.interfaceLanguage') }}
|
||||
{{ promptText }}
|
||||
</label>
|
||||
{{ ' ' }}
|
||||
<Select
|
||||
id="interface-language-switcher"
|
||||
v-model="language"
|
||||
v-model="controlledLanguage"
|
||||
>
|
||||
<option
|
||||
v-for="lang in languages"
|
||||
|
|
@ -19,39 +20,43 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import languagesObject from '../../i18n/messages'
|
||||
import localeService from '../../services/locale/locale.service.js'
|
||||
import ISO6391 from 'iso-639-1'
|
||||
import _ from 'lodash'
|
||||
import Select from '../select/select.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Select
|
||||
},
|
||||
props: {
|
||||
promptText: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
setLanguage: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
languages () {
|
||||
return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
|
||||
return localeService.languages
|
||||
},
|
||||
|
||||
language: {
|
||||
get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
|
||||
controlledLanguage: {
|
||||
get: function () { return this.language },
|
||||
set: function (val) {
|
||||
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
|
||||
this.setLanguage(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getLanguageName (code) {
|
||||
const specialLanguageNames = {
|
||||
'ja_easy': 'やさしいにほんご',
|
||||
'zh': '简体中文',
|
||||
'zh_Hant': '繁體中文'
|
||||
}
|
||||
const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
|
||||
const browserLocale = localeService.internalToBrowserLocale(code)
|
||||
return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
|
||||
return localeService.getLanguageName(code)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
}
|
||||
|
||||
.card-host {
|
||||
font-size: 12px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
|
|
|
|||
|
|
@ -76,11 +76,15 @@
|
|||
>
|
||||
<div class="alert error">
|
||||
{{ error }}
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
<button
|
||||
class="button-unstyled"
|
||||
@click="clearError"
|
||||
/>
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,7 +101,7 @@
|
|||
padding: 0.6em;
|
||||
|
||||
.btn {
|
||||
min-height: 28px;
|
||||
min-height: 2em;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ const MediaModal = {
|
|||
document.addEventListener('keyup', this.handleKeyupEvent)
|
||||
document.addEventListener('keydown', this.handleKeydownEvent)
|
||||
},
|
||||
destroyed () {
|
||||
unmounted () {
|
||||
window.removeEventListener('popstate', this.hide)
|
||||
document.removeEventListener('keyup', this.handleKeyupEvent)
|
||||
document.removeEventListener('keydown', this.handleKeydownEvent)
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em;
|
|||
$modal-view-button-icon-margin: 0.5em;
|
||||
|
||||
.modal-view.media-modal-view {
|
||||
z-index: 1001;
|
||||
z-index: 9000;
|
||||
flex-direction: column;
|
||||
|
||||
.modal-view-button-arrow,
|
||||
|
|
@ -234,7 +234,7 @@ $modal-view-button-icon-margin: 0.5em;
|
|||
position: absolute;
|
||||
height: $modal-view-button-icon-height;
|
||||
width: $modal-view-button-icon-width;
|
||||
font-size: 14px;
|
||||
font-size: 1rem;
|
||||
line-height: $modal-view-button-icon-height;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
/>
|
||||
<input
|
||||
v-if="uploadReady"
|
||||
class="hidden-input-file"
|
||||
:disabled="disabled"
|
||||
type="file"
|
||||
style="position: fixed; top: -100em"
|
||||
multiple="true"
|
||||
@change="change"
|
||||
>
|
||||
|
|
@ -32,6 +32,10 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.media-upload {
|
||||
cursor: pointer;
|
||||
cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
|
||||
|
||||
.hidden-input-file {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,10 +41,12 @@
|
|||
class="serverName"
|
||||
:class="{ '-faded': shouldFadeDomain }"
|
||||
v-html="'@' + serverName"
|
||||
/></span><span
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="isYou && shouldShowYous"
|
||||
:class="{ '-you': shouldBoldenYou }"
|
||||
> {{ $t('status.you') }}</span>
|
||||
> {{ ' ' + $t('status.you') }}</span>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</a><span
|
||||
v-if="shouldShowTooltip"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
class="mention-link"
|
||||
:content="mention.content"
|
||||
:url="mention.url"
|
||||
:first-mention="false"
|
||||
/><span
|
||||
v-if="manyMentions"
|
||||
class="extraMentions"
|
||||
|
|
@ -21,7 +20,6 @@
|
|||
class="mention-link"
|
||||
:content="mention.content"
|
||||
:url="mention.url"
|
||||
:first-mention="false"
|
||||
/>
|
||||
</span><button
|
||||
v-if="!expanded"
|
||||
|
|
|
|||
|
|
@ -56,11 +56,15 @@
|
|||
>
|
||||
<div class="alert error">
|
||||
{{ error }}
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
<button
|
||||
class="button-unstyled"
|
||||
@click="clearError"
|
||||
/>
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -58,12 +58,16 @@
|
|||
>
|
||||
<div class="alert error">
|
||||
{{ error }}
|
||||
<FAIcon
|
||||
size="lg"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
<button
|
||||
class="button-unstyled"
|
||||
@click="clearError"
|
||||
/>
|
||||
>
|
||||
<FAIcon
|
||||
size="lg"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,8 @@ const MobileNav = {
|
|||
this.$store.dispatch('logout')
|
||||
},
|
||||
markNotificationsAsSeen () {
|
||||
this.$refs.notifications.markAsSeen()
|
||||
// this.$refs.notifications.markAsSeen()
|
||||
this.$store.dispatch('markNotificationsAsSeen')
|
||||
},
|
||||
onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
|
||||
if (scrollTop + clientHeight >= scrollHeight) {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<nav
|
||||
id="nav"
|
||||
class="mobile-nav"
|
||||
:class="{ 'mobile-hidden': isChat }"
|
||||
@click="scrollToTop()"
|
||||
>
|
||||
<div class="item">
|
||||
|
|
@ -51,7 +50,7 @@
|
|||
<div
|
||||
v-if="currentUser"
|
||||
class="mobile-notifications-drawer"
|
||||
:class="{ 'closed': !notificationsOpen }"
|
||||
:class="{ '-closed': !notificationsOpen }"
|
||||
@touchstart.stop="notificationsTouchStart"
|
||||
@touchmove.stop="notificationsTouchMove"
|
||||
>
|
||||
|
|
@ -69,12 +68,9 @@
|
|||
</div>
|
||||
<div
|
||||
class="mobile-notifications"
|
||||
id="mobile-notifications"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<Notifications
|
||||
ref="notifications"
|
||||
:no-heading="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SideDrawer
|
||||
|
|
@ -92,13 +88,14 @@
|
|||
.MobileNav {
|
||||
.mobile-nav {
|
||||
display: grid;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
line-height: var(--navbar-height);
|
||||
grid-template-rows: 50px;
|
||||
grid-template-columns: 2fr auto;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
a {
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-inner-nav {
|
||||
|
|
@ -153,8 +150,9 @@
|
|||
z-index: 1001;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&.closed {
|
||||
&.-closed {
|
||||
transform: translateX(100%);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -182,7 +180,7 @@
|
|||
.mobile-notifications {
|
||||
margin-top: 50px;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 50px);
|
||||
height: calc(100vh - var(--navbar-height));
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const MobilePostStatusButton = {
|
|||
}
|
||||
window.addEventListener('resize', this.handleOSK)
|
||||
},
|
||||
destroyed () {
|
||||
unmounted () {
|
||||
if (this.autohideFloatingPostButton) {
|
||||
this.deactivateFloatingPostButtonAutohide()
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@ const MobilePostStatusButton = {
|
|||
return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
|
||||
},
|
||||
isPersistent () {
|
||||
return !!this.$store.getters.mergedConfig.showNewPostButton
|
||||
return !!this.$store.getters.mergedConfig.alwaysShowNewPostButton
|
||||
},
|
||||
autohideFloatingPostButton () {
|
||||
return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<template>
|
||||
<div v-if="isLoggedIn">
|
||||
<button
|
||||
class="button-default new-status-button"
|
||||
:class="{ 'hidden': isHidden, 'always-show': isPersistent }"
|
||||
@click="openPostForm"
|
||||
>
|
||||
<FAIcon icon="pen" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="isLoggedIn"
|
||||
class="MobilePostButton button-default new-status-button"
|
||||
:class="{ 'hidden': isHidden, 'always-show': isPersistent }"
|
||||
@click="openPostForm"
|
||||
>
|
||||
<FAIcon icon="pen" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script src="./mobile_post_status_button.js"></script>
|
||||
|
|
@ -15,25 +14,27 @@
|
|||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.new-status-button {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-radius: 100%;
|
||||
position: fixed;
|
||||
bottom: 1.5em;
|
||||
right: 1.5em;
|
||||
// TODO: this needs its own color, it has to stand out enough and link color
|
||||
// is not very optimal for this particular use.
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btn, $fallback--fg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
|
||||
z-index: 10;
|
||||
.MobilePostButton {
|
||||
&.button-default {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-radius: 100%;
|
||||
position: fixed;
|
||||
bottom: 1.5em;
|
||||
right: 1.5em;
|
||||
// TODO: this needs its own color, it has to stand out enough and link color
|
||||
// is not very optimal for this particular use.
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btn, $fallback--fg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
|
||||
z-index: 10;
|
||||
|
||||
transition: 0.35s transform;
|
||||
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
||||
transition: 0.35s transform;
|
||||
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
transform: translateY(150%);
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
.modal-view {
|
||||
z-index: 1000;
|
||||
z-index: 2000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@
|
|||
</button>
|
||||
</template>
|
||||
</Popover>
|
||||
<portal to="modal">
|
||||
<teleport to="#modal">
|
||||
<DialogModal
|
||||
v-if="showDeleteUserDialog"
|
||||
:on-cancel="deleteUserDialog.bind(this, false)"
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
</button>
|
||||
</template>
|
||||
</DialogModal>
|
||||
</portal>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
>
|
||||
<a
|
||||
class="avatar-container"
|
||||
:href="notification.from_profile.statusnet_profile_url"
|
||||
:href="$router.resolve(userProfileLink).href"
|
||||
@click.stop.prevent.capture="toggleUserExpanded"
|
||||
>
|
||||
<UserAvatar
|
||||
|
|
@ -65,12 +65,16 @@
|
|||
v-else
|
||||
class="username"
|
||||
:title="'@'+notification.from_profile.screen_name_ui"
|
||||
>{{ notification.from_profile.name }}</span>
|
||||
>
|
||||
{{ notification.from_profile.name }}
|
||||
</span>
|
||||
{{ ' ' }}
|
||||
<span v-if="notification.type === 'like'">
|
||||
<FAIcon
|
||||
class="type-icon"
|
||||
icon="star"
|
||||
/>
|
||||
{{ ' ' }}
|
||||
<small>{{ $t('notifications.favorited_you') }}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'repeat'">
|
||||
|
|
@ -79,6 +83,7 @@
|
|||
icon="retweet"
|
||||
:title="$t('tool_tip.repeat')"
|
||||
/>
|
||||
{{ ' ' }}
|
||||
<small>{{ $t('notifications.repeated_you') }}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'follow'">
|
||||
|
|
@ -86,6 +91,7 @@
|
|||
class="type-icon"
|
||||
icon="user-plus"
|
||||
/>
|
||||
{{ ' ' }}
|
||||
<small>{{ $t('notifications.followed_you') }}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'follow_request'">
|
||||
|
|
@ -93,6 +99,7 @@
|
|||
class="type-icon"
|
||||
icon="user"
|
||||
/>
|
||||
{{ ' ' }}
|
||||
<small>{{ $t('notifications.follow_request') }}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'move'">
|
||||
|
|
@ -100,18 +107,30 @@
|
|||
class="type-icon"
|
||||
icon="suitcase-rolling"
|
||||
/>
|
||||
{{ ' ' }}
|
||||
<small>{{ $t('notifications.migrated_to') }}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'pleroma:emoji_reaction'">
|
||||
<small>
|
||||
<i18n path="notifications.reacted_with">
|
||||
<i18n-t
|
||||
scope="global"
|
||||
keypath="notifications.reacted_with"
|
||||
>
|
||||
<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
|
||||
</i18n>
|
||||
</i18n-t>
|
||||
</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'pleroma:report'">
|
||||
<small>{{ $t('notifications.submitted_report') }}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'poll'">
|
||||
<FAIcon
|
||||
class="type-icon"
|
||||
icon="poll-h"
|
||||
/>
|
||||
{{ ' ' }}
|
||||
<small>{{ $t('notifications.poll_ended') }}</small>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="isStatusNotification"
|
||||
|
|
@ -164,18 +183,26 @@
|
|||
v-if="notification.type === 'follow_request'"
|
||||
style="white-space: nowrap;"
|
||||
>
|
||||
<FAIcon
|
||||
icon="check"
|
||||
class="fa-scale-110 fa-old-padding follow-request-accept"
|
||||
<button
|
||||
class="button-unstyled"
|
||||
:title="$t('tool_tip.accept_follow_request')"
|
||||
@click="approveUser()"
|
||||
/>
|
||||
<FAIcon
|
||||
icon="times"
|
||||
class="fa-scale-110 fa-old-padding follow-request-reject"
|
||||
>
|
||||
<FAIcon
|
||||
icon="check"
|
||||
class="fa-scale-110 fa-old-padding follow-request-accept"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="button-unstyled"
|
||||
:title="$t('tool_tip.reject_follow_request')"
|
||||
@click="denyUser()"
|
||||
/>
|
||||
>
|
||||
<FAIcon
|
||||
icon="times"
|
||||
class="fa-scale-110 fa-old-padding follow-request-reject"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -61,10 +61,19 @@
|
|||
:class="{ 'menu-checkbox-checked': filters.moves }"
|
||||
/>{{ $t('settings.notification_visibility_moves') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="toggleNotificationFilter('polls')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': filters.polls }"
|
||||
/>{{ $t('settings.notification_visibility_polls') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:trigger>
|
||||
<button class="button-unstyled">
|
||||
<button class="filter-trigger-button button-unstyled">
|
||||
<FAIcon icon="filter" />
|
||||
</button>
|
||||
</template>
|
||||
|
|
@ -107,15 +116,14 @@ export default {
|
|||
align-self: stretch;
|
||||
|
||||
> button {
|
||||
font-size: 1.2em;
|
||||
padding-left: 0.7em;
|
||||
padding-right: 0.2em;
|
||||
line-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
width: var(--__panel-heading-height-inner);
|
||||
text-align: center;
|
||||
|
||||
.dropdown-item {
|
||||
margin: 0;
|
||||
svg {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@ const Notifications = {
|
|||
NotificationFilters
|
||||
},
|
||||
props: {
|
||||
// Disables display of panel header
|
||||
noHeading: Boolean,
|
||||
// Disables panel styles, unread mark, potentially other notification-related actions
|
||||
// meant for "Interactions" timeline
|
||||
minimalMode: Boolean,
|
||||
// Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
|
||||
filterMode: Array
|
||||
filterMode: Array,
|
||||
// Disable teleporting (i.e. for /users/user/notifications)
|
||||
disableTeleport: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -65,6 +65,18 @@ const Notifications = {
|
|||
loading () {
|
||||
return this.$store.state.statuses.notifications.loading
|
||||
},
|
||||
noHeading () {
|
||||
const { layoutType } = this.$store.state.interface
|
||||
return this.minimalMode || layoutType === 'mobile'
|
||||
},
|
||||
teleportTarget () {
|
||||
const { layoutType } = this.$store.state.interface
|
||||
const map = {
|
||||
wide: '#notifs-column',
|
||||
mobile: '#mobile-notifications'
|
||||
}
|
||||
return map[layoutType] || '#notifs-sidebar'
|
||||
},
|
||||
notificationsToDisplay () {
|
||||
return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,10 +11,6 @@
|
|||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
.notifications-footer {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -47,6 +43,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:last-child .Notification {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.non-mention {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
@ -66,8 +66,6 @@
|
|||
}
|
||||
|
||||
.follow-request-accept {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
|
|
@ -75,8 +73,6 @@
|
|||
}
|
||||
|
||||
.follow-request-reject {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $fallback--cRed;
|
||||
color: var(--cRed, $fallback--cRed);
|
||||
|
|
@ -119,13 +115,13 @@
|
|||
}
|
||||
|
||||
.emoji-reaction-emoji {
|
||||
font-size: 16px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.notification-details {
|
||||
min-width: 0px;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
line-height:18px;
|
||||
line-height: var(--post-line-height);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
|
@ -148,7 +144,7 @@
|
|||
}
|
||||
|
||||
.timeago {
|
||||
margin-right: .2em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
|
|
@ -161,7 +157,8 @@
|
|||
margin: 0 0 0.3em;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
line-height:20px;
|
||||
line-height: 1.5;
|
||||
|
||||
small {
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +1,71 @@
|
|||
<template>
|
||||
<div
|
||||
:class="{ minimal: minimalMode }"
|
||||
class="Notifications"
|
||||
>
|
||||
<div :class="mainClass">
|
||||
<div
|
||||
v-if="!noHeading"
|
||||
class="panel-heading"
|
||||
>
|
||||
<div class="title">
|
||||
{{ $t('notifications.notifications') }}
|
||||
<span
|
||||
v-if="unseenCount"
|
||||
class="badge badge-notification unseen-count"
|
||||
>{{ unseenCount }}</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="unseenCount"
|
||||
class="button-default read-button"
|
||||
@click.prevent="markAsSeen"
|
||||
>
|
||||
{{ $t('notifications.read') }}
|
||||
</button>
|
||||
<NotificationFilters />
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<teleport :disabled="minimalMode || disableTeleport" :to="teleportTarget">
|
||||
<div
|
||||
:class="{ minimal: minimalMode }"
|
||||
class="Notifications"
|
||||
>
|
||||
<div :class="mainClass">
|
||||
<div
|
||||
v-for="notification in notificationsToDisplay"
|
||||
:key="notification.id"
|
||||
class="notification"
|
||||
:class="{"unseen": !minimalMode && !notification.seen}"
|
||||
v-if="!noHeading"
|
||||
class="notifications-heading panel-heading -sticky"
|
||||
>
|
||||
<div class="notification-overlay" />
|
||||
<notification :notification="notification" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer notifications-footer">
|
||||
<div
|
||||
v-if="bottomedOut"
|
||||
class="new-status-notification text-center faint"
|
||||
>
|
||||
{{ $t('notifications.no_more_notifications') }}
|
||||
</div>
|
||||
<button
|
||||
v-else-if="!loading"
|
||||
class="button-unstyled -link -fullwidth"
|
||||
@click.prevent="fetchOlderNotifications()"
|
||||
>
|
||||
<div class="new-status-notification text-center">
|
||||
{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
|
||||
<div class="title">
|
||||
{{ $t('notifications.notifications') }}
|
||||
<span
|
||||
v-if="unseenCount"
|
||||
class="badge badge-notification unseen-count"
|
||||
>{{ unseenCount }}</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="unseenCount"
|
||||
class="button-default read-button"
|
||||
@click.prevent="markAsSeen"
|
||||
>
|
||||
{{ $t('notifications.read') }}
|
||||
</button>
|
||||
<NotificationFilters />
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div
|
||||
v-for="notification in notificationsToDisplay"
|
||||
:key="notification.id"
|
||||
class="notification"
|
||||
:class="{unseen: !minimalMode && !notification.seen}"
|
||||
>
|
||||
<div class="notification-overlay" />
|
||||
<notification :notification="notification" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div
|
||||
v-if="bottomedOut"
|
||||
class="new-status-notification text-center faint"
|
||||
>
|
||||
{{ $t('notifications.no_more_notifications') }}
|
||||
</div>
|
||||
<button
|
||||
v-else-if="!loading"
|
||||
class="button-unstyled -link -fullwidth"
|
||||
@click.prevent="fetchOlderNotifications()"
|
||||
>
|
||||
<div class="new-status-notification text-center">
|
||||
{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="new-status-notification text-center"
|
||||
>
|
||||
<FAIcon
|
||||
icon="circle-notch"
|
||||
spin
|
||||
size="lg"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="new-status-notification text-center"
|
||||
>
|
||||
<FAIcon
|
||||
icon="circle-notch"
|
||||
spin
|
||||
size="lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script src="./notifications.js"></script>
|
||||
|
|
|
|||
|
|
@ -11,21 +11,21 @@
|
|||
</label>
|
||||
<Checkbox
|
||||
v-if="typeof fallback !== 'undefined'"
|
||||
:checked="present"
|
||||
:model-value="present"
|
||||
:disabled="disabled"
|
||||
class="opt"
|
||||
@change="$emit('input', !present ? fallback : undefined)"
|
||||
@update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
|
||||
/>
|
||||
<input
|
||||
:id="name"
|
||||
class="input-number"
|
||||
type="number"
|
||||
:value="value || fallback"
|
||||
:value="modelValue || fallback"
|
||||
:disabled="!present || disabled"
|
||||
max="1"
|
||||
min="0"
|
||||
step=".05"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -37,11 +37,12 @@ export default {
|
|||
Checkbox
|
||||
},
|
||||
props: [
|
||||
'name', 'value', 'fallback', 'disabled'
|
||||
'name', 'modelValue', 'fallback', 'disabled'
|
||||
],
|
||||
emits: ['update:modelValue'],
|
||||
computed: {
|
||||
present () {
|
||||
return typeof this.value !== 'undefined'
|
||||
return typeof this.modelValue !== 'undefined'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,14 +91,18 @@
|
|||
flex-direction: column;
|
||||
margin-top: 0.6em;
|
||||
max-width: 18rem;
|
||||
|
||||
> * {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1em;
|
||||
padding: 0.3em 0.0em 0.3em;
|
||||
line-height: 24px;
|
||||
padding: 0.3em 0;
|
||||
line-height: 1.85em;
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
@ -110,7 +114,7 @@
|
|||
|
||||
.alert {
|
||||
padding: 0.5em;
|
||||
margin: 0.3em 0.0em 1em;
|
||||
margin: 0.3em 0 1em;
|
||||
}
|
||||
|
||||
.password-reset-required {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
}
|
||||
this.$store.dispatch('trackPoll', this.pollId)
|
||||
},
|
||||
destroyed () {
|
||||
unmounted () {
|
||||
this.$store.dispatch('untrackPoll', this.pollId)
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -71,13 +71,18 @@
|
|||
{{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} ·
|
||||
</template>
|
||||
</div>
|
||||
<i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
|
||||
<Timeago
|
||||
:time="expiresAt"
|
||||
:auto-update="60"
|
||||
:now-threshold="0"
|
||||
/>
|
||||
</i18n>
|
||||
<span>
|
||||
<i18n-t
|
||||
scope="global"
|
||||
:keypath="expired ? 'polls.expired' : 'polls.expires_in'"
|
||||
>
|
||||
<Timeago
|
||||
:time="expiresAt"
|
||||
:auto-update="60"
|
||||
:now-threshold="0"
|
||||
/>
|
||||
</i18n-t>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@
|
|||
:max="maxExpirationInCurrentUnit"
|
||||
@change="expiryAmountChange"
|
||||
>
|
||||
{{ ' ' }}
|
||||
<Select
|
||||
v-model="expiryUnit"
|
||||
unstyled="true"
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ const Popover = {
|
|||
created () {
|
||||
document.addEventListener('click', this.onClickOutside)
|
||||
},
|
||||
destroyed () {
|
||||
unmounted () {
|
||||
document.removeEventListener('click', this.onClickOutside)
|
||||
this.hidePopover()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
>
|
||||
<button
|
||||
ref="trigger"
|
||||
class="button-unstyled -fullwidth popover-trigger-button"
|
||||
class="button-unstyled popover-trigger-button"
|
||||
type="button"
|
||||
@click="onClick"
|
||||
>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
.popover {
|
||||
z-index: 8;
|
||||
z-index: 500;
|
||||
position: absolute;
|
||||
min-width: 0;
|
||||
}
|
||||
|
|
@ -45,8 +45,19 @@
|
|||
.popover-default {
|
||||
transition: opacity 0.3s;
|
||||
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
|
||||
box-shadow: var(--panelShadow);
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: var(--panelShadow);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
border-radius: $fallback--btnRadius;
|
||||
border-radius: var(--btnRadius, $fallback--btnRadius);
|
||||
|
||||
|
|
@ -65,11 +76,11 @@
|
|||
.dropdown-menu {
|
||||
display: block;
|
||||
padding: .5rem 0;
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
max-width: 100vw;
|
||||
z-index: 10;
|
||||
z-index: 200;
|
||||
white-space: nowrap;
|
||||
|
||||
.dropdown-divider {
|
||||
|
|
@ -82,9 +93,9 @@
|
|||
|
||||
.dropdown-item {
|
||||
line-height: 21px;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
padding: .5em 0.75em;
|
||||
padding: 0.5em 0.75em;
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
text-align: inherit;
|
||||
|
|
@ -110,14 +121,15 @@
|
|||
&:active, &:hover {
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--selectedMenuPopover, $fallback--lightBg);
|
||||
color: $fallback--link;
|
||||
color: var(--selectedMenuPopoverText, $fallback--link);
|
||||
box-shadow: none;
|
||||
--btnText: var(--selectedMenuPopoverText, $fallback--link);
|
||||
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
||||
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
||||
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
||||
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
||||
svg {
|
||||
color: var(--selectedMenuPopoverIcon, $fallback--icon);
|
||||
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -142,12 +154,41 @@
|
|||
content: '✓';
|
||||
}
|
||||
|
||||
&.menu-checkbox-radio::after {
|
||||
font-size: 2em;
|
||||
content: '•';
|
||||
&.-radio {
|
||||
border-radius: 9999px;
|
||||
|
||||
&.menu-checkbox-checked::after {
|
||||
font-size: 2em;
|
||||
content: '•';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.button-default.dropdown-item {
|
||||
&,
|
||||
i[class*=icon-] {
|
||||
color: $fallback--text;
|
||||
color: var(--btnText, $fallback--text);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--selectedMenuPopover, $fallback--lightBg);
|
||||
color: $fallback--link;
|
||||
color: var(--selectedMenuPopoverText, $fallback--link);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $fallback--text;
|
||||
color: var(--btnDisabledText, $fallback--text);
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
color: $fallback--text;
|
||||
color: var(--btnToggledText, $fallback--text);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -78,6 +78,12 @@ const PostStatusForm = {
|
|||
'emojiPickerPlacement',
|
||||
'optimisticPosting'
|
||||
],
|
||||
emits: [
|
||||
'posted',
|
||||
'resize',
|
||||
'mediaplay',
|
||||
'mediapause'
|
||||
],
|
||||
components: {
|
||||
MediaUpload,
|
||||
EmojiInput,
|
||||
|
|
@ -480,7 +486,7 @@ const PostStatusForm = {
|
|||
const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
|
||||
const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)
|
||||
|
||||
const scrollerRef = this.$el.closest('.sidebar-scroller') ||
|
||||
const scrollerRef = this.$el.closest('.column.-scrollable') ||
|
||||
this.$el.closest('.post-form-modal-view') ||
|
||||
window
|
||||
|
||||
|
|
|
|||
|
|
@ -8,21 +8,13 @@
|
|||
@submit.prevent
|
||||
@dragover.prevent="fileDrag"
|
||||
>
|
||||
<div
|
||||
v-show="showDropIcon !== 'hide'"
|
||||
:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
|
||||
class="drop-indicator"
|
||||
@dragleave="fileDragStop"
|
||||
@drop.stop="fileDrop"
|
||||
>
|
||||
<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<i18n
|
||||
<i18n-t
|
||||
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
|
||||
path="post_status.account_not_locked_warning"
|
||||
keypath="post_status.account_not_locked_warning"
|
||||
tag="p"
|
||||
class="visibility-notice"
|
||||
scope="global"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled -link"
|
||||
|
|
@ -30,7 +22,7 @@
|
|||
>
|
||||
{{ $t('post_status.account_not_locked_warning_link') }}
|
||||
</button>
|
||||
</i18n>
|
||||
</i18n-t>
|
||||
<p
|
||||
v-if="!hideScopeNotice && newStatus.visibility === 'public'"
|
||||
class="visibility-notice notice-dismissible"
|
||||
|
|
@ -276,16 +268,29 @@
|
|||
{{ $t('post_status.post') }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-show="showDropIcon !== 'hide'"
|
||||
:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
|
||||
class="drop-indicator"
|
||||
@dragleave="fileDragStop"
|
||||
@drop.stop="fileDrop"
|
||||
>
|
||||
<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
|
||||
</div>
|
||||
<div
|
||||
v-if="error"
|
||||
class="alert error"
|
||||
>
|
||||
Error: {{ error }}
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
<button
|
||||
class="button-unstyled"
|
||||
@click="clearError"
|
||||
/>
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<gallery
|
||||
v-if="newStatus.files && newStatus.files.length > 0"
|
||||
|
|
@ -331,7 +336,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5em;
|
||||
height: 32px;
|
||||
height: 2.5em;
|
||||
|
||||
button {
|
||||
width: 10em;
|
||||
|
|
@ -389,7 +394,6 @@
|
|||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.text-format {
|
||||
|
|
@ -403,13 +407,16 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 5px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.media-upload-icon, .poll-icon, .emoji-icon {
|
||||
font-size: 26px;
|
||||
font-size: 1.85em;
|
||||
line-height: 1.1;
|
||||
flex: 1;
|
||||
padding: 0 0.1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.selected, &:hover {
|
||||
// needs to be specific to override icon default color
|
||||
|
|
@ -436,21 +443,17 @@
|
|||
// Order is not necessary but a good indicator
|
||||
.media-upload-icon {
|
||||
order: 1;
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.emoji-icon {
|
||||
order: 2;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.poll-icon {
|
||||
order: 3;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.poll-icon {
|
||||
cursor: pointer;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
@ -484,10 +487,6 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -503,26 +502,20 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.25em 0.5em 0.5em;
|
||||
line-height:24px;
|
||||
}
|
||||
|
||||
form textarea.form-cw {
|
||||
line-height:16px;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
transition: min-height 200ms 100ms;
|
||||
min-height: 1px;
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.form-post-body {
|
||||
height: 16px; // Only affects the empty-height
|
||||
line-height: 16px;
|
||||
resize: none;
|
||||
// TODO: make a resizable textarea component?
|
||||
box-sizing: content-box; // needed for easier computation of dynamic size
|
||||
overflow: hidden;
|
||||
transition: min-height 200ms 100ms;
|
||||
padding-bottom: 1.75em;
|
||||
min-height: 1px;
|
||||
box-sizing: content-box;
|
||||
// stock padding + 1 line of text (for counter)
|
||||
padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
|
||||
// two lines of text
|
||||
height: calc(var(--post-line-height) * 1em);
|
||||
min-height: calc(var(--post-line-height) * 1em);
|
||||
resize: none;
|
||||
|
||||
&.scrollable-form {
|
||||
overflow-y: auto;
|
||||
|
|
@ -546,10 +539,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -566,7 +555,6 @@
|
|||
|
||||
.drop-indicator {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 5em;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const PublicAndExternalTimeline = {
|
|||
created () {
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' })
|
||||
},
|
||||
destroyed () {
|
||||
unmounted () {
|
||||
this.$store.dispatch('stopFetchingTimeline', 'publicAndExternal')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const PublicTimeline = {
|
|||
created () {
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'public' })
|
||||
},
|
||||
destroyed () {
|
||||
unmounted () {
|
||||
this.$store.dispatch('stopFetchingTimeline', 'public')
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
class="opt"
|
||||
type="checkbox"
|
||||
:checked="present"
|
||||
@input="$emit('input', !present ? fallback : undefined)"
|
||||
@change="$emit('update:modelValue', !present ? fallback : undefined)"
|
||||
>
|
||||
<label
|
||||
v-if="typeof fallback !== 'undefined'"
|
||||
|
|
@ -26,23 +26,23 @@
|
|||
:id="name"
|
||||
class="input-number"
|
||||
type="range"
|
||||
:value="value || fallback"
|
||||
:value="modelValue || fallback"
|
||||
:disabled="!present || disabled"
|
||||
:max="max || hardMax || 100"
|
||||
:min="min || hardMin || 0"
|
||||
:step="step || 1"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
<input
|
||||
:id="name"
|
||||
class="input-number"
|
||||
type="number"
|
||||
:value="value || fallback"
|
||||
:value="modelValue || fallback"
|
||||
:disabled="!present || disabled"
|
||||
:max="hardMax"
|
||||
:min="hardMin"
|
||||
:step="step || 1"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -50,11 +50,12 @@
|
|||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'name', 'value', 'fallback', 'disabled', 'label', 'max', 'min', 'step', 'hardMin', 'hardMax'
|
||||
'name', 'modelValue', 'fallback', 'disabled', 'label', 'max', 'min', 'step', 'hardMin', 'hardMax'
|
||||
],
|
||||
emits: ['update:modelValue'],
|
||||
computed: {
|
||||
present () {
|
||||
return typeof this.value !== 'undefined'
|
||||
return typeof this.modelValue !== 'undefined'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Popover from '../popover/popover.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
|
||||
import { trim } from 'lodash'
|
||||
|
||||
library.add(faSmileBeam)
|
||||
|
||||
|
|
@ -43,7 +44,7 @@ const ReactButton = {
|
|||
},
|
||||
emojis () {
|
||||
if (this.filterWord !== '') {
|
||||
const filterWordLowercase = this.filterWord.toLowerCase()
|
||||
const filterWordLowercase = trim(this.filterWord.toLowerCase())
|
||||
let orderedEmojiList = []
|
||||
for (const emoji of this.$store.state.instance.emoji) {
|
||||
if (emoji.replacement === this.filterWord) return [emoji]
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<div class="reaction-picker-filter">
|
||||
<input
|
||||
v-model="filterWord"
|
||||
@input="$event.target.composing = false"
|
||||
size="1"
|
||||
:placeholder="$t('emoji.search_emoji')"
|
||||
>
|
||||
|
|
@ -101,7 +102,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
flex-basis: 20%;
|
||||
line-height: 1.5em;
|
||||
line-height: 1.5;
|
||||
align-content: center;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import { validationMixin } from 'vuelidate'
|
||||
import { required, requiredIf, sameAs } from 'vuelidate/lib/validators'
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { required, requiredIf, sameAs } from '@vuelidate/validators'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
|
||||
import localeService from '../../services/locale/locale.service.js'
|
||||
|
||||
const registration = {
|
||||
mixins: [validationMixin],
|
||||
setup () { return { v$: useVuelidate() } },
|
||||
data: () => ({
|
||||
user: {
|
||||
email: '',
|
||||
|
|
@ -11,10 +13,14 @@ const registration = {
|
|||
username: '',
|
||||
password: '',
|
||||
confirm: '',
|
||||
reason: ''
|
||||
reason: '',
|
||||
language: ''
|
||||
},
|
||||
captcha: {}
|
||||
}),
|
||||
components: {
|
||||
InterfaceLanguageSwitcher
|
||||
},
|
||||
validations () {
|
||||
return {
|
||||
user: {
|
||||
|
|
@ -24,9 +30,10 @@ const registration = {
|
|||
password: { required },
|
||||
confirm: {
|
||||
required,
|
||||
sameAsPassword: sameAs('password')
|
||||
sameAs: sameAs(this.user.password)
|
||||
},
|
||||
reason: { required: requiredIf(() => this.accountApprovalRequired) }
|
||||
reason: { required: requiredIf(() => this.accountApprovalRequired) },
|
||||
language: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -64,10 +71,13 @@ const registration = {
|
|||
this.user.captcha_solution = this.captcha.solution
|
||||
this.user.captcha_token = this.captcha.token
|
||||
this.user.captcha_answer_data = this.captcha.answer_data
|
||||
if (this.user.language) {
|
||||
this.user.language = localeService.internalToBackendLocale(this.user.language)
|
||||
}
|
||||
|
||||
this.$v.$touch()
|
||||
this.v$.$touch()
|
||||
|
||||
if (!this.$v.$invalid) {
|
||||
if (!this.v$.$invalid) {
|
||||
try {
|
||||
await this.signUp(this.user)
|
||||
this.$router.push({ name: 'friends' })
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="text-fields">
|
||||
<div
|
||||
class="form-group"
|
||||
:class="{ 'form-group--error': $v.user.username.$error }"
|
||||
:class="{ 'form-group--error': v$.user.username.$error }"
|
||||
>
|
||||
<label
|
||||
class="form--label"
|
||||
|
|
@ -20,18 +20,18 @@
|
|||
>{{ $t('login.username') }}</label>
|
||||
<input
|
||||
id="sign-up-username"
|
||||
v-model.trim="$v.user.username.$model"
|
||||
v-model.trim="v$.user.username.$model"
|
||||
:disabled="isPending"
|
||||
class="form-control"
|
||||
:placeholder="$t('registration.username_placeholder')"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="$v.user.username.$dirty"
|
||||
v-if="v$.user.username.$dirty"
|
||||
class="form-error"
|
||||
>
|
||||
<ul>
|
||||
<li v-if="!$v.user.username.required">
|
||||
<li v-if="!v$.user.username.required">
|
||||
<span>{{ $t('registration.validations.username_required') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
<div
|
||||
class="form-group"
|
||||
:class="{ 'form-group--error': $v.user.fullname.$error }"
|
||||
:class="{ 'form-group--error': v$.user.fullname.$error }"
|
||||
>
|
||||
<label
|
||||
class="form--label"
|
||||
|
|
@ -47,18 +47,18 @@
|
|||
>{{ $t('registration.fullname') }}</label>
|
||||
<input
|
||||
id="sign-up-fullname"
|
||||
v-model.trim="$v.user.fullname.$model"
|
||||
v-model.trim="v$.user.fullname.$model"
|
||||
:disabled="isPending"
|
||||
class="form-control"
|
||||
:placeholder="$t('registration.fullname_placeholder')"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="$v.user.fullname.$dirty"
|
||||
v-if="v$.user.fullname.$dirty"
|
||||
class="form-error"
|
||||
>
|
||||
<ul>
|
||||
<li v-if="!$v.user.fullname.required">
|
||||
<li v-if="!v$.user.fullname.required">
|
||||
<span>{{ $t('registration.validations.fullname_required') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
<div
|
||||
class="form-group"
|
||||
:class="{ 'form-group--error': $v.user.email.$error }"
|
||||
:class="{ 'form-group--error': v$.user.email.$error }"
|
||||
>
|
||||
<label
|
||||
class="form--label"
|
||||
|
|
@ -74,18 +74,18 @@
|
|||
>{{ $t('registration.email') }}</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="$v.user.email.$model"
|
||||
v-model="v$.user.email.$model"
|
||||
:disabled="isPending"
|
||||
class="form-control"
|
||||
type="email"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="$v.user.email.$dirty"
|
||||
v-if="v$.user.email.$dirty"
|
||||
class="form-error"
|
||||
>
|
||||
<ul>
|
||||
<li v-if="!$v.user.email.required">
|
||||
<li v-if="!v$.user.email.required">
|
||||
<span>{{ $t('registration.validations.email_required') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
|
||||
<div
|
||||
class="form-group"
|
||||
:class="{ 'form-group--error': $v.user.password.$error }"
|
||||
:class="{ 'form-group--error': v$.user.password.$error }"
|
||||
>
|
||||
<label
|
||||
class="form--label"
|
||||
|
|
@ -122,11 +122,11 @@
|
|||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="$v.user.password.$dirty"
|
||||
v-if="v$.user.password.$dirty"
|
||||
class="form-error"
|
||||
>
|
||||
<ul>
|
||||
<li v-if="!$v.user.password.required">
|
||||
<li v-if="!v$.user.password.required">
|
||||
<span>{{ $t('registration.validations.password_required') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
|
||||
<div
|
||||
class="form-group"
|
||||
:class="{ 'form-group--error': $v.user.confirm.$error }"
|
||||
:class="{ 'form-group--error': v$.user.confirm.$error }"
|
||||
>
|
||||
<label
|
||||
class="form--label"
|
||||
|
|
@ -149,19 +149,31 @@
|
|||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="$v.user.confirm.$dirty"
|
||||
v-if="v$.user.confirm.$dirty"
|
||||
class="form-error"
|
||||
>
|
||||
<ul>
|
||||
<li v-if="!$v.user.confirm.required">
|
||||
<li v-if="!v$.user.confirm.required">
|
||||
<span>{{ $t('registration.validations.password_confirmation_required') }}</span>
|
||||
</li>
|
||||
<li v-if="!$v.user.confirm.sameAsPassword">
|
||||
<li v-if="!v$.user.confirm.sameAsPassword">
|
||||
<span>{{ $t('registration.validations.password_confirmation_match') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="form-group"
|
||||
:class="{ 'form-group--error': v$.user.language.$error }"
|
||||
>
|
||||
<interface-language-switcher
|
||||
for="email-language"
|
||||
:prompt-text="$t('registration.email_language')"
|
||||
:language="v$.user.language.$model"
|
||||
:set-language="val => v$.user.language.$model = val"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="accountApprovalRequired"
|
||||
class="form-group"
|
||||
|
|
@ -271,7 +283,10 @@ $validations-cRed: #f04124;
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
//margin-bottom: 1em;
|
||||
|
||||
> * {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.terms-of-service {
|
||||
|
|
@ -294,8 +309,8 @@ $validations-cRed: #f04124;
|
|||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.3em 0.0em 0.3em;
|
||||
line-height:24px;
|
||||
padding: 0.3em 0;
|
||||
line-height: 2;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -315,7 +330,7 @@ $validations-cRed: #f04124;
|
|||
text-align: left;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -341,7 +356,7 @@ $validations-cRed: #f04124;
|
|||
|
||||
.btn {
|
||||
margin-top: 0.6em;
|
||||
height: 28px;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
.remote-button {
|
||||
width: 100%;
|
||||
min-height: 28px;
|
||||
min-height: 2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import Vue from 'vue'
|
||||
import { unescape, flattenDeep } from 'lodash'
|
||||
import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
|
||||
import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
|
||||
|
|
@ -27,8 +26,12 @@ import './rich_content.scss'
|
|||
*
|
||||
* Apart from that one small hiccup with emit in render this _should_ be vue3-ready
|
||||
*/
|
||||
export default Vue.component('RichContent', {
|
||||
export default {
|
||||
name: 'RichContent',
|
||||
components: {
|
||||
MentionsLine,
|
||||
HashtagLink
|
||||
},
|
||||
props: {
|
||||
// Original html content
|
||||
html: {
|
||||
|
|
@ -58,7 +61,7 @@ export default Vue.component('RichContent', {
|
|||
}
|
||||
},
|
||||
// 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
|
||||
|
|
@ -76,18 +79,19 @@ export default Vue.component('RichContent', {
|
|||
|
||||
const renderImage = (tag) => {
|
||||
return <StillImage
|
||||
{...{ attrs: getAttrs(tag) }}
|
||||
{...getAttrs(tag)}
|
||||
class="img"
|
||||
/>
|
||||
}
|
||||
|
||||
const renderHashtag = (attrs, children, encounteredTextReverse) => {
|
||||
const linkData = getLinkData(attrs, children, tagsIndex++)
|
||||
const { index, ...linkData } = getLinkData(attrs, children, tagsIndex++)
|
||||
writtenTags.push(linkData)
|
||||
if (!encounteredTextReverse) {
|
||||
lastTags.push(linkData)
|
||||
}
|
||||
return <HashtagLink {...{ props: linkData }}/>
|
||||
const { url, tag, content } = linkData
|
||||
return <HashtagLink url={url} tag={tag} content={content}/>
|
||||
}
|
||||
|
||||
const renderMention = (attrs, children) => {
|
||||
|
|
@ -222,7 +226,7 @@ export default Vue.component('RichContent', {
|
|||
attrs.target = '_blank'
|
||||
const newChildren = [...children].reverse().map(processItemReverse).reverse()
|
||||
|
||||
return <a {...{ attrs }}>
|
||||
return <a {...attrs}>
|
||||
{ newChildren }
|
||||
</a>
|
||||
}
|
||||
|
|
@ -235,7 +239,7 @@ export default Vue.component('RichContent', {
|
|||
const newChildren = Array.isArray(children)
|
||||
? [...children].reverse().map(processItemReverse).reverse()
|
||||
: children
|
||||
return <Tag {...{ attrs: getAttrs(opener) }}>
|
||||
return <Tag {...getAttrs(opener)}>
|
||||
{ newChildren }
|
||||
</Tag>
|
||||
} else {
|
||||
|
|
@ -266,7 +270,7 @@ export default Vue.component('RichContent', {
|
|||
|
||||
return result
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getLinkData = (attrs, children, index) => {
|
||||
const stripTags = (item) => {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
class="fa-scale-110 fa-old-padding"
|
||||
/>
|
||||
</button>
|
||||
{{ ' ' }}
|
||||
<button
|
||||
v-if="showPrivate"
|
||||
class="button-unstyled scope"
|
||||
|
|
@ -29,6 +30,7 @@
|
|||
class="fa-scale-110 fa-old-padding"
|
||||
/>
|
||||
</button>
|
||||
{{ ' ' }}
|
||||
<button
|
||||
v-if="showUnlisted"
|
||||
class="button-unstyled scope"
|
||||
|
|
@ -42,6 +44,7 @@
|
|||
class="fa-scale-110 fa-old-padding"
|
||||
/>
|
||||
</button>
|
||||
{{ ' ' }}
|
||||
<button
|
||||
v-if="showPublic"
|
||||
class="button-unstyled scope"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import FollowCard from '../follow_card/follow_card.vue'
|
||||
import Conversation from '../conversation/conversation.vue'
|
||||
import Status from '../status/status.vue'
|
||||
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
|
||||
import map from 'lodash/map'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
|
|
@ -17,7 +18,8 @@ const Search = {
|
|||
components: {
|
||||
FollowCard,
|
||||
Conversation,
|
||||
Status
|
||||
Status,
|
||||
TabSwitcher
|
||||
},
|
||||
props: [
|
||||
'query'
|
||||
|
|
|
|||
|
|
@ -8,12 +8,9 @@ library.add(
|
|||
)
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
props: [
|
||||
'value',
|
||||
'modelValue',
|
||||
'disabled',
|
||||
'unstyled',
|
||||
'kind'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<template>
|
||||
<label
|
||||
class="Select input"
|
||||
|
|
@ -6,11 +5,12 @@
|
|||
>
|
||||
<select
|
||||
:disabled="disabled"
|
||||
:value="value"
|
||||
@change="$emit('change', $event.target.value)"
|
||||
:value="modelValue"
|
||||
@change="$emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
<slot />
|
||||
</select>
|
||||
{{ ' ' }}
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
|
|
@ -23,7 +23,8 @@
|
|||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.Select {
|
||||
/* TODO fix order of styles */
|
||||
label.Select {
|
||||
padding: 0;
|
||||
|
||||
select {
|
||||
|
|
@ -38,10 +39,10 @@
|
|||
padding: 0 2em 0 .2em;
|
||||
font-family: sans-serif;
|
||||
font-family: var(--inputFont, sans-serif);
|
||||
font-size: 14px;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
height: 28px;
|
||||
height: 2em;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +55,7 @@
|
|||
width: 0.875em;
|
||||
color: $fallback--text;
|
||||
color: var(--inputText, $fallback--text);
|
||||
line-height: 28px;
|
||||
line-height: 2;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
>
|
||||
<div class="selectable-list-checkbox-wrapper">
|
||||
<Checkbox
|
||||
:checked="allSelected"
|
||||
:model-value="allSelected"
|
||||
:indeterminate="someSelected"
|
||||
@change="toggleAll"
|
||||
@update:model-value="toggleAll"
|
||||
>
|
||||
{{ $t('selectable_list.select_all') }}
|
||||
</Checkbox>
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
>
|
||||
<div class="selectable-list-checkbox-wrapper">
|
||||
<Checkbox
|
||||
:checked="isSelected(item)"
|
||||
@change="checked => toggle(checked, item)"
|
||||
:model-value="isSelected(item)"
|
||||
@update:model-value="checked => toggle(checked, item)"
|
||||
/>
|
||||
</div>
|
||||
<slot
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
class="BooleanSetting"
|
||||
>
|
||||
<Checkbox
|
||||
:checked="state"
|
||||
:model-value="state"
|
||||
:disabled="disabled"
|
||||
@change="update"
|
||||
@update:modelValue="update"
|
||||
>
|
||||
<span
|
||||
v-if="!!$slots.default"
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
>
|
||||
<slot />
|
||||
</span>
|
||||
{{ ' ' }}
|
||||
<ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :server-side="isServerSide" /> </Checkbox>
|
||||
</label>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@
|
|||
class="ChoiceSetting"
|
||||
>
|
||||
<slot />
|
||||
{{ ' ' }}
|
||||
<Select
|
||||
:value="state"
|
||||
:model-value="state"
|
||||
:disabled="disabled"
|
||||
@change="update"
|
||||
@update:modelValue="update"
|
||||
>
|
||||
<option
|
||||
v-for="option in options"
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue