Conflicts: - `config/webpack/generateLocalePacks.js`: A dependency update changed how functions are imported. Also, some linting fixes not applicable to glitch-soc.local
Claire
1 year ago
commit
b735954971
128 changed files with 1386 additions and 553 deletions
@ -1,11 +1,12 @@ |
||||
import { createAction } from '@reduxjs/toolkit'; |
||||
|
||||
import type { LayoutType } from '../is_mobile'; |
||||
|
||||
export const focusApp = createAction('APP_FOCUS'); |
||||
export const unfocusApp = createAction('APP_UNFOCUS'); |
||||
|
||||
type ChangeLayoutPayload = { |
||||
interface ChangeLayoutPayload { |
||||
layout: LayoutType; |
||||
}; |
||||
} |
||||
export const changeLayout = |
||||
createAction<ChangeLayoutPayload>('APP_LAYOUT_CHANGE'); |
||||
|
||||
@ -1,79 +0,0 @@ |
||||
import React from 'react'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import PropTypes from 'prop-types'; |
||||
import { autoPlayGif } from 'mastodon/initial_state'; |
||||
import Skeleton from 'mastodon/components/skeleton'; |
||||
|
||||
export default class DisplayName extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
account: ImmutablePropTypes.map, |
||||
others: ImmutablePropTypes.list, |
||||
localDomain: PropTypes.string, |
||||
}; |
||||
|
||||
handleMouseEnter = ({ currentTarget }) => { |
||||
if (autoPlayGif) { |
||||
return; |
||||
} |
||||
|
||||
const emojis = currentTarget.querySelectorAll('.custom-emoji'); |
||||
|
||||
for (var i = 0; i < emojis.length; i++) { |
||||
let emoji = emojis[i]; |
||||
emoji.src = emoji.getAttribute('data-original'); |
||||
} |
||||
}; |
||||
|
||||
handleMouseLeave = ({ currentTarget }) => { |
||||
if (autoPlayGif) { |
||||
return; |
||||
} |
||||
|
||||
const emojis = currentTarget.querySelectorAll('.custom-emoji'); |
||||
|
||||
for (var i = 0; i < emojis.length; i++) { |
||||
let emoji = emojis[i]; |
||||
emoji.src = emoji.getAttribute('data-static'); |
||||
} |
||||
}; |
||||
|
||||
render () { |
||||
const { others, localDomain } = this.props; |
||||
|
||||
let displayName, suffix, account; |
||||
|
||||
if (others && others.size > 1) { |
||||
displayName = others.take(2).map(a => <bdi key={a.get('id')}><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi>).reduce((prev, cur) => [prev, ', ', cur]); |
||||
|
||||
if (others.size - 2 > 0) { |
||||
suffix = `+${others.size - 2}`; |
||||
} |
||||
} else if ((others && others.size > 0) || this.props.account) { |
||||
if (others && others.size > 0) { |
||||
account = others.first(); |
||||
} else { |
||||
account = this.props.account; |
||||
} |
||||
|
||||
let acct = account.get('acct'); |
||||
|
||||
if (acct.indexOf('@') === -1 && localDomain) { |
||||
acct = `${acct}@${localDomain}`; |
||||
} |
||||
|
||||
displayName = <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>; |
||||
suffix = <span className='display-name__account'>@{acct}</span>; |
||||
} else { |
||||
displayName = <bdi><strong className='display-name__html'><Skeleton width='10ch' /></strong></bdi>; |
||||
suffix = <span className='display-name__account'><Skeleton width='7ch' /></span>; |
||||
} |
||||
|
||||
return ( |
||||
<span className='display-name' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> |
||||
{displayName} {suffix} |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,121 @@ |
||||
import React from 'react'; |
||||
|
||||
import type { List } from 'immutable'; |
||||
|
||||
import type { Account } from '../../types/resources'; |
||||
import { autoPlayGif } from '../initial_state'; |
||||
|
||||
import Skeleton from './skeleton'; |
||||
|
||||
interface Props { |
||||
account?: Account; |
||||
others?: List<Account>; |
||||
localDomain?: string; |
||||
} |
||||
|
||||
export class DisplayName extends React.PureComponent<Props> { |
||||
handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({ |
||||
currentTarget, |
||||
}) => { |
||||
if (autoPlayGif) { |
||||
return; |
||||
} |
||||
|
||||
const emojis = |
||||
currentTarget.querySelectorAll<HTMLImageElement>('img.custom-emoji'); |
||||
|
||||
emojis.forEach((emoji) => { |
||||
const originalSrc = emoji.getAttribute('data-original'); |
||||
if (originalSrc != null) emoji.src = originalSrc; |
||||
}); |
||||
}; |
||||
|
||||
handleMouseLeave: React.ReactEventHandler<HTMLSpanElement> = ({ |
||||
currentTarget, |
||||
}) => { |
||||
if (autoPlayGif) { |
||||
return; |
||||
} |
||||
|
||||
const emojis = |
||||
currentTarget.querySelectorAll<HTMLImageElement>('img.custom-emoji'); |
||||
|
||||
emojis.forEach((emoji) => { |
||||
const staticSrc = emoji.getAttribute('data-static'); |
||||
if (staticSrc != null) emoji.src = staticSrc; |
||||
}); |
||||
}; |
||||
|
||||
render() { |
||||
const { others, localDomain } = this.props; |
||||
|
||||
let displayName: React.ReactNode, |
||||
suffix: React.ReactNode, |
||||
account: Account | undefined; |
||||
|
||||
if (others && others.size > 0) { |
||||
account = others.first(); |
||||
} else if (this.props.account) { |
||||
account = this.props.account; |
||||
} |
||||
|
||||
if (others && others.size > 1) { |
||||
displayName = others |
||||
.take(2) |
||||
.map((a) => ( |
||||
<bdi key={a.get('id')}> |
||||
<strong |
||||
className='display-name__html' |
||||
dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} |
||||
/> |
||||
</bdi> |
||||
)) |
||||
.reduce((prev, cur) => [prev, ', ', cur]); |
||||
|
||||
if (others.size - 2 > 0) { |
||||
suffix = `+${others.size - 2}`; |
||||
} |
||||
} else if (account) { |
||||
let acct = account.get('acct'); |
||||
|
||||
if (acct.indexOf('@') === -1 && localDomain) { |
||||
acct = `${acct}@${localDomain}`; |
||||
} |
||||
|
||||
displayName = ( |
||||
<bdi> |
||||
<strong |
||||
className='display-name__html' |
||||
dangerouslySetInnerHTML={{ |
||||
__html: account.get('display_name_html'), |
||||
}} |
||||
/> |
||||
</bdi> |
||||
); |
||||
suffix = <span className='display-name__account'>@{acct}</span>; |
||||
} else { |
||||
displayName = ( |
||||
<bdi> |
||||
<strong className='display-name__html'> |
||||
<Skeleton width='10ch' /> |
||||
</strong> |
||||
</bdi> |
||||
); |
||||
suffix = ( |
||||
<span className='display-name__account'> |
||||
<Skeleton width='7ch' /> |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<span |
||||
className='display-name' |
||||
onMouseEnter={this.handleMouseEnter} |
||||
onMouseLeave={this.handleMouseLeave} |
||||
> |
||||
{displayName} {suffix} |
||||
</span> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,33 @@ |
||||
import React from 'react'; |
||||
|
||||
import classNames from 'classnames'; |
||||
|
||||
import { DisplayName } from 'mastodon/components/display_name'; |
||||
import Skeleton from 'mastodon/components/skeleton'; |
||||
|
||||
interface Props { |
||||
size?: number; |
||||
minimal?: boolean; |
||||
} |
||||
|
||||
export const EmptyAccount: React.FC<Props> = ({ |
||||
size = 46, |
||||
minimal = false, |
||||
}) => { |
||||
return ( |
||||
<div className={classNames('account', { 'account--minimal': minimal })}> |
||||
<div className='account__wrapper'> |
||||
<div className='account__display-name'> |
||||
<div className='account__avatar-wrapper'> |
||||
<Skeleton width={size} height={size} /> |
||||
</div> |
||||
|
||||
<div> |
||||
<DisplayName /> |
||||
<Skeleton width='7ch' /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -1,15 +1,14 @@ |
||||
import React from 'react'; |
||||
|
||||
import logo from 'mastodon/../images/logo.svg'; |
||||
|
||||
export const WordmarkLogo = () => ( |
||||
export const WordmarkLogo: React.FC = () => ( |
||||
<svg viewBox='0 0 261 66' className='logo logo--wordmark' role='img'> |
||||
<title>Mastodon</title> |
||||
<use xlinkHref='#logo-symbol-wordmark' /> |
||||
</svg> |
||||
); |
||||
|
||||
export const SymbolLogo = () => ( |
||||
export const SymbolLogo: React.FC = () => ( |
||||
<img src={logo} alt='Mastodon' className='logo logo--icon' /> |
||||
); |
||||
|
||||
export default WordmarkLogo; |
||||
@ -1,15 +1,17 @@ |
||||
import React, { useCallback, useState } from 'react'; |
||||
import { Blurhash } from './blurhash'; |
||||
|
||||
import classNames from 'classnames'; |
||||
|
||||
type Props = { |
||||
import { Blurhash } from './blurhash'; |
||||
|
||||
interface Props { |
||||
src: string; |
||||
srcSet?: string; |
||||
blurhash?: string; |
||||
className?: string; |
||||
}; |
||||
} |
||||
|
||||
export const Image: React.FC<Props> = ({ |
||||
export const ServerHeroImage: React.FC<Props> = ({ |
||||
src, |
||||
srcSet, |
||||
blurhash, |
||||
@ -1,8 +1,9 @@ |
||||
export function uuid(a?: string): string { |
||||
return a |
||||
? ( |
||||
(a as any as number) ^ |
||||
((Math.random() * 16) >> ((a as any as number) / 4)) |
||||
(a as unknown as number) ^ |
||||
((Math.random() * 16) >> ((a as unknown as number) / 4)) |
||||
).toString(16) |
||||
: ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid); |
||||
: // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
|
||||
('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid); |
||||
} |
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue