Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

update with develop

Browse source
This commit is contained in:
Shpuld Shpuldson 2021-03-02 10:05:12 +02:00
commit 2b02e61c30
164 changed files with 10142 additions and 2741 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.mailmap Normal file
View file

@ -0,0 +1 @@
rinpatch <rin@patch.cx> <rinpatch@sdf.org>

67
CHANGELOG.md
View file

@ -3,11 +3,72 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased] ## [Unreleased]
### Fixed ### Fixed
- Fixed regression in react popup alignment and overflowing - 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
- 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
### Added
- Added reason field for registration when approval is required
- Added a quick settings to timeline header for easier access
- Added option to mark posts as sensitive by default
## [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
### Changed
- Don't filter own posts when they hit your wordfilter
- Language picker now uses native language names
## [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
- Group staff members by role in the About page
### Fixed
- Fixed the occasional bug where screen would scroll 1px when typing into a reply form - 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 ## [2.2.0] - 2020-11-06
@ -17,6 +78,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Import/export a muted users - Import/export a muted users
- Proper handling of deletes when using websocket streaming - 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 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
- Fixed clicking NSFW hider through status popover - Fixed clicking NSFW hider through status popover

1
index.html
View file

@ -3,7 +3,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<title>Pleroma</title>
<!--server-generated-meta--> <!--server-generated-meta-->
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
</head> </head>

5
package.json
View file

@ -31,6 +31,7 @@
"parse-link-header": "^1.0.1", "parse-link-header": "^1.0.1",
"phoenix": "^1.3.0", "phoenix": "^1.3.0",
"portal-vue": "^2.1.4", "portal-vue": "^2.1.4",
"punycode.js": "^2.1.0",
"v-click-outside": "^2.1.1", "v-click-outside": "^2.1.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-chat-scroll": "^1.2.1", "vue-chat-scroll": "^1.2.1",
@ -55,7 +56,7 @@
"babel-plugin-lodash": "^3.3.4", "babel-plugin-lodash": "^3.3.4",
"chai": "^3.5.0", "chai": "^3.5.0",
"chalk": "^1.1.3", "chalk": "^1.1.3",
"chromedriver": "^2.21.2", "chromedriver": "^87.0.1",
"connect-history-api-fallback": "^1.1.0", "connect-history-api-fallback": "^1.1.0",
"cross-spawn": "^4.0.2", "cross-spawn": "^4.0.2",
"css-loader": "^0.28.0", "css-loader": "^0.28.0",
@ -102,7 +103,7 @@
"selenium-server": "2.53.1", "selenium-server": "2.53.1",
"semver": "^5.3.0", "semver": "^5.3.0",
"serviceworker-webpack-plugin": "^1.0.0", "serviceworker-webpack-plugin": "^1.0.0",
"shelljs": "^0.7.4", "shelljs": "^0.8.4",
"sinon": "^2.1.0", "sinon": "^2.1.0",
"sinon-chai": "^2.8.0", "sinon-chai": "^2.8.0",
"stylelint": "^13.6.1", "stylelint": "^13.6.1",

19
src/App.js
View file

@ -15,6 +15,7 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
import PostStatusModal from './components/post_status_modal/post_status_modal.vue' import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
import { windowWidth, windowHeight } from './services/window_utils/window_utils' import { windowWidth, windowHeight } from './services/window_utils/window_utils'
import { mapGetters } from 'vuex'
export default { export default {
name: 'app', name: 'app',
@ -50,18 +51,19 @@ export default {
}, },
computed: { computed: {
currentUser () { return this.$store.state.users.currentUser }, currentUser () { return this.$store.state.users.currentUser },
background () { userBackground () { return this.currentUser.background_image },
return this.currentUser.background_image || this.$store.state.instance.background instanceBackground () {
return this.mergedConfig.hideInstanceWallpaper
? null
: this.$store.state.instance.background
}, },
background () { return this.userBackground || this.instanceBackground },
bgStyle () { bgStyle () {
return { if (this.background) {
'background-image': `url(${this.background})`
}
},
bgAppStyle () {
return { return {
'--body-background-image': `url(${this.background})` '--body-background-image': `url(${this.background})`
} }
}
}, },
chat () { return this.$store.state.chat.channel.state === 'joined' }, chat () { return this.$store.state.chat.channel.state === 'joined' },
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
@ -77,7 +79,8 @@ export default {
return { return {
'order': this.$store.state.instance.sidebarRight ? 99 : 0 'order': this.$store.state.instance.sidebarRight ? 99 : 0
} }
} },
...mapGetters(['mergedConfig'])
}, },
methods: { methods: {
updateMobileState () { updateMobileState () {

86
src/App.scss
View file

@ -14,7 +14,9 @@
right: -20px; right: -20px;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 50%; background-color: var(--wallpaper);
background-image: var(--body-background-image);
background-position: 50% 50px;
} }
i[class^='icon-'] { i[class^='icon-'] {
@ -33,6 +35,7 @@ h4 {
max-width: 980px; max-width: 980px;
align-content: flex-start; align-content: flex-start;
} }
.underlay { .underlay {
background-color: rgba(0,0,0,0.15); background-color: rgba(0,0,0,0.15);
background-color: var(--underlay, rgba(0,0,0,0.15)); background-color: var(--underlay, rgba(0,0,0,0.15));
@ -69,7 +72,7 @@ a {
color: var(--link, $fallback--link); color: var(--link, $fallback--link);
} }
button { .button-default {
user-select: none; user-select: none;
color: $fallback--text; color: $fallback--text;
color: var(--btnText, $fallback--text); color: var(--btnText, $fallback--text);
@ -85,7 +88,8 @@ button {
font-family: sans-serif; font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif); font-family: var(--interfaceFont, sans-serif);
i[class*=icon-], .svg-inline--fa { i[class*=icon-],
.svg-inline--fa {
color: $fallback--text; color: $fallback--text;
color: var(--btnText, $fallback--text); color: var(--btnText, $fallback--text);
} }
@ -107,7 +111,8 @@ button {
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg); background-color: var(--btnPressed, $fallback--fg);
svg, i { svg,
i {
color: $fallback--text; color: $fallback--text;
color: var(--btnPressedText, $fallback--text); color: var(--btnPressedText, $fallback--text);
} }
@ -120,7 +125,8 @@ button {
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg); background-color: var(--btnDisabled, $fallback--fg);
svg, i { svg,
i {
color: $fallback--text; color: $fallback--text;
color: var(--btnDisabledText, $fallback--text); color: var(--btnDisabledText, $fallback--text);
} }
@ -134,7 +140,8 @@ button {
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: 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); box-shadow: var(--buttonPressedShadow);
svg, i { svg,
i {
color: $fallback--text; color: $fallback--text;
color: var(--btnToggledText, $fallback--text); color: var(--btnToggledText, $fallback--text);
} }
@ -149,6 +156,37 @@ button {
} }
} }
.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, .select, .input { input, textarea, .select, .input {
&.unstyled { &.unstyled {
@ -303,6 +341,10 @@ input, textarea, .select, .input {
box-sizing: border-box; box-sizing: border-box;
} }
} }
&.resize-height {
resize: vertical;
}
} }
option { option {
@ -442,6 +484,7 @@ main-router {
color: $fallback--faint; color: $fallback--faint;
color: var(--panelFaint, $fallback--faint); color: var(--panelFaint, $fallback--faint);
} }
.faint-link { .faint-link {
color: $fallback--faint; color: $fallback--faint;
color: var(--faintLink, $fallback--faint); color: var(--faintLink, $fallback--faint);
@ -453,11 +496,8 @@ main-router {
overflow-x: hidden; overflow-x: hidden;
} }
button { .button-default,
flex-shrink: 0; .alert {
}
button, .alert {
// height: 100%; // height: 100%;
line-height: 21px; line-height: 21px;
min-height: 0; min-height: 0;
@ -468,8 +508,11 @@ main-router {
align-self: stretch; align-self: stretch;
} }
button { .button-default {
&, i[class*=icon-] { flex-shrink: 0;
&,
i[class*=icon-] {
color: $fallback--text; color: $fallback--text;
color: var(--btnPanelText, $fallback--text); color: var(--btnPanelText, $fallback--text);
} }
@ -492,7 +535,8 @@ main-router {
} }
} }
a { a,
.-link {
color: $fallback--link; color: $fallback--link;
color: var(--panelLink, $fallback--link) color: var(--panelLink, $fallback--link)
} }
@ -507,15 +551,15 @@ main-router {
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
.faint { .faint {
color: $fallback--faint; color: $fallback--faint;
color: var(--panelFaint, $fallback--faint); color: var(--panelFaint, $fallback--faint);
} }
a { a,
.-link {
color: $fallback--link; color: $fallback--link;
color: var(--panelLink, $fallback--link) color: var(--panelLink, $fallback--link);
} }
} }
@ -542,6 +586,7 @@ nav {
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
box-shadow: 0px 0px 4px rgba(0,0,0,.6); box-shadow: 0px 0px 4px rgba(0,0,0,.6);
box-shadow: var(--topBarShadow); box-shadow: var(--topBarShadow);
box-sizing: border-box;
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
@ -797,7 +842,7 @@ nav {
} }
} }
.btn.btn-default { .btn.button-default {
min-height: 28px; min-height: 28px;
} }
@ -834,6 +879,11 @@ nav {
overflow: hidden; overflow: hidden;
height: 100%; 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. // 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. // Prevents the mobile browser bars from overlapping or hiding the message posting form.
@media all and (max-width: 800px) { @media all and (max-width: 800px) {

3
src/App.vue
View file

@ -1,12 +1,11 @@
<template> <template>
<div <div
id="app" id="app"
:style="bgAppStyle" :style="bgStyle"
> >
<div <div
id="app_bg_wrapper" id="app_bg_wrapper"
class="app-bg-wrapper" class="app-bg-wrapper"
:style="bgStyle"
/> />
<MobileNav v-if="isMobileLayout" /> <MobileNav v-if="isMobileLayout" />
<DesktopNav v-else /> <DesktopNav v-else />

4
src/boot/after_store.js
View file

@ -7,6 +7,7 @@ import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
import { applyTheme } from '../services/style_setter/style_setter.js' import { applyTheme } from '../services/style_setter/style_setter.js'
import FaviconService from '../services/favicon_service/favicon_service.js'
let staticInitialResults = null let staticInitialResults = null
@ -50,6 +51,7 @@ const getInstanceConfig = async ({ store }) => {
const vapidPublicKey = data.pleroma.vapid_public_key const vapidPublicKey = data.pleroma.vapid_public_key
store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit }) store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
if (vapidPublicKey) { if (vapidPublicKey) {
store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey }) store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
@ -326,6 +328,8 @@ const afterStoreSetup = async ({ store, i18n }) => {
const width = windowWidth() const width = windowWidth()
store.dispatch('setMobileLayout', width <= 800) store.dispatch('setMobileLayout', width <= 800)
FaviconService.initFaviconService()
const overrides = window.___pleromafe_dev_overrides || {} const overrides = window.___pleromafe_dev_overrides || {}
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
store.dispatch('setInstanceOption', { name: 'server', value: server }) store.dispatch('setInstanceOption', { name: 'server', value: server })

2
src/components/account_actions/account_actions.js
View file

@ -35,7 +35,7 @@ const AccountActions = {
this.$store.dispatch('unblockUser', this.user.id) this.$store.dispatch('unblockUser', this.user.id)
}, },
reportUser () { reportUser () {
this.$store.dispatch('openUserReportingModal', this.user.id) this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
}, },
openChat () { openChat () {
this.$router.push({ this.$router.push({

15
src/components/account_actions/account_actions.vue
View file

@ -4,6 +4,7 @@
trigger="click" trigger="click"
placement="bottom" placement="bottom"
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding
> >
<div <div
slot="content" slot="content"
@ -13,14 +14,14 @@
<template v-if="relationship.following"> <template v-if="relationship.following">
<button <button
v-if="relationship.showing_reblogs" v-if="relationship.showing_reblogs"
class="btn btn-default dropdown-item" class="btn button-default dropdown-item"
@click="hideRepeats" @click="hideRepeats"
> >
{{ $t('user_card.hide_repeats') }} {{ $t('user_card.hide_repeats') }}
</button> </button>
<button <button
v-if="!relationship.showing_reblogs" v-if="!relationship.showing_reblogs"
class="btn btn-default dropdown-item" class="btn button-default dropdown-item"
@click="showRepeats" @click="showRepeats"
> >
{{ $t('user_card.show_repeats') }} {{ $t('user_card.show_repeats') }}
@ -32,27 +33,27 @@
</template> </template>
<button <button
v-if="relationship.blocking" v-if="relationship.blocking"
class="btn btn-default btn-block dropdown-item" class="btn button-default btn-block dropdown-item"
@click="unblockUser" @click="unblockUser"
> >
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
</button> </button>
<button <button
v-else v-else
class="btn btn-default btn-block dropdown-item" class="btn button-default btn-block dropdown-item"
@click="blockUser" @click="blockUser"
> >
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
</button> </button>
<button <button
class="btn btn-default btn-block dropdown-item" class="btn button-default btn-block dropdown-item"
@click="reportUser" @click="reportUser"
> >
{{ $t('user_card.report') }} {{ $t('user_card.report') }}
</button> </button>
<button <button
v-if="pleromaChatMessagesAvailable" v-if="pleromaChatMessagesAvailable"
class="btn btn-default btn-block dropdown-item" class="btn button-default btn-block dropdown-item"
@click="openChat" @click="openChat"
> >
{{ $t('user_card.message') }} {{ $t('user_card.message') }}
@ -61,7 +62,7 @@
</div> </div>
<div <div
slot="trigger" slot="trigger"
class="btn btn-default ellipsis-button" class="ellipsis-button"
> >
<FAIcon <FAIcon
class="icon" class="icon"

2
src/components/async_component_error/async_component_error.vue
View file

@ -8,7 +8,7 @@
{{ $t('general.error_retry') }} {{ $t('general.error_retry') }}
</p> </p>
<button <button
class="btn" class="btn button-default"
@click="retry" @click="retry"
> >
{{ $t('general.retry') }} {{ $t('general.retry') }}

8
src/components/attachment/attachment.js
View file

@ -8,14 +8,18 @@ import {
faFile, faFile,
faMusic, faMusic,
faImage, faImage,
faVideo faVideo,
faPlayCircle,
faTimes
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faFile, faFile,
faMusic, faMusic,
faImage, faImage,
faVideo faVideo,
faPlayCircle,
faTimes
) )
const Attachment = { const Attachment = {

30
src/components/attachment/attachment.vue
View file

@ -42,15 +42,13 @@
icon="play-circle" icon="play-circle"
/> />
</a> </a>
<div <button
v-if="nsfw && hideNsfwLocal && !hidden" v-if="nsfw && hideNsfwLocal && !hidden"
class="hider" class="button-unstyled hider"
>
<a
href="#"
@click.prevent="toggleHidden" @click.prevent="toggleHidden"
>Hide</a> >
</div> <FAIcon icon="times" />
</button>
<a <a
v-if="type === 'image' && (!hidden || preloadImage)" v-if="type === 'image' && (!hidden || preloadImage)"
@ -234,15 +232,23 @@
.hider { .hider {
position: absolute; position: absolute;
right: 0; right: 0;
white-space: nowrap;
margin: 10px; margin: 10px;
padding: 5px; padding: 0;
background: rgba(230,230,230,0.6);
font-weight: bold;
z-index: 4; z-index: 4;
line-height: 1;
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $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 { video {

2
src/components/basic_user_card/basic_user_card.vue
View file

@ -42,7 +42,7 @@
class="basic-user-card-screen-name" class="basic-user-card-screen-name"
:to="userProfileLink(user)" :to="userProfileLink(user)"
> >
@{{ user.screen_name }} @{{ user.screen_name_ui }}
</router-link> </router-link>
</div> </div>
<slot /> <slot />

4
src/components/block_card/block_card.vue
View file

@ -3,7 +3,7 @@
<div class="block-card-content-container"> <div class="block-card-content-container">
<button <button
v-if="blocked" v-if="blocked"
class="btn btn-default" class="btn button-default"
:disabled="progress" :disabled="progress"
@click="unblockUser" @click="unblockUser"
> >
@ -16,7 +16,7 @@
</button> </button>
<button <button
v-else v-else
class="btn btn-default" class="btn button-default"
:disabled="progress" :disabled="progress"
@click="blockUser" @click="blockUser"
> >

10
src/components/chat/chat.js
View file

@ -73,7 +73,7 @@ const Chat = {
}, },
formPlaceholder () { formPlaceholder () {
if (this.recipient) { if (this.recipient) {
return this.$t('chats.message_user', { nickname: this.recipient.screen_name }) return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui })
} else { } else {
return '' return ''
} }
@ -234,6 +234,13 @@ const Chat = {
const scrollable = this.$refs.scrollable const scrollable = this.$refs.scrollable
return scrollable && scrollable.scrollTop <= 0 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 () { handleScroll: _.throttle(function () {
if (!this.currentChat) { return } if (!this.currentChat) { return }
@ -241,6 +248,7 @@ const Chat = {
this.fetchChat({ maxId: this.currentChatMessageService.minId }) this.fetchChat({ maxId: this.currentChatMessageService.minId })
} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) { } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
this.jumpToBottomButtonVisible = false this.jumpToBottomButtonVisible = false
this.cullOlderCheck()
if (this.newMessageCount > 0) { if (this.newMessageCount > 0) {
// Use a delay before marking as read to prevent situation where new messages // 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 // arrive just as you're leaving the view and messages that you didn't actually

6
src/components/chat/chat.scss
View file

@ -98,10 +98,10 @@
.unread-message-count { .unread-message-count {
font-size: 0.8em; font-size: 0.8em;
left: 50%; left: 50%;
transform: translate(-50%, 0);
border-radius: 100%;
margin-top: -1rem; margin-top: -1rem;
padding: 0; padding: 0.1em;
border-radius: 50px;
position: absolute;
} }
.chat-loading-error { .chat-loading-error {

5
src/components/chat_list/chat_list.vue
View file

@ -10,7 +10,10 @@
<span class="title"> <span class="title">
{{ $t("chats.chats") }} {{ $t("chats.chats") }}
</span> </span>
<button @click="newChat"> <button
class="button-default"
@click="newChat"
>
{{ $t("chats.new") }} {{ $t("chats.new") }}
</button> </button>
</div> </div>

3
src/components/chat_message/chat_message.scss
View file

@ -31,9 +31,6 @@
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
border-radius: $fallback--chatMessageRadius;
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
} }
.popover { .popover {

4
src/components/chat_message/chat_message.vue
View file

@ -53,7 +53,7 @@
<div slot="content"> <div slot="content">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click="deleteMessage" @click="deleteMessage"
> >
<FAIcon icon="times" /> {{ $t("chats.delete") }} <FAIcon icon="times" /> {{ $t("chats.delete") }}
@ -62,7 +62,7 @@
</div> </div>
<button <button
slot="trigger" slot="trigger"
class="menu-icon" class="button-default menu-icon"
:title="$t('chats.more')" :title="$t('chats.more')"
> >
<FAIcon icon="ellipsis-h" /> <FAIcon icon="ellipsis-h" />

4
src/components/chat_message_date/chat_message_date.vue
View file

@ -5,6 +5,8 @@
</template> </template>
<script> <script>
import localeService from 'src/services/locale/locale.service.js'
export default { export default {
name: 'Timeago', name: 'Timeago',
props: ['date'], props: ['date'],
@ -16,7 +18,7 @@ export default {
if (this.date.getTime() === today.getTime()) { if (this.date.getTime() === today.getTime()) {
return this.$t('display_date.today') return this.$t('display_date.today')
} else { } else {
return this.date.toLocaleDateString('en', { day: 'numeric', month: 'long' }) return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale), { day: 'numeric', month: 'long' })
} }
} }
} }

2
src/components/chat_title/chat_title.js
View file

@ -12,7 +12,7 @@ export default Vue.component('chat-title', {
], ],
computed: { computed: {
title () { title () {
return this.user ? this.user.screen_name : '' return this.user ? this.user.screen_name_ui : ''
}, },
htmlTitle () { htmlTitle () {
return this.user ? this.user.name_html : '' return this.user ? this.user.name_html : ''

19
src/components/conversation/conversation.vue
View file

@ -10,12 +10,13 @@
class="panel-heading conversation-heading" class="panel-heading conversation-heading"
> >
<span class="title"> {{ $t('timeline.conversation') }} </span> <span class="title"> {{ $t('timeline.conversation') }} </span>
<span v-if="collapsable"> <button
<a v-if="collapsable"
href="#" class="button-unstyled -link"
@click.prevent="toggleExpanded" @click.prevent="toggleExpanded"
>{{ $t('timeline.collapse') }}</a> >
</span> {{ $t('timeline.collapse') }}
</button>
</div> </div>
<status <status
v-for="status in conversation" v-for="status in conversation"
@ -49,7 +50,6 @@
.Conversation { .Conversation {
.conversation-status { .conversation-status {
border-left: none;
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border); border-bottom-color: var(--border, $fallback--border);
@ -57,13 +57,6 @@
} }
&.-expanded { &.-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 { .conversation-status:last-child {
border-bottom: none; border-bottom: none;
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;

11
src/components/desktop_nav/desktop_nav.scss
View file

@ -5,6 +5,10 @@
width: 100%; width: 100%;
position: fixed; position: fixed;
a {
color: var(--topBarLink, $fallback--link);
}
.inner-nav { .inner-nav {
display: grid; display: grid;
grid-template-rows: 50px; grid-template-rows: 50px;
@ -21,7 +25,7 @@
grid-template-areas: "logo sitename actions"; grid-template-areas: "logo sitename actions";
} }
button { .button-default {
&, svg { &, svg {
color: $fallback--text; color: $fallback--text;
color: var(--btnTopBarText, $fallback--text); color: var(--btnTopBarText, $fallback--text);
@ -80,13 +84,14 @@
.nav-icon { .nav-icon {
margin-left: 0.2em; margin-left: 0.2em;
width: 2em; width: 2em;
height: 100%;
text-align: center; text-align: center;
}
a, a svg { .svg-inline--fa {
color: $fallback--link; color: $fallback--link;
color: var(--topBarLink, $fallback--link); color: var(--topBarLink, $fallback--link);
} }
}
.sitename { .sitename {
grid-area: sitename; grid-area: sitename;

24
src/components/desktop_nav/desktop_nav.vue
View file

@ -36,9 +36,8 @@
@toggled="onSearchBarToggled" @toggled="onSearchBarToggled"
@click.stop.native @click.stop.native
/> />
<a <button
href="#" class="button-unstyled nav-icon"
class="nav-icon"
@click.stop="openSettingsModal" @click.stop="openSettingsModal"
> >
<FAIcon <FAIcon
@ -47,29 +46,32 @@
icon="cog" icon="cog"
:title="$t('nav.preferences')" :title="$t('nav.preferences')"
/> />
</a> </button>
<a <a
v-if="currentUser && currentUser.role === 'admin'" v-if="currentUser && currentUser.role === 'admin'"
href="/pleroma/admin/#/login-pleroma" href="/pleroma/admin/#/login-pleroma"
class="nav-icon" class="nav-icon"
target="_blank" target="_blank"
><FAIcon >
<FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="tachometer-alt" icon="tachometer-alt"
:title="$t('nav.administration')" :title="$t('nav.administration')"
/></a> />
<a </a>
<button
v-if="currentUser" v-if="currentUser"
href="#" class="button-unstyled nav-icon"
class="nav-icon"
@click.prevent="logout" @click.prevent="logout"
><FAIcon >
<FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="sign-out-alt" icon="sign-out-alt"
:title="$t('login.logout')" :title="$t('login.logout')"
/></a> />
</button>
</div> </div>
</div> </div>
</nav> </nav>

4
src/components/domain_mute_card/domain_mute_card.vue
View file

@ -6,7 +6,7 @@
<ProgressButton <ProgressButton
v-if="muted" v-if="muted"
:click="unmuteDomain" :click="unmuteDomain"
class="btn btn-default" class="btn button-default"
> >
{{ $t('domain_mute_card.unmute') }} {{ $t('domain_mute_card.unmute') }}
<template slot="progress"> <template slot="progress">
@ -16,7 +16,7 @@
<ProgressButton <ProgressButton
v-else v-else
:click="muteDomain" :click="muteDomain"
class="btn btn-default" class="btn button-default"
> >
{{ $t('domain_mute_card.mute') }} {{ $t('domain_mute_card.mute') }}
<template slot="progress"> <template slot="progress">

43
src/components/emoji_input/emoji_input.js
View file

@ -114,7 +114,8 @@ const EmojiInput = {
showPicker: false, showPicker: false,
temporarilyHideSuggestions: false, temporarilyHideSuggestions: false,
keepOpen: false, keepOpen: false,
disableClickOutside: false disableClickOutside: false,
suggestions: []
} }
}, },
components: { components: {
@ -124,21 +125,6 @@ const EmojiInput = {
padEmoji () { padEmoji () {
return this.$store.getters.mergedConfig.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 () { showSuggestions () {
return this.focused && return this.focused &&
this.suggestions && this.suggestions &&
@ -188,14 +174,38 @@ const EmojiInput = {
watch: { watch: {
showSuggestions: function (newValue) { showSuggestions: function (newValue) {
this.$emit('shown', 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: { methods: {
focusPickerInput () {
const pickerEl = this.$refs.picker.$el
if (!pickerEl) return
const pickerInput = pickerEl.querySelector('input')
if (pickerInput) pickerInput.focus()
},
triggerShowPicker () { triggerShowPicker () {
this.showPicker = true this.showPicker = true
this.$refs.picker.startEmojiLoad() this.$refs.picker.startEmojiLoad()
this.$nextTick(() => { this.$nextTick(() => {
this.scrollIntoView() this.scrollIntoView()
this.focusPickerInput()
}) })
// This temporarily disables "click outside" handler // This temporarily disables "click outside" handler
// since external trigger also means click originates // since external trigger also means click originates
@ -211,6 +221,7 @@ const EmojiInput = {
if (this.showPicker) { if (this.showPicker) {
this.scrollIntoView() this.scrollIntoView()
this.$refs.picker.startEmojiLoad() this.$refs.picker.startEmojiLoad()
this.$nextTick(this.focusPickerInput)
} }
}, },
replace (replacement) { replace (replacement) {

9
src/components/emoji_input/emoji_input.vue
View file

@ -6,13 +6,14 @@
> >
<slot /> <slot />
<template v-if="enableEmojiPicker"> <template v-if="enableEmojiPicker">
<div <button
v-if="!hideEmojiButton" v-if="!hideEmojiButton"
class="emoji-picker-icon" class="button-unstyled emoji-picker-icon"
type="button"
@click.prevent="togglePicker" @click.prevent="togglePicker"
> >
<FAIcon :icon="['far', 'smile-beam']" /> <FAIcon :icon="['far', 'smile-beam']" />
</div> </button>
<EmojiPicker <EmojiPicker
v-if="enableEmojiPicker" v-if="enableEmojiPicker"
ref="picker" ref="picker"
@ -37,7 +38,7 @@
v-for="(suggestion, index) in suggestions" v-for="(suggestion, index) in suggestions"
:key="index" :key="index"
class="autocomplete-item" class="autocomplete-item"
:class="{ highlighted: suggestion.highlighted }" :class="{ highlighted: index === highlighted }"
@click.stop.prevent="onClick($event, suggestion)" @click.stop.prevent="onClick($event, suggestion)"
> >
<span class="image"> <span class="image">

76
src/components/emoji_input/suggestor.js
View file

@ -1,4 +1,3 @@
import { debounce } from 'lodash'
/** /**
* suggest - generates a suggestor function to be used by emoji-input * suggest - generates a suggestor function to be used by emoji-input
* data: object providing source information for specific types of suggestions: * data: object providing source information for specific types of suggestions:
@ -11,19 +10,19 @@ import { debounce } from 'lodash'
* doesn't support user linking you can just provide only emoji. * doesn't support user linking you can just provide only emoji.
*/ */
const debounceUserSearch = debounce((data, input) => { export default data => {
data.updateUsersList(input) const emojiCurry = suggestEmoji(data.emoji)
}, 500) const usersCurry = data.store && suggestUsers(data.store)
return input => {
export default data => input => {
const firstChar = input[0] const firstChar = input[0]
if (firstChar === ':' && data.emoji) { if (firstChar === ':' && data.emoji) {
return suggestEmoji(data.emoji)(input) return emojiCurry(input)
} }
if (firstChar === '@' && data.users) { if (firstChar === '@' && usersCurry) {
return suggestUsers(data)(input) return usersCurry(input)
} }
return [] return []
}
} }
export const suggestEmoji = emojis => input => { export const suggestEmoji = emojis => input => {
@ -57,19 +56,46 @@ export const suggestEmoji = emojis => input => {
}) })
} }
export const suggestUsers = data => input => { export const suggestUsers = ({ dispatch, state }) => {
const noPrefix = input.toLowerCase().substr(1) // Keep some persistent values in closure, most importantly for the
const users = data.users // custom debounce to work. Lodash debounce does not return a promise.
let suggestions = []
let previousQuery = ''
let timeout = null
let cancelUserSearch = null
const newUsers = users.filter( 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 =>
user.screen_name.toLowerCase().startsWith(noPrefix) || user.screen_name.toLowerCase().startsWith(noPrefix) ||
user.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) => { ).slice(0, 20).sort((a, b) => {
let aScore = 0 let aScore = 0
let bScore = 0 let bScore = 0
@ -90,17 +116,15 @@ export const suggestUsers = data => input => {
return diff + nameAlphabetically + screenNameAlphabetically return diff + nameAlphabetically + screenNameAlphabetically
/* eslint-disable camelcase */ /* eslint-disable camelcase */
}).map(({ screen_name, name, profile_image_url_original }) => ({ }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
displayText: screen_name, displayText: screen_name_ui,
detailText: name, detailText: name,
imageUrl: profile_image_url_original, imageUrl: profile_image_url_original,
replacement: '@' + screen_name + ' ' replacement: '@' + screen_name + ' '
})) }))
// BE search users to get more comprehensive results
if (data.updateUsersList) {
debounceUserSearch(data, noPrefix)
}
return newUsers
/* eslint-enable camelcase */ /* eslint-enable camelcase */
suggestions = newSuggestions || []
return suggestions
}
} }

2
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -6,7 +6,7 @@
:users="accountsForEmoji[reaction.name]" :users="accountsForEmoji[reaction.name]"
> >
<button <button
class="emoji-reaction btn btn-default" class="emoji-reaction btn button-default"
:class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }" :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
@click="emojiOnClick(reaction.name, $event)" @click="emojiOnClick(reaction.name, $event)"
@mouseenter="fetchEmojiReactionsByIfMissing()" @mouseenter="fetchEmojiReactionsByIfMissing()"

4
src/components/export_import/export_import.vue
View file

@ -2,13 +2,13 @@
<div class="import-export-container"> <div class="import-export-container">
<slot name="before" /> <slot name="before" />
<button <button
class="btn" class="btn button-default"
@click="exportData" @click="exportData"
> >
{{ exportLabel }} {{ exportLabel }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="importData" @click="importData"
> >
{{ importLabel }} {{ importLabel }}

2
src/components/exporter/exporter.vue
View file

@ -11,7 +11,7 @@
</div> </div>
<button <button
v-else v-else
class="btn btn-default" class="btn button-default"
@click="process" @click="process"
> >
{{ exportButtonLabel }} {{ exportButtonLabel }}

13
src/components/extra_buttons/extra_buttons.js
View file

@ -5,10 +5,12 @@ import {
faBookmark, faBookmark,
faEyeSlash, faEyeSlash,
faThumbtack, faThumbtack,
faShareAlt faShareAlt,
faExternalLinkAlt
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { import {
faBookmark as faBookmarkReg faBookmark as faBookmarkReg,
faFlag
} from '@fortawesome/free-regular-svg-icons' } from '@fortawesome/free-regular-svg-icons'
library.add( library.add(
@ -17,7 +19,9 @@ library.add(
faBookmarkReg, faBookmarkReg,
faEyeSlash, faEyeSlash,
faThumbtack, faThumbtack,
faShareAlt faShareAlt,
faExternalLinkAlt,
faFlag
) )
const ExtraButtons = { const ExtraButtons = {
@ -64,6 +68,9 @@ const ExtraButtons = {
this.$store.dispatch('unbookmark', { id: this.status.id }) this.$store.dispatch('unbookmark', { id: this.status.id })
.then(() => this.$emit('onSuccess')) .then(() => this.$emit('onSuccess'))
.catch(err => this.$emit('onError', err.error.error)) .catch(err => this.$emit('onError', err.error.error))
},
reportStatus () {
this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
} }
}, },
computed: { computed: {

68
src/components/extra_buttons/extra_buttons.vue
View file

@ -1,9 +1,11 @@
<template> <template>
<Popover <Popover
class="ExtraButtons"
trigger="click" trigger="click"
placement="top" placement="top"
class="extra-button-popover" :offset="{ y: 5 }"
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding
> >
<div <div
slot="content" slot="content"
@ -12,7 +14,7 @@
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
v-if="canMute && !status.thread_muted" v-if="canMute && !status.thread_muted"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="muteConversation" @click.prevent="muteConversation"
> >
<FAIcon <FAIcon
@ -22,7 +24,7 @@
</button> </button>
<button <button
v-if="canMute && status.thread_muted" v-if="canMute && status.thread_muted"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="unmuteConversation" @click.prevent="unmuteConversation"
> >
<FAIcon <FAIcon
@ -32,7 +34,7 @@
</button> </button>
<button <button
v-if="!status.pinned && canPin" v-if="!status.pinned && canPin"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="pinStatus" @click.prevent="pinStatus"
@click="close" @click="close"
> >
@ -43,7 +45,7 @@
</button> </button>
<button <button
v-if="status.pinned && canPin" v-if="status.pinned && canPin"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="unpinStatus" @click.prevent="unpinStatus"
@click="close" @click="close"
> >
@ -54,7 +56,7 @@
</button> </button>
<button <button
v-if="!status.bookmarked" v-if="!status.bookmarked"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="bookmarkStatus" @click.prevent="bookmarkStatus"
@click="close" @click="close"
> >
@ -65,7 +67,7 @@
</button> </button>
<button <button
v-if="status.bookmarked" v-if="status.bookmarked"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="unbookmarkStatus" @click.prevent="unbookmarkStatus"
@click="close" @click="close"
> >
@ -76,7 +78,7 @@
</button> </button>
<button <button
v-if="canDelete" v-if="canDelete"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="deleteStatus" @click.prevent="deleteStatus"
@click="close" @click="close"
> >
@ -86,7 +88,7 @@
/><span>{{ $t("status.delete") }}</span> /><span>{{ $t("status.delete") }}</span>
</button> </button>
<button <button
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="copyLink" @click.prevent="copyLink"
@click="close" @click="close"
> >
@ -95,11 +97,36 @@
icon="share-alt" icon="share-alt"
/><span>{{ $t("status.copy_link") }}</span> /><span>{{ $t("status.copy_link") }}</span>
</button> </button>
</div> <a
</div> v-if="!status.is_local"
<span slot="trigger"> class="button-default dropdown-item dropdown-item-icon"
title="Source"
:href="status.external_url"
target="_blank"
>
<FAIcon <FAIcon
class="ExtraButtons fa-scale-110 fa-old-padding" 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>
</div>
<span
slot="trigger"
class="popover-trigger"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="ellipsis-h" icon="ellipsis-h"
/> />
</span> </span>
@ -112,13 +139,20 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.ExtraButtons { .ExtraButtons {
cursor: pointer; /* override of popover internal stuff */
position: static; .popover-trigger-button {
width: auto;
}
&:hover, .popover-trigger {
.extra-button-popover.open & { position: static;
padding: 10px;
margin: -10px;
&:hover .svg-inline--fa {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
}
} }
</style> </style>

5
src/components/favorite_button/favorite_button.js
View file

@ -31,11 +31,6 @@ const FavoriteButton = {
} }
}, },
computed: { computed: {
classes () {
return {
'-favorited': this.status.favorited
}
},
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])
} }
} }

55
src/components/favorite_button/favorite_button.vue
View file

@ -1,23 +1,31 @@
<template> <template>
<div v-if="loggedIn"> <div class="FavoriteButton">
<FAIcon <button
:class="classes" v-if="loggedIn"
class="FavoriteButton fa-scale-110 fa-old-padding -interactive" class="button-unstyled interactive"
:class="status.favorited && '-favorited'"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
@click.prevent="favorite()"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
:icon="[status.favorited ? 'fas' : 'far', 'star']" :icon="[status.favorited ? 'fas' : 'far', 'star']"
:spin="animated" :spin="animated"
@click.prevent="favorite()"
/> />
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> </button>
</div> <span v-else>
<div v-else>
<FAIcon <FAIcon
:class="classes" class="fa-scale-110 fa-old-padding"
class="FavoriteButton fa-scale-110 fa-old-padding"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
:icon="['far', 'star']" :icon="['far', 'star']"
/> />
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> </span>
<span
v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
class="action-counter"
>
{{ status.fave_num }}
</span>
</div> </div>
</template> </template>
@ -27,19 +35,28 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.FavoriteButton { .FavoriteButton {
&.-interactive { display: flex;
cursor: pointer;
> :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; animation-duration: 0.6s;
}
&:hover { &:hover .svg-inline--fa,
&.-favorited .svg-inline--fa {
color: $fallback--cOrange; color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange); color: var(--cOrange, $fallback--cOrange);
} }
} }
&.-favorited {
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
} }
</style> </style>

5
src/components/features_panel/features_panel.js
View file

@ -1,3 +1,5 @@
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
const FeaturesPanel = { const FeaturesPanel = {
computed: { computed: {
chat: function () { return this.$store.state.instance.chatAvailable }, chat: function () { return this.$store.state.instance.chatAvailable },
@ -6,7 +8,8 @@ const FeaturesPanel = {
whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled }, whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable }, mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode }, minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode },
textlimit: function () { return this.$store.state.instance.textlimit } textlimit: function () { return this.$store.state.instance.textlimit },
uploadlimit: function () { return fileSizeFormatService.fileSizeFormat(this.$store.state.instance.uploadlimit) }
} }
} }

1
src/components/features_panel/features_panel.vue
View file

@ -25,6 +25,7 @@
</li> </li>
<li>{{ $t('features_panel.scope_options') }}</li> <li>{{ $t('features_panel.scope_options') }}</li>
<li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</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> </ul>
</div> </div>
</div> </div>

2
src/components/follow_button/follow_button.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<button <button
class="btn btn-default follow-button" class="btn button-default follow-button"
:class="{ toggled: isPressed }" :class="{ toggled: isPressed }"
:disabled="inProgress" :disabled="inProgress"
:title="title" :title="title"

4
src/components/follow_request_card/follow_request_card.vue
View file

@ -2,13 +2,13 @@
<basic-user-card :user="user"> <basic-user-card :user="user">
<div class="follow-request-card-content-container"> <div class="follow-request-card-content-container">
<button <button
class="btn btn-default" class="btn button-default"
@click="approveUser" @click="approveUser"
> >
{{ $t('user_card.approve') }} {{ $t('user_card.approve') }}
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
@click="denyUser" @click="denyUser"
> >
{{ $t('user_card.deny') }} {{ $t('user_card.deny') }}

19
src/components/global_notice_list/global_notice_list.vue
View file

@ -9,11 +9,15 @@
<div class="notice-message"> <div class="notice-message">
{{ $t(notice.messageKey, notice.messageArgs) }} {{ $t(notice.messageKey, notice.messageArgs) }}
</div> </div>
<button
class="button-unstyled close-notice"
@click="closeNotice(notice)"
>
<FAIcon <FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
@click="closeNotice(notice)"
/> />
</button>
</div> </div>
</div> </div>
</template> </template>
@ -54,7 +58,7 @@
.global-error { .global-error {
background-color: var(--alertPopupError, $fallback--cRed); background-color: var(--alertPopupError, $fallback--cRed);
color: var(--alertPopupErrorText, $fallback--text); color: var(--alertPopupErrorText, $fallback--text);
i { .svg-inline--fa {
color: var(--alertPopupErrorText, $fallback--text); color: var(--alertPopupErrorText, $fallback--text);
} }
} }
@ -62,7 +66,7 @@
.global-warning { .global-warning {
background-color: var(--alertPopupWarning, $fallback--cOrange); background-color: var(--alertPopupWarning, $fallback--cOrange);
color: var(--alertPopupWarningText, $fallback--text); color: var(--alertPopupWarningText, $fallback--text);
i { .svg-inline--fa {
color: var(--alertPopupWarningText, $fallback--text); color: var(--alertPopupWarningText, $fallback--text);
} }
} }
@ -70,9 +74,16 @@
.global-info { .global-info {
background-color: var(--alertPopupNeutral, $fallback--fg); background-color: var(--alertPopupNeutral, $fallback--fg);
color: var(--alertPopupNeutralText, $fallback--text); color: var(--alertPopupNeutralText, $fallback--text);
i { .svg-inline--fa {
color: var(--alertPopupNeutralText, $fallback--text); color: var(--alertPopupNeutralText, $fallback--text);
} }
} }
.close-notice {
padding-right: 0.2em;
.svg-inline--fa:hover {
opacity: 0.6;
}
}
} }
</style> </style>

15
src/components/image_cropper/image_cropper.js
View file

@ -2,12 +2,10 @@ import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css' import 'cropperjs/dist/cropper.css'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faTimes,
faCircleNotch faCircleNotch
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faTimes,
faCircleNotch faCircleNotch
) )
@ -53,8 +51,7 @@ const ImageCropper = {
cropper: undefined, cropper: undefined,
dataUrl: undefined, dataUrl: undefined,
filename: undefined, filename: undefined,
submitting: false, submitting: false
submitError: null
} }
}, },
computed: { computed: {
@ -66,9 +63,6 @@ const ImageCropper = {
}, },
cancelText () { cancelText () {
return this.cancelButtonLabel || this.$t('image_cropper.cancel') return this.cancelButtonLabel || this.$t('image_cropper.cancel')
},
submitErrorMsg () {
return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
} }
}, },
methods: { methods: {
@ -82,12 +76,8 @@ const ImageCropper = {
}, },
submit (cropping = true) { submit (cropping = true) {
this.submitting = true this.submitting = true
this.avatarUploadError = null
this.submitHandler(cropping && this.cropper, this.file) this.submitHandler(cropping && this.cropper, this.file)
.then(() => this.destroy()) .then(() => this.destroy())
.catch((err) => {
this.submitError = err
})
.finally(() => { .finally(() => {
this.submitting = false this.submitting = false
}) })
@ -113,9 +103,6 @@ const ImageCropper = {
reader.readAsDataURL(this.file) reader.readAsDataURL(this.file)
this.$emit('changed', this.file, reader) this.$emit('changed', this.file, reader)
} }
},
clearError () {
this.submitError = null
} }
}, },
mounted () { mounted () {

17
src/components/image_cropper/image_cropper.vue
View file

@ -11,21 +11,21 @@
</div> </div>
<div class="image-cropper-buttons-wrapper"> <div class="image-cropper-buttons-wrapper">
<button <button
class="btn" class="button-default btn"
type="button" type="button"
:disabled="submitting" :disabled="submitting"
@click="submit()" @click="submit()"
v-text="saveText" v-text="saveText"
/> />
<button <button
class="btn" class="button-default btn"
type="button" type="button"
:disabled="submitting" :disabled="submitting"
@click="destroy" @click="destroy"
v-text="cancelText" v-text="cancelText"
/> />
<button <button
class="btn" class="button-default btn"
type="button" type="button"
:disabled="submitting" :disabled="submitting"
@click="submit(false)" @click="submit(false)"
@ -37,17 +37,6 @@
icon="circle-notch" icon="circle-notch"
/> />
</div> </div>
<div
v-if="submitError"
class="alert error"
>
{{ submitErrorMsg }}
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError"
/>
</div>
</div> </div>
<input <input
ref="input" ref="input"

2
src/components/importer/importer.vue
View file

@ -15,7 +15,7 @@
/> />
<button <button
v-else v-else
class="btn btn-default" class="btn button-default"
@click="submit" @click="submit"
> >
{{ submitButtonLabel }} {{ submitButtonLabel }}

27
src/components/interface_language_switcher/interface_language_switcher.vue
View file

@ -12,11 +12,11 @@
v-model="language" v-model="language"
> >
<option <option
v-for="(langCode, i) in languageCodes" v-for="lang in languages"
:key="langCode" :key="lang.code"
:value="langCode" :value="lang.code"
> >
{{ languageNames[i] }} {{ lang.name }}
</option> </option>
</select> </select>
<FAIcon <FAIcon
@ -29,6 +29,7 @@
<script> <script>
import languagesObject from '../../i18n/messages' import languagesObject from '../../i18n/messages'
import localeService from '../../services/locale/locale.service.js'
import ISO6391 from 'iso-639-1' import ISO6391 from 'iso-639-1'
import _ from 'lodash' import _ from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
@ -42,12 +43,8 @@ library.add(
export default { export default {
computed: { computed: {
languageCodes () { languages () {
return languagesObject.languages return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
},
languageNames () {
return _.map(this.languageCodes, this.getLanguageName)
}, },
language: { language: {
@ -61,11 +58,13 @@ export default {
methods: { methods: {
getLanguageName (code) { getLanguageName (code) {
const specialLanguageNames = { const specialLanguageNames = {
'ja': 'Japanese (日本語)', 'ja_easy': 'やさしいにほんご',
'ja_easy': 'Japanese (やさしいにほんご)', 'zh': '简体中文',
'zh': 'Chinese (简体中文)' 'zh_Hant': '繁體中文'
} }
return specialLanguageNames[code] || ISO6391.getName(code) const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
const browserLocale = localeService.internalToBrowserLocale(code)
return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
} }
} }
} }

15
src/components/link-preview/link-preview.js
View file

@ -1,3 +1,5 @@
import { mapGetters } from 'vuex'
const LinkPreview = { const LinkPreview = {
name: 'LinkPreview', name: 'LinkPreview',
props: [ props: [
@ -15,11 +17,20 @@ const LinkPreview = {
// Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid // 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 // as it makes sure to hide the image if somehow NSFW tagged preview can
// exist. // exist.
return this.card.image && !this.nsfw && this.size !== 'hide' return this.card.image && !this.censored && this.size !== 'hide'
},
censored () {
return this.nsfw && this.hideNsfwConfig
}, },
useDescription () { useDescription () {
return this.card.description && /\S/.test(this.card.description) return this.card.description && /\S/.test(this.card.description)
} },
hideNsfwConfig () {
return this.mergedConfig.hideNsfw
},
...mapGetters([
'mergedConfig'
])
}, },
created () { created () {
if (this.useImage) { if (this.useImage) {

17
src/components/link-preview/link-preview.vue
View file

@ -9,12 +9,17 @@
<div <div
v-if="useImage && imageLoaded" v-if="useImage && imageLoaded"
class="card-image" class="card-image"
:class="{ 'small-image': size === 'small' }"
> >
<img :src="card.image"> <img :src="card.image">
</div> </div>
<div class="card-content"> <div class="card-content">
<span class="card-host faint">{{ card.provider_name }}</span> <span class="card-host faint">
<span
v-if="censored"
class="nsfw-alert alert warning"
>{{ $t('status.nsfw') }}</span>
{{ card.provider_name }}
</span>
<h4 class="card-title">{{ card.title }}</h4> <h4 class="card-title">{{ card.title }}</h4>
<p <p
v-if="useDescription" v-if="useDescription"
@ -50,10 +55,6 @@
} }
} }
.small-image {
width: 80px;
}
.card-content { .card-content {
max-height: 100%; max-height: 100%;
margin: 0.5em; margin: 0.5em;
@ -76,6 +77,10 @@
max-height: calc(1.2em * 3 - 1px); max-height: calc(1.2em * 3 - 1px);
} }
.nsfw-alert {
margin: 2em 0;
}
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
border-style: solid; border-style: solid;

2
src/components/login_form/login_form.vue
View file

@ -61,7 +61,7 @@
<button <button
:disabled="loggingIn" :disabled="loggingIn"
type="submit" type="submit"
class="btn btn-default" class="btn button-default"
> >
{{ $t('login.login') }} {{ $t('login.login') }}
</button> </button>

10
src/components/media_modal/media_modal.vue
View file

@ -73,11 +73,21 @@
} }
} }
@keyframes media-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-image { .modal-image {
max-width: 90%; max-width: 90%;
max-height: 90%; max-height: 90%;
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5); box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
image-orientation: from-image; // NOTE: only FF supports this image-orientation: from-image; // NOTE: only FF supports this
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
} }
.modal-view-button-arrow { .modal-view-button-arrow {

12
src/components/media_upload/media_upload.vue
View file

@ -1,10 +1,7 @@
<template> <template>
<div <label
class="media-upload" class="media-upload"
:class="{ disabled: disabled }" :class="{ disabled: disabled }"
>
<label
class="label"
:title="$t('tool_tip.media_upload')" :title="$t('tool_tip.media_upload')"
> >
<FAIcon <FAIcon
@ -27,7 +24,6 @@
@change="change" @change="change"
> >
</label> </label>
</div>
</template> </template>
<script src="./media_upload.js" ></script> <script src="./media_upload.js" ></script>
@ -36,12 +32,6 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.media-upload { .media-upload {
.label {
display: inline-block;
}
.new-icon {
cursor: pointer; cursor: pointer;
}
} }
</style> </style>

16
src/components/mfa_form/recovery_form.vue
View file

@ -23,23 +23,25 @@
<div class="form-group"> <div class="form-group">
<div class="login-bottom"> <div class="login-bottom">
<div> <div>
<a <button
href="#" class="button-unstyled -link"
type="button"
@click.prevent="requireTOTP" @click.prevent="requireTOTP"
> >
{{ $t('login.enter_two_factor_code') }} {{ $t('login.enter_two_factor_code') }}
</a> </button>
<br> <br>
<a <button
href="#" class="button-unstyled -link"
type="button"
@click.prevent="abortMFA" @click.prevent="abortMFA"
> >
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
</a> </button>
</div> </div>
<button <button
type="submit" type="submit"
class="btn btn-default" class="btn button-default"
> >
{{ $t('general.verify') }} {{ $t('general.verify') }}
</button> </button>

16
src/components/mfa_form/totp_form.vue
View file

@ -25,23 +25,25 @@
<div class="form-group"> <div class="form-group">
<div class="login-bottom"> <div class="login-bottom">
<div> <div>
<a <button
href="#" class="button-unstyled -link"
type="button"
@click.prevent="requireRecovery" @click.prevent="requireRecovery"
> >
{{ $t('login.enter_recovery_code') }} {{ $t('login.enter_recovery_code') }}
</a> </button>
<br> <br>
<a <button
href="#" class="button-unstyled -link"
type="button"
@click.prevent="abortMFA" @click.prevent="abortMFA"
> >
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
</a> </button>
</div> </div>
<button <button
type="submit" type="submit"
class="btn btn-default" class="btn button-default"
> >
{{ $t('general.verify') }} {{ $t('general.verify') }}
</button> </button>

14
src/components/mobile_nav/mobile_nav.vue
View file

@ -9,9 +9,8 @@
@click="scrollToTop()" @click="scrollToTop()"
> >
<div class="item"> <div class="item">
<a <button
href="#" class="button-unstyled mobile-nav-button"
class="mobile-nav-button"
@click.stop.prevent="toggleMobileSidebar()" @click.stop.prevent="toggleMobileSidebar()"
> >
<FAIcon <FAIcon
@ -22,7 +21,7 @@
v-if="unreadChatCount" v-if="unreadChatCount"
class="alert-dot" class="alert-dot"
/> />
</a> </button>
<router-link <router-link
v-if="!hideSitename" v-if="!hideSitename"
class="site-name" class="site-name"
@ -33,10 +32,9 @@
</router-link> </router-link>
</div> </div>
<div class="item right"> <div class="item right">
<a <button
v-if="currentUser" v-if="currentUser"
class="mobile-nav-button" class="button-unstyled mobile-nav-button"
href="#"
@click.stop.prevent="openMobileNotifications()" @click.stop.prevent="openMobileNotifications()"
> >
<FAIcon <FAIcon
@ -47,7 +45,7 @@
v-if="unseenNotificationsCount" v-if="unseenNotificationsCount"
class="alert-dot" class="alert-dot"
/> />
</a> </button>
</div> </div>
</nav> </nav>
<div <div

2
src/components/mobile_post_status_button/mobile_post_status_button.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div v-if="isLoggedIn"> <div v-if="isLoggedIn">
<button <button
class="new-status-button" class="button-default new-status-button"
:class="{ 'hidden': isHidden }" :class="{ 'hidden': isHidden }"
@click="openPostForm" @click="openPostForm"
> >

61
src/components/moderation_tools/moderation_tools.vue
View file

@ -12,13 +12,13 @@
<div class="dropdown-menu"> <div class="dropdown-menu">
<span v-if="user.is_local"> <span v-if="user.is_local">
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleRight(&quot;admin&quot;)" @click="toggleRight(&quot;admin&quot;)"
> >
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }} {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
</button> </button>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleRight(&quot;moderator&quot;)" @click="toggleRight(&quot;moderator&quot;)"
> >
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }} {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@ -29,13 +29,13 @@
/> />
</span> </span>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleActivationStatus()" @click="toggleActivationStatus()"
> >
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }} {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
</button> </button>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="deleteUserDialog(true)" @click="deleteUserDialog(true)"
> >
{{ $t('user_card.admin_menu.delete_account') }} {{ $t('user_card.admin_menu.delete_account') }}
@ -47,84 +47,84 @@
/> />
<span v-if="hasTagPolicy"> <span v-if="hasTagPolicy">
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.FORCE_NSFW)" @click="toggleTag(tags.FORCE_NSFW)"
> >
{{ $t('user_card.admin_menu.force_nsfw') }}
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }" :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
/> />
{{ $t('user_card.admin_menu.force_nsfw') }}
</button> </button>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.STRIP_MEDIA)" @click="toggleTag(tags.STRIP_MEDIA)"
> >
{{ $t('user_card.admin_menu.strip_media') }}
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }" :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
/> />
{{ $t('user_card.admin_menu.strip_media') }}
</button> </button>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.FORCE_UNLISTED)" @click="toggleTag(tags.FORCE_UNLISTED)"
> >
{{ $t('user_card.admin_menu.force_unlisted') }}
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }" :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
/> />
{{ $t('user_card.admin_menu.force_unlisted') }}
</button> </button>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.SANDBOX)" @click="toggleTag(tags.SANDBOX)"
> >
{{ $t('user_card.admin_menu.sandbox') }}
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }" :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
/> />
{{ $t('user_card.admin_menu.sandbox') }}
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)" @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
> >
{{ $t('user_card.admin_menu.disable_remote_subscription') }}
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }" :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
/> />
{{ $t('user_card.admin_menu.disable_remote_subscription') }}
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)" @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
> >
{{ $t('user_card.admin_menu.disable_any_subscription') }}
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }" :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
/> />
{{ $t('user_card.admin_menu.disable_any_subscription') }}
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.QUARANTINE)" @click="toggleTag(tags.QUARANTINE)"
> >
{{ $t('user_card.admin_menu.quarantine') }}
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }" :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
/> />
{{ $t('user_card.admin_menu.quarantine') }}
</button> </button>
</span> </span>
</div> </div>
</div> </div>
<button <button
slot="trigger" slot="trigger"
class="btn btn-default btn-block" class="btn button-default btn-block"
:class="{ toggled }" :class="{ toggled }"
> >
{{ $t('user_card.admin_menu.moderation') }} {{ $t('user_card.admin_menu.moderation') }}
@ -141,13 +141,13 @@
<p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p> <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
<template slot="footer"> <template slot="footer">
<button <button
class="btn btn-default" class="btn button-default"
@click="deleteUserDialog(false)" @click="deleteUserDialog(false)"
> >
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
</button> </button>
<button <button
class="btn btn-default danger" class="btn button-default danger"
@click="deleteUser()" @click="deleteUser()"
> >
{{ $t('user_card.admin_menu.delete_user') }} {{ $t('user_card.admin_menu.delete_user') }}
@ -163,25 +163,6 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.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 { .moderation-tools-popover {
height: 100%; height: 100%;
.trigger { .trigger {

4
src/components/mute_card/mute_card.vue
View file

@ -3,7 +3,7 @@
<div class="mute-card-content-container"> <div class="mute-card-content-container">
<button <button
v-if="muted" v-if="muted"
class="btn btn-default" class="btn button-default"
:disabled="progress" :disabled="progress"
@click="unmuteUser" @click="unmuteUser"
> >
@ -16,7 +16,7 @@
</button> </button>
<button <button
v-else v-else
class="btn btn-default" class="btn button-default"
:disabled="progress" :disabled="progress"
@click="muteUser" @click="muteUser"
> >

31
src/components/notification/notification.vue
View file

@ -11,17 +11,18 @@
> >
<small> <small>
<router-link :to="userProfileLink"> <router-link :to="userProfileLink">
{{ notification.from_profile.screen_name }} {{ notification.from_profile.screen_name_ui }}
</router-link> </router-link>
</small> </small>
<a <button
href="#" class="button-unstyled unmute"
class="unmute"
@click.prevent="toggleMute" @click.prevent="toggleMute"
><FAIcon >
<FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="eye-slash" icon="eye-slash"
/></a> />
</button>
</div> </div>
<div <div
v-else v-else
@ -53,14 +54,14 @@
<bdi <bdi
v-if="!!notification.from_profile.name_html" v-if="!!notification.from_profile.name_html"
class="username" class="username"
:title="'@'+notification.from_profile.screen_name" :title="'@'+notification.from_profile.screen_name_ui"
v-html="notification.from_profile.name_html" v-html="notification.from_profile.name_html"
/> />
<!-- eslint-enable vue/no-v-html --> <!-- eslint-enable vue/no-v-html -->
<span <span
v-else v-else
class="username" class="username"
:title="'@'+notification.from_profile.screen_name" :title="'@'+notification.from_profile.screen_name_ui"
>{{ notification.from_profile.name }}</span> >{{ notification.from_profile.name }}</span>
<span v-if="notification.type === 'like'"> <span v-if="notification.type === 'like'">
<FAIcon <FAIcon
@ -132,14 +133,16 @@
/> />
</span> </span>
</div> </div>
<a <button
v-if="needMute" v-if="needMute"
href="#" class="button-unstyled"
@click.prevent="toggleMute" @click.prevent="toggleMute"
><FAIcon >
<FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="eye-slash" icon="eye-slash"
/></a> />
</button>
</span> </span>
<div <div
v-if="notification.type === 'follow' || notification.type === 'follow_request'" v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@ -149,7 +152,7 @@
:to="userProfileLink" :to="userProfileLink"
class="follow-name" class="follow-name"
> >
@{{ notification.from_profile.screen_name }} @{{ notification.from_profile.screen_name_ui }}
</router-link> </router-link>
<div <div
v-if="notification.type === 'follow_request'" v-if="notification.type === 'follow_request'"
@ -174,7 +177,7 @@
class="move-text" class="move-text"
> >
<router-link :to="targetUserProfileLink"> <router-link :to="targetUserProfileLink">
@{{ notification.target.screen_name }} @{{ notification.target.screen_name_ui }}
</router-link> </router-link>
</div> </div>
<template v-else> <template v-else>

3
src/components/notifications/notifications.js
View file

@ -6,6 +6,7 @@ import {
filteredNotificationsFromStore, filteredNotificationsFromStore,
unseenNotificationsFromStore unseenNotificationsFromStore
} from '../../services/notification_utils/notification_utils.js' } from '../../services/notification_utils/notification_utils.js'
import FaviconService from '../../services/favicon_service/favicon_service.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons' import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
@ -75,8 +76,10 @@ const Notifications = {
watch: { watch: {
unseenCountTitle (count) { unseenCountTitle (count) {
if (count > 0) { if (count > 0) {
FaviconService.drawFaviconBadge()
this.$store.dispatch('setPageTitle', `(${count})`) this.$store.dispatch('setPageTitle', `(${count})`)
} else { } else {
FaviconService.clearFaviconBadge()
this.$store.dispatch('setPageTitle', '') this.$store.dispatch('setPageTitle', '')
} }
} }

15
src/components/notifications/notifications.vue
View file

@ -15,16 +15,9 @@
class="badge badge-notification unseen-count" class="badge badge-notification unseen-count"
>{{ unseenCount }}</span> >{{ unseenCount }}</span>
</div> </div>
<div
v-if="error"
class="loadmore-error alert error"
@click.prevent
>
{{ $t('timeline.error_fetching') }}
</div>
<button <button
v-if="unseenCount" v-if="unseenCount"
class="read-button" class="button-default read-button"
@click.prevent="markAsSeen" @click.prevent="markAsSeen"
> >
{{ $t('notifications.read') }} {{ $t('notifications.read') }}
@ -48,15 +41,15 @@
> >
{{ $t('notifications.no_more_notifications') }} {{ $t('notifications.no_more_notifications') }}
</div> </div>
<a <button
v-else-if="!loading" v-else-if="!loading"
href="#" class="button-unstyled -link -fullwidth"
@click.prevent="fetchOlderNotifications()" @click.prevent="fetchOlderNotifications()"
> >
<div class="new-status-notification text-center panel-footer"> <div class="new-status-notification text-center panel-footer">
{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }} {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
</div> </div>
</a> </button>
<div <div
v-else v-else
class="new-status-notification text-center panel-footer" class="new-status-notification text-center panel-footer"

2
src/components/password_reset/password_reset.vue
View file

@ -51,7 +51,7 @@
<button <button
:disabled="isPending" :disabled="isPending"
type="submit" type="submit"
class="btn btn-default btn-block" class="btn button-default btn-block"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>

12
src/components/poll/poll.vue
View file

@ -42,14 +42,15 @@
:value="index" :value="index"
> >
<label class="option-vote"> <label class="option-vote">
<div>{{ option.title }}</div> <!-- eslint-disable-next-line vue/no-v-html -->
<div v-html="option.title_html" />
</label> </label>
</div> </div>
</div> </div>
<div class="footer faint"> <div class="footer faint">
<button <button
v-if="!showResults" v-if="!showResults"
class="btn btn-default poll-vote-button" class="btn button-default poll-vote-button"
type="button" type="button"
:disabled="isDisabled" :disabled="isDisabled"
@click="vote" @click="vote"
@ -57,7 +58,12 @@
{{ $t('polls.vote') }} {{ $t('polls.vote') }}
</button> </button>
<div class="total"> <div class="total">
{{ totalVotesCount }} {{ $t("polls.votes") }}&nbsp;·&nbsp; <template v-if="typeof poll.voters_count === 'number'">
{{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}&nbsp;·&nbsp;
</template>
<template v-else>
{{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
</template>
</div> </div>
<i18n :path="expired ? 'polls.expired' : 'polls.expires_in'"> <i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
<Timeago <Timeago

31
src/components/poll/poll_form.vue
View file

@ -21,20 +21,17 @@
@keydown.enter.stop.prevent="nextOption(index)" @keydown.enter.stop.prevent="nextOption(index)"
> >
</div> </div>
<div <button
v-if="options.length > 2" v-if="options.length > 2"
class="icon-container" class="delete-option button-unstyled -hover-highlight"
>
<FAIcon
icon="times"
class="delete"
@click="deleteOption(index)" @click="deleteOption(index)"
/> >
<FAIcon icon="times" />
</button>
</div> </div>
</div> <button
<a
v-if="options.length < maxOptions" v-if="options.length < maxOptions"
class="add-option faint" class="add-option faint button-unstyled -hover-highlight"
@click="addOption" @click="addOption"
> >
<FAIcon <FAIcon
@ -43,7 +40,7 @@
/> />
{{ $t("polls.add_option") }} {{ $t("polls.add_option") }}
</a> </button>
<div class="poll-type-expiry"> <div class="poll-type-expiry">
<div <div
class="poll-type" class="poll-type"
@ -116,7 +113,6 @@
align-self: flex-start; align-self: flex-start;
padding-top: 0.25em; padding-top: 0.25em;
padding-left: 0.1em; padding-left: 0.1em;
cursor: pointer;
} }
.poll-option { .poll-option {
@ -135,19 +131,11 @@
} }
} }
.icon-container { .delete-option {
// Hack: Move the icon over the input box // Hack: Move the icon over the input box
width: 1.5em; width: 1.5em;
margin-left: -1.5em; margin-left: -1.5em;
z-index: 1; z-index: 1;
.delete {
cursor: pointer;
&:hover {
color: inherit;
}
}
} }
.poll-type-expiry { .poll-type-expiry {
@ -163,6 +151,7 @@
border: none; border: none;
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
padding-right: 0.75em;
} }
} }

27
src/components/popover/popover.js
View file

@ -3,25 +3,35 @@ const Popover = {
props: { props: {
// Action to trigger popover: either 'hover' or 'click' // Action to trigger popover: either 'hover' or 'click'
trigger: String, trigger: String,
// Either 'top' or 'bottom' // Either 'top' or 'bottom'
placement: String, placement: String,
// Takes object with properties 'x' and 'y', values of these can be // Takes object with properties 'x' and 'y', values of these can be
// 'container' for using offsetParent as boundaries for either axis // 'container' for using offsetParent as boundaries for either axis
// or 'viewport' // or 'viewport'
boundTo: Object, boundTo: Object,
// Takes a selector to use as a replacement for the parent container // Takes a selector to use as a replacement for the parent container
// for getting boundaries for x an y axis // for getting boundaries for x an y axis
boundToSelector: String, boundToSelector: String,
// Takes a top/bottom/left/right object, how much space to leave // Takes a top/bottom/left/right object, how much space to leave
// between boundary and popover element // between boundary and popover element
margin: Object, margin: Object,
// Takes a x/y object and tells how many pixels to offset from // Takes a x/y object and tells how many pixels to offset from
// anchor point on either axis // anchor point on either axis
offset: Object, offset: Object,
// Replaces the classes you may want for the popover container. // Replaces the classes you may want for the popover container.
// Use 'popover-default' in addition to get the default popover // Use 'popover-default' in addition to get the default popover
// styles with your custom class. // styles with your custom class.
popoverClass: String 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
}, },
data () { data () {
return { return {
@ -96,9 +106,15 @@ const Popover = {
if (origin.y + content.offsetHeight > yBounds.max) usingTop = true if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
if (origin.y - content.offsetHeight < yBounds.min) usingTop = false 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 yOffset = (this.offset && this.offset.y) || 0
const translateY = usingTop const translateY = usingTop
? -anchorEl.offsetHeight - yOffset - content.offsetHeight ? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight
: yOffset : yOffset
const xOffset = (this.offset && this.offset.x) || 0 const xOffset = (this.offset && this.offset.x) || 0
@ -112,9 +128,12 @@ const Popover = {
} }
}, },
showPopover () { showPopover () {
if (this.hidden) this.$emit('show') const wasHidden = this.hidden
this.hidden = false this.hidden = false
this.$nextTick(this.updateStyles) this.$nextTick(() => {
if (wasHidden) this.$emit('show')
this.updateStyles()
})
}, },
hidePopover () { hidePopover () {
if (!this.hidden) this.$emit('close') if (!this.hidden) this.$emit('close')

46
src/components/popover/popover.vue
View file

@ -3,12 +3,14 @@
@mouseenter="onMouseenter" @mouseenter="onMouseenter"
@mouseleave="onMouseleave" @mouseleave="onMouseleave"
> >
<div <button
ref="trigger" ref="trigger"
class="button-unstyled -fullwidth popover-trigger-button"
type="button"
@click="onClick" @click="onClick"
> >
<slot name="trigger" /> <slot name="trigger" />
</div> </button>
<div <div
v-if="!hidden" v-if="!hidden"
ref="content" ref="content"
@ -30,6 +32,10 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.popover-trigger-button {
display: block;
}
.popover { .popover {
z-index: 8; z-index: 8;
position: absolute; position: absolute;
@ -76,10 +82,9 @@
.dropdown-item { .dropdown-item {
line-height: 21px; line-height: 21px;
margin-right: 5px;
overflow: auto; overflow: auto;
display: block; display: block;
padding: .25rem 1.0rem .25rem 1.5rem; padding: .5em 0.75em;
clear: both; clear: both;
font-weight: 400; font-weight: 400;
text-align: inherit; text-align: inherit;
@ -90,14 +95,14 @@
box-shadow: none; box-shadow: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box;
--btnText: var(--popoverText, $fallback--text); --btnText: var(--popoverText, $fallback--text);
&-icon { &-icon {
padding-left: 0.5rem;
svg { svg {
margin-right: 0.25rem; width: 22px;
margin-right: 0.75rem;
color: var(--menuPopoverIcon, $fallback--icon) color: var(--menuPopoverIcon, $fallback--icon)
} }
} }
@ -116,6 +121,33 @@
} }
} }
.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> </style>

7
src/components/post_status_form/post_status_form.js
View file

@ -115,7 +115,7 @@ const PostStatusForm = {
? this.copyMessageScope ? this.copyMessageScope
: this.$store.state.users.currentUser.default_scope : this.$store.state.users.currentUser.default_scope
const { postContentType: contentType } = this.$store.getters.mergedConfig const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
return { return {
dropFiles: [], dropFiles: [],
@ -126,7 +126,7 @@ const PostStatusForm = {
newStatus: { newStatus: {
spoilerText: this.subject || '', spoilerText: this.subject || '',
status: statusText, status: statusText,
nsfw: false, nsfw: !!sensitiveByDefault,
files: [], files: [],
poll: {}, poll: {},
mediaDescriptions: {}, mediaDescriptions: {},
@ -159,8 +159,7 @@ const PostStatusForm = {
...this.$store.state.instance.emoji, ...this.$store.state.instance.emoji,
...this.$store.state.instance.customEmoji ...this.$store.state.instance.customEmoji
], ],
users: this.$store.state.users.users, store: this.$store
updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
}) })
}, },
emojiSuggestor () { emojiSuggestor () {

54
src/components/post_status_form/post_status_form.vue
View file

@ -24,12 +24,12 @@
tag="p" tag="p"
class="visibility-notice" class="visibility-notice"
> >
<a <button
href="#" class="button-unstyled -link"
@click="openProfileTab" @click="openProfileTab"
> >
{{ $t('post_status.account_not_locked_warning_link') }} {{ $t('post_status.account_not_locked_warning_link') }}
</a> </button>
</i18n> </i18n>
<p <p
v-if="!hideScopeNotice && newStatus.visibility === 'public'" v-if="!hideScopeNotice && newStatus.visibility === 'public'"
@ -243,38 +243,34 @@
@upload-failed="uploadFailed" @upload-failed="uploadFailed"
@all-uploaded="finishedUploadingFiles" @all-uploaded="finishedUploadingFiles"
/> />
<div <button
class="emoji-icon" class="emoji-icon button-unstyled"
>
<div
:title="$t('emoji.add_emoji')" :title="$t('emoji.add_emoji')"
class="btn btn-default"
@click="showEmojiPicker" @click="showEmojiPicker"
> >
<FAIcon icon="smile-beam" /> <FAIcon icon="smile-beam" />
</div> </button>
</div> <button
<div
v-if="pollsAvailable" v-if="pollsAvailable"
class="poll-icon" class="poll-icon button-unstyled"
:class="{ selected: pollFormVisible }" :class="{ selected: pollFormVisible }"
:title="$t('polls.add_poll')" :title="$t('polls.add_poll')"
@click="togglePollForm" @click="togglePollForm"
> >
<FAIcon icon="poll-h" /> <FAIcon icon="poll-h" />
</div> </button>
</div> </div>
<button <button
v-if="posting" v-if="posting"
disabled disabled
class="btn btn-default" class="btn button-default"
> >
{{ $t('post_status.posting') }} {{ $t('post_status.posting') }}
</button> </button>
<button <button
v-else-if="isOverLengthLimit" v-else-if="isOverLengthLimit"
disabled disabled
class="btn btn-default" class="btn button-default"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>
@ -282,7 +278,7 @@
<button <button
v-else v-else
:disabled="uploadingFiles || disableSubmit" :disabled="uploadingFiles || disableSubmit"
class="btn btn-default" class="btn button-default"
@touchstart.stop.prevent="postStatus($event, newStatus)" @touchstart.stop.prevent="postStatus($event, newStatus)"
@click.stop.prevent="postStatus($event, newStatus)" @click.stop.prevent="postStatus($event, newStatus)"
> >
@ -306,11 +302,12 @@
:key="file.url" :key="file.url"
class="media-upload-wrapper" class="media-upload-wrapper"
> >
<FAIcon <button
class="fa-scale-110 fa-old-padding" class="button-unstyled hider"
icon="times"
@click="removeMediaFile(file)" @click="removeMediaFile(file)"
/> >
<FAIcon icon="times" />
</button>
<attachment <attachment
:attachment="file" :attachment="file"
:set-media="() => $store.dispatch('setMedia', newStatus.files)" :set-media="() => $store.dispatch('setMedia', newStatus.files)"
@ -520,26 +517,11 @@
} }
.attachments .media-upload-wrapper { .attachments .media-upload-wrapper {
padding: 0 0.5em; position: relative;
.attachment { .attachment {
margin: 0; margin: 0;
padding: 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;
} }
} }

16
src/components/react_button/react_button.js
View file

@ -23,17 +23,31 @@ const ReactButton = {
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji }) this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
} }
close() close()
},
focusInput () {
this.$nextTick(() => {
const input = this.$el.querySelector('input')
if (input) input.focus()
})
} }
}, },
computed: { computed: {
commonEmojis () { commonEmojis () {
return ['👍', '😠', '👀', '😂', '🔥'] return [
{ displayText: 'thumbsup', replacement: '👍' },
{ displayText: 'angry', replacement: '😠' },
{ displayText: 'eyes', replacement: '👀' },
{ displayText: 'joy', replacement: '😂' },
{ displayText: 'fire', replacement: '🔥' }
]
}, },
emojis () { emojis () {
if (this.filterWord !== '') { if (this.filterWord !== '') {
const filterWordLowercase = this.filterWord.toLowerCase() const filterWordLowercase = this.filterWord.toLowerCase()
let orderedEmojiList = [] let orderedEmojiList = []
for (const emoji of this.$store.state.instance.emoji) { for (const emoji of this.$store.state.instance.emoji) {
if (emoji.replacement === this.filterWord) return [emoji]
const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase) const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
if (indexOfFilterWord > -1) { if (indexOfFilterWord > -1) {
if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) { if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {

53
src/components/react_button/react_button.vue
View file

@ -1,10 +1,12 @@
<template> <template>
<Popover <Popover
trigger="click" trigger="click"
class="ReactButton"
placement="top" placement="top"
:offset="{ y: 5 }" :offset="{ y: 5 }"
class="react-button-popover"
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding
@show="focusInput"
> >
<div <div
slot="content" slot="content"
@ -20,17 +22,19 @@
<div class="reaction-picker"> <div class="reaction-picker">
<span <span
v-for="emoji in commonEmojis" v-for="emoji in commonEmojis"
:key="emoji" :key="emoji.replacement"
class="emoji-button" class="emoji-button"
@click="addReaction($event, emoji, close)" :title="emoji.displayText"
@click="addReaction($event, emoji.replacement, close)"
> >
{{ emoji }} {{ emoji.replacement }}
</span> </span>
<div class="reaction-picker-divider" /> <div class="reaction-picker-divider" />
<span <span
v-for="(emoji, key) in emojis" v-for="(emoji, key) in emojis"
:key="key" :key="key"
class="emoji-button" class="emoji-button"
:title="emoji.displayText"
@click="addReaction($event, emoji.replacement, close)" @click="addReaction($event, emoji.replacement, close)"
> >
{{ emoji.replacement }} {{ emoji.replacement }}
@ -38,11 +42,14 @@
<div class="reaction-bottom-fader" /> <div class="reaction-bottom-fader" />
</div> </div>
</div> </div>
<span slot="trigger"> <span
<FAIcon slot="trigger"
class="fa-scale-110 fa-old-padding add-reaction-button" class="popover-trigger"
:icon="['far', 'smile-beam']"
:title="$t('tool_tip.add_reaction')" :title="$t('tool_tip.add_reaction')"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
:icon="['far', 'smile-beam']"
/> />
</span> </span>
</Popover> </Popover>
@ -53,22 +60,24 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.reaction-picker-filter { .ReactButton {
.reaction-picker-filter {
padding: 0.5em; padding: 0.5em;
display: flex; display: flex;
input { input {
flex: 1; flex: 1;
} }
} }
.reaction-picker-divider { .reaction-picker-divider {
height: 1px; height: 1px;
width: 100%; width: 100%;
margin: 0.5em; margin: 0.5em;
background-color: var(--border, $fallback--border); background-color: var(--border, $fallback--border);
} }
.reaction-picker { .reaction-picker {
width: 10em; width: 10em;
height: 9em; height: 9em;
font-size: 1.5em; font-size: 1.5em;
@ -85,7 +94,8 @@
linear-gradient(to top, white, white); linear-gradient(to top, white, white);
transition: mask-size 150ms; transition: mask-size 150ms;
mask-size: 100% 20px, 100% 20px, auto; mask-size: 100% 20px, 100% 20px, auto;
// Autoprefixed seem to ignore this one, and also syntax is different
/* Autoprefixed seem to ignore this one, and also syntax is different */
-webkit-mask-composite: xor; -webkit-mask-composite: xor;
mask-composite: exclude; mask-composite: exclude;
@ -100,15 +110,22 @@
transform: scale(1.25); transform: scale(1.25);
} }
} }
} }
.add-reaction-button { /* override of popover internal stuff */
cursor: pointer; .popover-trigger-button {
width: auto;
}
&:hover { .popover-trigger {
padding: 10px;
margin: -10px;
&:hover .svg-inline--fa {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
}
} }
</style> </style>

17
src/components/registration/registration.js
View file

@ -10,7 +10,8 @@ const registration = {
fullname: '', fullname: '',
username: '', username: '',
password: '', password: '',
confirm: '' confirm: '',
reason: ''
}, },
captcha: {} captcha: {}
}), }),
@ -24,7 +25,8 @@ const registration = {
confirm: { confirm: {
required, required,
sameAsPassword: sameAs('password') sameAsPassword: sameAs('password')
} },
reason: { required: requiredIf(() => this.accountApprovalRequired) }
} }
} }
}, },
@ -38,7 +40,10 @@ const registration = {
computed: { computed: {
token () { return this.$route.params.token }, token () { return this.$route.params.token },
bioPlaceholder () { bioPlaceholder () {
return this.$t('registration.bio_placeholder').replace(/\s*\n\s*/g, ' \n') return this.replaceNewlines(this.$t('registration.bio_placeholder'))
},
reasonPlaceholder () {
return this.replaceNewlines(this.$t('registration.reason_placeholder'))
}, },
...mapState({ ...mapState({
registrationOpen: (state) => state.instance.registrationOpen, registrationOpen: (state) => state.instance.registrationOpen,
@ -46,7 +51,8 @@ const registration = {
isPending: (state) => state.users.signUpPending, isPending: (state) => state.users.signUpPending,
serverValidationErrors: (state) => state.users.signUpErrors, serverValidationErrors: (state) => state.users.signUpErrors,
termsOfService: (state) => state.instance.tos, termsOfService: (state) => state.instance.tos,
accountActivationRequired: (state) => state.instance.accountActivationRequired accountActivationRequired: (state) => state.instance.accountActivationRequired,
accountApprovalRequired: (state) => state.instance.accountApprovalRequired
}) })
}, },
methods: { methods: {
@ -73,6 +79,9 @@ const registration = {
}, },
setCaptcha () { setCaptcha () {
this.getCaptcha().then(cpt => { this.captcha = cpt }) this.getCaptcha().then(cpt => { this.captcha = cpt })
},
replaceNewlines (str) {
return str.replace(/\s*\n\s*/g, ' \n')
} }
} }
} }

19
src/components/registration/registration.vue
View file

@ -162,6 +162,23 @@
</ul> </ul>
</div> </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 <div
v-if="captcha.type != 'none'" v-if="captcha.type != 'none'"
id="captcha-group" id="captcha-group"
@ -211,7 +228,7 @@
<button <button
:disabled="isPending" :disabled="isPending"
type="submit" type="submit"
class="btn btn-default" class="btn button-default"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>

2
src/components/remote_follow/remote_follow.vue
View file

@ -16,7 +16,7 @@
> >
<button <button
click="submit" click="submit"
class="remote-button" class="button-default remote-button"
> >
{{ $t('user_card.remote_follow') }} {{ $t('user_card.remote_follow') }}
</button> </button>

45
src/components/reply_button/reply_button.vue
View file

@ -1,20 +1,28 @@
<template> <template>
<div> <div class="ReplyButton">
<FAIcon <button
v-if="loggedIn" v-if="loggedIn"
class="ReplyButton fa-scale-110 fa-old-padding -interactive" class="button-unstyled interactive"
icon="reply"
:title="$t('tool_tip.reply')"
:class="{'-active': replying}" :class="{'-active': replying}"
:title="$t('tool_tip.reply')"
@click.prevent="$emit('toggle')" @click.prevent="$emit('toggle')"
/> >
<FAIcon <FAIcon
v-else class="fa-scale-110 fa-old-padding"
icon="reply" icon="reply"
class="ReplyButton fa-scale-110 fa-old-padding" />
</button>
<span v-else>
<FAIcon
icon="reply"
class="fa-scale-110 fa-old-padding"
:title="$t('tool_tip.reply')" :title="$t('tool_tip.reply')"
/> />
<span v-if="status.replies_count > 0"> </span>
<span
v-if="status.replies_count > 0"
class="action-counter"
>
{{ status.replies_count }} {{ status.replies_count }}
</span> </span>
</div> </div>
@ -26,14 +34,25 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.ReplyButton { .ReplyButton {
&.-interactive { display: flex;
cursor: pointer;
&:hover, > :first-child {
&.-active { padding: 10px;
margin: -10px -8px -10px -10px;
}
.action-counter {
pointer-events: none;
user-select: none;
}
.interactive {
&:hover .svg-inline--fa,
&.-active .svg-inline--fa {
color: $fallback--cBlue; color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue); color: var(--cBlue, $fallback--cBlue);
} }
} }
} }
</style> </style>

5
src/components/retweet_button/retweet_button.js
View file

@ -24,11 +24,6 @@ const RetweetButton = {
} }
}, },
computed: { computed: {
classes () {
return {
'-repeated': this.status.repeated
}
},
mergedConfig () { mergedConfig () {
return this.$store.getters.mergedConfig return this.$store.getters.mergedConfig
} }

66
src/components/retweet_button/retweet_button.vue
View file

@ -1,33 +1,38 @@
<template> <template>
<div v-if="loggedIn"> <div class="RetweetButton">
<template v-if="visibility !== 'private' && visibility !== 'direct'"> <button
<FAIcon v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
:class="classes" class="button-unstyled interactive"
class="RetweetButton fa-scale-110 fa-old-padding -interactive" :class="status.repeated && '-repeated'"
icon="retweet"
:spin="animated"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
@click.prevent="retweet()" @click.prevent="retweet()"
/> >
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
</template>
<template v-else>
<FAIcon <FAIcon
:class="classes" class="fa-scale-110 fa-old-padding"
class="RetweetButton fa-scale-110 fa-old-padding" icon="retweet"
:spin="animated"
/>
</button>
<span v-else-if="loggedIn">
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="lock" icon="lock"
:title="$t('timeline.no_retweet_hint')" :title="$t('timeline.no_retweet_hint')"
/> />
</template> </span>
</div> <span v-else>
<div v-else-if="!loggedIn">
<FAIcon <FAIcon
:class="classes"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="retweet" icon="retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span> </span>
<span
v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
class="no-event"
>
{{ status.repeat_num }}
</span>
</div> </div>
</template> </template>
@ -37,19 +42,28 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.RetweetButton { .RetweetButton {
&.-interactive { display: flex;
cursor: pointer;
> :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; animation-duration: 0.6s;
}
&:hover { &:hover .svg-inline--fa,
&.-repeated .svg-inline--fa {
color: $fallback--cGreen; color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen); color: var(--cGreen, $fallback--cGreen);
} }
} }
&.-repeated {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
} }
</style> </style>

28
src/components/scope_selector/scope_selector.vue
View file

@ -3,54 +3,58 @@
v-if="!showNothing" v-if="!showNothing"
class="ScopeSelector" class="ScopeSelector"
> >
<span <button
v-if="showDirect" v-if="showDirect"
class="scope" class="button-unstyled scope"
:class="css.direct" :class="css.direct"
:title="$t('post_status.scope.direct')" :title="$t('post_status.scope.direct')"
type="button"
@click="changeVis('direct')" @click="changeVis('direct')"
> >
<FAIcon <FAIcon
icon="envelope" icon="envelope"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</span> </button>
<span <button
v-if="showPrivate" v-if="showPrivate"
class="scope" class="button-unstyled scope"
:class="css.private" :class="css.private"
:title="$t('post_status.scope.private')" :title="$t('post_status.scope.private')"
type="button"
@click="changeVis('private')" @click="changeVis('private')"
> >
<FAIcon <FAIcon
icon="lock" icon="lock"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</span> </button>
<span <button
v-if="showUnlisted" v-if="showUnlisted"
class="scope" class="button-unstyled scope"
:class="css.unlisted" :class="css.unlisted"
:title="$t('post_status.scope.unlisted')" :title="$t('post_status.scope.unlisted')"
type="button"
@click="changeVis('unlisted')" @click="changeVis('unlisted')"
> >
<FAIcon <FAIcon
icon="lock-open" icon="lock-open"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</span> </button>
<span <button
v-if="showPublic" v-if="showPublic"
class="scope" class="button-unstyled scope"
:class="css.public" :class="css.public"
:title="$t('post_status.scope.public')" :title="$t('post_status.scope.public')"
type="button"
@click="changeVis('public')" @click="changeVis('public')"
> >
<FAIcon <FAIcon
icon="globe" icon="globe"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</span> </button>
</div> </div>
</template> </template>

3
src/components/search/search.vue
View file

@ -14,7 +14,8 @@
@keyup.enter="newQuery(searchTerm)" @keyup.enter="newQuery(searchTerm)"
> >
<button <button
class="btn search-button" class="btn button-default search-button"
type="submit"
@click="newQuery(searchTerm)" @click="newQuery(searchTerm)"
> >
<FAIcon icon="search" /> <FAIcon icon="search" />

31
src/components/search_bar/search_bar.vue
View file

@ -3,17 +3,19 @@
class="SearchBar" class="SearchBar"
:class="{ '-expanded': !hidden }" :class="{ '-expanded': !hidden }"
> >
<a <button
v-if="hidden" v-if="hidden"
href="#" class="button-unstyled nav-icon"
class="nav-icon"
:title="$t('nav.search')" :title="$t('nav.search')"
><FAIcon type="button"
@click.prevent.stop="toggleHidden"
>
<FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="search" icon="search"
@click.prevent.stop="toggleHidden" />
/></a> </button>
<template v-else> <template v-else>
<input <input
id="search-bar-input" id="search-bar-input"
@ -25,7 +27,8 @@
@keyup.enter="find(searchTerm)" @keyup.enter="find(searchTerm)"
> >
<button <button
class="btn search-button" class="button-default search-button"
type="submit"
@click="find(searchTerm)" @click="find(searchTerm)"
> >
<FAIcon <FAIcon
@ -33,14 +36,17 @@
icon="search" icon="search"
/> />
</button> </button>
<span> <button
class="button-unstyled cancel-search"
type="button"
@click.prevent.stop="toggleHidden"
>
<FAIcon <FAIcon
fixed-width fixed-width
icon="times" icon="times"
class="cancel-icon fa-scale-110 fa-old-padding" class="cancel-icon fa-scale-110 fa-old-padding"
@click.prevent.stop="toggleHidden"
/> />
</span> </button>
</template> </template>
</div> </div>
</template> </template>
@ -69,8 +75,11 @@
flex: 1 0 auto; flex: 1 0 auto;
} }
.cancel-search {
height: 50px;
}
.cancel-icon { .cancel-icon {
cursor: pointer;
color: $fallback--text; color: $fallback--text;
color: var(--btnTopBarText, $fallback--text); color: var(--btnTopBarText, $fallback--text);
} }

57
src/components/settings_modal/helpers/boolean_setting.vue Normal file
View file

@ -0,0 +1,57 @@
<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>
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 () {
return get(this.$parent, this.path)
},
isChanged () {
return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
}
},
methods: {
update (e) {
set(this.$parent, this.path, e)
}
}
}
</script>
<style lang="scss">
.BooleanSetting {
}
</style>

51
src/components/settings_modal/helpers/modified_indicator.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<span
v-if="changed"
class="ModifiedIndicator"
>
<Popover
trigger="hover"
>
<span slot="trigger">
&nbsp;
<FAIcon
icon="wrench"
/>
</span>
<div
slot="content"
class="modified-tooltip"
>
{{ $t('settings.setting_changed') }}
</div>
</Popover>
</span>
</template>
<script>
import Popover from 'src/components/popover/popover.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faWrench } from '@fortawesome/free-solid-svg-icons'
library.add(
faWrench
)
export default {
components: { Popover },
props: ['changed']
}
</script>
<style lang="scss">
.ModifiedIndicator {
display: inline-block;
position: relative;
.modified-tooltip {
margin: 0.5em 1em;
min-width: 10em;
text-align: center;
}
}
</style>

22
src/components/settings_modal/helpers/shared_computed_object.js
View file

@ -1,29 +1,15 @@
import { import { defaultState as configDefaultState } from 'src/modules/config.js'
instanceDefaultProperties,
multiChoiceProperties,
defaultState as configDefaultState
} from 'src/modules/config.js'
const SharedComputedObject = () => ({ const SharedComputedObject = () => ({
user () { user () {
return this.$store.state.users.currentUser return this.$store.state.users.currentUser
}, },
// Getting localized values for instance-default properties // Getting values for default properties
...instanceDefaultProperties ...Object.keys(configDefaultState)
.filter(key => multiChoiceProperties.includes(key))
.map(key => [ .map(key => [
key + 'DefaultValue', key + 'DefaultValue',
function () { function () {
return this.$store.getters.instanceDefaultConfig[key] return this.$store.getters.defaultConfig[key]
}
])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
...instanceDefaultProperties
.filter(key => !multiChoiceProperties.includes(key))
.map(key => [
key + 'LocalizedValue',
function () {
return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
} }
]) ])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}), .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),

4
src/components/settings_modal/settings_modal.vue
View file

@ -30,13 +30,13 @@
</template> </template>
</transition> </transition>
<button <button
class="btn" class="btn button-default"
@click="peekModal" @click="peekModal"
> >
{{ $t('general.peek') }} {{ $t('general.peek') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="closeModal" @click="closeModal"
> >
{{ $t('general.close') }} {{ $t('general.close') }}

4
src/components/settings_modal/tabs/filtering_tab.js
View file

@ -1,5 +1,5 @@
import { filter, trim } from 'lodash' import { filter, trim } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue' import BooleanSetting from '../helpers/boolean_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js' import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
@ -18,7 +18,7 @@ const FilteringTab = {
} }
}, },
components: { components: {
Checkbox BooleanSetting
}, },
computed: { computed: {
...SharedComputedObject(), ...SharedComputedObject(),

43
src/components/settings_modal/tabs/filtering_tab.vue
View file

@ -5,34 +5,34 @@
<span class="label">{{ $t('settings.notification_visibility') }}</span> <span class="label">{{ $t('settings.notification_visibility') }}</span>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<Checkbox v-model="notificationVisibility.likes"> <BooleanSetting path="notificationVisibility.likes">
{{ $t('settings.notification_visibility_likes') }} {{ $t('settings.notification_visibility_likes') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="notificationVisibility.repeats"> <BooleanSetting path="notificationVisibility.repeats">
{{ $t('settings.notification_visibility_repeats') }} {{ $t('settings.notification_visibility_repeats') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="notificationVisibility.follows"> <BooleanSetting path="notificationVisibility.follows">
{{ $t('settings.notification_visibility_follows') }} {{ $t('settings.notification_visibility_follows') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="notificationVisibility.mentions"> <BooleanSetting path="notificationVisibility.mentions">
{{ $t('settings.notification_visibility_mentions') }} {{ $t('settings.notification_visibility_mentions') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="notificationVisibility.moves"> <BooleanSetting path="notificationVisibility.moves">
{{ $t('settings.notification_visibility_moves') }} {{ $t('settings.notification_visibility_moves') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="notificationVisibility.emojiReactions"> <BooleanSetting path="notificationVisibility.emojiReactions">
{{ $t('settings.notification_visibility_emoji_reactions') }} {{ $t('settings.notification_visibility_emoji_reactions') }}
</Checkbox> </BooleanSetting>
</li> </li>
</ul> </ul>
</div> </div>
@ -60,14 +60,14 @@
</label> </label>
</div> </div>
<div> <div>
<Checkbox v-model="hidePostStats"> <BooleanSetting path="hidePostStats">
{{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }} {{ $t('settings.hide_post_stats') }}
</Checkbox> </BooleanSetting>
</div> </div>
<div> <div>
<Checkbox v-model="hideUserStats"> <BooleanSetting path="hideUserStats">
{{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }} {{ $t('settings.hide_user_stats') }}
</Checkbox> </BooleanSetting>
</div> </div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
@ -76,12 +76,13 @@
<textarea <textarea
id="muteWords" id="muteWords"
v-model="muteWordsString" v-model="muteWordsString"
class="resize-height"
/> />
</div> </div>
<div> <div>
<Checkbox v-model="hideFilteredStatuses"> <BooleanSetting path="hideFilteredStatuses">
{{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }} {{ $t('settings.hide_filtered_statuses') }}
</Checkbox> </BooleanSetting>
</div> </div>
</div> </div>
</div> </div>

8
src/components/settings_modal/tabs/general_tab.js
View file

@ -1,4 +1,4 @@
import Checkbox from 'src/components/checkbox/checkbox.vue' import BooleanSetting from '../helpers/boolean_setting.vue'
import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue' import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js' import SharedComputedObject from '../helpers/shared_computed_object.js'
@ -26,7 +26,7 @@ const GeneralTab = {
} }
}, },
components: { components: {
Checkbox, BooleanSetting,
InterfaceLanguageSwitcher InterfaceLanguageSwitcher
}, },
computed: { computed: {
@ -34,6 +34,10 @@ const GeneralTab = {
return this.$store.state.instance.postFormats || [] return this.$store.state.instance.postFormats || []
}, },
instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }, instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
instanceWallpaperUsed () {
return this.$store.state.instance.background &&
!this.$store.state.users.currentUser.background_image
},
...SharedComputedObject() ...SharedComputedObject()
} }
} }

132
src/components/settings_modal/tabs/general_tab.vue
View file

@ -7,9 +7,14 @@
<interface-language-switcher /> <interface-language-switcher />
</li> </li>
<li v-if="instanceSpecificPanelPresent"> <li v-if="instanceSpecificPanelPresent">
<Checkbox v-model="hideISP"> <BooleanSetting path="hideISP">
{{ $t('settings.hide_isp') }} {{ $t('settings.hide_isp') }}
</Checkbox> </BooleanSetting>
</li>
<li v-if="instanceWallpaperUsed">
<BooleanSetting path="hideInstanceWallpaper">
{{ $t('settings.hide_wallpaper') }}
</BooleanSetting>
</li> </li>
</ul> </ul>
</div> </div>
@ -17,51 +22,51 @@
<h2>{{ $t('nav.timeline') }}</h2> <h2>{{ $t('nav.timeline') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<Checkbox v-model="hideMutedPosts"> <BooleanSetting path="hideMutedPosts">
{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }} {{ $t('settings.hide_muted_posts') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="collapseMessageWithSubject"> <BooleanSetting path="collapseMessageWithSubject">
{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }} {{ $t('settings.collapse_subject') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="streaming"> <BooleanSetting path="streaming">
{{ $t('settings.streaming') }} {{ $t('settings.streaming') }}
</Checkbox> </BooleanSetting>
<ul <ul
class="setting-list suboptions" class="setting-list suboptions"
:class="[{disabled: !streaming}]" :class="[{disabled: !streaming}]"
> >
<li> <li>
<Checkbox <BooleanSetting
v-model="pauseOnUnfocused" path="pauseOnUnfocused"
:disabled="!streaming" :disabled="!streaming"
> >
{{ $t('settings.pause_on_unfocused') }} {{ $t('settings.pause_on_unfocused') }}
</Checkbox> </BooleanSetting>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<Checkbox v-model="useStreamingApi"> <BooleanSetting path="useStreamingApi">
{{ $t('settings.useStreamingApi') }} {{ $t('settings.useStreamingApi') }}
<br> <br>
<small> <small>
{{ $t('settings.useStreamingApiWarning') }} {{ $t('settings.useStreamingApiWarning') }}
</small> </small>
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="emojiReactionsOnTimeline"> <BooleanSetting path="emojiReactionsOnTimeline">
{{ $t('settings.emoji_reactions_on_timeline') }} {{ $t('settings.emoji_reactions_on_timeline') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="virtualScrolling"> <BooleanSetting path="virtualScrolling">
{{ $t('settings.virtual_scrolling') }} {{ $t('settings.virtual_scrolling') }}
</Checkbox> </BooleanSetting>
</li> </li>
</ul> </ul>
</div> </div>
@ -70,14 +75,14 @@
<h2>{{ $t('settings.composing') }}</h2> <h2>{{ $t('settings.composing') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<Checkbox v-model="scopeCopy"> <BooleanSetting path="scopeCopy">
{{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }} {{ $t('settings.scope_copy') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="alwaysShowSubjectInput"> <BooleanSetting path="alwaysShowSubjectInput">
{{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }} {{ $t('settings.subject_input_always_show') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<div> <div>
@ -138,19 +143,24 @@
</div> </div>
</li> </li>
<li> <li>
<Checkbox v-model="minimalScopesMode"> <BooleanSetting path="minimalScopesMode">
{{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }} {{ $t('settings.minimal_scopes_mode') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="autohideFloatingPostButton"> <BooleanSetting path="sensitiveByDefault">
{{ $t('settings.sensitive_by_default') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="autohideFloatingPostButton">
{{ $t('settings.autohide_floating_post_button') }} {{ $t('settings.autohide_floating_post_button') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="padEmoji"> <BooleanSetting path="padEmoji">
{{ $t('settings.pad_emoji') }} {{ $t('settings.pad_emoji') }}
</Checkbox> </BooleanSetting>
</li> </li>
</ul> </ul>
</div> </div>
@ -159,14 +169,14 @@
<h2>{{ $t('settings.attachments') }}</h2> <h2>{{ $t('settings.attachments') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<Checkbox v-model="hideAttachments"> <BooleanSetting path="hideAttachments">
{{ $t('settings.hide_attachments_in_tl') }} {{ $t('settings.hide_attachments_in_tl') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="hideAttachmentsInConv"> <BooleanSetting path="hideAttachmentsInConv">
{{ $t('settings.hide_attachments_in_convo') }} {{ $t('settings.hide_attachments_in_convo') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<label for="maxThumbnails"> <label for="maxThumbnails">
@ -174,7 +184,7 @@
</label> </label>
<input <input
id="maxThumbnails" id="maxThumbnails"
v-model.number="maxThumbnails" path.number="maxThumbnails"
class="number-input" class="number-input"
type="number" type="number"
min="0" min="0"
@ -182,48 +192,48 @@
> >
</li> </li>
<li> <li>
<Checkbox v-model="hideNsfw"> <BooleanSetting path="hideNsfw">
{{ $t('settings.nsfw_clickthrough') }} {{ $t('settings.nsfw_clickthrough') }}
</Checkbox> </BooleanSetting>
</li> </li>
<ul class="setting-list suboptions"> <ul class="setting-list suboptions">
<li> <li>
<Checkbox <BooleanSetting
v-model="preloadImage" path="preloadImage"
:disabled="!hideNsfw" :disabled="!hideNsfw"
> >
{{ $t('settings.preload_images') }} {{ $t('settings.preload_images') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox <BooleanSetting
v-model="useOneClickNsfw" path="useOneClickNsfw"
:disabled="!hideNsfw" :disabled="!hideNsfw"
> >
{{ $t('settings.use_one_click_nsfw') }} {{ $t('settings.use_one_click_nsfw') }}
</Checkbox> </BooleanSetting>
</li> </li>
</ul> </ul>
<li> <li>
<Checkbox v-model="stopGifs"> <BooleanSetting path="stopGifs">
{{ $t('settings.stop_gifs') }} {{ $t('settings.stop_gifs') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="loopVideo"> <BooleanSetting path="loopVideo">
{{ $t('settings.loop_video') }} {{ $t('settings.loop_video') }}
</Checkbox> </BooleanSetting>
<ul <ul
class="setting-list suboptions" class="setting-list suboptions"
:class="[{disabled: !streaming}]" :class="[{disabled: !streaming}]"
> >
<li> <li>
<Checkbox <BooleanSetting
v-model="loopVideoSilentOnly" path="loopVideoSilentOnly"
:disabled="!loopVideo || !loopSilentAvailable" :disabled="!loopVideo || !loopSilentAvailable"
> >
{{ $t('settings.loop_video_silent_only') }} {{ $t('settings.loop_video_silent_only') }}
</Checkbox> </BooleanSetting>
<div <div
v-if="!loopSilentAvailable" v-if="!loopSilentAvailable"
class="unavailable" class="unavailable"
@ -234,14 +244,14 @@
</ul> </ul>
</li> </li>
<li> <li>
<Checkbox v-model="playVideosInModal"> <BooleanSetting path="playVideosInModal">
{{ $t('settings.play_videos_in_modal') }} {{ $t('settings.play_videos_in_modal') }}
</Checkbox> </BooleanSetting>
</li> </li>
<li> <li>
<Checkbox v-model="useContainFit"> <BooleanSetting path="useContainFit">
{{ $t('settings.use_contain_fit') }} {{ $t('settings.use_contain_fit') }}
</Checkbox> </BooleanSetting>
</li> </li>
</ul> </ul>
</div> </div>
@ -250,9 +260,9 @@
<h2>{{ $t('settings.notifications') }}</h2> <h2>{{ $t('settings.notifications') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<Checkbox v-model="webPushNotifications"> <BooleanSetting path="webPushNotifications">
{{ $t('settings.enable_web_push_notifications') }} {{ $t('settings.enable_web_push_notifications') }}
</Checkbox> </BooleanSetting>
</li> </li>
</ul> </ul>
</div> </div>
@ -261,9 +271,9 @@
<h2>{{ $t('settings.fun') }}</h2> <h2>{{ $t('settings.fun') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<Checkbox v-model="greentext"> <BooleanSetting path="greentext">
{{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }} {{ $t('settings.greentext') }}
</Checkbox> </BooleanSetting>
</li> </li>
</ul> </ul>
</div> </div>

10
src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
View file

@ -27,7 +27,7 @@
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default bulk-action-button" class="btn button-default bulk-action-button"
:click="() => blockUsers(selected)" :click="() => blockUsers(selected)"
> >
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
@ -37,7 +37,7 @@
</ProgressButton> </ProgressButton>
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn button-default"
:click="() => unblockUsers(selected)" :click="() => unblockUsers(selected)"
> >
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
@ -85,7 +85,7 @@
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn button-default"
:click="() => muteUsers(selected)" :click="() => muteUsers(selected)"
> >
{{ $t('user_card.mute') }} {{ $t('user_card.mute') }}
@ -95,7 +95,7 @@
</ProgressButton> </ProgressButton>
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn button-default"
:click="() => unmuteUsers(selected)" :click="() => unmuteUsers(selected)"
> >
{{ $t('user_card.unmute') }} {{ $t('user_card.unmute') }}
@ -141,7 +141,7 @@
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn button-default"
:click="() => unmuteDomains(selected)" :click="() => unmuteDomains(selected)"
> >
{{ $t('domain_mute_card.unmute') }} {{ $t('domain_mute_card.unmute') }}

2
src/components/settings_modal/tabs/notifications_tab.vue
View file

@ -21,7 +21,7 @@
<p>{{ $t('settings.notification_mutes') }}</p> <p>{{ $t('settings.notification_mutes') }}</p>
<p>{{ $t('settings.notification_blocks') }}</p> <p>{{ $t('settings.notification_blocks') }}</p>
<button <button
class="btn btn-default" class="btn button-default"
@click="updateNotificationSettings" @click="updateNotificationSettings"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}

56
src/components/settings_modal/tabs/profile_tab.js
View file

@ -45,9 +45,7 @@ const ProfileTab = {
banner: null, banner: null,
bannerPreview: null, bannerPreview: null,
background: null, background: null,
backgroundPreview: null, backgroundPreview: null
bannerUploadError: null,
backgroundUploadError: null
} }
}, },
components: { components: {
@ -68,8 +66,7 @@ const ProfileTab = {
...this.$store.state.instance.emoji, ...this.$store.state.instance.emoji,
...this.$store.state.instance.customEmoji ...this.$store.state.instance.customEmoji
], ],
users: this.$store.state.users.users, store: this.$store
updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
}) })
}, },
emojiSuggestor () { emojiSuggestor () {
@ -79,10 +76,7 @@ const ProfileTab = {
] }) ] })
}, },
userSuggestor () { userSuggestor () {
return suggestor({ return suggestor({ store: this.$store })
users: this.$store.state.users.users,
updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
})
}, },
fieldsLimits () { fieldsLimits () {
return this.$store.state.instance.fieldsLimits return this.$store.state.instance.fieldsLimits
@ -166,18 +160,18 @@ const ProfileTab = {
if (file.size > this.$store.state.instance[slot + 'limit']) { if (file.size > this.$store.state.instance[slot + 'limit']) {
const filesize = fileSizeFormatService.fileSizeFormat(file.size) const filesize = fileSizeFormatService.fileSizeFormat(file.size)
const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit']) const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
this[slot + 'UploadError'] = [ this.$store.dispatch('pushGlobalNotice', {
this.$t('upload.error.base'), messageKey: 'upload.error.message',
this.$t( messageArgs: [
'upload.error.file_too_big', this.$t('upload.error.file_too_big', {
{
filesize: filesize.num, filesize: filesize.num,
filesizeunit: filesize.unit, filesizeunit: filesize.unit,
allowedsize: allowedsize.num, allowedsize: allowedsize.num,
allowedsizeunit: allowedsize.unit allowedsizeunit: allowedsize.unit
} })
) ],
].join(' ') level: 'error'
})
return return
} }
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
@ -217,8 +211,9 @@ const ProfileTab = {
that.$store.commit('setCurrentUser', user) that.$store.commit('setCurrentUser', user)
resolve() resolve()
}) })
.catch((err) => { .catch((error) => {
reject(new Error(that.$t('upload.error.base') + ' ' + err.message)) that.displayUploadError(error)
reject(error)
}) })
} }
@ -239,24 +234,27 @@ const ProfileTab = {
this.$store.commit('setCurrentUser', user) this.$store.commit('setCurrentUser', user)
this.bannerPreview = null this.bannerPreview = null
}) })
.catch((err) => { .catch(this.displayUploadError)
this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message .finally(() => { this.bannerUploading = false })
})
.then(() => { this.bannerUploading = false })
}, },
submitBackground (background) { submitBackground (background) {
if (!this.backgroundPreview && background !== '') { return } if (!this.backgroundPreview && background !== '') { return }
this.backgroundUploading = true this.backgroundUploading = true
this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => { this.$store.state.api.backendInteractor.updateProfileImages({ background })
if (!data.error) { .then((data) => {
this.$store.commit('addNewUsers', [data]) this.$store.commit('addNewUsers', [data])
this.$store.commit('setCurrentUser', data) this.$store.commit('setCurrentUser', data)
this.backgroundPreview = null this.backgroundPreview = null
} else { })
this.backgroundUploadError = this.$t('upload.error.base') + data.error .catch(this.displayUploadError)
} .finally(() => { this.backgroundUploading = false })
this.backgroundUploading = false },
displayUploadError (error) {
this.$store.dispatch('pushGlobalNotice', {
messageKey: 'upload.error.message',
messageArgs: [error.message],
level: 'error'
}) })
} }
} }

9
src/components/settings_modal/tabs/profile_tab.scss
View file

@ -111,16 +111,17 @@
.profile-fields { .profile-fields {
display: flex; display: flex;
&>.emoji-input { & > .emoji-input {
flex: 1 1 auto; flex: 1 1 auto;
margin: 0 .2em .5em; margin: 0 0.2em 0.5em;
min-width: 0; min-width: 0;
} }
&>.icon-container { .delete-field {
width: 20px; width: 20px;
align-self: center; align-self: center;
margin: 0 .2em .5em; margin: 0 0.2em 0.5em;
padding: 0 0.5em;
} }
} }
} }

49
src/components/settings_modal/tabs/profile_tab.vue
View file

@ -11,7 +11,7 @@
<input <input
id="username" id="username"
v-model="newName" v-model="newName"
classname="name-changer" class="name-changer"
> >
</EmojiInput> </EmojiInput>
<p>{{ $t('settings.bio') }}</p> <p>{{ $t('settings.bio') }}</p>
@ -22,7 +22,7 @@
> >
<textarea <textarea
v-model="newBio" v-model="newBio"
classname="bio" class="bio resize-height"
/> />
</EmojiInput> </EmojiInput>
<p> <p>
@ -124,24 +124,24 @@
:placeholder="$t('settings.profile_fields.value')" :placeholder="$t('settings.profile_fields.value')"
> >
</EmojiInput> </EmojiInput>
<div <button
class="icon-container" class="delete-field button-unstyled -hover-highlight"
@click="deleteField(i)"
> >
<FAIcon <FAIcon
v-show="newFields.length > 1" v-show="newFields.length > 1"
icon="times" icon="times"
@click="deleteField(i)"
/> />
</button>
</div> </div>
</div> <button
<a
v-if="newFields.length < maxFields" v-if="newFields.length < maxFields"
class="add-field faint" class="add-field faint button-unstyled -hover-highlight"
@click="addField" @click="addField"
> >
<FAIcon icon="plus" /> <FAIcon icon="plus" />
{{ $t("settings.profile_fields.add_field") }} {{ $t("settings.profile_fields.add_field") }}
</a> </button>
</div> </div>
<p> <p>
<Checkbox v-model="bot"> <Checkbox v-model="bot">
@ -150,7 +150,7 @@
</p> </p>
<button <button
:disabled="newName && newName.length === 0" :disabled="newName && newName.length === 0"
class="btn btn-default" class="btn button-default"
@click="updateProfile" @click="updateProfile"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
@ -179,7 +179,7 @@
<button <button
v-show="pickAvatarBtnVisible" v-show="pickAvatarBtnVisible"
id="pick-avatar" id="pick-avatar"
class="btn" class="button-default btn"
type="button" type="button"
> >
{{ $t('settings.upload_a_photo') }} {{ $t('settings.upload_a_photo') }}
@ -224,22 +224,11 @@
/> />
<button <button
v-else-if="bannerPreview" v-else-if="bannerPreview"
class="btn btn-default" class="btn button-default"
@click="submitBanner(banner)" @click="submitBanner(banner)"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>
<div
v-if="bannerUploadError"
class="alert error"
>
Error: {{ bannerUploadError }}
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearUploadError('banner')"
/>
</div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.profile_background') }}</h2> <h2>{{ $t('settings.profile_background') }}</h2>
@ -274,23 +263,11 @@
/> />
<button <button
v-else-if="backgroundPreview" v-else-if="backgroundPreview"
class="btn btn-default" class="btn button-default"
@click="submitBackground(background)" @click="submitBackground(background)"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>
<div
v-if="backgroundUploadError"
class="alert error"
>
Error: {{ backgroundUploadError }}
<FAIcon
size="lg"
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearUploadError('background')"
/>
</div>
</div> </div>
</div> </div>
</template> </template>

4
src/components/settings_modal/tabs/security_tab/confirm.vue
View file

@ -2,14 +2,14 @@
<div> <div>
<slot /> <slot />
<button <button
class="btn btn-default" class="btn button-default"
:disabled="disabled" :disabled="disabled"
@click="confirm" @click="confirm"
> >
{{ $t('general.confirm') }} {{ $t('general.confirm') }}
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="disabled" :disabled="disabled"
@click="cancel" @click="cancel"
> >

10
src/components/settings_modal/tabs/security_tab/mfa.vue
View file

@ -29,7 +29,7 @@
/> />
<button <button
v-if="!confirmNewBackupCodes" v-if="!confirmNewBackupCodes"
class="btn btn-default" class="btn button-default"
@click="getBackupCodes" @click="getBackupCodes"
> >
{{ $t('settings.mfa.generate_new_recovery_codes') }} {{ $t('settings.mfa.generate_new_recovery_codes') }}
@ -61,7 +61,7 @@
<button <button
v-if="canSetupOTP" v-if="canSetupOTP"
class="btn btn-default" class="btn button-default"
@click="cancelSetup" @click="cancelSetup"
> >
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
@ -69,7 +69,7 @@
<button <button
v-if="canSetupOTP" v-if="canSetupOTP"
class="btn btn-default" class="btn button-default"
@click="setupOTP" @click="setupOTP"
> >
{{ $t('settings.mfa.setup_otp') }} {{ $t('settings.mfa.setup_otp') }}
@ -108,13 +108,13 @@
> >
<div class="confirm-otp-actions"> <div class="confirm-otp-actions">
<button <button
class="btn btn-default" class="btn button-default"
@click="doConfirmOTP" @click="doConfirmOTP"
> >
{{ $t('settings.mfa.confirm_and_enable') }} {{ $t('settings.mfa.confirm_and_enable') }}
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
@click="cancelSetup" @click="cancelSetup"
> >
{{ $t('general.cancel') }} {{ $t('general.cancel') }}

4
src/components/settings_modal/tabs/security_tab/mfa_totp.vue
View file

@ -4,7 +4,7 @@
<strong>{{ $t('settings.mfa.otp') }}</strong> <strong>{{ $t('settings.mfa.otp') }}</strong>
<button <button
v-if="!isActivated" v-if="!isActivated"
class="btn btn-default" class="btn button-default"
@click="doActivate" @click="doActivate"
> >
{{ $t('general.enable') }} {{ $t('general.enable') }}
@ -12,7 +12,7 @@
<button <button
v-if="isActivated" v-if="isActivated"
class="btn btn-default" class="btn button-default"
:disabled="deactivate" :disabled="deactivate"
@click="doDeactivate" @click="doDeactivate"
> >

3
src/components/settings_modal/tabs/security_tab/security_tab.js
View file

@ -1,6 +1,7 @@
import ProgressButton from 'src/components/progress_button/progress_button.vue' import ProgressButton from 'src/components/progress_button/progress_button.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
import Mfa from './mfa.vue' import Mfa from './mfa.vue'
import localeService from 'src/services/locale/locale.service.js'
const SecurityTab = { const SecurityTab = {
data () { data () {
@ -37,7 +38,7 @@ const SecurityTab = {
return { return {
id: oauthToken.id, id: oauthToken.id,
appName: oauthToken.app_name, appName: oauthToken.app_name,
validUntil: new Date(oauthToken.valid_until).toLocaleDateString() validUntil: new Date(oauthToken.valid_until).toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale))
} }
}) })
} }

10
src/components/settings_modal/tabs/security_tab/security_tab.vue
View file

@ -19,7 +19,7 @@
> >
</div> </div>
<button <button
class="btn btn-default" class="btn button-default"
@click="changeEmail" @click="changeEmail"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
@ -57,7 +57,7 @@
> >
</div> </div>
<button <button
class="btn btn-default" class="btn button-default"
@click="changePassword" @click="changePassword"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
@ -92,7 +92,7 @@
<td>{{ oauthToken.validUntil }}</td> <td>{{ oauthToken.validUntil }}</td>
<td class="actions"> <td class="actions">
<button <button
class="btn btn-default" class="btn button-default"
@click="revokeToken(oauthToken.id)" @click="revokeToken(oauthToken.id)"
> >
{{ $t('settings.revoke_token') }} {{ $t('settings.revoke_token') }}
@ -116,7 +116,7 @@
type="password" type="password"
> >
<button <button
class="btn btn-default" class="btn button-default"
@click="deleteAccount" @click="deleteAccount"
> >
{{ $t('settings.delete_account') }} {{ $t('settings.delete_account') }}
@ -130,7 +130,7 @@
</p> </p>
<button <button
v-if="!deletingAccount" v-if="!deletingAccount"
class="btn btn-default" class="btn button-default"
@click="confirmDelete" @click="confirmDelete"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}

4
src/components/settings_modal/tabs/theme_tab/preview.vue
View file

@ -15,7 +15,7 @@
<span class="alert error"> <span class="alert error">
{{ $t('settings.style.preview.error') }} {{ $t('settings.style.preview.error') }}
</span> </span>
<button class="btn"> <button class="btn button-default">
{{ $t('settings.style.preview.button') }} {{ $t('settings.style.preview.button') }}
</button> </button>
</div> </div>
@ -102,7 +102,7 @@
> >
<label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label> <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
</span> </span>
<button class="btn"> <button class="btn button-default">
{{ $t('settings.style.preview.button') }} {{ $t('settings.style.preview.button') }}
</button> </button>
</div> </div>

3
src/components/settings_modal/tabs/theme_tab/theme_tab.scss
View file

@ -165,7 +165,8 @@
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
margin: 1em 0; margin: 1em 0;
padding: 1em; padding: 1em;
background: var(--body-background-image); background-color: var(--wallpaper);
background-image: var(--body-background-image);
background-size: cover; background-size: cover;
background-position: 50% 50%; background-position: 50% 50%;

37
src/components/settings_modal/tabs/theme_tab/theme_tab.vue
View file

@ -12,13 +12,13 @@
<div class="buttons"> <div class="buttons">
<template v-if="themeWarning.type === 'snapshot_source_mismatch'"> <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
<button <button
class="btn" class="btn button-default"
@click="forceLoad" @click="forceLoad"
> >
{{ $t('settings.style.switcher.use_source') }} {{ $t('settings.style.switcher.use_source') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="forceSnapshot" @click="forceSnapshot"
> >
{{ $t('settings.style.switcher.use_snapshot') }} {{ $t('settings.style.switcher.use_snapshot') }}
@ -26,7 +26,7 @@
</template> </template>
<template v-else-if="themeWarning.noActionsPossible"> <template v-else-if="themeWarning.noActionsPossible">
<button <button
class="btn" class="btn button-default"
@click="dismissWarning" @click="dismissWarning"
> >
{{ $t('general.dismiss') }} {{ $t('general.dismiss') }}
@ -34,13 +34,13 @@
</template> </template>
<template v-else> <template v-else>
<button <button
class="btn" class="btn button-default"
@click="forceLoad" @click="forceLoad"
> >
{{ $t('settings.style.switcher.load_theme') }} {{ $t('settings.style.switcher.load_theme') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="dismissWarning" @click="dismissWarning"
> >
{{ $t('settings.style.switcher.keep_as_is') }} {{ $t('settings.style.switcher.keep_as_is') }}
@ -131,13 +131,13 @@
<p>{{ $t('settings.theme_help') }}</p> <p>{{ $t('settings.theme_help') }}</p>
<div class="tab-header-buttons"> <div class="tab-header-buttons">
<button <button
class="btn" class="btn button-default"
@click="clearOpacity" @click="clearOpacity"
> >
{{ $t('settings.style.switcher.clear_opacity') }} {{ $t('settings.style.switcher.clear_opacity') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="clearV1" @click="clearV1"
> >
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
@ -238,13 +238,13 @@
<div class="tab-header"> <div class="tab-header">
<p>{{ $t('settings.theme_help') }}</p> <p>{{ $t('settings.theme_help') }}</p>
<button <button
class="btn" class="btn button-default"
@click="clearOpacity" @click="clearOpacity"
> >
{{ $t('settings.style.switcher.clear_opacity') }} {{ $t('settings.style.switcher.clear_opacity') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="clearV1" @click="clearV1"
> >
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
@ -616,6 +616,15 @@
:disabled="underlayOpacityLocal === 'transparent'" :disabled="underlayOpacityLocal === 'transparent'"
/> />
</div> </div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
<ColorInput
v-model="wallpaperColorLocal"
name="wallpaper"
:label="$t('settings.style.advanced_colors.wallpaper')"
:fallback="previewTheme.colors.wallpaper"
/>
</div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.poll') }}</h4> <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
<ColorInput <ColorInput
@ -806,7 +815,7 @@
<div class="tab-header"> <div class="tab-header">
<p>{{ $t('settings.radii_help') }}</p> <p>{{ $t('settings.radii_help') }}</p>
<button <button
class="btn" class="btn button-default"
@click="clearRoundness" @click="clearRoundness"
> >
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
@ -936,7 +945,7 @@
/> />
</div> </div>
<button <button
class="btn" class="btn button-default"
@click="clearShadows" @click="clearShadows"
> >
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
@ -980,7 +989,7 @@
<div class="tab-header"> <div class="tab-header">
<p>{{ $t('settings.style.fonts.help') }}</p> <p>{{ $t('settings.style.fonts.help') }}</p>
<button <button
class="btn" class="btn button-default"
@click="clearFonts" @click="clearFonts"
> >
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
@ -1017,14 +1026,14 @@
<div class="apply-container"> <div class="apply-container">
<button <button
class="btn submit" class="btn button-default submit"
:disabled="!themeValid" :disabled="!themeValid"
@click="setCustomTheme" @click="setCustomTheme"
> >
{{ $t('general.apply') }} {{ $t('general.apply') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="clearAll" @click="clearAll"
> >
{{ $t('settings.style.switcher.reset') }} {{ $t('settings.style.switcher.reset') }}

8
src/components/shadow_control/shadow_control.vue
View file

@ -84,7 +84,7 @@
/> />
</label> </label>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="!ready || !present" :disabled="!ready || !present"
@click="del" @click="del"
> >
@ -94,7 +94,7 @@
/> />
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="!moveUpValid" :disabled="!moveUpValid"
@click="moveUp" @click="moveUp"
> >
@ -104,7 +104,7 @@
/> />
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="!moveDnValid" :disabled="!moveDnValid"
@click="moveDn" @click="moveDn"
> >
@ -114,7 +114,7 @@
/> />
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="usingFallback" :disabled="usingFallback"
@click="add" @click="add"
> >

16
src/components/side_drawer/side_drawer.vue
View file

@ -109,7 +109,7 @@
v-if="chat" v-if="chat"
@click="toggleDrawer" @click="toggleDrawer"
> >
<router-link :to="{ name: 'chat' }"> <router-link :to="{ name: 'chat-panel' }">
<FAIcon <FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
@ -144,8 +144,8 @@
</router-link> </router-link>
</li> </li>
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<a <button
href="#" class="button-unstyled -link -fullwidth"
@click="openSettingsModal" @click="openSettingsModal"
> >
<FAIcon <FAIcon
@ -153,7 +153,7 @@
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="cog" icon="cog"
/> {{ $t("settings.settings") }} /> {{ $t("settings.settings") }}
</a> </button>
</li> </li>
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<router-link :to="{ name: 'about'}"> <router-link :to="{ name: 'about'}">
@ -183,8 +183,8 @@
v-if="currentUser" v-if="currentUser"
@click="toggleDrawer" @click="toggleDrawer"
> >
<a <button
href="#" class="button-unstyled -link -fullwidth"
@click="doLogout" @click="doLogout"
> >
<FAIcon <FAIcon
@ -192,7 +192,7 @@
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="sign-out-alt" icon="sign-out-alt"
/> {{ $t("login.logout") }} /> {{ $t("login.logout") }}
</a> </button>
</li> </li>
</ul> </ul>
</div> </div>
@ -331,7 +331,7 @@
.side-drawer li { .side-drawer li {
padding: 0; padding: 0;
a { a, button {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
height: 3em; height: 3em;

Some files were not shown because too many files have changed in this diff Show more