Progress
This commit is contained in:
mgabdev
parent
fed036be08
commit
e2e7e8c0af
|
|
@ -162,15 +162,14 @@ export function handleComposeSubmit(dispatch, getState, response, status) {
|
|||
}
|
||||
};
|
||||
|
||||
if (response.data.visibility !== 'direct') {
|
||||
if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
|
||||
insertIfOnline('home');
|
||||
} else if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
|
||||
insertIfOnline('community');
|
||||
insertIfOnline('public');
|
||||
}
|
||||
}
|
||||
|
||||
export function submitCompose(routerHistory, group) {
|
||||
export function submitCompose(group, replyToId=null) {
|
||||
return function (dispatch, getState) {
|
||||
if (!me) return;
|
||||
|
||||
|
|
@ -189,6 +188,8 @@ export function submitCompose(routerHistory, group) {
|
|||
// return hasProtocol ? match : `http://${match}`
|
||||
// })
|
||||
|
||||
const inReplyToId = getState().getIn(['compose', 'in_reply_to'], null) || replyToId
|
||||
|
||||
console.log("markdown:", markdown)
|
||||
|
||||
dispatch(submitComposeRequest());
|
||||
|
|
@ -208,7 +209,7 @@ export function submitCompose(routerHistory, group) {
|
|||
status,
|
||||
markdown,
|
||||
scheduled_at,
|
||||
in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
|
||||
in_reply_to_id: inReplyToId,
|
||||
quote_of_id: getState().getIn(['compose', 'quote_of_id'], null),
|
||||
media_ids: media.map(item => item.get('id')),
|
||||
sensitive: getState().getIn(['compose', 'sensitive']),
|
||||
|
|
@ -221,9 +222,6 @@ export function submitCompose(routerHistory, group) {
|
|||
'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']),
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.visibility === 'direct' && getState().getIn(['conversations', 'mounted']) <= 0 && routerHistory) {
|
||||
routerHistory.push('/messages');
|
||||
}
|
||||
handleComposeSubmit(dispatch, getState, response, status);
|
||||
}).catch(function (error) {
|
||||
dispatch(submitComposeFail(error));
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const AddIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = 'Add',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const AddIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const AngleRightIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = '',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const AngleRightIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const AppsIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 80 80',
|
||||
size = '16px',
|
||||
title = 'Apps',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const AppsIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 80 80'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const AudioIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 24 24',
|
||||
size = '24px',
|
||||
title = '',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const AudioIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
const AudioMuteIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 24 24',
|
||||
title = 'Error',
|
||||
size = '24px',
|
||||
title = '',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
|
|
@ -11,9 +9,9 @@ const AudioMuteIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const BackIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 60 60',
|
||||
size = '16px',
|
||||
title = 'Back',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const BackIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 60 60'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const BlockQuoteIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 34 32',
|
||||
size = '16px',
|
||||
title = 'Block Quote',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const BlockQuoteIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 34 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const BoldIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 34 32',
|
||||
size = '16px',
|
||||
title = 'Strikethrough',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const BoldIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 34 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const CalendarIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '26px',
|
||||
title = 'Calendar',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const CalendarIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const ChatIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = 'Chat',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const ChatIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const CircleIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '16px',
|
||||
title = '',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const CircleIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const CloseIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 24 24',
|
||||
size = '16px',
|
||||
title = 'Close',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const CloseIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const CodeIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '24px',
|
||||
title = 'Code',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const CodeIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const CommentIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '26px',
|
||||
title = 'Comment',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const CommentIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const CopyIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '24px',
|
||||
title = 'Copy',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const CopyIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const DissenterIcon = ({
|
||||
className = '',
|
||||
width = '32px',
|
||||
height = '32px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '32px',
|
||||
title = 'Dissenter',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const DissenterIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const DonorIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 24 24',
|
||||
size = '24px',
|
||||
title = 'Gab.com Donor',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const DonorIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const EllipsisIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 24 24',
|
||||
size = '16px',
|
||||
title = 'Ellipsis',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const EllipsisIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const EmailIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '24px',
|
||||
title = 'Email',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const EmailIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const ErrorIcon = ({
|
||||
className = '',
|
||||
width = '32px',
|
||||
height = '32px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '32px',
|
||||
title = 'Error',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const ErrorIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const FullscreenIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 32 32',
|
||||
size = '24px',
|
||||
title = 'Fullscreen',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const FullscreenIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 32 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const GabLogo = ({
|
||||
className = _s.fillColorBrand,
|
||||
width = '50px',
|
||||
height = '30px',
|
||||
viewBox = '0 0 50 30'
|
||||
size = '50px',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
|
|
@ -10,9 +8,9 @@ const GabLogo = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 50 30'
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const GifIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '26px',
|
||||
title = 'Gif',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const GifIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
// : todo : fill, stroke colors
|
||||
const GlobeIcon = ({
|
||||
className = '',
|
||||
width = '12px',
|
||||
height = '12px',
|
||||
viewBox = '0 0 28 28',
|
||||
size = '12px',
|
||||
title = 'Globe',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -12,9 +10,9 @@ const GlobeIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 28 28'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const GroupAddIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '24px',
|
||||
title = 'Group Add',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const GroupAddIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const GroupIcon = ({
|
||||
className = 'header-nav__item__icon',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
className = '',
|
||||
size = '26px',
|
||||
title = 'Group',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const GroupIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const HappyIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = '',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const HappyIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const HiddenIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '16px',
|
||||
title = 'Hidden',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const HiddenIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const HomeIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '26px',
|
||||
title = 'Home',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const HomeIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const InvestorIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 24 24',
|
||||
size = '24px',
|
||||
title = 'Gab.com Investor',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const InvestorIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const ItalicIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 34 32',
|
||||
size = '16px',
|
||||
title = 'Italic',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const ItalicIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 34 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const LikeIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '26px',
|
||||
title = 'Like',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const LikeIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const LikedIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '26px',
|
||||
title = 'Liked',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const LikedIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const LinkIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = 'Link',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const LinkIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const ListAddIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 24 24',
|
||||
size = '24px',
|
||||
title = 'List Add',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const ListAddIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const ListIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '26px',
|
||||
title = 'List',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const ListIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
const LoadingIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 100 100',
|
||||
size = '24px',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
style={{shapeRendering: 'auto'}}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 100 100'
|
||||
preserveAspectRatio='xMidYMid'
|
||||
>
|
||||
<g transform='translate(82,50)'>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const LockFilledIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '24px',
|
||||
title = 'Lock',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const LockFilledIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const LockIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '24px',
|
||||
title = 'Lock',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const LockIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const MediaIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = 'Media',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const MediaIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const MinimizeFullscreenIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 32 32',
|
||||
size = '24px',
|
||||
title = 'Minimize Fullscreen',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const MinimizeFullscreenIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 32 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const MissingIcon = ({
|
||||
className = '',
|
||||
width = '32px',
|
||||
height = '32px',
|
||||
viewBox = '0 0 84 84',
|
||||
size = '32px',
|
||||
title = 'Missing',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const MissingIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 84 84'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const MoreIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = 'More',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const MoreIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const NotificationsIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '26px',
|
||||
title = 'Notifications',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const NotificationsIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const OLListIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 34 32',
|
||||
size = '16px',
|
||||
title = 'Ordered List',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const OLListIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 34 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const PauseIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = 'Pause',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const PauseIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const PencilIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = 'Pencil',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const PencilIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const PinIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 32 32',
|
||||
size = '16px',
|
||||
title = 'Pin',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const PinIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 32 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const PlayIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = 'Play',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const PlayIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const PollIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '16px',
|
||||
title = 'Poll',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const PollIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const ProIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 24 24',
|
||||
size = '24px',
|
||||
title = 'GabPRO Account',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const ProIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const CloseIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '16px',
|
||||
title = 'Close',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const CloseIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const RichTextIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '26px',
|
||||
title = 'Rich Text',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const RichTextIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
const SearchAltIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
size = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = 'Search',
|
||||
}) => (
|
||||
|
|
@ -11,8 +10,8 @@ const SearchAltIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const SearchIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '16px',
|
||||
title = 'Search',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const SearchIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
const SelectIcon = ({
|
||||
className = '',
|
||||
size = '16px',
|
||||
title = 'Select',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 32 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 8.535156 14.222656 L 23.464844 14.222656 C 24.070312 14.222656 24.625 13.890625 24.90625 13.355469 C 25.1875 12.820312 25.148438 12.175781 24.808594 11.675781 L 17.25 0.632812 C 16.980469 0.238281 16.53125 0.00390625 16.054688 0 C 15.574219 0 15.125 0.234375 14.851562 0.625 L 7.195312 11.667969 C 6.851562 12.167969 6.8125 12.816406 7.09375 13.351562 C 7.375 13.886719 7.929688 14.222656 8.535156 14.222656 Z M 8.535156 14.222656" />
|
||||
<path d="M 23.464844 17.777344 L 8.535156 17.777344 C 7.929688 17.777344 7.375 18.113281 7.09375 18.648438 C 6.8125 19.183594 6.851562 19.832031 7.195312 20.332031 L 14.851562 31.375 C 15.125 31.765625 15.574219 32 16.054688 32 C 16.53125 31.996094 16.980469 31.761719 17.25 31.367188 L 24.808594 20.324219 C 25.148438 19.824219 25.1875 19.179688 24.90625 18.644531 C 24.625 18.109375 24.070312 17.777344 23.464844 17.777344 Z M 23.464844 17.777344" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default SelectIcon
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
const ShareIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 24 24',
|
||||
size = '16px',
|
||||
title = 'Share',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const ShareIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const ShopIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '26px',
|
||||
title = 'Shop',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const ShopIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const StrikethroughIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 34 32',
|
||||
size = '16px',
|
||||
title = 'Strikethrough',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const StrikethroughIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 34 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const SubtractIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
size = '16px',
|
||||
title = 'Subtract',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const SubtractIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 64 64'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const TextSizeIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 34 32',
|
||||
size = '16px',
|
||||
title = 'Text Size',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const TextSizeIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 34 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const TrendsIcon = ({
|
||||
className = '',
|
||||
width = '32px',
|
||||
height = '32px',
|
||||
viewBox = '0 0 80 80',
|
||||
size = '32px',
|
||||
title = 'Trends',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const TrendsIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 80 80'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const ULListIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 34 32',
|
||||
size = '16px',
|
||||
title = 'Unordered List',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const ULListIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 34 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const UnderlineIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 34 32',
|
||||
size = '16px',
|
||||
title = 'Underline',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const UnderlineIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 34 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const UnlockFilledIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '24px',
|
||||
title = 'Unlock',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const UnlockFilledIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const VerifiedIcon = ({
|
||||
className = '',
|
||||
width = '24px',
|
||||
height = '24px',
|
||||
viewBox = '0 0 24 24',
|
||||
size = '24px',
|
||||
title = 'Verified Account',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const VerifiedIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const WarningIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '16px',
|
||||
title = 'Warning',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const WarningIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const WebsiteIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48',
|
||||
size = '16px',
|
||||
title = 'Website',
|
||||
}) => (
|
||||
<svg
|
||||
|
|
@ -11,9 +9,9 @@ const WebsiteIcon = ({
|
|||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -16,33 +16,16 @@ import { openModal } from '../actions/modal'
|
|||
import { initMuteModal } from '../actions/mutes'
|
||||
import { unfollowModal } from '../initial_state'
|
||||
import { makeGetAccount } from '../selectors'
|
||||
import AccountActionButton from './account_action_button'
|
||||
import Avatar from './avatar'
|
||||
import DisplayName from './display_name'
|
||||
import Button from './button'
|
||||
import Text from './text'
|
||||
|
||||
const messages = defineMessages({
|
||||
follow: { id: 'follow', defaultMessage: 'Follow' },
|
||||
unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
|
||||
requested: { id: 'requested', defaultMessage: 'Requested' },
|
||||
unblock: { id: 'unblock', defaultMessage: 'Unblock' },
|
||||
unmute: { id: 'unmute', defaultMessage: 'Unmute' },
|
||||
mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
|
||||
unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
|
||||
unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
|
||||
const makeMapStateToProps = (state, props) => ({
|
||||
account: makeGetAccount()(state, props.id),
|
||||
})
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getAccount = makeGetAccount()
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
account: getAccount(state, props.id),
|
||||
})
|
||||
|
||||
return mapStateToProps
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
|
||||
onFollow (account) {
|
||||
if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
|
||||
|
|
@ -102,25 +85,13 @@ class Account extends ImmutablePureComponent {
|
|||
dismissAction: PropTypes.func,
|
||||
}
|
||||
|
||||
handleFollow = () => {
|
||||
this.props.onFollow(this.props.account)
|
||||
}
|
||||
|
||||
handleBlock = () => {
|
||||
this.props.onBlock(this.props.account)
|
||||
}
|
||||
|
||||
handleMute = () => {
|
||||
this.props.onMute(this.props.account)
|
||||
}
|
||||
|
||||
handleMuteNotifications = () => {
|
||||
this.props.onMuteNotifications(this.props.account, true)
|
||||
}
|
||||
|
||||
handleUnmuteNotifications = () => {
|
||||
this.props.onMuteNotifications(this.props.account, false)
|
||||
}
|
||||
updateOnProps = [
|
||||
'account',
|
||||
'isHidden',
|
||||
'compact',
|
||||
'expanded',
|
||||
'showDismiss',
|
||||
]
|
||||
|
||||
handleAction = () => {
|
||||
this.props.onActionClick(this.props.account)
|
||||
|
|
@ -155,64 +126,26 @@ class Account extends ImmutablePureComponent {
|
|||
)
|
||||
}
|
||||
|
||||
// : todo : cleanup
|
||||
let buttonOptions
|
||||
let buttonText
|
||||
|
||||
if (onActionClick && actionIcon) {
|
||||
buttonText = actionTitle
|
||||
buttonOptions = {
|
||||
onClick: this.handleAction,
|
||||
outline: true,
|
||||
color: 'brand',
|
||||
backgroundColor: 'none',
|
||||
}
|
||||
} else if (account.get('id') !== me && account.get('relationship', null) !== null) {
|
||||
const following = account.getIn(['relationship', 'following'])
|
||||
const requested = account.getIn(['relationship', 'requested'])
|
||||
const blocking = account.getIn(['relationship', 'blocking'])
|
||||
|
||||
// : todo :
|
||||
// unmute
|
||||
|
||||
if (requested || blocking) {
|
||||
buttonText = intl.formatMessage(requested ? messages.requested : messages.unblock)
|
||||
buttonOptions = {
|
||||
narrow: true,
|
||||
onClick: requested ? this.handleUnrequest : this.handleBlock,
|
||||
color: 'primary',
|
||||
backgroundColor: 'tertiary',
|
||||
className: _s.mt5,
|
||||
}
|
||||
} else if (!account.get('moved') || following) {
|
||||
buttonOptions = {
|
||||
narrow: true,
|
||||
outline: !following,
|
||||
color: !following ? 'brand' : 'white',
|
||||
backgroundColor: !following ? 'none' : 'brand',
|
||||
className: _s.mt5,
|
||||
onClick: this.handleFollow,
|
||||
}
|
||||
buttonText = intl.formatMessage(following ? messages.unfollow : messages.follow)
|
||||
}
|
||||
}
|
||||
|
||||
const button = !buttonOptions ? null : (
|
||||
<Button {...buttonOptions}>
|
||||
<Text color='inherit'>{buttonText}</Text>
|
||||
const actionButton = (onActionClick && actionIcon) ? (
|
||||
<Button
|
||||
onClick={this.handleAction}
|
||||
isOutline={true}
|
||||
color='brand'
|
||||
backgroundColor='none'
|
||||
>
|
||||
{actionTitle}
|
||||
</Button>
|
||||
)
|
||||
) : <AccountActionButton account={account} isSmall />
|
||||
|
||||
const avatarSize = compact ? 42 : 52
|
||||
const dismissBtn = (
|
||||
const dismissBtn = !showDismiss ? null : (
|
||||
<Button
|
||||
narrow
|
||||
isNarrow
|
||||
backgroundColor='none'
|
||||
className={_s.px5}
|
||||
onClick={dismissAction}
|
||||
icon='close'
|
||||
iconWidth='8px'
|
||||
iconHeight='8px'
|
||||
iconSize='8px'
|
||||
iconClassName={_s.fillColorSecondary}
|
||||
/>
|
||||
)
|
||||
|
|
@ -235,12 +168,12 @@ class Account extends ImmutablePureComponent {
|
|||
className={[_s.default, _s.alignItemsStart, _s.px10, _s.flexGrow1].join(' ')}
|
||||
>
|
||||
<DisplayName account={account} multiline={compact} />
|
||||
{!compact && button}
|
||||
{!compact && actionButton}
|
||||
</NavLink>
|
||||
|
||||
<div className={[_s.default].join(' ')}>
|
||||
{showDismiss && dismissBtn}
|
||||
{compact && button}
|
||||
{dismissBtn}
|
||||
{compact && actionButton}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,160 @@
|
|||
wimport classNames from 'classnames/bind'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import {
|
||||
followAccount,
|
||||
unfollowAccount,
|
||||
unblockAccount,
|
||||
} from '../actions/accounts'
|
||||
import { openModal } from '../actions/modal'
|
||||
import { me, unfollowModal } from '../initial_state'
|
||||
import Button from './button'
|
||||
import Text from './text'
|
||||
|
||||
// : todo :
|
||||
|
||||
export default class AccountActionButton extends PureComponent {
|
||||
const messages = defineMessages({
|
||||
follow: { id: 'follow', defaultMessage: 'Follow' },
|
||||
following: { id: 'following', defaultMessage: 'Following' },
|
||||
unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
|
||||
requested: { id: 'requested', defaultMessage: 'Requested' },
|
||||
unblock: { id: 'unblock', defaultMessage: 'Unblock' },
|
||||
blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
|
||||
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
||||
follows: { id: 'account.follows', defaultMessage: 'Follows' },
|
||||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
|
||||
onFollow(account) {
|
||||
if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
|
||||
if (unfollowModal) {
|
||||
dispatch(openModal('UNFOLLOW', {
|
||||
accountId: account.get('id'),
|
||||
}));
|
||||
} else {
|
||||
dispatch(unfollowAccount(account.get('id')));
|
||||
}
|
||||
} else {
|
||||
dispatch(followAccount(account.get('id')));
|
||||
}
|
||||
},
|
||||
|
||||
onBlock(account) {
|
||||
if (account.getIn(['relationship', 'blocking'])) {
|
||||
dispatch(unblockAccount(account.get('id')));
|
||||
} else {
|
||||
dispatch(openModal('BLOCK_ACCOUNT', {
|
||||
accountId: account.get('id'),
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
@connect(null, mapDispatchToProps)
|
||||
class AccountActionButton extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.any,
|
||||
size: PropTypes.oneOf(Object.keys(SIZES)),
|
||||
center: PropTypes.bool,
|
||||
account: ImmutablePropTypes.map,
|
||||
intl: PropTypes.object.isRequired,
|
||||
isSmall: PropTypes.bool,
|
||||
onBlock: PropTypes.func.isRequired,
|
||||
onFollow: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
size: SIZES.h1,
|
||||
updateOnProps = [
|
||||
'account',
|
||||
]
|
||||
|
||||
handleFollow = () => {
|
||||
this.props.onFollow(this.props.account)
|
||||
}
|
||||
|
||||
handleBlock = () => {
|
||||
this.props.onBlock(this.props.account)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, size, center } = this.props
|
||||
const {
|
||||
account,
|
||||
intl,
|
||||
isSmall,
|
||||
} = this.props
|
||||
|
||||
const classes = cx({
|
||||
default: 1,
|
||||
text: 1,
|
||||
textAlignCenter: center,
|
||||
if (!account) return null
|
||||
|
||||
colorPrimary: [SIZES.h1, SIZES.h3].indexOf(size) > -1,
|
||||
colorSecondary: [SIZES.h2, SIZES.h4, SIZES.h5].indexOf(size) > -1,
|
||||
// Wait until the relationship is loaded
|
||||
if (!account.get('relationship')) return null
|
||||
|
||||
fontSize24PX: size === SIZES.h1,
|
||||
fontSize19PX: size === SIZES.h2,
|
||||
fontSize16PX: size === SIZES.h3,
|
||||
fontSize13PX: size === SIZES.h4,
|
||||
fontSize12PX: size === SIZES.h5,
|
||||
// Don't show if is me
|
||||
if (account.get('id') === me) return null
|
||||
|
||||
mt5: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
|
||||
const isBlockedBy = account.getIn(['relationship', 'blocked_by'])
|
||||
|
||||
lineHeight2: size === SIZES.h5,
|
||||
py2: size === SIZES.h5,
|
||||
// Don't show
|
||||
if (isBlockedBy) return null
|
||||
|
||||
// fontWeightNormal: weight === WEIGHTS.normal,
|
||||
fontWeightMedium: [SIZES.h1, SIZES.h5].indexOf(size) > -1,
|
||||
fontWeightBold: [SIZES.h3, SIZES.h4].indexOf(size) > -1,
|
||||
})
|
||||
let buttonText = ''
|
||||
let buttonOptions = {}
|
||||
|
||||
return React.createElement(
|
||||
size,
|
||||
{
|
||||
className: classes,
|
||||
role: 'heading',
|
||||
},
|
||||
children,
|
||||
const isRequested = account.getIn(['relationship', 'requested'])
|
||||
const isBlocking = account.getIn(['relationship', 'blocking'])
|
||||
const isFollowing = account.getIn(['relationship', 'following'])
|
||||
|
||||
if (isRequested) {
|
||||
buttonText = intl.formatMessage(messages.requested)
|
||||
buttonOptions = {
|
||||
onClick: this.handleFollow,
|
||||
color: 'primary',
|
||||
backgroundColor: 'tertiary',
|
||||
}
|
||||
} else if (isBlocking) {
|
||||
buttonText = intl.formatMessage(messages.blocked)
|
||||
buttonOptions = {
|
||||
onClick: this.handleBlock,
|
||||
color: 'white',
|
||||
backgroundColor: 'danger',
|
||||
}
|
||||
} else if (isFollowing) {
|
||||
buttonText = intl.formatMessage(messages.following)
|
||||
buttonOptions = {
|
||||
onClick: this.handleFollow,
|
||||
color: 'white',
|
||||
backgroundColor: 'brand',
|
||||
}
|
||||
} else {
|
||||
buttonText = intl.formatMessage(messages.follow)
|
||||
buttonOptions = {
|
||||
onClick: this.handleFollow,
|
||||
color: 'brand',
|
||||
backgroundColor: 'none',
|
||||
isOutline: true,
|
||||
}
|
||||
}
|
||||
|
||||
const textClassName = isSmall ? null : _s.px10
|
||||
const textSize = isSmall ? 'normal' : 'medium'
|
||||
const textWeight = isSmall ? 'normal' : 'bold'
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...buttonOptions}
|
||||
isNarrow
|
||||
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
|
||||
>
|
||||
<Text
|
||||
color='inherit'
|
||||
weight={textWeight}
|
||||
size={textSize}
|
||||
className={textClassName}
|
||||
>
|
||||
{buttonText}
|
||||
</Text>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,20 +1,21 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { Map as ImmutableMap } from 'immutable'
|
||||
import { autoPlayGif } from '../initial_state'
|
||||
import Image from './image'
|
||||
|
||||
export default
|
||||
class Avatar extends ImmutablePureComponent {
|
||||
/**
|
||||
* Renders an avatar component
|
||||
* @param {map} [props.account] - the account for image
|
||||
* @param {number} [props.size=40] - the size of the avatar
|
||||
*/
|
||||
export default class Avatar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map,
|
||||
size: PropTypes.number.isRequired,
|
||||
animate: PropTypes.bool,
|
||||
size: PropTypes.number,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
animate: autoPlayGif,
|
||||
size: 40,
|
||||
}
|
||||
|
||||
|
|
@ -41,17 +42,17 @@ class Avatar extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { account, size, animate } = this.props
|
||||
const { account, size } = this.props
|
||||
const { hovering, sameImg } = this.state
|
||||
|
||||
const shouldAnimate = animate || !sameImg
|
||||
const shouldAnimate = autoPlayGif || !sameImg
|
||||
|
||||
const options = {
|
||||
alt: !account ? 'Avatar' : account.get('display_name'),
|
||||
className: [_s.default, _s.circle, _s.overflowHidden].join(' '),
|
||||
onMouseEnter: shouldAnimate ? this.handleMouseEnter : undefined,
|
||||
onMouseLeave: shouldAnimate ? this.handleMouseLeave : undefined,
|
||||
src: !account ? undefined : account.get((hovering || animate) ? 'avatar' : 'avatar_static'),
|
||||
src: !account ? undefined : account.get((hovering || autoPlayGif) ? 'avatar' : 'avatar_static'),
|
||||
alt: !account ? undefined : account.get('display_name'),
|
||||
style: {
|
||||
width: `${size}px`,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
/**
|
||||
* Renders a block component
|
||||
*/
|
||||
export default class Block extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
children: PropTypes.any,
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@ import { NavLink } from 'react-router-dom'
|
|||
import classNames from 'classnames/bind'
|
||||
import Icon from './icon'
|
||||
|
||||
// Bind CSS Modules global variable `_s` to classNames module
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
// Define colors for enumeration for Button component `color`, `backgroundColor` props
|
||||
const COLORS = {
|
||||
primary: 'primary',
|
||||
secondary: 'secondary',
|
||||
|
|
@ -16,29 +18,60 @@ const COLORS = {
|
|||
none: 'none',
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a button component
|
||||
* @param {string} [props.backgroundColor='brand'] - background color of the button
|
||||
* @param {func|node} [props.buttonRef] - ref to send to button component
|
||||
* @param {string} [props.className] - add custom className
|
||||
* @param {string} [props.color='white'] - text color of the button
|
||||
* @param {string} [props.href] - href to send to on click
|
||||
* @param {string} [props.icon] - prepend icon id
|
||||
* @param {string} [props.iconClassName] - add custom className to icon
|
||||
* @param {string} [props.iconSize] - size of the icon
|
||||
* @param {bool} [props.isBlock] - if button is width: 100%
|
||||
* @param {bool} [props.isDisabled] - if the button is disabled
|
||||
* @param {bool} [props.isNarrow] - if the button is narrow
|
||||
* @param {bool} [props.isOutline] - if the button is outline design
|
||||
* @param {bool} [props.noClasses] - if the button has no default classes
|
||||
* @param {func} [props.onClick] - function to call on button click
|
||||
* @param {func} [props.onMouseEnter] - function to call on button mouse enter
|
||||
* @param {func} [props.onMouseLeave] - function to call on button mouse leave
|
||||
* @param {bool} [props.radiusSmall] - if the button has small radius
|
||||
* @param {bool} [props.text] - if the button is just text (i.e. link)
|
||||
* @param {bool} [props.title] - `title` attribute for button
|
||||
* @param {bool} [props.to] - `to` to send to on click
|
||||
* @param {bool} [props.type] - `type` attribute for button
|
||||
* @param {bool} [props.underlineOnHover] - if the button has underline on hover
|
||||
*/
|
||||
export default class Button extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
to: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
iconWidth: PropTypes.string,
|
||||
iconHeight: PropTypes.string,
|
||||
iconClassName: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
backgroundColor: PropTypes.string,
|
||||
block: PropTypes.bool,
|
||||
text: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
outline: PropTypes.bool,
|
||||
narrow: PropTypes.bool,
|
||||
underlineOnHover: PropTypes.bool,
|
||||
radiusSmall: PropTypes.bool,
|
||||
buttonRef: PropTypes.oneOfType([
|
||||
PropTypes.func,
|
||||
PropTypes.node,
|
||||
]),
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
iconClassName: PropTypes.string,
|
||||
iconSize: PropTypes.string,
|
||||
isBlock: PropTypes.bool,
|
||||
isDisabled: PropTypes.bool,
|
||||
isNarrow: PropTypes.bool,
|
||||
isText: PropTypes.bool,
|
||||
noClasses: PropTypes.bool,
|
||||
buttonRef: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
onMouseEnter: PropTypes.func,
|
||||
onMouseLeave: PropTypes.func,
|
||||
isOutline: PropTypes.bool,
|
||||
radiusSmall: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
to: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
underlineOnHover: PropTypes.bool,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
|
|
@ -47,15 +80,18 @@ export default class Button extends PureComponent {
|
|||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
if (!this.props.disabled && this.props.onClick) {
|
||||
if (!this.props.isDisabled && this.props.onClick) {
|
||||
this.props.onClick(e)
|
||||
}
|
||||
}
|
||||
|
||||
setRef = (c) => {
|
||||
const { buttonRef } = this.props
|
||||
if (buttonRef) buttonRef(c)
|
||||
this.node = c
|
||||
try {
|
||||
this.node = c
|
||||
this.props.buttonRef(c)
|
||||
} catch (error) {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
focus() {
|
||||
|
|
@ -64,36 +100,31 @@ export default class Button extends PureComponent {
|
|||
|
||||
render() {
|
||||
const {
|
||||
block,
|
||||
className,
|
||||
disabled,
|
||||
text,
|
||||
to,
|
||||
icon,
|
||||
iconWidth,
|
||||
iconHeight,
|
||||
iconClassName,
|
||||
children,
|
||||
href,
|
||||
outline,
|
||||
color,
|
||||
backgroundColor,
|
||||
underlineOnHover,
|
||||
narrow,
|
||||
radiusSmall,
|
||||
children,
|
||||
className,
|
||||
color,
|
||||
href,
|
||||
icon,
|
||||
iconClassName,
|
||||
iconSize,
|
||||
isBlock,
|
||||
isDisabled,
|
||||
isNarrow,
|
||||
isOutline,
|
||||
isText,
|
||||
noClasses,
|
||||
...otherProps
|
||||
onClick,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
radiusSmall,
|
||||
title,
|
||||
to,
|
||||
type,
|
||||
underlineOnHover,
|
||||
} = this.props
|
||||
|
||||
const theIcon = !!icon ? (
|
||||
<Icon
|
||||
id={icon}
|
||||
width={iconWidth}
|
||||
height={iconHeight}
|
||||
className={iconClassName}
|
||||
/>
|
||||
) : undefined
|
||||
|
||||
// Style the component according to props
|
||||
const classes = noClasses ? className : cx(className, {
|
||||
default: 1,
|
||||
noUnderline: 1,
|
||||
|
|
@ -102,8 +133,8 @@ export default class Button extends PureComponent {
|
|||
textAlignCenter: 1,
|
||||
outlineNone: 1,
|
||||
flexRow: !!children && !!icon,
|
||||
cursorNotAllowed: disabled,
|
||||
opacity05: disabled,
|
||||
cursorNotAllowed: isDisabled,
|
||||
opacity05: isDisabled,
|
||||
|
||||
backgroundColorPrimary: backgroundColor === COLORS.white,
|
||||
backgroundColorBlack: backgroundColor === COLORS.black,
|
||||
|
|
@ -119,17 +150,17 @@ export default class Button extends PureComponent {
|
|||
colorWhite: !!children && color === COLORS.white,
|
||||
colorBrand: !!children && color === COLORS.brand,
|
||||
|
||||
borderColorBrand: color === COLORS.brand && outline,
|
||||
border1PX: outline,
|
||||
borderColorBrand: color === COLORS.brand && isOutline,
|
||||
border1PX: isOutline,
|
||||
|
||||
circle: !text,
|
||||
circle: !isText,
|
||||
radiusSmall: radiusSmall,
|
||||
|
||||
py5: narrow,
|
||||
py10: !text && !narrow,
|
||||
px15: !text,
|
||||
py5: isNarrow,
|
||||
py10: !isText && !isNarrow,
|
||||
px15: !isText,
|
||||
|
||||
width100PC: block,
|
||||
width100PC: isBlock,
|
||||
|
||||
underline_onHover: underlineOnHover,
|
||||
|
||||
|
|
@ -138,17 +169,25 @@ export default class Button extends PureComponent {
|
|||
backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,
|
||||
backgroundColorDangerDark_onHover: backgroundColor === COLORS.danger,
|
||||
|
||||
backgroundColorBrand_onHover: color === COLORS.brand && outline,
|
||||
colorWhite_onHover: !!children && color === COLORS.brand && outline,
|
||||
backgroundColorBrand_onHover: color === COLORS.brand && isOutline,
|
||||
colorWhite_onHover: !!children && color === COLORS.brand && isOutline,
|
||||
|
||||
fillColorSecondary: !!icon && color === COLORS.secondary,
|
||||
fillColorWhite: !!icon && color === COLORS.white,
|
||||
fillColorBrand: !!icon && color === COLORS.brand,
|
||||
fillColorWhite_onHover: !!icon && color === COLORS.brand && outline,
|
||||
fillColorWhite_onHover: !!icon && color === COLORS.brand && isOutline,
|
||||
})
|
||||
|
||||
const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button'
|
||||
|
||||
const theIcon = !!icon ? (
|
||||
<Icon
|
||||
id={icon}
|
||||
size={iconSize}
|
||||
className={iconClassName}
|
||||
/>
|
||||
) : undefined
|
||||
|
||||
const theChildren = !!icon ? (
|
||||
<Fragment>
|
||||
{theIcon}
|
||||
|
|
@ -156,24 +195,36 @@ export default class Button extends PureComponent {
|
|||
</Fragment>
|
||||
) : children
|
||||
|
||||
const options = {
|
||||
disabled,
|
||||
className: classes,
|
||||
ref: this.setRef,
|
||||
to: to || undefined,
|
||||
href: href || undefined,
|
||||
onClick: this.handleClick || undefined,
|
||||
...otherProps,
|
||||
const handlers = {
|
||||
onClick: !!onClick ? this.handleClick : undefined,
|
||||
onMouseEnter: !!onMouseEnter ? onMouseEnter : undefined,
|
||||
onMouseLeave: !!onMouseLeave ? onMouseLeave : undefined,
|
||||
}
|
||||
|
||||
if (tagName === 'NavLink' && !!to) {
|
||||
return (
|
||||
<NavLink {...options}>
|
||||
<NavLink
|
||||
title={title}
|
||||
className={classes}
|
||||
disabled={isDisabled}
|
||||
to={to}
|
||||
{...handlers}
|
||||
>
|
||||
{theChildren}
|
||||
</NavLink>
|
||||
)
|
||||
}
|
||||
|
||||
const options = {
|
||||
title,
|
||||
type,
|
||||
disabled: isDisabled,
|
||||
className: classes,
|
||||
href: href || undefined,
|
||||
ref: this.setRef,
|
||||
...handlers,
|
||||
}
|
||||
|
||||
return React.createElement(tagName, options, theChildren)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
import { length } from 'stringz'
|
||||
|
||||
/**
|
||||
* Renders a character counter
|
||||
* @param {string} props.text - text to use to measure
|
||||
* @param {number} props.max - max text allowed
|
||||
*/
|
||||
export default class CharacterCounter extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
|
|
@ -9,6 +14,7 @@ export default class CharacterCounter extends PureComponent {
|
|||
|
||||
render () {
|
||||
const { text, max } = this.props
|
||||
|
||||
const actualRadius = '16'
|
||||
const radius = 12
|
||||
const circumference = 2 * Math.PI * radius
|
||||
|
|
@ -20,7 +26,6 @@ export default class CharacterCounter extends PureComponent {
|
|||
<svg width={actualRadius * 2} height={actualRadius * 2} viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}>
|
||||
<circle fill='none' cx={actualRadius} cy={actualRadius} r={radius} fill="none" stroke="#e6e6e6" strokeWidth="2" />
|
||||
<circle style={{
|
||||
// transform: 'rotate(-90deg)',
|
||||
strokeDashoffset: dashoffset,
|
||||
strokeDasharray: circumference,
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import TabBar from './tab_bar'
|
||||
import Button from './button'
|
||||
import Heading from './heading'
|
||||
import TabBar from './tab_bar'
|
||||
|
||||
export default class ColumnHeader extends PureComponent {
|
||||
|
||||
|
|
@ -44,8 +44,7 @@ export default class ColumnHeader extends PureComponent {
|
|||
backgroundColor='none'
|
||||
className={[_s.alignItemsCenter, _s.pl0, _s.justifyContentCenter].join(' ')}
|
||||
icon='back'
|
||||
iconWidth='20px'
|
||||
iconHeight='20px'
|
||||
iconSize='20px'
|
||||
iconClassName={[_s.mr5, _s.fillColorPrimary].join(' ')}
|
||||
onClick={this.handleBackClick}
|
||||
/>
|
||||
|
|
@ -57,10 +56,7 @@ export default class ColumnHeader extends PureComponent {
|
|||
</Heading>
|
||||
</div>
|
||||
|
||||
{
|
||||
!!tabs &&
|
||||
<TabBar tabs={tabs} />
|
||||
}
|
||||
<TabBar tabs={tabs} />
|
||||
|
||||
{
|
||||
!!actions &&
|
||||
|
|
@ -75,8 +71,7 @@ export default class ColumnHeader extends PureComponent {
|
|||
className={[_s.ml5, _s.fillColorBrand_onHover, _s.backgroundColorBrandLightOpaque_onHover, _s.px10].join(' ')}
|
||||
icon={action.icon}
|
||||
iconClassName={_s.inheritFill}
|
||||
iconWidth='15px'
|
||||
iconHeight='15px'
|
||||
iconSize='15px'
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ class ColumnIndicator extends PureComponent {
|
|||
|
||||
return (
|
||||
<div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.py15].join(' ')}>
|
||||
<Icon id={type} width='44px' height='44px' />
|
||||
<Icon id={type} size='44px' />
|
||||
{
|
||||
type !== 'loading' &&
|
||||
<Text
|
||||
|
|
|
|||
|
|
@ -17,19 +17,9 @@ const messages = defineMessages({
|
|||
follow: { id: 'follow', defaultMessage: 'Follow' },
|
||||
})
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getStatus = makeGetStatus()
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const status = getStatus(state, props)
|
||||
|
||||
return {
|
||||
status,
|
||||
}
|
||||
}
|
||||
|
||||
return mapStateToProps
|
||||
}
|
||||
const makeMapStateToProps = (state, props) => ({
|
||||
status: makeGetStatus()(state, props)
|
||||
})
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
|
|
@ -81,7 +71,7 @@ class Comment extends ImmutablePureComponent {
|
|||
<div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
|
||||
|
||||
<Button
|
||||
text
|
||||
isText
|
||||
radiusSmall
|
||||
backgroundColor='none'
|
||||
color='tertiary'
|
||||
|
|
@ -93,7 +83,7 @@ class Comment extends ImmutablePureComponent {
|
|||
</Button>
|
||||
|
||||
<Button
|
||||
text
|
||||
isText
|
||||
radiusSmall
|
||||
backgroundColor='none'
|
||||
color='tertiary'
|
||||
|
|
@ -105,7 +95,7 @@ class Comment extends ImmutablePureComponent {
|
|||
</Button>
|
||||
|
||||
<Button
|
||||
text
|
||||
isText
|
||||
radiusSmall
|
||||
backgroundColor='none'
|
||||
color='tertiary'
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ class CommentHeader extends ImmutablePureComponent {
|
|||
<Fragment>
|
||||
<DotTextSeperator />
|
||||
<Button
|
||||
text
|
||||
isText
|
||||
underlineOnHover
|
||||
backgroundColor='none'
|
||||
color='tertiary'
|
||||
|
|
@ -61,7 +61,7 @@ class CommentHeader extends ImmutablePureComponent {
|
|||
<Fragment>
|
||||
<DotTextSeperator />
|
||||
<Button
|
||||
text
|
||||
isText
|
||||
underlineOnHover
|
||||
backgroundColor='none'
|
||||
color='tertiary'
|
||||
|
|
@ -81,7 +81,7 @@ class CommentHeader extends ImmutablePureComponent {
|
|||
<Fragment>
|
||||
<DotTextSeperator />
|
||||
<Button
|
||||
text
|
||||
isText
|
||||
underlineOnHover
|
||||
backgroundColor='none'
|
||||
color='tertiary'
|
||||
|
|
@ -99,7 +99,7 @@ class CommentHeader extends ImmutablePureComponent {
|
|||
<DotTextSeperator />
|
||||
|
||||
<Button
|
||||
text
|
||||
isText
|
||||
underlineOnHover
|
||||
backgroundColor='none'
|
||||
color='tertiary'
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default class CommentList extends ImmutablePureComponent {
|
|||
size > 0 && size > max &&
|
||||
<div className={[_s.default, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.alignItemsCenter].join(' ')}>
|
||||
<Button
|
||||
text
|
||||
isText
|
||||
backgroundColor='none'
|
||||
color='tertiary'
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import debounce from 'lodash.debounce'
|
||||
import classNames from 'classnames/bind'
|
||||
import { openPopover, closePopover } from '../actions/popover'
|
||||
import Icon from './icon'
|
||||
|
|
@ -12,7 +11,7 @@ const mapDispatchToProps = (dispatch) => ({
|
|||
dispatch(openPopover('USER_INFO', props))
|
||||
},
|
||||
closeUserInfoPopover() {
|
||||
dispatch(closePopover())
|
||||
dispatch(closePopover('USER_INFO'))
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -31,20 +30,29 @@ class DisplayName extends ImmutablePureComponent {
|
|||
noUsername: PropTypes.bool,
|
||||
}
|
||||
|
||||
handleMouseEnter = debounce(() => {
|
||||
this.props.openUserInfoPopover({
|
||||
targetRef: this.node,
|
||||
position: 'top',
|
||||
account: this.props.account,
|
||||
})
|
||||
}, 1000, { leading: true })
|
||||
mouseOverTimeout = null
|
||||
|
||||
handleMouseLeave = debounce(() => {
|
||||
this.props.closeUserInfoPopover()
|
||||
}, 1000, { leading: true })
|
||||
handleMouseEnter = () => {
|
||||
if (this.mouseOverTimeout) return null
|
||||
this.mouseOverTimeout = setTimeout(() => {
|
||||
this.props.openUserInfoPopover({
|
||||
targetRef: this.node,
|
||||
position: 'top',
|
||||
account: this.props.account,
|
||||
})
|
||||
}, 650)
|
||||
}
|
||||
|
||||
handleMouseLeave = () => {
|
||||
if (this.mouseOverTimeout) {
|
||||
clearTimeout(this.mouseOverTimeout)
|
||||
this.mouseOverTimeout = null
|
||||
this.props.closeUserInfoPopover()
|
||||
}
|
||||
}
|
||||
|
||||
setRef = (n) => {
|
||||
this.node = n;
|
||||
this.node = n
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -105,12 +113,12 @@ class DisplayName extends ImmutablePureComponent {
|
|||
!!large ? '19px' :
|
||||
!!small ? '14px' : '16px'
|
||||
|
||||
const domain = account.get('acct').split('@')[1];
|
||||
const domain = account.get('acct').split('@')[1]
|
||||
const isRemoteUser = !!domain
|
||||
|
||||
// : todo : remote
|
||||
console.log("domain, isRemoteUser:", domain, isRemoteUser)
|
||||
|
||||
// : todo :
|
||||
|
||||
return (
|
||||
<span {...containerOptions} ref={this.setRef}>
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
|
|
@ -122,19 +130,19 @@ class DisplayName extends ImmutablePureComponent {
|
|||
</bdi>
|
||||
{
|
||||
account.get('is_verified') &&
|
||||
<Icon id='verified' width={iconSize} height={iconSize} className={_s.default} />
|
||||
<Icon id='verified' size={iconSize} className={_s.default} />
|
||||
}
|
||||
{
|
||||
account.get('is_pro') &&
|
||||
<Icon id='pro' width='16px' height='16px' className={_s.default} />
|
||||
<Icon id='pro' size={iconSize} className={_s.default} />
|
||||
}
|
||||
{
|
||||
account.get('is_donor') &&
|
||||
<Icon id='donor' width='16px' height='16px' className={_s.default} />
|
||||
<Icon id='donor' size={iconSize} className={_s.default} />
|
||||
}
|
||||
{
|
||||
account.get('is_investor') &&
|
||||
<Icon id='investor' width='16px' height='16px' className={_s.default} />
|
||||
<Icon id='investor' size={iconSize} className={_s.default} />
|
||||
}
|
||||
</div>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,27 +1,33 @@
|
|||
import classnames from 'classnames/bind'
|
||||
|
||||
// Bind CSS Modules global variable `_s` to classNames module
|
||||
const cx = classnames.bind(_s)
|
||||
|
||||
/**
|
||||
* Renders a divider component
|
||||
* @param {bool} [props.isInvisible] - to style the tab bar larger
|
||||
* @param {bool} [props.isSmall] - if item is active
|
||||
*/
|
||||
export default class Divider extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
small: PropTypes.bool,
|
||||
invisible: PropTypes.bool,
|
||||
isInvisible: PropTypes.bool,
|
||||
isSmall: PropTypes.bool,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { small, invisible } = this.props
|
||||
const { isSmall, isInvisible } = this.props
|
||||
|
||||
const classes = cx({
|
||||
default: 1,
|
||||
borderBottom1PX: !invisible,
|
||||
borderColorSecondary2: !invisible,
|
||||
borderBottom1PX: !isInvisible,
|
||||
borderColorSecondary2: !isInvisible,
|
||||
width100PC: 1,
|
||||
mb15: !small,
|
||||
my10: small || invisible,
|
||||
mb15: !isSmall,
|
||||
my10: isSmall || isInvisible,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={classes} />
|
||||
)
|
||||
return <div className={classes} />
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@ export default class FileInput extends PureComponent {
|
|||
/>
|
||||
{
|
||||
!file &&
|
||||
<div className={[_s.positionAbsolute, _s.cursorPointer].join(' ')}>
|
||||
<div className={[_s.posAbs, _s.cursorPointer].join(' ')}>
|
||||
<Text size='medium' color='secondary'>
|
||||
Click Here to Upload
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,22 @@
|
|||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { openModal } from '../actions/modal'
|
||||
import Button from './button'
|
||||
|
||||
export default class FloatingActionButton extends PureComponent {
|
||||
const messages = defineMessages({
|
||||
gab: { id: 'gab', defaultMessage: 'Gab' },
|
||||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenCompose: () => dispatch(openModal('COMPOSE')),
|
||||
})
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
@connect(null, mapDispatchToProps)
|
||||
class FloatingActionButton extends PureComponent {
|
||||
static propTypes = {
|
||||
onClick: PropTypes.func.isRequired,
|
||||
message: PropTypes.string.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onOpenCompose: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
|
|
@ -11,14 +24,16 @@ export default class FloatingActionButton extends PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { onClick, message } = this.props
|
||||
const { intl, onOpenCompose } = this.props
|
||||
|
||||
const message = intl.formatMessage(messages.gab)
|
||||
|
||||
return (
|
||||
<Button
|
||||
onClick={onClick}
|
||||
onClick={onOpenCompose}
|
||||
color='white'
|
||||
backgroundColor='brand'
|
||||
className={[_s.positionFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom0, _s.right0].join(' ')}
|
||||
className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom0, _s.right0].join(' ')}
|
||||
title={message}
|
||||
aria-label={message}
|
||||
icon='pencil'
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import { NavLink, withRouter } from 'react-router-dom';
|
|||
import { FormattedMessage, injectIntl } from 'react-intl';
|
||||
import NotificationCounter from '../notification_counter';
|
||||
|
||||
// : todo :
|
||||
|
||||
const links = [
|
||||
<NavLink key='pr1' className='footer-bar__link' to='/home' data-preview-title-id='column.home'>
|
||||
<i className='tabs-bar__link__icon home' />
|
||||
|
|
|
|||
|
|
@ -91,11 +91,11 @@ class GroupCollectionItem extends ImmutablePureComponent {
|
|||
|
||||
{
|
||||
(isMember || isAdmin) &&
|
||||
<div className={[_s.default, _s.flexRow, _s.positionAbsolute, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
|
||||
{
|
||||
isMember &&
|
||||
<Text
|
||||
badge
|
||||
isBadge
|
||||
className={_s.backgroundColorWhite}
|
||||
size='extraSmall'
|
||||
color='brand'
|
||||
|
|
@ -106,7 +106,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
|
|||
{
|
||||
isAdmin &&
|
||||
<Text
|
||||
badge
|
||||
isBadge
|
||||
className={[_s.backgroundColorBlack, _s.ml5].join(' ')}
|
||||
size='extraSmall'
|
||||
color='white'
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ export default class HashtagItem extends ImmutablePureComponent {
|
|||
<NavLink
|
||||
to='/tags/test'
|
||||
className={[_s.default, _s.noUnderline, _s.backgroundSubtle_onHover, _s.px15, _s.py5].join(' ')}
|
||||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
onMouseEnter={this.handleOnMouseEnter}
|
||||
onMouseLeave={this.handleOnMouseLeave}
|
||||
>
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
<div>
|
||||
|
|
@ -42,13 +42,12 @@ export default class HashtagItem extends ImmutablePureComponent {
|
|||
</Text>
|
||||
</div>
|
||||
<Button
|
||||
text
|
||||
isText
|
||||
backgroundColor='none'
|
||||
color='none'
|
||||
title='Remove'
|
||||
icon='caret-down'
|
||||
iconWidth='8px'
|
||||
iconHeight='8px'
|
||||
iconSize='8px'
|
||||
iconClassName={_s.fillColorSecondary}
|
||||
className={_s.marginLeftAuto}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import classNames from 'classnames/bind'
|
||||
|
||||
// Bind CSS Modules global variable `_s` to classNames module
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
// Define sizes for enumeration for Heading component `size` prop
|
||||
const SIZES = {
|
||||
h1: 'h1',
|
||||
h2: 'h2',
|
||||
|
|
@ -11,11 +13,17 @@ const SIZES = {
|
|||
h6: 'h6',
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders an H-tag
|
||||
* @param {bool} [props.isCentered] - if text is centered within the element
|
||||
* @param {string} [props.size='h1'] - the size of the heading
|
||||
*/
|
||||
export default class Heading extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.any,
|
||||
isCentered: PropTypes.bool,
|
||||
size: PropTypes.oneOf(Object.keys(SIZES)),
|
||||
center: PropTypes.bool,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
|
|
@ -25,6 +33,7 @@ export default class Heading extends PureComponent {
|
|||
render() {
|
||||
const { children, size, center } = this.props
|
||||
|
||||
// Each size has it's own custom style
|
||||
const classes = cx({
|
||||
default: 1,
|
||||
text: 1,
|
||||
|
|
@ -44,7 +53,6 @@ export default class Heading extends PureComponent {
|
|||
lineHeight2: size === SIZES.h5,
|
||||
py2: size === SIZES.h5,
|
||||
|
||||
// fontWeightNormal: weight === WEIGHTS.normal,
|
||||
fontWeightMedium: [SIZES.h1, SIZES.h5].indexOf(size) > -1,
|
||||
fontWeightBold: [SIZES.h3, SIZES.h4].indexOf(size) > -1,
|
||||
})
|
||||
|
|
@ -58,4 +66,5 @@ export default class Heading extends PureComponent {
|
|||
children,
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -53,6 +53,7 @@ import RepostIcon from '../assets/repost_icon'
|
|||
import RichTextIcon from '../assets/rich_text_icon'
|
||||
import SearchIcon from '../assets/search_icon'
|
||||
import SearchAltIcon from '../assets/search_alt_icon'
|
||||
import SelectIcon from '../assets/select_icon'
|
||||
import ShareIcon from '../assets/share_icon'
|
||||
import ShopIcon from '../assets/shop_icon'
|
||||
import StrikethroughIcon from '../assets/strikethrough_icon'
|
||||
|
|
@ -121,6 +122,7 @@ const ICONS = {
|
|||
'rich-text': RichTextIcon,
|
||||
'search': SearchIcon,
|
||||
'search-alt': SearchAltIcon,
|
||||
'select': SelectIcon,
|
||||
'share': ShareIcon,
|
||||
'shop': ShopIcon,
|
||||
'strikethrough': StrikethroughIcon,
|
||||
|
|
@ -141,17 +143,16 @@ export default class Icon extends PureComponent {
|
|||
static propTypes = {
|
||||
id: PropTypes.string.isRequired,
|
||||
className: PropTypes.string,
|
||||
width: PropTypes.string,
|
||||
height: PropTypes.string,
|
||||
size: PropTypes.string,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { id, ...options } = this.props
|
||||
const { id, size, className } = this.props
|
||||
|
||||
// : todo : add all required icons
|
||||
const Asset = ICONS[id] || CircleIcon
|
||||
|
||||
return <Asset {...options} />
|
||||
return <Asset size={size} className={className} />
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,14 @@ export default class Image extends PureComponent {
|
|||
alt: PropTypes.string.isRequired,
|
||||
src: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
width: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
height: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
fit: PropTypes.oneOf(['contain', 'cover', 'tile', 'none']),
|
||||
nullable: PropTypes.bool,
|
||||
lazy: PropTypes.bool,
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export default class Input extends PureComponent {
|
|||
<div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
|
||||
{
|
||||
!!prependIcon &&
|
||||
<Icon id={prependIcon} width='16px' height='16px' className={[_s.ml15, _s.mr5].join(' ')} />
|
||||
<Icon id={prependIcon} size='16px' className={[_s.ml15, _s.mr5].join(' ')} />
|
||||
}
|
||||
|
||||
<input
|
||||
|
|
@ -117,8 +117,7 @@ export default class Input extends PureComponent {
|
|||
onClick={onClear}
|
||||
icon='close'
|
||||
iconClassName={_s.inheritFill}
|
||||
iconHeight='10px'
|
||||
iconWidth='10px'
|
||||
iconSize='10px'
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,9 +26,18 @@ class IntersectionObserverArticle extends React.Component {
|
|||
|
||||
static propTypes = {
|
||||
intersectionObserverWrapper: PropTypes.object.isRequired,
|
||||
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
listLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
id: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
index: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
listLength: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
saveHeightKey: PropTypes.string,
|
||||
cachedHeight: PropTypes.number,
|
||||
onHeightChange: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ class LinkFooter extends PureComponent {
|
|||
|
||||
return (
|
||||
<Button
|
||||
text
|
||||
isText
|
||||
underlineOnHover
|
||||
color='none'
|
||||
backgroundColor='none'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import Block from './block'
|
||||
import ScrollableList from './scrollable_list'
|
||||
import ListItem from './list_item'
|
||||
|
|
@ -8,7 +9,8 @@ export default class List extends ImmutablePureComponent {
|
|||
static propTypes = {
|
||||
items: PropTypes.oneOfType([
|
||||
PropTypes.array,
|
||||
// immutatable...
|
||||
ImmutablePropTypes.map,
|
||||
ImmutablePropTypes.list,
|
||||
]),
|
||||
scrollKey: PropTypes.string,
|
||||
emptyMessage: PropTypes.any,
|
||||
|
|
|
|||
|
|
@ -72,8 +72,7 @@ export default class ListItem extends PureComponent {
|
|||
!!icon &&
|
||||
<Icon
|
||||
id={icon}
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
size={iconSize}
|
||||
className={iconClasses}
|
||||
/>
|
||||
}
|
||||
|
|
@ -86,8 +85,7 @@ export default class ListItem extends PureComponent {
|
|||
!hideArrow &&
|
||||
<Icon
|
||||
id='angle-right'
|
||||
width='10px'
|
||||
height='10px'
|
||||
size='10px'
|
||||
className={[_s.marginLeftAuto, _s.fillColorBlack].join(' ')}
|
||||
/>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ class LoadMore extends PureComponent {
|
|||
return (
|
||||
<div className={[_s.default, _s.py10, _s.px10].join(' ')}>
|
||||
<Button
|
||||
block
|
||||
isBlock
|
||||
radiusSmall
|
||||
backgroundColor='tertiary'
|
||||
color='primary'
|
||||
|
|
@ -53,7 +53,7 @@ class LoadMore extends PureComponent {
|
|||
{
|
||||
gap &&
|
||||
<Text align='center'>
|
||||
<Icon id='ellipsis' />
|
||||
<Icon id='ellipsis' size='14px' />
|
||||
</Text>
|
||||
}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ class Item extends ImmutablePureComponent {
|
|||
|
||||
if (attachment.get('type') === 'unknown') {
|
||||
return (
|
||||
<div className={[_s.default, _s.positionAbsolute].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
|
||||
<div className={[_s.default, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
|
||||
<a className={[_s.default, _s.heigh100PC, _s.width100PC, _s.cursorPointer].join(' ')} href={attachment.get('remote_url')} target='_blank' rel='noreferrer noopener'>
|
||||
<canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} />
|
||||
</a>
|
||||
|
|
@ -216,7 +216,7 @@ class Item extends ImmutablePureComponent {
|
|||
playsInline
|
||||
/>
|
||||
|
||||
<div className={[_s.default, _s.positionAbsolute, _s.z2, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
|
||||
<div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
|
||||
<Text size='extraSmall' color='white' weight='medium'>GIF</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -224,7 +224,7 @@ class Item extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={[_s.defeault, _s.positionAbsolute].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<div className={[_s.defeault, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
{
|
||||
!visible && !this.state.loaded &&
|
||||
<canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} />
|
||||
|
|
@ -257,6 +257,7 @@ class MediaGallery extends PureComponent {
|
|||
|
||||
static defaultProps = {
|
||||
standalone: false,
|
||||
height: 110,
|
||||
};
|
||||
|
||||
state = {
|
||||
|
|
@ -517,7 +518,7 @@ class MediaGallery extends PureComponent {
|
|||
//If reduced (i.e. like in a quoted post)
|
||||
//then we need to make media smaller
|
||||
if (reduced) {
|
||||
style.height = width / 2
|
||||
style.height = width / 2 || '50%'
|
||||
}
|
||||
|
||||
if (!visible) {
|
||||
|
|
@ -568,7 +569,7 @@ class MediaGallery extends PureComponent {
|
|||
|
||||
{
|
||||
visible && sensitive &&
|
||||
<div className={[_s.positionAbsolute, _s.z2, _s.top0, _s.right0, _s.mt10, _s.mr10].join(' ')}>
|
||||
<div className={[_s.posAbs, _s.z2, _s.top0, _s.right0, _s.mt10, _s.mr10].join(' ')}>
|
||||
<Button
|
||||
title={intl.formatMessage(messages.toggle_visible)}
|
||||
icon='hidden'
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export default class MediaItem extends ImmutablePureComponent {
|
|||
|
||||
const containerClasses = cx({
|
||||
default: 1,
|
||||
positionAbsolute: 1,
|
||||
posAbs: 1,
|
||||
top0: 1,
|
||||
height100PC: 1,
|
||||
width100PC: 1,
|
||||
|
|
@ -96,7 +96,7 @@ export default class MediaItem extends ImmutablePureComponent {
|
|||
})
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.width25PC, _s.paddingTop25PC].join(' ')}>
|
||||
<div className={[_s.default, _s.width25PC, _s.pt25PC].join(' ')}>
|
||||
<div className={containerClasses}>
|
||||
<NavLink
|
||||
to={status.get('url')} /* : todo : */
|
||||
|
|
@ -125,20 +125,19 @@ export default class MediaItem extends ImmutablePureComponent {
|
|||
/>
|
||||
}
|
||||
|
||||
<div className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.height100PC, _s.width100PC, _s.z3, _s.positionAbsolute].join(' ')}>
|
||||
<div className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.height100PC, _s.width100PC, _s.z3, _s.posAbs].join(' ')}>
|
||||
{
|
||||
!visible &&
|
||||
<Icon
|
||||
id='hidden'
|
||||
width='22px'
|
||||
height='22px'
|
||||
size='22px'
|
||||
className={[_s.fillColorWhite].join('')}
|
||||
/>
|
||||
}
|
||||
|
||||
{
|
||||
!!badge &&
|
||||
<div className={[_s.default, _s.positionAbsolute, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr5, _s.my5, _s.bottom0, _s.right0].join(' ')}>
|
||||
<div className={[_s.default, _s.posAbs, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr5, _s.my5, _s.bottom0, _s.right0].join(' ')}>
|
||||
<Text size='extraSmall' color='white'>
|
||||
{badge}
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ const messages = defineMessages({
|
|||
combo: { id: 'boost_modal.combo', defaultMessage: 'You can press {combo} to skip this next time' },
|
||||
});
|
||||
|
||||
// : todo :
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
class BoostModal extends ImmutablePureComponent {
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
|
|||
</div>
|
||||
|
||||
<Button
|
||||
centered
|
||||
backgroundColor='brand'
|
||||
color='white'
|
||||
className={_s.justifyContentCenter}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue