Progress
This commit is contained in:
mgabdev
parent
1c98dd283e
commit
389b189d64
@ -131,9 +131,11 @@ class Account extends ImmutablePureComponent {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button className={[styles.default, styles.marginLeftAuto, styles.paddingVertical2PX, styles.cursorPointer].join(' ')}>
|
||||
<Icon width='14px' height='14px' />
|
||||
</button>
|
||||
<div className={[styles.default, styles.marginLeftAuto].join(' ')}>
|
||||
<button className={[styles.default, styles.circle, styles.backgroundSubtle2, styles.paddingVertical5PX, styles.paddingHorizontal5PX, styles.cursorPointer].join(' ')}>
|
||||
<Icon id='close' width='8px' height='8px' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
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
|
||||
@ -1,11 +0,0 @@
|
||||
import GroupIcon from './group_icon';
|
||||
import HomeIcon from './home_icon';
|
||||
import NotificationsIcon from './notifications_icon';
|
||||
import SearchIcon from './search_icon';
|
||||
|
||||
export {
|
||||
GroupIcon,
|
||||
HomeIcon,
|
||||
NotificationsIcon,
|
||||
SearchIcon,
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
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
|
||||
@ -1,24 +0,0 @@
|
||||
const SearchIcon = ({
|
||||
className = 'tabs-bar-icon',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
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='tabs-bar-icon__path' d='M 47.414062 44.585938 L 33.761719 30.9375 C 36.40625 27.671875 38 23.519531 38 19 C 38 8.523438 29.476562 0 19 0 C 8.523438 0 0 8.523438 0 19 C 0 29.476562 8.523438 38 19 38 C 23.519531 38 27.667969 36.40625 30.9375 33.765625 L 44.585938 47.414062 C 44.976562 47.804688 45.488281 48 46 48 C 46.511719 48 47.023438 47.804688 47.414062 47.414062 C 48.195312 46.632812 48.195312 45.367188 47.414062 44.585938 Z M 19 34 C 10.726562 34 4 27.273438 4 19 C 4 10.726562 10.726562 4 19 4 C 27.273438 4 34 10.726562 34 19 C 34 27.273438 27.273438 34 19 34 Z M 19 34'/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default SearchIcon
|
||||
@ -203,7 +203,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
|
||||
<div className={[styles.default, styles.marginLeft5PX].join(' ')}>
|
||||
<Textarea
|
||||
inputRef={this.setTextbox}
|
||||
className={[styles.default, styles.backgroundWhite, styles.lineHeight125, styles.resizeNone, styles.paddingVertical15PX, styles.outlineNone, styles.fontSize16PX, styles.text, styles.displayBlock].join(' ')}
|
||||
className={[styles.default, styles.backgroundWhite, styles.lineHeight125, styles.resizeNone, styles.paddingVertical15PX, styles.outlineFocusBrand, styles.fontSize16PX, styles.text, styles.displayBlock].join(' ')}
|
||||
disabled={disabled}
|
||||
placeholder={placeholder}
|
||||
autoFocus={autoFocus}
|
||||
|
||||
@ -21,7 +21,7 @@ export default class DisplayName extends ImmutablePureComponent {
|
||||
</bdi>
|
||||
{
|
||||
account.get('is_verified') &&
|
||||
<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Verified Account' />
|
||||
<Icon id='verified' width='16px' height='16px' className={[styles.default]} title='Verified Account' />
|
||||
/*<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='PRO' />
|
||||
<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Donor' />
|
||||
<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Investor' />*/
|
||||
|
||||
@ -4,17 +4,12 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import classNames from 'classnames/bind'
|
||||
import Button from './button'
|
||||
import Icon from './icon'
|
||||
import { closeSidebar } from '../actions/sidebar'
|
||||
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 Icon from './icon'
|
||||
|
||||
const messages = defineMessages({
|
||||
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
||||
@ -110,32 +105,32 @@ class Header extends ImmutablePureComponent {
|
||||
const menuItems = [
|
||||
{
|
||||
title: 'Home',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='home' />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'Notifications',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='notifications' />,
|
||||
to: '/notifications',
|
||||
},
|
||||
{
|
||||
title: 'Groups',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='groups' />,
|
||||
to: '/groups',
|
||||
},
|
||||
{
|
||||
title: 'Lists',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='lists' />,
|
||||
to: '/lists',
|
||||
},
|
||||
{
|
||||
title: 'Chat',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='chat' />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'Profile',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='profile' />,
|
||||
to: '/',
|
||||
},
|
||||
]
|
||||
@ -143,12 +138,12 @@ class Header extends ImmutablePureComponent {
|
||||
const shortcutItems = [
|
||||
{
|
||||
title: 'Meme Group',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='group' />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'Andrew',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='user' />,
|
||||
to: '/',
|
||||
},
|
||||
]
|
||||
@ -156,22 +151,22 @@ class Header extends ImmutablePureComponent {
|
||||
const exploreItems = [
|
||||
{
|
||||
title: 'Trends',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='trends' />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'Dissenter',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='dissenter' />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'Apps',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='apps' />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'Shop',
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <Icon id='shop' />,
|
||||
to: '/',
|
||||
},
|
||||
]
|
||||
@ -186,9 +181,6 @@ class Header extends ImmutablePureComponent {
|
||||
<GabLogo />
|
||||
</NavLink>
|
||||
</h1>
|
||||
<div>
|
||||
{ /* profile card */}
|
||||
</div>
|
||||
<nav aria-label='Primary' role='navigation' className={[styles.default, styles.width100PC, styles.marginBottom15PX].join(' ')}>
|
||||
<span className={[styles.default, styles.text, styles.colorSubtle, styles.displayBlock, styles.fontSize13PX, styles.paddingVertical5PX, styles.marginTop10PX, styles.paddingHorizontal10PX, styles.fontWeight500].join(' ')}>Menu</span>
|
||||
{
|
||||
@ -283,7 +275,7 @@ class HeaderMenuItem extends PureComponent {
|
||||
>
|
||||
<div className={containerClasses}>
|
||||
<div className={[styles.default]}>
|
||||
<NotificationsIcon className={iconClasses} width='16px' height='16px' />
|
||||
<Icon className={iconClasses} width='16px' height='16px' />
|
||||
</div>
|
||||
<div className={[styles.default, styles.paddingHorizontal10PX, styles.textOverflowEllipsis, styles.overflowWrapBreakWord, styles.displayInline].join(' ')}>
|
||||
<span className={textClasses}>{title}</span>
|
||||
|
||||
@ -1,4 +1,15 @@
|
||||
import classNames from 'classnames';
|
||||
import CloseIcon from './svgs/close_icon'
|
||||
import CommentIcon from './svgs/comment_icon'
|
||||
import EllipsisIcon from './svgs/ellipsis_icon'
|
||||
import GlobeIcon from './svgs/globe_icon'
|
||||
import GroupIcon from './svgs/group_icon'
|
||||
import HomeIcon from './svgs/home_icon'
|
||||
import LikeIcon from './svgs/like_icon'
|
||||
import NotificationsIcon from './svgs/notifications_icon'
|
||||
import RepostIcon from './svgs/repost_icon'
|
||||
import SearchIcon from './svgs/search_icon'
|
||||
import ShareIcon from './svgs/share_icon'
|
||||
import VerifiedIcon from './svgs/verified_icon'
|
||||
|
||||
export default class Icon extends PureComponent {
|
||||
|
||||
@ -7,35 +18,42 @@ export default class Icon extends PureComponent {
|
||||
className: PropTypes.string,
|
||||
width: PropTypes.string,
|
||||
height: PropTypes.string,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
width: '26px',
|
||||
height: '26px',
|
||||
};
|
||||
|
||||
render () {
|
||||
const { className, width, height } = this.props;
|
||||
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
|
||||
<path 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 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>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { id, ...options } = this.props
|
||||
|
||||
console.log("id:", id)
|
||||
|
||||
switch (id) {
|
||||
case 'close':
|
||||
return <CloseIcon {...options} />
|
||||
case 'comment':
|
||||
return <CommentIcon {...options} />
|
||||
case 'ellipsis':
|
||||
return <EllipsisIcon {...options} />
|
||||
case 'globe':
|
||||
return <GlobeIcon {...options} />
|
||||
case 'group':
|
||||
return <GroupIcon {...options} />
|
||||
case 'home':
|
||||
return <HomeIcon {...options} />
|
||||
case 'like':
|
||||
return <LikeIcon {...options} />
|
||||
case 'notifications':
|
||||
return <NotificationsIcon {...options} />
|
||||
case 'repost':
|
||||
return <RepostIcon {...options} />
|
||||
case 'search':
|
||||
return <SearchIcon {...options} />
|
||||
case 'share':
|
||||
return <ShareIcon {...options} />
|
||||
case 'verified':
|
||||
return <VerifiedIcon {...options} />
|
||||
|
||||
default:
|
||||
return <NotificationsIcon {...options} />
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
26
app/javascript/gabsocial/components/icon/svgs/close_icon.js
Normal file
26
app/javascript/gabsocial/components/icon/svgs/close_icon.js
Normal file
@ -0,0 +1,26 @@
|
||||
const CloseIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 24 24',
|
||||
title = 'Close',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 14.121094 12 L 23.558594 2.5625 C 24.144531 1.976562 24.144531 1.027344 23.558594 0.441406 C 22.972656 -0.144531 22.027344 -0.144531 21.4375 0.441406 L 12 9.878906 L 2.5625 0.441406 C 1.972656 -0.144531 1.027344 -0.144531 0.441406 0.441406 C -0.144531 1.027344 -0.144531 1.976562 0.441406 2.5625 L 9.878906 12 L 0.441406 21.4375 C -0.144531 22.023438 -0.144531 22.972656 0.441406 23.558594 C 0.730469 23.855469 1.117188 24 1.5 24 C 1.882812 24 2.269531 23.855469 2.5625 23.558594 L 12 14.121094 L 21.4375 23.558594 C 21.730469 23.855469 22.117188 24 22.5 24 C 22.882812 24 23.269531 23.855469 23.558594 23.558594 C 24.144531 22.972656 24.144531 22.023438 23.558594 21.4375 Z M 14.121094 12 "/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default CloseIcon
|
||||
@ -0,0 +1,26 @@
|
||||
const CommentIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
title = 'Comment',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 34.511719 47 C 34.085938 47 33.664062 46.863281 33.324219 46.582031 L 20.855469 36.339844 L 4.492188 36.339844 C 2.027344 36.339844 0 34.273438 0 31.75 L 0 4.539062 C 0 2.03125 2.027344 0.0273438 4.492188 0.0273438 L 43.492188 0.0273438 C 45.984375 0.0273438 48 2.03125 48 4.539062 L 48 31.75 C 48 34.273438 45.984375 36.339844 43.492188 36.339844 L 36.367188 36.339844 L 36.367188 45.125 C 36.367188 45.851562 35.960938 46.511719 35.304688 46.820312 C 35.050781 46.941406 34.785156 47 34.511719 47 Z M 4.492188 3.769531 C 4.097656 3.769531 3.773438 4.097656 3.773438 4.539062 L 3.773438 31.75 C 3.773438 32.199219 4.101562 32.597656 4.492188 32.597656 L 21.523438 32.597656 C 21.960938 32.597656 22.375 32.738281 22.707031 33.015625 L 32.625 41.160156 L 32.625 34.449219 C 32.625 33.417969 33.476562 32.597656 34.511719 32.597656 L 43.492188 32.597656 C 43.894531 32.597656 44.253906 32.183594 44.253906 31.75 L 44.253906 4.539062 C 44.253906 4.109375 43.902344 3.769531 43.492188 3.769531 Z M 4.492188 3.769531" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default CommentIcon
|
||||
@ -0,0 +1,28 @@
|
||||
const EllipsisIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 24 24',
|
||||
title = 'Ellipsis',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<circle cx='5' cy='12' r='2' />
|
||||
<circle cx='12' cy='12' r='2' />
|
||||
<circle cx='19' cy='12' r='2' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default EllipsisIcon
|
||||
28
app/javascript/gabsocial/components/icon/svgs/globe_icon.js
Normal file
28
app/javascript/gabsocial/components/icon/svgs/globe_icon.js
Normal file
@ -0,0 +1,28 @@
|
||||
const GlobeIcon = ({
|
||||
className = '',
|
||||
width = '12px',
|
||||
height = '12px',
|
||||
viewBox = '0 0 28 28',
|
||||
title = 'Globe',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<circle fill='none' stroke='#616770' stroke-width='1px' cx='14' cy='14' r='13.5' />
|
||||
<path fill='#616770' d='M 16 5 L 18 4 L 20 5 L 22 5 L 23 4 C 24 5 25 6 25 7 L 25 7 L 22 8 L 20 7 L 19 6 L 16 6 L 14 7 L 15 11 L 18 12 L 20 12 L 21 13 L 21 14 L 22 16 L 23 18 L 23 20 L 26.4 21 C 20 27 12 29 6 25 C 1 21 0 14 1 8 L 2 11 L 3 12 L 5 13 L 4 14 L 4 15 L 5 17 L 7 17 L 7 22 L 8 24 L 9 25 L 9 22 L 11 21 L 11 20 L 13 18 L 14 15 L 12 15 L 10 13 L 7 13 L 6 11 L 5 13 L 5 11 L 4 10 L 4 8 L 7 8 L 9 7 L 11 4 L 12 4 L 13 2 L 10 2 L 10 1 C 12 0 16 0 18 1 L 18 2 L 16 2 L 15 4 Z M 16 5' />
|
||||
{/*<path fill='#616770' d='M 14 27 C 21 28 28 21 28 14 C 28 6 21 0 14 0 C 8 0 3 3 1 8 L 0 8 L 1 8 C -1 15 1 24 8 26 C 10 27 12 28 14 27 Z M 24 21 L 24 20 L 24 18 C 24 18 24 18 24 18 L 22 14 L 22 13 C 22 12 22 12 22 12 L 20 11 C 20 11 20 11 20 11 L 18 12 L 15 10 L 15 8 L 16 7 L 18 7 L 19 8 C 19 8 19 8 19 8 L 22 8 C 22 8 22 8 23 8 L 25 7 C 27 12 27 17 24 21 Z M 23 4 L 22 5 L 20 4 L 18 4 C 18 4 18 4 18 4 L 16 4 L 16 4 L 16 3 L 18 3 C 18 3 18 3 18 3 L 20 2 C 21 2 22 3 23 4 Z M 8 1 L 10 2 C 10 2 10 2 10 2 L 12 3 L 12 3 L 11 4 C 10 4 10 4 10 4 L 9 6 L 7 7 L 4 8 C 3 8 3 8 3 8 L 3 10 C 3 10 3 10 3 10 L 4 11 L 4 12 L 2 10 L 2 8 C 3 5 5 3 8 1 Z M 7 17 L 5 16 L 4 15 L 4 14 L 6 12 L 7 13 C 7 13 7 14 7 14 L 10 14 L 11 16 C 11 16 11 16 12 16 L 13 16 L 13 17 L 11 19 C 11 19 11 19 11 20 L 11 21 L 9 22 C 9 22 9 22 9 22 L 9 24 L 8 24 L 7 22 L 7 17 C 7 17 7 17 7 17 Z M 1 10 L 1 11 C 1 11 1 11 2 11 L 4 13 L 3 13 C 3 13 3 13 3 14 L 3 15 C 3 15 3 15 3 15 L 4 17 C 4 17 4 17 5 17 L 7 18 L 7 22 C 7 22 7 22 7 22 L 7 24 C 8 25 8 25 8 25 L 9 25 C 9 25 9 25 9 25 C 10 25 10 25 10 25 L 10 23 L 11 21 C 12 21 12 21 12 21 L 12 20 L 13 18 C 13 18 13 18 13 18 L 14 15 C 14 15 14 15 14 15 C 14 15 14 15 14 15 L 12 15 L 11 13 C 11 13 10 13 10 13 L 7 13 L 6 11 C 6 11 6 11 6 11 C 6 11 6 11 6 11 L 5 11 L 5 11 C 5 11 5 10 5 10 L 4 10 L 4 9 L 7 8 C 7 8 7 8 7 8 L 10 7 C 10 7 10 7 10 7 L 11 5 L 12 4 C 12 4 12 4 13 4 L 13 2 C 13 2 13 2 13 2 C 13 2 13 2 13 2 L 10 1 L 9 1 C 12 0 16 0 18 1 L 18 2 L 16 2 C 16 2 15 2 15 2 L 14 4 C 14 4 14 4 15 5 C 15 5 15 5 15 5 L 16 5 C 16 5 16 5 16 5 L 18 5 L 19 5 C 19 5 19 5 19 5 L 22 6 C 22 6 22 6 22 5 L 23 5 C 24 5 24 6 25 7 L 22 7 L 20 7 L 19 6 C 19 6 19 6 19 6 L 16 6 C 16 6 16 6 16 6 L 14 7 C 14 7 14 7 14 8 L 14 11 C 14 11 15 11 15 11 L 18 13 C 18 13 18 13 18 13 L 20 12 L 21 13 L 21 14 C 21 15 21 15 21 15 L 23 18 L 23 20 C 23 20 23 20 23 20 L 24 21 C 20 27 11 28 6 24 C 1 21 0 15 1 10 Z M 1 10' /> */}
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default GlobeIcon
|
||||
@ -2,7 +2,8 @@ const GroupIcon = ({
|
||||
className = 'header-nav__item__icon',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48'
|
||||
viewBox = '0 0 48 48',
|
||||
title = 'Group',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
@ -14,6 +15,7 @@ const GroupIcon = ({
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<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"/>
|
||||
26
app/javascript/gabsocial/components/icon/svgs/home_icon.js
Normal file
26
app/javascript/gabsocial/components/icon/svgs/home_icon.js
Normal file
@ -0,0 +1,26 @@
|
||||
const HomeIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
title = 'Home',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path className='' 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
|
||||
26
app/javascript/gabsocial/components/icon/svgs/like_icon.js
Normal file
26
app/javascript/gabsocial/components/icon/svgs/like_icon.js
Normal file
@ -0,0 +1,26 @@
|
||||
const LikeIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
title = 'Like',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d='M 44.75 26.832031 C 45.691406 25.410156 46.164062 23.839844 46.164062 22.128906 C 46.164062 20.148438 45.433594 18.425781 43.972656 16.964844 C 42.507812 15.503906 40.777344 14.773438 38.777344 14.773438 L 33.699219 14.773438 C 34.621094 12.867188 35.085938 11.019531 35.085938 9.234375 C 35.085938 6.980469 34.746094 5.195312 34.074219 3.867188 C 33.402344 2.539062 32.421875 1.5625 31.132812 0.9375 C 29.84375 0.3125 28.390625 0 26.773438 0 C 25.792969 0 24.929688 0.355469 24.179688 1.066406 C 23.351562 1.875 22.753906 2.914062 22.390625 4.183594 C 22.023438 5.453125 21.730469 6.667969 21.507812 7.832031 C 21.289062 8.996094 20.945312 9.820312 20.484375 10.300781 C 19.542969 11.320312 18.515625 12.550781 17.398438 13.992188 C 15.457031 16.511719 14.136719 18.003906 13.445312 18.464844 L 5.539062 18.464844 C 4.519531 18.464844 3.652344 18.828125 2.929688 19.546875 C 2.207031 20.269531 1.847656 21.140625 1.847656 22.160156 L 1.847656 40.625 C 1.847656 41.644531 2.207031 42.511719 2.929688 43.234375 C 3.652344 43.957031 4.519531 44.316406 5.539062 44.316406 L 13.847656 44.316406 C 14.273438 44.316406 15.597656 44.703125 17.832031 45.46875 C 20.195312 46.296875 22.277344 46.925781 24.078125 47.359375 C 25.875 47.792969 27.699219 48.011719 29.542969 48.011719 L 33.265625 48.011719 C 35.976562 48.011719 38.160156 47.234375 39.816406 45.6875 C 41.46875 44.136719 42.285156 42.027344 42.269531 39.355469 C 43.421875 37.871094 44 36.160156 44 34.21875 C 44 33.796875 43.96875 33.382812 43.914062 32.976562 C 44.644531 31.691406 45.007812 30.304688 45.007812 28.824219 C 45.007812 28.132812 44.921875 27.46875 44.75 26.832031 Z M 8.683594 40.074219 C 8.320312 40.441406 7.886719 40.625 7.386719 40.625 C 6.886719 40.625 6.453125 40.441406 6.089844 40.074219 C 5.722656 39.710938 5.539062 39.277344 5.539062 38.777344 C 5.539062 38.277344 5.722656 37.84375 6.089844 37.480469 C 6.453125 37.113281 6.886719 36.929688 7.386719 36.929688 C 7.886719 36.929688 8.320312 37.113281 8.683594 37.480469 C 9.050781 37.84375 9.234375 38.277344 9.234375 38.777344 C 9.234375 39.277344 9.050781 39.710938 8.683594 40.074219 Z M 41.851562 24.496094 C 41.4375 25.382812 40.921875 25.832031 40.308594 25.851562 C 40.59375 26.179688 40.835938 26.636719 41.027344 27.222656 C 41.21875 27.808594 41.316406 28.34375 41.316406 28.824219 C 41.316406 30.152344 40.808594 31.296875 39.789062 32.257812 C 40.132812 32.871094 40.308594 33.535156 40.308594 34.246094 C 40.308594 34.960938 40.140625 35.667969 39.800781 36.367188 C 39.464844 37.070312 39.007812 37.574219 38.433594 37.882812 C 38.527344 38.460938 38.574219 38.996094 38.574219 39.496094 C 38.574219 42.710938 36.730469 44.316406 33.035156 44.316406 L 29.546875 44.316406 C 27.027344 44.316406 23.738281 43.613281 19.679688 42.210938 C 19.582031 42.171875 19.304688 42.070312 18.839844 41.90625 C 18.378906 41.742188 18.039062 41.625 17.816406 41.546875 C 17.59375 41.46875 17.257812 41.359375 16.808594 41.214844 C 16.355469 41.070312 15.988281 40.964844 15.710938 40.898438 C 15.433594 40.828125 15.113281 40.765625 14.757812 40.710938 C 14.402344 40.652344 14.101562 40.625 13.851562 40.625 L 12.925781 40.625 L 12.925781 22.160156 L 13.851562 22.160156 C 14.15625 22.160156 14.5 22.074219 14.875 21.898438 C 15.25 21.726562 15.632812 21.46875 16.027344 21.121094 C 16.421875 20.773438 16.792969 20.433594 17.140625 20.097656 C 17.484375 19.757812 17.871094 19.335938 18.292969 18.828125 C 18.714844 18.316406 19.046875 17.910156 19.289062 17.601562 C 19.527344 17.292969 19.832031 16.898438 20.199219 16.417969 C 20.5625 15.9375 20.785156 15.648438 20.859375 15.550781 C 21.917969 14.246094 22.660156 13.371094 23.082031 12.925781 C 23.871094 12.101562 24.441406 11.046875 24.800781 9.769531 C 25.15625 8.488281 25.449219 7.28125 25.679688 6.148438 C 25.910156 5.011719 26.273438 4.195312 26.777344 3.695312 C 28.621094 3.695312 29.851562 4.144531 30.46875 5.050781 C 31.082031 5.953125 31.390625 7.347656 31.390625 9.234375 C 31.390625 10.367188 30.929688 11.910156 30.007812 13.863281 C 29.082031 15.816406 28.621094 17.351562 28.621094 18.464844 L 38.777344 18.464844 C 39.738281 18.464844 40.59375 18.835938 41.34375 19.578125 C 42.09375 20.316406 42.472656 21.179688 42.472656 22.160156 C 42.472656 22.832031 42.265625 23.609375 41.851562 24.496094 Z M 41.851562 24.496094' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default LikeIcon
|
||||
@ -0,0 +1,28 @@
|
||||
const NotificationsIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
title = 'Notifications',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path className='' d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
|
||||
<path className='' 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='' 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
|
||||
26
app/javascript/gabsocial/components/icon/svgs/repost_icon.js
Normal file
26
app/javascript/gabsocial/components/icon/svgs/repost_icon.js
Normal file
@ -0,0 +1,26 @@
|
||||
const CloseIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48',
|
||||
title = 'Close',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 43.820312 8.179688 C 43.105469 7.859375 42.269531 7.984375 41.679688 8.5 L 38.960938 10.921875 C 35.230469 6.527344 29.761719 4 24 4 C 13.824219 3.992188 5.265625 11.621094 4.109375 21.730469 C 2.957031 31.835938 9.574219 41.203125 19.488281 43.488281 C 29.402344 45.773438 39.453125 40.253906 42.839844 30.660156 C 43.203125 29.617188 42.652344 28.472656 41.609375 28.109375 C 40.566406 27.746094 39.425781 28.296875 39.058594 29.339844 C 36.34375 37.011719 28.300781 41.421875 20.371094 39.589844 C 12.441406 37.753906 7.152344 30.257812 8.082031 22.175781 C 9.011719 14.089844 15.859375 7.988281 24 8 C 28.621094 8 33.011719 10.03125 36 13.558594 L 32.679688 16.5 C 32.054688 17.054688 31.839844 17.941406 32.140625 18.71875 C 32.4375 19.488281 33.175781 19.996094 34 20 L 43 20 C 44.105469 20 45 19.105469 45 18 L 45 10 C 45 9.214844 44.535156 8.503906 43.820312 8.179688 Z M 43.820312 8.179688 "/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default CloseIcon
|
||||
26
app/javascript/gabsocial/components/icon/svgs/search_icon.js
Normal file
26
app/javascript/gabsocial/components/icon/svgs/search_icon.js
Normal file
@ -0,0 +1,26 @@
|
||||
const SearchIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48',
|
||||
title = 'Search',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path className='' d='M 47.414062 44.585938 L 33.761719 30.9375 C 36.40625 27.671875 38 23.519531 38 19 C 38 8.523438 29.476562 0 19 0 C 8.523438 0 0 8.523438 0 19 C 0 29.476562 8.523438 38 19 38 C 23.519531 38 27.667969 36.40625 30.9375 33.765625 L 44.585938 47.414062 C 44.976562 47.804688 45.488281 48 46 48 C 46.511719 48 47.023438 47.804688 47.414062 47.414062 C 48.195312 46.632812 48.195312 45.367188 47.414062 44.585938 Z M 19 34 C 10.726562 34 4 27.273438 4 19 C 4 10.726562 10.726562 4 19 4 C 27.273438 4 34 10.726562 34 19 C 34 27.273438 27.273438 34 19 34 Z M 19 34'/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default SearchIcon
|
||||
30
app/javascript/gabsocial/components/icon/svgs/share_icon.js
Normal file
30
app/javascript/gabsocial/components/icon/svgs/share_icon.js
Normal file
@ -0,0 +1,30 @@
|
||||
const ShareIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 24 24',
|
||||
title = 'Share',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<circle cx="18" cy="5" r="3"/>
|
||||
<circle cx="6" cy="12" r="3"/>
|
||||
<circle cx="18" cy="19" r="3"/>
|
||||
<line stroke='#666' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49" />
|
||||
<line stroke='#666' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default ShareIcon
|
||||
@ -0,0 +1,26 @@
|
||||
const VerifiedIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 24 24',
|
||||
title = 'Verified Account',
|
||||
}) => (
|
||||
<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'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path fill='#3E99ED' d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default VerifiedIcon
|
||||
@ -9,13 +9,24 @@ export default class PageLayout extends PureComponent {
|
||||
const { children, layout } = this.props
|
||||
|
||||
const right = layout.RIGHT || null
|
||||
const headerRight = layout.HEADER_RIGHT || null
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.flexRow, styles.width100PC, styles.backgroundColorSubtle3].join(' ')}>
|
||||
<Header />
|
||||
<main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.flexRow].join(' ')}>
|
||||
<div className={[styles.default, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween].join(' ')}>
|
||||
<div className={[styles.default, styles.width670PX, styles.z1].join(' ')}>
|
||||
<main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.borderColorSubtle2, styles.borderLeft1PX].join(' ')}>
|
||||
<div className={[styles.default, styles.height53PX, styles.borderBottom1PX, styles.borderColorSubtle2, styles.backgroundColorSubtle3].join(' ')}>
|
||||
<div className={[styles.default, styles.height53PX, styles.paddingLeft15PX, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween].join(' ')}>
|
||||
<div className={[styles.default, styles.width660PX].join(' ')}>
|
||||
test
|
||||
</div>
|
||||
<div className={[styles.default, styles.width325PX].join(' ')}>
|
||||
{ headerRight }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={[styles.default, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween, styles.paddingLeft15PX, styles.paddingVertical15PX].join(' ')}>
|
||||
<div className={[styles.default, styles.width660PX, styles.z1].join(' ')}>
|
||||
<div className={styles.default}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@ -145,7 +145,7 @@ class GroupPanelItem extends ImmutablePureComponent {
|
||||
{intl.formatMessage(messages.no_recent_activity)}
|
||||
</Fragment>
|
||||
}
|
||||
<Icon className={styles.marginLeftAuto} width='10px' height='10px' />
|
||||
<span className={[styles.marginLeftAuto, styles.inherit].join(' ')}>→</span>
|
||||
</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
|
||||
@ -44,11 +44,11 @@ export default class Search extends PureComponent {
|
||||
const iconClass = hasValue ? 'active' : '';
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.backgroundColorSubtle3, styles.positionSticky, styles.justifyContentCenter, styles.top0, styles.z2, styles.height53PX, styles.marginBottom10PX].join(' ')}>
|
||||
<div className={[styles.default, styles.backgroundSubtle2, styles.flexRow, styles.circle, styles.alignItemsCenter].join(' ')}>
|
||||
<Icon id='search' width='18px' height='18px' className={[styles.default, styles.marginLeft15PX, styles.marginRight10PX].join(' ')} />
|
||||
<div className={[styles.default, styles.justifyContentCenter, styles.height53PX].join(' ')}>
|
||||
<div className={[styles.default, styles.backgroundWhite, styles.border1PX, styles.borderColorSubtle, styles.flexRow, styles.circle, styles.alignItemsCenter].join(' ')}>
|
||||
<Icon id='search' width='16px' height='16px' className={[styles.default, styles.marginLeft15PX, styles.marginRight10PX].join(' ')} />
|
||||
<input
|
||||
className={[styles.default, styles.text, styles.lineHeight125, styles.displayBlock, styles.paddingVertical10PX, styles.paddingHorizontal10PX, styles.backgroundTransparent, styles.fontSize15PX, styles.flexGrow1].join(' ')}
|
||||
className={[styles.default, styles.text, styles.outlineFocusBrand, styles.lineHeight125, styles.displayBlock, styles.paddingVertical10PX, styles.paddingHorizontal10PX, styles.backgroundTransparent, styles.fontSize15PX, styles.flexGrow1].join(' ')}
|
||||
type='text'
|
||||
placeholder='Search on Gab...'
|
||||
value={value}
|
||||
@ -57,8 +57,8 @@ export default class Search extends PureComponent {
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
/>
|
||||
<div role='button' tabIndex='0' className={[styles.default, styles.paddingHorizontal10PX].join(' ')} onClick={handleClear}>
|
||||
<Icon id='times-circle' width='18px' height='18px' className={iconClass} aria-label={placeholder} />
|
||||
<div role='button' tabIndex='0' className={[styles.default, styles.cursorPointer, styles.marginRight5PX, styles.paddingHorizontal10PX, styles.paddingVertical10PX, styles.circle, styles.backgroundColorBrandLight].join(' ')} onClick={handleClear}>
|
||||
<Icon id='close' width='10px' height='10px' className={styles.fillColorWhite} aria-label={placeholder} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -424,6 +424,8 @@ class Status extends ImmutablePureComponent {
|
||||
|
||||
const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
|
||||
|
||||
console.log("const replies = state.getIn(['contexts', 'replies', id]);", state.getIn(['contexts', 'replies', id]))
|
||||
|
||||
return (
|
||||
<HotKeys handlers={handlers}>
|
||||
<div
|
||||
@ -457,7 +459,7 @@ class Status extends ImmutablePureComponent {
|
||||
>
|
||||
<DisplayName account={status.get('account')} />
|
||||
</NavLink>
|
||||
<Icon id='ellipsis-h' width='14px' height='15px' className={[styles.default, styles.marginLeftAuto].join(' ')} />
|
||||
<Icon id='ellipsis' width='20px' height='20px' className={[styles.default, styles.fillColorSubtle, styles.marginLeftAuto].join(' ')} />
|
||||
</div>
|
||||
<div className={[styles.default, styles.flexRow, styles.alignItemsCenter, styles.lineHeight15].join(' ')}>
|
||||
<NavLink
|
||||
@ -466,13 +468,13 @@ class Status extends ImmutablePureComponent {
|
||||
>
|
||||
<RelativeTimestamp timestamp={status.get('created_at')} />
|
||||
</NavLink>
|
||||
<span className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
|
||||
<span className={[styles.default, styles.text, styles.fontSize12PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
|
||||
<Icon id='globe' width='12px' height='12px' className={[styles.default, styles.displayInline, styles.marginLeft5PX, styles.fillColorSubtle].join(' ')}/>
|
||||
|
||||
{
|
||||
status.get('group') &&
|
||||
<Fragment>
|
||||
<span className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
|
||||
<span className={[styles.default, styles.text, styles.fontSize12PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
|
||||
<NavLink
|
||||
to={`/groups/${status.getIn(['group', 'id'])}`}
|
||||
className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorBlack].join(' ')}
|
||||
@ -485,7 +487,7 @@ class Status extends ImmutablePureComponent {
|
||||
{
|
||||
status.get('revised_at') !== null &&
|
||||
<Fragment>
|
||||
<span className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
|
||||
<span className={[styles.default, styles.text, styles.fontSize12PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
|
||||
<button
|
||||
onClick={() => other.onShowRevisions(status)}
|
||||
className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}
|
||||
@ -500,7 +502,7 @@ class Status extends ImmutablePureComponent {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={[styles.default, styles.paddingHorizontal15PX].join(' ')}>
|
||||
<div className={[styles.default, styles.paddingHorizontal15PX, styles.marginBottom15PX].join(' ')}>
|
||||
<StatusContent
|
||||
status={status}
|
||||
reblogContent={reblogContent}
|
||||
|
||||
@ -17,7 +17,9 @@ const messages = defineMessages({
|
||||
mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
|
||||
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
|
||||
reply: { id: 'status.reply', defaultMessage: 'Reply' },
|
||||
comment: { id: 'status.comment', defaultMessage: 'Comment' },
|
||||
more: { id: 'status.more', defaultMessage: 'More' },
|
||||
share: { id: 'status.share', defaultMessage: 'Share' },
|
||||
replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
|
||||
reblog: { id: 'status.reblog', defaultMessage: 'Repost' },
|
||||
quote: { id: 'status.quote', defaultMessage: 'Quote' },
|
||||
@ -25,7 +27,7 @@ const messages = defineMessages({
|
||||
cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
|
||||
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' },
|
||||
cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
|
||||
favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
|
||||
like: { id: 'status.like', defaultMessage: 'Like' },
|
||||
open: { id: 'status.open', defaultMessage: 'Expand this status' },
|
||||
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
|
||||
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
|
||||
@ -76,7 +78,8 @@ class StatusActionBarItem extends PureComponent {
|
||||
const btnClasses = cx({
|
||||
default: 1,
|
||||
text: 1,
|
||||
fontSize15PX: 1,
|
||||
fontSize13PX: 1,
|
||||
fontWeight500: 1,
|
||||
cursorPointer: 1,
|
||||
displayFlex: 1,
|
||||
justifyContentCenter: 1,
|
||||
@ -86,17 +89,12 @@ class StatusActionBarItem extends PureComponent {
|
||||
paddingHorizontal10PX: 1,
|
||||
width100PC: 1,
|
||||
radiusSmall: 1,
|
||||
outlineFocusBrand: 1,
|
||||
backgroundTransparent: !hovering,
|
||||
backgroundSubtle2: hovering,
|
||||
colorBlack: !hovering,
|
||||
colorBrand: hovering,
|
||||
})
|
||||
|
||||
const iconClasses = cx({
|
||||
default: 1,
|
||||
marginRight10PX: 1,
|
||||
fillColorSubtle: !hovering,
|
||||
fillColorBrand: hovering,
|
||||
backgroundSubtle: hovering,
|
||||
colorSubtle: 1,
|
||||
// colorSubtle: !hovering,
|
||||
// colorBrand: hovering,
|
||||
})
|
||||
|
||||
return (
|
||||
@ -109,7 +107,7 @@ class StatusActionBarItem extends PureComponent {
|
||||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
>
|
||||
<Icon width='16px' height='16px' icon={icon} className={iconClasses} />
|
||||
<Icon width='16px' height='16px' id={icon} className={[styles.default, styles.marginRight10PX, styles.fillColorSubtle].join(' ')} />
|
||||
{title}
|
||||
</button>
|
||||
</div>
|
||||
@ -334,24 +332,30 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: formatMessage(messages.favourite),
|
||||
icon: 'star',
|
||||
title: formatMessage(messages.like),
|
||||
icon: 'like',
|
||||
active: status.get('favourited'),
|
||||
onClick: this.handleFavouriteClick,
|
||||
},
|
||||
{
|
||||
title: replyTitle,
|
||||
icon: 'reply',
|
||||
title: formatMessage(messages.comment),
|
||||
icon: 'comment',
|
||||
active: 0,
|
||||
onClick: this.handleReplyClick,
|
||||
},
|
||||
{
|
||||
title: reblogTitle,
|
||||
icon: (status.get('visibility') === 'private') ? 'lock' : 'retweet',
|
||||
icon: (status.get('visibility') === 'private') ? 'lock' : 'repost',
|
||||
disabled: !publicStatus,
|
||||
active: status.get('reblogged'),
|
||||
onClick: this.handleReblogClick,
|
||||
}
|
||||
},
|
||||
{
|
||||
title: formatMessage(messages.share),
|
||||
icon: 'share',
|
||||
active: false,
|
||||
onClick: this.handleFavouriteClick,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
@ -359,7 +363,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||
<div className={[styles.default, styles.paddingVertical2PX, styles.flexRow, styles.borderTop1PX, styles.borderColorSubtle].join(' ')}>
|
||||
{
|
||||
items.map((item, i) => (
|
||||
<StatusActionBarItem {...item} />
|
||||
<StatusActionBarItem key={`status-action-bar-item-${i}`} {...item} />
|
||||
))
|
||||
}
|
||||
|
||||
|
||||
@ -26,12 +26,19 @@ class TimelineComposeBlock extends ImmutablePureComponent {
|
||||
const { account, size, ...rest } = this.props;
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.flexRow, styles.radiusSmall, styles.border1PX, styles.borderColorSubtle, styles.backgroundWhite, styles.marginBottom15PX, styles.paddingVertical10PX, styles.paddingHorizontal15PX].join(' ')}>
|
||||
<div className={[styles.default, styles.marginRight10PX].join(' ')}>
|
||||
<Avatar account={account} size={46} />
|
||||
<section className={[styles.default, styles.radiusSmall, styles.border1PX, styles.borderColorSubtle, styles.backgroundWhite, styles.marginBottom15PX].join(' ')}>
|
||||
<div className={[styles.default, styles.backgroundSubtle, styles.borderBottom1PX, styles.borderColorSubtle, styles.paddingHorizontal15PX, styles.paddingVertical2PX].join(' ')}>
|
||||
<h1 className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize12PX, styles.fontWeight500, styles.lineHeight2, styles.paddingVertical2PX].join(' ')}>
|
||||
Create Post
|
||||
</h1>
|
||||
</div>
|
||||
<ComposeFormContainer {...rest} />
|
||||
</div>
|
||||
<div className={[styles.default, styles.flexRow, styles.paddingVertical15PX, styles.paddingHorizontal15PX].join(' ')}>
|
||||
<div className={[styles.default, styles.marginRight10PX].join(' ')}>
|
||||
<Avatar account={account} size={46} />
|
||||
</div>
|
||||
<ComposeFormContainer {...rest} />
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import DatePicker from 'react-datepicker'
|
||||
import IconButton from '../../../components/icon_button'
|
||||
import { changeScheduledAt } from '../../../actions/compose'
|
||||
import { openModal } from '../../../actions/modal'
|
||||
import { me } from '../../../initial_state'
|
||||
import { isMobile } from '../../../utils/is_mobile'
|
||||
import ComposeExtraButton from './compose_extra_button'
|
||||
|
||||
import 'react-datepicker/dist/react-datepicker.css'
|
||||
// import 'react-datepicker/dist/react-datepicker.css'
|
||||
|
||||
const messages = defineMessages({
|
||||
schedule_status: { id: 'schedule_status.title', defaultMessage: 'Schedule' },
|
||||
|
||||
@ -17,9 +17,10 @@ export default class HomePage extends PureComponent {
|
||||
return (
|
||||
<PageLayout
|
||||
layout={{
|
||||
HEADER: <span>hello</span>,
|
||||
HEADER_RIGHT: <Search />,
|
||||
RIGHT: (
|
||||
<Fragment>
|
||||
<Search />
|
||||
<UserPanel />
|
||||
<WhoToFollowPanel />
|
||||
<TrendsPanel />
|
||||
@ -32,6 +33,7 @@ export default class HomePage extends PureComponent {
|
||||
}}
|
||||
>
|
||||
<TimelineComposeBlock autoFocus={false} shouldCondense />
|
||||
<div className={[styles.default, styles.borderBottom1PX, styles.borderColorSubtle2, styles.marginBottom15PX, styles.width100PC].join(' ')} />
|
||||
{children}
|
||||
</PageLayout>
|
||||
)
|
||||
|
||||
@ -89,12 +89,13 @@ body {
|
||||
|
||||
.whiteSpaceNoWrap { white-space: nowrap; }
|
||||
|
||||
.outlineNone { outline: none; }
|
||||
.outlineFocusBrand:focus {outline: 2px solid #21cf7a; }
|
||||
.resizeNone { resize: none; }
|
||||
|
||||
.circle { border-radius: 9999px; }
|
||||
.radiusSmall { border-radius: 4px; }
|
||||
|
||||
.borderColorSubtle2 { border-color: #e5e9ed; }
|
||||
.borderColorSubtle { border-color: #ECECED; }
|
||||
.borderColorWhite { border-color: #fff; }
|
||||
.borderColorBrand { border-color: #21cf7a; }
|
||||
@ -133,6 +134,7 @@ body {
|
||||
.colorSubtle { color: #666; }
|
||||
.colorBrand { color: #21cf7a }
|
||||
.fillColorBlack { fill: #000; }
|
||||
.fillColorWhite { fill: #fff; }
|
||||
.fillColorBrand { fill: #21cf7a; }
|
||||
.fillColorSubtle { fill: #666; }
|
||||
|
||||
@ -161,7 +163,7 @@ body {
|
||||
.height122PX { height: 122px; }
|
||||
|
||||
.width1015PX { width: 1015px; }
|
||||
.width670PX { width: 670px; }
|
||||
.width660PX { width: 660px; }
|
||||
.width325PX { width: 325px; }
|
||||
.width250PX { width: 250px; }
|
||||
.width100PC { width: 100%; }
|
||||
@ -201,6 +203,7 @@ body {
|
||||
|
||||
.marginLeft5PX { margin-left: 5px; }
|
||||
.marginRight2PX { margin-right: 2px; }
|
||||
.marginRight5PX { margin-right: 5px; }
|
||||
|
||||
.marginVertical10PX {
|
||||
margin-top: 10px;
|
||||
@ -221,6 +224,8 @@ body {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.paddingLeft15PX { padding-left: 15px; }
|
||||
.paddingRight15PX { padding-right: 15px; }
|
||||
|
||||
.paddingVertical5PX {
|
||||
@ -243,6 +248,11 @@ body {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.paddingHorizontal5PX {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.paddingHorizontal10PX {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
%title= content_for?(:page_title) ? safe_join([yield(:page_title).chomp.html_safe, title], ' - ') : title
|
||||
|
||||
= stylesheet_pack_tag 'common', media: 'all'
|
||||
= stylesheet_pack_tag 'application', media: 'all'
|
||||
-# = stylesheet_pack_tag 'application', media: 'all'
|
||||
-# = stylesheet_pack_tag current_theme, media: 'all'
|
||||
= javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
|
||||
= javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user