diff --git a/app/javascript/gabsocial/components/popover/popover_layout.js b/app/javascript/gabsocial/components/popover/popover_layout.js
index 676d2698..4cfd8f0f 100644
--- a/app/javascript/gabsocial/components/popover/popover_layout.js
+++ b/app/javascript/gabsocial/components/popover/popover_layout.js
@@ -24,7 +24,7 @@ export default class PopoverLayout extends PureComponent {
if (isXS) {
return (
-
+
{
!!title &&
@@ -33,7 +33,7 @@ export default class PopoverLayout extends PureComponent {
}
-
diff --git a/app/javascript/gabsocial/components/popover/popover_root.js b/app/javascript/gabsocial/components/popover/popover_root.js
index 91ea33b7..37003c82 100644
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/app/javascript/gabsocial/components/popover/popover_root.js
@@ -79,6 +79,17 @@ class PopoverRoot extends PureComponent {
window.removeEventListener('resize', this.handleResize, false)
}
+ componentDidUpdate() {
+ const { type } = this.props
+ const { width } = this.state
+
+ if (width <= BREAKPOINT_EXTRA_SMALL && !!type) {
+ document.body.classList.add(_s.overflowYHidden)
+ } else {
+ document.body.classList.remove(_s.overflowYHidden)
+ }
+ }
+
handleResize = () => {
const { width } = getWindowDimension()
diff --git a/app/javascript/gabsocial/components/popover/sidebar_more_popover.js b/app/javascript/gabsocial/components/popover/sidebar_more_popover.js
index d8968011..de9a1814 100644
--- a/app/javascript/gabsocial/components/popover/sidebar_more_popover.js
+++ b/app/javascript/gabsocial/components/popover/sidebar_more_popover.js
@@ -55,7 +55,7 @@ class SidebarMorePopover extends PureComponent {
},
{
title: intl.formatMessage(messages.settings),
- href: '/settings',
+ href: '/settings/preferences',
},
{
title: intl.formatMessage(messages.logout),
diff --git a/app/javascript/gabsocial/components/search.js b/app/javascript/gabsocial/components/search.js
index 07d99843..73a33e95 100644
--- a/app/javascript/gabsocial/components/search.js
+++ b/app/javascript/gabsocial/components/search.js
@@ -13,6 +13,7 @@ import Button from './button'
const mapStateToProps = (state) => ({
value: state.getIn(['search', 'value']),
submitted: state.getIn(['search', 'submitted']),
+ theme: state.getIn(['settings', 'displayOptions', 'theme']),
})
const mapDispatchToProps = (dispatch) => ({
@@ -39,6 +40,8 @@ class Search extends PureComponent {
withOverlay: PropTypes.bool,
onClear: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
+ isInNav: PropTypes.bool.isRequired,
+ theme: PropTypes.string,
}
state = {
@@ -99,6 +102,8 @@ class Search extends PureComponent {
value,
submitted,
onClear,
+ isInNav,
+ theme,
} = this.props
const { focused } = this.state
const highlighted = focused || `${value}`.length > 0
@@ -110,7 +115,7 @@ class Search extends PureComponent {
lineHeight125: 1,
displayBlock: 1,
py7: 1,
- bgTransparent: !highlighted,
+ bgTransparent: 1,
colorPrimary: 1,
fs14PX: 1,
flexGrow1: 1,
@@ -121,8 +126,8 @@ class Search extends PureComponent {
const containerClasses = CX({
default: 1,
- bgBrandLight: !highlighted,
- bgWhite: highlighted,
+ searchNavigation: (!highlighted && isInNav && theme === 'light') || (isInNav && theme !== 'light'),
+ bgWhite: (highlighted && isInNav && theme === 'light'),
flexRow: 1,
radiusSmall: 1,
alignItemsCenter: 1,
@@ -159,7 +164,7 @@ class Search extends PureComponent {
color={prependIconColor}
onClick={this.handleSubmit}
icon='search'
- iconClassName={_s.inheritFill}
+ iconClassName={_s.fillInherit}
iconSize='16px'
/>
diff --git a/app/javascript/gabsocial/components/sidebar_xs.js b/app/javascript/gabsocial/components/sidebar_xs.js
new file mode 100644
index 00000000..2b7c075b
--- /dev/null
+++ b/app/javascript/gabsocial/components/sidebar_xs.js
@@ -0,0 +1,265 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { Link, NavLink } from 'react-router-dom'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { injectIntl, defineMessages } from 'react-intl'
+import { CX } from '../constants'
+import Avatar from './avatar'
+import DisplayName from './display_name'
+import Button from './button'
+import Heading from './heading'
+import Text from './text'
+import List from './list'
+import { closeSidebar } from '../actions/sidebar'
+import { shortNumberFormat } from '../utils/numbers'
+import { me } from '../initial_state'
+import { makeGetAccount } from '../selectors'
+import ProgressPanel from './panel/progress_panel'
+
+const messages = defineMessages({
+ followers: { id: 'account.followers', defaultMessage: 'Followers' },
+ follows: { id: 'account.follows', defaultMessage: 'Follows' },
+ profile: { id: 'account.profile', defaultMessage: 'Profile' },
+ preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+ follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
+ blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
+ domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
+ mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
+ filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
+ logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
+ lists: { id: 'column.lists', defaultMessage: 'Lists', },
+ apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' },
+ more: { id: 'sidebar.more', defaultMessage: 'More' },
+ pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
+ trends: { id: 'promo.trends', defaultMessage: 'Trends' },
+ search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
+ shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' },
+ chat: { id: 'tabs_bar.chat', defaultMessage: 'Chat' },
+})
+
+const mapStateToProps = (state) => ({
+ account: makeGetAccount()(state, me),
+ sidebarOpen: state.get('sidebar').open,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+ onCloseSidebar: () => dispatch(closeSidebar()),
+})
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class SidebarXS extends ImmutablePureComponent {
+
+ static propTypes = {
+ intl: PropTypes.object.isRequired,
+ account: ImmutablePropTypes.map,
+ sidebarOpen: PropTypes.bool,
+ onCloseSidebar: PropTypes.func.isRequired,
+ }
+
+ state = {
+ moreOpen: false,
+ }
+
+ componentDidUpdate () {
+ if (!me) return
+
+ if (this.props.sidebarOpen) {
+ document.body.classList.add(_s.overflowYHidden)
+ } else {
+ document.body.classList.remove(_s.overflowYHidden)
+ }
+ }
+
+ toggleMore = () => {
+ this.setState({ moreOpen: !this.state.moreOpen })
+ }
+
+ handleSidebarClose = () => {
+ this.props.onCloseSidebar()
+ this.setState({ moreOpen: false })
+ }
+
+ render () {
+ const { sidebarOpen, intl, account } = this.props
+ const { moreOpen } = this.state
+
+ if (!me || !account) return null
+
+ const acct = account.get('acct')
+ const isPro = account.get('is_pro')
+
+ const moreIcon = moreOpen ? 'minus' : 'plus'
+ const moreContainerStyle = { display: moreOpen ? 'block' : 'none' }
+
+ const mainItems = [
+ {
+ icon: 'user',
+ to: `/${acct}`,
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.profile),
+ },
+ {
+ icon: 'arrow-up',
+ href: 'https://pro.gab.com',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.pro),
+ },
+ {
+ icon: 'shop',
+ href: 'https://shop.gab.com',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.shop),
+ },
+ {
+ icon: 'trends',
+ href: 'https://trends.gab.com',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.trends),
+ },
+ {
+ icon: 'chat',
+ href: 'https://chat.gab.com',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.chat),
+ },
+ {
+ icon: 'search',
+ to: '/search',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.search),
+ },
+ {
+ icon: 'cog',
+ href: '/settings/preferences',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.preferences),
+ },
+ {
+ icon: 'list',
+ to: '/lists',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.lists),
+ },
+ {
+ icon: 'user',
+ to: '/follow_requests',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.follow_requests),
+ },
+ {
+ icon: 'user',
+ to: '/blocks',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.blocks),
+ },
+ {
+ icon: 'user',
+ to: '/domain_blocks',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.domain_blocks),
+ },
+ {
+ icon: 'user',
+ to: '/mutes',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.mutes),
+ },
+ {
+ icon: 'user',
+ to: '/filters',
+ onClick: this.handleSidebarClose,
+ title: intl.formatMessage(messages.filters),
+ },
+ {
+ icon: 'user',
+ href: '/auth/sign_out',
+ title: intl.formatMessage(messages.logout),
+ },
+ ]
+
+ const containerClasses = CX({
+ default: 1,
+ posFixed: 1,
+ top0: 1,
+ left0: 1,
+ right0: 1,
+ bottom0: 1,
+ z5: 1,
+ displayNone: !sidebarOpen,
+ })
+
+ return (
+
+
+
+
+
+ Account Info
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {shortNumberFormat(account.get('followers_count'))}
+ {intl.formatMessage(messages.followers)}
+
+
+ {shortNumberFormat(account.get('following_count'))}
+ {intl.formatMessage(messages.follows)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+}
diff --git a/app/javascript/gabsocial/components/status.js b/app/javascript/gabsocial/components/status.js
index 06bb51b3..ff43b50b 100644
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -66,6 +66,7 @@ class Status extends ImmutablePureComponent {
status: ImmutablePropTypes.map,
descendantsIds: ImmutablePropTypes.list,
ancestorStatus: ImmutablePropTypes.map,
+ isNotification: PropTypes.bool,
isChild: PropTypes.bool,
isPromoted: PropTypes.bool,
isFeatured: PropTypes.bool,
@@ -247,6 +248,8 @@ class Status extends ImmutablePureComponent {
}
handleClick = () => {
+ // : todo : if clicked on isNotification statusactionbaritem do not go to new page
+
if (this.props.onClick) {
this.props.onClick()
return
@@ -363,6 +366,7 @@ class Status extends ImmutablePureComponent {
isPromoted,
isChild,
isHidden,
+ isNotification,
descendantsIds,
commentsLimited,
ancestorStatus,
@@ -437,8 +441,8 @@ class Status extends ImmutablePureComponent {
radiusSmall: isChild,
borderColorSecondary: isChild,
border1PX: isChild,
- pb10: isChild && status.get('media_attachments').size === 0,
- pb5: isChild && status.get('media_attachments').size > 1,
+ pb10: isChild && status.get('media_attachments').size === 0 && !isNotification,
+ pb5: isChild && status.get('media_attachments').size > 1 && !isNotification,
cursorPointer: isChild,
bgSubtle_onHover: isChild,
})
@@ -521,7 +525,7 @@ class Status extends ImmutablePureComponent {
}
{
- !isChild &&
+ (!isChild || isNotification) &&
{
diff --git a/app/javascript/gabsocial/features/ui/ui.js b/app/javascript/gabsocial/features/ui/ui.js
index 59bc217b..1b787063 100644
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -145,6 +145,8 @@ class SwitchingArea extends PureComponent {
+
+
diff --git a/app/javascript/gabsocial/layouts/layout.js b/app/javascript/gabsocial/layouts/layout.js
index ec9b6114..d490d224 100644
--- a/app/javascript/gabsocial/layouts/layout.js
+++ b/app/javascript/gabsocial/layouts/layout.js
@@ -1,7 +1,8 @@
import Sticky from 'react-stickynode'
-import Sidebar from '../components/sidebar'
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import { me } from '../initial_state'
+import Sidebar from '../components/sidebar'
+import SidebarXS from '../components/sidebar_xs'
import NavigationBar from '../components/navigation_bar'
import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
import FooterBar from '../components/footer_bar'
@@ -40,6 +41,10 @@ export default class Layout extends PureComponent {
return (
+
+
+
+
{
me &&
+
+
-
-
-
+
+
diff --git a/app/javascript/gabsocial/pages/home_page.js b/app/javascript/gabsocial/pages/home_page.js
index 52e4c7af..ea485147 100644
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@@ -2,6 +2,7 @@ import { Fragment } from 'react'
import { openModal } from '../actions/modal'
import { defineMessages, injectIntl } from 'react-intl'
import { MODAL_HOME_TIMELINE_SETTINGS } from '../constants'
+import { me } from '../initial_state'
// import IntersectionObserverArticle from '../components/intersection_observer_article'
// import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
import PageTitle from '../features/ui/util/page_title'
@@ -10,6 +11,7 @@ import ListsPanel from '../components/panel/lists_panel'
import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import ProgressPanel from '../components/panel/progress_panel'
+import ProPanel from '../components/panel/pro_panel'
import UserPanel from '../components/panel/user_panel'
import TrendsPanel from '../components/panel/trends_panel'
import DefaultLayout from '../layouts/default_layout'
@@ -23,6 +25,7 @@ const messages = defineMessages({
const mapStateToProps = (state) => ({
totalQueuedItemsCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
+ isPro: state.getIn(['accounts', me, 'is_pro']),
})
const mapDispatchToProps = (dispatch) => ({
@@ -41,6 +44,7 @@ class HomePage extends PureComponent {
intl: PropTypes.object.isRequired,
onOpenHomePageSettingsModal: PropTypes.func.isRequired,
totalQueuedItemsCount: PropTypes.number.isRequired,
+ isPro: PropTypes.bool,
}
// intersectionObserverWrapper = new IntersectionObserverWrapper()
@@ -67,6 +71,7 @@ class HomePage extends PureComponent {
children,
totalQueuedItemsCount,
onOpenHomePageSettingsModal,
+ isPro,
} = this.props
return (
@@ -77,15 +82,12 @@ class HomePage extends PureComponent {
icon: 'ellipsis',
onClick: onOpenHomePageSettingsModal,
},
- {
- icon: 'search',
- onClick: onOpenHomePageSettingsModal,
- },
]}
layout={(
+
diff --git a/app/javascript/gabsocial/pages/search_page.js b/app/javascript/gabsocial/pages/search_page.js
index cffaa038..51ed1e30 100644
--- a/app/javascript/gabsocial/pages/search_page.js
+++ b/app/javascript/gabsocial/pages/search_page.js
@@ -66,7 +66,9 @@ class SearchPage extends PureComponent {
-
+
+
+
{children}
diff --git a/app/javascript/gabsocial/reducers/sidebar.js b/app/javascript/gabsocial/reducers/sidebar.js
index 92d14839..9616fb40 100644
--- a/app/javascript/gabsocial/reducers/sidebar.js
+++ b/app/javascript/gabsocial/reducers/sidebar.js
@@ -1,12 +1,19 @@
-import { SIDEBAR_OPEN, SIDEBAR_CLOSE } from '../actions/sidebar';
+import {
+ SIDEBAR_OPEN,
+ SIDEBAR_CLOSE,
+} from '../actions/sidebar'
-export default function sidebar(state={}, action) {
+const initialState = {
+ open: false,
+}
+
+export default function sidebar(state = initialState, action) {
switch(action.type) {
case SIDEBAR_OPEN:
- return { sidebarOpen: true };
+ return { open: true }
case SIDEBAR_CLOSE:
- return { sidebarOpen: false };
+ return { open: false }
default:
- return state;
+ return state
}
-};
+}
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index fe090166..0754cb06 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -97,7 +97,7 @@ function main ( ) {
scrollToDetailedStatus();
})
.catch(error => {
- console.error("hello larry-1", error);
+ console.error(error);
scrollToDetailedStatus();
});
} else {
@@ -227,7 +227,7 @@ function main ( ) {
}, 700);
}
} catch (err) {
- console.error("hello larry-2", err);
+ console.error(err);
}
input.readonly = oldReadOnly;
@@ -235,5 +235,5 @@ function main ( ) {
}
loadPolyfills().then(main).catch(error => {
- console.error("hello larry-3", error);
+ console.error(error);
});
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index fb0461ef..2b55ca3d 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -43,6 +43,7 @@
--navigation_blend: var(--color_brand-dark);
--navigation_primary: var(--color_white);
--navigation_brand: var(--color_white);
+ --navigation_search: var(--color_brand-light);
}
::selection {
@@ -80,6 +81,7 @@
--navigation_blend: var(--text_color_secondary) !important;
--navigation_primary: var(--text_color_primary) !important;
--navigation_brand: var(--color_brand) !important;
+ --navigation_search: var(--solid_color_tertiary) !important;
}
:root[theme='black'] {
@@ -101,6 +103,7 @@
--navigation_blend: var(--text_color_secondary) !important;
--navigation_primary: var(--text_color_primary) !important;
--navigation_brand: var(--color_brand) !important;
+ --navigation_search: var(--solid_color_block) !important;
}
html,
@@ -399,6 +402,8 @@ body {
.colorBrand { color: var(--color_brand); }
.colorGabPro { color: var(--color_gold); }
+.colorBGPrimary { color: var(--solid_color_primary); }
+
/* */
.fillPrimary { fill: var(--text_color_primary); }
@@ -486,6 +491,7 @@ body {
.heightAuto { height: auto; }
.maxWidth100PC { max-width: 100%; }
+.maxWidth80PC { max-width: 80%; }
.maxWidth640PX { max-width: 640px; }
.maxWidth180PX { max-width: 180px; }
.maxWidth100PC42PX { max-width: calc(100% - 42px); }
@@ -678,6 +684,7 @@ body {
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }
+.z5 { z-index: 5; }
.my10 {
margin-top: 10px;
@@ -934,6 +941,10 @@ body {
fill: var(--navigation_brand);
}
+.searchNavigation {
+ background-color: var(--navigation_search);
+}
+
/**
* Rich Text Editor
*/