From cbd9dd52ee23bec3891c1b6457711dee228bd992 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Jul 2022 19:46:14 -0500 Subject: [PATCH 1/9] DevelopersMenu: refactor DashWidget into a React.FC --- .../features/developers/developers-menu.tsx | 42 +++++++++++++------ 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/app/soapbox/features/developers/developers-menu.tsx b/app/soapbox/features/developers/developers-menu.tsx index b4dfdd9c4..435dc11ee 100644 --- a/app/soapbox/features/developers/developers-menu.tsx +++ b/app/soapbox/features/developers/developers-menu.tsx @@ -15,7 +15,23 @@ const messages = defineMessages({ leave: { id: 'developers.leave', defaultMessage: 'You have left developers' }, }); -const Developers = () => { +interface IDashWidget { + to?: string, + onClick?: React.MouseEventHandler, + children: React.ReactNode, +} + +const DashWidget: React.FC = ({ to, onClick, children }) => { + const className = 'bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'; + + if (to) { + return {children}; + } else { + return ; + } +}; + +const Developers: React.FC = () => { const dispatch = useDispatch(); const history = useHistory(); const intl = useIntl(); @@ -31,53 +47,53 @@ const Developers = () => { return (
- + - + - + - + - + - + - + - + - + - + - +
); From 1ffd61af67e266e3053ae1a19ce99bcd06851503 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Jul 2022 19:53:43 -0500 Subject: [PATCH 2/9] DevelopersMenu: display source code version --- .../features/developers/developers-menu.tsx | 87 ++++++++++--------- 1 file changed, 48 insertions(+), 39 deletions(-) diff --git a/app/soapbox/features/developers/developers-menu.tsx b/app/soapbox/features/developers/developers-menu.tsx index 435dc11ee..cd8ee08bb 100644 --- a/app/soapbox/features/developers/developers-menu.tsx +++ b/app/soapbox/features/developers/developers-menu.tsx @@ -7,6 +7,7 @@ import { changeSettingImmediate } from 'soapbox/actions/settings'; import snackbar from 'soapbox/actions/snackbar'; import { Text } from 'soapbox/components/ui'; import SvgIcon from 'soapbox/components/ui/icon/svg-icon'; +import sourceCode from 'soapbox/utils/code'; import Column from '../ui/components/column'; @@ -45,57 +46,65 @@ const Developers: React.FC = () => { }; return ( - -
- - + <> + +
+ + - - - - + + + + - - + + - - - - + + + + - - + + - - - - + + + + - - + + - - - - + + + + - - + + - - - - + + + + - - + + - - - - + + + + +
+ + +
+ + {sourceCode.displayName} {sourceCode.version} +
- + ); }; From c1fc09d763d17f5e749abd16e6a50fb23c48c9fc Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Jul 2022 20:14:42 -0500 Subject: [PATCH 3/9] Danger: only care about UI components, actions, and reducers --- dangerfile.ts | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/dangerfile.ts b/dangerfile.ts index 4a25f80f7..e55c808b8 100644 --- a/dangerfile.ts +++ b/dangerfile.ts @@ -1,13 +1,32 @@ import { danger, warn, message } from 'danger'; +// Docs changes const docs = danger.git.fileMatch('docs/**/*.md'); -const app = danger.git.fileMatch('app/**/*.(js|ts|tsx)'); -const tests = danger.git.fileMatch('**/__tests__/**'); if (docs.edited) { message('Thanks - We :heart: our [documentarians](http://www.writethedocs.org/)!'); } -if (app.modified && !tests.modified) { - warn('You have app changes without tests.'); +// UI components +const uiCode = danger.git.fileMatch('app/soapbox/components/ui/**'); +const uiTests = danger.git.fileMatch('app/soapbox/components/ui/**/__tests__/**'); + +if (uiCode.modified && !uiTests.modified) { + warn('You have UI changes (`soapbox/components/ui`) without tests.'); +} + +// Actions +const actionsCode = danger.git.fileMatch('app/soapbox/actions/**'); +const actionsTests = danger.git.fileMatch('app/soapbox/actions/**__tests__/**'); + +if (actionsCode.modified && !actionsTests.modified) { + warn('You have actions changes (`soapbox/actions`) without tests.'); +} + +// Reducers +const reducersCode = danger.git.fileMatch('app/soapbox/reducers/**'); +const reducersTests = danger.git.fileMatch('app/soapbox/reducers/**__tests__/**'); + +if (reducersCode.modified && !reducersTests.modified) { + warn('You have reducer changes (`soapbox/reducers`) without tests.'); } From 94c460a28f13a18d7f7ba0bed1aa1f33e09d11e5 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 22 Jul 2022 14:50:56 -0500 Subject: [PATCH 4/9] Add vscode snippets --- .vscode/soapbox.code-snippets | 60 +++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 .vscode/soapbox.code-snippets diff --git a/.vscode/soapbox.code-snippets b/.vscode/soapbox.code-snippets new file mode 100644 index 000000000..8ea749550 --- /dev/null +++ b/.vscode/soapbox.code-snippets @@ -0,0 +1,60 @@ +{ + // Place your soapbox-fe workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and + // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope + // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is + // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: + // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. + // Placeholders with the same ids are connected. + // Example: + // "Print to console": { + // "scope": "javascript,typescript", + // "prefix": "log", + // "body": [ + // "console.log('$1');", + // "$2" + // ], + // "description": "Log output to console" + // } + "React component": { + "scope": "typescriptreact", + "prefix": ["component", "react component"], + "body": [ + "import React from 'react';", + "", + "interface I${1:Component} {", + "}", + "", + "/** ${1:Component} component. */", + "const ${1:Component}: React.FC = () => {", + " return (", + " <>", + " );", + "};", + "", + "export {", + " ${1:Component},", + "};" + ], + "description": "React component" + }, + "React component test": { + "scope": "typescriptreact", + "prefix": ["test", "component test", "react component test"], + "body": [ + "import React from 'react';", + "", + "import { render, screen } from 'soapbox/jest/test-helpers';", + "", + "import ${1:Component} from '${2:..}';", + "", + "describe('<${1:Component} />', () => {", + " it('renders', () => {", + " render(<${1:Component} />);", + "", + " expect(screen.getByTestId('${3:test}')).toBeInTheDocument();", + " });", + "});" + ], + "description": "React component test" + } +} From da1caf93dd0e13639c378311106a4d71a4645fce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Fri, 22 Jul 2022 23:48:27 +0200 Subject: [PATCH 5/9] For multi-response polls, show the number of people that voted instead of the sum of all votes submitted MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/polls/poll-footer.tsx | 15 ++++++++++----- app/soapbox/components/polls/poll-option.tsx | 3 ++- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/app/soapbox/components/polls/poll-footer.tsx b/app/soapbox/components/polls/poll-footer.tsx index bfa105ebd..c7997cfd7 100644 --- a/app/soapbox/components/polls/poll-footer.tsx +++ b/app/soapbox/components/polls/poll-footer.tsx @@ -36,6 +36,15 @@ const PollFooter: React.FC = ({ poll, showResults, selected }): JSX intl.formatMessage(messages.closed) : ; + let votesCount = null; + + if (poll.voters_count !== null && poll.voters_count !== undefined) { + votesCount = ; + } else { + votesCount = ; + } + + return ( {(!showResults && poll?.multiple) && ( @@ -58,11 +67,7 @@ const PollFooter: React.FC = ({ poll, showResults, selected }): JSX )} - + {votesCount} {poll.expires_at && ( diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx index b242f649b..024f01b7b 100644 --- a/app/soapbox/components/polls/poll-option.tsx +++ b/app/soapbox/components/polls/poll-option.tsx @@ -110,7 +110,8 @@ const PollOption: React.FC = (props): JSX.Element | null => { if (!poll) return null; - const percent = poll.votes_count === 0 ? 0 : (option.votes_count / poll.votes_count) * 100; + const pollVotesCount = poll.voters_count || poll.votes_count; + const percent = pollVotesCount === 0 ? 0 : (option.votes_count / pollVotesCount) * 100; const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count); const voted = poll.own_votes?.includes(index); const message = intl.formatMessage(messages.votes, { votes: option.votes_count }); From af70d141e67678382b29e590686b9fb75e8373e2 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 25 Jul 2022 10:58:37 -0500 Subject: [PATCH 6/9] Snippets: use default export for component --- .vscode/soapbox.code-snippets | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.vscode/soapbox.code-snippets b/.vscode/soapbox.code-snippets index 8ea749550..66da1a25b 100644 --- a/.vscode/soapbox.code-snippets +++ b/.vscode/soapbox.code-snippets @@ -31,9 +31,7 @@ " );", "};", "", - "export {", - " ${1:Component},", - "};" + "export default ${1:Component};" ], "description": "React component" }, From 58952f0ab238ec6803fef42319ddbfa12a69dd0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 26 Jul 2022 11:53:36 +0200 Subject: [PATCH 7/9] Add break-words to profile fields content 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/profile_fields_panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/ui/components/profile_fields_panel.tsx b/app/soapbox/features/ui/components/profile_fields_panel.tsx index e5630275b..d734442e7 100644 --- a/app/soapbox/features/ui/components/profile_fields_panel.tsx +++ b/app/soapbox/features/ui/components/profile_fields_panel.tsx @@ -65,7 +65,7 @@ const ProfileField: React.FC = ({ field }) => { )} - + From eb62ebfa52672689c36e94cb51066c5579441e2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 26 Jul 2022 12:30:51 +0200 Subject: [PATCH 8/9] Replace LineAwesome with Tabler in some places MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/load_gap.tsx | 2 +- app/soapbox/components/media_gallery.js | 2 +- app/soapbox/components/status_content.tsx | 2 +- .../features/account_gallery/components/media_item.js | 4 ++-- app/soapbox/features/aliases/index.tsx | 2 +- .../components/instance_restrictions.js | 6 +++--- app/soapbox/features/filters/index.tsx | 2 +- app/soapbox/features/ui/components/boost_modal.tsx | 2 +- app/styles/accounts.scss | 5 ++++- app/styles/components/filters.scss | 4 ++-- app/styles/components/media-gallery.scss | 9 ++++++--- app/styles/components/status.scss | 2 +- app/styles/loading.scss | 9 ++++----- 13 files changed, 28 insertions(+), 23 deletions(-) diff --git a/app/soapbox/components/load_gap.tsx b/app/soapbox/components/load_gap.tsx index b784c871d..c26da0281 100644 --- a/app/soapbox/components/load_gap.tsx +++ b/app/soapbox/components/load_gap.tsx @@ -20,7 +20,7 @@ const LoadGap: React.FC = ({ disabled, maxId, onClick }) => { return ( ); }; diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js index 4f16f5a73..6d6882b9c 100644 --- a/app/soapbox/components/media_gallery.js +++ b/app/soapbox/components/media_gallery.js @@ -215,7 +215,7 @@ class Item extends React.PureComponent { alt={attachment.get('description')} title={attachment.get('description')} > - + {ext} ); diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx index 0d482672d..138654b3f 100644 --- a/app/soapbox/components/status_content.tsx +++ b/app/soapbox/components/status_content.tsx @@ -30,7 +30,7 @@ interface IReadMoreButton { const ReadMoreButton: React.FC = ({ onClick }) => ( ); diff --git a/app/soapbox/features/account_gallery/components/media_item.js b/app/soapbox/features/account_gallery/components/media_item.js index 1cccfe070..fe8c6cc85 100644 --- a/app/soapbox/features/account_gallery/components/media_item.js +++ b/app/soapbox/features/account_gallery/components/media_item.js @@ -125,7 +125,7 @@ class MediaItem extends ImmutablePureComponent { const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase(); thumbnail = (
- + {fileExtension}
); @@ -134,7 +134,7 @@ class MediaItem extends ImmutablePureComponent { if (!visible) { icon = ( - + ); } diff --git a/app/soapbox/features/aliases/index.tsx b/app/soapbox/features/aliases/index.tsx index 9dfb52c44..d76c7988d 100644 --- a/app/soapbox/features/aliases/index.tsx +++ b/app/soapbox/features/aliases/index.tsx @@ -84,7 +84,7 @@ const Aliases = () => { {alias}
- +
diff --git a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js index 27c5756e2..fdb3cd328 100644 --- a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js +++ b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js @@ -95,7 +95,7 @@ class InstanceRestrictions extends ImmutablePureComponent { if (!fullMediaRemoval && media_nsfw) { items.push(( - + - + - + {
- +
diff --git a/app/soapbox/features/ui/components/boost_modal.tsx b/app/soapbox/features/ui/components/boost_modal.tsx index 1dcaaf63d..613fdaba2 100644 --- a/app/soapbox/features/ui/components/boost_modal.tsx +++ b/app/soapbox/features/ui/components/boost_modal.tsx @@ -38,7 +38,7 @@ const BoostModal: React.FC = ({ status, onReblog, onClose }) => { - Shift + }} /> + Shift + }} /> diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index 0e1c47c3a..e0ccdc416 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -178,7 +178,10 @@ a .account__avatar { top: 50%; left: 50%; transform: translate(-50%, -50%); - font-size: 24px; + + .svg-icon { + @apply h-6 w-6; + } } } diff --git a/app/styles/components/filters.scss b/app/styles/components/filters.scss index d978995ac..afa3555a5 100644 --- a/app/styles/components/filters.scss +++ b/app/styles/components/filters.scss @@ -87,14 +87,14 @@ } .filter__delete { - @apply flex items-baseline h-5 m-2.5 cursor-pointer; + @apply flex items-center h-5 m-2.5 cursor-pointer; span.filter__delete-label { @apply text-gray-500 dark:text-gray-400 font-semibold; } .filter__delete-icon { - @apply px-1 mx-auto text-base text-gray-500 dark:text-gray-400; + @apply mx-1 text-gray-500 dark:text-gray-400; } } } diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss index ffa8e8854..1abb7fa5a 100644 --- a/app/styles/components/media-gallery.scss +++ b/app/styles/components/media-gallery.scss @@ -23,7 +23,10 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - font-size: 100px; + + .svg-icon { + @apply h-24 w-24; + } } &-overflow { @@ -207,8 +210,8 @@ $media-compact-size: 50px; font-size: 20px; } - &__icons { - font-size: 30px; + &__icons .svg-icon { + @apply h-8 w-8; } } diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index b063e1d0a..3b05c9fdd 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -109,7 +109,7 @@ } .status__content__read-more-button { - @apply block text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline; + @apply flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline; } .status-link { diff --git a/app/styles/loading.scss b/app/styles/loading.scss index 78f640f6f..b6d86a686 100644 --- a/app/styles/loading.scss +++ b/app/styles/loading.scss @@ -132,20 +132,19 @@ color: var(--primary-text-color); background-color: transparent; border: 0; - font-size: inherit; - text-align: center; - line-height: inherit; margin: 0; padding: 15px; box-sizing: border-box; width: 100%; - clear: both; - text-decoration: none; &:hover, &:focus { background: var(--brand-color--faint); } + + .svg-icon { + @apply mx-auto; + } } .load-gap { From df136bb8c833f51cee126c1d96b3149da400cd41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 26 Jul 2022 12:42:15 +0200 Subject: [PATCH 9/9] Use file-spreadsheet icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/features/compose/components/upload.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/soapbox/features/compose/components/upload.tsx b/app/soapbox/features/compose/components/upload.tsx index df64fdbb3..5c9788575 100644 --- a/app/soapbox/features/compose/components/upload.tsx +++ b/app/soapbox/features/compose/components/upload.tsx @@ -13,8 +13,8 @@ import Motion from '../../ui/util/optional_motion'; import type { Map as ImmutableMap } from 'immutable'; const bookIcon = require('@tabler/icons/book.svg'); -const fileAnalyticsIcon = require('@tabler/icons/file-analytics.svg'); const fileCodeIcon = require('@tabler/icons/file-code.svg'); +const fileSpreadsheetIcon = require('@tabler/icons/file-spreadsheet.svg'); const fileTextIcon = require('@tabler/icons/file-text.svg'); const fileZipIcon = require('@tabler/icons/file-zip.svg'); const defaultIcon = require('@tabler/icons/paperclip.svg'); @@ -39,9 +39,9 @@ export const MIMETYPE_ICONS: Record = { 'application/xhtml+xml': fileCodeIcon, 'application/xml': fileCodeIcon, 'application/epub+zip': bookIcon, - 'application/vnd.oasis.opendocument.spreadsheet': fileAnalyticsIcon, - 'application/vnd.ms-excel': fileAnalyticsIcon, - 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileAnalyticsIcon, + 'application/vnd.oasis.opendocument.spreadsheet': fileSpreadsheetIcon, + 'application/vnd.ms-excel': fileSpreadsheetIcon, + 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileSpreadsheetIcon, 'application/pdf': fileTextIcon, 'application/vnd.oasis.opendocument.presentation': presentationIcon, 'application/vnd.ms-powerpoint': presentationIcon,