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

Progress

Browse Source
This commit is contained in:
mgabdev 2020-04-28 22:24:35 -04:00
parent c3d0d8bde2
commit 5efe40f301
34 changed files with 448 additions and 557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/gabsocial/actions/compose.js
View File

@ -2,7 +2,7 @@ import api from '../api';
import { CancelToken, isCancel } from 'axios';
import throttle from 'lodash.throttle'
import { search as emojiSearch } from '../components/emoji/emoji_mart_search_light';
import { urlRegex } from '../features/compose/util/url_regex'
import { urlRegex } from '../features/ui/util/url_regex'
import { tagHistory } from '../settings';
import { useEmoji } from './emojis';
import resizeImage from '../utils/resize_image';

2
app/javascript/gabsocial/components/account.js
View File

@ -83,6 +83,7 @@ class Account extends ImmutablePureComponent {
expanded: PropTypes.bool,
showDismiss: PropTypes.bool,
dismissAction: PropTypes.func,
withBio: PropTypes.bool,
}
updateOnProps = [
@ -91,6 +92,7 @@ class Account extends ImmutablePureComponent {
'compact',
'expanded',
'showDismiss',
'withBio',
]
handleAction = () => {

31
app/javascript/gabsocial/components/autosuggest_textbox.js
View File

@ -246,24 +246,21 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
return (
<Fragment>
<div className={[_s.default, _s.flexGrow1, _s.maxWidth100PC].join(' ')}>
<div className={[_s.default].join(' ')}>
<Composer
inputRef={this.setTextbox}
disabled={disabled}
placeholder={placeholder}
autoFocus={autoFocus}
value={value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp}
onFocus={this.onFocus}
onBlur={this.onBlur}
onPaste={this.onPaste}
small={small}
/>
<Composer
inputRef={this.setTextbox}
disabled={disabled}
placeholder={placeholder}
autoFocus={autoFocus}
value={value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp}
onFocus={this.onFocus}
onBlur={this.onBlur}
onPaste={this.onPaste}
small={small}
/>
</div>
{children}
</div>
{ /* : todo : put in popover */ }

11
app/javascript/gabsocial/components/column_header.js
View File

@ -55,8 +55,11 @@ export default class ColumnHeader extends PureComponent {
{title}
</Heading>
</div>
<TabBar tabs={tabs} />
{
!!tabs &&
<TabBar tabs={tabs} />
}
{
!!actions &&
@ -65,10 +68,10 @@ export default class ColumnHeader extends PureComponent {
actions.map((action, i) => (
<Button
backgroundColor='none'
color='secondary'
color='primary'
onClick={() => action.onClick()}
key={`column-header-action-btn-${i}`}
className={[_s.ml5, _s.fillColorBrand_onHover, _s.backgroundColorBrandLightOpaque_onHover, _s.px10].join(' ')}
className={[_s.ml5, _s.px10].join(' ')}
icon={action.icon}
iconClassName={_s.inheritFill}
iconSize='15px'

2
app/javascript/gabsocial/components/comment.js
View File

@ -60,7 +60,7 @@ class Comment extends ImmutablePureComponent {
<Avatar account={status.get('account')} size={32} />
</NavLink>
<div className={_s.default}>
<div className={[_s.default, _s.flexNormal].join(' ')}>
<div className={[_s.default, _s.px10, _s.pt5, _s.pb10, _s.radiusSmall, _s.backgroundColorSubtle].join(' ')}>
<CommentHeader status={status} />
<StatusContent

2
app/javascript/gabsocial/components/composer.js
View File

@ -8,7 +8,7 @@ import {
} from 'draft-js'
import { draftToMarkdown } from 'markdown-draft-js'
// import draftToMarkdown from 'draftjs-to-markdown'
import { urlRegex } from '../features/compose/util/url_regex'
import { urlRegex } from '../features/ui/util/url_regex'
import classNames from 'classnames/bind'
import RichTextEditorBar from './rich_text_editor_bar'

122
app/javascript/gabsocial/components/group_header.js
View File

@ -1,36 +1,45 @@
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
import classNames from 'classnames/bind'
import { defineMessages, injectIntl } from 'react-intl'
import { openPopover, closePopover } from '../actions/popover'
import { initReport } from '../actions/reports'
import { openModal } from '../actions/modal'
import { unfollowModal, me } from '../initial_state'
import Avatar from './avatar'
import { joinGroup, leaveGroup } from '../actions/groups'
import { PLACEHOLDER_MISSING_HEADER_SRC } from '../constants'
import Button from './button'
import Block from './block'
import Icon from './icon'
import Image from './image'
import TabBar from './tab_bar'
import Text from './text'
const cx = classNames.bind(_s)
const messages = defineMessages({
follow: { id: 'follow', defaultMessage: 'Follow' },
unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
requested: { id: 'requested', defaultMessage: 'Requested' },
unblock: { id: 'unblock', defaultMessage: 'Unblock' },
followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Follows' },
profile: { id: 'account.profile', defaultMessage: 'Profile' },
join: { id: 'groups.join', defaultMessage: 'Join group' },
leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
share: { id: 'status.share', defaultMessage: 'Share' },
removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' },
group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' },
group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
})
const mapDispatchToProps = (dispatch, { intl }) => ({
toggleMembership(group, relationships) {
if (relationships.get('member')) {
dispatch(leaveGroup(group.get('id')));
} else {
dispatch(joinGroup(group.get('id')));
}
},
onShare() {
},
onOpenGroupOptions() {
},
openProfileOptionsPopover(props) {
console.log('props:', props)
dispatch(openPopover('PROFILE_OPTIONS', props))
dispatch(openPopover('GROUP_OPTIONS', props))
},
});
@ -41,65 +50,95 @@ export default
class GroupHeader extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
group: ImmutablePropTypes.map,
intl: PropTypes.object.isRequired,
onToggleMembership: PropTypes.func.isRequired,
onShare: PropTypes.func.isRequired,
onOpenGroupOptions: PropTypes.func.isRequired,
relationships: ImmutablePropTypes.map,
}
handleOnToggleMembership = () => {
const { group, relationships } = this.props
this.props.onToggleMembership(group, relationships);
}
render() {
const { intl, relationships, group } = this.props
const {
group,
intl,
onShare,
onOpenGroupOptions,
relationships,
} = this.props
const tabs = !group ? null : [
{
to: `/groups/${group.get('id')}`,
title: 'Latest',
},
{
to: `/groups/${group.get('id')}/pinned`,
title: 'Pinned',
},
{
to: `/groups/${group.get('id')}/popular`,
title: 'Popular',
},
]
const coverSrc = !!group ? group.get('cover_image_url') : undefined
const coverSrc = !!group ? group.get('cover_image_url') : ''
const coverSrcMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
const title = !!group ? group.get('title') : undefined
let actionButtonTitle
let actionButtonOptions = {}
if (relationships) {
const isMember = relationships.get('member')
actionButtonTitle = intl.formatMessage(!isMember ? messages.join : messages.leave)
if (isMember) {
actionButtonOptions = {
backgroundColor: 'tertiary',
color: 'primary',
}
}
}
// : todo :
// {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
// const adminMenu = [
// { text: intl.formatMessage(messages.edit), to: `/groups/${group.get('id')}/edit` },
// { text: intl.formatMessage(messages.removed_accounts), to: `/groups/${group.get('id')}/removed-accounts` },
// ]
return (
<div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
<Block>
<div className={[_s.default, _s.width100PC].join(' ')}>
{
!!coverSrc &&
coverSrc && !coverSrcMissing &&
<Image className={_s.height350PX} src={coverSrc} alt={title} />
}
<div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
<TabBar tabs={tabs} />
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
<Button
color='primary'
backgroundColor='tertiary'
radiusSmall
className={_s.mr5}
>
<Text color='inherit' size='small'>
Leave/Join
{
!!actionButtonTitle &&
<Button
radiusSmall
className={_s.mr5}
{...actionButtonOptions}
>
<Text color='inherit' size='small'>
{actionButtonTitle}
</Text>
</Button>
</Button>
}
<Button
color='primary'
backgroundColor='tertiary'
radiusSmall
className={_s.mr5}
onClick={onShare}
>
<Text color='inherit' size='small'>
Share
{intl.formatMessage(messages.share)}
</Text>
</Button>
<Button
@ -108,6 +147,7 @@ class GroupHeader extends ImmutablePureComponent {
backgroundColor='tertiary'
className={_s.mr5}
icon='ellipsis'
onClick={onOpenGroupOptions}
/>
</div>
</div>

39
app/javascript/gabsocial/components/hashtag_item.js
View File

@ -9,12 +9,13 @@ export default class HashtagItem extends ImmutablePureComponent {
static propTypes = {
hashtag: ImmutablePropTypes.map.isRequired,
isCompact: PropTypes.bool,
}
updateOnProps = ['hashtag']
render() {
const { hashtag } = this.props
const { hashtag, isCompact } = this.props
const count = hashtag.get('history').map((block) => {
return parseInt(block.get('uses'))
@ -31,22 +32,28 @@ export default class HashtagItem extends ImmutablePureComponent {
{hashtag.get('name')}
</Text>
</div>
<Button
isText
backgroundColor='none'
color='none'
title='Remove'
icon='close'
iconSize='8px'
iconClassName={_s.fillColorSecondary}
className={_s.mlAuto}
/>
{
!isCompact &&
<Button
isText
backgroundColor='none'
color='none'
title='Remove'
icon='close'
iconSize='8px'
iconClassName={_s.fillColorSecondary}
className={_s.mlAuto}
/>
}
</div>
<Text color='secondary' size='small' className={_s.py2}>
<FormattedMessage id='number_of_gabs' defaultMessage='{count} Gabs' values={{
count,
}} />
</Text>
{
!isCompact &&
<Text color='secondary' size='small' className={_s.py2}>
<FormattedMessage id='number_of_gabs' defaultMessage='{count} Gabs' values={{
count,
}} />
</Text>
}
</NavLink>
)
}

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

@ -22,7 +22,7 @@ export default class Input extends PureComponent {
small: PropTypes.bool,
readOnly: PropTypes.string,
inputRef: PropTypes.func,
id: PropTypes.string,
id: PropTypes.string.isRequired,
hideLabel: PropTypes.bool,
}
@ -71,13 +71,6 @@ export default class Input extends PureComponent {
pr15: !hasClear,
})
const titleClasses = cx({
default: 1,
mb10: 1,
pl15: 1,
displayNone: hideLabel,
})
const btnClasses = cx({
displayNone: !value || value.length === 0,
px10: 1,
@ -87,8 +80,8 @@ export default class Input extends PureComponent {
return (
<Fragment>
{
!!title &&
<div className={titleClasses}>
!!title && !hideLabel &&
<div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
<Text htmlFor={id} size='small' weight='medium' color='secondary' tagName='label'>
{title}
</Text>
@ -100,6 +93,11 @@ export default class Input extends PureComponent {
<Icon id={prependIcon} size='16px' className={[_s.fillColorPrimary, _s.ml15, _s.mr5].join(' ')} />
}
{
!!title && hideLabel &&
<label className={_s.visiblyHidden} htmlFor={id}>{title}</label>
}
<input
id={id}
className={inputClasses}

73
app/javascript/gabsocial/components/navigation_bar.js Normal file
View File

@ -0,0 +1,73 @@
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { NavLink } from 'react-router-dom'
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import { me } from '../initial_state'
import { makeGetAccount } from '../selectors'
import Responsive from '../features/ui/util/responsive_component'
import ColumnHeader from './column_header'
import Search from './search'
import Icon from './icon'
const mapStateToProps = (state) => ({
account: makeGetAccount()(state, me),
})
export default
@connect(mapStateToProps)
class NavigationBar extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map,
actions: PropTypes.array,
tabs: PropTypes.array,
title: PropTypes.string,
showBackBtn: PropTypes.bool,
}
render() {
const {
title,
showBackBtn,
actions,
tabs,
account,
} = this.props
const isPro = account.get('is_pro')
return (
<div className={[_s.default, _s.height53PX, _s.flexRow, _s.backgroundColorPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
<div className={[_s.default, _s.width240PX].join(' ')}>
<div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX].join(' ')}>
<h1 className={[_s.default].join(' ')}>
<NavLink to='/' aria-label='Gab' className={[_s.default, _s.flexRow, _s.noSelect, _s.noUnderline, _s.height50PX, _s.cursorPointer, _s.px10].join(' ')}>
<Icon id='gab-logo' />
</NavLink>
</h1>
</div>
</div>
</div>
<div className={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader
title={title}
showBackBtn={showBackBtn}
actions={actions}
tabs={tabs}
/>
</div>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.width340PX].join(' ')}>
<Search />
</div>
</Responsive>
</div>
</div>
</div>
)
}
}

6
app/javascript/gabsocial/components/panel/groups_panel.js
View File

@ -37,6 +37,12 @@ class GroupSidebarPanel extends ImmutablePureComponent {
fetched: false,
}
componentDidMount() {
if (!this.props.isLazy) {
this.props.onFetchGroups('member')
}
}
static getDerivedStateFromProps(nextProps, prevState) {
if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
return {

5
app/javascript/gabsocial/components/search.js
View File

@ -105,13 +105,16 @@ class Search extends PureComponent {
hasClear
value={value}
inputRef={this.setTextbox}
id='search'
prependIcon='search'
placeholder='Search on Gab...'
placeholder='Search Gab'
onChange={this.handleChange}
onKeyUp={this.handleKeyUp}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onClear={onClear}
hideLabel
title='Search'
/>
{

32
app/javascript/gabsocial/components/sidebar_section_item.js
View File

@ -113,23 +113,21 @@ export default class SidebarSectionItem extends PureComponent {
className={[_s.default, _s.noUnderline, _s.outlineNone, _s.cursorPointer, _s.width100PC, _s.backgroundTransparent].join(' ')}
>
<div className={containerClasses}>
<div className={[_s.default]}>
{
icon &&
<Icon id={icon} className={iconClasses} size={iconSize} />
}
{
image &&
<Image
alt={title}
className={_s.circle}
width={iconSize}
height={iconSize}
src={image}
/>
}
</div>
{
icon &&
<Icon id={icon} className={iconClasses} size={iconSize} />
}
{
image &&
<Image
alt={title}
className={_s.circle}
width={iconSize}
height={iconSize}
src={image}
/>
}
<div className={[_s.default, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
<span className={textClasses}>{title}</span>

2
app/javascript/gabsocial/components/trends_item.js
View File

@ -1,6 +1,6 @@
import { Fragment } from 'react'
import classNames from 'classnames/bind'
import { urlRegex } from '../features/compose/util/url_regex'
import { urlRegex } from '../features/ui/util/url_regex'
import Button from './button'
import DotTextSeperator from './dot_text_seperator'
import Image from './image'

2
app/javascript/gabsocial/components/zoomable_image.js
View File

@ -24,7 +24,7 @@ const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
// @include max-size($media-modal-media-max-width, $media-modal-media-max-height);
// }
// }
// : todo :
export default class ZoomableImage extends PureComponent {

30
app/javascript/gabsocial/features/compose/components/compose_extra_button.js
View File

@ -33,6 +33,7 @@ export default class ComposeExtraButton extends PureComponent {
px10: !small,
py5: small,
px5: small,
mr2: !children,
})
const iconClasses = cx({
@ -42,18 +43,27 @@ export default class ComposeExtraButton extends PureComponent {
const iconSize = !!small ? '14px' : '16px'
const button = (
<Button
className={btnClasses}
title={title}
isDisabled={disabled}
onClick={onClick}
backgroundColor='none'
iconClassName={iconClasses}
icon={icon}
iconSize={iconSize}
buttonRef={!children ? buttonRef : undefined}
/>
)
if (!children) {
return button
}
return (
<div className={[_s.default, _s.mr2].join(' ')} ref={buttonRef}>
<Button
className={btnClasses}
title={title}
isDisabled={disabled}
onClick={onClick}
backgroundColor='none'
iconClassName={iconClasses}
icon={icon}
iconSize={iconSize}
/>
{button}
{children}
</div>
)

12
app/javascript/gabsocial/features/compose/components/compose_form.js
View File

@ -3,7 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { length } from 'stringz'
import { isMobile } from '../../../utils/is_mobile'
import { countableText } from '../util/counter'
import { countableText } from '../../ui/util/counter'
import {
CX,
MAX_POST_CHARACTER_COUNT,
@ -239,7 +239,7 @@ class ComposeForm extends ImmutablePureComponent {
} = this.props
const disabled = isSubmitting
const text = [this.props.spoilerText, countableText(this.props.text)].join('');
const disabledButton = disabled || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
const disabledButton = disabled || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text) !== 0 && length(text.trim()) === 0 && !anyMedia);
const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
const parentContainerClasses = CX({
@ -406,7 +406,7 @@ class ComposeForm extends ImmutablePureComponent {
<Button
isNarrow
onClick={this.handleSubmit}
disabled={disabledButton}
isDisabled={disabledButton}
className={_s.px10}
>
{intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
@ -421,8 +421,12 @@ class ComposeForm extends ImmutablePureComponent {
}
{
!shouldCondense && !disabledButton &&
!shouldCondense &&
<Button
isOutline
isDisabled={disabledButton}
backgroundColor='none'
color='brand'
className={[_s.fontSize15PX, _s.px15].join(' ')}
onClick={this.handleSubmit}
>

118
app/javascript/gabsocial/features/compose/components/search_results.js
View File

@ -1,118 +0,0 @@
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { FormattedMessage } from 'react-intl'
import { withRouter } from 'react-router-dom';
import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
import HashtagItem from '../../../components/hashtag_item'
import Icon from '../../../components/icon'
import { WhoToFollowPanel } from '../../../components/panel'
// import TrendsPanel from '../../ui/components/trends_panel'
import GroupListItem from '../../../components/group_list_item'
import Block from '../../../components/block'
import Heading from '../../../components/heading'
import Button from '../../../components/button'
import Text from '../../../components/text'
import Account from '../../../components/account'
const mapStateToProps = (state) => ({
results: state.getIn(['search', 'results']),
suggestions: state.getIn(['suggestions', 'items']),
});
const mapDispatchToProps = (dispatch) => ({
fetchSuggestions: () => dispatch(fetchSuggestions()),
dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
});
export default
@withRouter
@connect(mapStateToProps, mapDispatchToProps)
class SearchResults extends ImmutablePureComponent {
static propTypes = {
results: ImmutablePropTypes.map.isRequired,
location: PropTypes.object,
}
state = {
isSmallScreen: (window.innerWidth <= 895),
}
render () {
const { results, location } = this.props
const { isSmallScreen } = this.state
if (results.isEmpty() && isSmallScreen) {
return (
<div />
)
}
const pathname = location.pathname || ''
const showPeople = pathname === '/search/people'
const showHashtags = pathname === '/search/hashtags'
const showGroups = pathname === '/search/groups'
const isTop = !showPeople && !showHashtags && !showGroups
let accounts, statuses, hashtags, groups
if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
const size = isTop ? Math.min(results.get('accounts').size, 5) : results.get('accounts').size;
accounts = (
<div className={[_s.default, _s.py15].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.mb15, _s.px15].join(' ')}>
<Heading size='h2'>
People
</Heading>
<div className={[_s.default, _s.mlAuto].join(' ')}>
<Button
isText
backgroundColor='none'
color='brand'
to='/search/people'
>
<Text size='small' color='inherit' weight='bold'>
See All
</Text>
</Button>
</div>
</div>
{
results.get('accounts').slice(0, size).map(accountId => <Account compact key={accountId} id={accountId} />)
}
</div>
);
}
if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) {
const size = isTop ? Math.min(results.get('groups').size, 5) : results.get('groups').size;
groups = (
<div className='search-results__section'>
<h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.groups' defaultMessage='Groups' /></h5>
{results.get('groups').slice(0, size).map(group => <GroupListItem key={`search-${group.get('name')}`} group={group} />)}
</div>
);
}
if (results.get('hashtags') && results.get('hashtags').size > 0 && (isTop || showHashtags)) {
const size = isTop ? Math.min(results.get('hashtags').size, 5) : results.get('hashtags').size;
hashtags = (
<div className='search-results__section'>
<h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
{results.get('hashtags').slice(0, size).map(hashtag => <HashtagItem key={hashtag.get('name')} hashtag={hashtag} />)}
</div>
);
}
return (
<Block>
{accounts}
{groups}
{statuses}
{hashtags}
</Block>
)
}
}

10
app/javascript/gabsocial/features/compose/compose.js
View File

@ -10,8 +10,6 @@ import {
import { mascot } from '../../initial_state';
import Motion from '../ui/util/optional_motion';
import ComposeFormContainer from './containers/compose_form_container';
// import SearchContainer from './containers/search_container';
import SearchResults from './components/search_results';
import NavigationBar from './components/navigation_bar';
import elephantUIPlane from '../../../images/logo_ui_column_footer.png';
@ -89,14 +87,6 @@ class Compose extends ImmutablePureComponent {
<img alt='' draggable='false' src={mascot || elephantUIPlane} />
</div>
</div>}
<Motion defaultStyle={{ x: isSearchPage ? 0 : -100 }} style={{ x: spring(showSearch || isSearchPage ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
{({ x }) => (
<div className='drawer__inner darker' style={{ transform: `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
<SearchResults />
</div>
)}
</Motion>
</div>
</div>
);

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

@ -1,4 +1,4 @@
import ColumnIndicator from '../components/column_indicator';
import ColumnIndicator from '../components/column_indicator'
export default class GenericNotFound extends PureComponent {

29
app/javascript/gabsocial/features/groups_timeline/components/column_settings.js
View File

@ -1,29 +0,0 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, FormattedMessage } from 'react-intl';
import SettingSwitch from '../../../../components/setting_switch';
export default
@injectIntl
class ColumnSettings extends PureComponent {
static propTypes = {
settings: ImmutablePropTypes.map.isRequired,
onChange: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
render () {
const { settings, onChange } = this.props;
return (
<div>
<span className='column-settings__section'><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
<div className='column-settings__row'>
<SettingSwitch prefix='home_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
</div>
</div>
);
}
}

76
app/javascript/gabsocial/features/groups_timeline/components/header.js
View File

@ -1,76 +0,0 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import { NavLink } from 'react-router-dom';
import Button from '../../../../components/button';
const messages = defineMessages({
join: { id: 'groups.join', defaultMessage: 'Join group' },
leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' },
edit: { id: 'groups.edit', defaultMessage: 'Edit' }
});
export default
@injectIntl
class Header extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
toggleMembership: PropTypes.func.isRequired,
};
static contextTypes = {
router: PropTypes.object,
};
getActionButton() {
const { group, relationships, toggleMembership, intl } = this.props;
const toggle = () => toggleMembership(group, relationships);
if (!relationships) {
return '';
} else if (!relationships.get('member')) {
return <Button className='logo-button' text={intl.formatMessage(messages.join)} onClick={toggle} />;
} else if (relationships.get('member')) {
return <Button className='logo-button' text={intl.formatMessage(messages.leave, { name: group.get('title') })} onClick={toggle} />;
}
}
getAdminMenu() {
const { group, intl } = this.props;
const menu = [
{ text: intl.formatMessage(messages.edit), to: `/groups/${group.get('id')}/edit` },
{ text: intl.formatMessage(messages.removed_accounts), to: `/groups/${group.get('id')}/removed-accounts` },
];
// <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />;
return <div></div>
}
render () {
const { group, relationships } = this.props;
if (!group || !relationships) {
return null;
}
return (
<div className='group__header-container'>
<div className="group__header">
<div className='group__cover'>
<img src={group.get('cover_image_url')} alt='' className='parallax' />
</div>
<div className='group__tabs'>
<NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}`}>Posts</NavLink>
<NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}/members`}>Members</NavLink>
{this.getActionButton()}
{relationships.get('admin') && this.getAdminMenu()}
</div>
</div>
</div>
);
}
}

36
app/javascript/gabsocial/features/groups_timeline/components/panel.js
View File

@ -1,36 +0,0 @@
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, defineMessages } from 'react-intl';
const messages = defineMessages({
group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' },
group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
});
// : todo :
export default
@injectIntl
class GroupPanel extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
}
render() {
const { group, relationships, intl } = this.props;
return (
<div className="group__panel">
<h1 className="group__panel__title">
{group.get('title')}
{group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
</h1>
{relationships.get('admin') && <span className="group__panel__label">{intl.formatMessage(messages.group_admin)}</span>}
<div className="group__panel__description">{group.get('description')}</div>
</div>
);
}
}

20
app/javascript/gabsocial/features/groups_timeline/containers/column_settings_container.js
View File

@ -1,20 +0,0 @@
import ColumnSettings from '../components/column_settings';
import { changeSetting, saveSettings } from '../../../../actions/settings';
const mapStateToProps = (state) => ({
settings: state.getIn(['settings', 'group']),
});
const mapDispatchToProps = (dispatch) => ({
onChange (key, checked) {
dispatch(changeSetting(['group', ...key], checked));
},
onSave () {
dispatch(saveSettings());
},
});
export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);

19
app/javascript/gabsocial/features/groups_timeline/containers/header_container.js
View File

@ -1,19 +0,0 @@
import Header from '../components/header';
import { joinGroup, leaveGroup } from '../../../../actions/groups';
const mapStateToProps = (state, { groupId }) => ({
group: state.getIn(['groups', groupId]),
relationships: state.getIn(['group_relationships', groupId]),
});
const mapDispatchToProps = (dispatch, { intl }) => ({
toggleMembership (group, relationships) {
if (relationships.get('member')) {
dispatch(leaveGroup(group.get('id')));
} else {
dispatch(joinGroup(group.get('id')));
}
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Header);

120
app/javascript/gabsocial/features/search.js
View File

@ -1,18 +1,118 @@
// import SearchContainer from '../compose/containers/search_container';
import SearchResults from './compose/components/search_results';
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { FormattedMessage } from 'react-intl'
import { withRouter } from 'react-router-dom'
import { fetchSuggestions, dismissSuggestion } from '../actions/suggestions'
import HashtagItem from '../components/hashtag_item'
import Icon from '../components/icon'
import { WhoToFollowPanel } from '../components/panel'
// import TrendsPanel from '../ui/components/trends_panel'
import GroupListItem from '../components/group_list_item'
import Block from '../components/block'
import Heading from '../components/heading'
import Button from '../components/button'
import Text from '../components/text'
import Account from '../components/account'
export default class Search extends PureComponent {
const mapStateToProps = (state) => ({
results: state.getIn(['search', 'results']),
suggestions: state.getIn(['suggestions', 'items']),
});
render() {
return (
<div className='column search-page'>
{ /* <SearchContainer /> */ }
const mapDispatchToProps = (dispatch) => ({
fetchSuggestions: () => dispatch(fetchSuggestions()),
dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
});
<div className='drawer__pager'>
<div className='drawer__inner darker'>
<SearchResults />
export default
@withRouter
@connect(mapStateToProps, mapDispatchToProps)
class Search extends ImmutablePureComponent {
static propTypes = {
results: ImmutablePropTypes.map.isRequired,
location: PropTypes.object,
}
state = {
isSmallScreen: (window.innerWidth <= 895),
}
render () {
const { results, location } = this.props
const { isSmallScreen } = this.state
if (results.isEmpty() && isSmallScreen) {
return (
<div />
)
}
const pathname = location.pathname || ''
const showPeople = pathname === '/search/people'
const showHashtags = pathname === '/search/hashtags'
const showGroups = pathname === '/search/groups'
const isTop = !showPeople && !showHashtags && !showGroups
let accounts, statuses, hashtags, groups
if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
const size = isTop ? Math.min(results.get('accounts').size, 5) : results.get('accounts').size;
accounts = (
<Block>
<div className={[_s.default, _s.py15].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.mb15, _s.px15].join(' ')}>
<Heading size='h2'>
People
</Heading>
<div className={[_s.default, _s.mlAuto].join(' ')}>
<Button
isText
backgroundColor='none'
color='brand'
to='/search/people'
>
<Text size='small' color='inherit' weight='bold'>
See All
</Text>
</Button>
</div>
</div>
{
results.get('accounts').slice(0, size).map(accountId => <Account compact key={accountId} id={accountId} />)
}
</div>
</Block>
)
}
if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) {
const size = isTop ? Math.min(results.get('groups').size, 5) : results.get('groups').size;
groups = (
<div className='search-results__section'>
<h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.groups' defaultMessage='Groups' /></h5>
{results.get('groups').slice(0, size).map(group => <GroupListItem key={`search-${group.get('name')}`} group={group} />)}
</div>
);
}
if (results.get('hashtags') && results.get('hashtags').size > 0 && (isTop || showHashtags)) {
const size = isTop ? Math.min(results.get('hashtags').size, 5) : results.get('hashtags').size;
hashtags = (
<div className='search-results__section'>
<h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
{results.get('hashtags').slice(0, size).map(hashtag => <HashtagItem isCompact key={hashtag.get('name')} hashtag={hashtag} />)}
</div>
);
}
return (
<div>
{accounts}
{groups}
{statuses}
{hashtags}
</div>
)
}

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

@ -478,21 +478,22 @@ class UI extends PureComponent {
const { draggingOver } = this.state
const { children, location } = this.props
const handlers = me ? {
help: this.handleHotkeyToggleHelp,
new: this.handleHotkeyNew,
search: this.handleHotkeySearch,
forceNew: this.handleHotkeyForceNew,
back: this.handleHotkeyBack,
goToHome: this.handleHotkeyGoToHome,
goToNotifications: this.handleHotkeyGoToNotifications,
goToStart: this.handleHotkeyGoToStart,
goToFavorites: this.handleHotkeyGoToFavorites,
goToProfile: this.handleHotkeyGoToProfile,
goToBlocked: this.handleHotkeyGoToBlocked,
goToMuted: this.handleHotkeyGoToMuted,
goToRequests: this.handleHotkeyGoToRequests,
} : {}
// : todo :
// const handlers = me ? {
// help: this.handleHotkeyToggleHelp,
// new: this.handleHotkeyNew,
// search: this.handleHotkeySearch,
// forceNew: this.handleHotkeyForceNew,
// back: this.handleHotkeyBack,
// goToHome: this.handleHotkeyGoToHome,
// goToNotifications: this.handleHotkeyGoToNotifications,
// goToStart: this.handleHotkeyGoToStart,
// goToFavorites: this.handleHotkeyGoToFavorites,
// goToProfile: this.handleHotkeyGoToProfile,
// goToBlocked: this.handleHotkeyGoToBlocked,
// goToMuted: this.handleHotkeyGoToMuted,
// goToRequests: this.handleHotkeyGoToRequests,
// } : {}
return (
<div ref={this.setRef}>

0
app/javascript/gabsocial/features/compose/util/counter.js → app/javascript/gabsocial/features/ui/util/counter.js
View File

0
app/javascript/gabsocial/features/compose/util/url_regex.js → app/javascript/gabsocial/features/ui/util/url_regex.js
View File

1
app/javascript/gabsocial/layouts/profile_layout.js
View File

@ -23,7 +23,6 @@ export default class ProfileLayout extends ImmutablePureComponent {
return (
<Layout
noRightSidebar
noHeader
noComposeButton
>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pr15].join(' ')}>

87
app/javascript/gabsocial/layouts/search_layout.js
View File

@ -1,87 +0,0 @@
import Sticky from 'react-stickynode'
import Search from '../components/search'
import ColumnHeader from '../components/column_header'
import Sidebar from '../components/sidebar'
export default class SearchLayout extends PureComponent {
static propTypes = {
actions: PropTypes.array,
layout: PropTypes.object,
showBackBtn: PropTypes.bool,
}
render() {
const { children, showBackBtn, layout, actions } = this.props
const tabs = [
{
title: 'Top',
to: '/search'
},
{
title: 'People',
to: '/search/people'
},
{
title: 'Groups',
to: '/search/groups'
},
{
title: 'Gabs',
to: '/search/gabs'
},
{
title: 'Hashtags',
to: '/search/hashtags'
},
]
return (
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundColorSecondary3].join(' ')}>
<Sidebar />
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader
title={'Search'}
showBackBtn={showBackBtn}
actions={actions}
tabs={tabs}
/>
</div>
<div className={[_s.default, _s.width340PX].join(' ')}>
<Search />
</div>
</div>
</div>
<div className={[_s.default, _s.height53PX].join(' ')}></div>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
<div className={_s.default}>
{children}
</div>
</div>
<div className={[_s.default, _s.width340PX].join(' ')}>
<Sticky top={73} enabled>
<div className={[_s.default, _s.width340PX].join(' ')}>
{layout}
</div>
</Sticky>
</div>
</div>
</main>
</div>
)
}
}

38
app/javascript/gabsocial/pages/search_page.js
View File

@ -3,7 +3,7 @@ import { defineMessages, injectIntl } from 'react-intl'
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import SearchFilterPanel from '../components/panel/search_filter_panel'
import SearchLayout from '../layouts/search_layout'
import Layout from '../layouts/layout'
const messages = defineMessages({
search: { id: 'search', defaultMessage: 'Search' },
@ -24,9 +24,39 @@ class SearchPage extends PureComponent {
children,
} = this.props
const title = intl.formatMessage(messages.search)
const tabs = [
{
title: 'Top',
to: '/search'
},
{
title: 'People',
to: '/search/people'
},
{
title: 'Groups',
to: '/search/groups'
},
{
title: 'Gabs',
to: '/search/gabs'
},
{
title: 'Trends',
to: '/search/trends'
},
{
title: 'Hashtags',
to: '/search/hashtags'
},
]
return (
<SearchLayout
<Layout
title={title}
showBackBtn
tabs={tabs}
layout={(
<Fragment>
<SearchFilterPanel />
@ -34,9 +64,9 @@ class SearchPage extends PureComponent {
</Fragment>
)}
>
<PageTitle path={intl.formatMessage(messages.search)} />
<PageTitle path={title} />
{children}
</SearchLayout>
</Layout>
)
}

10
app/javascript/gabsocial/utils/numbers.js
View File

@ -1,14 +1,18 @@
import { Fragment } from 'react'
import { FormattedNumber } from 'react-intl'
export const shortNumberFormat = number => {
export const shortNumberFormat = (number) => {
if (number < 1000) {
return <FormattedNumber value={number} />
try {
return (<FormattedNumber value={number} />).props.value
} catch (error) {
return <FormattedNumber value={number} />
}
}
return (
<Fragment>
<FormattedNumber value={number / 1000} maximumFractionDigits={1} />K
<FormattedNumber value={number / 1000} maximumFractionDigits={1} />
</Fragment>
)
}

17
app/javascript/styles/global.css
View File

@ -45,13 +45,13 @@
--solid_color_secondary: #4f5050;
--solid_color_secondary-dark: #424343;
--solid_color_tertiary: #333;
--solid_color_block: #3d3d3d;
--solid_color_block: #2d2d2d;
--text_color_primary: #fff;
--text_color_secondary: #7b7b7b;
--text_color_tertiary: #656565;
--border_color_secondary: #424141;*/
--border_color_secondary: #424141; */
/* BLACK THEME */
/* --solid_color_primary: #13171b;
@ -243,6 +243,7 @@ body {
.bottomRightRadiusSmall { border-bottom-right-radius: var(--radius-small); }
.bottomLeftRadiusSmall { border-bottom-left-radius: var(--radius-small); }
.borderColorWhite { border-color: var(--color_white); }
.borderColorPrimary { border-color: var(--solid_color_primary); }
.borderColorSecondary { border-color: var(--border_color_secondary); }
.borderColorBrand { border-color: var(--color_brand); }
@ -589,7 +590,7 @@ body {
.pt5625PC { padding-top: 56.25%; }
.pt25PC { padding-top: 25%; }
.pt53PX { padding-top: 53px; }
.pt15 { padding-top: 15px; }
.pt10 { padding-top: 10px; }
.pt5 { padding-top: 5px; }
@ -712,6 +713,16 @@ body {
position: absolute;
} */
.visiblyHidden {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
composes: posAbs;
}
.visibilityHidden {
visibility: hidden;
}