{
accounts && accounts.slice(0, 1).map((account, i) => (
-
+
))
}
@@ -191,6 +195,7 @@ Notification.propTypes = {
type: PropTypes.string.isRequired,
isHidden: PropTypes.bool,
isUnread: PropTypes.bool,
+ isCompact: PropTypes.bool,
}
export default injectIntl(Notification)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/popover/sidebar_more_popover.js b/app/javascript/gabsocial/components/popover/sidebar_more_popover.js
index d65bad04..ba1ef43f 100644
--- a/app/javascript/gabsocial/components/popover/sidebar_more_popover.js
+++ b/app/javascript/gabsocial/components/popover/sidebar_more_popover.js
@@ -14,6 +14,10 @@ class SidebarMorePopover extends React.PureComponent {
this.props.onOpenDisplayModal()
}
+ handleOnClosePopover = () => {
+ this.props.onClosePopover()
+ }
+
render() {
const { intl, isXS } = this.props
@@ -29,6 +33,11 @@ class SidebarMorePopover extends React.PureComponent {
title: intl.formatMessage(messages.help),
href: 'https://help.gab.com',
},
+ {
+ title: 'Gab Deck',
+ to: '/deck',
+ onClick: this.handleOnClosePopover,
+ },
{
title: intl.formatMessage(messages.display),
onClick: this.handleOnOpenDisplayModal,
@@ -66,6 +75,9 @@ const messages = defineMessages({
})
const mapDispatchToProps = (dispatch) => ({
+ onClosePopover() {
+ dispatch(closePopover())
+ },
onOpenDisplayModal: () => {
dispatch(closePopover())
dispatch(openModal(MODAL_DISPLAY_OPTIONS))
diff --git a/app/javascript/gabsocial/components/sidebar/deck_sidebar.js b/app/javascript/gabsocial/components/sidebar/deck_sidebar.js
new file mode 100644
index 00000000..e6781478
--- /dev/null
+++ b/app/javascript/gabsocial/components/sidebar/deck_sidebar.js
@@ -0,0 +1,205 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { openPopover } from '../../actions/popover'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import { resendUserConfirmationEmail } from '../../actions/user'
+import { openModal } from '../../actions/modal'
+import {
+ BREAKPOINT_EXTRA_SMALL,
+ MODAL_EMAIL_CONFIRMATION_REMINDER,
+} from '../../constants'
+import {
+ me,
+ meEmail,
+ emailConfirmed,
+} from '../../initial_state'
+import { makeGetAccount } from '../../selectors'
+import Responsive from '../../features/ui/util/responsive_component'
+import {
+ CX,
+ THEMES,
+ DEFAULT_THEME,
+ POPOVER_NAV_SETTINGS,
+} from '../../constants'
+import Avatar from '../avatar'
+import BackButton from '../back_button'
+import Button from '../button'
+import Heading from '../heading'
+import Icon from '../icon'
+import NavigationBarButton from '../navigation_bar_button'
+import Search from '../search'
+import Text from '../text'
+import Divider from '../divider'
+
+class DeckSidebar extends ImmutablePureComponent {
+
+ handleOnClickLightBulb = () => {
+ let index = THEMES.findIndex((t) => t === this.props.theme)
+ const nextIndex = (index === THEMES.length -1) ? 0 : index += 1
+ const newTheme = THEMES[nextIndex]
+ this.props.onChange('theme', newTheme)
+ }
+
+ handleOnOpenNavSettingsPopover = () => {
+ this.props.onOpenNavSettingsPopover(this.avatarNode)
+ }
+
+ handleOnClickResendConfirmationEmail = () => {
+ const { emailConfirmationResends } = this.props
+ if (emailConfirmationResends % 2 === 0 && emailConfirmationResends > 0) {
+ this.props.onOpenEmailModal()
+ }
+ this.props.onResendUserConfirmationEmail()
+ }
+
+ setAvatarNode = (c) => {
+ this.avatarNode = c
+ }
+
+ render() {
+ const {
+ title,
+ showBackBtn,
+ actions,
+ tabs,
+ account,
+ noActions,
+ logoDisabled,
+ unreadChatsCount,
+ notificationCount,
+ } = this.props
+
+ const navigationContainerClasses = CX({
+ d: 1,
+ z4: 1,
+ w76PX: 1,
+ w100PC: 1,
+ })
+
+ const innerNavigationContainerClasses = CX({
+ d: 1,
+ w76PX: 1,
+ bgNavigation: 1,
+ aiCenter: 1,
+ z3: 1,
+ top0: 1,
+ bottom0: 1,
+ left0: 1,
+ borderRight1PX: 1,
+ borderColorSecondary: 1,
+ posFixed: 1,
+ })
+
+ const isHome = title === 'Home'
+
+ return (
+
+ )
+ }
+
+}
+
+const mapStateToProps = (state) => ({
+ account: makeGetAccount()(state, me),
+ emailConfirmationResends: state.getIn(['user', 'emailConfirmationResends'], 0),
+ theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
+ logoDisabled: state.getIn(['settings', 'displayOptions', 'logoDisabled'], false),
+ notificationCount: state.getIn(['notifications', 'unread']),
+ unreadChatsCount: state.getIn(['chats', 'chatsUnreadCount']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+ onOpenNavSettingsPopover(targetRef) {
+ dispatch(openPopover(POPOVER_NAV_SETTINGS, {
+ targetRef,
+ position: 'left-end',
+ }))
+ },
+ onOpenEmailModal() {
+ dispatch(openModal(MODAL_EMAIL_CONFIRMATION_REMINDER))
+ },
+ onResendUserConfirmationEmail() {
+ dispatch(resendUserConfirmationEmail())
+ },
+ onChange(key, value) {
+ dispatch(changeSetting(['displayOptions', key], value))
+ dispatch(saveSettings())
+ },
+})
+
+DeckSidebar.propTypes = {
+ account: ImmutablePropTypes.map,
+ actions: PropTypes.array,
+ tabs: PropTypes.array,
+ title: PropTypes.string,
+ showBackBtn: PropTypes.bool,
+ notificationCount: PropTypes.number.isRequired,
+ unreadChatsCount: PropTypes.number.isRequired,
+ onOpenNavSettingsPopover: PropTypes.func.isRequired,
+ onOpenEmailModal: PropTypes.func.isRequired,
+ onResendUserConfirmationEmail: PropTypes.func.isRequired,
+ emailConfirmationResends: PropTypes.number.isRequired,
+ noActions: PropTypes.bool,
+ theme: PropTypes.string,
+ logoDisabled: PropTypes.bool,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DeckSidebar)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/status.js b/app/javascript/gabsocial/components/status.js
index 0b46f2cb..718ade7d 100644
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -309,6 +309,7 @@ class Status extends ImmutablePureComponent {
isComposeModalOpen,
commentSortingType,
onOpenProModal,
+ isCompact,
} = this.props
// const { height } = this.state
@@ -361,7 +362,7 @@ class Status extends ImmutablePureComponent {
}
const parentClasses = CX({
- pb15: !isChild,
+ pb15: !isChild && !isCompact,
})
const containerClasses = CX({
@@ -437,6 +438,7 @@ class Status extends ImmutablePureComponent {
@@ -451,7 +453,7 @@ class Status extends ImmutablePureComponent {
}
{
- !isChild && !!me &&
+ !isChild && !!me && !isCompact &&
{
hasInteractions &&
-
@@ -214,6 +232,7 @@ StatusActionBar.propTypes = {
status: ImmutablePropTypes.map.isRequired,
onOpenLikes: PropTypes.func.isRequired,
onOpenReposts: PropTypes.func.isRequired,
+ isCompact: PropTypes.bool,
}
export default injectIntl(StatusActionBar)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/status_action_bar_item.js b/app/javascript/gabsocial/components/status_action_bar_item.js
index f89c173b..3a637874 100644
--- a/app/javascript/gabsocial/components/status_action_bar_item.js
+++ b/app/javascript/gabsocial/components/status_action_bar_item.js
@@ -18,20 +18,21 @@ class StatusActionBarItem extends React.PureComponent {
active,
disabled,
buttonRef,
- altTitle
+ altTitle,
+ isCompact,
} = this.props
const btnClasses = CX({
jcCenter: 1,
aiCenter: 1,
- px10: 1,
+ px10: !isCompact,
bgSubtle_onHover: !disabled,
})
const iconClasses = CX({
d: 1,
inheritFill: 1,
- mr10: !!title,
+ mr10: !!title && !isCompact,
})
const color = active ? 'brand' : 'secondary'
@@ -54,7 +55,7 @@ class StatusActionBarItem extends React.PureComponent {
iconClassName={iconClasses}
>
{
- !!title &&
+ !!title && !isCompact &&
{title}
@@ -75,6 +76,7 @@ StatusActionBarItem.propTypes = {
icon: PropTypes.string.isRequired,
active: PropTypes.bool,
disabled: PropTypes.bool,
+ isCompact: PropTypes.bool,
buttonRef: PropTypes.oneOf([
PropTypes.func,
PropTypes.node,
diff --git a/app/javascript/gabsocial/components/status_header.js b/app/javascript/gabsocial/components/status_header.js
index 2912f2de..86f2a427 100644
--- a/app/javascript/gabsocial/components/status_header.js
+++ b/app/javascript/gabsocial/components/status_header.js
@@ -37,6 +37,7 @@ class StatusHeader extends ImmutablePureComponent {
intl,
reduced,
status,
+ isCompact,
} = this.props
const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`
@@ -48,7 +49,7 @@ class StatusHeader extends ImmutablePureComponent {
pb10: reduced,
})
- const avatarSize = reduced ? 20 : 46
+ const avatarSize = reduced ? 20 : isCompact ? 38 : 46
const visibility = status.get('visibility')
@@ -75,6 +76,13 @@ class StatusHeader extends ImmutablePureComponent {
timeUntilExpiration = moment(expirationDate).fromNow()
}
+ const textContainerClasses = CX({
+ d: 1,
+ aiStart: 1,
+ flexGrow1 :1,
+ mt5: !isCompact,
+ })
+
return (
@@ -90,7 +98,7 @@ class StatusHeader extends ImmutablePureComponent {
}
-
+
({
+ isCompact: state.getIn(['settings', 'isCompact']),
+})
+
TimelineInjectionLayout.propTypes = {
title: PropTypes.string,
buttonLink: PropTypes.string,
@@ -115,4 +121,4 @@ TimelineInjectionLayout.propTypes = {
isXS: PropTypes.bool,
}
-export default connect()(TimelineInjectionLayout)
\ No newline at end of file
+export default connect(mapStateToProps)(TimelineInjectionLayout)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/containers/notification_container.js b/app/javascript/gabsocial/containers/notification_container.js
index 89469668..0733a2c4 100644
--- a/app/javascript/gabsocial/containers/notification_container.js
+++ b/app/javascript/gabsocial/containers/notification_container.js
@@ -18,6 +18,7 @@ const makeMapStateToProps = () => {
const isReposts = !!props.notification.get('repost')
const isGrouped = isFollows || isLikes || isReposts
const lastReadId = state.getIn(['notifications', 'lastReadId'])
+ const isCompact = state.getIn(['settings', 'isCompact'])
if (isFollows) {
let lastUpdated
@@ -40,6 +41,7 @@ const makeMapStateToProps = () => {
createdAt: lastUpdated,
isUnread: isUnread,
statusId: undefined,
+ isCompact,
}
} else if (isLikes || isReposts) {
const theType = isLikes ? 'like' : 'repost'
@@ -62,6 +64,7 @@ const makeMapStateToProps = () => {
createdAt: lastUpdated,
isUnread: isUnread,
statusId: list.get('status'),
+ isCompact,
}
} else if (!isGrouped) {
const notification = getNotification(state, props.notification, props.notification.get('account'))
@@ -74,6 +77,7 @@ const makeMapStateToProps = () => {
createdAt: notification.get('created_at'),
isUnread: lastReadId < notification.get('id'),
statusId: statusId || undefined,
+ isCompact,
}
}
}
diff --git a/app/javascript/gabsocial/containers/status_container.js b/app/javascript/gabsocial/containers/status_container.js
index bfebdb03..3f74f19f 100644
--- a/app/javascript/gabsocial/containers/status_container.js
+++ b/app/javascript/gabsocial/containers/status_container.js
@@ -183,6 +183,7 @@ const makeMapStateToProps = () => {
isComment,
commentSortingType,
isComposeModalOpen: state.getIn(['modal', 'modalType']) === 'COMPOSE',
+ isCompact: state.getIn(['settings', 'isCompact']),
}
}
diff --git a/app/javascript/gabsocial/features/deck.js b/app/javascript/gabsocial/features/deck.js
new file mode 100644
index 00000000..30fd23f5
--- /dev/null
+++ b/app/javascript/gabsocial/features/deck.js
@@ -0,0 +1,62 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import WrappedBundle from './ui/util/wrapped_bundle'
+import DeckColumn from '../components/deck_column'
+import {
+ AccountTimeline,
+ HomeTimeline,
+ Notifications,
+ HashtagTimeline,
+} from './ui/util/async_components'
+
+class Deck extends React.PureComponent {
+
+ static contextTypes = {
+ router: PropTypes.object,
+ }
+
+ componentDidMount () {
+ // this.props.connectDeck()
+ }
+
+ componentWillUnmount() {
+ // this.props.disconnectDeck()
+ }
+
+ render () {
+ const { account, children } = this.props
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+}
+
+const mapStateToProps = (state) => ({
+ account: state.getIn(['accounts', '1']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+
+})
+
+Deck.propTypes = {
+ //
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Deck)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js
index 43585b56..35c7f29c 100644
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/app/javascript/gabsocial/features/ui/util/async_components.js
@@ -23,6 +23,7 @@ export function ComposeForm() { return import(/* webpackChunkName: "components/c
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 DatePickerPopover() { return import(/* webpackChunkName: "components/date_picker_popover" */'../../../components/popover/date_picker_popover') }
+export function Deck() { return import(/* webpackChunkName: "features/deck" */'../../deck') }
export function DisplayOptionsModal() { return import(/* webpackChunkName: "components/display_options_modal" */'../../../components/modal/display_options_modal') }
export function DMCA() { return import(/* webpackChunkName: "features/about/dmca" */'../../about/dmca') }
export function EditProfileModal() { return import(/* webpackChunkName: "components/edit_profile_modal" */'../../../components/modal/edit_profile_modal') }
diff --git a/app/javascript/gabsocial/layouts/deck_layout.js b/app/javascript/gabsocial/layouts/deck_layout.js
new file mode 100644
index 00000000..371cb272
--- /dev/null
+++ b/app/javascript/gabsocial/layouts/deck_layout.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+ CX,
+ BREAKPOINT_EXTRA_SMALL,
+} from '../constants'
+import { me } from '../initial_state'
+import DeckSidebar from '../components/sidebar/deck_sidebar'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+
+class DeckLayout extends React.PureComponent {
+
+ render() {
+ const { children, title } = this.props
+
+ const mainBlockClasses = CX({
+ d: 1,
+ w1015PX: 1,
+ flexRow: 1,
+ jcEnd: 1,
+ py15: 1,
+ mlAuto: !me,
+ mrAuto: !me,
+ })
+
+ return (
+
+ )
+ }
+
+}
+
+DeckLayout.propTypes = {
+ title: PropTypes.string,
+}
+
+export default DeckLayout
\ No newline at end of file
diff --git a/app/javascript/gabsocial/pages/deck_page.js b/app/javascript/gabsocial/pages/deck_page.js
new file mode 100644
index 00000000..316063f0
--- /dev/null
+++ b/app/javascript/gabsocial/pages/deck_page.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PageTitle from '../features/ui/util/page_title'
+import DeckLayout from '../layouts/deck_layout'
+
+class DeckPage extends React.PureComponent {
+
+ render() {
+ const { children } = this.props
+
+ return (
+
+
+ {children}
+
+ )
+ }
+
+}
+
+DeckPage.propTypes = {
+ children: PropTypes.node.isRequired,
+}
+
+export default DeckPage
\ No newline at end of file
diff --git a/app/javascript/gabsocial/reducers/settings.js b/app/javascript/gabsocial/reducers/settings.js
index 25767741..b6df7f32 100644
--- a/app/javascript/gabsocial/reducers/settings.js
+++ b/app/javascript/gabsocial/reducers/settings.js
@@ -21,6 +21,7 @@ const initialState = ImmutableMap({
saved: true,
shownOnboarding: false,
skinTone: 1,
+ isCompact: false,
commentSorting: COMMENT_SORTING_TYPE_OLDEST,
// every dismiss reduces by half or set to zero for pwa, shop, pro
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index 5702f1fc..87088430 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -389,6 +389,7 @@ pre {
.displayNone { display: none; }
.displayBlock { display: block; }
.displayInline { display: inline; }
+.displayInlineBlock { display: inline-block; }
.displayFlex { display: flex !important; }
.cursorText { cursor: text; }
@@ -547,6 +548,7 @@ pre {
.minH40PX { min-height: 40px; }
.minH28PX { min-height: 28px; }
+.h100VH { height: 100vh; }
.h100PC { height: 100%; }
.h350PX { height: 350px; }
.h260PX { height: 260px; }
@@ -590,6 +592,7 @@ pre {
.w1255PX { width: 1255px; }
.w1015PX { width: 1015px; }
.w645PX { width: 645px; }
+.w360PX { width: 360px; }
.w340PX { width: 340px; }
.w330PX { width: 330px; }
.w300PX { width: 300px; }
diff --git a/app/services/process_hashtags_service.rb b/app/services/process_hashtags_service.rb
index 23d1cf15..12cf5f8c 100644
--- a/app/services/process_hashtags_service.rb
+++ b/app/services/process_hashtags_service.rb
@@ -10,8 +10,6 @@ class ProcessHashtagsService < BaseService
status.tags << tag
records << tag
-
- TrendingTags.record_use!(tag, status.account, status.created_at) if status.public_visibility?
end
return unless status.public_visibility? || status.unlisted_visibility?
diff --git a/config/settings.yml b/config/settings.yml
index 97680526..8dd4b074 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -82,6 +82,7 @@ defaults: &defaults
- links
- messages
- message
+ - deck
bootstrap_timeline_accounts: ''
development: