random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source 
Report modal style fix, chat updates, statusserializer revert, display name truncation
This commit is contained in:
mgabdev
2020-12-20 12:27:24 -05:00
parent 7ec426e3d8
commit 67eb9d5890
49 changed files with 369 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/javascript/gabsocial/features/chat_conversation_create.js
View File

@@ -37,31 +37,33 @@ class ChatConversationCreate extends React.PureComponent {
return (
<Form>
<div className={[_s.d, _s.px15, _s.pt10].join(' ')}>
<Input
title='Search for a user'
value={query}
onChange={this.onChange}
/>
</div>
<div className={[_s.d, _s.bgPrimary, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.d, _s.px15, _s.pt10].join(' ')}>
<Input
title='Search for a user'
value={query}
onChange={this.onChange}
/>
</div>
<div className={[_s.d, _s.pt10].join(' ')}>
<div className={[_s.d].join(' ')}>
<Text weight='bold' size='small' color='secondary' className={[_s.d, _s.px15, _s.ml15, _s.mt5, _s.mb15].join(' ')}>
Search results ({suggestionsIds.size})
</Text>
{
suggestionsIds &&
suggestionsIds.map((accountId) => (
<Account
compact
key={`chat-conversation-account-create-${accountId}`}
id={accountId}
onActionClick={() => this.handleOnCreateChatConversation(accountId)}
actionIcon='add'
/>
))
}
<div className={[_s.d, _s.pt10].join(' ')}>
<div className={[_s.d].join(' ')}>
<Text weight='bold' size='small' color='secondary' className={[_s.d, _s.px15, _s.ml15, _s.mt5, _s.mb15].join(' ')}>
Search results ({suggestionsIds.size})
</Text>
{
suggestionsIds &&
suggestionsIds.map((accountId) => (
<Account
compact
key={`chat-conversation-account-create-${accountId}`}
id={accountId}
onActionClick={() => this.handleOnCreateChatConversation(accountId)}
actionIcon='add'
/>
))
}
</div>
</div>
</div>
</Form>

21
app/javascript/gabsocial/features/chat_conversation_mutes.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
import BlockHeading from '../components/block_heading'
import ChatConversationsList from './messages/components/chat_conversations_list'
class ChatConversationMutes extends React.PureComponent {
render() {
return (
<div className={[_s.d, _s.w100PC, _s.boxShadowNone].join(' ')}>
<div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<BlockHeading title={'Muted Chat Conversations'} />
</div>
<ChatConversationsList source='mutes' />
</div>
)
}
}
export default ChatConversationMutes

31
app/javascript/gabsocial/features/group_members.js
View File

@@ -62,23 +62,20 @@ class GroupMembers extends ImmutablePureComponent {
<Block>
<BlockHeading title='Group Members' />
{
/* : todo :
<div className={[_s.d, _s.jcCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>
<Input
id='group-member-search'
placeholder='Search group members'
prependIcon='search'
// value={value}
onKeyUp={this.handleKeyUp}
onChange={this.handleOnChange}
onFocus={this.handleOnFocus}
onBlur={this.handleOnBlur}
autoComplete='off'
/>
</div>
*/
}
<div className={[_s.d, _s.jcCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>
<Input
id='group-member-search'
placeholder='Search group members'
prependIcon='search'
// value={value}
onKeyUp={this.handleKeyUp}
onChange={this.handleOnChange}
onFocus={this.handleOnFocus}
onBlur={this.handleOnBlur}
autoComplete='off'
/>
</div>
<div className={[_s.d].join(' ')}>
<ScrollableList
scrollKey='group-members'

14
app/javascript/gabsocial/features/group_removed_accounts.js
View File

@@ -14,6 +14,7 @@ import {
import { FormattedMessage } from 'react-intl'
import Account from '../components/account'
import Block from '../components/block'
import Input from '../components/input'
import BlockHeading from '../components/block_heading'
import ColumnIndicator from '../components/column_indicator'
import ScrollableList from '../components/scrollable_list'
@@ -49,6 +50,19 @@ class GroupRemovedAccounts extends ImmutablePureComponent {
return (
<Block>
<BlockHeading title='Removed Accounts' />
<div className={[_s.d, _s.jcCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>
<Input
id='group-member-search'
placeholder='Search removed group members'
prependIcon='search'
// value={value}
onKeyUp={this.handleKeyUp}
onChange={this.handleOnChange}
onFocus={this.handleOnFocus}
onBlur={this.handleOnBlur}
autoComplete='off'
/>
</div>
<ScrollableList
scrollKey='removed_accounts'
hasMore={hasMore}

11
app/javascript/gabsocial/features/messages/components/chat_message_compose_form.js
View File

@@ -27,6 +27,8 @@ class ChatMessagesComposeForm extends React.PureComponent {
handleOnSendChatMessage = () => {
this.props.onSendChatMessage(this.state.value, this.props.chatConversationId)
document.querySelector('#gabsocial').focus()
this.onBlur()
this.setState({ value: '' })
}
@@ -93,7 +95,7 @@ class ChatMessagesComposeForm extends React.PureComponent {
expiresAtValue,
chatConversationId,
} = this.props
const { value } = this.state
const { focused, value } = this.state
const disabled = false
const textareaClasses = CX({
@@ -141,6 +143,7 @@ class ChatMessagesComposeForm extends React.PureComponent {
onFocus={this.onFocus}
onBlur={this.onBlur}
onKeyDown={this.onKeyDown}
focused={focused}
aria-autocomplete='list'
maxLength={1600}
/>
@@ -170,11 +173,11 @@ class ChatMessagesComposeForm extends React.PureComponent {
if (isXS) {
return (
<div className={[_s.d, _s.z4, _s.minH58PX, _s.w100PC].join(' ')}>
<div className={[_s.d, _s.z4, _s.minH58PX, _s.w100PC, _s.mtAuto].join(' ')}>
<div className={[_s.d, _s.minH58PX, _s.bgPrimary, _s.aiCenter, _s.z3, _s.bottom0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.d, _s.w100PC, _s.pb5, _s.px15, _s.aiCenter, _s.jcCenter, _s.saveAreaInsetPB, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
<div className={[_s.d, _s.flexRow, _s.aiCenter, _s.minH58PX, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary, _s.px10].join(' ')}>
<div className={[_s.d, _s.flexRow, _s.radiusRounded, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden].join(' ')}>
<div className={[_s.d, _s.flexRow, _s.flexGrow1, _s.radiusRounded, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden].join(' ')}>
<div className={_s.d}>
{expiresBtn}
</div>
@@ -182,7 +185,7 @@ class ChatMessagesComposeForm extends React.PureComponent {
{textarea}
</div>
</div>
<div className={[_s.d, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
<div className={[_s.d, _s.pl10, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
{button}
</div>
</div>

17
app/javascript/gabsocial/features/messages/components/chat_message_scrolling_list.js
View File

@@ -39,6 +39,7 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
componentDidMount () {
const { chatConversationId } = this.props
this.props.onExpandChatMessages(chatConversationId)
this.scrollToBottom()
}
componentWillUnmount() {
@@ -63,10 +64,10 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
}
if (prevProps.chatMessageIds.size === 0 && this.props.chatMessageIds.size > 0 && this.scrollContainerRef) {
this.scrollContainerRef.scrollTop = this.scrollContainerRef.scrollHeight
this.scrollToBottom()
this.props.onReadChatConversation(this.props.chatConversationId)
} else if (prevProps.chatMessageIds.size < this.props.chatMessageIds.size && this.scrollContainerRef) {
this.scrollContainerRef.scrollTop = this.scrollContainerRef.scrollHeight
// this.setScrollTop(this.scrollContainerRef.scrollHeight)
}
}
@@ -114,10 +115,15 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
if (!this.scrollContainerRef) return
if (this.scrollContainerRef.scrollTop !== newScrollTop) {
this.lastScrollWasSynthetic = true
console.log("newScrollTop:", newScrollTop)
this.scrollContainerRef.scrollTop = newScrollTop
}
}
scrollToBottom = () => {
this.messagesEnd.scrollIntoView({ behavior: 'smooth' });
}
_selectChild(index, align_top) {
const container = this.node.node
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`)
@@ -163,6 +169,7 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
handleWheel = throttle(() => {
this.scrollToTopOnMouseIdle = false
this.handleScroll()
}, 150, {
trailing: true,
})
@@ -190,7 +197,7 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
handleMouseIdle = () => {
if (this.scrollToTopOnMouseIdle) {
this.setScrollTop(0)
this.setScrollTop(this.scrollContainerRef.scrollHeight)
}
this.mouseMovedRecently = false
@@ -320,6 +327,10 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
</IntersectionObserverArticle>
))
}
<div
style={{ float: 'left', clear: 'both' }}
ref={(el) => { this.messagesEnd = el }}
/>
</div>
</div>
</div>

2
app/javascript/gabsocial/features/messages_settings.js
View File

@@ -38,7 +38,7 @@ class MessagesSettings extends ImmutablePureComponent {
<BlockHeading title={'Chat Preferences'} />
</div>
<div className={[_s.d, _s.px15, _s.py15].join(' ')}>
<div className={[_s.d, _s.px15, _s.py15, _s.overflowHidden].join(' ')}>
<Form>
<Switch
label='Restrict messages from people you dont follow'

1
app/javascript/gabsocial/features/status.js
View File

@@ -61,6 +61,7 @@ const mapStateToProps = (state, props) => {
const statusId = props.id || props.params.statusId
return {
statusId,
status: state.getIn(['statuses', statusId]),
}
}

3
app/javascript/gabsocial/features/ui/ui.js
View File

@@ -68,6 +68,7 @@ import {
ChatConversationCreate,
ChatConversationRequests,
ChatConversationBlockedAccounts,
ChatConversationMutes,
CommunityTimeline,
Compose,
Deck,
@@ -221,7 +222,7 @@ class SwitchingArea extends React.PureComponent {
<WrappedRoute path='/messages/settings' exact page={MessagesPage} component={MessagesSettings} content={children} componentParams={{ isSettings: true }} />
<WrappedRoute path='/messages/requests' exact page={MessagesPage} component={ChatConversationRequests} content={children} componentParams={{ isSettings: true, source: 'requested' }} />
<WrappedRoute path='/messages/blocks' exact page={MessagesPage} component={ChatConversationBlockedAccounts} content={children} componentParams={{ isSettings: true }} />
<WrappedRoute path='/messages/muted_conversations' exact page={MessagesPage} component={ChatConversationBlockedAccounts} content={children} componentParams={{ isSettings: true }} />
<WrappedRoute path='/messages/muted_conversations' exact page={MessagesPage} component={ChatConversationMutes} content={children} componentParams={{ isSettings: true }} />
<WrappedRoute path='/messages/:chatConversationId' exact page={MessagesPage} component={Messages} content={children} componentParams={{ source: 'approved' }} />
<WrappedRoute path='/timeline/all' exact page={CommunityPage} component={CommunityTimeline} content={children} componentParams={{ title: 'Community Feed' }} />

2
app/javascript/gabsocial/features/ui/util/async_components.js
View File

@@ -25,7 +25,9 @@ export function ChatConversationDeleteModal() { return import(/* webpackChunkNam
export function ChatConversationOptionsPopover() { return import(/* webpackChunkName: "components/chat_conversation_options_popover" */'../../../components/popover/chat_conversation_options_popover') }
export function ChatConversationRequests() { return import(/* webpackChunkName: "features/chat_conversation_requests" */'../../chat_conversation_requests') }
export function ChatConversationExpirationOptionsPopover() { return import(/* webpackChunkName: "components/chat_conversation_expiration_options_popover" */'../../../components/popover/chat_conversation_expiration_options_popover') }
export function ChatConversationMutes() { return import(/* webpackChunkName: "features/chat_conversation_mutes" */'../../chat_conversation_mutes') }
export function ChatMessageOptionsPopover() { return import(/* webpackChunkName: "components/chat_message_options_popover" */'../../../components/popover/chat_message_options_popover') }
export function ChatSettingsPopover() { return import(/* webpackChunkName: "components/chat_settings_popover" */'../../../components/popover/chat_settings_popover') }
export function CommentSortingOptionsPopover() { return import(/* webpackChunkName: "components/comment_sorting_options_popover" */'../../../components/popover/comment_sorting_options_popover') }
export function CommunityTimeline() { return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline') }
export function Compose() { return import(/* webpackChunkName: "features/compose" */'../../compose') }

9
app/javascript/gabsocial/features/ui/util/wrapped_route.js
View File

@@ -43,15 +43,6 @@ class WrappedRoute extends React.PureComponent {
...rest
} = this.props
// : todo :
// api().get('/api/v1/accounts/verify_credentials')
// .then((res) => {
// console.log("res:", res)
// })
// .catch((err) => {
// console.log("err:", err)
// })
if (!publicRoute && !me) {
const actualUrl = encodeURIComponent(this.props.computedMatch.url)
return <Route path={this.props.path} component={() => {