From f2797276b2970daaf27891b92c6cc1e9e49fec61 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Fri, 14 Apr 2023 05:01:23 -0400 Subject: [Glitch] typo: collapsable -> collapsible Port d02aa274be0b003e096cbd2c2d2427aafcfac88a to glitch-soc Signed-off-by: Claire --- .../glitch/features/direct_timeline/components/conversation.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx index 63a331086..06984f3ad 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx +++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx @@ -203,7 +203,7 @@ class Conversation extends ImmutablePureComponent { parseClick={this.parseClick} expanded={isExpanded} onExpandedToggle={this.handleShowMore} - collapsable + collapsible media={media} /> -- cgit From a21a875dbabd85a797c5e80bbdbe426a3a312cb0 Mon Sep 17 00:00:00 2001 From: Ivan Rodriguez <104603218+IRod22@users.noreply.github.com> Date: Fri, 14 Apr 2023 10:29:09 -0500 Subject: [Glitch] Fix status title for statuses without text Port f05fb51ecb34fd5ef86fad861e16cfc959fe0b27 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/status/index.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx index c220d761f..5d1160039 100644 --- a/app/javascript/flavours/glitch/features/status/index.jsx +++ b/app/javascript/flavours/glitch/features/status/index.jsx @@ -63,6 +63,7 @@ const messages = defineMessages({ redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? You will lose all replies, boosts and favourites to it.' }, revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' }, hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' }, + statusTitleWithAttachments: { id: 'status.title.with_attachments', defaultMessage: '{user} posted {attachmentCount, plural, one {an attachment} other {{attachmentCount} attachments}}' }, detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' }, replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, @@ -161,13 +162,14 @@ const truncate = (str, num) => { } }; -const titleFromStatus = status => { +const titleFromStatus = (intl, status) => { const displayName = status.getIn(['account', 'display_name']); const username = status.getIn(['account', 'username']); - const prefix = displayName.trim().length === 0 ? username : displayName; + const user = displayName.trim().length === 0 ? username : displayName; const text = status.get('search_index'); + const attachmentCount = status.get('media_attachments').size; - return `${prefix}: "${truncate(text, 30)}"`; + return text ? `${user}: "${truncate(text, 30)}"` : intl.formatMessage(messages.statusTitleWithAttachments, { user, attachmentCount }); }; class Status extends ImmutablePureComponent { @@ -710,7 +712,7 @@ class Status extends ImmutablePureComponent { - {titleFromStatus(status)} + {titleFromStatus(intl, status)} -- cgit From 2f3dffb057a68ed88116f3be5d49ff3bf203579b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 16 Apr 2023 07:01:24 +0200 Subject: [Glitch] Add progress indicator to sign-up flow Port e5c0b1673587885e5bbffbb376b16d773fb68193 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/forms.scss | 86 ++++++++++++++++++++++++ 1 file changed, 86 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index bb44d1bac..f69e8f276 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -1118,3 +1118,89 @@ code { white-space: nowrap; } } + +.progress-tracker { + display: flex; + align-items: center; + padding-bottom: 30px; + margin-bottom: 30px; + + li { + flex: 0 0 auto; + position: relative; + } + + .separator { + height: 2px; + background: $ui-base-lighter-color; + flex: 1 1 auto; + + &.completed { + background: $highlight-text-color; + } + } + + .circle { + box-sizing: border-box; + position: relative; + width: 30px; + height: 30px; + border-radius: 50%; + border: 2px solid $ui-base-lighter-color; + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 16px; + } + } + + .label { + position: absolute; + font-size: 14px; + font-weight: 500; + color: $secondary-text-color; + padding-top: 10px; + text-align: center; + width: 100px; + left: 50%; + transform: translateX(-50%); + } + + li:first-child .label { + left: auto; + inset-inline-start: 0; + text-align: start; + transform: none; + } + + li:last-child .label { + left: auto; + inset-inline-end: 0; + text-align: end; + transform: none; + } + + .active .circle { + border-color: $highlight-text-color; + + &::before { + content: ''; + width: 10px; + height: 10px; + border-radius: 50%; + background: $highlight-text-color; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + + .completed .circle { + border-color: $highlight-text-color; + background: $highlight-text-color; + } +} -- cgit From bc7b3399fbab62ea096d10704ea2837c863a0a53 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 17 Apr 2023 10:15:21 +0200 Subject: [Glitch] Fix crash when trying to open the filter modal Port bc4745f4824c3863d9ec939618b3e9414f3622bb to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx index 2d49312e5..440a6ac4b 100644 --- a/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx @@ -131,4 +131,4 @@ class FilterModal extends ImmutablePureComponent { } -export default connect(injectIntl(FilterModal)); +export default connect()(injectIntl(FilterModal)); -- cgit From 6ea91372330e5c268603a70f7bde461b1dfc623a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 16 Apr 2023 02:10:48 +0200 Subject: [Glitch] Add client-side validation for taken username in sign-up form Port 955ec252a421a5060345815bac0c63e8718bc3d8 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/packs/public.jsx | 50 ++++++++++++++++--------- 1 file changed, 33 insertions(+), 17 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/packs/public.jsx b/app/javascript/flavours/glitch/packs/public.jsx index 335a0710d..93b249bb4 100644 --- a/app/javascript/flavours/glitch/packs/public.jsx +++ b/app/javascript/flavours/glitch/packs/public.jsx @@ -2,6 +2,15 @@ import 'packs/public-path'; import loadPolyfills from 'flavours/glitch/load_polyfills'; import ready from 'flavours/glitch/ready'; import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions'; +import axios from 'axios'; +import { throttle } from 'lodash'; +import { defineMessages } from 'react-intl'; + +const messages = defineMessages({ + usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' }, + passwordExceedsLength: { id: 'password_confirmation.exceeds_maxlength', defaultMessage: 'Password confirmation exceeds the maximum password length' }, + passwordDoesNotMatch: { id: 'password_confirmation.mismatching', defaultMessage: 'Password confirmation does not match' }, +}); function main() { const IntlMessageFormat = require('intl-messageformat').default; @@ -9,7 +18,7 @@ function main() { const { delegate } = require('@rails/ujs'); const emojify = require('flavours/glitch/features/emoji/emoji').default; const { getLocale } = require('locales'); - const { messages } = getLocale(); + const { localeData } = getLocale(); const React = require('react'); const ReactDOM = require('react-dom'); const { createBrowserHistory } = require('history'); @@ -54,6 +63,11 @@ function main() { hour12: false, }); + const formatMessage = ({ id, defaultMessage }, values) => { + const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale); + return messageFormat.format(values); + }; + [].forEach.call(document.querySelectorAll('.emojify'), (content) => { content.innerHTML = emojify(content.innerHTML); }); @@ -73,7 +87,7 @@ function main() { date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear(); }; - const todayFormat = new IntlMessageFormat(messages['relative_format.today'] || 'Today at {time}', locale); + const todayFormat = new IntlMessageFormat(localeData['relative_format.today'] || 'Today at {time}', locale); [].forEach.call(document.querySelectorAll('time.relative-formatted'), (content) => { const datetime = new Date(content.getAttribute('datetime')); @@ -99,7 +113,7 @@ function main() { const timeGiven = content.getAttribute('datetime').includes('T'); content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime); content.textContent = timeAgoString({ - formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values), + formatMessage, formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date), }, datetime, now, now.getFullYear(), timeGiven); }); @@ -128,17 +142,19 @@ function main() { scrollToDetailedStatus(); } - delegate(document, '#registration_user_password_confirmation,#registration_user_password', 'input', () => { - const password = document.getElementById('registration_user_password'); - const confirmation = document.getElementById('registration_user_password_confirmation'); - if (confirmation.value && confirmation.value.length > password.maxLength) { - confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.exceeds_maxlength'] || 'Password confirmation exceeds the maximum password length', locale)).format()); - } else if (password.value && password.value !== confirmation.value) { - confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format()); + delegate(document, '#user_account_attributes_username', 'input', throttle(() => { + const username = document.getElementById('user_account_attributes_username'); + + if (username.value && username.value.length > 0) { + axios.get('/api/v1/accounts/lookup', { params: { acct: username.value } }).then(() => { + username.setCustomValidity(formatMessage(messages.usernameTaken)); + }).catch(() => { + username.setCustomValidity(''); + }); } else { - confirmation.setCustomValidity(''); + username.setCustomValidity(''); } - }); + }, 500, { leading: false, trailing: true })); delegate(document, '#user_password,#user_password_confirmation', 'input', () => { const password = document.getElementById('user_password'); @@ -146,9 +162,9 @@ function main() { if (!confirmation) return; if (confirmation.value && confirmation.value.length > password.maxLength) { - confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.exceeds_maxlength'] || 'Password confirmation exceeds the maximum password length', locale)).format()); + confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength)); } else if (password.value && password.value !== confirmation.value) { - confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format()); + confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch)); } else { confirmation.setCustomValidity(''); } @@ -162,10 +178,10 @@ function main() { if (statusEl.dataset.spoiler === 'expanded') { statusEl.dataset.spoiler = 'folded'; - this.textContent = (new IntlMessageFormat(messages['status.show_more'] || 'Show more', locale)).format(); + this.textContent = (new IntlMessageFormat(localeData['status.show_more'] || 'Show more', locale)).format(); } else { statusEl.dataset.spoiler = 'expanded'; - this.textContent = (new IntlMessageFormat(messages['status.show_less'] || 'Show less', locale)).format(); + this.textContent = (new IntlMessageFormat(localeData['status.show_less'] || 'Show less', locale)).format(); } return false; @@ -173,7 +189,7 @@ function main() { [].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => { const statusEl = spoilerLink.parentNode.parentNode; - const message = (statusEl.dataset.spoiler === 'expanded') ? (messages['status.show_less'] || 'Show less') : (messages['status.show_more'] || 'Show more'); + const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more'); spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format(); }); }); -- cgit From 799e9917e43455405dd510ba50b8f0b0ca1af443 Mon Sep 17 00:00:00 2001 From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com> Date: Sun, 16 Apr 2023 23:09:04 +0900 Subject: [Glitch] Rewrite GIFV component with React hooks Port cf3fa1e814c59fd25008b56a976dbc67bfc0efd0 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/gifv.jsx | 76 ---------------------- app/javascript/flavours/glitch/components/gifv.tsx | 68 +++++++++++++++++++ .../features/ui/components/focal_point_modal.jsx | 2 +- .../glitch/features/ui/components/media_modal.jsx | 2 +- 4 files changed, 70 insertions(+), 78 deletions(-) delete mode 100644 app/javascript/flavours/glitch/components/gifv.jsx create mode 100644 app/javascript/flavours/glitch/components/gifv.tsx (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/gifv.jsx b/app/javascript/flavours/glitch/components/gifv.jsx deleted file mode 100644 index 1ce7e7c29..000000000 --- a/app/javascript/flavours/glitch/components/gifv.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -export default class GIFV extends React.PureComponent { - - static propTypes = { - src: PropTypes.string.isRequired, - alt: PropTypes.string, - lang: PropTypes.string, - width: PropTypes.number, - height: PropTypes.number, - onClick: PropTypes.func, - }; - - state = { - loading: true, - }; - - handleLoadedData = () => { - this.setState({ loading: false }); - }; - - componentWillReceiveProps (nextProps) { - if (nextProps.src !== this.props.src) { - this.setState({ loading: true }); - } - } - - handleClick = e => { - const { onClick } = this.props; - - if (onClick) { - e.stopPropagation(); - onClick(); - } - }; - - render () { - const { src, width, height, alt, lang } = this.props; - const { loading } = this.state; - - return ( -
- {loading && ( - - )} - -
- ); - } - -} diff --git a/app/javascript/flavours/glitch/components/gifv.tsx b/app/javascript/flavours/glitch/components/gifv.tsx new file mode 100644 index 000000000..8968170c5 --- /dev/null +++ b/app/javascript/flavours/glitch/components/gifv.tsx @@ -0,0 +1,68 @@ +import React, { useCallback, useState } from 'react'; + +type Props = { + src: string; + key: string; + alt?: string; + lang?: string; + width: number; + height: number; + onClick?: () => void; +} + +export const GIFV: React.FC = ({ + src, + alt, + lang, + width, + height, + onClick, +})=> { + const [loading, setLoading] = useState(true); + + const handleLoadedData: React.ReactEventHandler = useCallback(() => { + setLoading(false); + }, [setLoading]); + + const handleClick: React.MouseEventHandler = useCallback((e) => { + if (onClick) { + e.stopPropagation(); + onClick(); + } + }, [onClick]); + + return ( +
+ {loading && ( + + )} + +
+ ); +}; + +export default GIFV; diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx index a5637d31c..78aee8dfe 100644 --- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx @@ -371,7 +371,7 @@ class FocalPointModal extends ImmutablePureComponent { {focals && (
{media.get('type') === 'image' && } - {media.get('type') === 'gifv' && } + {media.get('type') === 'gifv' && }
diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx index fd2bd43cf..6ca96b743 100644 --- a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx @@ -188,7 +188,7 @@ class MediaModal extends ImmutablePureComponent { src={image.get('url')} width={width} height={height} - key={image.get('preview_url')} + key={image.get('url')} alt={image.get('description')} lang={language} onClick={this.toggleNavigation} -- cgit From 9ef32ea570fd0db63bd75714cd847abad6833345 Mon Sep 17 00:00:00 2001 From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com> Date: Mon, 17 Apr 2023 20:25:15 +0900 Subject: [Glitch] Rewrite AnimatedNumber component with React hooks Port ab740f464a8e5aa6b5f78c0ddab3c8e18698d810 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/animated_number.jsx | 76 ---------------------- .../flavours/glitch/components/animated_number.tsx | 58 +++++++++++++++++ 2 files changed, 58 insertions(+), 76 deletions(-) delete mode 100644 app/javascript/flavours/glitch/components/animated_number.jsx create mode 100644 app/javascript/flavours/glitch/components/animated_number.tsx (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/animated_number.jsx b/app/javascript/flavours/glitch/components/animated_number.jsx deleted file mode 100644 index dd21d97f0..000000000 --- a/app/javascript/flavours/glitch/components/animated_number.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ShortNumber from 'mastodon/components/short_number'; -import TransitionMotion from 'react-motion/lib/TransitionMotion'; -import spring from 'react-motion/lib/spring'; -import { reduceMotion } from 'flavours/glitch/initial_state'; - -const obfuscatedCount = count => { - if (count < 0) { - return 0; - } else if (count <= 1) { - return count; - } else { - return '1+'; - } -}; - -export default class AnimatedNumber extends React.PureComponent { - - static propTypes = { - value: PropTypes.number.isRequired, - obfuscate: PropTypes.bool, - }; - - state = { - direction: 1, - }; - - componentWillReceiveProps (nextProps) { - if (nextProps.value > this.props.value) { - this.setState({ direction: 1 }); - } else if (nextProps.value < this.props.value) { - this.setState({ direction: -1 }); - } - } - - willEnter = () => { - const { direction } = this.state; - - return { y: -1 * direction }; - }; - - willLeave = () => { - const { direction } = this.state; - - return { y: spring(1 * direction, { damping: 35, stiffness: 400 }) }; - }; - - render () { - const { value, obfuscate } = this.props; - const { direction } = this.state; - - if (reduceMotion) { - return obfuscate ? obfuscatedCount(value) : ; - } - - const styles = [{ - key: `${value}`, - data: value, - style: { y: spring(0, { damping: 35, stiffness: 400 }) }, - }]; - - return ( - - {items => ( - - {items.map(({ key, data, style }) => ( - 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : } - ))} - - )} - - ); - } - -} diff --git a/app/javascript/flavours/glitch/components/animated_number.tsx b/app/javascript/flavours/glitch/components/animated_number.tsx new file mode 100644 index 000000000..1673ff41b --- /dev/null +++ b/app/javascript/flavours/glitch/components/animated_number.tsx @@ -0,0 +1,58 @@ +import React, { useCallback, useState } from 'react'; +import ShortNumber from './short_number'; +import { TransitionMotion, spring } from 'react-motion'; +import { reduceMotion } from '../initial_state'; + +const obfuscatedCount = (count: number) => { + if (count < 0) { + return 0; + } else if (count <= 1) { + return count; + } else { + return '1+'; + } +}; + +type Props = { + value: number; + obfuscate?: boolean; +} +export const AnimatedNumber: React.FC = ({ + value, + obfuscate, +})=> { + const [previousValue, setPreviousValue] = useState(value); + const [direction, setDirection] = useState<1|-1>(1); + + if (previousValue !== value) { + setPreviousValue(value); + setDirection(value > previousValue ? 1 : -1); + } + + const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]); + const willLeave = useCallback(() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction]); + + if (reduceMotion) { + return obfuscate ? <>{obfuscatedCount(value)} : ; + } + + const styles = [{ + key: `${value}`, + data: value, + style: { y: spring(0, { damping: 35, stiffness: 400 }) }, + }]; + + return ( + + {items => ( + + {items.map(({ key, data, style }) => ( + 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : } + ))} + + )} + + ); +}; + +export default AnimatedNumber; -- cgit