+
{children}
)
}
+
}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/popover/popover_root.js b/app/javascript/gabsocial/components/popover/popover_root.js
index 1946ecc8..91ea33b7 100644
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/app/javascript/gabsocial/components/popover/popover_root.js
@@ -1,8 +1,7 @@
import {
- POPOVER_CONTENT_WARNING,
+ BREAKPOINT_EXTRA_SMALL,
POPOVER_DATE_PICKER,
POPOVER_EMOJI_PICKER,
- POPOVER_GROUP_INFO,
POPOVER_GROUP_OPTIONS,
POPOVER_PROFILE_OPTIONS,
POPOVER_REPOST_OPTIONS,
@@ -14,10 +13,8 @@ import {
POPOVER_USER_INFO,
} from '../../constants'
import {
- ContentWarningPopover,
DatePickerPopover,
EmojiPickerPopover,
- GroupInfoPopover,
GroupOptionsPopover,
ProfileOptionsPopover,
RepostOptionsPopover,
@@ -28,14 +25,18 @@ import {
StatusVisibilityPopover,
UserInfoPopover,
} from '../../features/ui/util/async_components'
+
+import { closePopover } from '../../actions/popover'
+import { getWindowDimension } from '../../utils/is_mobile'
import Bundle from '../../features/ui/util/bundle'
+import ModalBase from '../modal/modal_base'
import PopoverBase from './popover_base'
+const initialState = getWindowDimension()
+
const POPOVER_COMPONENTS = {}
-POPOVER_COMPONENTS[POPOVER_CONTENT_WARNING] = ContentWarningPopover
POPOVER_COMPONENTS[POPOVER_DATE_PICKER] = DatePickerPopover
POPOVER_COMPONENTS[POPOVER_EMOJI_PICKER] = EmojiPickerPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_INFO] = GroupInfoPopover
POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
POPOVER_COMPONENTS[POPOVER_REPOST_OPTIONS] = RepostOptionsPopover
@@ -51,13 +52,37 @@ const mapStateToProps = (state) => ({
props: state.getIn(['popover', 'popoverProps'], {}),
})
+const mapDispatchToProps = (dispatch) => ({
+ onClose: (type) => dispatch(closePopover(type)),
+})
+
export default
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
class PopoverRoot extends PureComponent {
static propTypes = {
type: PropTypes.string,
props: PropTypes.object,
+ onClose: PropTypes.func.isRequired,
+ }
+
+ state = {
+ width: initialState.width,
+ }
+
+ componentDidMount() {
+ this.handleResize()
+ window.addEventListener('resize', this.handleResize, false)
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.handleResize, false)
+ }
+
+ handleResize = () => {
+ const { width } = getWindowDimension()
+
+ this.setState({ width })
}
renderEmpty = () => {
@@ -65,11 +90,17 @@ class PopoverRoot extends PureComponent {
}
render() {
- const { type, props } = this.props
+ const { type, props, onClose } = this.props
+ const { width } = this.state
+
const visible = !!type
+ const isXS = width <= BREAKPOINT_EXTRA_SMALL
+ const Wrapper = isXS ? ModalBase : PopoverBase
+
return (
-
{
- (Component) =>
+ (Component) =>
}
}
-
+
)
}
diff --git a/app/javascript/gabsocial/components/popover/profile_options_popover.js b/app/javascript/gabsocial/components/popover/profile_options_popover.js
index ee9c16aa..d65986cd 100644
--- a/app/javascript/gabsocial/components/popover/profile_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/profile_options_popover.js
@@ -142,6 +142,10 @@ export default
@connect(makeMapStateToProps, mapDispatchToProps)
class ProfileOptionsPopover extends PureComponent {
+ static defaultProps = {
+ isXS: PropTypes.bool,
+ }
+
makeMenu() {
const { account, intl, domain } = this.props;
@@ -302,10 +306,11 @@ class ProfileOptionsPopover extends PureComponent {
}
render() {
+ const { isXS } = this.props
const listItems = this.makeMenu()
return (
-
+
+
{
@@ -34,10 +35,12 @@ class SidebarMorePopover extends PureComponent {
}
render() {
- const { intl } = this.props
+ const { intl, isXS } = this.props
+
+ if (isXS) return null
return (
-
+
+
{
@@ -63,12 +64,12 @@ class StatusSharePopover extends ImmutablePureComponent {
}
render() {
- const { intl, status } = this.props
+ const { intl, status, isXS } = this.props
const mailToHref = !status ? undefined : `mailto:?subject=Gab&body=${status.get('url')}`
return (
-
+
{
@@ -48,7 +49,7 @@ class StatusVisibilityDropdown extends PureComponent {
}
render () {
- const { intl, value } = this.props
+ const { intl, value, isXS } = this.props
const options = [
{
@@ -72,7 +73,7 @@ class StatusVisibilityDropdown extends PureComponent {
]
return (
-
+
{
options.map((option, i) => {
diff --git a/app/javascript/gabsocial/components/popover/user_info_popover.js b/app/javascript/gabsocial/components/popover/user_info_popover.js
index 94c9225f..3975626c 100644
--- a/app/javascript/gabsocial/components/popover/user_info_popover.js
+++ b/app/javascript/gabsocial/components/popover/user_info_popover.js
@@ -7,13 +7,17 @@ import Avatar from '../avatar'
import DisplayName from '../display_name'
export default class UserInfoPopover extends ImmutablePureComponent {
+
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
+ isXS: PropTypes.bool,
}
render() {
- const { account } = this.props
+ const { account, isXS } = this.props
+ if (isXS) return null
+
const content = !account ? null : { __html: account.get('note_emojified') }
const to = !account ? '' : `/${account.get('acct')}`
diff --git a/app/javascript/gabsocial/constants.js b/app/javascript/gabsocial/constants.js
index 8a80b033..5646c199 100644
--- a/app/javascript/gabsocial/constants.js
+++ b/app/javascript/gabsocial/constants.js
@@ -18,10 +18,8 @@ export const URL_DISSENTER_SHOP = 'https://shop.dissenter.com'
export const PLACEHOLDER_MISSING_HEADER_SRC = '/original/missing.png'
-export const POPOVER_CONTENT_WARNING = 'CONTENT_WARNING'
export const POPOVER_DATE_PICKER = 'DATE_PICKER'
export const POPOVER_EMOJI_PICKER = 'EMOJI_PICKER'
-export const POPOVER_GROUP_INFO = 'GROUP_INFO'
export const POPOVER_GROUP_OPTIONS = 'GROUP_OPTIONS'
export const POPOVER_PROFILE_OPTIONS = 'PROFILE_OPTIONS'
export const POPOVER_REPOST_OPTIONS = 'REPOST_OPTIONS'
diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js
index 7edd4e0f..86b3bc39 100644
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/app/javascript/gabsocial/features/ui/util/async_components.js
@@ -12,7 +12,6 @@ export function Compose() { return import(/* webpackChunkName: "features/compose
export function ComposeForm() { return import(/* webpackChunkName: "components/compose_form" */'../../compose/components/compose_form') }
export function ComposeModal() { return import(/* webpackChunkName: "components/compose_modal" */'../../../components/modal/compose_modal') }
export function ConfirmationModal() { return import(/* webpackChunkName: "components/confirmation_modal" */'../../../components/modal/confirmation_modal') }
-export function ContentWarningPopover() { return import(/* webpackChunkName: "components/content_warning_popover" */'../../../components/popover/content_warning_popover') }
export function DatePickerPopover() { return import(/* webpackChunkName: "components/date_picker_popover" */'../../../components/popover/date_picker_popover') }
export function DisplayOptionsModal() { return import(/* webpackChunkName: "components/display_options_modal" */'../../../components/modal/display_options_modal') }
export function EditProfileModal() { return import(/* webpackChunkName: "components/edit_profile_modal" */'../../../components/modal/edit_profile_modal') }
@@ -31,7 +30,6 @@ export function GroupCreateModal() { return import(/* webpackChunkName: "compone
export function GroupDeleteModal() { return import(/* webpackChunkName: "components/group_delete_modal" */'../../../components/modal/group_delete_modal') }
export function GroupRemovedAccountsModal() { return import(/* webpackChunkName: "components/group_removed_accounts_modal" */'../../../components/modal/group_removed_accounts_modal') }
export function GroupMembersModal() { return import(/* webpackChunkName: "components/group_members_modal" */'../../../components/modal/group_members_modal') }
-export function GroupInfoPopover() { return import(/* webpackChunkName: "components/group_info_popover" */'../../../components/popover/group_info_popover') }
export function GroupOptionsPopover() { return import(/* webpackChunkName: "components/group_options_popover" */'../../../components/popover/group_options_popover') }
export function GroupMembers() { return import(/* webpackChunkName: "features/group_members" */'../../group_members') }
export function GroupRemovedAccounts() { return import(/* webpackChunkName: "features/group_removed_accounts" */'../../group_removed_accounts') }
diff --git a/app/javascript/gabsocial/utils/is_mobile.js b/app/javascript/gabsocial/utils/is_mobile.js
index 665fcb48..7f1151ea 100644
--- a/app/javascript/gabsocial/utils/is_mobile.js
+++ b/app/javascript/gabsocial/utils/is_mobile.js
@@ -9,10 +9,8 @@ import {
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
-const LAYOUT_BREAKPOINT = 630
-
export function isMobile(width) {
- return width <= LAYOUT_BREAKPOINT
+ return width <= BREAKPOINT_EXTRA_SMALL
}
export function breakpointExtraLarge(width) {
diff --git a/app/javascript/gabsocial/utils/numbers.js b/app/javascript/gabsocial/utils/numbers.js
index afbf9019..0823c059 100644
--- a/app/javascript/gabsocial/utils/numbers.js
+++ b/app/javascript/gabsocial/utils/numbers.js
@@ -12,7 +12,7 @@ export const shortNumberFormat = (number) => {
return (
-
+ k
)
}
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index 6dd45693..fb0461ef 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -619,6 +619,31 @@ body {
.width1255PX {
width: 100%;
}
+
+ :global(.emoji-mart) {
+ border: 0 !important;
+ border-radius: 0 !important;
+ width: 100% !important;
+ min-width: 100% !important;
+ }
+
+ .modal {
+ width: 100% !important;
+ max-width: 100% !important;
+ min-width: 100% !important;
+ }
+
+ .modal:after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 70px;
+ height: 6px;
+ background-color: var(--solid_color_primary);
+ border-radius: var(--radius-circle);
+ left: calc(100% / 2 - 35px);
+ top: -20px;
+ }
}
.textAlignLeft { text-align: left; }