Commit df346596 authored by mgabdev's avatar mgabdev

Progress

parent 1cd851e0
......@@ -7,7 +7,7 @@ class HomeController < ApplicationController
before_action :set_data_for_meta
def index
@body_classes = 'app-body'
#
end
private
......
import './gab_logo.scss'
const GabLogo = ({
className = 'gab-logo',
width = '50px',
height = '30px',
viewBox = '0 0 50 30'
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
......@@ -18,14 +16,14 @@ const GabLogo = ({
xmlSpace='preserve'
>
<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-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'/>
<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
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
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'/>
......
......@@ -3,15 +3,15 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl, defineMessages } from 'react-intl';
import classNames from 'classnames';
import Avatar from '../avatar';
import IconButton from '../icon_button';
import Icon from '../icon';
import DisplayName from '../display_name';
import { closeSidebar } from '../../actions/sidebar';
import { shortNumberFormat } from '../../utils/numbers';
import { me } from '../../initial_state';
import { makeGetAccount } from '../../selectors';
import ProgressPanel from '../progress_panel';
import Avatar from './avatar';
import IconButton from './icon_button';
import Icon from './icon';
import DisplayName from './display_name';
import { closeSidebar } from '../actions/sidebar';
import { shortNumberFormat } from '../utils/numbers';
import { me } from '../initial_state';
import { makeGetAccount } from '../selectors';
import ProgressPanel from './progress_panel';
import GabLogo from './assets/gab_logo';
import {
GroupIcon,
......@@ -19,8 +19,6 @@ import {
NotificationsIcon,
} from './assets/tabs_bar_icon';
console.log("header global - styles:", styles);
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Follows' },
......@@ -120,17 +118,17 @@ class Header extends ImmutablePureComponent {
{
name: 'Notifications',
icon: <NotificationsIcon />,
to: '/',
to: '/notifications',
},
{
name: 'Groups',
icon: <NotificationsIcon />,
to: '/',
to: '/groups',
},
{
name: 'Lists',
icon: <NotificationsIcon />,
to: '/',
to: '/lists',
},
{
name: 'Chat',
......@@ -150,37 +148,34 @@ class Header extends ImmutablePureComponent {
];
return (
<header role='banner' className={[styles.header].join(' ')}>
<div className='header__container'>
<div className='header-scrollarea'>
<div className='header-scrollarea__container'>
<h1 className='header__heading'>
<a className='header__heading__btn'>
<header role='banner' className={[styles.default, styles.flexGrow1, styles.z3, styles.alignItemsEnd].join(' ')}>
<div className={[styles.default, styles.width275PX].join(' ')}>
<div className={[styles.default, styles.positionFixed, styles.top0, styles.height100PC].join(' ')}>
<div className={[styles.default, styles.height100PC, styles.width275PX, styles.paddingHorizontal20PX].join(' ')}>
<h1 className={[styles.default].join(' ')}>
<NavLink to='/' aria-label='Gab' className={[styles.default, styles.noSelect, styles.noUnderline, styles.height50PX, styles.justifyContentCenter, styles.cursorPointer, styles.paddingHoizontal10PX].join(' ')}>
<GabLogo />
</a>
</NavLink>
</h1>
<nav className='header-nav'>
<nav aria-label='Primary' role='navigation' className={[styles.default, styles.width100PC].join(' ')}>
{
sidebarItems.map((sidebarItem, i) => {
return (
<NavLink to={sidebarItem.to} className='header-nav__item' key={`header-nav__item-${i}`}>
<div className='header-nav__item__block'>
{sidebarItem.icon}
<span className='header-nav__item__title'>{sidebarItem.name}</span>
<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={[styles.default, styles.maxWidth100PC, styles.flexRow, styles.paddingVertical10PX, styles.paddingHoizontal10PX, styles.circle, styles.alignItemsCenter].join(' ')}>
<div className={[styles.default]}>
{sidebarItem.icon}
</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>
</NavLink>
)
})
}
<a className='header-nav__item'>
<div className='header-nav__item__block'>
<NotificationsIcon />
<span className='header-nav__item__title'>More</span>
</div>
</a>
</nav>
</div>
</div>
......
.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;
// }
// }
// }
\ No newline at end of file
export { default } from './header';
\ No newline at end of file
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>
)
}
}
\ No newline at end of file
export { default } from './link_footer';
\ No newline at end of file
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>
);
}
};
\ No newline at end of file
.link-footer {
flex: 0 0 auto;
padding: 20px 10px 10px 10px;
ul {
margin-bottom: 10px;
li {
display: inline;
}