random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev 2020-02-04 10:50:18 -05:00
parent 1cd851e02e
commit df346596cf
25 changed files with 427 additions and 733 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/controllers/home_controller.rb
View File

@ -7,7 +7,7 @@ class HomeController < ApplicationController
before_action :set_data_for_meta before_action :set_data_for_meta
def index def index
@body_classes = 'app-body' #
end end
private private

8
app/javascript/gabsocial/components/header/assets/gab_logo/gab_logo.js → app/javascript/gabsocial/components/assets/gab_logo/gab_logo.js
View File

@ -1,13 +1,11 @@
import './gab_logo.scss' import './gab_logo.scss'
const GabLogo = ({ const GabLogo = ({
className = 'gab-logo',
width = '50px', width = '50px',
height = '30px', height = '30px',
viewBox = '0 0 50 30' viewBox = '0 0 50 30'
}) => ( }) => (
<svg <svg
className={className}
version='1.1' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'
x='0px' x='0px'
@ -18,14 +16,14 @@ const GabLogo = ({
xmlSpace='preserve' xmlSpace='preserve'
> >
<g> <g>
<path className='gab-logo__path' d='M13.8,7.6h-2.4v0.7V9l-0.4-0.3C10.2,7.8,9,7.2,7.7,7.2c-0.2,0-0.4,0-0.4,0c-0.1,0-0.3,0-0.5,0 <path className={styles.fillColorBrand} d='M13.8,7.6h-2.4v0.7V9l-0.4-0.3C10.2,7.8,9,7.2,7.7,7.2c-0.2,0-0.4,0-0.4,0c-0.1,0-0.3,0-0.5,0
c-5.6,0.3-8.7,7.2-5.4,12.1c2.3,3.4,7.1,4.1,9.7,1.5l0.3-0.3l0,0.7c0,1-0.1,1.5-0.4,2.2c-1,2.4-4.1,3-6.8,1.3 c-5.6,0.3-8.7,7.2-5.4,12.1c2.3,3.4,7.1,4.1,9.7,1.5l0.3-0.3l0,0.7c0,1-0.1,1.5-0.4,2.2c-1,2.4-4.1,3-6.8,1.3
c-0.2-0.1-0.4-0.2-0.4-0.2c-0.1,0.1-1.9,3.5-1.9,3.6c0,0.1,0.5,0.4,0.8,0.6c2.2,1.4,5.6,1.7,8.3,0.8c2.7-0.9,4.5-3.2,5-6.4 c-0.2-0.1-0.4-0.2-0.4-0.2c-0.1,0.1-1.9,3.5-1.9,3.6c0,0.1,0.5,0.4,0.8,0.6c2.2,1.4,5.6,1.7,8.3,0.8c2.7-0.9,4.5-3.2,5-6.4
c0.2-1.1,0.2-0.8,0.2-8.4l0-7.1H13.8z M9.7,17.6c-2.2,1.2-4.9-0.4-4.9-2.9C4.8,12.6,7,11,9,11.6C11.8,12.4,12.3,16.1,9.7,17.6z'/> c0.2-1.1,0.2-0.8,0.2-8.4l0-7.1H13.8z M9.7,17.6c-2.2,1.2-4.9-0.4-4.9-2.9C4.8,12.6,7,11,9,11.6C11.8,12.4,12.3,16.1,9.7,17.6z'/>
<path className='gab-logo__path' d='M45.6,7.7c-2.4-1-5-0.6-6.7,1L38.6,9V4.5V0h-2.4h-2.4v11v11h2.4h2.4v-0.7v-0.7l0.3,0.3 <path className={styles.fillColorBrand} d='M45.6,7.7c-2.4-1-5-0.6-6.7,1L38.6,9V4.5V0h-2.4h-2.4v11v11h2.4h2.4v-0.7v-0.7l0.3,0.3
c2.4,2.4,6.9,1.9,9.3-0.9C51.5,15.9,50.1,9.6,45.6,7.7z M43.7,17.5c-2.1,1.4-5.1-0.2-5.1-2.8c0-2.1,1.9-3.7,3.9-3.3 c2.4,2.4,6.9,1.9,9.3-0.9C51.5,15.9,50.1,9.6,45.6,7.7z M43.7,17.5c-2.1,1.4-5.1-0.2-5.1-2.8c0-2.1,1.9-3.7,3.9-3.3
C45.4,12.1,46.2,15.8,43.7,17.5z'/> C45.4,12.1,46.2,15.8,43.7,17.5z'/>
<path className='gab-logo__path' d='M31.5,12.5c-0.7-3.7-3.1-5.5-7.1-5.3c-1.7,0.1-4,0.7-4.8,1.4l-0.1,0.1l0.7,1.7c0.4,0.9,0.7,1.7,0.7,1.7 <path className={styles.fillColorBrand} d='M31.5,12.5c-0.7-3.7-3.1-5.5-7.1-5.3c-1.7,0.1-4,0.7-4.8,1.4l-0.1,0.1l0.7,1.7c0.4,0.9,0.7,1.7,0.7,1.7
c0,0,0.1,0,0.2-0.1c2.7-1.4,5.4-0.9,5.6,1.1l0,0.2l-0.4-0.1c-3-0.8-6.3-0.1-7.7,1.6c-1.8,2.2-0.9,5.8,1.7,7.1 c0,0,0.1,0,0.2-0.1c2.7-1.4,5.4-0.9,5.6,1.1l0,0.2l-0.4-0.1c-3-0.8-6.3-0.1-7.7,1.6c-1.8,2.2-0.9,5.8,1.7,7.1
c2.1,1,4.6,0.6,6.1-0.8l0.2-0.2v0.6v0.6h2.4h2.4v-4C31.7,13.7,31.7,13.3,31.5,12.5z M26.9,16.4c-0.1,0.7-0.5,1.5-1,2 c2.1,1,4.6,0.6,6.1-0.8l0.2-0.2v0.6v0.6h2.4h2.4v-4C31.7,13.7,31.7,13.3,31.5,12.5z M26.9,16.4c-0.1,0.7-0.5,1.5-1,2
c-1.2,1.1-3,0.7-3.2-0.7c-0.2-1,0.6-1.7,2-1.8c0.1,0,0.2,0,0.2,0c0,0,0.2,0,0.4,0c0.5,0,1,0.1,1.4,0.2l0.3,0.1L26.9,16.4z'/> c-1.2,1.1-3,0.7-3.2-0.7c-0.2-1,0.6-1.7,2-1.8c0.1,0,0.2,0,0.2,0c0,0,0.2,0,0.4,0c0.5,0,1,0.1,1.4,0.2l0.3,0.1L26.9,16.4z'/>

0
app/javascript/gabsocial/components/header/assets/gab_logo/gab_logo.scss → app/javascript/gabsocial/components/assets/gab_logo/gab_logo.scss
View File

0
app/javascript/gabsocial/components/header/assets/gab_logo/index.js → app/javascript/gabsocial/components/assets/gab_logo/index.js
View File

0
app/javascript/gabsocial/components/header/assets/tabs_bar_icon/group_icon.js → app/javascript/gabsocial/components/assets/tabs_bar_icon/group_icon.js
View File

0
app/javascript/gabsocial/components/header/assets/tabs_bar_icon/home_icon.js → app/javascript/gabsocial/components/assets/tabs_bar_icon/home_icon.js
View File

0
app/javascript/gabsocial/components/header/assets/tabs_bar_icon/index.js → app/javascript/gabsocial/components/assets/tabs_bar_icon/index.js
View File

0
app/javascript/gabsocial/components/header/assets/tabs_bar_icon/notifications_icon.js → app/javascript/gabsocial/components/assets/tabs_bar_icon/notifications_icon.js
View File

0
app/javascript/gabsocial/components/header/assets/tabs_bar_icon/search_icon.js → app/javascript/gabsocial/components/assets/tabs_bar_icon/search_icon.js
View File

63
app/javascript/gabsocial/components/header/header.js → app/javascript/gabsocial/components/header.js
View File

@ -3,15 +3,15 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import Avatar from '../avatar'; import Avatar from './avatar';
import IconButton from '../icon_button'; import IconButton from './icon_button';
import Icon from '../icon'; import Icon from './icon';
import DisplayName from '../display_name'; import DisplayName from './display_name';
import { closeSidebar } from '../../actions/sidebar'; import { closeSidebar } from '../actions/sidebar';
import { shortNumberFormat } from '../../utils/numbers'; import { shortNumberFormat } from '../utils/numbers';
import { me } from '../../initial_state'; import { me } from '../initial_state';
import { makeGetAccount } from '../../selectors'; import { makeGetAccount } from '../selectors';
import ProgressPanel from '../progress_panel'; import ProgressPanel from './progress_panel';
import GabLogo from './assets/gab_logo'; import GabLogo from './assets/gab_logo';
import { import {
GroupIcon, GroupIcon,
@ -19,8 +19,6 @@ import {
NotificationsIcon, NotificationsIcon,
} from './assets/tabs_bar_icon'; } from './assets/tabs_bar_icon';
console.log("header global - styles:", styles);
const messages = defineMessages({ const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' }, followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Follows' }, follows: { id: 'account.follows', defaultMessage: 'Follows' },
@ -120,17 +118,17 @@ class Header extends ImmutablePureComponent {
{ {
name: 'Notifications', name: 'Notifications',
icon: <NotificationsIcon />, icon: <NotificationsIcon />,
to: '/', to: '/notifications',
}, },
{ {
name: 'Groups', name: 'Groups',
icon: <NotificationsIcon />, icon: <NotificationsIcon />,
to: '/', to: '/groups',
}, },
{ {
name: 'Lists', name: 'Lists',
icon: <NotificationsIcon />, icon: <NotificationsIcon />,
to: '/', to: '/lists',
}, },
{ {
name: 'Chat', name: 'Chat',
@ -150,37 +148,34 @@ class Header extends ImmutablePureComponent {
]; ];
return ( return (
<header role='banner' className={[styles.header].join(' ')}> <header role='banner' className={[styles.default, styles.flexGrow1, styles.z3, styles.alignItemsEnd].join(' ')}>
<div className='header__container'> <div className={[styles.default, styles.width275PX].join(' ')}>
<div className='header-scrollarea'> <div className={[styles.default, styles.positionFixed, styles.top0, styles.height100PC].join(' ')}>
<div className='header-scrollarea__container'> <div className={[styles.default, styles.height100PC, styles.width275PX, styles.paddingHorizontal20PX].join(' ')}>
<h1 className='header__heading'> <h1 className={[styles.default].join(' ')}>
<a className='header__heading__btn'> <NavLink to='/' aria-label='Gab' className={[styles.default, styles.noSelect, styles.noUnderline, styles.height50PX, styles.justifyContentCenter, styles.cursorPointer, styles.paddingHoizontal10PX].join(' ')}>
<GabLogo /> <GabLogo />
</a> </NavLink>
</h1> </h1>
<nav className='header-nav'> <nav aria-label='Primary' role='navigation' className={[styles.default, styles.width100PC].join(' ')}>
{ {
sidebarItems.map((sidebarItem, i) => { sidebarItems.map((sidebarItem, i) => {
return ( return (
<NavLink to={sidebarItem.to} className='header-nav__item' key={`header-nav__item-${i}`}> <NavLink to={sidebarItem.to} key={`header-nav-item-${i}`} className={[styles.default, styles.noUnderline, styles.cursorPointer, styles.width100PC, styles.alignItemsStart, styles.flexGrow1].join(' ')}>
<div className='header-nav__item__block'> <div className={[styles.default, styles.maxWidth100PC, styles.flexRow, styles.paddingVertical10PX, styles.paddingHoizontal10PX, styles.circle, styles.alignItemsCenter].join(' ')}>
<div className={[styles.default]}>
{sidebarItem.icon} {sidebarItem.icon}
<span className='header-nav__item__title'>{sidebarItem.name}</span> </div>
<div className={[styles.default, styles.paddingHorizontal20PX, styles.textOverflowEllipsis, styles.overflowWrapBreakWord, styles.displayInline].join(' ')}>
<span className={[styles.default, styles.fontWeightBold, styles.fontSize19PX, styles.text].join(' ')}>
{sidebarItem.name}
</span>
</div>
</div> </div>
</NavLink> </NavLink>
) )
}) })
} }
<a className='header-nav__item'>
<div className='header-nav__item__block'>
<NotificationsIcon />
<span className='header-nav__item__title'>More</span>
</div>
</a>
</nav> </nav>
</div> </div>
</div> </div>

285
app/javascript/gabsocial/components/header/header.scss
View File

@ -1,285 +0,0 @@
.header {
display: flex;
flex-basis: auto;
flex-direction: column;
flex-shrink: 0;
flex-grow: 1;
align-items: flex-end;
z-index: 3;
&__container {
display: flex;
flex-basis: auto;
flex-direction: column;
flex-shrink: 0;
width: 275px;
}
&__heading {
display: flex;
width: 100%;
margin-top: 4px;
&__btn {
display: flex;
max-width: 100%;
padding: 10px;
cursor: pointer;
}
}
}
.header-scrollarea {
position: fixed;
height: 100%;
top: 0;
&__container {
display: flex;
width: 275px;
height: 100%;
padding-left: 20px;
padding-right: 20px;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
overflow-y: scroll;
}
}
.header-nav {
display: flex;
width: 100%;
flex-direction: column;
&__item {
display: flex;
align-items: flex-start;
width: 100%;
flex-grow: 1;
height: 54px;
cursor: pointer;
text-decoration: none;
@include vertical-padding(4px);
&__block {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 100%;
padding: 10px;
border-radius: 27px;
}
&__icon {
@include size(26px);
&__path {
stroke: #fff;
fill: none;
stroke-width: 4px;
stroke-linecap: round;
&--fill {
stroke: none !important;
fill: #fff !important;
}
}
}
&__title {
overflow-wrap: break-word;
font-size: 19px;
color: #fff;
@include horizontal-margin(15px);
}
&:hover & {
&__block {
background-color: rgba($gab-brand-default, 0.25);
}
&__title {
color: $gab-brand-default;
}
}
}
}
// .sidebar-menu {
// display: flex;
// position: fixed;
// flex-direction: column;
// width: 275px;
// height: 100vh;
// top: 0;
// bottom: 0;
// left: 0;
// background: $gab-background-container;
// transform: translateX(-275px);
// transition: all 0.15s linear;
// z-index: 10001;
// body.theme-gabsocial-light & {
// background: $gab-background-container-light;
// }
// &__root {
// display: none;
// }
// &__wrapper {
// display: block;
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// z-index: 10000;
// background-color: transparent;
// transition: background-color 0.2s linear;
// transition-delay: 0.1s;
// }
// &__content {
// display: flex;
// flex: 1 1;
// flex-direction: column;
// padding-bottom: 40px;
// overflow: hidden;
// overflow-y: scroll;
// -webkit-overflow-scrolling: touch;
// }
// &__section {
// display: block;
// margin: 4px 0;
// border-top: 1px solid lighten($ui-base-color, 4%);
// &--borderless {
// margin: 0;
// border-top: none;
// }
// }
// @media (max-width: 400px) {
// width: 90vw;
// }
// }
// .sidebar-menu__root--visible {
// display: block;
// .sidebar-menu {
// transform: translateX(0);
// }
// .sidebar-menu__wrapper {
// background-color: rgba(0,0,0,0.3);
// }
// }
// .sidebar-menu-header {
// display: flex;
// height: 46px;
// padding: 12px 14px;
// border-bottom: 1px solid lighten($ui-base-color, 4%);
// box-sizing: border-box;
// align-items: center;
// &__title {
// display: block;
// font-size: 18px;
// font-weight: 600;
// color: $primary-text-color;
// }
// &__btn {
// margin-left: auto;
// }
// }
// .sidebar-menu-profile {
// display: block;
// padding: 14px 18px;
// &__avatar {
// display: block;
// width: 56px;
// height: 56px;
// }
// &__name {
// display: block;
// margin-top: 10px;
// .display-name__account {
// display: block;
// margin-top: 2px;
// }
// }
// &__stats {
// display: flex;
// margin-top: 12px;
// }
// }
// .sidebar-menu-profile-stat {
// display: flex;
// font-size: 14px;
// text-decoration: none;
// &:not(:first-of-type) {
// margin-left: 18px;
// }
// &__value {
// display: flex;
// margin-right: 3px;
// font-weight: 700;
// color: $primary-text-color;
// }
// &__label {
// display: flex;
// color: $primary-text-color;
// }
// &:hover {
// text-decoration: underline;
// }
// }
// .sidebar-menu-item {
// display: flex;
// padding: 16px 18px;
// cursor: pointer;
// text-decoration: none;
// color: $primary-text-color;
// font-size: 15px;
// font-weight: 400;
// height: 50px;
// box-sizing: border-box;
// &:hover {
// background-color: rgba($gab-brand-default, 0.1);
// .fa {
// color: $primary-text-color;
// }
// }
// .fa {
// margin-right: 10px;
// }
// &:hover {
// &__title {
// color: $primary-text-color;
// }
// }
// }

1
app/javascript/gabsocial/components/header/index.js
View File

@ -1 +0,0 @@
export { default } from './header';

161
app/javascript/gabsocial/components/link_footer.js Normal file
View File

@ -0,0 +1,161 @@
import moment from 'moment'
import classNames from 'classnames/bind'
import {
defineMessages,
injectIntl,
} from 'react-intl'
import { openModal } from '../actions/modal'
import {
version,
repository,
source_url,
me,
} from '../initial_state'
const messages = defineMessages({
invite: { id: 'getting_started.invite', defaultMessage: 'Invite people' },
hotkeys: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Hotkeys' },
security: { id: 'getting_started.security', defaultMessage: 'Security' },
about: { id: 'navigation_bar.info', defaultMessage: 'About' },
developers: { id: 'getting_started.developers', defaultMessage: 'Developers' },
terms: { id: 'getting_started.terms', defaultMessage: 'Terms of Service' },
dmca: { id: 'getting_started.dmca', defaultMessage: 'DMCA' },
terms: { id: 'getting_started.terms_of_sale', defaultMessage: 'Terms of Sale' },
privacy: { id: 'getting_started.privacy', defaultMessage: 'Privacy Policy' },
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
notice: { id: 'getting_started.open_source_notice', defaultMessage: 'Gab Social is open source software. You can contribute or report issues on our self-hosted GitLab at {gitlab}.' },
})
const mapDispatchToProps = (dispatch) => ({
onOpenHotkeys() {
dispatch(openModal('HOTKEYS'))
},
})
export default @connect(null, mapDispatchToProps)
@injectIntl
class LinkFooter extends PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
onOpenHotkeys: PropTypes.func.isRequired,
}
state = {
hoveringItemIndex: null,
}
onMouseEnterLinkFooterItem = (i) => {
this.setState({
hoveringItemIndex: i,
})
}
onMouseLeaveLinkFooterItem = () => {
this.setState({
hoveringItemIndex: null,
})
}
render() {
const { onOpenHotkeys, intl } = this.props
const { hoveringItemIndex } = this.state
const cx = classNames.bind(styles);
const currentYear = moment().format('YYYY')
const linkFooterItems = [
{
to: '#',
onClick: onOpenHotkeys,
text: intl.formatMessage(messages.hotkeys),
requiresUser: true,
},
{
to: '/auth/edit',
text: intl.formatMessage(messages.security),
requiresUser: true,
},
{
to: '/about',
text: intl.formatMessage(messages.about),
},
{
to: '/settings/applications',
text: intl.formatMessage(messages.developers),
},
{
to: '/about/tos',
text: intl.formatMessage(messages.terms),
},
{
to: '/about/dmca',
text: intl.formatMessage(messages.dmca),
},
{
to: '/about/sales',
text: intl.formatMessage(messages.terms),
},
{
to: '/about/privacy',
text: intl.formatMessage(messages.privacy),
},
{
to: '/auth/sign_out',
text: intl.formatMessage(messages.logout),
requiresUser: true,
logout: true,
},
]
return (
<div className={styles.default}>
<nav aria-label='Footer' role='navigation' className={[styles.default, styles.flexWrap, styles.flexRow].join(' ')}>
{
linkFooterItems.map((linkFooterItem, i) => {
if (linkFooterItem.requiresUser && !me) return null
const classes = cx({
default: 1,
fontSize13PX: 1,
text: 1,
marginVertical5PX: 1,
paddingRight15PX: 1,
colorSubtle: i !== hoveringItemIndex,
noUnderline: i !== hoveringItemIndex,
colorBlack: i === hoveringItemIndex,
underline: i === hoveringItemIndex,
})
return (
<a
key={`link-footer-item-${i}`}
href={linkFooterItem.to}
data-method={linkFooterItem.logout ? 'delete' : null}
onClick={linkFooterItem.onClick || null}
onMouseEnter={() => this.onMouseEnterLinkFooterItem(i)}
onMouseLeave={() => this.onMouseLeaveLinkFooterItem(i)}
className={classes}
>
{linkFooterItem.text}
</a>
)
})
}
</nav>
<p>
{intl.formatMessage(messages.invite, {
gitlab: (
<span>
<a href={source_url} rel='noopener' target='_blank'>{repository}</a>
(v{version})
</span>
)
})}
</p>
<p>© {currentYear} Gab AI Inc.</p>
</div>
)
}
}

1
app/javascript/gabsocial/components/link_footer/index.js
View File

@ -1 +0,0 @@
export { default } from './link_footer';

64
app/javascript/gabsocial/components/link_footer/link_footer.js
View File

@ -1,64 +0,0 @@
import { defineMessages, injectIntl } from 'react-intl';
import { openModal } from '../../actions/modal';
import { invitesEnabled, version, repository, source_url, me } from '../../initial_state';
import './link_footer.scss';
const messages = defineMessages({
invite: { id:'getting_started.invite', defaultMessage: 'Invite people' },
hotkeys: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Hotkeys' },
security: { id: 'getting_started.security', defaultMessage: 'Security' },
about: { id: 'navigation_bar.info', defaultMessage: 'About' },
developers: { id: 'getting_started.developers', defaultMessage: 'Developers' },
terms: { id: 'getting_started.terms', defaultMessage: 'Terms of Service' },
dmca: { id: 'getting_started.dmca', defaultMessage: 'DMCA' },
terms: { id: 'getting_started.terms_of_sale', defaultMessage: 'Terms of Sale' },
privacy: { id: 'getting_started.privacy', defaultMessage: 'Privacy Policy' },
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
notice: { id: 'getting_started.open_source_notice', defaultMessage: 'Gab Social is open source software. You can contribute or report issues on our self-hosted GitLab at {gitlab}.' },
});
const mapDispatchToProps = (dispatch) => ({
onOpenHotkeys() {
dispatch(openModal('HOTKEYS'));
},
});
export default @connect(null, mapDispatchToProps)
@injectIntl
class LinkFooter extends PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
onOpenHotkeys: PropTypes.func.isRequired,
};
render() {
const { onOpenHotkeys, intl } = this.props;
return (
<div className='link-footer'>
<ul>
{(invitesEnabled && me) && <li><a href='/invites'>{intl.formatMessage(messages.invite)}</a> · </li>}
{me && <li><a href='#' onClick={onOpenHotkeys}>{intl.formatMessage(messages.hotkeys)}</a> · </li>}
{me && <li><a href='/auth/edit'>{intl.formatMessage(messages.security)}</a> · </li>}
<li><a href='/about'>{intl.formatMessage(messages.about)}</a> · </li>
<li><a href='/settings/applications'>{intl.formatMessage(messages.developers)}</a> · </li>
<li><a href='/about/tos'>{intl.formatMessage(messages.terms)}</a> · </li>
<li><a href='/about/dmca'>{intl.formatMessage(messages.dmca)}</a> · </li>
<li><a href='/about/sales'>{intl.formatMessage(messages.terms)}</a> · </li>
<li><a href='/about/privacy'>{intl.formatMessage(messages.privacy)}</a></li>
{me && <li> · <a href='/auth/sign_out' data-method='delete'>{intl.formatMessage(messages.logout)}</a></li>}
</ul>
<p>
{intl.formatMessage(messages.invite, {
gitlab: <span><a href={source_url} rel='noopener' target='_blank'>{repository}</a> (v{version})</span>
})}
</p>
<p>© 2019 Gab AI Inc.</p>
</div>
);
}
};

33
app/javascript/gabsocial/components/link_footer/link_footer.scss
View File

@ -1,33 +0,0 @@
.link-footer {
flex: 0 0 auto;
padding: 20px 10px 10px 10px;
ul {
margin-bottom: 10px;
li {
display: inline;
}
}
p {
color: $dark-text-color;
font-size: 13px;
margin-bottom: 20px;
a {
color: $gab-secondary-text;
text-decoration: underline;
}
}
a {
text-decoration: none;
color: $gab-secondary-text;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
}

34
app/javascript/gabsocial/components/page_layout.js Normal file
View File

@ -0,0 +1,34 @@
import Header from './header'
export default class PageLayout extends PureComponent {
static propTypes = {
layout: PropTypes.object,
};
render() {
const { children, layout } = this.props;
const right = layout.RIGHT || null;
return (
<div className={[styles.default, styles.flexRow, styles.width100PC, styles.height100PC].join(' ')}>
<Header />
<main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.flexRow].join(' ')}>
<div className={[styles.default, styles.width990PX, styles.flexRow].join(' ')}>
<div className={[styles.default, styles.width600PX, styles.z1].join(' ')}>
<div className={styles.default}>
{children}
</div>
</div>
<div className={[styles.default, styles.width350PX].join(' ')}>
<div className={styles.default}>
{right}
</div>
</div>
</div>
</main>
</div>
)
}
}

1
app/javascript/gabsocial/components/page_layout/index.js
View File

@ -1 +0,0 @@
export { default } from './page_layout';

36
app/javascript/gabsocial/components/page_layout/page_layout.js
View File

@ -1,36 +0,0 @@
import Header from '../header'
console.log("in the page_layout - styles:", styles);
export default class PageLayout extends PureComponent {
static propTypes = {
layout: PropTypes.object,
};
render() {
const { children, layout } = this.props;
const right = layout.RIGHT || null;
return (
<div className='page'>
{/*<Header />*/}
<main className='main' role='main'>
<div className='main__container'>
<div className='main-contents'>
<div className='main-contents__inner'>
{ /* children */ }
</div>
</div>
<div className='main-sidebar'>
<div className='main-sidebar__inner'>
{ /* right */ }
</div>
</div>
</div>
</main>
</div>
)
}
}

54
app/javascript/gabsocial/components/page_layout/page_layout.scss
View File

@ -1,54 +0,0 @@
.page {
display: flex;
flex-direction: row;
width: 100%;
&__top {
display: flex;
z-index: 105;
@include size(100%, auto);
@media (min-width:895px) {
top: -290px;
position: sticky;
}
}
.main {
display: flex;
flex-basis: auto;
flex-direction: column;
flex-shrink: 1;
flex-grow: 1;
align-items: flex-start;
&__container {
display: flex;
align-items: stretch;
justify-content: space-between;
flex-grow: 1;
flex-direction: row;
width: 990px;
}
}
}
.main-contents {
display: flex;
max-width: 600px;
z-index: 1;
&__inner {
}
}
.main-sidebar {
display: flex;
width: 350px;
&__inner {
}
}

142
app/javascript/gabsocial/features/ui/ui.js
View File

@ -16,52 +16,52 @@ import { clearHeight } from '../../actions/height_cache';
import { openModal } from '../../actions/modal'; import { openModal } from '../../actions/modal';
import WrappedRoute from './util/wrapped_route'; import WrappedRoute from './util/wrapped_route';
import { isMobile } from '../../utils/is_mobile'; import { isMobile } from '../../utils/is_mobile';
import NotificationsContainer from '../../containers/notifications_container'; // import NotificationsContainer from '../../containers/notifications_container';
import LoadingBarContainer from '../../containers/loading_bar_container'; // import LoadingBarContainer from '../../containers/loading_bar_container';
import ModalContainer from '../../containers/modal_container'; // import ModalContainer from '../../containers/modal_container';
import UploadArea from '../../components/upload_area'; // import UploadArea from '../../components/upload_area';
import FooterBar from '../../components/footer_bar'; // import FooterBar from '../../components/footer_bar';
// import TrendsPanel from './components/trends_panel'; // import TrendsPanel from './components/trends_panel';
import { WhoToFollowPanel } from '../../components/panel'; // import { WhoToFollowPanel } from '../../components/panel';
import LinkFooter from '../../components/link_footer'; // import LinkFooter from '../../components/link_footer';
import ProfilePage from '../../pages/profile_page'; // import ProfilePage from '../../pages/profile_page';
// import GroupsPage from 'gabsocial/pages/groups_page'; // import GroupsPage from 'gabsocial/pages/groups_page';
import GroupPage from '../../pages/group_page'; // import GroupPage from '../../pages/group_page';
import SearchPage from '../../pages/search_page'; // import SearchPage from '../../pages/search_page';
import HomePage from '../../pages/home_page'; import HomePage from '../../pages/home_page';
import GroupSidebarPanel from '../groups/sidebar_panel'; // import GroupSidebarPanel from '../groups/sidebar_panel';
import { import {
Status, // Status,
GettingStarted, // GettingStarted,
CommunityTimeline, // CommunityTimeline,
AccountTimeline, // AccountTimeline,
AccountGallery, // AccountGallery,
HomeTimeline, HomeTimeline,
Followers, // Followers,
Following, // Following,
Reblogs, // Reblogs,
Favourites, // Favourites,
DirectTimeline, // DirectTimeline,
HashtagTimeline, // HashtagTimeline,
Notifications, // Notifications,
FollowRequests, // FollowRequests,
GenericNotFound, // GenericNotFound,
FavouritedStatuses, // FavouritedStatuses,
Blocks, // Blocks,
DomainBlocks, // DomainBlocks,
Mutes, // Mutes,
PinnedStatuses, // PinnedStatuses,
Search, // Search,
Explore, // Explore,
Groups, // Groups,
GroupTimeline, // GroupTimeline,
ListTimeline, // ListTimeline,
Lists, // Lists,
GroupMembers, // GroupMembers,
GroupRemovedAccounts, // GroupRemovedAccounts,
GroupCreate, // GroupCreate,
GroupEdit, // GroupEdit,
} from './util/async-components'; } from './util/async-components';
import { me, meUsername } from '../../initial_state'; import { me, meUsername } from '../../initial_state';
@ -70,8 +70,8 @@ import { me, meUsername } from '../../initial_state';
import '../../components/status'; import '../../components/status';
import { fetchGroups } from '../../actions/groups'; import { fetchGroups } from '../../actions/groups';
import '../../../styles/application.scss'; // import '../../../styles/application.scss';
import './ui.scss'; // import './ui.scss';
const messages = defineMessages({ const messages = defineMessages({
beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Gab Social.' }, beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Gab Social.' },
@ -114,30 +114,30 @@ const keyMap = {
}; };
const LAYOUT = { const LAYOUT = {
EMPTY: { // EMPTY: {
LEFT: null, // LEFT: null,
RIGHT: null, // RIGHT: null,
}, // },
DEFAULT: { // DEFAULT: {
LEFT: [ // LEFT: [
<WhoToFollowPanel key='0' />, // <WhoToFollowPanel key='0' />,
<LinkFooter key='1' />, // <LinkFooter key='1' />,
], // ],
RIGHT: [ // RIGHT: [
// <TrendsPanel />, // // <TrendsPanel />,
<GroupSidebarPanel key='0' /> // <GroupSidebarPanel key='0' />
], // ],
}, // },
STATUS: { // STATUS: {
TOP: null, // TOP: null,
LEFT: null, // LEFT: null,
RIGHT: [ // RIGHT: [
<GroupSidebarPanel key='0' />, // <GroupSidebarPanel key='0' />,
<WhoToFollowPanel key='1' />, // <WhoToFollowPanel key='1' />,
// <TrendsPanel />, // // <TrendsPanel />,
<LinkFooter key='2' />, // <LinkFooter key='2' />,
], // ],
}, // },
}; };
const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/); const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
@ -182,12 +182,12 @@ class SwitchingColumnsArea extends PureComponent {
<Switch> <Switch>
<Redirect from='/' to='/home' exact /> <Redirect from='/' to='/home' exact />
<WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} /> <WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} /> {/*<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />
{/*<WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'featured' }} /> <WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'featured' }} />
<WrappedRoute path='/groups/create' page={GroupsPage} component={Groups} content={children} componentParams={{ showCreateForm: true, activeTab: 'featured' }} /> <WrappedRoute path='/groups/create' page={GroupsPage} component={Groups} content={children} componentParams={{ showCreateForm: true, activeTab: 'featured' }} />
<WrappedRoute path='/groups/browse/member' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'member' }} /> <WrappedRoute path='/groups/browse/member' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'member' }} />
<WrappedRoute path='/groups/browse/admin' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'admin' }} />*/} <WrappedRoute path='/groups/browse/admin' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'admin' }} />
<WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} /> <WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />
<WrappedRoute path='/groups/:id/removed_accounts' page={GroupPage} component={GroupRemovedAccounts} content={children} /> <WrappedRoute path='/groups/:id/removed_accounts' page={GroupPage} component={GroupRemovedAccounts} content={children} />
<WrappedRoute path='/groups/:id/edit' page={GroupPage} component={GroupEdit} content={children} /> <WrappedRoute path='/groups/:id/edit' page={GroupPage} component={GroupEdit} content={children} />
@ -240,7 +240,7 @@ class SwitchingColumnsArea extends PureComponent {
<Redirect from='/@:username/posts/:statusId/reblogs' to='/:username/posts/:statusId/reblogs' /> <Redirect from='/@:username/posts/:statusId/reblogs' to='/:username/posts/:statusId/reblogs' />
<WrappedRoute path='/:username/posts/:statusId/reblogs' layout={LAYOUT.STATUS} component={Reblogs} content={children} /> <WrappedRoute path='/:username/posts/:statusId/reblogs' layout={LAYOUT.STATUS} component={Reblogs} content={children} />
<WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} /> <WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />*/}
</Switch> </Switch>
); );
} }
@ -531,7 +531,7 @@ class UI extends PureComponent {
return ( return (
<HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused> <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
<div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}> <div ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
<SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}> <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
{children} {children}
</SwitchingColumnsArea> </SwitchingColumnsArea>

16
app/javascript/gabsocial/pages/home_page.js
View File

@ -1,10 +1,10 @@
import { Fragment } from 'react'; import { Fragment } from 'react';
import GroupSidebarPanel from '../features/groups/sidebar_panel'; // import GroupSidebarPanel from '../features/groups/sidebar_panel';
import LinkFooter from '../components/link_footer'; import LinkFooter from '../components/link_footer';
import PromoPanel from '../components/promo_panel'; // import PromoPanel from '../components/promo_panel';
import UserPanel from '../components/user_panel'; // import UserPanel from '../components/user_panel';
import PageLayout from '../components/page_layout'; import PageLayout from '../components/page_layout';
import TimelineComposeBlock from '../components/timeline_compose_block'; // import TimelineComposeBlock from '../components/timeline_compose_block';
export default class HomePage extends PureComponent { export default class HomePage extends PureComponent {
render () { render () {
@ -15,15 +15,15 @@ export default class HomePage extends PureComponent {
layout={{ layout={{
RIGHT: ( RIGHT: (
<Fragment> <Fragment>
<GroupSidebarPanel /> {/*<GroupSidebarPanel />*/}
<PromoPanel /> {/*<PromoPanel />*/}
<LinkFooter /> <LinkFooter />
</Fragment> </Fragment>
), ),
}} }}
> >
<TimelineComposeBlock size={46} shouldCondense={true} autoFocus={false} /> {/*<TimelineComposeBlock size={46} shouldCondense={true} autoFocus={false} />*/}
{children} {/*children*/}
</PageLayout> </PageLayout>
) )
} }

247
app/javascript/styles/global.css
View File

@ -1,55 +1,33 @@
html, body { html, body {
height: 100%; height: 100%;
margin: 0;
padding: 0;
} }
body { body {
-ms-overflow-style:scrollbar;
overflow-y: scroll; overflow-y: scroll;
overscroll-behavior-y: none; overscroll-behavior-y: none;
} }
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
}
.default { .default {
align-items: stretch;
border: 0 solid black;
box-sizing: border-box;
display: flex; display: flex;
flex-basis: auto; flex-basis: auto;
flex-direction: column; flex-direction: column;
align-items: stretch;
flex-shrink: 0; flex-shrink: 0;
margin-bottom: 0px; border: 0 solid black;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 0px;
min-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
z-index: 0; z-index: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
} }
.text { .text {
font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}
.color-black {
color: rgba(0, 0, 0, 1.00);
}
.inline {
display: inline; display: inline;
white-space: pre-wrap;
word-wrap: break-word;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
} }
.wrap { .wrap {
@ -57,128 +35,131 @@ body {
word-wrap: break-word; word-wrap: break-word;
} }
.overflowWrapBreakWord {
overflow-wrap: break-word;
}
.inherit { .inherit {
color: inherit; color: inherit;
font: inherit; font: inherit;
white-space: inherit; white-space: inherit;
} }
.r-13awgt0 { .flex-normal {
-ms-flex-negative: 1;
-ms-flex-positive: 1;
-ms-flex-preferred-size: 0%;
-webkit-box-flex: 1;
-webkit-flex-basis: 0%;
-webkit-flex-grow: 1;
-webkit-flex-shrink: 1;
flex-basis: 0%; flex-basis: 0%;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
} }
.r-4qtqp9 { .flexGrow1 { flex-grow: 1; }
display: inline-block; .flexShrink1 { flex-shrink: 1; }
.flexRow { flex-direction: row; }
.flexWrap { flex-wrap: wrap; }
.alignItemsEnd { align-items: flex-end; }
.alignItemsStart { align-items: flex-start; }
.alignItemsCenter { align-items: center; }
.justifyContentSpaceBetween { justify-content: space-between; }
.justifyContentCenter { justify-content: center; }
.overflowHidden {
overflow-x: hidden;
overflow-y: hidden;
} }
.r-ywje51 { .textOverflowEllipsis {
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}
.r-hvic4v {
display: none;
}
.r-1adg3ll {
display: block;
}
.r-12vffkv>* {
pointer-events: auto;
}
.r-12vffkv {
pointer-events: none !important;
}
.r-14lw9ot {
background-color: rgba(255, 255, 255, 1.00);
}
.r-1p0dtai {
bottom: 0px;
}
.r-1d2f490 {
left: 0px;
}
.r-1xcajam {
position: fixed;
}
.r-zchlnj {
right: 0px;
}
.r-ipm5af {
top: 0px;
}
.r-yyyyoo {
fill: currentcolor;
}
.r-1xvli5t {
height: 1.25em;
}
.r-dnmrzs {
max-width: 100%; max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.r-bnwqim { .circle { border-radius: 9999px; }
position: relative;
.marginAuto { margin: auto; }
.displayNone { display: none; }
.displayBlock { display: block; }
.displayInline { display: inline; }
.displayInlineBlock { display: inline-block; }
.cursorPointer { cursor: pointer }
.pointerEventsAuto > * { pointer-events: auto;}
.pointerEventsNone { pointer-events: none !important; }
.backgroundWhite { background-color: #fff; }
.colorBlack { color: #000; }
.colorSubtle { color: #666; }
.colorBrand { color: rgb(29, 161, 242); }
.fillColorBrand { fill: #21cf7a; }
.bottom0 { bottom: 0; }
.left0 { left: 0px; }
.right0 { right: 0px; }
.top0 { top: 0px; }
.lineHeight125 { height: 1.25em; }
.lineHeight2 { line-height: 2em; }
.positionFixed { position: fixed; }
.positionRelative { position: relative; }
.positionAbsolute { position: absolute; }
.noSelect { user-select: none; }
.height100PC { height: 100%; }
.height50PX { height: 50px; }
.height72PX { height: 72px; }
.width990PX { width: 990px; }
.width600PX { width: 600px; }
.width350PX { width: 350px; }
.width275PX { width: 275px; }
.width100PC { width: 100%; }
.width72PX { width: 72px; }
.maxWidth100PC { max-width: 100%; }
.top0 { top: 0; }
.top60PC { top: 60%; }
.textAlignCenter { text-align: center; }
.fontSize19PX { font-size: 19px; }
.fontSize13PX { font-size: 13px; }
.fontWeightNormal { font-weight: 400; }
.fontWeightBold { font-weight: 600; }
.noUnderline { text-decoration: none; }
.underline { text-decoration: underline; }
.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.marginVertical5PX {
margin-top: 5px;
margin-bottom: 5px;
} }
.r-1plcrui { .paddingVertical10PX {
vertical-align: text-bottom; padding-top: 10px;
padding-bottom: 10px;
} }
.r-lrvibr { .paddingHoizontal10PX {
-moz-user-select: none; padding-left: 10px;
-ms-user-select: none; padding-right: 10px;
-webkit-user-select: none;
user-select: none;
} }
.color-brand { .paddingHorizontal20PX {
color: rgba(29, 161, 242, 1.00); padding-left: 20px;
padding-right: 20px;
} }
.height-72-px { .paddingRight15PX {
height: 72px; padding-right: 15px;
}
.position-relative {
position: absolute;
}
.width-72-px {
width: 72px;
}
.top-60-pc {
top: 60%;
}
.line-height-2 {
line-height: 2em;
}
.text-align-center {
text-align: center;
} }

2
app/views/home/index.html.haml
View File

@ -8,7 +8,7 @@
= javascript_pack_tag 'application', integrity: true, crossorigin: 'anonymous' = javascript_pack_tag 'application', integrity: true, crossorigin: 'anonymous'
.app-holder#gabsocial{ data: { props: Oj.dump(default_props) } } #gabsocial{ data: { props: Oj.dump(default_props) } }
%noscript %noscript
= image_pack_tag 'logo.png', alt: 'Gab Social' = image_pack_tag 'logo.png', alt: 'Gab Social'

2
config/webpack/rules/css.js
View File

@ -19,7 +19,7 @@ module.exports = {
sourceMap: true, sourceMap: true,
importLoaders: 2, importLoaders: 2,
modules: true, modules: true,
// localIdentName: '[name]', localIdentName: '[hash:base64:5]',
}, },
}, },
{ {