parent
95a1fde6b6
commit
0870c7c95e
|
@ -33,7 +33,7 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
|
||||||
const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]);
|
const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]);
|
||||||
const willLeave = useCallback(
|
const willLeave = useCallback(
|
||||||
() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }),
|
() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }),
|
||||||
[direction]
|
[direction],
|
||||||
);
|
);
|
||||||
|
|
||||||
if (reduceMotion) {
|
if (reduceMotion) {
|
||||||
|
|
|
@ -33,7 +33,7 @@ export const Avatar: React.FC<Props> = ({
|
||||||
|
|
||||||
if (account) {
|
if (account) {
|
||||||
style.backgroundImage = `url(${account.get(
|
style.backgroundImage = `url(${account.get(
|
||||||
hovering ? 'avatar' : 'avatar_static'
|
hovering ? 'avatar' : 'avatar_static',
|
||||||
)})`;
|
)})`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -42,7 +42,7 @@ export const Avatar: React.FC<Props> = ({
|
||||||
className={classNames(
|
className={classNames(
|
||||||
'account__avatar',
|
'account__avatar',
|
||||||
{ 'account__avatar-inline': inline },
|
{ 'account__avatar-inline': inline },
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
onMouseEnter={handleMouseEnter}
|
onMouseEnter={handleMouseEnter}
|
||||||
onMouseLeave={handleMouseLeave}
|
onMouseLeave={handleMouseLeave}
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
export const StatusesCounter = (
|
export const StatusesCounter = (
|
||||||
displayNumber: React.ReactNode,
|
displayNumber: React.ReactNode,
|
||||||
pluralReady: number
|
pluralReady: number,
|
||||||
) => (
|
) => (
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id='account.statuses_counter'
|
id='account.statuses_counter'
|
||||||
|
@ -18,7 +18,7 @@ export const StatusesCounter = (
|
||||||
|
|
||||||
export const FollowingCounter = (
|
export const FollowingCounter = (
|
||||||
displayNumber: React.ReactNode,
|
displayNumber: React.ReactNode,
|
||||||
pluralReady: number
|
pluralReady: number,
|
||||||
) => (
|
) => (
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id='account.following_counter'
|
id='account.following_counter'
|
||||||
|
@ -32,7 +32,7 @@ export const FollowingCounter = (
|
||||||
|
|
||||||
export const FollowersCounter = (
|
export const FollowersCounter = (
|
||||||
displayNumber: React.ReactNode,
|
displayNumber: React.ReactNode,
|
||||||
pluralReady: number
|
pluralReady: number,
|
||||||
) => (
|
) => (
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id='account.followers_counter'
|
id='account.followers_counter'
|
||||||
|
|
|
@ -33,7 +33,7 @@ export const GIFV: React.FC<Props> = ({
|
||||||
onClick();
|
onClick();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[onClick]
|
[onClick],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -108,7 +108,7 @@ export const timeAgoString = (
|
||||||
now: number,
|
now: number,
|
||||||
year: number,
|
year: number,
|
||||||
timeGiven: boolean,
|
timeGiven: boolean,
|
||||||
short?: boolean
|
short?: boolean,
|
||||||
) => {
|
) => {
|
||||||
const delta = now - date.getTime();
|
const delta = now - date.getTime();
|
||||||
|
|
||||||
|
@ -118,28 +118,28 @@ export const timeAgoString = (
|
||||||
relativeTime = intl.formatMessage(messages.today);
|
relativeTime = intl.formatMessage(messages.today);
|
||||||
} else if (delta < 10 * SECOND) {
|
} else if (delta < 10 * SECOND) {
|
||||||
relativeTime = intl.formatMessage(
|
relativeTime = intl.formatMessage(
|
||||||
short ? messages.just_now : messages.just_now_full
|
short ? messages.just_now : messages.just_now_full,
|
||||||
);
|
);
|
||||||
} else if (delta < 7 * DAY) {
|
} else if (delta < 7 * DAY) {
|
||||||
if (delta < MINUTE) {
|
if (delta < MINUTE) {
|
||||||
relativeTime = intl.formatMessage(
|
relativeTime = intl.formatMessage(
|
||||||
short ? messages.seconds : messages.seconds_full,
|
short ? messages.seconds : messages.seconds_full,
|
||||||
{ number: Math.floor(delta / SECOND) }
|
{ number: Math.floor(delta / SECOND) },
|
||||||
);
|
);
|
||||||
} else if (delta < HOUR) {
|
} else if (delta < HOUR) {
|
||||||
relativeTime = intl.formatMessage(
|
relativeTime = intl.formatMessage(
|
||||||
short ? messages.minutes : messages.minutes_full,
|
short ? messages.minutes : messages.minutes_full,
|
||||||
{ number: Math.floor(delta / MINUTE) }
|
{ number: Math.floor(delta / MINUTE) },
|
||||||
);
|
);
|
||||||
} else if (delta < DAY) {
|
} else if (delta < DAY) {
|
||||||
relativeTime = intl.formatMessage(
|
relativeTime = intl.formatMessage(
|
||||||
short ? messages.hours : messages.hours_full,
|
short ? messages.hours : messages.hours_full,
|
||||||
{ number: Math.floor(delta / HOUR) }
|
{ number: Math.floor(delta / HOUR) },
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
relativeTime = intl.formatMessage(
|
relativeTime = intl.formatMessage(
|
||||||
short ? messages.days : messages.days_full,
|
short ? messages.days : messages.days_full,
|
||||||
{ number: Math.floor(delta / DAY) }
|
{ number: Math.floor(delta / DAY) },
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
} else if (date.getFullYear() === year) {
|
} else if (date.getFullYear() === year) {
|
||||||
|
@ -158,7 +158,7 @@ const timeRemainingString = (
|
||||||
intl: IntlShape,
|
intl: IntlShape,
|
||||||
date: Date,
|
date: Date,
|
||||||
now: number,
|
now: number,
|
||||||
timeGiven = true
|
timeGiven = true,
|
||||||
) => {
|
) => {
|
||||||
const delta = date.getTime() - now;
|
const delta = date.getTime() - now;
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { toShortNumber, pluralReady, DECIMAL_UNITS } from '../utils/numbers';
|
||||||
|
|
||||||
type ShortNumberRenderer = (
|
type ShortNumberRenderer = (
|
||||||
displayNumber: JSX.Element,
|
displayNumber: JSX.Element,
|
||||||
pluralReady: number
|
pluralReady: number,
|
||||||
) => JSX.Element;
|
) => JSX.Element;
|
||||||
|
|
||||||
interface ShortNumberProps {
|
interface ShortNumberProps {
|
||||||
|
@ -25,7 +25,7 @@ export const ShortNumberRenderer: React.FC<ShortNumberProps> = ({
|
||||||
|
|
||||||
if (children && renderer) {
|
if (children && renderer) {
|
||||||
console.warn(
|
console.warn(
|
||||||
'Both renderer prop and renderer as a child provided. This is a mistake and you really should fix that. Only renderer passed as a child will be used.'
|
'Both renderer prop and renderer as a child provided. This is a mistake and you really should fix that. Only renderer passed as a child will be used.',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -25,7 +25,7 @@ export type SearchData = [
|
||||||
BaseEmoji['native'],
|
BaseEmoji['native'],
|
||||||
Emoji['short_names'],
|
Emoji['short_names'],
|
||||||
Search,
|
Search,
|
||||||
Emoji['unified']
|
Emoji['unified'],
|
||||||
];
|
];
|
||||||
|
|
||||||
export interface ShortCodesToEmojiData {
|
export interface ShortCodesToEmojiData {
|
||||||
|
@ -38,7 +38,7 @@ export type EmojiCompressed = [
|
||||||
Skins,
|
Skins,
|
||||||
Category[],
|
Category[],
|
||||||
Data['aliases'],
|
Data['aliases'],
|
||||||
EmojisWithoutShortCodes
|
EmojisWithoutShortCodes,
|
||||||
];
|
];
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
@ -12,7 +12,7 @@ if (!HTMLCanvasElement.prototype.toBlob) {
|
||||||
this: HTMLCanvasElement,
|
this: HTMLCanvasElement,
|
||||||
callback: BlobCallback,
|
callback: BlobCallback,
|
||||||
type = 'image/png',
|
type = 'image/png',
|
||||||
quality: unknown
|
quality: unknown,
|
||||||
) {
|
) {
|
||||||
const dataURL: string = this.toDataURL(type, quality);
|
const dataURL: string = this.toDataURL(type, quality);
|
||||||
let data;
|
let data;
|
||||||
|
|
|
@ -105,7 +105,7 @@ const initialRootState = Object.fromEntries(
|
||||||
reducer(undefined, {
|
reducer(undefined, {
|
||||||
// empty action
|
// empty action
|
||||||
}),
|
}),
|
||||||
])
|
]),
|
||||||
);
|
);
|
||||||
|
|
||||||
const RootStateRecord = ImmutableRecord(initialRootState, 'RootState');
|
const RootStateRecord = ImmutableRecord(initialRootState, 'RootState');
|
||||||
|
|
|
@ -35,7 +35,7 @@ interface PopModalOption {
|
||||||
}
|
}
|
||||||
const popModal = (
|
const popModal = (
|
||||||
state: State,
|
state: State,
|
||||||
{ modalType, ignoreFocus }: PopModalOption
|
{ modalType, ignoreFocus }: PopModalOption,
|
||||||
): State => {
|
): State => {
|
||||||
if (
|
if (
|
||||||
modalType === undefined ||
|
modalType === undefined ||
|
||||||
|
@ -52,12 +52,12 @@ const popModal = (
|
||||||
const pushModal = (
|
const pushModal = (
|
||||||
state: State,
|
state: State,
|
||||||
modalType: ModalType,
|
modalType: ModalType,
|
||||||
modalProps: ModalProps
|
modalProps: ModalProps,
|
||||||
): State => {
|
): State => {
|
||||||
return state.withMutations((record) => {
|
return state.withMutations((record) => {
|
||||||
record.set('ignoreFocus', false);
|
record.set('ignoreFocus', false);
|
||||||
record.update('stack', (stack) =>
|
record.update('stack', (stack) =>
|
||||||
stack.unshift(Modal({ modalType, modalProps }))
|
stack.unshift(Modal({ modalType, modalProps })),
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -68,14 +68,14 @@ export function modalReducer(
|
||||||
modalType: ModalType;
|
modalType: ModalType;
|
||||||
ignoreFocus: boolean;
|
ignoreFocus: boolean;
|
||||||
modalProps: Record<string, unknown>;
|
modalProps: Record<string, unknown>;
|
||||||
}>
|
}>,
|
||||||
) {
|
) {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case openModal.type:
|
case openModal.type:
|
||||||
return pushModal(
|
return pushModal(
|
||||||
state,
|
state,
|
||||||
action.payload.modalType,
|
action.payload.modalType,
|
||||||
action.payload.modalProps
|
action.payload.modalProps,
|
||||||
);
|
);
|
||||||
case closeModal.type:
|
case closeModal.type:
|
||||||
return popModal(state, action.payload);
|
return popModal(state, action.payload);
|
||||||
|
@ -85,8 +85,8 @@ export function modalReducer(
|
||||||
return state.update('stack', (stack) =>
|
return state.update('stack', (stack) =>
|
||||||
stack.filterNot(
|
stack.filterNot(
|
||||||
// @ts-expect-error TIMELINE_DELETE action is not typed yet.
|
// @ts-expect-error TIMELINE_DELETE action is not typed yet.
|
||||||
(modal) => modal.get('modalProps').statusId === action.id
|
(modal) => modal.get('modalProps').statusId === action.id,
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
|
|
|
@ -3,12 +3,12 @@ const easingOutQuint = (
|
||||||
t: number,
|
t: number,
|
||||||
b: number,
|
b: number,
|
||||||
c: number,
|
c: number,
|
||||||
d: number
|
d: number,
|
||||||
) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
|
) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
|
||||||
const scroll = (
|
const scroll = (
|
||||||
node: Element,
|
node: Element,
|
||||||
key: 'scrollTop' | 'scrollLeft',
|
key: 'scrollTop' | 'scrollLeft',
|
||||||
target: number
|
target: number,
|
||||||
) => {
|
) => {
|
||||||
const startTime = Date.now();
|
const startTime = Date.now();
|
||||||
const offset = node[key];
|
const offset = node[key];
|
||||||
|
|
|
@ -30,7 +30,7 @@ export const store = configureStore({
|
||||||
.concat(
|
.concat(
|
||||||
loadingBarMiddleware({
|
loadingBarMiddleware({
|
||||||
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],
|
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],
|
||||||
})
|
}),
|
||||||
)
|
)
|
||||||
.concat(errorsMiddleware)
|
.concat(errorsMiddleware)
|
||||||
.concat(soundsMiddleware()),
|
.concat(soundsMiddleware()),
|
||||||
|
|
|
@ -14,7 +14,7 @@ const defaultTypeSuffixes: Config['promiseTypeSuffixes'] = [
|
||||||
];
|
];
|
||||||
|
|
||||||
export const loadingBarMiddleware = (
|
export const loadingBarMiddleware = (
|
||||||
config: Config = {}
|
config: Config = {},
|
||||||
): Middleware<Record<string, never>, RootState> => {
|
): Middleware<Record<string, never>, RootState> => {
|
||||||
const promiseTypeSuffixes = config.promiseTypeSuffixes || defaultTypeSuffixes;
|
const promiseTypeSuffixes = config.promiseTypeSuffixes || defaultTypeSuffixes;
|
||||||
|
|
||||||
|
|
|
@ -31,9 +31,19 @@ body {
|
||||||
// Droid Sans => Older Androids (<4.0)
|
// Droid Sans => Older Androids (<4.0)
|
||||||
// Helvetica Neue => Older macOS <10.11
|
// Helvetica Neue => Older macOS <10.11
|
||||||
// $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
|
// $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
font-family:
|
||||||
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
system-ui,
|
||||||
$font-sans-serif, sans-serif;
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
'Fira Sans',
|
||||||
|
'Droid Sans',
|
||||||
|
'Helvetica Neue',
|
||||||
|
$font-sans-serif,
|
||||||
|
sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.app-body {
|
&.app-body {
|
||||||
|
|
|
@ -480,7 +480,9 @@ $ui-header-height: 55px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
color: $darker-text-color;
|
color: $darker-text-color;
|
||||||
transition: max-height 150ms ease-in-out, opacity 300ms linear;
|
transition:
|
||||||
|
max-height 150ms ease-in-out,
|
||||||
|
opacity 300ms linear;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -26,7 +26,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-reduce-motion .spoiler-input {
|
.no-reduce-motion .spoiler-input {
|
||||||
transition: height 0.4s ease, opacity 0.4s ease;
|
transition:
|
||||||
|
height 0.4s ease,
|
||||||
|
opacity 0.4s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spoiler-input {
|
.spoiler-input {
|
||||||
|
|
|
@ -253,14 +253,16 @@
|
||||||
@for $i from 0 through 3 {
|
@for $i from 0 through 3 {
|
||||||
.mbstobon-#{$i} .drawer__inner__mastodon {
|
.mbstobon-#{$i} .drawer__inner__mastodon {
|
||||||
@if $i == 3 {
|
@if $i == 3 {
|
||||||
background: url('~flavours/glitch/images/wave-drawer.png')
|
background:
|
||||||
|
url('~flavours/glitch/images/wave-drawer.png')
|
||||||
no-repeat
|
no-repeat
|
||||||
bottom /
|
bottom /
|
||||||
100%
|
100%
|
||||||
auto,
|
auto,
|
||||||
lighten($ui-base-color, 13%);
|
lighten($ui-base-color, 13%);
|
||||||
} @else {
|
} @else {
|
||||||
background: url('~flavours/glitch/images/wave-drawer-glitched.png')
|
background:
|
||||||
|
url('~flavours/glitch/images/wave-drawer-glitched.png')
|
||||||
no-repeat
|
no-repeat
|
||||||
bottom /
|
bottom /
|
||||||
100%
|
100%
|
||||||
|
|
|
@ -55,7 +55,7 @@ export function toShortNumber(sourceNumber: number): ShortNumber {
|
||||||
*/
|
*/
|
||||||
export function pluralReady(
|
export function pluralReady(
|
||||||
sourceNumber: number,
|
sourceNumber: number,
|
||||||
division: DecimalUnits
|
division: DecimalUnits,
|
||||||
): number {
|
): number {
|
||||||
if (division == null || division < DECIMAL_UNITS.HUNDRED) {
|
if (division == null || division < DECIMAL_UNITS.HUNDRED) {
|
||||||
return sourceNumber;
|
return sourceNumber;
|
||||||
|
|
Loading…
Reference in New Issue