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

14
app/javascript/gabsocial/components/display_name.js
View File

@@ -106,8 +106,7 @@ class DisplayName extends ImmutablePureComponent {
const usernameClasses = CX({
text: 1,
displayFlex: 1,
flexNormal: 1,
flexShrink1: 1,
flexShrink0: 1,
overflowWrapBreakWord: 1,
textOverflowEllipsis: 1,
cSecondary: 1,
@@ -131,17 +130,10 @@ class DisplayName extends ImmutablePureComponent {
const isFollowedBy = (me !== accountId && account.getIn(['relationship', 'followed_by']))
if (isFollowedBy) {
relationshipLabel = 'Follows you'//intl.formatMessage(messages.accountFollowsYou)
relationshipLabel = 'Follows you'
}
}
// {
// /* : todo : audio-mute, bot
// account.getIn(['relationship', 'muting'])
// */
// }
// bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
return (
<div
className={containerClassName}
@@ -149,7 +141,7 @@ class DisplayName extends ImmutablePureComponent {
onMouseLeave={noHover ? undefined : this.handleMouseLeave}
ref={this.setRef}
>
<span className={[_s.d, _s.flexRow, _s.aiCenter, _s.maxW100PC].join(' ')}>
<span className={[_s.d, _s.flexRow, _s.aiCenter, _s.maxW100PC, _s.flexShrink1, _s.overflowHidden].join(' ')}>
<bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
<strong
className={displayNameClasses}

11
app/javascript/gabsocial/components/modal/report_modal.js
View File

@@ -55,6 +55,7 @@ class ReportModal extends ImmutablePureComponent {
return (
<ModalLayout
width={760}
noPadding
title={intl.formatMessage(messages.target, {
target: account.get('acct')
@@ -67,7 +68,7 @@ class ReportModal extends ImmutablePureComponent {
classNamesSmall={[_s.d, _s.flexColumnReverse].join(' ')}
>
<ResponsiveClassesComponent
classNames={[_s.d, _s.w50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
classNames={[_s.d, _s.maxW320PX, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
classNamesSmall={[_s.d, _s.w100PC, _s.py10, _s.px15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
>
<Text color='secondary' size='small'>
@@ -95,13 +96,13 @@ class ReportModal extends ImmutablePureComponent {
</ResponsiveClassesComponent>
<ResponsiveClassesComponent
classNames={[_s.d, _s.w50PC, _s.maxH80VH].join(' ')}
classNames={[_s.d, _s.flexNormal, _s.maxH80VH].join(' ')}
classNamesSmall={[_s.d, _s.w100PC, _s.h260PX].join(' ')}
>
<div className={[_s.d, _s.h100PC, _s.overflowYScroll, _s.pr15, _s.py10].join(' ')}>
<div className={[_s.d, _s.h100PC, _s.overflowYScroll].join(' ')}>
{
statusIds.map(statusId => (
<StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />
statusIds.map((statusId) => (
<StatusCheckBox id={statusId} key={`reporting-${statusId}`} disabled={isSubmitting} />
))
}
</div>

25
app/javascript/gabsocial/components/navigation_bar/chat_navigation_bar_xs.js
View File

@@ -33,6 +33,9 @@ class ChatNavigationBar extends React.PureComponent {
const otherAccounts = chatConversation ? chatConversation.get('other_accounts') : null
const nameHTML = !!otherAccounts ? otherAccounts.get(0).get('display_name_html') : ''
// : todo :
// fix padding on mobile device
return (
<div className={[_s.d, _s.z4, _s.h53PX, _s.w100PC].join(' ')}>
<div className={[_s.d, _s.h53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
@@ -46,23 +49,29 @@ class ChatNavigationBar extends React.PureComponent {
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
/>
<div className={[_s.d, _s.h53PX, _s.flexRow, _s.jcCenter, _s.aiCenter, _s.mrAuto].join(' ')}>
<AvatarGroup accounts={otherAccounts} size={35} noHover />
<Heading size='h1'>
<div className={[_s.dangerousContent, _s.colorNavigation, _s.pl10, _s.fs19PX].join(' ')} dangerouslySetInnerHTML={{ __html: nameHTML }} />
</Heading>
<div className={[_s.d, _s.minH53PX, _s.flexRow, _s.aiCenter, _s.mrAuto, _s.flex1, _s.overflowHidden].join(' ')}>
<div className={[_s.d, _s.minH53PX, _s.jcCenter, _s.w100PC, _s.flexShrink1].join(' ')}>
<Heading size='h1'>
<div className={[_s.d, _s.w100PC].join(' ')}>
<span
className={[_s.w100PC, _s.textOverflowEllipsis, _s.colorNavigation].join(' ')}
dangerouslySetInnerHTML={{ __html: nameHTML }}
/>
</div>
</Heading>
</div>
</div>
<div className={[_s.d, _s.h53PX, _s.mlAuto, _s.aiCenter, _s.jcCenter, _s.mr15].join(' ')}>
<Button
isNarrow
backgroundColor='tertiary'
backgroundColor='none'
color='primary'
onClick={this.handleOnOpenChatConversationOptionsPopover}
className={[_s.px5].join(' ')}
icon='ellipsis'
iconClassName={[_s.cSecondary, _s.px5, _s.py5].join(' ')}
iconSize='15px'
iconClassName={[_s.colorNavigation, _s.px5, _s.py5].join(' ')}
iconSize='26px'
/>
</div>

20
app/javascript/gabsocial/components/navigation_bar/profile_navigation_bar.js
View File

@@ -24,6 +24,9 @@ class ProfileNavigationBar extends React.PureComponent {
render() {
const { titleHTML } = this.props
// : todo :
// fix padding on mobile device
return (
<div className={[_s.d, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
<div className={[_s.d, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
@@ -36,12 +39,17 @@ class ProfileNavigationBar extends React.PureComponent {
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
/>
<div className={[_s.d, _s.minH53PX, _s.jcCenter, _s.mrAuto].join(' ')}>
<Heading size='h1'>
<span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}>
<div dangerouslySetInnerHTML={{ __html: titleHTML }} />
</span>
</Heading>
<div className={[_s.d, _s.minH53PX, _s.mrAuto, _s.flex1, _s.overflowHidden].join(' ')}>
<div className={[_s.d, _s.minH53PX, _s.jcCenter, _s.w100PC].join(' ')}>
<Heading size='h1'>
<div className={[_s.d, _s.w100PC].join(' ')}>
<span
className={[_s.w100PC, _s.textOverflowEllipsis, _s.colorNavigation].join(' ')}
dangerouslySetInnerHTML={{ __html: titleHTML }}
/>
</div>
</Heading>
</div>
</div>
<div className={[_s.d, _s.minH53PX, _s.jcCenter, _s.mr15].join(' ')}>

1
app/javascript/gabsocial/components/popover/chat_conversation_expiration_options_popover.js
View File

@@ -35,7 +35,6 @@ class ChatConversationExpirationOptionsPopover extends React.PureComponent {
isXS,
} = this.props
console.log("expiresAtValue:", expiresAtValue)
if (!chatConversationId) return <div/>
const listItems = [

2
app/javascript/gabsocial/components/popover/chat_conversation_options_popover.js
View File

@@ -6,6 +6,7 @@ import { connect } from 'react-redux'
import { closePopover } from '../../actions/popover'
import { openModal } from '../../actions/modal'
import { hideChatConversation } from '../../actions/chat_conversations'
import { setChatConversationSelected } from '../../actions/chats'
import {
muteChatConversation,
unmuteChatConversation,
@@ -107,6 +108,7 @@ const mapDispatchToProps = (dispatch, { chatConversationId }) => ({
},
onHide() {
dispatch(hideChatConversation(chatConversationId))
dispatch(setChatConversationSelected(null))
},
onMute() {
dispatch(muteChatConversation(chatConversationId))

54
app/javascript/gabsocial/components/popover/chat_settings_popover.js Normal file
View File

@@ -0,0 +1,54 @@
import React from 'react'
import PropTypes from 'prop-types'
import PopoverLayout from './popover_layout'
import List from '../list'
class ChatSettingsPopover extends React.PureComponent {
handleOnClosePopover = () => {
this.props.onClose()
}
render() {
const { intl, isXS } = this.props
return (
<PopoverLayout width={240} isXS={isXS}>
<List
size={isXS ? 'large' : 'small'}
scrollKey='profile_options'
items={[
{
title: 'Preferences',
to: '/messages/settings',
onClick: () => this.handleOnClosePopover(),
},
{
title: 'Message Requests',
to: '/messages/requests',
onClick: () => this.handleOnClosePopover(),
},
{
title: 'Blocked Chat Messengers',
to: '/messages/blocks',
onClick: () => this.handleOnClosePopover(),
},
{
title: 'Muted Conversations',
to: '/messages/muted_conversations',
onClick: () => this.handleOnClosePopover(),
},
]}
/>
</PopoverLayout>
)
}
}
ChatSettingsPopover.propTypes = {
onClose: PropTypes.func.isRequired,
isXS: PropTypes.bool,
}
export default ChatSettingsPopover

2
app/javascript/gabsocial/components/popover/date_picker_popover.js
View File

@@ -70,7 +70,7 @@ class DatePickerPopover extends React.PureComponent {
<div className={[_s.d, _s.aiCenter, _s.flexRow, _s.px10, _s.py10, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
<Text size='extraSmall' color='secondary'>
<FormattedMessage id='scheduled_for_datetime' defaultMessage='Scheduled for {datetime}' values={{
datetime: moment.utc(date).format('lll'),
datetime: moment(date).format('lll'),
}}/>
</Text>
<div className={_s.mlAuto}>

5
app/javascript/gabsocial/components/popover/popover_root.js
View File

@@ -3,6 +3,7 @@ import {
POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS,
POPOVER_CHAT_CONVERSATION_OPTIONS,
POPOVER_CHAT_MESSAGE_OPTIONS,
POPOVER_CHAT_SETTINGS,
POPOVER_COMMENT_SORTING_OPTIONS,
POPOVER_COMPOSE_POST_DESTINATION,
POPOVER_DATE_PICKER,
@@ -27,6 +28,7 @@ import {
ChatConversationExpirationOptionsPopover,
ChatConversationOptionsPopover,
ChatMessageOptionsPopover,
ChatSettingsPopover,
CommentSortingOptionsPopover,
ComposePostDesinationPopover,
DatePickerPopover,
@@ -65,6 +67,7 @@ const POPOVER_COMPONENTS = {
[POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS]: ChatConversationExpirationOptionsPopover,
[POPOVER_CHAT_CONVERSATION_OPTIONS]: ChatConversationOptionsPopover,
[POPOVER_CHAT_MESSAGE_OPTIONS]: ChatMessageOptionsPopover,
[POPOVER_CHAT_SETTINGS]: ChatSettingsPopover,
[POPOVER_COMMENT_SORTING_OPTIONS]: CommentSortingOptionsPopover,
[POPOVER_COMPOSE_POST_DESTINATION]: ComposePostDesinationPopover,
[POPOVER_DATE_PICKER]: DatePickerPopover,
@@ -161,7 +164,7 @@ class PopoverRoot extends React.PureComponent {
renderDelay={150}
>
{
(Component) => <Component innerRef={this.setRef} isXS={isXS} {...props} />
(Component) => <Component innerRef={this.setRef} isXS={isXS} onClose={onClose} {...props} />
}
</Bundle>
}

7
app/javascript/gabsocial/components/status.js
View File

@@ -310,12 +310,15 @@ class Status extends ImmutablePureComponent {
commentSortingType,
onOpenProModal,
isDeckConnected,
statusId,
} = this.props
// const { height } = this.state
let { status } = this.props
if (!status) return null
if (!status) {
return null
}
if (isComment && !ancestorStatus && !isChild) {
// Wait to load...
@@ -331,7 +334,7 @@ class Status extends ImmutablePureComponent {
if (ancestorStatus) {
status = ancestorStatus
} else {
if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
if (status.get('reblog', null) !== null) {
rebloggedByText = intl.formatMessage(
{ id: 'status.reposted_by', defaultMessage: '{name} reposted' },
{ name: status.getIn(['account', 'acct']) }

18
app/javascript/gabsocial/components/status_check_box.js
View File

@@ -46,17 +46,27 @@ class StatusCheckBox extends ImmutablePureComponent {
} else {
media = (
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} >
{Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} onOpenMedia={noop} />}
{Component => (
<Component
media={status.get('media_attachments')}
sensitive={status.get('sensitive')}
onOpenMedia={noop}
width={239}
height={110}
/>
)}
</Bundle>
);
}
}
return (
<div className={[_s.d, _s.flexRow].join(' ')}>
<div className={[_s.d].join(' ')}>
<div className={[_s.d, _s.flexRow, _s.flexWrap, _s.borderBottom1PX, _s.borderColorSecondary, _s.aiStart, _s.mb5, _s.pr15, _s.pt5, _s.w100PC].join(' ')}>
<div className={[_s.d, _s.pt5, _s.maxW100PC].join(' ')}>
<StatusContent status={status} />
{media}
<div className={_s.pl15}>
{media}
</div>
</div>
<div className={[_s.d, _s.mlAuto].join(' ')}>

13
app/javascript/gabsocial/components/status_header.js
View File

@@ -79,7 +79,8 @@ class StatusHeader extends ImmutablePureComponent {
const textContainerClasses = CX({
d: 1,
aiStart: 1,
flexGrow1 :1,
flex1: 1,
overflowHidden: 1,
mt5: !isCompact,
})
@@ -100,13 +101,15 @@ class StatusHeader extends ImmutablePureComponent {
<div className={textContainerClasses}>
<div className={[_s.d, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
<div className={[_s.d, _s.flexRow, _s.w100PC, _s.aiStart, _s.overflowHidden].join(' ')}>
<NavLink
className={[_s.d, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
className={[_s.d, _s.flexRow, _s.aiStart, _s.noUnderline, _s.flex1, _s.maxW100PC30PX].join(' ')}
to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])}
>
<DisplayName account={status.get('account')} noRelationship />
<div className={[_s.d, _s.w100PC, _s.overflowHidden].join(' ')}>
<DisplayName account={status.get('account')} noRelationship />
</div>
</NavLink>
{
@@ -118,7 +121,7 @@ class StatusHeader extends ImmutablePureComponent {
icon='ellipsis'
iconSize='20px'
iconClassName={_s.cSecondary}
className={_s.mlAuto}
className={[_s.mlAuto].join(' ')}
onClick={this.handleOpenStatusOptionsPopover}
buttonRef={this.setStatusOptionsButton}
/>

2
app/javascript/gabsocial/components/timeline_injections/user_suggestions_injection.js
View File

@@ -44,7 +44,7 @@ class UserSuggestionsInjection extends ImmutablePureComponent {
id={injectionId}
title={title}
buttonLink='/suggestions'
buttonTitle='See more reccomendations'
buttonTitle='See more recommendations'
isXS={isXS}
>
{