Progress
This commit is contained in:
mgabdev
@@ -1,13 +1,11 @@
|
||||
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>
|
||||
@@ -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 +0,0 @@
|
||||
export { default } from './header';
|
||||
161
app/javascript/gabsocial/components/link_footer.js
Normal file
161
app/javascript/gabsocial/components/link_footer.js
Normal 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 +0,0 @@
|
||||
export { default } from './link_footer';
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
};
|
||||
@@ -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
34
app/javascript/gabsocial/components/page_layout.js
Normal 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 +0,0 @@
|
||||
export { default } from './page_layout';
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user