From 773f2f62b0ce093ff670f3cdcc8c1cb85b2d693d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 4 Apr 2022 21:39:45 +0200 Subject: [PATCH 1/8] Add text color for columns MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/ui/card/card.tsx | 2 +- app/soapbox/components/ui/column/column.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx index 9754628c9..12d9a5fd8 100644 --- a/app/soapbox/components/ui/card/card.tsx +++ b/app/soapbox/components/ui/card/card.tsx @@ -28,7 +28,7 @@ const Card: React.FC = React.forwardRef(({ children, variant, size = 'md' {...filteredProps} className={classNames({ 'space-y-4': true, - 'bg-white dark:bg-slate-800 sm:shadow-lg dark:sm:shadow-inset overflow-hidden': variant === 'rounded', + 'bg-white dark:bg-slate-800 text-black dark:text-white sm:shadow-lg dark:sm:shadow-inset overflow-hidden': variant === 'rounded', [sizes[size]]: true, }, className)} > diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx index c647aa1f3..c27a867dd 100644 --- a/app/soapbox/components/ui/column/column.tsx +++ b/app/soapbox/components/ui/column/column.tsx @@ -34,7 +34,7 @@ const Column: React.FC = React.forwardRef((props, ref: React.ForwardedR const renderChildren = () => { if (transparent) { - return
{children}
; + return
{children}
; } return ( From dd1f8a257e50e34b247e9b2619a398b0dcb39cd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 4 Apr 2022 21:58:27 +0200 Subject: [PATCH 2/8] styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/birthday_reminders.js | 23 ++++++++++++------- app/soapbox/components/status.tsx | 2 +- app/soapbox/components/ui/modal/modal.tsx | 2 +- .../ui/components/profile_info_panel.js | 10 ++++---- .../features/ui/components/reactions_modal.js | 1 + 5 files changed, 23 insertions(+), 15 deletions(-) diff --git a/app/soapbox/components/birthday_reminders.js b/app/soapbox/components/birthday_reminders.js index 12fa249fd..c6991dfc7 100644 --- a/app/soapbox/components/birthday_reminders.js +++ b/app/soapbox/components/birthday_reminders.js @@ -11,6 +11,7 @@ import { Link } from 'react-router-dom'; import { fetchBirthdayReminders } from 'soapbox/actions/accounts'; import { openModal } from 'soapbox/actions/modals'; import Icon from 'soapbox/components/icon'; +import { HStack, Text } from 'soapbox/components/ui'; import { makeGetAccount } from 'soapbox/selectors'; const mapStateToProps = (state, props) => { @@ -72,7 +73,7 @@ class BirthdayReminders extends ImmutablePureComponent { const link = (
-
-
- -
+
+ + - - {this.renderMessage()} - + + {this.renderMessage()} + +
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index 8276bed34..b5b57b07e 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -379,7 +379,7 @@ class Status extends ImmutablePureComponent { prepend = (
- + diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx index d6d23ce92..d9a7e96ab 100644 --- a/app/soapbox/components/ui/modal/modal.tsx +++ b/app/soapbox/components/ui/modal/modal.tsx @@ -46,7 +46,7 @@ const Modal: React.FC = ({ }, [buttonRef]); return ( -
+
diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js index ce89ee6cb..57dfcf48e 100644 --- a/app/soapbox/features/ui/components/profile_info_panel.js +++ b/app/soapbox/features/ui/components/profile_info_panel.js @@ -92,7 +92,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { @@ -191,7 +191,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { @@ -208,7 +208,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { @@ -221,13 +221,13 @@ class ProfileInfoPanel extends ImmutablePureComponent {
{isSafeUrl(account.get('website')) ? ( - {account.get('website')} + {account.get('website')} ) : ( account.get('website') )} diff --git a/app/soapbox/features/ui/components/reactions_modal.js b/app/soapbox/features/ui/components/reactions_modal.js index bea2c3567..36f79ea66 100644 --- a/app/soapbox/features/ui/components/reactions_modal.js +++ b/app/soapbox/features/ui/components/reactions_modal.js @@ -107,6 +107,7 @@ class ReactionsModal extends React.PureComponent { {accounts.map((account) => , From d727a3a7c5c1d5b1eb532f8f38a214f4dd41a675 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 5 Apr 2022 23:47:56 +0200 Subject: [PATCH 3/8] update snapshot MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../ui/column/__tests__/__snapshots__/column.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap b/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap index 486dd862a..3ea93c410 100644 --- a/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap +++ b/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap @@ -7,7 +7,7 @@ exports[` renders correctly with minimal props 1`] = ` role="region" >
Date: Wed, 6 Apr 2022 23:59:00 +0200 Subject: [PATCH 4/8] next MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/attachment_list.js | 59 ---------------------- app/soapbox/components/attachment_list.tsx | 54 ++++++++++++++++++++ 2 files changed, 54 insertions(+), 59 deletions(-) delete mode 100644 app/soapbox/components/attachment_list.js create mode 100644 app/soapbox/components/attachment_list.tsx diff --git a/app/soapbox/components/attachment_list.js b/app/soapbox/components/attachment_list.js deleted file mode 100644 index 52d4e6d77..000000000 --- a/app/soapbox/components/attachment_list.js +++ /dev/null @@ -1,59 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; - -import Icon from 'soapbox/components/icon'; - -const filename = url => url.split('/').pop().split('#')[0].split('?')[0]; - -export default class AttachmentList extends ImmutablePureComponent { - - static propTypes = { - media: ImmutablePropTypes.list.isRequired, - compact: PropTypes.bool, - }; - - render() { - const { media, compact } = this.props; - - if (compact) { - return ( -
-
    - {media.map(attachment => { - const displayUrl = attachment.get('remote_url') || attachment.get('url'); - - return ( -
  • - {filename(displayUrl)} -
    • - ); - })} -
-
- ); - } - - return ( -
-
- -
- -
    - {media.map(attachment => { - const displayUrl = attachment.get('remote_url') || attachment.get('url'); - - return ( -
  • - {filename(displayUrl)} -
    • - ); - })} -
-
- ); - } - -} diff --git a/app/soapbox/components/attachment_list.tsx b/app/soapbox/components/attachment_list.tsx new file mode 100644 index 000000000..94c496819 --- /dev/null +++ b/app/soapbox/components/attachment_list.tsx @@ -0,0 +1,54 @@ +import React from 'react'; + +import Icon from 'soapbox/components/icon'; + +import type { Attachment as AttachmentEntity } from 'soapbox/types/entities'; + +const filename = (url: string) => url.split('/').pop()!.split('#')[0].split('?')[0]; + +interface IAttachmentList { + media: AttachmentEntity[], + compact?: boolean, +} + +const AttachmentList: React.FC = ({ media, compact }) => { + if (compact) { + return ( +
+
    + {media.map(attachment => { + const displayUrl = attachment.get('remote_url') || attachment.get('url'); + + return ( +
  • + {filename(displayUrl)} +
    • + ); + })} +
+
+ ); + } + + return ( +
+
+ +
+ +
    + {media.map(attachment => { + const displayUrl = attachment.get('remote_url') || attachment.get('url'); + + return ( +
  • + {filename(displayUrl)} +
    • + ); + })} +
+
+ ); +}; + +export default AttachmentList; From 0252f0525a985278a77c8b1026173336dbd09b1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 7 Apr 2022 21:05:33 +0200 Subject: [PATCH 5/8] Fix typo in confirmation modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/features/ui/components/confirmation_modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/ui/components/confirmation_modal.js b/app/soapbox/features/ui/components/confirmation_modal.js index 76327ed73..3f16287ad 100644 --- a/app/soapbox/features/ui/components/confirmation_modal.js +++ b/app/soapbox/features/ui/components/confirmation_modal.js @@ -61,7 +61,7 @@ class ConfirmationModal extends React.PureComponent { cancelText={} cancelAction={this.handleCancel} secondaryText={secondary} - sectondaryAction={this.handleSecondary} + secondaryAction={this.handleSecondary} >

{message}

From 14337e78394f30a3893429017fa78529f6bc693f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 7 Apr 2022 21:16:26 +0200 Subject: [PATCH 6/8] Missing description modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/features/direct_timeline/index.js | 1 + .../components/missing_description_modal.js | 52 ------------------- .../components/missing_description_modal.tsx | 50 ++++++++++++++++++ app/soapbox/locales/en-Shaw.json | 3 +- app/soapbox/locales/he.json | 3 +- app/soapbox/locales/pl.json | 3 +- app/soapbox/locales/zh-CN.json | 3 +- 7 files changed, 59 insertions(+), 56 deletions(-) delete mode 100644 app/soapbox/features/ui/components/missing_description_modal.js create mode 100644 app/soapbox/features/ui/components/missing_description_modal.tsx diff --git a/app/soapbox/features/direct_timeline/index.js b/app/soapbox/features/direct_timeline/index.js index 3c81c5d14..b09a58158 100644 --- a/app/soapbox/features/direct_timeline/index.js +++ b/app/soapbox/features/direct_timeline/index.js @@ -75,6 +75,7 @@ class DirectTimeline extends React.PureComponent { timelineId='direct' onLoadMore={this.handleLoadMore} emptyMessage={} + divideType='space' /> ); diff --git a/app/soapbox/features/ui/components/missing_description_modal.js b/app/soapbox/features/ui/components/missing_description_modal.js deleted file mode 100644 index d7b472bec..000000000 --- a/app/soapbox/features/ui/components/missing_description_modal.js +++ /dev/null @@ -1,52 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { injectIntl, FormattedMessage } from 'react-intl'; - -import { Button } from '../../../components/ui'; - -export default @injectIntl -class MissingDescriptionModal extends React.PureComponent { - - static propTypes = { - onClose: PropTypes.func, - onContinue: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - }; - - componentDidMount() { - this.button.focus(); - } - - handleContinue = () => { - this.props.onClose(); - this.props.onContinue(); - } - - handleCancel = () => { - this.props.onClose(); - } - - setRef = (c) => { - this.button = c; - } - - render() { - return ( -
-
- -
- -
- - -
-
- ); - } - -} diff --git a/app/soapbox/features/ui/components/missing_description_modal.tsx b/app/soapbox/features/ui/components/missing_description_modal.tsx new file mode 100644 index 000000000..53fe240d0 --- /dev/null +++ b/app/soapbox/features/ui/components/missing_description_modal.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl'; + +import { Modal } from 'soapbox/components/ui'; + +const messages = defineMessages({ + modalTitle: { id: 'missing_description_modal.text', defaultMessage: 'You have not entered a description for all attachments.' }, + post: { id: 'missing_description_modal.continue', defaultMessage: 'Post' }, + cancel: { id: 'missing_description_modal.cancel', defaultMessage: 'Cancel' }, +}); + +interface IMissingDescriptionModal { + onClose: Function, + onContinue: Function, + intl: IntlShape, +} + +class MissingDescriptionModal extends React.PureComponent { + + handleContinue = () => { + this.props.onClose(); + this.props.onContinue(); + } + + handleCancel = () => { + this.props.onClose(); + } + + render() { + const { intl } = this.props; + + return ( + +

+ +

+ + ); + } + +} + +export default injectIntl(MissingDescriptionModal); diff --git a/app/soapbox/locales/en-Shaw.json b/app/soapbox/locales/en-Shaw.json index ae0b73eb2..584c53c8d 100644 --- a/app/soapbox/locales/en-Shaw.json +++ b/app/soapbox/locales/en-Shaw.json @@ -595,7 +595,8 @@ "mfa.setup_warning": "𐑮𐑲𐑑 𐑞𐑰𐑟 𐑒𐑴𐑛𐑟 𐑛𐑬𐑯 𐑹 𐑕𐑱𐑝 𐑞𐑧𐑥 𐑕𐑳𐑥𐑢𐑺 𐑕𐑦𐑒𐑘𐑫𐑼 - 𐑳𐑞𐑼𐑢𐑲𐑟 𐑿 𐑢𐑴𐑯𐑑 𐑕𐑰 𐑞𐑧𐑥 𐑩𐑜𐑱𐑯. 𐑦𐑓 𐑿 𐑤𐑵𐑟 𐑨𐑒𐑕𐑧𐑕 𐑑 𐑘𐑹 2FA 𐑨𐑐 𐑯 𐑮𐑦𐑒𐑳𐑝𐑼𐑦 𐑒𐑴𐑛𐑟 𐑿𐑤 𐑚𐑰 𐑤𐑪𐑒𐑑 𐑬𐑑 𐑝 𐑘𐑹 𐑩𐑒𐑬𐑯𐑑.", "missing_description_modal.cancel": "𐑒𐑨𐑯𐑕𐑩𐑤", "missing_description_modal.continue": "𐑐𐑴𐑕𐑑", - "missing_description_modal.text": "𐑿 𐑣𐑨𐑝 𐑯𐑪𐑑 𐑧𐑯𐑑𐑼𐑛 𐑩 𐑛𐑦𐑕𐑒𐑮𐑦𐑐𐑖𐑩𐑯 𐑓 𐑷𐑤 𐑩𐑑𐑨𐑗𐑥𐑩𐑯𐑑𐑕. 𐑒𐑩𐑯𐑑𐑦𐑯𐑿 𐑧𐑯𐑦𐑢𐑱?", + "missing_description_modal.description": "𐑒𐑩𐑯𐑑𐑦𐑯𐑿 𐑧𐑯𐑦𐑢𐑱?", + "missing_description_modal.text": "𐑿 𐑣𐑨𐑝 𐑯𐑪𐑑 𐑧𐑯𐑑𐑼𐑛 𐑩 𐑛𐑦𐑕𐑒𐑮𐑦𐑐𐑖𐑩𐑯 𐑓 𐑷𐑤 𐑩𐑑𐑨𐑗𐑥𐑩𐑯𐑑𐑕.", "missing_indicator.label": "𐑯𐑪𐑑 𐑓𐑬𐑯𐑛", "missing_indicator.sublabel": "𐑞𐑦𐑕 𐑮𐑦𐑟𐑹𐑕 𐑒𐑫𐑛 𐑯𐑪𐑑 𐑚𐑰 𐑓𐑬𐑯𐑛", "morefollows.followers_label": "…𐑯 {count} 𐑥𐑹 {count, plural, one {follower} other {followers}} 𐑪𐑯 𐑮𐑦𐑥𐑴𐑑 𐑕𐑲𐑑𐑕.", diff --git a/app/soapbox/locales/he.json b/app/soapbox/locales/he.json index a454c56de..62c4fce07 100644 --- a/app/soapbox/locales/he.json +++ b/app/soapbox/locales/he.json @@ -598,7 +598,8 @@ "mfa.setup_warning": "רשום את הקודים האלה או שמור אותם במקום מאובטח - אחרת לא תראה אותם שוב. אם תאבד את הגישה לאפליקציית 2FA ולקודי השחזור שלך תינעל מחוץ לחשבון שלך.", "missing_description_modal.cancel": "בטל", "missing_description_modal.continue": "שלח", - "missing_description_modal.text": "לא הזנת תיאור עבור כל הקבצים המצורפים. המשך בכל זאת?", + "missing_description_modal.description": "המשך בכל זאת?", + "missing_description_modal.text": "לא הזנת תיאור עבור כל הקבצים המצורפים.", "missing_indicator.label": "לא נמצא", "missing_indicator.sublabel": "משאב זה לא נמצא", "morefollows.followers_label": "ו-{count} עוד {count, plural, one {עוקב} other {עוקבים}} באתרים מרוחקים.", diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json index ebb61e18e..d4feae868 100644 --- a/app/soapbox/locales/pl.json +++ b/app/soapbox/locales/pl.json @@ -640,7 +640,8 @@ "migration.submit": "Przenieś obserwujących", "missing_description_modal.cancel": "Anuluj", "missing_description_modal.continue": "Opublikuj", - "missing_description_modal.text": "Nie podałeś(-aś) opisu dla wszystkich załączników. Czy na pewno chcesz kontynuować?", + "missing_description_modal.description": "Czy na pewno chcesz kontynuować?", + "missing_description_modal.text": "Nie podałeś(-aś) opisu dla wszystkich załączników.", "missing_indicator.label": "Nie znaleziono", "missing_indicator.sublabel": "Nie można odnaleźć tego zasobu", "morefollows.followers_label": "…i {count} więcej {count, plural, one {obserwujący(-a)} few {obserwujących} many {obserwujących} other {obserwujących}} na zdalnych stronach.", diff --git a/app/soapbox/locales/zh-CN.json b/app/soapbox/locales/zh-CN.json index 86e92a1c4..2a62dfa38 100644 --- a/app/soapbox/locales/zh-CN.json +++ b/app/soapbox/locales/zh-CN.json @@ -595,7 +595,8 @@ "mfa.setup_warning": "请立即将恢复代码保存或写到纸上，否则你可能无法登录帐号。", "missing_description_modal.cancel": "取消", "missing_description_modal.continue": "发布", - "missing_description_modal.text": "附件没有描述信息，仍然继续发布吗？", + "missing_description_modal.description": "仍然继续发布吗？", + "missing_description_modal.text": "附件没有描述信息。", "missing_indicator.label": "找不到内容", "missing_indicator.sublabel": "无法找到此资源", "morefollows.followers_label": "和{count} 来自其他站点的 {count, plural, one {关注者} other {关注者}} 。", From 2fbac4600c74fa23f3280a9d8aa716592a1d9590 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 7 Apr 2022 21:20:50 +0200 Subject: [PATCH 7/8] MissingDescriptionModal to functional component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../components/missing_description_modal.tsx | 51 +++++++------------ 1 file changed, 18 insertions(+), 33 deletions(-) diff --git a/app/soapbox/features/ui/components/missing_description_modal.tsx b/app/soapbox/features/ui/components/missing_description_modal.tsx index 53fe240d0..8268ff3e8 100644 --- a/app/soapbox/features/ui/components/missing_description_modal.tsx +++ b/app/soapbox/features/ui/components/missing_description_modal.tsx @@ -10,41 +10,26 @@ const messages = defineMessages({ }); interface IMissingDescriptionModal { - onClose: Function, - onContinue: Function, + onClose: () => void, + onContinue: () => void, intl: IntlShape, } -class MissingDescriptionModal extends React.PureComponent { - - handleContinue = () => { - this.props.onClose(); - this.props.onContinue(); - } - - handleCancel = () => { - this.props.onClose(); - } - - render() { - const { intl } = this.props; - - return ( - -

- -

- - ); - } - -} +const MissingDescriptionModal: React.FC = ({ onClose, onContinue, intl }) => { + return ( + +

+ +

+ + ); +}; export default injectIntl(MissingDescriptionModal); From 8be889734ce2528016131dbbe1a2364a89b3fa71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 7 Apr 2022 21:23:00 +0200 Subject: [PATCH 8/8] well, fix confirmation modal after fixing a typo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/actions/compose.js | 5 ++++- app/soapbox/features/ui/components/confirmation_modal.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app/soapbox/actions/compose.js b/app/soapbox/actions/compose.js index 9f1555ae9..becb39b81 100644 --- a/app/soapbox/actions/compose.js +++ b/app/soapbox/actions/compose.js @@ -236,7 +236,10 @@ export function submitCompose(routerHistory, force = false) { if (!force && needsDescriptions(state)) { dispatch(openModal('MISSING_DESCRIPTION', { - onContinue: () => dispatch(submitCompose(routerHistory, true)), + onContinue: () => { + dispatch(closeModal('MISSING_DESCRIPTION')); + dispatch(submitCompose(routerHistory, true)); + }, })); return; } diff --git a/app/soapbox/features/ui/components/confirmation_modal.js b/app/soapbox/features/ui/components/confirmation_modal.js index 3f16287ad..ab740a940 100644 --- a/app/soapbox/features/ui/components/confirmation_modal.js +++ b/app/soapbox/features/ui/components/confirmation_modal.js @@ -61,7 +61,7 @@ class ConfirmationModal extends React.PureComponent { cancelText={} cancelAction={this.handleCancel} secondaryText={secondary} - secondaryAction={this.handleSecondary} + secondaryAction={this.props.onSecondary && this.handleSecondary} >

{message}