diff --git a/app/javascript/gabsocial/actions/compose.js b/app/javascript/gabsocial/actions/compose.js index 46a59981..28bc0d2c 100644 --- a/app/javascript/gabsocial/actions/compose.js +++ b/app/javascript/gabsocial/actions/compose.js @@ -129,17 +129,6 @@ export function mentionCompose(account, routerHistory) { }; }; -export function directCompose(account, routerHistory) { - return (dispatch, getState) => { - dispatch({ - type: COMPOSE_DIRECT, - account: account, - }); - - ensureComposeIsVisible(getState, routerHistory); - }; -}; - export function handleComposeSubmit(dispatch, getState, response, status) { if (!dispatch || !getState) return; diff --git a/app/javascript/gabsocial/components/button.js b/app/javascript/gabsocial/components/button.js index 732fe395..27b83ccc 100644 --- a/app/javascript/gabsocial/components/button.js +++ b/app/javascript/gabsocial/components/button.js @@ -106,6 +106,7 @@ export default class Button extends PureComponent { colorPrimary: color === COLORS.primary, colorSecondary: color === COLORS.secondary, + colorTertiary: color === COLORS.tertiary, colorWhite: color === COLORS.white, colorBrand: color === COLORS.brand, diff --git a/app/javascript/gabsocial/components/comment.js b/app/javascript/gabsocial/components/comment.js index 335af292..b1432d55 100644 --- a/app/javascript/gabsocial/components/comment.js +++ b/app/javascript/gabsocial/components/comment.js @@ -3,31 +3,127 @@ import { NavLink } from 'react-router-dom' import ImmutablePropTypes from 'react-immutable-proptypes' import { defineMessages, injectIntl } from 'react-intl' import ImmutablePureComponent from 'react-immutable-pure-component' -import { me } from '../initial_state' +import { makeGetStatus } from '../selectors'; +import CommentHeader from './comment_header' import Avatar from './avatar' -import DisplayName from './display_name' import Button from './button' +import DisplayName from './display_name' +import DotTextSeperator from './dot_text_seperator' +import RelativeTimestamp from './relative_timestamp' import Text from './text' +import StatusContent from './status_content' const messages = defineMessages({ follow: { id: 'follow', defaultMessage: 'Follow' }, }) +const makeMapStateToProps = () => { + const getStatus = makeGetStatus(); + + const mapStateToProps = (state, props) => ({ + status: getStatus(state, props), + }); + + return mapStateToProps; +}; + export default @injectIntl +@connect(makeMapStateToProps) class Comment extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map.isRequired, } - render() { + handleClick = () => { + // if (this.props.onClick) { + // this.props.onClick(); + // return; + // } - // + // if (!this.context.router) return; + + // this.context.router.history.push( + // `/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}` + // ) + } + + render() { + const { status } = this.props + + console.log("status:", status) return ( -
+
+
+
+ + + + +
+
+
+ +
+
+ +
+
+
+ + + + + + + +
+
+
+ +
) } diff --git a/app/javascript/gabsocial/components/comment_header.js b/app/javascript/gabsocial/components/comment_header.js new file mode 100644 index 00000000..04fe0b91 --- /dev/null +++ b/app/javascript/gabsocial/components/comment_header.js @@ -0,0 +1,120 @@ +import { Fragment } from 'react' +import { NavLink } from 'react-router-dom' +import ImmutablePropTypes from 'react-immutable-proptypes' +import { defineMessages, injectIntl } from 'react-intl' +import ImmutablePureComponent from 'react-immutable-pure-component' +import Avatar from './avatar' +import Button from './button' +import DisplayName from './display_name' +import DotTextSeperator from './dot_text_seperator' +import RelativeTimestamp from './relative_timestamp' +import Text from './text' + +export default +@injectIntl +class CommentHeader extends ImmutablePureComponent { + + static propTypes = { + status: ImmutablePropTypes.map.isRequired, + } + + render() { + const { status } = this.props + + const repostCount = 12 // status.get('reblogs_count') + const favoriteCount = 2 // status.get('favourites_count') // : todo : + + const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`; + + return ( +
+ +
+ + + + + { + status.get('revised_at') !== null && + + + + + } + + { + favoriteCount > 0 && + + + + + } + + { + repostCount > 0 && + + + + + } + + + + + +
+
+ ) + } + +} diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js index 50ee5d82..ed7a3bd3 100644 --- a/app/javascript/gabsocial/components/display_name.js +++ b/app/javascript/gabsocial/components/display_name.js @@ -26,6 +26,7 @@ class DisplayName extends ImmutablePureComponent { openUserInfoPopover: PropTypes.func.isRequired, closeUserInfoPopover: PropTypes.func.isRequired, multiline: PropTypes.bool, + small: PropTypes.bool, large: PropTypes.bool, noHover: PropTypes.bool, noUsername: PropTypes.bool, @@ -47,7 +48,8 @@ class DisplayName extends ImmutablePureComponent { multiline, large, noHover, - noUsername + noUsername, + small } = this.props if (!account) return null @@ -70,10 +72,11 @@ class DisplayName extends ImmutablePureComponent { whiteSpaceNoWrap: 1, fontWeightBold: 1, colorPrimary: 1, - lineHeight125: 1, marginRight2PX: 1, + lineHeight125: !small, + fontSize14PX: small, fontSize15PX: !large, - fontSize24PX: large, + fontSize24PX: large && !small, }) const usernameClasses = cx({ @@ -88,11 +91,14 @@ class DisplayName extends ImmutablePureComponent { lineHeight15: multiline, lineHeight125: !multiline, marginLeft5PX: !multiline, + fontSize14PX: small, fontSize15PX: !large, - fontSize16PX: large + fontSize16PX: large && !small, }) - const iconSize = !!large ? '19px' : '16px' + const iconSize = + !!large ? '19px' : + !!small ? '14px' : '16px' // : todo : return ( diff --git a/app/javascript/gabsocial/components/dot_text_seperator.js b/app/javascript/gabsocial/components/dot_text_seperator.js index 85da4bea..a6060440 100644 --- a/app/javascript/gabsocial/components/dot_text_seperator.js +++ b/app/javascript/gabsocial/components/dot_text_seperator.js @@ -4,7 +4,7 @@ export default class DotTextSeperator extends PureComponent { render() { return ( - + · ) } diff --git a/app/javascript/gabsocial/components/status/status.js b/app/javascript/gabsocial/components/status/status.js index 6ca47db2..c6dd4af7 100644 --- a/app/javascript/gabsocial/components/status/status.js +++ b/app/javascript/gabsocial/components/status/status.js @@ -13,7 +13,7 @@ import Avatar from '../avatar'; import StatusQuote from '../status_quote'; import RelativeTimestamp from '../relative_timestamp'; import DisplayName from '../display_name'; -import StatusContent from '../status_content'; +import StatusContent from '../status_content' import StatusActionBar from '../status_action_bar'; import Block from '../block'; import Icon from '../icon'; @@ -104,6 +104,7 @@ class Status extends ImmutablePureComponent { promoted: PropTypes.bool, onOpenProUpgradeModal: PropTypes.func, intl: PropTypes.object.isRequired, + borderless: PropTypes.bool, }; // Avoid checking props that are functions (and whose equality will always @@ -279,7 +280,8 @@ class Status extends ImmutablePureComponent { unread, showThread, group, - promoted + promoted, + borderless } = this.props let media = null @@ -450,12 +452,21 @@ class Status extends ImmutablePureComponent { const containerClasses = cx({ default: 1, - marginBottom15PX: 1, + marginBottom15PX: !borderless, + backgroundColorPrimary: 1, paddingBottom15PX: featured, borderBottom1PX: featured, borderColorSecondary: featured, }) + const innerContainerClasses = cx({ + default: 1, + overflowHidden: 1, + radiusSmall: !borderless, + borderColorSecondary: !borderless, + border1PX: !borderless, + }) + return (
- +
{prepend} @@ -497,11 +508,11 @@ class Status extends ImmutablePureComponent { ) */ } - {/*
+
-
*/} +
-
+
); diff --git a/app/javascript/gabsocial/components/status_action_bar.js b/app/javascript/gabsocial/components/status_action_bar.js index 3c8f300d..81335208 100644 --- a/app/javascript/gabsocial/components/status_action_bar.js +++ b/app/javascript/gabsocial/components/status_action_bar.js @@ -132,7 +132,7 @@ class StatusActionBar extends ImmutablePureComponent { const repostCount = status.get('reblogs_count') const repostTitle = !publicStatus ? formatMessage(messages.cannot_repost) : formatMessage(messages.repost) - const favoriteCount = status.get('favorites_count') // : todo : + const favoriteCount = status.get('favourites_count') // : todo : const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && ( diff --git a/app/javascript/gabsocial/components/status_content/status_content.js b/app/javascript/gabsocial/components/status_content/status_content.js index 7519bf74..004d45c8 100644 --- a/app/javascript/gabsocial/components/status_content/status_content.js +++ b/app/javascript/gabsocial/components/status_content/status_content.js @@ -33,6 +33,7 @@ class StatusContent extends ImmutablePureComponent { onClick: PropTypes.func, collapsable: PropTypes.bool, intl: PropTypes.object.isRequired, + isComment: PropTypes.bool, }; state = { @@ -155,7 +156,7 @@ class StatusContent extends ImmutablePureComponent { } render () { - const { status, intl } = this.props; + const { status, intl, isComment } = this.props; if (status.get('content').length === 0) return null; @@ -208,7 +209,7 @@ class StatusContent extends ImmutablePureComponent { const hasMarginBottom = !!status.get('card') || !!status.get('poll') || status.get('media_attachments').size > 0 const containerClasses = cx({ - paddingHorizontal15PX: 1, + paddingHorizontal15PX: !isComment, marginBottom15PX: hasMarginBottom, }) diff --git a/app/javascript/gabsocial/containers/status_container.js b/app/javascript/gabsocial/containers/status_container.js index 428ad736..f22e5c8b 100644 --- a/app/javascript/gabsocial/containers/status_container.js +++ b/app/javascript/gabsocial/containers/status_container.js @@ -2,7 +2,6 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { replyCompose, mentionCompose, - directCompose, quoteCompose, } from '../actions/compose'; import { @@ -150,10 +149,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ dispatch(editStatus(status)); }, - onDirect (account, router) { - dispatch(directCompose(account, router)); - }, - onMention (account, router) { dispatch(mentionCompose(account, router)); }, diff --git a/app/javascript/gabsocial/features/account_timeline/containers/header_container.js b/app/javascript/gabsocial/features/account_timeline/containers/header_container.js index 76dab878..61c5d78a 100644 --- a/app/javascript/gabsocial/features/account_timeline/containers/header_container.js +++ b/app/javascript/gabsocial/features/account_timeline/containers/header_container.js @@ -11,7 +11,6 @@ import { } from '../../../actions/accounts'; import { mentionCompose, - directCompose, } from '../../../actions/compose'; import { initMuteModal } from '../../../actions/mutes'; import { initReport } from '../../../actions/reports'; @@ -78,11 +77,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ onMention (account, router) { dispatch(mentionCompose(account, router)); }, - - onDirect (account, router) { - dispatch(directCompose(account, router)); - }, - + onRepostToggle (account) { if (account.getIn(['relationship', 'showing_reblogs'])) { dispatch(followAccount(account.get('id'), false)); diff --git a/app/javascript/gabsocial/features/status/containers/detailed_status_container.js b/app/javascript/gabsocial/features/status/containers/detailed_status_container.js index 07cf4cbb..b4ab5be5 100644 --- a/app/javascript/gabsocial/features/status/containers/detailed_status_container.js +++ b/app/javascript/gabsocial/features/status/containers/detailed_status_container.js @@ -2,7 +2,6 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { replyCompose, mentionCompose, - directCompose, } from '../../../actions/compose'; import { reblog, @@ -116,10 +115,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ } }, - onDirect (account, router) { - dispatch(directCompose(account, router)); - }, - onMention (account, router) { dispatch(mentionCompose(account, router)); }, diff --git a/app/javascript/gabsocial/features/status/status.js b/app/javascript/gabsocial/features/status/status.js index 69487fe4..e4ee6124 100644 --- a/app/javascript/gabsocial/features/status/status.js +++ b/app/javascript/gabsocial/features/status/status.js @@ -1,5 +1,4 @@ import Immutable from 'immutable'; -import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -8,15 +7,14 @@ import { fetchStatus } from '../../actions/statuses'; import { favorite, unfavorite, - reblog, - unreblog, + repost, + unrepost, pin, unpin, } from '../../actions/interactions'; import { replyCompose, mentionCompose, - directCompose, } from '../../actions/compose'; import { blockAccount } from '../../actions/accounts'; import { @@ -31,12 +29,11 @@ import { initReport } from '../../actions/reports'; import { openModal } from '../../actions/modal'; import { boostModal, deleteModal, me } from '../../initial_state'; import { makeGetStatus } from '../../selectors'; -import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../../utils/fullscreen'; import StatusContainer from '../../containers/status_container'; -import { ColumnHeader } from '../../components/column_header'; import { textForScreenReader, defaultMediaVisibility } from '../../components/status/status'; -import Icon from '../../components/icon'; import ColumnIndicator from '../../components/column_indicator'; +import Block from '../../components/block' +import Comment from '../../components/comment' const messages = defineMessages({ deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, @@ -53,15 +50,15 @@ const messages = defineMessages({ }); const makeMapStateToProps = () => { - const getStatus = makeGetStatus(); + const getStatus = makeGetStatus() const mapStateToProps = (state, props) => { const status = getStatus(state, { id: props.params.statusId, username: props.params.username, - }); + }) - let ancestorsIds = Immutable.List(); + let ancestorsIds = Immutable.List() let descendantsIds = Immutable.List(); if (status) { @@ -74,24 +71,8 @@ const makeMapStateToProps = () => { } }); - descendantsIds = descendantsIds.withMutations(mutable => { - const ids = [status.get('id')]; - - while (ids.length > 0) { - let id = ids.shift(); - const replies = state.getIn(['contexts', 'replies', id]); - - if (status.get('id') !== id) { - mutable.push(id); - } - - if (replies) { - replies.reverse().forEach(reply => { - ids.unshift(reply); - }); - } - } - }); + // ONLY Direct descendants + descendantsIds = state.getIn(['contexts', 'replies', status.get('id')]) } return { @@ -136,10 +117,6 @@ class Status extends ImmutablePureComponent { this.props.dispatch(fetchStatus(this.props.params.statusId)); } - componentDidMount() { - attachFullscreenListener(this.onFullScreenChange); - } - componentWillReceiveProps(nextProps) { if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { this._scrolledIntoView = false; @@ -214,10 +191,6 @@ class Status extends ImmutablePureComponent { } } - handleDirectClick = (account, router) => { - this.props.dispatch(directCompose(account, router)); - } - handleMentionClick = (account, router) => { this.props.dispatch(mentionCompose(account, router)); } @@ -372,16 +345,16 @@ class Status extends ImmutablePureComponent { } renderChildren(list) { + console.log("list:", list) // : todo : comments return list.map(id => ( - - )); + )) } setRef = c => { @@ -389,11 +362,9 @@ class Status extends ImmutablePureComponent { } componentDidUpdate() { - if (this._scrolledIntoView) { - return; - } + if (this._scrolledIntoView) return - const { status, ancestorsIds } = this.props; + const { status, ancestorsIds } = this.props if (status && ancestorsIds && ancestorsIds.size > 0) { const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1]; @@ -405,28 +376,27 @@ class Status extends ImmutablePureComponent { } } - componentWillUnmount() { - detachFullscreenListener(this.onFullScreenChange); - } - - onFullScreenChange = () => { - this.setState({ fullscreen: isFullscreen() }); - } - render() { - let ancestors, descendants; - const { status, ancestorsIds, descendantsIds, intl, domain } = this.props; + const { + status, + ancestorsIds, + descendantsIds, + intl, + domain + } = this.props + + let ancestors, descendants if (status === null) { - return (); + return } if (ancestorsIds && ancestorsIds.size > 0) { - ancestors =
{this.renderChildren(ancestorsIds)}
; + ancestors = this.renderChildren(ancestorsIds) } if (descendantsIds && descendantsIds.size > 0) { - descendants =
{this.renderChildren(descendantsIds)}
; + descendants = this.renderChildren(descendantsIds) } const handlers = { @@ -441,68 +411,41 @@ class Status extends ImmutablePureComponent { toggleSensitive: this.handleHotkeyToggleSensitive, }; - /* me && - - - - )} - /> - */ - return (
- {ancestors} + + { + /* ancestors */ + } - -
- { /* */ } + +
+ + 0} + // onOpenVideo={this.handleOpenVideo} + // onOpenMedia={this.handleOpenMedia} + // onToggleHidden={this.handleToggleHidden} + // domain={domain} + // showMedia={this.state.showMedia} + // onToggleMediaVisibility={this.handleToggleMediaVisibility} + /> + +
+
- + { + descendantsIds && descendantsIds.size > 0 && +
+ } - {/**/} -
- - - {descendants} + {descendants} +
- ); + ) } } diff --git a/app/javascript/gabsocial/features/ui/ui.js b/app/javascript/gabsocial/features/ui/ui.js index 937b2cad..93396e88 100644 --- a/app/javascript/gabsocial/features/ui/ui.js +++ b/app/javascript/gabsocial/features/ui/ui.js @@ -504,7 +504,7 @@ class UI extends PureComponent { {children} - + { /* */ } diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css index 80848779..62eaa6ac 100644 --- a/app/javascript/styles/global.css +++ b/app/javascript/styles/global.css @@ -327,6 +327,10 @@ body { color: #fff; } +.colorTertiary { + color: #777; +} + .colorSecondary { color: #4B4F55; } @@ -797,6 +801,10 @@ body { padding-top: 5px; } +.paddingTop2PX { + padding-top: 2px; +} + .paddingBottom10PX { padding-bottom: 10px; } diff --git a/config/webpack/shared.js b/config/webpack/shared.js index c09d9b52..16ee822b 100644 --- a/config/webpack/shared.js +++ b/config/webpack/shared.js @@ -8,10 +8,7 @@ const AssetsManifestPlugin = require('webpack-assets-manifest'); const extname = require('path-complete-extname'); const { env, settings, output } = require('./configuration'); const rules = require('./rules'); -const localePackPaths = [ - '/Users/m3/Documents/dev/gab-social/tmp/packs/locale_en.js', -]; -//require('./generateLocalePacks'); +const localePackPaths = require('./generateLocalePacks'); const extensionGlob = `**/*{${settings.extensions.join(',')}}*`; const entryPath = join(settings.source_path, settings.source_entry_path); @@ -77,7 +74,7 @@ module.exports = { PureComponent: ['react', 'PureComponent'], connect: ['react-redux', 'connect'], PropTypes: 'prop-types', - _s: '/Users/m3/Documents/dev/gab-social/app/javascript/styles/global.css', // : todo : + _s: `${resolve(settings.source_path)}/styles/global.css` }), new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))), new webpack.NormalModuleReplacementPlugin(