mirror of
https://akkoma.dev/lamp/akkoma-fe.git
synced 2026-06-04 14:20:05 -04:00
Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Shpuld Shpuldson
|
6aa276374f | ||
|
Shpuld Shpludson
|
23232e1c8f | ||
|
Shpuld Shpludson
|
b225c3578f | ||
|
Shpuld Shpludson
|
30efbaab34 | ||
|
Shpuld Shpuldson
|
8ca0586c0f | ||
|
Shpuld Shpludson
|
938887ef91 | ||
|
Shpuld Shpludson
|
f31bc5310e | ||
|
Shpuld Shpuldson
|
925bf5b5a4 | ||
|
Shpuld Shpludson
|
e768ec1fca | ||
|
Shpuld Shpuldson
|
d09f43ba7a | ||
|
Shpuld Shpuldson
|
748c4d8c71 | ||
|
Shpuld Shpludson
|
c7ddfefe34 | ||
|
Shpuld Shpuldson
|
c0205d582a | ||
|
Shpuld Shpuldson
|
4ac882a3b0 | ||
|
Shpuld Shpuldson
|
bdbc4b27b6 | ||
|
Shpuld Shpuldson
|
42598fc675 | ||
|
Shpuld Shpludson
|
5d49edc823 | ||
|
Shpuld Shpuldson
|
0bc0a8d5f5 | ||
|
Shpuld Shpuldson
|
726d5279c1 | ||
|
Shpuld Shpludson
|
a0f780c455 |
+1
-87
@@ -3,90 +3,6 @@ All notable changes to this project will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
||||
|
||||
## [2.4.0] - 2021-08-08
|
||||
### Added
|
||||
- Added a quick settings to timeline header for easier access
|
||||
- Added option to mark posts as sensitive by default
|
||||
- Added quick filters for notifications
|
||||
- Implemented user option to change sidebar position to the right side
|
||||
- Implemented user option to hide floating shout panel
|
||||
- Implemented "edit profile" button if viewing own profile which opens profile settings
|
||||
|
||||
### Fixed
|
||||
- Fixed follow request count showing in the wrong location in mobile view
|
||||
|
||||
## [2.3.0] - 2021-03-01
|
||||
### Fixed
|
||||
- Button to remove uploaded media in post status form is now properly placed and sized.
|
||||
- Fixed shoutbox not working in mobile layout
|
||||
- Fixed missing highlighted border in expanded conversations again
|
||||
- Fixed some UI jumpiness when opening images particularly in chat view
|
||||
- Fixed chat unread badge looking weird
|
||||
- Fixed punycode names not working properly
|
||||
- Fixed notifications crashing on an invalid notification
|
||||
|
||||
### Changed
|
||||
- Display 'people voted' instead of 'votes' for multi-choice polls
|
||||
- Changed the "Timelines" link in side panel to toggle show all timeline options inside the panel
|
||||
- Renamed "Timeline" to "Home Timeline" to be more clear
|
||||
- Optimized chat to not get horrible performance after keeping the same chat open for a long time
|
||||
- When opening emoji picker or react picker, it automatically focuses the search field
|
||||
- Language picker now uses native language names
|
||||
|
||||
### Added
|
||||
- Added reason field for registration when approval is required
|
||||
- Group staff members by role in the About page
|
||||
|
||||
|
||||
## [2.2.3] - 2021-01-18
|
||||
### Added
|
||||
- Added Report button to status ellipsis menu for easier reporting
|
||||
|
||||
### Fixed
|
||||
- Follows/Followers tabs on user profiles now display the content properly.
|
||||
- Handle punycode in screen names
|
||||
- Fixed local dev mode having non-functional websockets in some cases
|
||||
- Show notices for websocket events (errors, abnormal closures, reconnections)
|
||||
- Fix not being able to re-enable websocket until page refresh
|
||||
- Fix annoying issue where timeline might have few posts when streaming is enabled
|
||||
|
||||
### Changed
|
||||
- Don't filter own posts when they hit your wordfilter
|
||||
|
||||
|
||||
## [2.2.2] - 2020-12-22
|
||||
### Added
|
||||
- Mouseover titles for emojis in reaction picker
|
||||
- Support to input emoji into the search box in reaction picker
|
||||
- Added some missing unicode emoji
|
||||
- Added the upload limit to the Features panel in the About page
|
||||
- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
|
||||
|
||||
### Fixed
|
||||
- Fixed the occasional bug where screen would scroll 1px when typing into a reply form
|
||||
- Fixed timeline errors locking timelines
|
||||
- Fixed missing highlighted border in expanded conversations
|
||||
- Fixed custom emoji not working in profile field names
|
||||
- Fixed pinned statuses not appearing in user profiles
|
||||
- Fixed some elements not being keyboard navigation friendly
|
||||
- Fixed error handling when updating various profile images
|
||||
- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
|
||||
- Fixed custom emoji not showing in poll options before voting
|
||||
- Fixed link color not applied to instance name in topbar
|
||||
|
||||
### Changed
|
||||
- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
|
||||
- Made reply/fav/repeat etc buttons easier to hit
|
||||
- Adjusted timeline menu clickable area to match the visible button
|
||||
- Moved external source link from status heading to the ellipsis menu
|
||||
- Disabled horizontal textarea resize
|
||||
- Wallpaper is now top-aligned, horizontally centered.
|
||||
|
||||
|
||||
## [2.2.1] - 2020-11-11
|
||||
### Fixed
|
||||
- Fixed regression in react popup alignment and overflowing
|
||||
|
||||
|
||||
## [2.2.0] - 2020-11-06
|
||||
### Added
|
||||
@@ -95,8 +11,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
||||
- Import/export a muted users
|
||||
- Proper handling of deletes when using websocket streaming
|
||||
- Added optimistic chat message sending, so you can start writing next message before the previous one has been sent
|
||||
- Added a small red badge to the favicon when there's unread notifications
|
||||
- Added the NSFW alert to link previews
|
||||
|
||||
### Fixed
|
||||
- Fixed clicking NSFW hider through status popover
|
||||
@@ -118,7 +32,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
||||
## [2.1.2] - 2020-09-17
|
||||
### Fixed
|
||||
- Fixed chats list not updating its order when new messages come in
|
||||
- Fixed chat messages sometimes getting lost when you receive a message at the same time
|
||||
- Fixed chat messages sometimes getting lost when you receive a message at the same time
|
||||
|
||||
|
||||
## [2.1.1] - 2020-09-08
|
||||
|
||||
@@ -3,7 +3,6 @@ Contributors of this project.
|
||||
- Constance Variable (lambadalambda@social.heldscal.la): Code
|
||||
- Coco Snuss (cocosnuss@social.heldscal.la): Code
|
||||
- wakarimasen (wakarimasen@shitposter.club): NSFW hiding image
|
||||
- eris (eris@disqordia.space): Code
|
||||
- dtluna (dtluna@social.heldscal.la): Code
|
||||
- sonyam (sonyam@social.heldscal.la): Background images
|
||||
- hakui (hakui@freezepeach.xyz): CSS and styling
|
||||
|
||||
@@ -21,7 +21,6 @@ var compiler = webpack(webpackConfig)
|
||||
|
||||
var devMiddleware = require('webpack-dev-middleware')(compiler, {
|
||||
publicPath: webpackConfig.output.publicPath,
|
||||
writeToDisk: true,
|
||||
stats: {
|
||||
colors: true,
|
||||
chunks: false
|
||||
|
||||
@@ -3,7 +3,6 @@ var config = require('../config')
|
||||
var utils = require('./utils')
|
||||
var projectRoot = path.resolve(__dirname, '../')
|
||||
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
|
||||
var CopyPlugin = require('copy-webpack-plugin');
|
||||
|
||||
var env = process.env.NODE_ENV
|
||||
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
|
||||
@@ -94,19 +93,6 @@ module.exports = {
|
||||
new ServiceWorkerWebpackPlugin({
|
||||
entry: path.join(__dirname, '..', 'src/sw.js'),
|
||||
filename: 'sw-pleroma.js'
|
||||
}),
|
||||
// This copies Ruffle's WASM to a directory so that JS side can access it
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
{
|
||||
from: "node_modules/ruffle-mirror/*",
|
||||
to: "static/ruffle",
|
||||
flatten: true
|
||||
},
|
||||
],
|
||||
options: {
|
||||
concurrency: 100,
|
||||
},
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
@@ -3,11 +3,6 @@ const path = require('path')
|
||||
let settings = {}
|
||||
try {
|
||||
settings = require('./local.json')
|
||||
if (settings.target && settings.target.endsWith('/')) {
|
||||
// replacing trailing slash since it can conflict with some apis
|
||||
// and that's how actual BE reports its url
|
||||
settings.target = settings.target.replace(/\/$/, '')
|
||||
}
|
||||
console.log('Using local dev server settings (/config/local.json):')
|
||||
console.log(JSON.stringify(settings, null, 2))
|
||||
} catch (e) {
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
|
||||
<title>Pleroma</title>
|
||||
<!--server-generated-meta-->
|
||||
<link rel="icon" type="image/png" href="/favicon.png">
|
||||
</head>
|
||||
|
||||
+4
-6
@@ -31,10 +31,9 @@
|
||||
"parse-link-header": "^1.0.1",
|
||||
"phoenix": "^1.3.0",
|
||||
"portal-vue": "^2.1.4",
|
||||
"punycode.js": "^2.1.0",
|
||||
"ruffle-mirror": "^2021.4.10",
|
||||
"v-click-outside": "^2.1.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-chat-scroll": "^1.2.1",
|
||||
"vue-i18n": "^7.3.2",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
@@ -56,9 +55,8 @@
|
||||
"babel-plugin-lodash": "^3.3.4",
|
||||
"chai": "^3.5.0",
|
||||
"chalk": "^1.1.3",
|
||||
"chromedriver": "^87.0.1",
|
||||
"chromedriver": "^2.21.2",
|
||||
"connect-history-api-fallback": "^1.1.0",
|
||||
"copy-webpack-plugin": "^6.4.1",
|
||||
"cross-spawn": "^4.0.2",
|
||||
"css-loader": "^0.28.0",
|
||||
"custom-event-polyfill": "^1.0.7",
|
||||
@@ -104,7 +102,7 @@
|
||||
"selenium-server": "2.53.1",
|
||||
"semver": "^5.3.0",
|
||||
"serviceworker-webpack-plugin": "^1.0.0",
|
||||
"shelljs": "^0.8.4",
|
||||
"shelljs": "^0.7.4",
|
||||
"sinon": "^2.1.0",
|
||||
"sinon-chai": "^2.8.0",
|
||||
"stylelint": "^13.6.1",
|
||||
@@ -113,7 +111,7 @@
|
||||
"url-loader": "^1.1.2",
|
||||
"vue-loader": "^14.0.0",
|
||||
"vue-style-loader": "^4.0.0",
|
||||
"webpack": "^4.44.0",
|
||||
"webpack": "^4.0.0",
|
||||
"webpack-dev-middleware": "^3.6.0",
|
||||
"webpack-hot-middleware": "^2.12.2",
|
||||
"webpack-merge": "^0.14.1"
|
||||
|
||||
+14
-20
@@ -4,7 +4,7 @@ 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'
|
||||
import ShoutPanel from './components/shout_panel/shout_panel.vue'
|
||||
import ChatPanel from './components/chat_panel/chat_panel.vue'
|
||||
import SettingsModal from './components/settings_modal/settings_modal.vue'
|
||||
import MediaModal from './components/media_modal/media_modal.vue'
|
||||
import SideDrawer from './components/side_drawer/side_drawer.vue'
|
||||
@@ -15,7 +15,6 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
|
||||
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
|
||||
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
|
||||
import { windowWidth, windowHeight } from './services/window_utils/window_utils'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
@@ -26,7 +25,7 @@ export default {
|
||||
InstanceSpecificPanel,
|
||||
FeaturesPanel,
|
||||
WhoToFollowPanel,
|
||||
ShoutPanel,
|
||||
ChatPanel,
|
||||
MediaModal,
|
||||
SideDrawer,
|
||||
MobilePostStatusButton,
|
||||
@@ -51,21 +50,20 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
currentUser () { return this.$store.state.users.currentUser },
|
||||
userBackground () { return this.currentUser.background_image },
|
||||
instanceBackground () {
|
||||
return this.mergedConfig.hideInstanceWallpaper
|
||||
? null
|
||||
: this.$store.state.instance.background
|
||||
background () {
|
||||
return this.currentUser.background_image || this.$store.state.instance.background
|
||||
},
|
||||
background () { return this.userBackground || this.instanceBackground },
|
||||
bgStyle () {
|
||||
if (this.background) {
|
||||
return {
|
||||
'--body-background-image': `url(${this.background})`
|
||||
}
|
||||
return {
|
||||
'background-image': `url(${this.background})`
|
||||
}
|
||||
},
|
||||
shout () { return this.$store.state.shout.channel.state === 'joined' },
|
||||
bgAppStyle () {
|
||||
return {
|
||||
'--body-background-image': `url(${this.background})`
|
||||
}
|
||||
},
|
||||
chat () { return this.$store.state.chat.channel.state === 'joined' },
|
||||
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
|
||||
showInstanceSpecificPanel () {
|
||||
return this.$store.state.instance.showInstanceSpecificPanel &&
|
||||
@@ -73,17 +71,13 @@ export default {
|
||||
this.$store.state.instance.instanceSpecificPanelContent
|
||||
},
|
||||
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
|
||||
hideShoutbox () {
|
||||
return this.$store.getters.mergedConfig.hideShoutbox
|
||||
},
|
||||
isMobileLayout () { return this.$store.state.interface.mobileLayout },
|
||||
privateMode () { return this.$store.state.instance.private },
|
||||
sidebarAlign () {
|
||||
return {
|
||||
'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
|
||||
'order': this.$store.state.instance.sidebarRight ? 99 : 0
|
||||
}
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateMobileState () {
|
||||
|
||||
+72
-94
@@ -14,9 +14,7 @@
|
||||
right: -20px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-color: var(--wallpaper);
|
||||
background-image: var(--body-background-image);
|
||||
background-position: 50% 50px;
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
i[class^='icon-'] {
|
||||
@@ -35,7 +33,6 @@ h4 {
|
||||
max-width: 980px;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.underlay {
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
background-color: var(--underlay, rgba(0,0,0,0.15));
|
||||
@@ -72,7 +69,7 @@ a {
|
||||
color: var(--link, $fallback--link);
|
||||
}
|
||||
|
||||
.button-default {
|
||||
button {
|
||||
user-select: none;
|
||||
color: $fallback--text;
|
||||
color: var(--btnText, $fallback--text);
|
||||
@@ -88,8 +85,7 @@ a {
|
||||
font-family: sans-serif;
|
||||
font-family: var(--interfaceFont, sans-serif);
|
||||
|
||||
i[class*=icon-],
|
||||
.svg-inline--fa {
|
||||
i[class*=icon-], .svg-inline--fa {
|
||||
color: $fallback--text;
|
||||
color: var(--btnText, $fallback--text);
|
||||
}
|
||||
@@ -111,8 +107,7 @@ a {
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btnPressed, $fallback--fg);
|
||||
|
||||
svg,
|
||||
i {
|
||||
svg, i {
|
||||
color: $fallback--text;
|
||||
color: var(--btnPressedText, $fallback--text);
|
||||
}
|
||||
@@ -125,8 +120,7 @@ a {
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btnDisabled, $fallback--fg);
|
||||
|
||||
svg,
|
||||
i {
|
||||
svg, i {
|
||||
color: $fallback--text;
|
||||
color: var(--btnDisabledText, $fallback--text);
|
||||
}
|
||||
@@ -140,8 +134,7 @@ a {
|
||||
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
box-shadow: var(--buttonPressedShadow);
|
||||
|
||||
svg,
|
||||
i {
|
||||
svg, i {
|
||||
color: $fallback--text;
|
||||
color: var(--btnToggledText, $fallback--text);
|
||||
}
|
||||
@@ -156,38 +149,7 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.button-unstyled {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
display: inline;
|
||||
text-align: initial;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
padding: 0;
|
||||
line-height: unset;
|
||||
cursor: pointer;
|
||||
box-sizing: content-box;
|
||||
color: inherit;
|
||||
|
||||
&.-link {
|
||||
color: $fallback--link;
|
||||
color: var(--link, $fallback--link);
|
||||
}
|
||||
|
||||
&.-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.-hover-highlight {
|
||||
&:hover svg {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea, .input {
|
||||
input, textarea, .select, .input {
|
||||
|
||||
&.unstyled {
|
||||
border-radius: 0;
|
||||
@@ -217,11 +179,47 @@ input, textarea, .input {
|
||||
hyphens: none;
|
||||
padding: 8px .5em;
|
||||
|
||||
&:disabled, &[disabled=disabled], &.disabled {
|
||||
&.select {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:disabled, &[disabled=disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.select-down-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 5px;
|
||||
height: 100%;
|
||||
color: $fallback--text;
|
||||
color: var(--inputText, $fallback--text);
|
||||
line-height: 28px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $fallback--text;
|
||||
color: var(--inputText, --text, $fallback--text);
|
||||
margin: 0;
|
||||
padding: 0 2em 0 .2em;
|
||||
font-family: sans-serif;
|
||||
font-family: var(--inputFont, sans-serif);
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
height: 28px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&[type=range] {
|
||||
background: none;
|
||||
border: none;
|
||||
@@ -305,10 +303,6 @@ input, textarea, .input {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
&.resize-height {
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
option {
|
||||
@@ -448,7 +442,6 @@ main-router {
|
||||
color: $fallback--faint;
|
||||
color: var(--panelFaint, $fallback--faint);
|
||||
}
|
||||
|
||||
.faint-link {
|
||||
color: $fallback--faint;
|
||||
color: var(--faintLink, $fallback--faint);
|
||||
@@ -460,8 +453,11 @@ main-router {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.button-default,
|
||||
.alert {
|
||||
button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
button, .alert {
|
||||
// height: 100%;
|
||||
line-height: 21px;
|
||||
min-height: 0;
|
||||
@@ -472,11 +468,8 @@ main-router {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.button-default {
|
||||
flex-shrink: 0;
|
||||
|
||||
&,
|
||||
i[class*=icon-] {
|
||||
button {
|
||||
&, i[class*=icon-] {
|
||||
color: $fallback--text;
|
||||
color: var(--btnPanelText, $fallback--text);
|
||||
}
|
||||
@@ -499,8 +492,7 @@ main-router {
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
.-link {
|
||||
a {
|
||||
color: $fallback--link;
|
||||
color: var(--panelLink, $fallback--link)
|
||||
}
|
||||
@@ -511,31 +503,19 @@ main-router {
|
||||
border-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
}
|
||||
|
||||
/* TODO Should remove timeline-footer from here when we refactor panels into
|
||||
* separate component and utilize slots
|
||||
*/
|
||||
.panel-footer, .timeline-footer {
|
||||
display: flex;
|
||||
.panel-footer {
|
||||
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
|
||||
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
|
||||
flex: none;
|
||||
padding: 0.6em 0.6em;
|
||||
text-align: left;
|
||||
line-height: 28px;
|
||||
align-items: baseline;
|
||||
border-width: 1px 0 0 0;
|
||||
border-style: solid;
|
||||
border-color: var(--border, $fallback--border);
|
||||
|
||||
|
||||
.faint {
|
||||
color: $fallback--faint;
|
||||
color: var(--panelFaint, $fallback--faint);
|
||||
}
|
||||
|
||||
a,
|
||||
.-link {
|
||||
a {
|
||||
color: $fallback--link;
|
||||
color: var(--panelLink, $fallback--link);
|
||||
color: var(--panelLink, $fallback--link)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -562,7 +542,6 @@ nav {
|
||||
color: var(--faint, $fallback--faint);
|
||||
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
|
||||
box-shadow: var(--topBarShadow);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
@@ -682,15 +661,6 @@ nav {
|
||||
color: var(--alertWarningPanelText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: var(--alertSuccess, $fallback--alertWarning);
|
||||
color: var(--alertSuccessText, $fallback--text);
|
||||
|
||||
.panel-heading & {
|
||||
color: var(--alertSuccessPanelText, $fallback--text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faint {
|
||||
@@ -794,6 +764,13 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
.select-multiple {
|
||||
display: flex;
|
||||
.option-list {
|
||||
margin: 0;
|
||||
padding-left: .5em;
|
||||
}
|
||||
}
|
||||
.setting-list,
|
||||
.option-list{
|
||||
list-style-type: none;
|
||||
@@ -820,7 +797,7 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
.btn.button-default {
|
||||
.btn.btn-default {
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
@@ -840,10 +817,16 @@ nav {
|
||||
}
|
||||
|
||||
.new-status-notification {
|
||||
position: relative;
|
||||
position:relative;
|
||||
margin-top: -1px;
|
||||
font-size: 1.1em;
|
||||
border-width: 1px 0 0 0;
|
||||
border-style: solid;
|
||||
border-color: var(--border, $fallback--border);
|
||||
padding: 10px;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--panel, $fallback--fg);
|
||||
}
|
||||
|
||||
.chat-layout {
|
||||
@@ -851,11 +834,6 @@ nav {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
|
||||
// Get rid of scrollbar on body as scrolling happens on different element
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Ensures the fixed position of the mobile browser bars on scroll up / down events.
|
||||
// Prevents the mobile browser bars from overlapping or hiding the message posting form.
|
||||
@media all and (max-width: 800px) {
|
||||
|
||||
+5
-4
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div
|
||||
id="app"
|
||||
:style="bgStyle"
|
||||
:style="bgAppStyle"
|
||||
>
|
||||
<div
|
||||
id="app_bg_wrapper"
|
||||
class="app-bg-wrapper"
|
||||
:style="bgStyle"
|
||||
/>
|
||||
<MobileNav v-if="isMobileLayout" />
|
||||
<DesktopNav v-else />
|
||||
@@ -49,10 +50,10 @@
|
||||
</div>
|
||||
<media-modal />
|
||||
</div>
|
||||
<shout-panel
|
||||
v-if="currentUser && shout && !hideShoutbox"
|
||||
<chat-panel
|
||||
v-if="currentUser && chat"
|
||||
:floating="true"
|
||||
class="floating-shout mobile-hidden"
|
||||
class="floating-chat mobile-hidden"
|
||||
/>
|
||||
<MobilePostStatusButton />
|
||||
<UserReportingModal />
|
||||
|
||||
@@ -7,7 +7,6 @@ import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
|
||||
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
|
||||
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
|
||||
import { applyTheme } from '../services/style_setter/style_setter.js'
|
||||
import FaviconService from '../services/favicon_service/favicon_service.js'
|
||||
|
||||
let staticInitialResults = null
|
||||
|
||||
@@ -51,7 +50,6 @@ const getInstanceConfig = async ({ store }) => {
|
||||
const vapidPublicKey = data.pleroma.vapid_public_key
|
||||
|
||||
store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
|
||||
store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
|
||||
|
||||
if (vapidPublicKey) {
|
||||
store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
|
||||
@@ -240,7 +238,7 @@ const getNodeInfo = async ({ store }) => {
|
||||
store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
|
||||
store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
|
||||
store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
|
||||
store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
|
||||
store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
|
||||
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
|
||||
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
|
||||
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
|
||||
@@ -328,8 +326,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
|
||||
const width = windowWidth()
|
||||
store.dispatch('setMobileLayout', width <= 800)
|
||||
|
||||
FaviconService.initFaviconService()
|
||||
|
||||
const overrides = window.___pleromafe_dev_overrides || {}
|
||||
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
|
||||
store.dispatch('setInstanceOption', { name: 'server', value: server })
|
||||
|
||||
+2
-2
@@ -16,7 +16,7 @@ import FollowRequests from 'components/follow_requests/follow_requests.vue'
|
||||
import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
|
||||
import Notifications from 'components/notifications/notifications.vue'
|
||||
import AuthForm from 'components/auth_form/auth_form.js'
|
||||
import ShoutPanel from 'components/shout_panel/shout_panel.vue'
|
||||
import ChatPanel from 'components/chat_panel/chat_panel.vue'
|
||||
import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
|
||||
import About from 'components/about/about.vue'
|
||||
import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
|
||||
@@ -64,7 +64,7 @@ export default (store) => {
|
||||
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
|
||||
{ name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
|
||||
{ name: 'login', path: '/login', component: AuthForm },
|
||||
{ name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
|
||||
{ name: 'chat-panel', path: '/chat-panel', component: ChatPanel, 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 },
|
||||
|
||||
@@ -35,7 +35,7 @@ const AccountActions = {
|
||||
this.$store.dispatch('unblockUser', this.user.id)
|
||||
},
|
||||
reportUser () {
|
||||
this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
|
||||
this.$store.dispatch('openUserReportingModal', this.user.id)
|
||||
},
|
||||
openChat () {
|
||||
this.$router.push({
|
||||
|
||||
@@ -4,21 +4,23 @@
|
||||
trigger="click"
|
||||
placement="bottom"
|
||||
:bound-to="{ x: 'container' }"
|
||||
remove-padding
|
||||
>
|
||||
<template v-slot:content>
|
||||
<div
|
||||
slot="content"
|
||||
class="account-tools-popover"
|
||||
>
|
||||
<div class="dropdown-menu">
|
||||
<template v-if="relationship.following">
|
||||
<button
|
||||
v-if="relationship.showing_reblogs"
|
||||
class="btn button-default dropdown-item"
|
||||
class="btn btn-default dropdown-item"
|
||||
@click="hideRepeats"
|
||||
>
|
||||
{{ $t('user_card.hide_repeats') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="!relationship.showing_reblogs"
|
||||
class="btn button-default dropdown-item"
|
||||
class="btn btn-default dropdown-item"
|
||||
@click="showRepeats"
|
||||
>
|
||||
{{ $t('user_card.show_repeats') }}
|
||||
@@ -30,41 +32,42 @@
|
||||
</template>
|
||||
<button
|
||||
v-if="relationship.blocking"
|
||||
class="btn button-default btn-block dropdown-item"
|
||||
class="btn btn-default btn-block dropdown-item"
|
||||
@click="unblockUser"
|
||||
>
|
||||
{{ $t('user_card.unblock') }}
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn button-default btn-block dropdown-item"
|
||||
class="btn btn-default btn-block dropdown-item"
|
||||
@click="blockUser"
|
||||
>
|
||||
{{ $t('user_card.block') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn button-default btn-block dropdown-item"
|
||||
class="btn btn-default btn-block dropdown-item"
|
||||
@click="reportUser"
|
||||
>
|
||||
{{ $t('user_card.report') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="pleromaChatMessagesAvailable"
|
||||
class="btn button-default btn-block dropdown-item"
|
||||
class="btn btn-default btn-block dropdown-item"
|
||||
@click="openChat"
|
||||
>
|
||||
{{ $t('user_card.message') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:trigger>
|
||||
<button class="button-unstyled ellipsis-button">
|
||||
<FAIcon
|
||||
class="icon"
|
||||
icon="ellipsis-v"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
slot="trigger"
|
||||
class="btn btn-default ellipsis-button"
|
||||
>
|
||||
<FAIcon
|
||||
class="icon"
|
||||
icon="ellipsis-v"
|
||||
/>
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
@@ -79,6 +82,7 @@
|
||||
}
|
||||
|
||||
.ellipsis-button {
|
||||
cursor: pointer;
|
||||
width: 2.5em;
|
||||
margin: -0.5em 0;
|
||||
padding: 0.5em 0;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
{{ $t('general.error_retry') }}
|
||||
</p>
|
||||
<button
|
||||
class="btn button-default"
|
||||
class="btn"
|
||||
@click="retry"
|
||||
>
|
||||
{{ $t('general.retry') }}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import StillImage from '../still-image/still-image.vue'
|
||||
import Flash from '../flash/flash.vue'
|
||||
import VideoAttachment from '../video_attachment/video_attachment.vue'
|
||||
import nsfwImage from '../../assets/nsfw.png'
|
||||
import fileTypeService from '../../services/file_type/file_type.service.js'
|
||||
@@ -9,18 +8,14 @@ import {
|
||||
faFile,
|
||||
faMusic,
|
||||
faImage,
|
||||
faVideo,
|
||||
faPlayCircle,
|
||||
faTimes
|
||||
faVideo
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faFile,
|
||||
faMusic,
|
||||
faImage,
|
||||
faVideo,
|
||||
faPlayCircle,
|
||||
faTimes
|
||||
faVideo
|
||||
)
|
||||
|
||||
const Attachment = {
|
||||
@@ -44,7 +39,6 @@ const Attachment = {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Flash,
|
||||
StillImage,
|
||||
VideoAttachment
|
||||
},
|
||||
|
||||
@@ -42,13 +42,15 @@
|
||||
icon="play-circle"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
<div
|
||||
v-if="nsfw && hideNsfwLocal && !hidden"
|
||||
class="button-unstyled hider"
|
||||
@click.prevent="toggleHidden"
|
||||
class="hider"
|
||||
>
|
||||
<FAIcon icon="times" />
|
||||
</button>
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="toggleHidden"
|
||||
>Hide</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
v-if="type === 'image' && (!hidden || preloadImage)"
|
||||
@@ -117,11 +119,6 @@
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Flash
|
||||
v-if="type === 'flash'"
|
||||
:src="attachment.large_thumb_url || attachment.url"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -177,7 +174,6 @@
|
||||
}
|
||||
|
||||
.non-gallery.attachment {
|
||||
&.flash,
|
||||
&.video {
|
||||
flex: 1 0 40%;
|
||||
}
|
||||
@@ -238,23 +234,15 @@
|
||||
.hider {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
white-space: nowrap;
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
padding: 5px;
|
||||
background: rgba(230,230,230,0.6);
|
||||
font-weight: bold;
|
||||
z-index: 4;
|
||||
line-height: 1;
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
text-align: center;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
font-size: 1.25em;
|
||||
// TODO: theming? hard to theme with unknown background image color
|
||||
background: rgba(230, 230, 230, 0.7);
|
||||
.svg-inline--fa {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
&:hover .svg-inline--fa {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
class="basic-user-card-screen-name"
|
||||
:to="userProfileLink(user)"
|
||||
>
|
||||
@{{ user.screen_name_ui }}
|
||||
@{{ user.screen_name }}
|
||||
</router-link>
|
||||
</div>
|
||||
<slot />
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="block-card-content-container">
|
||||
<button
|
||||
v-if="blocked"
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
:disabled="progress"
|
||||
@click="unblockUser"
|
||||
>
|
||||
@@ -16,7 +16,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
:disabled="progress"
|
||||
@click="blockUser"
|
||||
>
|
||||
|
||||
@@ -73,7 +73,7 @@ const Chat = {
|
||||
},
|
||||
formPlaceholder () {
|
||||
if (this.recipient) {
|
||||
return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui })
|
||||
return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
@@ -234,13 +234,6 @@ const Chat = {
|
||||
const scrollable = this.$refs.scrollable
|
||||
return scrollable && scrollable.scrollTop <= 0
|
||||
},
|
||||
cullOlderCheck () {
|
||||
window.setTimeout(() => {
|
||||
if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
|
||||
this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId)
|
||||
}
|
||||
}, 5000)
|
||||
},
|
||||
handleScroll: _.throttle(function () {
|
||||
if (!this.currentChat) { return }
|
||||
|
||||
@@ -248,7 +241,6 @@ const Chat = {
|
||||
this.fetchChat({ maxId: this.currentChatMessageService.minId })
|
||||
} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
|
||||
this.jumpToBottomButtonVisible = false
|
||||
this.cullOlderCheck()
|
||||
if (this.newMessageCount > 0) {
|
||||
// Use a delay before marking as read to prevent situation where new messages
|
||||
// arrive just as you're leaving the view and messages that you didn't actually
|
||||
|
||||
@@ -98,10 +98,10 @@
|
||||
.unread-message-count {
|
||||
font-size: 0.8em;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
border-radius: 100%;
|
||||
margin-top: -1rem;
|
||||
padding: 0.1em;
|
||||
border-radius: 50px;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-loading-error {
|
||||
|
||||
@@ -10,10 +10,7 @@
|
||||
<span class="title">
|
||||
{{ $t("chats.chats") }}
|
||||
</span>
|
||||
<button
|
||||
class="button-default"
|
||||
@click="newChat"
|
||||
>
|
||||
<button @click="newChat">
|
||||
{{ $t("chats.new") }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -23,7 +20,10 @@
|
||||
class="timeline"
|
||||
>
|
||||
<List :items="sortedChatList">
|
||||
<template v-slot:item="{item}">
|
||||
<template
|
||||
slot="item"
|
||||
slot-scope="{item}"
|
||||
>
|
||||
<ChatListItem
|
||||
:key="item.id"
|
||||
:compact="false"
|
||||
|
||||
@@ -31,6 +31,9 @@
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
border-radius: $fallback--chatMessageRadius;
|
||||
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
|
||||
}
|
||||
|
||||
.popover {
|
||||
|
||||
@@ -50,37 +50,35 @@
|
||||
@show="menuOpened = true"
|
||||
@close="menuOpened = false"
|
||||
>
|
||||
<template v-slot:content>
|
||||
<div slot="content">
|
||||
<div class="dropdown-menu">
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click="deleteMessage"
|
||||
>
|
||||
<FAIcon icon="times" /> {{ $t("chats.delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:trigger>
|
||||
<button
|
||||
class="button-default menu-icon"
|
||||
:title="$t('chats.more')"
|
||||
>
|
||||
<FAIcon icon="ellipsis-h" />
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<button
|
||||
slot="trigger"
|
||||
class="menu-icon"
|
||||
:title="$t('chats.more')"
|
||||
>
|
||||
<FAIcon icon="ellipsis-h" />
|
||||
</button>
|
||||
</Popover>
|
||||
</div>
|
||||
<StatusContent
|
||||
:status="messageForStatusContent"
|
||||
:full-content="true"
|
||||
>
|
||||
<template v-slot:footer>
|
||||
<span
|
||||
class="created-at"
|
||||
>
|
||||
{{ createdAt }}
|
||||
</span>
|
||||
</template>
|
||||
<span
|
||||
slot="footer"
|
||||
class="created-at"
|
||||
>
|
||||
{{ createdAt }}
|
||||
</span>
|
||||
</StatusContent>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,8 +5,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import localeService from 'src/services/locale/locale.service.js'
|
||||
|
||||
export default {
|
||||
name: 'Timeago',
|
||||
props: ['date'],
|
||||
@@ -18,7 +16,7 @@ export default {
|
||||
if (this.date.getTime() === today.getTime()) {
|
||||
return this.$t('display_date.today')
|
||||
} else {
|
||||
return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale), { day: 'numeric', month: 'long' })
|
||||
return this.date.toLocaleDateString('en', { day: 'numeric', month: 'long' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+4
-16
@@ -10,7 +10,7 @@ library.add(
|
||||
faTimes
|
||||
)
|
||||
|
||||
const shoutPanel = {
|
||||
const chatPanel = {
|
||||
props: [ 'floating' ],
|
||||
data () {
|
||||
return {
|
||||
@@ -21,12 +21,12 @@ const shoutPanel = {
|
||||
},
|
||||
computed: {
|
||||
messages () {
|
||||
return this.$store.state.shout.messages
|
||||
return this.$store.state.chat.messages
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit (message) {
|
||||
this.$store.state.shout.channel.push('new_msg', { text: message }, 10000)
|
||||
this.$store.state.chat.channel.push('new_msg', { text: message }, 10000)
|
||||
this.currentMessage = ''
|
||||
},
|
||||
togglePanel () {
|
||||
@@ -35,19 +35,7 @@ const shoutPanel = {
|
||||
userProfileLink (user) {
|
||||
return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
messages (newVal) {
|
||||
const scrollEl = this.$el.querySelector('.chat-window')
|
||||
if (!scrollEl) return
|
||||
if (scrollEl.scrollTop + scrollEl.offsetHeight + 20 > scrollEl.scrollHeight) {
|
||||
this.$nextTick(() => {
|
||||
if (!scrollEl) return
|
||||
scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default shoutPanel
|
||||
export default chatPanel
|
||||
+26
-31
@@ -1,50 +1,52 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!collapsed || !floating"
|
||||
class="shout-panel"
|
||||
class="chat-panel"
|
||||
>
|
||||
<div class="panel panel-default">
|
||||
<div
|
||||
class="panel-heading timeline-heading"
|
||||
:class="{ 'shout-heading': floating }"
|
||||
:class="{ 'chat-heading': floating }"
|
||||
@click.stop.prevent="togglePanel"
|
||||
>
|
||||
<div class="title">
|
||||
{{ $t('shoutbox.title') }}
|
||||
<span>{{ $t('shoutbox.title') }}</span>
|
||||
<FAIcon
|
||||
v-if="floating"
|
||||
icon="times"
|
||||
class="close-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shout-window">
|
||||
<div
|
||||
v-chat-scroll
|
||||
class="chat-window"
|
||||
>
|
||||
<div
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
class="shout-message"
|
||||
class="chat-message"
|
||||
>
|
||||
<span class="shout-avatar">
|
||||
<span class="chat-avatar">
|
||||
<img :src="message.author.avatar">
|
||||
</span>
|
||||
<div class="shout-content">
|
||||
<div class="chat-content">
|
||||
<router-link
|
||||
class="shout-name"
|
||||
class="chat-name"
|
||||
:to="userProfileLink(message.author)"
|
||||
>
|
||||
{{ message.author.username }}
|
||||
</router-link>
|
||||
<br>
|
||||
<span class="shout-text">
|
||||
<span class="chat-text">
|
||||
{{ message.text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shout-input">
|
||||
<div class="chat-input">
|
||||
<textarea
|
||||
v-model="currentMessage"
|
||||
class="shout-input-textarea"
|
||||
class="chat-input-textarea"
|
||||
rows="1"
|
||||
@keyup.enter="submit(currentMessage)"
|
||||
/>
|
||||
@@ -53,11 +55,11 @@
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="shout-panel"
|
||||
class="chat-panel"
|
||||
>
|
||||
<div class="panel panel-default">
|
||||
<div
|
||||
class="panel-heading stub timeline-heading shout-heading"
|
||||
class="panel-heading stub timeline-heading chat-heading"
|
||||
@click.stop.prevent="togglePanel"
|
||||
>
|
||||
<div class="title">
|
||||
@@ -72,12 +74,12 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./shout_panel.js"></script>
|
||||
<script src="./chat_panel.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.floating-shout {
|
||||
.floating-chat {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
@@ -85,39 +87,32 @@
|
||||
max-width: 25em;
|
||||
}
|
||||
|
||||
.shout-panel {
|
||||
.shout-heading {
|
||||
.chat-panel {
|
||||
.chat-heading {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.shout-window {
|
||||
.chat-window {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 20em;
|
||||
}
|
||||
|
||||
.shout-window-container {
|
||||
.chat-window-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shout-message {
|
||||
.chat-message {
|
||||
display: flex;
|
||||
padding: 0.2em 0.5em
|
||||
}
|
||||
|
||||
.shout-avatar {
|
||||
.chat-avatar {
|
||||
img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
@@ -128,7 +123,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.shout-input {
|
||||
.chat-input {
|
||||
display: flex;
|
||||
textarea {
|
||||
flex: 1;
|
||||
@@ -138,7 +133,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.shout-panel {
|
||||
.chat-panel {
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -12,7 +12,7 @@ export default Vue.component('chat-title', {
|
||||
],
|
||||
computed: {
|
||||
title () {
|
||||
return this.user ? this.user.screen_name_ui : ''
|
||||
return this.user ? this.user.screen_name : ''
|
||||
},
|
||||
htmlTitle () {
|
||||
return this.user ? this.user.name_html : ''
|
||||
|
||||
@@ -10,13 +10,12 @@
|
||||
class="panel-heading conversation-heading"
|
||||
>
|
||||
<span class="title"> {{ $t('timeline.conversation') }} </span>
|
||||
<button
|
||||
v-if="collapsable"
|
||||
class="button-unstyled -link"
|
||||
@click.prevent="toggleExpanded"
|
||||
>
|
||||
{{ $t('timeline.collapse') }}
|
||||
</button>
|
||||
<span v-if="collapsable">
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="toggleExpanded"
|
||||
>{{ $t('timeline.collapse') }}</a>
|
||||
</span>
|
||||
</div>
|
||||
<status
|
||||
v-for="status in conversation"
|
||||
@@ -50,6 +49,7 @@
|
||||
|
||||
.Conversation {
|
||||
.conversation-status {
|
||||
border-left: none;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: var(--border, $fallback--border);
|
||||
@@ -57,6 +57,13 @@
|
||||
}
|
||||
|
||||
&.-expanded {
|
||||
.conversation-status {
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
border-left-color: $fallback--cRed;
|
||||
border-left-color: var(--cRed, $fallback--cRed);
|
||||
}
|
||||
|
||||
.conversation-status:last-child {
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
|
||||
|
||||
@@ -5,10 +5,6 @@
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
|
||||
a {
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
}
|
||||
|
||||
.inner-nav {
|
||||
display: grid;
|
||||
grid-template-rows: 50px;
|
||||
@@ -25,7 +21,7 @@
|
||||
grid-template-areas: "logo sitename actions";
|
||||
}
|
||||
|
||||
.button-default {
|
||||
button {
|
||||
&, svg {
|
||||
color: $fallback--text;
|
||||
color: var(--btnTopBarText, $fallback--text);
|
||||
@@ -84,13 +80,12 @@
|
||||
.nav-icon {
|
||||
margin-left: 0.2em;
|
||||
width: 2em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.svg-inline--fa {
|
||||
color: $fallback--link;
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
}
|
||||
a, a svg {
|
||||
color: $fallback--link;
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
}
|
||||
|
||||
.sitename {
|
||||
|
||||
@@ -36,8 +36,9 @@
|
||||
@toggled="onSearchBarToggled"
|
||||
@click.stop.native
|
||||
/>
|
||||
<button
|
||||
class="button-unstyled nav-icon"
|
||||
<a
|
||||
href="#"
|
||||
class="nav-icon"
|
||||
@click.stop="openSettingsModal"
|
||||
>
|
||||
<FAIcon
|
||||
@@ -46,32 +47,29 @@
|
||||
icon="cog"
|
||||
:title="$t('nav.preferences')"
|
||||
/>
|
||||
</button>
|
||||
</a>
|
||||
<a
|
||||
v-if="currentUser && currentUser.role === 'admin'"
|
||||
href="/pleroma/admin/#/login-pleroma"
|
||||
class="nav-icon"
|
||||
target="_blank"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="tachometer-alt"
|
||||
:title="$t('nav.administration')"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
><FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="tachometer-alt"
|
||||
:title="$t('nav.administration')"
|
||||
/></a>
|
||||
<a
|
||||
v-if="currentUser"
|
||||
class="button-unstyled nav-icon"
|
||||
href="#"
|
||||
class="nav-icon"
|
||||
@click.prevent="logout"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="sign-out-alt"
|
||||
:title="$t('login.logout')"
|
||||
/>
|
||||
</button>
|
||||
><FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="sign-out-alt"
|
||||
:title="$t('login.logout')"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -6,20 +6,20 @@
|
||||
<ProgressButton
|
||||
v-if="muted"
|
||||
:click="unmuteDomain"
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
>
|
||||
{{ $t('domain_mute_card.unmute') }}
|
||||
<template v-slot:progress>
|
||||
<template slot="progress">
|
||||
{{ $t('domain_mute_card.unmute_progress') }}
|
||||
</template>
|
||||
</ProgressButton>
|
||||
<ProgressButton
|
||||
v-else
|
||||
:click="muteDomain"
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
>
|
||||
{{ $t('domain_mute_card.mute') }}
|
||||
<template v-slot:progress>
|
||||
<template slot="progress">
|
||||
{{ $t('domain_mute_card.mute_progress') }}
|
||||
</template>
|
||||
</ProgressButton>
|
||||
|
||||
@@ -57,7 +57,6 @@ const EmojiInput = {
|
||||
required: true,
|
||||
type: Function
|
||||
},
|
||||
// TODO VUE3: change to modelValue, change 'input' event to 'input'
|
||||
value: {
|
||||
/**
|
||||
* Used for v-model
|
||||
@@ -115,8 +114,7 @@ const EmojiInput = {
|
||||
showPicker: false,
|
||||
temporarilyHideSuggestions: false,
|
||||
keepOpen: false,
|
||||
disableClickOutside: false,
|
||||
suggestions: []
|
||||
disableClickOutside: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -126,6 +124,21 @@ const EmojiInput = {
|
||||
padEmoji () {
|
||||
return this.$store.getters.mergedConfig.padEmoji
|
||||
},
|
||||
suggestions () {
|
||||
const firstchar = this.textAtCaret.charAt(0)
|
||||
if (this.textAtCaret === firstchar) { return [] }
|
||||
const matchedSuggestions = this.suggest(this.textAtCaret)
|
||||
if (matchedSuggestions.length <= 0) {
|
||||
return []
|
||||
}
|
||||
return take(matchedSuggestions, 5)
|
||||
.map(({ imageUrl, ...rest }, index) => ({
|
||||
...rest,
|
||||
// eslint-disable-next-line camelcase
|
||||
img: imageUrl || '',
|
||||
highlighted: index === this.highlighted
|
||||
}))
|
||||
},
|
||||
showSuggestions () {
|
||||
return this.focused &&
|
||||
this.suggestions &&
|
||||
@@ -144,68 +157,45 @@ const EmojiInput = {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { root } = this.$refs
|
||||
const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea')
|
||||
const slots = this.$slots.default
|
||||
if (!slots || slots.length === 0) return
|
||||
const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
|
||||
if (!input) return
|
||||
this.input = input
|
||||
this.resize()
|
||||
input.addEventListener('blur', this.onBlur)
|
||||
input.addEventListener('focus', this.onFocus)
|
||||
input.addEventListener('paste', this.onPaste)
|
||||
input.addEventListener('keyup', this.onKeyUp)
|
||||
input.addEventListener('keydown', this.onKeyDown)
|
||||
input.addEventListener('click', this.onClickInput)
|
||||
input.addEventListener('transitionend', this.onTransition)
|
||||
input.addEventListener('input', this.onInput)
|
||||
input.elm.addEventListener('blur', this.onBlur)
|
||||
input.elm.addEventListener('focus', this.onFocus)
|
||||
input.elm.addEventListener('paste', this.onPaste)
|
||||
input.elm.addEventListener('keyup', this.onKeyUp)
|
||||
input.elm.addEventListener('keydown', this.onKeyDown)
|
||||
input.elm.addEventListener('click', this.onClickInput)
|
||||
input.elm.addEventListener('transitionend', this.onTransition)
|
||||
input.elm.addEventListener('input', this.onInput)
|
||||
},
|
||||
unmounted () {
|
||||
const { input } = this
|
||||
if (input) {
|
||||
input.removeEventListener('blur', this.onBlur)
|
||||
input.removeEventListener('focus', this.onFocus)
|
||||
input.removeEventListener('paste', this.onPaste)
|
||||
input.removeEventListener('keyup', this.onKeyUp)
|
||||
input.removeEventListener('keydown', this.onKeyDown)
|
||||
input.removeEventListener('click', this.onClickInput)
|
||||
input.removeEventListener('transitionend', this.onTransition)
|
||||
input.removeEventListener('input', this.onInput)
|
||||
input.elm.removeEventListener('blur', this.onBlur)
|
||||
input.elm.removeEventListener('focus', this.onFocus)
|
||||
input.elm.removeEventListener('paste', this.onPaste)
|
||||
input.elm.removeEventListener('keyup', this.onKeyUp)
|
||||
input.elm.removeEventListener('keydown', this.onKeyDown)
|
||||
input.elm.removeEventListener('click', this.onClickInput)
|
||||
input.elm.removeEventListener('transitionend', this.onTransition)
|
||||
input.elm.removeEventListener('input', this.onInput)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showSuggestions: function (newValue) {
|
||||
this.$emit('shown', newValue)
|
||||
},
|
||||
textAtCaret: async function (newWord) {
|
||||
const firstchar = newWord.charAt(0)
|
||||
this.suggestions = []
|
||||
if (newWord === firstchar) return
|
||||
const matchedSuggestions = await this.suggest(newWord)
|
||||
// Async: cancel if textAtCaret has changed during wait
|
||||
if (this.textAtCaret !== newWord) return
|
||||
if (matchedSuggestions.length <= 0) return
|
||||
this.suggestions = take(matchedSuggestions, 5)
|
||||
.map(({ imageUrl, ...rest }) => ({
|
||||
...rest,
|
||||
img: imageUrl || ''
|
||||
}))
|
||||
},
|
||||
suggestions (newValue) {
|
||||
this.$nextTick(this.resize)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
focusPickerInput () {
|
||||
const pickerEl = this.$refs.picker.$el
|
||||
if (!pickerEl) return
|
||||
const pickerInput = pickerEl.querySelector('input')
|
||||
if (pickerInput) pickerInput.focus()
|
||||
},
|
||||
triggerShowPicker () {
|
||||
this.showPicker = true
|
||||
this.$refs.picker.startEmojiLoad()
|
||||
this.$nextTick(() => {
|
||||
this.scrollIntoView()
|
||||
this.focusPickerInput()
|
||||
})
|
||||
// This temporarily disables "click outside" handler
|
||||
// since external trigger also means click originates
|
||||
@@ -216,12 +206,11 @@ const EmojiInput = {
|
||||
}, 0)
|
||||
},
|
||||
togglePicker () {
|
||||
this.input.focus()
|
||||
this.input.elm.focus()
|
||||
this.showPicker = !this.showPicker
|
||||
if (this.showPicker) {
|
||||
this.scrollIntoView()
|
||||
this.$refs.picker.startEmojiLoad()
|
||||
this.$nextTick(this.focusPickerInput)
|
||||
}
|
||||
},
|
||||
replace (replacement) {
|
||||
@@ -262,13 +251,13 @@ const EmojiInput = {
|
||||
this.$emit('input', newValue)
|
||||
const position = this.caret + (insertion + spaceAfter + spaceBefore).length
|
||||
if (!keepOpen) {
|
||||
this.input.focus()
|
||||
this.input.elm.focus()
|
||||
}
|
||||
|
||||
this.$nextTick(function () {
|
||||
// Re-focus inputbox after clicking suggestion
|
||||
// Set selection right after the replacement instead of the very end
|
||||
this.input.setSelectionRange(position, position)
|
||||
this.input.elm.setSelectionRange(position, position)
|
||||
this.caret = position
|
||||
})
|
||||
},
|
||||
@@ -285,9 +274,9 @@ const EmojiInput = {
|
||||
|
||||
this.$nextTick(function () {
|
||||
// Re-focus inputbox after clicking suggestion
|
||||
this.input.focus()
|
||||
this.input.elm.focus()
|
||||
// Set selection right after the replacement instead of the very end
|
||||
this.input.setSelectionRange(position, position)
|
||||
this.input.elm.setSelectionRange(position, position)
|
||||
this.caret = position
|
||||
})
|
||||
e.preventDefault()
|
||||
@@ -349,7 +338,7 @@ const EmojiInput = {
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
const { offsetHeight } = this.input
|
||||
const { offsetHeight } = this.input.elm
|
||||
const { picker } = this.$refs
|
||||
const pickerBottom = picker.$el.getBoundingClientRect().bottom
|
||||
if (pickerBottom > window.innerHeight) {
|
||||
@@ -414,8 +403,8 @@ const EmojiInput = {
|
||||
|
||||
// Scroll the input element to the position of the cursor
|
||||
this.$nextTick(() => {
|
||||
this.input.blur()
|
||||
this.input.focus()
|
||||
this.input.elm.blur()
|
||||
this.input.elm.focus()
|
||||
})
|
||||
}
|
||||
// Disable suggestions hotkeys if suggestions are hidden
|
||||
@@ -444,7 +433,7 @@ const EmojiInput = {
|
||||
// de-focuses the element (i.e. default browser behavior)
|
||||
if (key === 'Escape') {
|
||||
if (!this.temporarilyHideSuggestions) {
|
||||
this.input.focus()
|
||||
this.input.elm.focus()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -480,7 +469,7 @@ const EmojiInput = {
|
||||
if (!panel) return
|
||||
const picker = this.$refs.picker.$el
|
||||
const panelBody = this.$refs['panel-body']
|
||||
const { offsetHeight, offsetTop } = this.input
|
||||
const { offsetHeight, offsetTop } = this.input.elm
|
||||
const offsetBottom = offsetTop + offsetHeight
|
||||
|
||||
this.setPlacement(panelBody, panel, offsetBottom)
|
||||
@@ -494,7 +483,7 @@ const EmojiInput = {
|
||||
|
||||
if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) {
|
||||
target.style.top = 'auto'
|
||||
target.style.bottom = this.input.offsetHeight + 'px'
|
||||
target.style.bottom = this.input.elm.offsetHeight + 'px'
|
||||
}
|
||||
},
|
||||
overflowsBottom (el) {
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
<template>
|
||||
<div
|
||||
ref="root"
|
||||
v-click-outside="onClickOutside"
|
||||
class="emoji-input"
|
||||
:class="{ 'with-picker': !hideEmojiButton }"
|
||||
>
|
||||
<slot />
|
||||
<template v-if="enableEmojiPicker">
|
||||
<button
|
||||
<div
|
||||
v-if="!hideEmojiButton"
|
||||
class="button-unstyled emoji-picker-icon"
|
||||
type="button"
|
||||
class="emoji-picker-icon"
|
||||
@click.prevent="togglePicker"
|
||||
>
|
||||
<FAIcon :icon="['far', 'smile-beam']" />
|
||||
</button>
|
||||
</div>
|
||||
<EmojiPicker
|
||||
v-if="enableEmojiPicker"
|
||||
ref="picker"
|
||||
@@ -39,7 +37,7 @@
|
||||
v-for="(suggestion, index) in suggestions"
|
||||
:key="index"
|
||||
class="autocomplete-item"
|
||||
:class="{ highlighted: index === highlighted }"
|
||||
:class="{ highlighted: suggestion.highlighted }"
|
||||
@click.stop.prevent="onClick($event, suggestion)"
|
||||
>
|
||||
<span class="image">
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { debounce } from 'lodash'
|
||||
/**
|
||||
* suggest - generates a suggestor function to be used by emoji-input
|
||||
* data: object providing source information for specific types of suggestions:
|
||||
@@ -10,19 +11,19 @@
|
||||
* doesn't support user linking you can just provide only emoji.
|
||||
*/
|
||||
|
||||
export default data => {
|
||||
const emojiCurry = suggestEmoji(data.emoji)
|
||||
const usersCurry = data.store && suggestUsers(data.store)
|
||||
return input => {
|
||||
const firstChar = input[0]
|
||||
if (firstChar === ':' && data.emoji) {
|
||||
return emojiCurry(input)
|
||||
}
|
||||
if (firstChar === '@' && usersCurry) {
|
||||
return usersCurry(input)
|
||||
}
|
||||
return []
|
||||
const debounceUserSearch = debounce((data, input) => {
|
||||
data.updateUsersList(input)
|
||||
}, 500)
|
||||
|
||||
export default data => input => {
|
||||
const firstChar = input[0]
|
||||
if (firstChar === ':' && data.emoji) {
|
||||
return suggestEmoji(data.emoji)(input)
|
||||
}
|
||||
if (firstChar === '@' && data.users) {
|
||||
return suggestUsers(data)(input)
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
export const suggestEmoji = emojis => input => {
|
||||
@@ -56,75 +57,50 @@ export const suggestEmoji = emojis => input => {
|
||||
})
|
||||
}
|
||||
|
||||
export const suggestUsers = ({ dispatch, state }) => {
|
||||
// Keep some persistent values in closure, most importantly for the
|
||||
// custom debounce to work. Lodash debounce does not return a promise.
|
||||
let suggestions = []
|
||||
let previousQuery = ''
|
||||
let timeout = null
|
||||
let cancelUserSearch = null
|
||||
export const suggestUsers = data => input => {
|
||||
const noPrefix = input.toLowerCase().substr(1)
|
||||
const users = data.users
|
||||
|
||||
const userSearch = (query) => dispatch('searchUsers', { query })
|
||||
const debounceUserSearch = (query) => {
|
||||
cancelUserSearch && cancelUserSearch()
|
||||
return new Promise((resolve, reject) => {
|
||||
timeout = setTimeout(() => {
|
||||
userSearch(query).then(resolve).catch(reject)
|
||||
}, 300)
|
||||
cancelUserSearch = () => {
|
||||
clearTimeout(timeout)
|
||||
resolve([])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return async input => {
|
||||
const noPrefix = input.toLowerCase().substr(1)
|
||||
if (previousQuery === noPrefix) return suggestions
|
||||
|
||||
suggestions = []
|
||||
previousQuery = noPrefix
|
||||
// Fetch more and wait, don't fetch if there's the 2nd @ because
|
||||
// the backend user search can't deal with it.
|
||||
// Reference semantics make it so that we get the updated data after
|
||||
// the await.
|
||||
if (!noPrefix.includes('@')) {
|
||||
await debounceUserSearch(noPrefix)
|
||||
}
|
||||
|
||||
const newSuggestions = state.users.users.filter(
|
||||
user =>
|
||||
user.screen_name.toLowerCase().startsWith(noPrefix) ||
|
||||
user.name.toLowerCase().startsWith(noPrefix)
|
||||
).slice(0, 20).sort((a, b) => {
|
||||
let aScore = 0
|
||||
let bScore = 0
|
||||
|
||||
// Matches on screen name (i.e. user@instance) makes a priority
|
||||
aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
|
||||
bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
|
||||
|
||||
// Matches on name takes second priority
|
||||
aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
|
||||
bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
|
||||
|
||||
const diff = (bScore - aScore) * 10
|
||||
|
||||
// Then sort alphabetically
|
||||
const nameAlphabetically = a.name > b.name ? 1 : -1
|
||||
const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
|
||||
|
||||
return diff + nameAlphabetically + screenNameAlphabetically
|
||||
/* eslint-disable camelcase */
|
||||
}).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
|
||||
displayText: screen_name_ui,
|
||||
detailText: name,
|
||||
imageUrl: profile_image_url_original,
|
||||
replacement: '@' + screen_name + ' '
|
||||
}))
|
||||
/* eslint-enable camelcase */
|
||||
|
||||
suggestions = newSuggestions || []
|
||||
return suggestions
|
||||
const newUsers = users.filter(
|
||||
user =>
|
||||
user.screen_name.toLowerCase().startsWith(noPrefix) ||
|
||||
user.name.toLowerCase().startsWith(noPrefix)
|
||||
|
||||
/* taking only 20 results so that sorting is a bit cheaper, we display
|
||||
* only 5 anyway. could be inaccurate, but we ideally we should query
|
||||
* backend anyway
|
||||
*/
|
||||
).slice(0, 20).sort((a, b) => {
|
||||
let aScore = 0
|
||||
let bScore = 0
|
||||
|
||||
// Matches on screen name (i.e. user@instance) makes a priority
|
||||
aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
|
||||
bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
|
||||
|
||||
// Matches on name takes second priority
|
||||
aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
|
||||
bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
|
||||
|
||||
const diff = (bScore - aScore) * 10
|
||||
|
||||
// Then sort alphabetically
|
||||
const nameAlphabetically = a.name > b.name ? 1 : -1
|
||||
const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
|
||||
|
||||
return diff + nameAlphabetically + screenNameAlphabetically
|
||||
/* eslint-disable camelcase */
|
||||
}).map(({ screen_name, name, profile_image_url_original }) => ({
|
||||
displayText: screen_name,
|
||||
detailText: name,
|
||||
imageUrl: profile_image_url_original,
|
||||
replacement: '@' + screen_name + ' '
|
||||
}))
|
||||
|
||||
// BE search users to get more comprehensive results
|
||||
if (data.updateUsersList) {
|
||||
debounceUserSearch(data, noPrefix)
|
||||
}
|
||||
return newUsers
|
||||
/* eslint-enable camelcase */
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
:users="accountsForEmoji[reaction.name]"
|
||||
>
|
||||
<button
|
||||
class="emoji-reaction btn button-default"
|
||||
class="emoji-reaction btn btn-default"
|
||||
:class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
|
||||
@click="emojiOnClick(reaction.name, $event)"
|
||||
@mouseenter="fetchEmojiReactionsByIfMissing()"
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="import-export-container">
|
||||
<slot name="before" />
|
||||
<button
|
||||
class="btn"
|
||||
@click="exportData"
|
||||
>
|
||||
{{ exportLabel }}
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
@click="importData"
|
||||
>
|
||||
{{ importLabel }}
|
||||
</button>
|
||||
<slot name="afterButtons" />
|
||||
<p
|
||||
v-if="importFailed"
|
||||
class="alert error"
|
||||
>
|
||||
{{ importFailedText }}
|
||||
</p>
|
||||
<slot name="afterError" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'exportObject',
|
||||
'importLabel',
|
||||
'exportLabel',
|
||||
'importFailedText',
|
||||
'validator',
|
||||
'onImport',
|
||||
'onImportFailure'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
importFailed: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exportData () {
|
||||
const stringified = JSON.stringify(this.exportObject, null, 2) // Pretty-print and indent with 2 spaces
|
||||
|
||||
// Create an invisible link with a data url and simulate a click
|
||||
const e = document.createElement('a')
|
||||
e.setAttribute('download', 'pleroma_theme.json')
|
||||
e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
|
||||
e.style.display = 'none'
|
||||
|
||||
document.body.appendChild(e)
|
||||
e.click()
|
||||
document.body.removeChild(e)
|
||||
},
|
||||
importData () {
|
||||
this.importFailed = false
|
||||
const filePicker = document.createElement('input')
|
||||
filePicker.setAttribute('type', 'file')
|
||||
filePicker.setAttribute('accept', '.json')
|
||||
|
||||
filePicker.addEventListener('change', event => {
|
||||
if (event.target.files[0]) {
|
||||
// eslint-disable-next-line no-undef
|
||||
const reader = new FileReader()
|
||||
reader.onload = ({ target }) => {
|
||||
try {
|
||||
const parsed = JSON.parse(target.result)
|
||||
const valid = this.validator(parsed)
|
||||
if (valid) {
|
||||
this.onImport(parsed)
|
||||
} else {
|
||||
this.importFailed = true
|
||||
// this.onImportFailure(valid)
|
||||
}
|
||||
} catch (e) {
|
||||
// This will happen both if there is a JSON syntax error or the theme is missing components
|
||||
this.importFailed = true
|
||||
// this.onImportFailure(e)
|
||||
}
|
||||
}
|
||||
reader.readAsText(event.target.files[0])
|
||||
}
|
||||
})
|
||||
|
||||
document.body.appendChild(filePicker)
|
||||
filePicker.click()
|
||||
document.body.removeChild(filePicker)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.import-export-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
@click="process"
|
||||
>
|
||||
{{ exportButtonLabel }}
|
||||
|
||||
@@ -5,12 +5,10 @@ import {
|
||||
faBookmark,
|
||||
faEyeSlash,
|
||||
faThumbtack,
|
||||
faShareAlt,
|
||||
faExternalLinkAlt
|
||||
faShareAlt
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import {
|
||||
faBookmark as faBookmarkReg,
|
||||
faFlag
|
||||
faBookmark as faBookmarkReg
|
||||
} from '@fortawesome/free-regular-svg-icons'
|
||||
|
||||
library.add(
|
||||
@@ -19,9 +17,7 @@ library.add(
|
||||
faBookmarkReg,
|
||||
faEyeSlash,
|
||||
faThumbtack,
|
||||
faShareAlt,
|
||||
faExternalLinkAlt,
|
||||
faFlag
|
||||
faShareAlt
|
||||
)
|
||||
|
||||
const ExtraButtons = {
|
||||
@@ -68,9 +64,6 @@ const ExtraButtons = {
|
||||
this.$store.dispatch('unbookmark', { id: this.status.id })
|
||||
.then(() => this.$emit('onSuccess'))
|
||||
.catch(err => this.$emit('onError', err.error.error))
|
||||
},
|
||||
reportStatus () {
|
||||
this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
<template>
|
||||
<Popover
|
||||
class="ExtraButtons"
|
||||
trigger="click"
|
||||
placement="top"
|
||||
:offset="{ y: 5 }"
|
||||
class="extra-button-popover"
|
||||
:bound-to="{ x: 'container' }"
|
||||
remove-padding
|
||||
>
|
||||
<template v-slot:content="{close}">
|
||||
<div
|
||||
slot="content"
|
||||
slot-scope="{close}"
|
||||
>
|
||||
<div class="dropdown-menu">
|
||||
<button
|
||||
v-if="canMute && !status.thread_muted"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="muteConversation"
|
||||
>
|
||||
<FAIcon
|
||||
@@ -21,7 +22,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-if="canMute && status.thread_muted"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="unmuteConversation"
|
||||
>
|
||||
<FAIcon
|
||||
@@ -31,7 +32,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-if="!status.pinned && canPin"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="pinStatus"
|
||||
@click="close"
|
||||
>
|
||||
@@ -42,7 +43,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-if="status.pinned && canPin"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="unpinStatus"
|
||||
@click="close"
|
||||
>
|
||||
@@ -53,7 +54,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-if="!status.bookmarked"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="bookmarkStatus"
|
||||
@click="close"
|
||||
>
|
||||
@@ -64,7 +65,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-if="status.bookmarked"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="unbookmarkStatus"
|
||||
@click="close"
|
||||
>
|
||||
@@ -75,7 +76,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-if="canDelete"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="deleteStatus"
|
||||
@click="close"
|
||||
>
|
||||
@@ -85,7 +86,7 @@
|
||||
/><span>{{ $t("status.delete") }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="copyLink"
|
||||
@click="close"
|
||||
>
|
||||
@@ -94,38 +95,14 @@
|
||||
icon="share-alt"
|
||||
/><span>{{ $t("status.copy_link") }}</span>
|
||||
</button>
|
||||
<a
|
||||
v-if="!status.is_local"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
title="Source"
|
||||
:href="status.external_url"
|
||||
target="_blank"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="external-link-alt"
|
||||
/><span>{{ $t("status.external_source") }}</span>
|
||||
</a>
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
@click.prevent="reportStatus"
|
||||
@click="close"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
:icon="['far', 'flag']"
|
||||
/><span>{{ $t("user_card.report") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:trigger>
|
||||
<button class="button-unstyled popover-trigger">
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="ellipsis-h"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<span slot="trigger">
|
||||
<FAIcon
|
||||
class="ExtraButtons fa-scale-110 fa-old-padding"
|
||||
icon="ellipsis-h"
|
||||
/>
|
||||
</span>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
@@ -135,20 +112,13 @@
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.ExtraButtons {
|
||||
/* override of popover internal stuff */
|
||||
.popover-trigger-button {
|
||||
width: auto;
|
||||
}
|
||||
cursor: pointer;
|
||||
position: static;
|
||||
|
||||
.popover-trigger {
|
||||
position: static;
|
||||
padding: 10px;
|
||||
margin: -10px;
|
||||
|
||||
&:hover .svg-inline--fa {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
&:hover,
|
||||
.extra-button-popover.open & {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,6 +31,11 @@ const FavoriteButton = {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return {
|
||||
'-favorited': this.status.favorited
|
||||
}
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,31 +1,23 @@
|
||||
<template>
|
||||
<div class="FavoriteButton">
|
||||
<button
|
||||
v-if="loggedIn"
|
||||
class="button-unstyled interactive"
|
||||
:class="status.favorited && '-favorited'"
|
||||
<div v-if="loggedIn">
|
||||
<FAIcon
|
||||
:class="classes"
|
||||
class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
|
||||
:title="$t('tool_tip.favorite')"
|
||||
:icon="[status.favorited ? 'fas' : 'far', 'star']"
|
||||
:spin="animated"
|
||||
@click.prevent="favorite()"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
:icon="[status.favorited ? 'fas' : 'far', 'star']"
|
||||
:spin="animated"
|
||||
/>
|
||||
</button>
|
||||
<span v-else>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
:title="$t('tool_tip.favorite')"
|
||||
:icon="['far', 'star']"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
|
||||
class="action-counter"
|
||||
>
|
||||
{{ status.fave_num }}
|
||||
</span>
|
||||
/>
|
||||
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<FAIcon
|
||||
:class="classes"
|
||||
class="FavoriteButton fa-scale-110 fa-old-padding"
|
||||
:title="$t('tool_tip.favorite')"
|
||||
:icon="['far', 'star']"
|
||||
/>
|
||||
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -35,28 +27,19 @@
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.FavoriteButton {
|
||||
display: flex;
|
||||
&.-interactive {
|
||||
cursor: pointer;
|
||||
animation-duration: 0.6s;
|
||||
|
||||
> :first-child {
|
||||
padding: 10px;
|
||||
margin: -10px -8px -10px -10px;
|
||||
}
|
||||
|
||||
.action-counter {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.interactive {
|
||||
.svg-inline--fa {
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
||||
&:hover .svg-inline--fa,
|
||||
&.-favorited .svg-inline--fa {
|
||||
&:hover {
|
||||
color: $fallback--cOrange;
|
||||
color: var(--cOrange, $fallback--cOrange);
|
||||
}
|
||||
}
|
||||
|
||||
&.-favorited {
|
||||
color: $fallback--cOrange;
|
||||
color: var(--cOrange, $fallback--cOrange);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
|
||||
|
||||
const FeaturesPanel = {
|
||||
computed: {
|
||||
shout: function () { return this.$store.state.instance.shoutAvailable },
|
||||
chat: function () { return this.$store.state.instance.chatAvailable },
|
||||
pleromaChatMessages: function () { return this.$store.state.instance.pleromaChatMessagesAvailable },
|
||||
gopher: function () { return this.$store.state.instance.gopherAvailable },
|
||||
whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
|
||||
mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
|
||||
minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode },
|
||||
textlimit: function () { return this.$store.state.instance.textlimit },
|
||||
uploadlimit: function () { return fileSizeFormatService.fileSizeFormat(this.$store.state.instance.uploadlimit) }
|
||||
textlimit: function () { return this.$store.state.instance.textlimit }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
</div>
|
||||
<div class="panel-body features-panel">
|
||||
<ul>
|
||||
<li v-if="shout">
|
||||
{{ $t('features_panel.shout') }}
|
||||
<li v-if="chat">
|
||||
{{ $t('features_panel.chat') }}
|
||||
</li>
|
||||
<li v-if="pleromaChatMessages">
|
||||
{{ $t('features_panel.pleroma_chat_messages') }}
|
||||
@@ -25,7 +25,6 @@
|
||||
</li>
|
||||
<li>{{ $t('features_panel.scope_options') }}</li>
|
||||
<li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
|
||||
<li>{{ $t('features_panel.upload_limit') }} = {{ uploadlimit.num }} {{ $t('upload.file_size_units.' + uploadlimit.unit) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
import RuffleService from '../../services/ruffle_service/ruffle_service.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faStop,
|
||||
faExclamationTriangle
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faStop,
|
||||
faExclamationTriangle
|
||||
)
|
||||
|
||||
const Flash = {
|
||||
props: [ 'src' ],
|
||||
data () {
|
||||
return {
|
||||
player: false, // can be true, "hidden", false. hidden = element exists
|
||||
loaded: false,
|
||||
ruffleInstance: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openPlayer () {
|
||||
if (this.player) return // prevent double-loading, or re-loading on failure
|
||||
this.player = 'hidden'
|
||||
RuffleService.getRuffle().then((ruffle) => {
|
||||
const player = ruffle.newest().createPlayer()
|
||||
player.config = {
|
||||
letterbox: 'on'
|
||||
}
|
||||
const container = this.$refs.container
|
||||
container.appendChild(player)
|
||||
player.style.width = '100%'
|
||||
player.style.height = '100%'
|
||||
player.load(this.src).then(() => {
|
||||
this.player = true
|
||||
}).catch((e) => {
|
||||
console.error('Error loading ruffle', e)
|
||||
this.player = 'error'
|
||||
})
|
||||
this.ruffleInstance = player
|
||||
})
|
||||
},
|
||||
closePlayer () {
|
||||
console.log(this.ruffleInstance)
|
||||
this.ruffleInstance.remove()
|
||||
this.player = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Flash
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div class="Flash">
|
||||
<div
|
||||
v-if="player === true || player === 'hidden'"
|
||||
ref="container"
|
||||
class="player"
|
||||
:class="{ hidden: player === 'hidden' }"
|
||||
/>
|
||||
<button
|
||||
v-if="player !== true"
|
||||
class="button-unstyled placeholder"
|
||||
@click="openPlayer"
|
||||
>
|
||||
<span
|
||||
v-if="player === 'hidden'"
|
||||
class="label"
|
||||
>
|
||||
{{ $t('general.loading') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="player === 'error'"
|
||||
class="label"
|
||||
>
|
||||
{{ $t('general.flash_fail') }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="label"
|
||||
>
|
||||
<p>
|
||||
{{ $t('general.flash_content') }}
|
||||
</p>
|
||||
<p>
|
||||
<FAIcon icon="exclamation-triangle" />
|
||||
{{ $t('general.flash_security') }}
|
||||
</p>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="player"
|
||||
class="button-unstyled hider"
|
||||
@click="closePlayer"
|
||||
>
|
||||
<FAIcon icon="stop" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./flash.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
.Flash {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
position: relative;
|
||||
|
||||
.player {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hider {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: center;
|
||||
flex: 1 1 0;
|
||||
line-height: 1.2;
|
||||
white-space: normal;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: 'hidden';
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<button
|
||||
class="btn button-default follow-button"
|
||||
class="btn btn-default follow-button"
|
||||
:class="{ toggled: isPressed }"
|
||||
:disabled="inProgress"
|
||||
:title="title"
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
<basic-user-card :user="user">
|
||||
<div class="follow-request-card-content-container">
|
||||
<button
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
@click="approveUser"
|
||||
>
|
||||
{{ $t('user_card.approve') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
@click="denyUser"
|
||||
>
|
||||
{{ $t('user_card.deny') }}
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import { set } from 'vue'
|
||||
import Select from '../select/select.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faChevronDown
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faChevronDown
|
||||
)
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Select
|
||||
},
|
||||
props: [
|
||||
'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
|
||||
],
|
||||
|
||||
@@ -22,20 +22,30 @@
|
||||
class="opt-l"
|
||||
:for="name + '-o'"
|
||||
/>
|
||||
<Select
|
||||
:id="name + '-font-switcher'"
|
||||
v-model="preset"
|
||||
<label
|
||||
:for="name + '-font-switcher'"
|
||||
class="select"
|
||||
:disabled="!present"
|
||||
class="font-switcher"
|
||||
>
|
||||
<option
|
||||
v-for="option in availableOptions"
|
||||
:key="option"
|
||||
:value="option"
|
||||
<select
|
||||
:id="name + '-font-switcher'"
|
||||
v-model="preset"
|
||||
:disabled="!present"
|
||||
class="font-switcher"
|
||||
>
|
||||
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
|
||||
</option>
|
||||
</Select>
|
||||
<option
|
||||
v-for="option in availableOptions"
|
||||
:key="option"
|
||||
:value="option"
|
||||
>
|
||||
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
|
||||
</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
v-if="isCustom"
|
||||
:id="name"
|
||||
@@ -55,8 +65,7 @@
|
||||
min-width: 10em;
|
||||
}
|
||||
&.custom {
|
||||
/* TODO Should make proper joiners... */
|
||||
.font-switcher {
|
||||
.select {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
@@ -9,15 +9,11 @@
|
||||
<div class="notice-message">
|
||||
{{ $t(notice.messageKey, notice.messageArgs) }}
|
||||
</div>
|
||||
<button
|
||||
class="button-unstyled close-notice"
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
@click="closeNotice(notice)"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
/>
|
||||
</button>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -58,7 +54,7 @@
|
||||
.global-error {
|
||||
background-color: var(--alertPopupError, $fallback--cRed);
|
||||
color: var(--alertPopupErrorText, $fallback--text);
|
||||
.svg-inline--fa {
|
||||
i {
|
||||
color: var(--alertPopupErrorText, $fallback--text);
|
||||
}
|
||||
}
|
||||
@@ -66,32 +62,17 @@
|
||||
.global-warning {
|
||||
background-color: var(--alertPopupWarning, $fallback--cOrange);
|
||||
color: var(--alertPopupWarningText, $fallback--text);
|
||||
.svg-inline--fa {
|
||||
i {
|
||||
color: var(--alertPopupWarningText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.global-success {
|
||||
background-color: var(--alertPopupSuccess, $fallback--cGreen);
|
||||
color: var(--alertPopupSuccessText, $fallback--text);
|
||||
.svg-inline--fa {
|
||||
color: var(--alertPopupSuccessText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.global-info {
|
||||
background-color: var(--alertPopupNeutral, $fallback--fg);
|
||||
color: var(--alertPopupNeutralText, $fallback--text);
|
||||
.svg-inline--fa {
|
||||
i {
|
||||
color: var(--alertPopupNeutralText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.close-notice {
|
||||
padding-right: 0.2em;
|
||||
.svg-inline--fa:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,10 +2,12 @@ import Cropper from 'cropperjs'
|
||||
import 'cropperjs/dist/cropper.css'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faTimes,
|
||||
faCircleNotch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faTimes,
|
||||
faCircleNotch
|
||||
)
|
||||
|
||||
@@ -51,7 +53,8 @@ const ImageCropper = {
|
||||
cropper: undefined,
|
||||
dataUrl: undefined,
|
||||
filename: undefined,
|
||||
submitting: false
|
||||
submitting: false,
|
||||
submitError: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -63,6 +66,9 @@ const ImageCropper = {
|
||||
},
|
||||
cancelText () {
|
||||
return this.cancelButtonLabel || this.$t('image_cropper.cancel')
|
||||
},
|
||||
submitErrorMsg () {
|
||||
return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -76,8 +82,12 @@ const ImageCropper = {
|
||||
},
|
||||
submit (cropping = true) {
|
||||
this.submitting = true
|
||||
this.avatarUploadError = null
|
||||
this.submitHandler(cropping && this.cropper, this.file)
|
||||
.then(() => this.destroy())
|
||||
.catch((err) => {
|
||||
this.submitError = err
|
||||
})
|
||||
.finally(() => {
|
||||
this.submitting = false
|
||||
})
|
||||
@@ -103,6 +113,9 @@ const ImageCropper = {
|
||||
reader.readAsDataURL(this.file)
|
||||
this.$emit('changed', this.file, reader)
|
||||
}
|
||||
},
|
||||
clearError () {
|
||||
this.submitError = null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@@ -11,21 +11,21 @@
|
||||
</div>
|
||||
<div class="image-cropper-buttons-wrapper">
|
||||
<button
|
||||
class="button-default btn"
|
||||
class="btn"
|
||||
type="button"
|
||||
:disabled="submitting"
|
||||
@click="submit()"
|
||||
v-text="saveText"
|
||||
/>
|
||||
<button
|
||||
class="button-default btn"
|
||||
class="btn"
|
||||
type="button"
|
||||
:disabled="submitting"
|
||||
@click="destroy"
|
||||
v-text="cancelText"
|
||||
/>
|
||||
<button
|
||||
class="button-default btn"
|
||||
class="btn"
|
||||
type="button"
|
||||
:disabled="submitting"
|
||||
@click="submit(false)"
|
||||
@@ -37,6 +37,17 @@
|
||||
icon="circle-notch"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="submitError"
|
||||
class="alert error"
|
||||
>
|
||||
{{ submitErrorMsg }}
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
@click="clearError"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
ref="input"
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
/>
|
||||
<button
|
||||
v-else
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
@click="submit"
|
||||
>
|
||||
{{ submitButtonLabel }}
|
||||
|
||||
@@ -3,35 +3,51 @@
|
||||
<label for="interface-language-switcher">
|
||||
{{ $t('settings.interfaceLanguage') }}
|
||||
</label>
|
||||
<Select
|
||||
id="interface-language-switcher"
|
||||
v-model="language"
|
||||
<label
|
||||
for="interface-language-switcher"
|
||||
class="select"
|
||||
>
|
||||
<option
|
||||
v-for="lang in languages"
|
||||
:key="lang.code"
|
||||
:value="lang.code"
|
||||
<select
|
||||
id="interface-language-switcher"
|
||||
v-model="language"
|
||||
>
|
||||
{{ lang.name }}
|
||||
</option>
|
||||
</Select>
|
||||
<option
|
||||
v-for="(langCode, i) in languageCodes"
|
||||
:key="langCode"
|
||||
:value="langCode"
|
||||
>
|
||||
{{ languageNames[i] }}
|
||||
</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</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'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faChevronDown
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faChevronDown
|
||||
)
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Select
|
||||
},
|
||||
computed: {
|
||||
languages () {
|
||||
return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
|
||||
languageCodes () {
|
||||
return languagesObject.languages
|
||||
},
|
||||
|
||||
languageNames () {
|
||||
return _.map(this.languageCodes, this.getLanguageName)
|
||||
},
|
||||
|
||||
language: {
|
||||
@@ -45,13 +61,11 @@ export default {
|
||||
methods: {
|
||||
getLanguageName (code) {
|
||||
const specialLanguageNames = {
|
||||
'ja_easy': 'やさしいにほんご',
|
||||
'zh': '简体中文',
|
||||
'zh_Hant': '繁體中文'
|
||||
'ja': 'Japanese (日本語)',
|
||||
'ja_easy': 'Japanese (やさしいにほんご)',
|
||||
'zh': 'Chinese (简体中文)'
|
||||
}
|
||||
const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
|
||||
const browserLocale = localeService.internalToBrowserLocale(code)
|
||||
return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
|
||||
return specialLanguageNames[code] || ISO6391.getName(code)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
const LinkPreview = {
|
||||
name: 'LinkPreview',
|
||||
props: [
|
||||
@@ -17,20 +15,11 @@ const LinkPreview = {
|
||||
// Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
|
||||
// as it makes sure to hide the image if somehow NSFW tagged preview can
|
||||
// exist.
|
||||
return this.card.image && !this.censored && this.size !== 'hide'
|
||||
},
|
||||
censored () {
|
||||
return this.nsfw && this.hideNsfwConfig
|
||||
return this.card.image && !this.nsfw && this.size !== 'hide'
|
||||
},
|
||||
useDescription () {
|
||||
return this.card.description && /\S/.test(this.card.description)
|
||||
},
|
||||
hideNsfwConfig () {
|
||||
return this.mergedConfig.hideNsfw
|
||||
},
|
||||
...mapGetters([
|
||||
'mergedConfig'
|
||||
])
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.useImage) {
|
||||
|
||||
@@ -9,17 +9,12 @@
|
||||
<div
|
||||
v-if="useImage && imageLoaded"
|
||||
class="card-image"
|
||||
:class="{ 'small-image': size === 'small' }"
|
||||
>
|
||||
<img :src="card.image">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span class="card-host faint">
|
||||
<span
|
||||
v-if="censored"
|
||||
class="nsfw-alert alert warning"
|
||||
>{{ $t('status.nsfw') }}</span>
|
||||
{{ card.provider_name }}
|
||||
</span>
|
||||
<span class="card-host faint">{{ card.provider_name }}</span>
|
||||
<h4 class="card-title">{{ card.title }}</h4>
|
||||
<p
|
||||
v-if="useDescription"
|
||||
@@ -55,6 +50,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.small-image {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
max-height: 100%;
|
||||
margin: 0.5em;
|
||||
@@ -77,10 +76,6 @@
|
||||
max-height: calc(1.2em * 3 - 1px);
|
||||
}
|
||||
|
||||
.nsfw-alert {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
border-style: solid;
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<button
|
||||
:disabled="loggingIn"
|
||||
type="submit"
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
>
|
||||
{{ $t('login.login') }}
|
||||
</button>
|
||||
|
||||
@@ -73,21 +73,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes media-fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
image-orientation: from-image; // NOTE: only FF supports this
|
||||
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
|
||||
}
|
||||
|
||||
.modal-view-button-arrow {
|
||||
|
||||
@@ -1,29 +1,33 @@
|
||||
<template>
|
||||
<label
|
||||
<div
|
||||
class="media-upload"
|
||||
:class="{ disabled: disabled }"
|
||||
:title="$t('tool_tip.media_upload')"
|
||||
>
|
||||
<FAIcon
|
||||
v-if="uploading"
|
||||
class="progress-icon"
|
||||
icon="circle-notch"
|
||||
spin
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="!uploading"
|
||||
class="new-icon"
|
||||
icon="upload"
|
||||
/>
|
||||
<input
|
||||
v-if="uploadReady"
|
||||
:disabled="disabled"
|
||||
type="file"
|
||||
style="position: fixed; top: -100em"
|
||||
multiple="true"
|
||||
@change="change"
|
||||
<label
|
||||
class="label"
|
||||
:title="$t('tool_tip.media_upload')"
|
||||
>
|
||||
</label>
|
||||
<FAIcon
|
||||
v-if="uploading"
|
||||
class="progress-icon"
|
||||
icon="circle-notch"
|
||||
spin
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="!uploading"
|
||||
class="new-icon"
|
||||
icon="upload"
|
||||
/>
|
||||
<input
|
||||
v-if="uploadReady"
|
||||
:disabled="disabled"
|
||||
type="file"
|
||||
style="position: fixed; top: -100em"
|
||||
multiple="true"
|
||||
@change="change"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./media_upload.js" ></script>
|
||||
@@ -32,6 +36,12 @@
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.media-upload {
|
||||
cursor: pointer;
|
||||
.label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.new-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,25 +23,23 @@
|
||||
<div class="form-group">
|
||||
<div class="login-bottom">
|
||||
<div>
|
||||
<button
|
||||
class="button-unstyled -link"
|
||||
type="button"
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="requireTOTP"
|
||||
>
|
||||
{{ $t('login.enter_two_factor_code') }}
|
||||
</button>
|
||||
</a>
|
||||
<br>
|
||||
<button
|
||||
class="button-unstyled -link"
|
||||
type="button"
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="abortMFA"
|
||||
>
|
||||
{{ $t('general.cancel') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
>
|
||||
{{ $t('general.verify') }}
|
||||
</button>
|
||||
|
||||
@@ -25,25 +25,23 @@
|
||||
<div class="form-group">
|
||||
<div class="login-bottom">
|
||||
<div>
|
||||
<button
|
||||
class="button-unstyled -link"
|
||||
type="button"
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="requireRecovery"
|
||||
>
|
||||
{{ $t('login.enter_recovery_code') }}
|
||||
</button>
|
||||
</a>
|
||||
<br>
|
||||
<button
|
||||
class="button-unstyled -link"
|
||||
type="button"
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="abortMFA"
|
||||
>
|
||||
{{ $t('general.cancel') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
>
|
||||
{{ $t('general.verify') }}
|
||||
</button>
|
||||
|
||||
@@ -9,8 +9,9 @@
|
||||
@click="scrollToTop()"
|
||||
>
|
||||
<div class="item">
|
||||
<button
|
||||
class="button-unstyled mobile-nav-button"
|
||||
<a
|
||||
href="#"
|
||||
class="mobile-nav-button"
|
||||
@click.stop.prevent="toggleMobileSidebar()"
|
||||
>
|
||||
<FAIcon
|
||||
@@ -21,7 +22,7 @@
|
||||
v-if="unreadChatCount"
|
||||
class="alert-dot"
|
||||
/>
|
||||
</button>
|
||||
</a>
|
||||
<router-link
|
||||
v-if="!hideSitename"
|
||||
class="site-name"
|
||||
@@ -32,9 +33,10 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="item right">
|
||||
<button
|
||||
<a
|
||||
v-if="currentUser"
|
||||
class="button-unstyled mobile-nav-button"
|
||||
class="mobile-nav-button"
|
||||
href="#"
|
||||
@click.stop.prevent="openMobileNotifications()"
|
||||
>
|
||||
<FAIcon
|
||||
@@ -45,7 +47,7 @@
|
||||
v-if="unseenNotificationsCount"
|
||||
class="alert-dot"
|
||||
/>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div v-if="isLoggedIn">
|
||||
<button
|
||||
class="button-default new-status-button"
|
||||
class="new-status-button"
|
||||
:class="{ 'hidden': isHidden }"
|
||||
@click="openPostForm"
|
||||
>
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
import DialogModal from '../dialog_modal/dialog_modal.vue'
|
||||
import Popover from '../popover/popover.vue'
|
||||
|
||||
library.add(faChevronDown)
|
||||
|
||||
const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
|
||||
const STRIP_MEDIA = 'mrf_tag:media-strip'
|
||||
const FORCE_UNLISTED = 'mrf_tag:force-unlisted'
|
||||
|
||||
@@ -8,17 +8,17 @@
|
||||
@show="setToggled(true)"
|
||||
@close="setToggled(false)"
|
||||
>
|
||||
<template v-slot:content>
|
||||
<div slot="content">
|
||||
<div class="dropdown-menu">
|
||||
<span v-if="user.is_local">
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="toggleRight("admin")"
|
||||
>
|
||||
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="toggleRight("moderator")"
|
||||
>
|
||||
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
|
||||
@@ -29,13 +29,13 @@
|
||||
/>
|
||||
</span>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="toggleActivationStatus()"
|
||||
>
|
||||
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="deleteUserDialog(true)"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.delete_account') }}
|
||||
@@ -47,109 +47,107 @@
|
||||
/>
|
||||
<span v-if="hasTagPolicy">
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="toggleTag(tags.FORCE_NSFW)"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.force_nsfw') }}
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.force_nsfw') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="toggleTag(tags.STRIP_MEDIA)"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.strip_media') }}
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.strip_media') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="toggleTag(tags.FORCE_UNLISTED)"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.force_unlisted') }}
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.force_unlisted') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="toggleTag(tags.SANDBOX)"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.sandbox') }}
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.sandbox') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="user.is_local"
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.disable_remote_subscription') }}
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.disable_remote_subscription') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="user.is_local"
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.disable_any_subscription') }}
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.disable_any_subscription') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="user.is_local"
|
||||
class="button-default dropdown-item"
|
||||
class="dropdown-item"
|
||||
@click="toggleTag(tags.QUARANTINE)"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.quarantine') }}
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.quarantine') }}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:trigger>
|
||||
<button
|
||||
class="btn button-default btn-block moderation-tools-button"
|
||||
:class="{ toggled }"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.moderation') }}
|
||||
<FAIcon icon="chevron-down" />
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<button
|
||||
slot="trigger"
|
||||
class="btn btn-default btn-block"
|
||||
:class="{ toggled }"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.moderation') }}
|
||||
</button>
|
||||
</Popover>
|
||||
<portal to="modal">
|
||||
<DialogModal
|
||||
v-if="showDeleteUserDialog"
|
||||
:on-cancel="deleteUserDialog.bind(this, false)"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<template slot="header">
|
||||
{{ $t('user_card.admin_menu.delete_user') }}
|
||||
</template>
|
||||
<p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
|
||||
<template v-slot:footer>
|
||||
<template slot="footer">
|
||||
<button
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
@click="deleteUserDialog(false)"
|
||||
>
|
||||
{{ $t('general.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn button-default danger"
|
||||
class="btn btn-default danger"
|
||||
@click="deleteUser()"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.delete_user') }}
|
||||
@@ -165,6 +163,25 @@
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.menu-checkbox {
|
||||
float: right;
|
||||
min-width: 22px;
|
||||
max-width: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
border-radius: 0px;
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--input, $fallback--fg);
|
||||
box-shadow: 0px 0px 2px black inset;
|
||||
box-shadow: var(--inputShadow);
|
||||
|
||||
&.menu-checkbox-checked::after {
|
||||
content: '✓';
|
||||
}
|
||||
}
|
||||
|
||||
.moderation-tools-popover {
|
||||
height: 100%;
|
||||
.trigger {
|
||||
@@ -172,10 +189,4 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.moderation-tools-button {
|
||||
svg,i {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="mute-card-content-container">
|
||||
<button
|
||||
v-if="muted"
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
:disabled="progress"
|
||||
@click="unmuteUser"
|
||||
>
|
||||
@@ -16,7 +16,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
:disabled="progress"
|
||||
@click="muteUser"
|
||||
>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
|
||||
import { timelineNames } from '../timeline_menu/timeline_menu.js'
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
@@ -7,12 +7,10 @@ import {
|
||||
faGlobe,
|
||||
faBookmark,
|
||||
faEnvelope,
|
||||
faChevronDown,
|
||||
faChevronUp,
|
||||
faHome,
|
||||
faComments,
|
||||
faBell,
|
||||
faInfoCircle,
|
||||
faStream
|
||||
faInfoCircle
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
@@ -20,12 +18,10 @@ library.add(
|
||||
faGlobe,
|
||||
faBookmark,
|
||||
faEnvelope,
|
||||
faChevronDown,
|
||||
faChevronUp,
|
||||
faHome,
|
||||
faComments,
|
||||
faBell,
|
||||
faInfoCircle,
|
||||
faStream
|
||||
faInfoCircle
|
||||
)
|
||||
|
||||
const NavPanel = {
|
||||
@@ -34,20 +30,16 @@ const NavPanel = {
|
||||
this.$store.dispatch('startFetchingFollowRequests')
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TimelineMenuContent
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showTimelines: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleTimelines () {
|
||||
this.showTimelines = !this.showTimelines
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
onTimelineRoute () {
|
||||
return !!timelineNames()[this.$route.name]
|
||||
},
|
||||
timelinesRoute () {
|
||||
if (this.$store.state.interface.lastTimeline) {
|
||||
return this.$store.state.interface.lastTimeline
|
||||
}
|
||||
return this.currentUser ? 'friends' : 'public-timeline'
|
||||
},
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser,
|
||||
followRequestCount: state => state.api.followRequests.length,
|
||||
|
||||
@@ -3,33 +3,19 @@
|
||||
<div class="panel panel-default">
|
||||
<ul>
|
||||
<li v-if="currentUser || !privateMode">
|
||||
<button
|
||||
class="button-unstyled menu-item"
|
||||
@click="toggleTimelines"
|
||||
<router-link
|
||||
:to="{ name: timelinesRoute }"
|
||||
:class="onTimelineRoute && 'router-link-active'"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
icon="stream"
|
||||
icon="home"
|
||||
/>{{ $t("nav.timelines") }}
|
||||
<FAIcon
|
||||
class="timelines-chevron"
|
||||
fixed-width
|
||||
:icon="showTimelines ? 'chevron-up' : 'chevron-down'"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
v-show="showTimelines"
|
||||
class="timelines-background"
|
||||
>
|
||||
<TimelineMenuContent class="timelines" />
|
||||
</div>
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="currentUser">
|
||||
<router-link
|
||||
class="menu-item"
|
||||
:to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
|
||||
>
|
||||
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
@@ -38,10 +24,7 @@
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="currentUser && pleromaChatMessagesAvailable">
|
||||
<router-link
|
||||
class="menu-item"
|
||||
:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
|
||||
>
|
||||
<router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
|
||||
<div
|
||||
v-if="unreadChatCount"
|
||||
class="badge badge-notification"
|
||||
@@ -56,10 +39,7 @@
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="currentUser && currentUser.locked">
|
||||
<router-link
|
||||
class="menu-item"
|
||||
:to="{ name: 'friend-requests' }"
|
||||
>
|
||||
<router-link :to="{ name: 'friend-requests' }">
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
@@ -74,10 +54,7 @@
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
class="menu-item"
|
||||
:to="{ name: 'about' }"
|
||||
>
|
||||
<router-link :to="{ name: 'about' }">
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
@@ -114,14 +91,14 @@
|
||||
border-color: var(--border, $fallback--border);
|
||||
padding: 0;
|
||||
|
||||
&:first-child .menu-item {
|
||||
&:first-child a {
|
||||
border-top-right-radius: $fallback--panelRadius;
|
||||
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-top-left-radius: $fallback--panelRadius;
|
||||
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
}
|
||||
|
||||
&:last-child .menu-item {
|
||||
&:last-child a {
|
||||
border-bottom-right-radius: $fallback--panelRadius;
|
||||
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-bottom-left-radius: $fallback--panelRadius;
|
||||
@@ -133,15 +110,13 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
a {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
align-items: stretch;
|
||||
height: 3.5em;
|
||||
line-height: 3.5em;
|
||||
padding: 0 1em;
|
||||
width: 100%;
|
||||
color: $fallback--link;
|
||||
color: var(--link, $fallback--link);
|
||||
|
||||
&:hover {
|
||||
background-color: $fallback--lightBg;
|
||||
@@ -171,25 +146,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.timelines-chevron {
|
||||
margin-left: 0.8em;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.timelines-background {
|
||||
padding: 0 0 0 0.6em;
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||
border-top: 1px solid;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
}
|
||||
|
||||
.timelines {
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
}
|
||||
|
||||
.fa-scale-110 {
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
|
||||
@@ -11,18 +11,17 @@
|
||||
>
|
||||
<small>
|
||||
<router-link :to="userProfileLink">
|
||||
{{ notification.from_profile.screen_name_ui }}
|
||||
{{ notification.from_profile.screen_name }}
|
||||
</router-link>
|
||||
</small>
|
||||
<button
|
||||
class="button-unstyled unmute"
|
||||
<a
|
||||
href="#"
|
||||
class="unmute"
|
||||
@click.prevent="toggleMute"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="eye-slash"
|
||||
/>
|
||||
</button>
|
||||
><FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="eye-slash"
|
||||
/></a>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
@@ -54,14 +53,14 @@
|
||||
<bdi
|
||||
v-if="!!notification.from_profile.name_html"
|
||||
class="username"
|
||||
:title="'@'+notification.from_profile.screen_name_ui"
|
||||
:title="'@'+notification.from_profile.screen_name"
|
||||
v-html="notification.from_profile.name_html"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<span
|
||||
v-else
|
||||
class="username"
|
||||
:title="'@'+notification.from_profile.screen_name_ui"
|
||||
:title="'@'+notification.from_profile.screen_name"
|
||||
>{{ notification.from_profile.name }}</span>
|
||||
<span v-if="notification.type === 'like'">
|
||||
<FAIcon
|
||||
@@ -133,16 +132,14 @@
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
<a
|
||||
v-if="needMute"
|
||||
class="button-unstyled"
|
||||
href="#"
|
||||
@click.prevent="toggleMute"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="eye-slash"
|
||||
/>
|
||||
</button>
|
||||
><FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="eye-slash"
|
||||
/></a>
|
||||
</span>
|
||||
<div
|
||||
v-if="notification.type === 'follow' || notification.type === 'follow_request'"
|
||||
@@ -152,7 +149,7 @@
|
||||
:to="userProfileLink"
|
||||
class="follow-name"
|
||||
>
|
||||
@{{ notification.from_profile.screen_name_ui }}
|
||||
@{{ notification.from_profile.screen_name }}
|
||||
</router-link>
|
||||
<div
|
||||
v-if="notification.type === 'follow_request'"
|
||||
@@ -177,7 +174,7 @@
|
||||
class="move-text"
|
||||
>
|
||||
<router-link :to="targetUserProfileLink">
|
||||
@{{ notification.target.screen_name_ui }}
|
||||
@{{ notification.target.screen_name }}
|
||||
</router-link>
|
||||
</div>
|
||||
<template v-else>
|
||||
|
||||
@@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<Popover
|
||||
trigger="click"
|
||||
class="NotificationFilters"
|
||||
placement="bottom"
|
||||
:bound-to="{ x: 'container' }"
|
||||
>
|
||||
<template v-slot:content>
|
||||
<div class="dropdown-menu">
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="toggleNotificationFilter('likes')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': filters.likes }"
|
||||
/>{{ $t('settings.notification_visibility_likes') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="toggleNotificationFilter('repeats')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': filters.repeats }"
|
||||
/>{{ $t('settings.notification_visibility_repeats') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="toggleNotificationFilter('follows')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': filters.follows }"
|
||||
/>{{ $t('settings.notification_visibility_follows') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="toggleNotificationFilter('mentions')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': filters.mentions }"
|
||||
/>{{ $t('settings.notification_visibility_mentions') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="toggleNotificationFilter('emojiReactions')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': filters.emojiReactions }"
|
||||
/>{{ $t('settings.notification_visibility_emoji_reactions') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="toggleNotificationFilter('moves')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': filters.moves }"
|
||||
/>{{ $t('settings.notification_visibility_moves') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:trigger>
|
||||
<button class="button-unstyled">
|
||||
<FAIcon icon="filter" />
|
||||
</button>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popover from '../popover/popover.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faFilter } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faFilter
|
||||
)
|
||||
|
||||
export default {
|
||||
components: { Popover },
|
||||
computed: {
|
||||
filters () {
|
||||
return this.$store.getters.mergedConfig.notificationVisibility
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleNotificationFilter (type) {
|
||||
this.$store.dispatch('setOption', {
|
||||
name: 'notificationVisibility',
|
||||
value: {
|
||||
...this.filters,
|
||||
[type]: !this.filters[type]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.NotificationFilters {
|
||||
align-self: stretch;
|
||||
|
||||
> button {
|
||||
font-size: 1.2em;
|
||||
padding-left: 0.7em;
|
||||
padding-right: 0.2em;
|
||||
line-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,13 +1,11 @@
|
||||
import { mapGetters } from 'vuex'
|
||||
import Notification from '../notification/notification.vue'
|
||||
import NotificationFilters from './notification_filters.vue'
|
||||
import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
|
||||
import {
|
||||
notificationsFromStore,
|
||||
filteredNotificationsFromStore,
|
||||
unseenNotificationsFromStore
|
||||
} from '../../services/notification_utils/notification_utils.js'
|
||||
import FaviconService from '../../services/favicon_service/favicon_service.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
@@ -18,10 +16,6 @@ library.add(
|
||||
const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
|
||||
|
||||
const Notifications = {
|
||||
components: {
|
||||
Notification,
|
||||
NotificationFilters
|
||||
},
|
||||
props: {
|
||||
// Disables display of panel header
|
||||
noHeading: Boolean,
|
||||
@@ -40,6 +34,11 @@ const Notifications = {
|
||||
seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const store = this.$store
|
||||
const credentials = store.state.users.currentUser.credentials
|
||||
notificationsFetcher.fetchAndUpdate({ store, credentials })
|
||||
},
|
||||
computed: {
|
||||
mainClass () {
|
||||
return this.minimalMode ? '' : 'panel panel-default'
|
||||
@@ -70,13 +69,14 @@ const Notifications = {
|
||||
},
|
||||
...mapGetters(['unreadChatCount'])
|
||||
},
|
||||
components: {
|
||||
Notification
|
||||
},
|
||||
watch: {
|
||||
unseenCountTitle (count) {
|
||||
if (count > 0) {
|
||||
FaviconService.drawFaviconBadge()
|
||||
this.$store.dispatch('setPageTitle', `(${count})`)
|
||||
} else {
|
||||
FaviconService.clearFaviconBadge()
|
||||
this.$store.dispatch('setPageTitle', '')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.Notifications {
|
||||
.notifications {
|
||||
&:not(.minimal) {
|
||||
// a bit of a hack to allow scrolling below notifications
|
||||
padding-bottom: 15em;
|
||||
@@ -11,10 +11,6 @@
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
.notifications-footer {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
|
||||
@@ -86,6 +82,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.follow-text, .move-text {
|
||||
padding: 0.5em 0;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{ minimal: minimalMode }"
|
||||
class="Notifications"
|
||||
class="notifications"
|
||||
>
|
||||
<div :class="mainClass">
|
||||
<div
|
||||
@@ -15,14 +15,20 @@
|
||||
class="badge badge-notification unseen-count"
|
||||
>{{ unseenCount }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="error"
|
||||
class="loadmore-error alert error"
|
||||
@click.prevent
|
||||
>
|
||||
{{ $t('timeline.error_fetching') }}
|
||||
</div>
|
||||
<button
|
||||
v-if="unseenCount"
|
||||
class="button-default read-button"
|
||||
class="read-button"
|
||||
@click.prevent="markAsSeen"
|
||||
>
|
||||
{{ $t('notifications.read') }}
|
||||
</button>
|
||||
<NotificationFilters />
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div
|
||||
@@ -35,25 +41,25 @@
|
||||
<notification :notification="notification" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer notifications-footer">
|
||||
<div class="panel-footer">
|
||||
<div
|
||||
v-if="bottomedOut"
|
||||
class="new-status-notification text-center faint"
|
||||
class="new-status-notification text-center panel-footer faint"
|
||||
>
|
||||
{{ $t('notifications.no_more_notifications') }}
|
||||
</div>
|
||||
<button
|
||||
<a
|
||||
v-else-if="!loading"
|
||||
class="button-unstyled -link -fullwidth"
|
||||
href="#"
|
||||
@click.prevent="fetchOlderNotifications()"
|
||||
>
|
||||
<div class="new-status-notification text-center">
|
||||
<div class="new-status-notification text-center panel-footer">
|
||||
{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
<div
|
||||
v-else
|
||||
class="new-status-notification text-center"
|
||||
class="new-status-notification text-center panel-footer"
|
||||
>
|
||||
<FAIcon
|
||||
icon="circle-notch"
|
||||
|
||||
@@ -51,9 +51,9 @@
|
||||
<button
|
||||
:disabled="isPending"
|
||||
type="submit"
|
||||
class="btn button-default btn-block"
|
||||
class="btn btn-default btn-block"
|
||||
>
|
||||
{{ $t('settings.save') }}
|
||||
{{ $t('general.submit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,15 +42,14 @@
|
||||
:value="index"
|
||||
>
|
||||
<label class="option-vote">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-html="option.title_html" />
|
||||
<div>{{ option.title }}</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer faint">
|
||||
<button
|
||||
v-if="!showResults"
|
||||
class="btn button-default poll-vote-button"
|
||||
class="btn btn-default poll-vote-button"
|
||||
type="button"
|
||||
:disabled="isDisabled"
|
||||
@click="vote"
|
||||
@@ -58,12 +57,7 @@
|
||||
{{ $t('polls.vote') }}
|
||||
</button>
|
||||
<div class="total">
|
||||
<template v-if="typeof poll.voters_count === 'number'">
|
||||
{{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }} ·
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} ·
|
||||
</template>
|
||||
{{ totalVotesCount }} {{ $t("polls.votes") }} ·
|
||||
</div>
|
||||
<i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
|
||||
<Timeago
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
import * as DateUtils from 'src/services/date_utils/date_utils.js'
|
||||
import { uniq } from 'lodash'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import Select from '../select/select.vue'
|
||||
import {
|
||||
faTimes,
|
||||
faChevronDown,
|
||||
faPlus
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faTimes,
|
||||
faChevronDown,
|
||||
faPlus
|
||||
)
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Select
|
||||
},
|
||||
name: 'PollForm',
|
||||
props: ['visible'],
|
||||
data: () => ({
|
||||
|
||||
@@ -21,17 +21,20 @@
|
||||
@keydown.enter.stop.prevent="nextOption(index)"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
<div
|
||||
v-if="options.length > 2"
|
||||
class="delete-option button-unstyled -hover-highlight"
|
||||
@click="deleteOption(index)"
|
||||
class="icon-container"
|
||||
>
|
||||
<FAIcon icon="times" />
|
||||
</button>
|
||||
<FAIcon
|
||||
icon="times"
|
||||
class="delete"
|
||||
@click="deleteOption(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
<a
|
||||
v-if="options.length < maxOptions"
|
||||
class="add-option faint button-unstyled -hover-highlight"
|
||||
class="add-option faint"
|
||||
@click="addOption"
|
||||
>
|
||||
<FAIcon
|
||||
@@ -40,25 +43,29 @@
|
||||
/>
|
||||
|
||||
{{ $t("polls.add_option") }}
|
||||
</button>
|
||||
</a>
|
||||
<div class="poll-type-expiry">
|
||||
<div
|
||||
class="poll-type"
|
||||
:title="$t('polls.type')"
|
||||
>
|
||||
<Select
|
||||
v-model="pollType"
|
||||
class="poll-type-select"
|
||||
unstyled="true"
|
||||
@change="updatePollToParent"
|
||||
<label
|
||||
for="poll-type-selector"
|
||||
class="select"
|
||||
>
|
||||
<option value="single">
|
||||
{{ $t('polls.single_choice') }}
|
||||
</option>
|
||||
<option value="multiple">
|
||||
{{ $t('polls.multiple_choices') }}
|
||||
</option>
|
||||
</Select>
|
||||
<select
|
||||
v-model="pollType"
|
||||
class="select"
|
||||
@change="updatePollToParent"
|
||||
>
|
||||
<option value="single">{{ $t('polls.single_choice') }}</option>
|
||||
<option value="multiple">{{ $t('polls.multiple_choices') }}</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="poll-expiry"
|
||||
@@ -72,20 +79,24 @@
|
||||
:max="maxExpirationInCurrentUnit"
|
||||
@change="expiryAmountChange"
|
||||
>
|
||||
<Select
|
||||
v-model="expiryUnit"
|
||||
unstyled="true"
|
||||
class="expiry-unit"
|
||||
@change="expiryAmountChange"
|
||||
>
|
||||
<option
|
||||
v-for="unit in expiryUnits"
|
||||
:key="unit"
|
||||
:value="unit"
|
||||
<label class="expiry-unit select">
|
||||
<select
|
||||
v-model="expiryUnit"
|
||||
@change="expiryAmountChange"
|
||||
>
|
||||
{{ $t(`time.${unit}_short`, ['']) }}
|
||||
</option>
|
||||
</Select>
|
||||
<option
|
||||
v-for="unit in expiryUnits"
|
||||
:key="unit"
|
||||
:value="unit"
|
||||
>
|
||||
{{ $t(`time.${unit}_short`, ['']) }}
|
||||
</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,6 +116,7 @@
|
||||
align-self: flex-start;
|
||||
padding-top: 0.25em;
|
||||
padding-left: 0.1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.poll-option {
|
||||
@@ -123,11 +135,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.delete-option {
|
||||
.icon-container {
|
||||
// Hack: Move the icon over the input box
|
||||
width: 1.5em;
|
||||
margin-left: -1.5em;
|
||||
z-index: 1;
|
||||
|
||||
.delete {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poll-type-expiry {
|
||||
@@ -139,9 +159,10 @@
|
||||
.poll-type {
|
||||
margin-right: 0.75em;
|
||||
flex: 1 1 60%;
|
||||
|
||||
.poll-type-select {
|
||||
padding-right: 0.75em;
|
||||
.select {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,6 +173,12 @@
|
||||
width: 3em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.expiry-unit {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,35 +3,25 @@ const Popover = {
|
||||
props: {
|
||||
// Action to trigger popover: either 'hover' or 'click'
|
||||
trigger: String,
|
||||
|
||||
// Either 'top' or 'bottom'
|
||||
placement: String,
|
||||
|
||||
// Takes object with properties 'x' and 'y', values of these can be
|
||||
// 'container' for using offsetParent as boundaries for either axis
|
||||
// or 'viewport'
|
||||
boundTo: Object,
|
||||
|
||||
// Takes a selector to use as a replacement for the parent container
|
||||
// for getting boundaries for x an y axis
|
||||
boundToSelector: String,
|
||||
|
||||
// Takes a top/bottom/left/right object, how much space to leave
|
||||
// between boundary and popover element
|
||||
margin: Object,
|
||||
|
||||
// Takes a x/y object and tells how many pixels to offset from
|
||||
// anchor point on either axis
|
||||
offset: Object,
|
||||
|
||||
// Replaces the classes you may want for the popover container.
|
||||
// Use 'popover-default' in addition to get the default popover
|
||||
// styles with your custom class.
|
||||
popoverClass: String,
|
||||
|
||||
// If true, subtract padding when calculating position for the popover,
|
||||
// use it when popover offset looks to be different on top vs bottom.
|
||||
removePadding: Boolean
|
||||
popoverClass: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -54,11 +44,8 @@ const Popover = {
|
||||
}
|
||||
|
||||
// Popover will be anchored around this element, trigger ref is the container, so
|
||||
// its children are what are inside the slot. Expect only one v-slot:trigger.
|
||||
// its children are what are inside the slot. Expect only one slot="trigger".
|
||||
const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
|
||||
// SVGs don't have offsetWidth/Height, use fallback
|
||||
const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
|
||||
const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
|
||||
const screenBox = anchorEl.getBoundingClientRect()
|
||||
// Screen position of the origin point for popover
|
||||
const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
|
||||
@@ -109,19 +96,13 @@ const Popover = {
|
||||
if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
|
||||
if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
|
||||
|
||||
let vPadding = 0
|
||||
if (this.removePadding && usingTop) {
|
||||
const anchorStyle = getComputedStyle(anchorEl)
|
||||
vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
|
||||
}
|
||||
|
||||
const yOffset = (this.offset && this.offset.y) || 0
|
||||
const translateY = usingTop
|
||||
? -anchorHeight + vPadding - yOffset - content.offsetHeight
|
||||
? -anchorEl.offsetHeight - yOffset - content.offsetHeight
|
||||
: yOffset
|
||||
|
||||
const xOffset = (this.offset && this.offset.x) || 0
|
||||
const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
|
||||
const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
|
||||
|
||||
// Note, separate translateX and translateY avoids blurry text on chromium,
|
||||
// single translate or translate3d resulted in blurry text.
|
||||
@@ -131,12 +112,9 @@ const Popover = {
|
||||
}
|
||||
},
|
||||
showPopover () {
|
||||
const wasHidden = this.hidden
|
||||
if (this.hidden) this.$emit('show')
|
||||
this.hidden = false
|
||||
this.$nextTick(() => {
|
||||
if (wasHidden) this.$emit('show')
|
||||
this.updateStyles()
|
||||
})
|
||||
this.$nextTick(this.updateStyles)
|
||||
},
|
||||
hidePopover () {
|
||||
if (!this.hidden) this.$emit('close')
|
||||
|
||||
@@ -3,14 +3,12 @@
|
||||
@mouseenter="onMouseenter"
|
||||
@mouseleave="onMouseleave"
|
||||
>
|
||||
<button
|
||||
<div
|
||||
ref="trigger"
|
||||
class="button-unstyled -fullwidth popover-trigger-button"
|
||||
type="button"
|
||||
@click="onClick"
|
||||
>
|
||||
<slot name="trigger" />
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="!hidden"
|
||||
ref="content"
|
||||
@@ -32,10 +30,6 @@
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.popover-trigger-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.popover {
|
||||
z-index: 8;
|
||||
position: absolute;
|
||||
@@ -82,9 +76,10 @@
|
||||
|
||||
.dropdown-item {
|
||||
line-height: 21px;
|
||||
margin-right: 5px;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
padding: .5em 0.75em;
|
||||
padding: .25rem 1.0rem .25rem 1.5rem;
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
text-align: inherit;
|
||||
@@ -95,14 +90,14 @@
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
--btnText: var(--popoverText, $fallback--text);
|
||||
|
||||
&-icon {
|
||||
padding-left: 0.5rem;
|
||||
|
||||
svg {
|
||||
width: 22px;
|
||||
margin-right: 0.75rem;
|
||||
margin-right: 0.25rem;
|
||||
color: var(--menuPopoverIcon, $fallback--icon)
|
||||
}
|
||||
}
|
||||
@@ -121,33 +116,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.menu-checkbox {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
min-width: 22px;
|
||||
max-width: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
border-radius: 0px;
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--input, $fallback--fg);
|
||||
box-shadow: 0px 0px 2px black inset;
|
||||
box-shadow: var(--inputShadow);
|
||||
margin-right: 0.75em;
|
||||
|
||||
&.menu-checkbox-checked::after {
|
||||
font-size: 1.25em;
|
||||
content: '✓';
|
||||
}
|
||||
|
||||
&.menu-checkbox-radio::after {
|
||||
font-size: 2em;
|
||||
content: '•';
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,10 +11,10 @@ import { reject, map, uniqBy, debounce } from 'lodash'
|
||||
import suggestor from '../emoji_input/suggestor.js'
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
import Select from '../select/select.vue'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faChevronDown,
|
||||
faSmileBeam,
|
||||
faPollH,
|
||||
faUpload,
|
||||
@@ -24,6 +24,7 @@ import {
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faChevronDown,
|
||||
faSmileBeam,
|
||||
faPollH,
|
||||
faUpload,
|
||||
@@ -83,7 +84,6 @@ const PostStatusForm = {
|
||||
PollForm,
|
||||
ScopeSelector,
|
||||
Checkbox,
|
||||
Select,
|
||||
Attachment,
|
||||
StatusContent
|
||||
},
|
||||
@@ -115,7 +115,7 @@ const PostStatusForm = {
|
||||
? this.copyMessageScope
|
||||
: this.$store.state.users.currentUser.default_scope
|
||||
|
||||
const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
|
||||
const { postContentType: contentType } = this.$store.getters.mergedConfig
|
||||
|
||||
return {
|
||||
dropFiles: [],
|
||||
@@ -126,7 +126,7 @@ const PostStatusForm = {
|
||||
newStatus: {
|
||||
spoilerText: this.subject || '',
|
||||
status: statusText,
|
||||
nsfw: !!sensitiveByDefault,
|
||||
nsfw: false,
|
||||
files: [],
|
||||
poll: {},
|
||||
mediaDescriptions: {},
|
||||
@@ -159,7 +159,8 @@ const PostStatusForm = {
|
||||
...this.$store.state.instance.emoji,
|
||||
...this.$store.state.instance.customEmoji
|
||||
],
|
||||
store: this.$store
|
||||
users: this.$store.state.users.users,
|
||||
updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
|
||||
})
|
||||
},
|
||||
emojiSuggestor () {
|
||||
@@ -530,7 +531,7 @@ const PostStatusForm = {
|
||||
!(isFormBiggerThanScroller &&
|
||||
this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
|
||||
const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
|
||||
const targetScroll = Math.round(currentScroll + totalDelta)
|
||||
const targetScroll = currentScroll + totalDelta
|
||||
|
||||
if (scrollerRef === window) {
|
||||
scrollerRef.scroll(0, targetScroll)
|
||||
|
||||
@@ -24,12 +24,12 @@
|
||||
tag="p"
|
||||
class="visibility-notice"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled -link"
|
||||
<a
|
||||
href="#"
|
||||
@click="openProfileTab"
|
||||
>
|
||||
{{ $t('post_status.account_not_locked_warning_link') }}
|
||||
</button>
|
||||
</a>
|
||||
</i18n>
|
||||
<p
|
||||
v-if="!hideScopeNotice && newStatus.visibility === 'public'"
|
||||
@@ -189,19 +189,28 @@
|
||||
v-if="postFormats.length > 1"
|
||||
class="text-format"
|
||||
>
|
||||
<Select
|
||||
id="post-content-type"
|
||||
v-model="newStatus.contentType"
|
||||
class="form-control"
|
||||
<label
|
||||
for="post-content-type"
|
||||
class="select"
|
||||
>
|
||||
<option
|
||||
v-for="postFormat in postFormats"
|
||||
:key="postFormat"
|
||||
:value="postFormat"
|
||||
<select
|
||||
id="post-content-type"
|
||||
v-model="newStatus.contentType"
|
||||
class="form-control"
|
||||
>
|
||||
{{ $t(`post_status.content_type["${postFormat}"]`) }}
|
||||
</option>
|
||||
</Select>
|
||||
<option
|
||||
v-for="postFormat in postFormats"
|
||||
:key="postFormat"
|
||||
:value="postFormat"
|
||||
>
|
||||
{{ $t(`post_status.content_type["${postFormat}"]`) }}
|
||||
</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
|
||||
@@ -234,46 +243,50 @@
|
||||
@upload-failed="uploadFailed"
|
||||
@all-uploaded="finishedUploadingFiles"
|
||||
/>
|
||||
<button
|
||||
class="emoji-icon button-unstyled"
|
||||
:title="$t('emoji.add_emoji')"
|
||||
@click="showEmojiPicker"
|
||||
<div
|
||||
class="emoji-icon"
|
||||
>
|
||||
<FAIcon icon="smile-beam" />
|
||||
</button>
|
||||
<button
|
||||
<div
|
||||
:title="$t('emoji.add_emoji')"
|
||||
class="btn btn-default"
|
||||
@click="showEmojiPicker"
|
||||
>
|
||||
<FAIcon icon="smile-beam" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="pollsAvailable"
|
||||
class="poll-icon button-unstyled"
|
||||
class="poll-icon"
|
||||
:class="{ selected: pollFormVisible }"
|
||||
:title="$t('polls.add_poll')"
|
||||
@click="togglePollForm"
|
||||
>
|
||||
<FAIcon icon="poll-h" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="posting"
|
||||
disabled
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
>
|
||||
{{ $t('post_status.posting') }}
|
||||
</button>
|
||||
<button
|
||||
v-else-if="isOverLengthLimit"
|
||||
disabled
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
>
|
||||
{{ $t('post_status.post') }}
|
||||
{{ $t('general.submit') }}
|
||||
</button>
|
||||
<!-- touchstart is used to keep the OSK at the same position after a message send -->
|
||||
<button
|
||||
v-else
|
||||
:disabled="uploadingFiles || disableSubmit"
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
@touchstart.stop.prevent="postStatus($event, newStatus)"
|
||||
@click.stop.prevent="postStatus($event, newStatus)"
|
||||
>
|
||||
{{ $t('post_status.post') }}
|
||||
{{ $t('general.submit') }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
@@ -293,12 +306,11 @@
|
||||
:key="file.url"
|
||||
class="media-upload-wrapper"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled hider"
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="times"
|
||||
@click="removeMediaFile(file)"
|
||||
>
|
||||
<FAIcon icon="times" />
|
||||
</button>
|
||||
/>
|
||||
<attachment
|
||||
:attachment="file"
|
||||
:set-media="() => $store.dispatch('setMedia', newStatus.files)"
|
||||
@@ -508,11 +520,26 @@
|
||||
}
|
||||
|
||||
.attachments .media-upload-wrapper {
|
||||
position: relative;
|
||||
padding: 0 0.5em;
|
||||
|
||||
.attachment {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fa-scale-110 fa-old-padding {
|
||||
position: absolute;
|
||||
margin: 10px;
|
||||
margin: .75em;
|
||||
padding: .5em;
|
||||
background: rgba(230,230,230,0.6);
|
||||
z-index: 2;
|
||||
color: black;
|
||||
border-radius: $fallback--attachmentRadius;
|
||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -23,31 +23,17 @@ const ReactButton = {
|
||||
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
|
||||
}
|
||||
close()
|
||||
},
|
||||
focusInput () {
|
||||
this.$nextTick(() => {
|
||||
const input = this.$el.querySelector('input')
|
||||
if (input) input.focus()
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
commonEmojis () {
|
||||
return [
|
||||
{ displayText: 'thumbsup', replacement: '👍' },
|
||||
{ displayText: 'angry', replacement: '😠' },
|
||||
{ displayText: 'eyes', replacement: '👀' },
|
||||
{ displayText: 'joy', replacement: '😂' },
|
||||
{ displayText: 'fire', replacement: '🔥' }
|
||||
]
|
||||
return ['👍', '😠', '👀', '😂', '🔥']
|
||||
},
|
||||
emojis () {
|
||||
if (this.filterWord !== '') {
|
||||
const filterWordLowercase = this.filterWord.toLowerCase()
|
||||
let orderedEmojiList = []
|
||||
for (const emoji of this.$store.state.instance.emoji) {
|
||||
if (emoji.replacement === this.filterWord) return [emoji]
|
||||
|
||||
const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
|
||||
if (indexOfFilterWord > -1) {
|
||||
if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<Popover
|
||||
trigger="click"
|
||||
class="ReactButton"
|
||||
placement="top"
|
||||
:offset="{ y: 5 }"
|
||||
:bound-to="{ x: 'container' }"
|
||||
remove-padding
|
||||
@show="focusInput"
|
||||
class="react-button-popover"
|
||||
>
|
||||
<template v-slot:content="{close}">
|
||||
<div
|
||||
slot="content"
|
||||
slot-scope="{close}"
|
||||
>
|
||||
<div class="reaction-picker-filter">
|
||||
<input
|
||||
v-model="filterWord"
|
||||
@@ -19,37 +19,30 @@
|
||||
<div class="reaction-picker">
|
||||
<span
|
||||
v-for="emoji in commonEmojis"
|
||||
:key="emoji.replacement"
|
||||
:key="emoji"
|
||||
class="emoji-button"
|
||||
:title="emoji.displayText"
|
||||
@click="addReaction($event, emoji.replacement, close)"
|
||||
@click="addReaction($event, emoji, close)"
|
||||
>
|
||||
{{ emoji.replacement }}
|
||||
{{ emoji }}
|
||||
</span>
|
||||
<div class="reaction-picker-divider" />
|
||||
<span
|
||||
v-for="(emoji, key) in emojis"
|
||||
:key="key"
|
||||
class="emoji-button"
|
||||
:title="emoji.displayText"
|
||||
@click="addReaction($event, emoji.replacement, close)"
|
||||
>
|
||||
{{ emoji.replacement }}
|
||||
</span>
|
||||
<div class="reaction-bottom-fader" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:trigger>
|
||||
<button
|
||||
class="button-unstyled popover-trigger"
|
||||
:title="$t('tool_tip.add_reaction')"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
:icon="['far', 'smile-beam']"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<FAIcon
|
||||
slot="trigger"
|
||||
class="fa-scale-110 fa-old-padding add-reaction-button"
|
||||
:icon="['far', 'smile-beam']"
|
||||
:title="$t('tool_tip.add_reaction')"
|
||||
/>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
@@ -58,72 +51,62 @@
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.ReactButton {
|
||||
.reaction-picker-filter {
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
.reaction-picker-filter {
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.reaction-picker-divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 0.5em;
|
||||
background-color: var(--border, $fallback--border);
|
||||
}
|
||||
.reaction-picker-divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 0.5em;
|
||||
background-color: var(--border, $fallback--border);
|
||||
}
|
||||
|
||||
.reaction-picker {
|
||||
width: 10em;
|
||||
height: 9em;
|
||||
font-size: 1.5em;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
align-content: flex-start;
|
||||
user-select: none;
|
||||
.reaction-picker {
|
||||
width: 10em;
|
||||
height: 9em;
|
||||
font-size: 1.5em;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
align-content: flex-start;
|
||||
user-select: none;
|
||||
|
||||
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
|
||||
linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
|
||||
linear-gradient(to top, white, white);
|
||||
transition: mask-size 150ms;
|
||||
mask-size: 100% 20px, 100% 20px, auto;
|
||||
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
|
||||
linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
|
||||
linear-gradient(to top, white, white);
|
||||
transition: mask-size 150ms;
|
||||
mask-size: 100% 20px, 100% 20px, auto;
|
||||
// Autoprefixed seem to ignore this one, and also syntax is different
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
|
||||
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
.emoji-button {
|
||||
cursor: pointer;
|
||||
|
||||
.emoji-button {
|
||||
cursor: pointer;
|
||||
flex-basis: 20%;
|
||||
line-height: 1.5em;
|
||||
align-content: center;
|
||||
|
||||
flex-basis: 20%;
|
||||
line-height: 1.5em;
|
||||
align-content: center;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* override of popover internal stuff */
|
||||
.popover-trigger-button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.popover-trigger {
|
||||
padding: 10px;
|
||||
margin: -10px;
|
||||
|
||||
&:hover .svg-inline--fa {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
&:hover {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-reaction-button {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -10,8 +10,7 @@ const registration = {
|
||||
fullname: '',
|
||||
username: '',
|
||||
password: '',
|
||||
confirm: '',
|
||||
reason: ''
|
||||
confirm: ''
|
||||
},
|
||||
captcha: {}
|
||||
}),
|
||||
@@ -25,8 +24,7 @@ const registration = {
|
||||
confirm: {
|
||||
required,
|
||||
sameAsPassword: sameAs('password')
|
||||
},
|
||||
reason: { required: requiredIf(() => this.accountApprovalRequired) }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -40,10 +38,7 @@ const registration = {
|
||||
computed: {
|
||||
token () { return this.$route.params.token },
|
||||
bioPlaceholder () {
|
||||
return this.replaceNewlines(this.$t('registration.bio_placeholder'))
|
||||
},
|
||||
reasonPlaceholder () {
|
||||
return this.replaceNewlines(this.$t('registration.reason_placeholder'))
|
||||
return this.$t('registration.bio_placeholder').replace(/\s*\n\s*/g, ' \n')
|
||||
},
|
||||
...mapState({
|
||||
registrationOpen: (state) => state.instance.registrationOpen,
|
||||
@@ -51,8 +46,7 @@ const registration = {
|
||||
isPending: (state) => state.users.signUpPending,
|
||||
serverValidationErrors: (state) => state.users.signUpErrors,
|
||||
termsOfService: (state) => state.instance.tos,
|
||||
accountActivationRequired: (state) => state.instance.accountActivationRequired,
|
||||
accountApprovalRequired: (state) => state.instance.accountApprovalRequired
|
||||
accountActivationRequired: (state) => state.instance.accountActivationRequired
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@@ -79,9 +73,6 @@ const registration = {
|
||||
},
|
||||
setCaptcha () {
|
||||
this.getCaptcha().then(cpt => { this.captcha = cpt })
|
||||
},
|
||||
replaceNewlines (str) {
|
||||
return str.replace(/\s*\n\s*/g, ' \n')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -162,23 +162,6 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="accountApprovalRequired"
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
class="form--label"
|
||||
for="reason"
|
||||
>{{ $t('registration.reason') }}</label>
|
||||
<textarea
|
||||
id="reason"
|
||||
v-model="user.reason"
|
||||
:disabled="isPending"
|
||||
class="form-control"
|
||||
:placeholder="reasonPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="captcha.type != 'none'"
|
||||
id="captcha-group"
|
||||
@@ -228,9 +211,9 @@
|
||||
<button
|
||||
:disabled="isPending"
|
||||
type="submit"
|
||||
class="btn button-default"
|
||||
class="btn btn-default"
|
||||
>
|
||||
{{ $t('registration.register') }}
|
||||
{{ $t('general.submit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
>
|
||||
<button
|
||||
click="submit"
|
||||
class="button-default remote-button"
|
||||
class="remote-button"
|
||||
>
|
||||
{{ $t('user_card.remote_follow') }}
|
||||
</button>
|
||||
|
||||
@@ -1,28 +1,20 @@
|
||||
<template>
|
||||
<div class="ReplyButton">
|
||||
<button
|
||||
<div>
|
||||
<FAIcon
|
||||
v-if="loggedIn"
|
||||
class="button-unstyled interactive"
|
||||
:class="{'-active': replying}"
|
||||
class="ReplyButton fa-scale-110 fa-old-padding -interactive"
|
||||
icon="reply"
|
||||
:title="$t('tool_tip.reply')"
|
||||
:class="{'-active': replying}"
|
||||
@click.prevent="$emit('toggle')"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="reply"
|
||||
/>
|
||||
</button>
|
||||
<span v-else>
|
||||
<FAIcon
|
||||
icon="reply"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
:title="$t('tool_tip.reply')"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="status.replies_count > 0"
|
||||
class="action-counter"
|
||||
>
|
||||
/>
|
||||
<FAIcon
|
||||
v-else
|
||||
icon="reply"
|
||||
class="ReplyButton fa-scale-110 fa-old-padding"
|
||||
:title="$t('tool_tip.reply')"
|
||||
/>
|
||||
<span v-if="status.replies_count > 0">
|
||||
{{ status.replies_count }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -34,25 +26,14 @@
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.ReplyButton {
|
||||
display: flex;
|
||||
&.-interactive {
|
||||
cursor: pointer;
|
||||
|
||||
> :first-child {
|
||||
padding: 10px;
|
||||
margin: -10px -8px -10px -10px;
|
||||
}
|
||||
|
||||
.action-counter {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.interactive {
|
||||
&:hover .svg-inline--fa,
|
||||
&.-active .svg-inline--fa {
|
||||
&:hover,
|
||||
&.-active {
|
||||
color: $fallback--cBlue;
|
||||
color: var(--cBlue, $fallback--cBlue);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -24,6 +24,11 @@ const RetweetButton = {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return {
|
||||
'-repeated': this.status.repeated
|
||||
}
|
||||
},
|
||||
mergedConfig () {
|
||||
return this.$store.getters.mergedConfig
|
||||
}
|
||||
|
||||
@@ -1,38 +1,33 @@
|
||||
<template>
|
||||
<div class="RetweetButton">
|
||||
<button
|
||||
v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
|
||||
class="button-unstyled interactive"
|
||||
:class="status.repeated && '-repeated'"
|
||||
:title="$t('tool_tip.repeat')"
|
||||
@click.prevent="retweet()"
|
||||
>
|
||||
<div v-if="loggedIn">
|
||||
<template v-if="visibility !== 'private' && visibility !== 'direct'">
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
:class="classes"
|
||||
class="RetweetButton fa-scale-110 fa-old-padding -interactive"
|
||||
icon="retweet"
|
||||
:spin="animated"
|
||||
:title="$t('tool_tip.repeat')"
|
||||
@click.prevent="retweet()"
|
||||
/>
|
||||
</button>
|
||||
<span v-else-if="loggedIn">
|
||||
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
:class="classes"
|
||||
class="RetweetButton fa-scale-110 fa-old-padding"
|
||||
icon="lock"
|
||||
:title="$t('timeline.no_retweet_hint')"
|
||||
/>
|
||||
</span>
|
||||
<span v-else>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="retweet"
|
||||
:title="$t('tool_tip.repeat')"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
|
||||
class="no-event"
|
||||
>
|
||||
{{ status.repeat_num }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else-if="!loggedIn">
|
||||
<FAIcon
|
||||
:class="classes"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="retweet"
|
||||
:title="$t('tool_tip.repeat')"
|
||||
/>
|
||||
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -42,28 +37,19 @@
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.RetweetButton {
|
||||
display: flex;
|
||||
&.-interactive {
|
||||
cursor: pointer;
|
||||
animation-duration: 0.6s;
|
||||
|
||||
> :first-child {
|
||||
padding: 10px;
|
||||
margin: -10px -8px -10px -10px;
|
||||
}
|
||||
|
||||
.action-counter {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.interactive {
|
||||
.svg-inline--fa {
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
||||
&:hover .svg-inline--fa,
|
||||
&.-repeated .svg-inline--fa {
|
||||
&:hover {
|
||||
color: $fallback--cGreen;
|
||||
color: var(--cGreen, $fallback--cGreen);
|
||||
}
|
||||
}
|
||||
|
||||
&.-repeated {
|
||||
color: $fallback--cGreen;
|
||||
color: var(--cGreen, $fallback--cGreen);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,58 +3,54 @@
|
||||
v-if="!showNothing"
|
||||
class="ScopeSelector"
|
||||
>
|
||||
<button
|
||||
<span
|
||||
v-if="showDirect"
|
||||
class="button-unstyled scope"
|
||||
class="scope"
|
||||
:class="css.direct"
|
||||
:title="$t('post_status.scope.direct')"
|
||||
type="button"
|
||||
@click="changeVis('direct')"
|
||||
>
|
||||
<FAIcon
|
||||
icon="envelope"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
</span>
|
||||
<span
|
||||
v-if="showPrivate"
|
||||
class="button-unstyled scope"
|
||||
class="scope"
|
||||
:class="css.private"
|
||||
:title="$t('post_status.scope.private')"
|
||||
type="button"
|
||||
@click="changeVis('private')"
|
||||
>
|
||||
<FAIcon
|
||||
icon="lock"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
</span>
|
||||
<span
|
||||
v-if="showUnlisted"
|
||||
class="button-unstyled scope"
|
||||
class="scope"
|
||||
:class="css.unlisted"
|
||||
:title="$t('post_status.scope.unlisted')"
|
||||
type="button"
|
||||
@click="changeVis('unlisted')"
|
||||
>
|
||||
<FAIcon
|
||||
icon="lock-open"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
</span>
|
||||
<span
|
||||
v-if="showPublic"
|
||||
class="button-unstyled scope"
|
||||
class="scope"
|
||||
:class="css.public"
|
||||
:title="$t('post_status.scope.public')"
|
||||
type="button"
|
||||
@click="changeVis('public')"
|
||||
>
|
||||
<FAIcon
|
||||
icon="globe"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -14,8 +14,7 @@
|
||||
@keyup.enter="newQuery(searchTerm)"
|
||||
>
|
||||
<button
|
||||
class="btn button-default search-button"
|
||||
type="submit"
|
||||
class="btn search-button"
|
||||
@click="newQuery(searchTerm)"
|
||||
>
|
||||
<FAIcon icon="search" />
|
||||
|
||||
@@ -3,19 +3,17 @@
|
||||
class="SearchBar"
|
||||
:class="{ '-expanded': !hidden }"
|
||||
>
|
||||
<button
|
||||
<a
|
||||
v-if="hidden"
|
||||
class="button-unstyled nav-icon"
|
||||
href="#"
|
||||
class="nav-icon"
|
||||
:title="$t('nav.search')"
|
||||
type="button"
|
||||
><FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="search"
|
||||
@click.prevent.stop="toggleHidden"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="search"
|
||||
/>
|
||||
</button>
|
||||
/></a>
|
||||
<template v-else>
|
||||
<input
|
||||
id="search-bar-input"
|
||||
@@ -27,8 +25,7 @@
|
||||
@keyup.enter="find(searchTerm)"
|
||||
>
|
||||
<button
|
||||
class="button-default search-button"
|
||||
type="submit"
|
||||
class="btn search-button"
|
||||
@click="find(searchTerm)"
|
||||
>
|
||||
<FAIcon
|
||||
@@ -36,17 +33,14 @@
|
||||
icon="search"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="button-unstyled cancel-search"
|
||||
type="button"
|
||||
@click.prevent.stop="toggleHidden"
|
||||
>
|
||||
<span>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="times"
|
||||
class="cancel-icon fa-scale-110 fa-old-padding"
|
||||
@click.prevent.stop="toggleHidden"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -75,11 +69,8 @@
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.cancel-search {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.cancel-icon {
|
||||
cursor: pointer;
|
||||
color: $fallback--text;
|
||||
color: var(--btnTopBarText, $fallback--text);
|
||||
}
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faChevronDown
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faChevronDown
|
||||
)
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
},
|
||||
props: [
|
||||
'value',
|
||||
'disabled',
|
||||
'unstyled',
|
||||
'kind'
|
||||
]
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
|
||||
<template>
|
||||
<label
|
||||
class="Select input"
|
||||
:class="{ disabled, unstyled }"
|
||||
>
|
||||
<select
|
||||
:disabled="disabled"
|
||||
:value="value"
|
||||
@change="$emit('change', $event.target.value)"
|
||||
>
|
||||
<slot />
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script src="./select.js"> </script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.Select {
|
||||
padding: 0;
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $fallback--text;
|
||||
color: var(--inputText, --text, $fallback--text);
|
||||
margin: 0;
|
||||
padding: 0 2em 0 .2em;
|
||||
font-family: sans-serif;
|
||||
font-family: var(--inputFont, sans-serif);
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
height: 28px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.select-down-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 5px;
|
||||
height: 100%;
|
||||
color: $fallback--text;
|
||||
color: var(--inputText, $fallback--text);
|
||||
line-height: 28px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -24,7 +24,10 @@
|
||||
:items="items"
|
||||
:get-key="getKey"
|
||||
>
|
||||
<template v-slot:item="{item}">
|
||||
<template
|
||||
slot="item"
|
||||
slot-scope="{item}"
|
||||
>
|
||||
<div
|
||||
class="selectable-list-item-inner"
|
||||
:class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
|
||||
@@ -41,7 +44,7 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:empty>
|
||||
<template slot="empty">
|
||||
<slot name="empty" />
|
||||
</template>
|
||||
</List>
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import { get, set } from 'lodash'
|
||||
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
||||
import ModifiedIndicator from './modified_indicator.vue'
|
||||
export default {
|
||||
components: {
|
||||
Checkbox,
|
||||
ModifiedIndicator
|
||||
},
|
||||
props: [
|
||||
'path',
|
||||
'disabled'
|
||||
],
|
||||
computed: {
|
||||
pathDefault () {
|
||||
const [firstSegment, ...rest] = this.path.split('.')
|
||||
return [firstSegment + 'DefaultValue', ...rest].join('.')
|
||||
},
|
||||
state () {
|
||||
const value = get(this.$parent, this.path)
|
||||
if (value === undefined) {
|
||||
return this.defaultState
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
},
|
||||
defaultState () {
|
||||
return get(this.$parent, this.pathDefault)
|
||||
},
|
||||
isChanged () {
|
||||
return this.state !== this.defaultState
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update (e) {
|
||||
set(this.$parent, this.path, e)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<label
|
||||
class="BooleanSetting"
|
||||
>
|
||||
<Checkbox
|
||||
:checked="state"
|
||||
:disabled="disabled"
|
||||
@change="update"
|
||||
>
|
||||
<span
|
||||
v-if="!!$slots.default"
|
||||
class="label"
|
||||
>
|
||||
<slot />
|
||||
</span>
|
||||
<ModifiedIndicator :changed="isChanged" />
|
||||
</Checkbox>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script src="./boolean_setting.js"></script>
|
||||
@@ -1,39 +0,0 @@
|
||||
import { get, set } from 'lodash'
|
||||
import Select from 'src/components/select/select.vue'
|
||||
import ModifiedIndicator from './modified_indicator.vue'
|
||||
export default {
|
||||
components: {
|
||||
Select,
|
||||
ModifiedIndicator
|
||||
},
|
||||
props: [
|
||||
'path',
|
||||
'disabled',
|
||||
'options'
|
||||
],
|
||||
computed: {
|
||||
pathDefault () {
|
||||
const [firstSegment, ...rest] = this.path.split('.')
|
||||
return [firstSegment + 'DefaultValue', ...rest].join('.')
|
||||
},
|
||||
state () {
|
||||
const value = get(this.$parent, this.path)
|
||||
if (value === undefined) {
|
||||
return this.defaultState
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
},
|
||||
defaultState () {
|
||||
return get(this.$parent, this.pathDefault)
|
||||
},
|
||||
isChanged () {
|
||||
return this.state !== this.defaultState
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update (e) {
|
||||
set(this.$parent, this.path, e)
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user