Skip to content

GitLab

pleroma-fe
pleroma-fe
Source
Select Git revision
...
Target
Select Git revision
 
Commits (174)
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 10468 additions and 8638 deletions
CHANGELOG.md
View file @ d8d6af54
......@@ -4,18 +4,37 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased]
### Changed
- Greentext now has separate color slot for it
- Removed the use of with_move parameters when fetching notifications
- Push notifications now are the same as normal notfication, and are localized.
### Fixed
- Weird bug related to post being sent seemingly after pasting with keyboard (hopefully)
- Multiple issues with muted statuses/notifications
## [Unreleased patch]
### Add
- Added private notifications option for push notifications
- 'Copy link' button for statuses (in the ellipsis menu)
- Autocomplete domains from list of known instances
### Changed
- Registration page no longer requires email if the server is configured not to require it
- Change heart to thumbs up in reaction picker
- Close the media modal on navigation events
- Add colons to the emoji alt text, to make them copyable
- Add better visual indication for drag-and-drop for files
### Fixed
- Custom Emoji will display in poll options now.
- Status ellipsis menu closes properly when selecting certain options
- Cropped images look correct in Chrome
- Newlines in the muted words settings work again
- Clicking on non-latin hashtags won't open a new window
- Uploading and drag-dropping multiple files works correctly now.
- Subject field now appears disabled when posting
- Fix status ellipsis menu being cut off in notifications column
- Fixed autocomplete sometimes not returning the right user when there's already some results
## [2.0.3] - 2020-05-02
### Fixed
......
README.md
View file @ d8d6af54
# pleroma_fe
# Pleroma-FE
> A single column frontend for both Pleroma and GS servers.
> A single column frontend designed for Pleroma.
![screenshot](https://i.imgur.com/DJVqSJ0.png)
......@@ -11,7 +11,6 @@ To translate Pleroma-FE, add your language to [src/i18n/messages.js](https://git
# FOR ADMINS
You don't need to build Pleroma-FE yourself. Those using the Pleroma backend will be able to use it out of the box.
For the GNU social backend, check out https://git.pleroma.social/pleroma/pleroma-fe/wikis/dual-boot-with-qvitter to see how to run Pleroma-FE and Qvitter at the same time.
## Build Setup
......
docs/USER_GUIDE.md
View file @ d8d6af54
......@@ -33,7 +33,7 @@ will become
Note that you can only use emoji defined on your instance, you cannot "copy" someone else's emoji, and will have to ask your administrator to copy emoji from other instance to yours.
Lastly, there's two convenience options for emoji: an emoji picker (smiley face to the right of "submit" button) and autocomplete suggestions - when you start typing :shortcode: it will automatically try to suggest you emoj and complete the shortcode for you if you select one. **Note** that if emoji doesn't show up in suggestions nor in emoji picker it means there's no such emoji on your instance, if shortcode doesn't match any defined emoji it will appear as text.
* **Attachments** are fairly simple - you can attach any file to a post as long as the file is within maximum size limits. If you're uploading explicit material you can mark all of your attachments as sensitive (or add `#nsfw` tag) - it will hide the images and videos behind a warning so that it won't be displayed instantly.
* **Subject line** also known as **CW** (Content Warning) could be used as a header to the post and/or to warn others about contents of the post having something that might upset somebody or something among those lines. Several applications allow to hide post content leaving only subject line visible. As a side-effect using subject line will also mark your images as sensitive (see above).
* **Subject line** also known as **CW** (Content Warning) could be used as a header to the post and/or to warn others about contents of the post having something that might upset somebody or something among those lines. Several applications allow to hide post content leaving only subject line visible. Using a subject line will not mark your images as sensitive, you will have to do that explicitly (see above).
* **Visiblity scope** controls who will be able to see your posts. There are four scopes available:
1. `Public`: This is the default, and some fediverse software like GNU Social only supports this. This means that your post is accessible by anyone and will be shown in the public timelines.
......
src/App.js
View file @ d8d6af54
......@@ -6,6 +6,7 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance
import FeaturesPanel from './components/features_panel/features_panel.vue'
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
import ChatPanel from './components/chat_panel/chat_panel.vue'
import SettingsModal from './components/settings_modal/settings_modal.vue'
import MediaModal from './components/media_modal/media_modal.vue'
import SideDrawer from './components/side_drawer/side_drawer.vue'
import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
......@@ -29,6 +30,7 @@ export default {
SideDrawer,
MobilePostStatusButton,
MobileNav,
SettingsModal,
UserReportingModal,
PostStatusModal
},
......@@ -46,7 +48,8 @@ export default {
}),
created () {
// Load the locale from the storage
this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage
const val = this.$store.getters.mergedConfig.interfaceLanguage
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
window.addEventListener('resize', this.updateMobileState)
},
destroyed () {
......@@ -118,6 +121,9 @@ export default {
onSearchBarToggled (hidden) {
this.searchBarHidden = hidden
},
openSettingsModal () {
this.$store.dispatch('openSettingsModal')
},
updateMobileState () {
const mobileLayout = windowWidth() <= 800
const layoutHeight = windowHeight()
......
src/App.scss
View file @ d8d6af54
......@@ -56,6 +56,7 @@ body {
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior: none;
&.hidden {
display: none;
......@@ -566,7 +567,7 @@ main-router {
min-height: 0;
box-sizing: border-box;
margin: 0;
margin-left: .25em;
margin-left: .5em;
min-width: 1px;
align-self: stretch;
}
......@@ -860,51 +861,6 @@ nav {
}
}
.setting-item {
border-bottom: 2px solid var(--fg, $fallback--fg);
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;
> div {
margin-bottom: .5em;
&:last-child {
margin-bottom: 0;
}
}
&:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 1em;
}
select {
min-width: 10em;
}
textarea {
width: 100%;
max-width: 100%;
height: 100px;
}
.unavailable,
.unavailable i {
color: var(--cRed, $fallback--cRed);
color: $fallback--cRed;
}
.btn {
min-height: 28px;
min-width: 10em;
padding: 0 2em;
}
.number-input {
max-width: 6em;
}
}
.select-multiple {
display: flex;
.option-list {
......@@ -970,24 +926,15 @@ nav {
background-color: var(--panel, $fallback--fg);
}
.alert-dot-number {
display: inline-block;
border-radius: 1em;
min-width: 1.3rem;
min-height: 1.3rem;
max-height: 1.3rem;
.unread-chat-count {
font-size: 0.9em;
font-weight: bolder;
line-height: 1.3rem;
text-align: center;
vertical-align: middle;
white-space: nowrap;
padding: 0 0.3em;
font-style: normal;
position: absolute;
right: 0.6rem;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
color: white;
color: var(--badgeNotificationText, white);
font-style: normal;
padding: 0 0.3em;
min-width: 1.3rem;
min-height: 1.3rem;
max-height: 1.3rem;
line-height: 1.3rem;
}
src/App.vue
View file @ d8d6af54
......@@ -46,15 +46,16 @@
@toggled="onSearchBarToggled"
@click.stop.native
/>
<router-link
<a
href="#"
class="mobile-hidden"
:to="{ name: 'settings'}"
@click.stop="openSettingsModal"
>
<i
class="button-icon icon-cog nav-icon"
:title="$t('nav.preferences')"
/>
</router-link>
</a>
<a
v-if="currentUser && currentUser.role === 'admin'"
href="/pleroma/admin/#/login-pleroma"
......@@ -126,6 +127,7 @@
<MobilePostStatusButton />
<UserReportingModal />
<PostStatusModal />
<SettingsModal />
<portal-target name="modal" />
</div>
</template>
......
src/boot/after_store.js
View file @ d8d6af54
......@@ -202,6 +202,7 @@ const getNodeInfo = async ({ store }) => {
const features = metadata.features
store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
......
src/boot/routes.js
View file @ d8d6af54
......@@ -9,10 +9,8 @@ import ChatList from 'components/chat_list/chat_list.vue'
import Chat from 'components/chat/chat.vue'
import UserProfile from 'components/user_profile/user_profile.vue'
import Search from 'components/search/search.vue'
import Settings from 'components/settings/settings.vue'
import Registration from 'components/registration/registration.vue'
import PasswordReset from 'components/password_reset/password_reset.vue'
import UserSettings from 'components/user_settings/user_settings.vue'
import FollowRequests from 'components/follow_requests/follow_requests.vue'
import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
import Notifications from 'components/notifications/notifications.vue'
......@@ -31,7 +29,7 @@ export default (store) => {
}
}
return [
let routes = [
{ name: 'root',
path: '/',
redirect: _to => {
......@@ -58,21 +56,26 @@ export default (store) => {
{ name: 'external-user-profile', path: '/users/:id', component: UserProfile },
{ name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
{ name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
{ name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
{ name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
{ name: 'settings', path: '/settings', component: Settings },
{ name: 'registration', path: '/registration', component: Registration },
{ name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
{ name: 'registration-token', path: '/registration/:token', component: Registration },
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
{ name: 'user-settings', path: '/user-settings', component: UserSettings, beforeEnter: validateAuthenticatedRoute },
{ name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
{ name: 'login', path: '/login', component: AuthForm },
{ name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },
{ name: 'chat-panel', path: '/chat-panel', component: ChatPanel, props: () => ({ floating: false }) },
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
{ name: 'about', path: '/about', component: About },
{ name: 'user-profile', path: '/(users/)?:name', component: UserProfile }
]
if (store.state.instance.pleromaChatMessagesAvailable) {
routes = routes.concat([
{ name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
{ name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute }
])
}
return routes
}
src/components/account_actions/account_actions.js
View file @ d8d6af54
import { mapState } from 'vuex'
import ProgressButton from '../progress_button/progress_button.vue'
import Popover from '../popover/popover.vue'
......@@ -34,6 +35,11 @@ const AccountActions = {
params: { recipient_id: this.user.id }
})
}
},
computed: {
...mapState({
pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
})
}
}
......
src/components/account_actions/account_actions.vue
View file @ d8d6af54
......@@ -3,6 +3,7 @@
<Popover
trigger="click"
placement="bottom"
:bound-to="{ x: 'container' }"
>
<div
slot="content"
......@@ -50,6 +51,7 @@
{{ $t('user_card.report') }}
</button>
<button
v-if="pleromaChatMessagesAvailable"
class="btn btn-default btn-block dropdown-item"
@click="openChat"
>
......
src/components/async_component_error/async_component_error.vue 0 → 100644
View file @ d8d6af54
<template>
<div class="async-component-error">
<div>
<h4>
{{ $t('general.generic_error') }}
</h4>
<p>
{{ $t('general.error_retry') }}
</p>
<button
class="btn"
@click="retry"
>
{{ $t('general.retry') }}
</button>
</div>
</div>
</template>
<script>
export default {
methods: {
retry () {
this.$emit('resetAsyncComponent')
}
}
}
</script>
<style lang="scss">
.async-component-error {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
.btn {
margin: .5em;
padding: .5em 2em;
}
}
</style>
src/components/attachment/attachment.js
View file @ d8d6af54
......@@ -27,8 +27,7 @@ const Attachment = {
},
components: {
StillImage,
VideoAttachment,
AudioPlayer: () => import('../audio_player/audio_player.vue')
VideoAttachment
},
computed: {
usePlaceHolder () {
......
src/components/attachment/attachment.vue
View file @ d8d6af54
......@@ -81,16 +81,11 @@
</a>
<audio
v-if="type === 'audio' && !mergedConfig.useWavesurfer"
v-if="type === 'audio'"
:src="attachment.url"
controls
/>
<audio-player
v-if="type === 'audio' && mergedConfig.useWavesurfer"
:src="attachment.url"
/>
<div
v-if="type === 'html' && attachment.oembed"
class="oembed"
......
src/components/chat/chat.js
View file @ d8d6af54
This diff is collapsed.
src/components/chat/chat.scss
View file @ d8d6af54
.direct-conversation-view {
.chat-view {
display: flex;
height: calc(100vh - 60px);
width: 100%;
.direct-conversation-view-inner {
.chat-view-inner {
height: auto;
width: 100%;
overflow: visible;
......@@ -11,208 +11,151 @@
margin-top: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
}
.direct-conversation-view-body {
background-color: var(--chatBg, $fallback--bg);
display: flex;
flex-direction: column;
width: 100%;
overflow: visible;
.chat-view-body {
background-color: var(--chatBg, $fallback--bg);
display: flex;
flex-direction: column;
width: 100%;
overflow: visible;
border-radius: none;
min-height: 100%;
margin-left: 0;
margin-right: 0;
margin-bottom: 0em;
margin-top: 0em;
border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;
&::after {
border-radius: none;
min-height: 100%;
margin-left: 0;
margin-right: 0;
margin-bottom: 0em;
margin-top: 0em;
border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;
&.panel {
&::after {
border-radius: 0;
box-shadow: none;
}
}
box-shadow: none;
}
}
.direct-conversation-view-heading {
align-items: center;
justify-content: space-between;
top: 50px;
display: flex;
z-index: 2;
border-radius: none;
position: -webkit-sticky;
position: sticky;
.direct-conversation-title {
display: flex;
a {
display: flex;
align-items: center;
}
}
.go-back-button-wrapper {
display: flex;
width: 100%;
}
.button-icon {
cursor: pointer;
display: flex;
align-content: center;
align-items: center;
}
.go-back-button {
cursor: pointer;
margin-right: 1.2em;
i {
color: $fallback--link;
color: var(--panelLink, $fallback--link);
}
}
.title {
flex-shrink: 1;
margin-right: 0em;
overflow: hidden;
text-overflow: ellipsis;
line-height: 28px;
flex-shrink: 1;
margin-right: 0em;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
max-width: 80%;
display: grid;
display: flex;
}
}
.scrollable-message-list {
padding: 0 10px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.scrollable {
padding: 0 10px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.footer {
position: sticky;
bottom: 0px;
}
.chat-view-heading {
align-items: center;
justify-content: space-between;
top: 50px;
display: flex;
z-index: 2;
border-radius: none;
position: sticky;
display: flex;
overflow: hidden;
}
.go-back-button {
margin-right: 1.2em;
cursor: pointer;
}
.jump-to-bottom-button {
width: 2.5em;
height: 2.5em;
border-radius: 100%;
position: absolute;
right: 1.3em;
top: -3.2em;
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
z-index: 10;
transition: 0.35s all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
opacity: 0;
visibility: hidden;
cursor: pointer;
&.visible {
opacity: 1;
visibility: visible;
}
i {
font-size: 1em;
color: $fallback--text;
color: var(--text, $fallback--text);
}
.footer {
position: -webkit-sticky;
position: sticky;
bottom: 0px;
.unread-message-count {
font-size: 0.8em;
left: 50%;
transform: translate(-50%, 0);
border-radius: 100%;
margin-top: -1rem;
padding: 0;
}
.chat-loading-error {
width: 100%;
display: flex;
align-items: flex-end;
height: 100%;
textarea {
outline: none
}
.error {
width: 100%;
}
}
}
}
@media all and (max-width: 800px) {
.direct-conversation-view {
@media all and (max-width: 800px) {
height: 100%;
overflow: hidden;
.direct-conversation-view-inner {
.chat-view-inner {
overflow: hidden;
height: 100%;
margin-top: 0;
margin-left: 0;
margin-right: 0;
.direct-conversation-view-body {
display: flex;
min-height: auto;
overflow: hidden;
height: 100%;
margin: 0;
border-radius: 0 !important;
.direct-conversation-view-heading {
position: static;
z-index: 9999;
top: 0;
margin-top: 0;
border-radius: 0;
}
.scrollable {
display: unset;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.footer {
position: relative;
bottom: auto;
.post-status-form form {
padding: 0;
}
}
}
}
}
}
.jump-to-bottom-button {
width: 2.5em;
height: 2.5em;
border-radius: 100%;
position: absolute;
position: absolute;
right: 1.3em;
top: -3.2em;
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
z-index: 10;
transition: 0.35s all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
opacity: 0;
visibility: hidden;
cursor: pointer;
.chat-view-body {
display: flex;
min-height: auto;
overflow: hidden;
height: 100%;
margin: 0;
border-radius: 0 !important;
}
&.visible {
opacity: 1;
visibility: visible;
}
.chat-view-heading {
position: static;
z-index: 9999;
top: 0;
margin-top: 0;
border-radius: 0;
}
i {
font-size: 1em;
color: $fallback--text;
color: var(--text, $fallback--text);
}
.scrollable-message-list {
display: unset;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.new-messages-alert-dot {
left: 50%;
transform: translate(-50%, 0);
border-radius: 100%;
height: 1.3em;
width: 1.3em;
position: absolute;
top: calc(50% - 8px);
text-align: center;
font-style: normal;;
font-weight: bolder;
margin-top: -1rem;
font-size: 0.8em;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
color: white;
color: var(--badgeNotificationText, white);
.footer {
position: sticky;
bottom: auto;
}
}
}
src/components/chat/chat.vue
View file @ d8d6af54
<template>
<div class="direct-conversation-view">
<div class="direct-conversation-view-inner">
<div class="chat-view">
<div class="chat-view-inner">
<div
id="nav"
ref="inner"
class="panel-default panel direct-conversation-view-body"
class="panel-default panel chat-view-body"
>
<div
ref="header"
class="panel-heading direct-conversation-view-heading mobile-hidden"
class="panel-heading chat-view-heading mobile-hidden"
>
<div class="go-back-button-wrapper">
<i
class="button-icon icon-left-open go-back-button"
@click="goBack"
<a
class="go-back-button"
@click="goBack"
>
<i class="button-icon icon-left-open" />
</a>
<div class="title text-center">
<ChatTitle
:user="recipient"
:with-avatar="true"
/>
<div class="title text-center">
<ChatTitle
:users="chatParticipants"
:fallback-user="currentUser"
:with-avatar="true"
/>
</div>
</div>
<div style="visibility: hidden">
<i class="button-icon icon-info-circled" />
</div>
</div>
<template>
<div
ref="scrollable"
class="scrollable"
class="scrollable-message-list"
:style="{ height: scrollableContainerHeight }"
@scroll="handleScroll"
>
<ChatMessage
v-for="chatViewItem in chatViewItems"
:key="chatViewItem.id"
:chat-view-item="chatViewItem"
:sequence-hovered="chatViewItem.sequenceId === hoveredSequenceId"
@hover="onStatusHover"
/>
<template v-if="!errorLoadingChat">
<ChatMessage
v-for="chatViewItem in chatViewItems"
:key="chatViewItem.id"
:author="recipient"
:chat-view-item="chatViewItem"
:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
@hover="onMessageHover"
/>
</template>
<div
v-else
class="chat-loading-error"
>
<div class="alert error">
{{ $t('chats.error_loading_chat') }}
</div>
</div>
</div>
<div
ref="footer"
......@@ -47,33 +55,35 @@
>
<div
class="jump-to-bottom-button"
:class="{ 'visible': !loadingMessages && jumpToBottomButtonVisible }"
:class="{ 'visible': jumpToBottomButtonVisible }"
@click="scrollDown({ behavior: 'smooth' })"
>
<i class="icon-down-open">
<div
v-if="newMessageCount"
class="new-messages-alert-dot"
class="badge badge-notification unread-chat-count unread-message-count"
>
{{ newMessageCount }}
</div>
</i>
</div>
<PostStatusForm
:disabled="loadingChat"
:disable-subject="true"
:disable-scope-selector="true"
:disable-notice="true"
:disable-lock-warning="true"
:disable-polls="true"
:poster="poster"
:submit-on-enter="!isMobileLayout"
:preserve-focus="!isMobileLayout"
:auto-focus="!isMobileLayout"
:disable-sensitivity-checkbox="true"
:disable-submit="errorLoadingChat || !currentChat"
:request="sendMessage"
:submit-on-enter="!mobileLayout"
:preserve-focus="!mobileLayout"
:auto-focus="!mobileLayout"
:placeholder="formPlaceholder"
:file-limit="1"
max-height="160"
emoji-picker-placement="top"
@resize="handleResize"
@posted="onPosted"
/>
</div>
</template>
......
src/components/chat/chat_layout.js
View file @ d8d6af54
const ChatLayout = {
methods: {
setChatLayout () {
let body = document.querySelector('body')
if (body) {
body.style.overscrollBehavior = 'none'
}
if (this.isMobileLayout) {
if (this.mobileLayout) {
this.setMobileChatLayout()
}
},
unsetChatLayout () {
this.unsetMobileChatLayout()
let body = document.querySelector('body')
if (body) {
body.style.overscrollBehavior = 'unset'
}
},
setMobileChatLayout () {
// This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
......@@ -62,7 +54,7 @@ const ChatLayout = {
}
this.$nextTick(() => {
this.updateSize()
this.updateScrollableContainerHeight()
})
},
unsetMobileChatLayout () {
......
src/components/chat/chat_layout_utils.js 0 → 100644
View file @ d8d6af54
// Captures a scroll position
export const getScrollPosition = (el) => {
return {
scrollTop: el.scrollTop,
scrollHeight: el.scrollHeight,
offsetHeight: el.offsetHeight
}
}
// A helper function that is used to keep the scroll position fixed as the new elements are added to the top
// Takes two scroll positions, before and after the update.
export const getNewTopPosition = (previousPosition, newPosition) => {
return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
}
export const isBottomedOut = (el, offset = 0) => {
if (!el) { return }
const scrollHeight = el.scrollTop + offset
const totalHeight = el.scrollHeight - el.offsetHeight
return totalHeight <= scrollHeight
}
// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form.
export const scrollableContainerHeight = (inner, header, footer) => {
const height = parseFloat(getComputedStyle(inner, null).height.replace('px', ''))
return height - header.clientHeight - footer.clientHeight
}
src/components/chat_avatar/chat_avatar.js
View file @ d8d6af54
......@@ -3,28 +3,17 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
import { mapState } from 'vuex'
const ChatAvatar = {
props: ['users', 'fallbackUser', 'width', 'height'],
props: ['user', 'width', 'height'],
components: {
StillImage
},
methods: {
getUserProfileLink (user) {
if (!user) { return }
return generateProfileLink(user.id, user.screen_name)
}
},
computed: {
firstUser () {
return this.users[0] || this.fallbackUser
},
secondUser () {
return this.users[1]
},
thirdUser () {
return this.users[2]
},
fourthUser () {
return this.users[3]
},
...mapState({
betterShadow: state => state.interface.browserSupport.cssFilter
})
......
src/components/chat_avatar/chat_avatar.vue
View file @ d8d6af54
<template>
<div
v-if="firstUser && secondUser"
class="direct-conversation-multi-user-avatar"
:style="{ 'width': width, 'height': height }"
>
<StillImage
v-if="fourthUser"
class="avatar avatar-fourth direct-conversation-avatar"
:alt="fourthUser.screen_name"
:title="fourthUser.screen_name"
:src="fourthUser.profile_image_url_original"
error-src="/images/avi.png"
:class="{ 'better-shadow': betterShadow }"
/>
<StillImage
v-if="thirdUser"
class="avatar avatar-third direct-conversation-avatar"
:alt="thirdUser.screen_name"
:title="thirdUser.screen_name"
:src="thirdUser.profile_image_url_original"
error-src="/images/avi.png"
:class="{ 'better-shadow': betterShadow }"
/>
<StillImage
class="avatar avatar-second direct-conversation-avatar"
:alt="secondUser.screen_name"
:title="secondUser.screen_name"
:src="secondUser.profile_image_url_original"
error-src="/images/avi.png"
:class="{ 'better-shadow': betterShadow }"
:style="{ 'height': fourthUser ? '50%' : '100%' }"
/>
<StillImage
class="avatar avatar-first direct-conversation-avatar"
:alt="firstUser.screen_name"
:title="firstUser.screen_name"
:src="firstUser.profile_image_url_original"
error-src="/images/avi.png"
:class="{ 'better-shadow': betterShadow }"
:style="{ 'height': thirdUser ? '50%' : '100%' }"
/>
</div>
<router-link
v-else
:to="getUserProfileLink(firstUser)"
:to="getUserProfileLink(user) || ''"
>
<StillImage
v-if="user"
:style="{ 'width': width, 'height': height }"
class="avatar direct-conversation-avatar single-user"
:alt="firstUser.screen_name"
:title="firstUser.screen_name"
:src="firstUser.profile_image_url_original"
class="avatar chat-avatar single-user"
:alt="user.screen_name"
:title="user.screen_name"
:src="user.profile_image_url_original"
error-src="/images/avi.png"
:class="{ 'better-shadow': betterShadow }"
/>
<div
v-else
class="avatar chat-avatar single-user"
:style="{ 'width': width, 'height': height }"
/>
</router-link>
</template>
......@@ -61,47 +24,7 @@
<style lang="scss">
@import '../../_variables.scss';
.direct-conversation-multi-user-avatar {
position: relative;
cursor: pointer;
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
.avatar.still-image {
width: 50%;
height: 50%;
border-radius: 0;
img, canvas {
object-fit: cover;
}
&.avatar-first {
float: right;
position: absolute;
bottom: 0;
}
&.avatar-second {
float: right;
}
&.avatar-third {
float: right;
position: absolute;
}
&.avatar-fourth {
float: right;
position: absolute;
bottom: 0;
right: 0;
}
}
}
.direct-conversation-avatar {
.chat-avatar {
display: inline-block;
vertical-align: middle;
......
src/components/chat_list/chat_list.js
View file @ d8d6af54
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import ChatListItem from '../chat_list_item/chat_list_item.vue'
import ChatNew from '../chat_new/chat_new.vue'
import List from '../list/list.vue'
import withLoadMore from '../../hocs/with_load_more/with_load_more'
const Chats = withLoadMore({
fetch: (props, $store) => $store.dispatch('fetchChats'),
select: (props, $store) => $store.getters.sortedChatList,
destroy: (props, $store) => undefined,
childPropName: 'items'
})(List)
const ChatList = {
components: {
ChatListItem,
Chats,
List,
ChatNew
},
computed: {
...mapState({
currentUser: state => state.users.currentUser
})
}),
...mapGetters(['sortedChatList'])
},
data () {
return {
......@@ -28,12 +21,12 @@ const ChatList = {
}
},
created () {
this.$store.dispatch('fetchChats', { reset: true })
this.$store.dispatch('fetchChats', { latest: true })
},
methods: {
cancelNewChat () {
this.isNew = false
this.$store.dispatch('fetchChats', { reset: true })
this.$store.dispatch('fetchChats', { latest: true })
},
newChat () {
this.isNew = true
......
src/components/chat_list/chat_list.vue
View file @ d8d6af54
......@@ -4,21 +4,19 @@
</div>
<div
v-else
class="panel panel-default"
style="min-height: calc(100vh - 67px); margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;"
class="chat-list panel panel-default"
>
<div class="panel-heading truncated-text-wrapper">
<span class="title truncated-text">
<div class="panel-heading">
<span class="title">
{{ $t("chats.chats") }}
</span>
<span style="width: 0.75rem;">{{ ' ' }}</span>
<button @click="newChat">
{{ $t("chats.new") }}
</button>
</div>
<div class="panel-body">
<div class="timeline">
<Chats>
<List :items="sortedChatList">
<template
slot="item"
slot-scope="{item}"
......@@ -29,7 +27,7 @@
:chat="item"
/>
</template>
</Chats>
</List>
</div>
</div>
</div>
......@@ -40,17 +38,11 @@
<style lang="scss">
@import '../../_variables.scss';
.truncated-text-wrapper {
overflow-x: hidden;
display: flex;
.truncated-text {
flex: 1;
overflow-x: hidden;
word-wrap: break-word;
white-space: nowrap;
text-overflow: ellipsis;
}
.chat-list {
min-height: calc(100vh - 67px);
margin-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
</style>
src/components/chat_list_item/chat_list_item.js
View file @ d8d6af54
import { mapState } from 'vuex'
import StatusContent from '../status_content/status_content.vue'
import fileType from 'src/services/file_type/file_type.service'
import ChatAvatar from '../chat_avatar/chat_avatar.vue'
import AvatarList from '../avatar_list/avatar_list.vue'
......@@ -14,7 +15,8 @@ const ChatListItem = {
ChatAvatar,
AvatarList,
Timeago,
ChatTitle
ChatTitle,
StatusContent
},
computed: {
...mapState({
......@@ -23,7 +25,7 @@ const ChatListItem = {
attachmentInfo () {
if (this.chat.lastMessage.attachments.length === 0) { return }
let types = this.chat.lastMessage.attachments.map(file => fileType.fileType(file.mimetype))
const types = this.chat.lastMessage.attachments.map(file => fileType.fileType(file.mimetype))
if (types.includes('video')) {
return this.$t('file_type.video')
} else if (types.includes('audio')) {
......@@ -33,6 +35,16 @@ const ChatListItem = {
} else {
return this.$t('file_type.file')
}
},
messageForStatusContent () {
const content = this.chat.lastMessage ? (this.attachmentInfo || this.chat.lastMessage.content) : ''
return {
summary: '',
statusnet_html: content,
text: content,
attachments: []
}
}
},
methods: {
......
src/components/chat_list_item/chat_list_item.scss
View file @ d8d6af54
......@@ -10,7 +10,6 @@
display: flex;
flex-direction: row;
padding: 0.75em;
height: 4.85em;
overflow: hidden;
......@@ -35,122 +34,61 @@
box-sizing: border-box;
overflow: hidden;
word-wrap: break-word;
}
.chat-preview {
display: inline-flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0.35rem 0;
height: 16px;
color: $fallback--text;
color: var(--faintText, $fallback--text);
width: 100%;
justify-content: space-between;
line-height: 1em;
.unread-indicator-wrapper {
display: flex;
align-items: center;
margin-left: 10px;
.unread-indicator {
border-radius: 100%;
height: 8px;
width: 8px;
background-color: $fallback--link;
background-color: var(--link, $fallback--link);
}
}
.content {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex: 1;
margin-right: 15px;
}
.faint-link {
color: var(--faintLink, $fallback--link);
text-decoration: none;
}
.account-name {
min-width: 1.6em;
margin-right: 0.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--faintLink, $fallback--link);
}
.user-name {
margin-right: 0.4em;
flex-shrink: 1;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
overflow: hidden;
flex-shrink: 0;
max-width: 55%;
font-weight: bold;
img {
width: 14px;
height: 14px;
vertical-align: middle;
object-fit: contain
}
}
a {
color: $fallback--link;