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
Download Patch File Download Diff File Expand all files Collapse all files

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