+
-
+
diff --git a/app/javascript/gabsocial/components/modal/group_members_modal.js b/app/javascript/gabsocial/components/modal/group_members_modal.js
new file mode 100644
index 00000000..a5a09729
--- /dev/null
+++ b/app/javascript/gabsocial/components/modal/group_members_modal.js
@@ -0,0 +1,32 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ModalLayout from './modal_layout'
+import GroupCreate from '../../features/group_create'
+
+const messages = defineMessages({
+ title: { id: 'create_group', defaultMessage: 'Create group' },
+})
+
+export default
+@injectIntl
+class GroupMembersModal extends ImmutablePureComponent {
+
+ static propTypes = {
+ intl: PropTypes.object.isRequired,
+ onClose: PropTypes.func.isRequired,
+ }
+
+ render() {
+ const { intl, onClose } = this.props
+
+ return (
+
+
+
+ )
+ }
+}
diff --git a/app/javascript/gabsocial/components/modal/media_modal/media_modal.scss b/app/javascript/gabsocial/components/modal/media_modal/media_modal.scss
deleted file mode 100644
index 0962607b..00000000
--- a/app/javascript/gabsocial/components/modal/media_modal/media_modal.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-.media-modal {
- position: relative;
-
- @include size(100%);
-
- &__closer {
- @include abs-position(0, 0, 0, 0);
- }
-
- &__navigation {
- pointer-events: none;
- transition: opacity 0.3s linear;
- will-change: opacity;
-
- @include abs-position(0, 0, 0, 0);
-
- * {
- pointer-events: auto;
- }
-
- &.media-modal__navigation--hidden {
- opacity: 0;
-
- * {
- pointer-events: none;
- }
- }
- }
-
- &__nav {
- background: rgba($base-overlay-background, 0.5);
- box-sizing: border-box;
- border: 0;
- color: $primary-text-color;
- cursor: pointer;
- display: flex;
- align-items: center;
- font-size: 24px;
- height: 20vmax;
- margin: auto 0;
- padding: 30px 15px;
-
- @include abs-position(0, auto, 0, auto);
-
- &--left {
- left: 0;
- }
-
- &--right {
- right: 0;
- }
- }
-
- &__meta,
- &__pagination {
- width: 100%;
- text-align: center;
- pointer-events: none;
-
- @include abs-position(auto, auto, 20px, 0);
- }
-
- &__meta {
- &--shifted {
- bottom: 62px;
- }
-
- a {
- text-decoration: none;
- font-weight: 500;
- color: $ui-secondary-color;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
-
- &__page-dot {
- display: inline-block;
- }
-
- &__button {
- background-color: $primary-text-color;
- border-radius: 6px;
- margin: 10px;
- padding: 0;
- border: 0;
- font-size: 0;
-
- @include size(12px);
-
- &--active {
- background-color: $highlight-text-color;
- }
- }
-
- &__close {
- @include abs-position(8px, 8px);
- }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/modal/modal_root.js b/app/javascript/gabsocial/components/modal/modal_root.js
index 163f5b86..8398fbac 100644
--- a/app/javascript/gabsocial/components/modal/modal_root.js
+++ b/app/javascript/gabsocial/components/modal/modal_root.js
@@ -18,6 +18,7 @@ import {
MODAL_GROUP_CREATE,
MODAL_GROUP_DELETE,
MODAL_GROUP_EDITOR,
+ MODAL_GROUP_MEMBERS,
MODAL_HASHTAG_TIMELINE_SETTINGS,
MODAL_HOME_TIMELINE_SETTINGS,
MODAL_HOTKEYS,
@@ -51,6 +52,7 @@ import {
GroupCreateModal,
GroupDeleteModal,
GroupEditorModal,
+ GroupMembersModal,
HashtagTimelineSettingsModal,
HomeTimelineSettingsModal,
HotkeysModal,
@@ -85,6 +87,7 @@ MODAL_COMPONENTS[MODAL_GIF_PICKER] = GifPickerModal
MODAL_COMPONENTS[MODAL_GROUP_CREATE] = GroupCreateModal
MODAL_COMPONENTS[MODAL_GROUP_DELETE] = GroupDeleteModal
MODAL_COMPONENTS[MODAL_GROUP_EDITOR] = GroupEditorModal
+MODAL_COMPONENTS[MODAL_GROUP_MEMBERS] = GroupMembersModal
MODAL_COMPONENTS[MODAL_HASHTAG_TIMELINE_SETTINGS] = HashtagTimelineSettingsModal
MODAL_COMPONENTS[MODAL_HOME_TIMELINE_SETTINGS] = HomeTimelineSettingsModal
MODAL_COMPONENTS[MODAL_HOTKEYS] = HotkeysModal
@@ -156,6 +159,8 @@ class ModalRoot extends PureComponent {
const { type, props } = this.props
const visible = !!type
+ // : todo : init card view if mobile
+
return (
{
diff --git a/app/javascript/gabsocial/components/pull_to_refresher.js b/app/javascript/gabsocial/components/pull_to_refresher.js
new file mode 100644
index 00000000..028234c7
--- /dev/null
+++ b/app/javascript/gabsocial/components/pull_to_refresher.js
@@ -0,0 +1,23 @@
+import { BREAKPOINT_EXTRA_SMALL } from '../constants'
+import Responsive from '../features/ui//util/responsive_component'
+import Icon from './icon'
+
+export default class PullToRefresher extends PureComponent {
+
+ static propTypes = {
+ children: PropTypes.any,
+ }
+
+ render() {
+ const { children } = this.props
+
+ return (
+
+
+
+
+
+ )
+ }
+
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/scrollable_list.js b/app/javascript/gabsocial/components/scrollable_list.js
index 28b54d82..f930c9d0 100644
--- a/app/javascript/gabsocial/components/scrollable_list.js
+++ b/app/javascript/gabsocial/components/scrollable_list.js
@@ -1,7 +1,9 @@
import throttle from 'lodash.throttle'
import { List as ImmutableList } from 'immutable'
+import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import IntersectionObserverArticle from './intersection_observer_article'
import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
+import Responsive from '../features/ui/util/responsive_component'
import Block from './block'
import ColumnIndicator from './column_indicator'
import LoadMore from './load_more'
@@ -17,6 +19,7 @@ export default class ScrollableList extends PureComponent {
static propTypes = {
scrollKey: PropTypes.string.isRequired,
onLoadMore: PropTypes.func,
+ onReload: PropTypes.func,
isLoading: PropTypes.bool,
showLoading: PropTypes.bool,
hasMore: PropTypes.bool,
@@ -259,3 +262,4 @@ export default class ScrollableList extends PureComponent {
}
}
+
diff --git a/app/javascript/gabsocial/components/status_list.js b/app/javascript/gabsocial/components/status_list.js
index c854eb30..5f59ee5a 100644
--- a/app/javascript/gabsocial/components/status_list.js
+++ b/app/javascript/gabsocial/components/status_list.js
@@ -17,15 +17,13 @@ import ColumnIndicator from './column_indicator';
const makeGetStatusIds = () => createSelector([
(state, { type, id }) => state.getIn(['settings', type], ImmutableMap()),
(state, { type, id }) => state.getIn(['timelines', id, 'items'], ImmutableList()),
- (state) => state.get('statuses'),
+ (state) => state.get('statuses'),
], (columnSettings, statusIds, statuses) => {
return statusIds.filter(id => {
if (id === null) return true;
const statusForId = statuses.get(id);
- let showStatus = true;
-
- console.log("columnSettings:", columnSettings)
+ let showStatus = true;
if (columnSettings.getIn(['shows', 'reblog']) === false) {
showStatus = showStatus && statusForId.get('reblog') === null;
@@ -41,12 +39,12 @@ const makeGetStatusIds = () => createSelector([
const mapStateToProps = (state, { timelineId }) => {
if (!timelineId) return {}
-
+
const getStatusIds = makeGetStatusIds();
const promotion = promotions.length > 0 && sample(promotions.filter(p => p.timeline_id === timelineId));
const statusIds = getStatusIds(state, {
- type: timelineId.substring(0,5) === 'group' ? 'group' : timelineId,
+ type: timelineId.substring(0, 5) === 'group' ? 'group' : timelineId,
id: timelineId
})
@@ -136,10 +134,14 @@ class StatusList extends ImmutablePureComponent {
}
handleLoadOlder = debounce(() => {
- this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined);
+ this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined)
}, 300, { leading: true })
- _selectChild (index, align_top) {
+ handleReload = debounce(() => {
+ this.props.onLoadMore()
+ }, 300, { leading: true })
+
+ _selectChild(index, align_top) {
const container = this.node.node;
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
@@ -164,7 +166,7 @@ class StatusList extends ImmutablePureComponent {
this.node = c;
}
- render () {
+ render() {
const {
statusIds,
featuredStatusIds,
@@ -177,7 +179,7 @@ class StatusList extends ImmutablePureComponent {
promotion,
promotedStatus,
...other
- } = this.props
+ } = this.props
if (isPartial) {
return
@@ -192,15 +194,15 @@ class StatusList extends ImmutablePureComponent {
onClick={onLoadMore}
/>
) : (
-
- ))
+
+ ))
) : null;
if (scrollableContent && featuredStatusIds) {
diff --git a/app/javascript/gabsocial/components/timeline_compose_block.js b/app/javascript/gabsocial/components/timeline_compose_block.js
index 22f21f1a..c938713b 100644
--- a/app/javascript/gabsocial/components/timeline_compose_block.js
+++ b/app/javascript/gabsocial/components/timeline_compose_block.js
@@ -2,10 +2,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { injectIntl, defineMessages } from 'react-intl'
import { me } from '../initial_state'
+import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import ComposeFormContainer from '../features/compose/containers/compose_form_container'
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
+import Responsive from '../features/ui/util/responsive_component'
import Avatar from './avatar'
-import Block from './block'
import Heading from './heading'
const messages = defineMessages({
@@ -42,7 +43,6 @@ class TimelineComposeBlock extends ImmutablePureComponent {
} = this.props
if (modal) {
- console.log("modal timeline composer: ", this.props)
return (
@@ -58,14 +58,16 @@ class TimelineComposeBlock extends ImmutablePureComponent {
classNames={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}
classNamesXS={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden].join(' ')}
>
-
-
-
+
+
+
+
+ {intl.formatMessage(messages.createPost)}
+
+
diff --git a/app/javascript/gabsocial/constants.js b/app/javascript/gabsocial/constants.js
index 589bfbe3..d4f2b7f1 100644
--- a/app/javascript/gabsocial/constants.js
+++ b/app/javascript/gabsocial/constants.js
@@ -45,6 +45,7 @@ export const MODAL_GIF_PICKER = 'GIF_PICKER'
export const MODAL_GROUP_CREATE = 'GROUP_CREATE'
export const MODAL_GROUP_DELETE = 'GROUP_DELETE'
export const MODAL_GROUP_EDITOR = 'GROUP_EDITOR'
+export const MODAL_GROUP_MEMBERS = 'GROUP_MEMBERS'
export const MODAL_HASHTAG_TIMELINE_SETTINGS = 'HASHTAG_TIMELINE_SETTINGS'
export const MODAL_HOME_TIMELINE_SETTINGS = 'HOME_TIMELINE_SETTINGS'
export const MODAL_HOTKEYS = 'HOTKEYS'
diff --git a/app/javascript/gabsocial/features/compose/components/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form.js
index b3ebf9e6..94403395 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@@ -8,8 +8,10 @@ import {
CX,
MAX_POST_CHARACTER_COUNT,
ALLOWED_AROUND_SHORT_CODE,
+ BREAKPOINT_EXTRA_SMALL,
} from '../../../constants'
import AutosuggestTextbox from '../../../components/autosuggest_textbox'
+import Responsive from '../../ui/util/responsive_component'
import Avatar from '../../../components/avatar'
import Button from '../../../components/button'
import CharacterCounter from '../../../components/character_counter'
@@ -462,7 +464,9 @@ class ComposeForm extends ImmutablePureComponent {
{ /* !shouldCondense &&
*/}
-
+
+
+
+
{
noRightSidebar && children
@@ -78,7 +81,7 @@ export default class Layout extends PureComponent {
{
!!tabs &&
-
+
@@ -110,7 +113,7 @@ export default class Layout extends PureComponent {
}
-
diff --git a/app/javascript/gabsocial/pages/group_page.js b/app/javascript/gabsocial/pages/group_page.js
index f5e296a7..f9dc9500 100644
--- a/app/javascript/gabsocial/pages/group_page.js
+++ b/app/javascript/gabsocial/pages/group_page.js
@@ -59,10 +59,11 @@ class GroupPage extends ImmutablePureComponent {
group={group}
relationships={relationships}
actions={[
- {
- icon: 'ellipsis',
- onClick: null,
- },
+ // : todo :
+ // {
+ // icon: 'ellipsis',
+ // onClick: null,
+ // },
]}
layout={(
diff --git a/app/javascript/gabsocial/pages/groups_page.js b/app/javascript/gabsocial/pages/groups_page.js
index 6637ceb0..b533d7ee 100644
--- a/app/javascript/gabsocial/pages/groups_page.js
+++ b/app/javascript/gabsocial/pages/groups_page.js
@@ -2,7 +2,10 @@ import { Fragment } from 'react'
import { me } from '../initial_state'
import { defineMessages, injectIntl } from 'react-intl'
import { openModal } from '../actions/modal'
-import { MODAL_GROUP_CREATE } from '../constants'
+import {
+ MODAL_GROUP_CREATE,
+ MODAL_PRO_UPGRADE,
+} from '../constants'
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import GroupsPanel from '../components/panel/groups_panel'
@@ -22,8 +25,12 @@ const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
- onOpenGroupCreateModal() {
- dispatch(openModal(MODAL_GROUP_CREATE))
+ onOpenGroupCreateModal(isPro) {
+ if (!isPro) {
+ dispatch(openModal(MODAL_PRO_UPGRADE))
+ } else {
+ dispatch(openModal(MODAL_GROUP_CREATE))
+ }
},
})
@@ -39,6 +46,10 @@ class GroupsPage extends PureComponent {
onOpenGroupCreateModal: PropTypes.func.isRequired,
}
+ handleOnOpenGroupCreateModal = () => {
+ this.props.onOpenGroupCreateModal(this.props.isPro)
+ }
+
render() {
const {
intl,
@@ -47,7 +58,12 @@ class GroupsPage extends PureComponent {
onOpenGroupCreateModal,
} = this.props
- const actions = []
+ const actions = [
+ {
+ icon: 'add',
+ onClick: this.handleOnOpenGroupCreateModal,
+ },
+ ]
const tabs = [
{
title: intl.formatMessage(messages.featured),
@@ -64,11 +80,6 @@ class GroupsPage extends PureComponent {
]
if (isPro) {
- actions.push({
- icon: 'add',
- onClick: onOpenGroupCreateModal,
- })
-
tabs.push({
title: intl.formatMessage(messages.admin),
to: '/groups/browse/admin',
@@ -79,7 +90,6 @@ class GroupsPage extends PureComponent {
return (
+
+
diff --git a/app/javascript/gabsocial/pages/search_page.js b/app/javascript/gabsocial/pages/search_page.js
index 686c605d..a540b19b 100644
--- a/app/javascript/gabsocial/pages/search_page.js
+++ b/app/javascript/gabsocial/pages/search_page.js
@@ -47,6 +47,7 @@ class SearchPage extends PureComponent {
return (