Commit 1cd851e0 authored by mgabdev's avatar mgabdev

Progress

parent 960c43d2
......@@ -3,7 +3,7 @@
position: relative;
box-sizing: border-box;
flex-direction: column;
width: 350px;
// width: 350px;
flex: 1 1 100%;
overflow: hidden;
......
......@@ -7,7 +7,7 @@ export default class ColumnSettingsHeading extends PureComponent {
};
render() {
const { heading } = this.props;
const { heading, id } = this.props;
return (
<span id={id} className='column-settings-heading'>{heading}</span>
......
import './columns_area.scss';
export default class ColumnsArea extends PureComponent {
static propTypes = {
children: PropTypes.node,
layout: PropTypes.object,
};
render () {
const { children } = this.props;
const layout = this.props.layout || {LEFT:null,RIGHT:null};
console.log("layout:", layout);
return (
<div className='page'>
<div className='page__columns'>
<div className='columns-area__panels'>
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
<div className='columns-area__panels__pane__inner'>
{layout.LEFT}
</div>
</div>
<div className='columns-area__panels__main'>
<div className='columns-area columns-area--mobile'>
{children}
</div>
</div>
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
<div className='columns-area__panels__pane__inner'>
{layout.RIGHT}
</div>
</div>
</div>
</div>
</div>
)
}
}
.page {
display: flex;
flex-direction: column;
width: 100%;
&__top {
display: flex;
z-index: 105;
@include size(100%, auto);
@media (min-width:895px) {
top: -290px;
position: sticky;
}
}
&__columns {
display: flex;
flex-direction: column;
@include size(100%);
}
}
.columns-area {
flex: 1 1 auto;
position: relative;
@include flex(center, stretch, row);
&__panels {
@include size(100%);
@include flex(center);
&__pane {
height: 100%;
pointer-events: none;
padding-top: 15px;
@include flex(flex-end);
&--start {
justify-content: flex-start;
}
&__inner {
pointer-events: auto;
@include size(265px, 100%);
}
}
&__main {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
max-width: 600px;
padding: 0 20px;
@media screen and (max-width: 375px) {
padding: 0 10px;
}
@media screen and (min-width: 895px) {
margin: 0 20px;
padding: 0;
}
}
}
}
@media screen and (min-width: 631px) {
.columns-area {
padding: 0;
>div {
.column,
.drawer {
@include horizontal-padding(5px);
}
}
}
}
.columns-area--mobile {
flex-direction: column;
width: 100%;
@include margin-center;
.column,
.drawer {
padding: 0;
@include size(100%);
}
.search__input {
padding: 15px 30px 15px 15px;
@include text-sizing(16px, 400, 18px);
}
.search__icon .fa {
top: 15px;
}
@media screen and (min-width: 360px) {
padding: 15px 0;
}
@media screen and (min-width: 630px) {
.detailed-status {
padding: 15px;
.media-gallery,
.video-player {
margin-top: 15px;
}
}
.account__header__bar {
padding: 5px 10px;
}
.navigation-bar,
.compose-form {
padding: 15px;
}
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
padding-top: 15px;
}
.account {
padding: 15px 10px;
}
.notification {
&__message {
margin-left: 48px + 15px * 2;
padding-top: 15px;
}
&__favourite-icon-wrapper {
left: -32px;
}
.status {
padding-top: 8px;
}
.account {
padding-top: 8px;
}
.account__avatar-wrapper {
@include horizontal-margin(17px, 15px);
}
}
}
}
@media screen and (max-width: 895px) {
.columns-area__panels__pane--left {
display: none;
}
}
@media screen and (max-width: 1180px) {
.columns-area__panels__pane--right {
display: none;
}
}
.columns-area--mobile .column {
// @include gab-container-standards();
}
\ No newline at end of file
export { default } from './columns_area';
\ No newline at end of file
......@@ -6,10 +6,11 @@
&__html {
font-weight: 600;
padding-right: 4px;
font-size: 15px;
}
&__account {
font-size: 14px;
margin-left: 5px;
font-size: 15px;
}
}
\ No newline at end of file
const GroupIcon = ({
className = 'header-nav__item__icon',
width = '26px',
height = '26px',
viewBox = '0 0 48 48'
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
>
<g>
<path className='header-nav__item__icon__path' d="M 41 25 L 37 25 C 37 26 37 27 37 28 L 37 42 C 37 43 37 43 37 44 L 43 44 C 46 44 48 42 48 40 L 48 32 C 48 28 44 25 41 25 Z M 41 25"/>
<path className='header-nav__item__icon__path' d="M 10 28 C 10 27 10 26 10 25 L 6 25 C 3 25 0 28 0 32 L 0 40 C 0 42 1 44 4 44 L 10 44 C 10 43 10 43 10 42 Z M 10 28"/>
<path className='header-nav__item__icon__path' d="M 28 22 L 19 22 C 15 22 12 25 12 28 L 12 42 C 12 43 13 44 14 44 L 33 44 C 34 44 35 43 35 42 L 35 28 C 35 25 32 22 28 22 Z M 28 22"/>
<circle className='header-nav__item__icon__path' cx="8" cy="15" r="6"/>
<circle className='header-nav__item__icon__path' cx="24" cy="11" r="9"/>
<circle className='header-nav__item__icon__path' cx="40" cy="15" r="6"/>
</g>
</svg>
)
export default GroupIcon
\ No newline at end of file
const HomeIcon = ({
className = 'header-nav__item__icon',
width = '26px',
height = '26px',
viewBox = '0 0 48 48'
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
>
<g>
<path className='header-nav__item__icon__path' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
</g>
</svg>
)
export default HomeIcon
\ No newline at end of file
const NotificationsIcon = ({
className = 'header-nav__item__icon',
width = '26px',
height = '26px',
viewBox = '0 0 48 48'
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
>
<g>
<path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
<path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 24 4 C 25 4 27 4 29 5 L 29 5 C 29 2 27 0 24 0 L 23 0 C 20 0 18 2 18 5 L 18 5 C 20 4 22 4 24 4 Z M 24 4' />
<path className='header-nav__item__icon__path' d='M 41 40 L 6 40 C 5 40 5 40 5 39 C 4 39 5 38 5 38 C 5 38 6 37 8 35 C 9 30 10 25 10 21 C 10 13 16 7 24 7 C 31 7 37 13 37 20 C 37 20 37 20 37 21 C 37 25 38 30 39 35 C 41 37 42 38 42 38 C 42 38 43 39 42 39 C 42 40 42 40 41 40 Z M 42 38 Z M 42 38' />
</g>
</svg>
)
export default NotificationsIcon
\ No newline at end of file
......@@ -12,8 +12,14 @@ 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,
HomeIcon,
NotificationsIcon,
} from './assets/tabs_bar_icon';
import './sidebar_menu.scss';
console.log("header global - styles:", styles);
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
......@@ -46,14 +52,14 @@ const mapStateToProps = state => {
};
const mapDispatchToProps = (dispatch) => ({
onClose () {
onClose() {
dispatch(closeSidebar());
},
});
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class SidebarMenu extends ImmutablePureComponent {
class Header extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
......@@ -66,7 +72,7 @@ class SidebarMenu extends ImmutablePureComponent {
moreOpen: false,
}
componentDidUpdate () {
componentDidUpdate() {
if (!me) return;
if (this.props.sidebarOpen) {
......@@ -89,7 +95,7 @@ class SidebarMenu extends ImmutablePureComponent {
});
}
render () {
render() {
const { sidebarOpen, intl, account } = this.props;
const { moreOpen } = this.state;
......@@ -105,6 +111,83 @@ class SidebarMenu extends ImmutablePureComponent {
const moreIcon = moreOpen ? 'minus' : 'plus';
const moreContainerStyle = { display: moreOpen ? 'block' : 'none' };
const sidebarItems = [
{
name: 'Home',
icon: <NotificationsIcon />,
to: '/',
},
{
name: 'Notifications',
icon: <NotificationsIcon />,
to: '/',
},
{
name: 'Groups',
icon: <NotificationsIcon />,
to: '/',
},
{
name: 'Lists',
icon: <NotificationsIcon />,
to: '/',
},
{
name: 'Chat',
icon: <NotificationsIcon />,
to: '/',
},
{
name: 'Trends',
icon: <NotificationsIcon />,
to: '/',
},
{
name: 'Profile',
icon: <NotificationsIcon />,
to: '/',
},
];
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'>
<GabLogo />
</a>
</h1>
<nav className='header-nav'>
{
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>
</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>
</div>
</header>
)
return (
<div className={classes}>
<div className='sidebar-menu__wrapper' role='button' onClick={this.handleSidebarClose} />
......@@ -124,7 +207,7 @@ class SidebarMenu extends ImmutablePureComponent {
</Link>
</div>
<div className='sidebar-menu-profile__name'>
<DisplayName account={account}/>
<DisplayName account={account} />
</div>
<div className='sidebar-menu-profile__stats'>
......@@ -212,7 +295,7 @@ class SidebarMenu extends ImmutablePureComponent {
</div>
<div className='sidebar-menu__section'>
<a className='sidebar-menu-item' href='/auth/sign_out' data-method='delete'>
<a className='sidebar-menu-item' href='/auth/sign_out' data-method='delete'>
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span>
</a>
</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);