From 6936e5aa693ccc4aabd26ef18a65fbb8132f6f74 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 25 Jan 2024 16:41:31 +0100 Subject: [PATCH] Change design of compose form in web UI (#28119) Co-authored-by: Claire --- .eslintrc.js | 2 +- app/javascript/images/warning-stripes.svg | 25 + .../autosuggest_emoji-test.jsx.snap | 12 +- .../mastodon/components/account.jsx | 8 +- .../mastodon/components/autosuggest_emoji.jsx | 2 +- .../components/autosuggest_hashtag.tsx | 39 +- .../mastodon/components/autosuggest_input.jsx | 59 +- .../components/autosuggest_textarea.jsx | 67 +- .../mastodon/components/dropdown_menu.jsx | 2 +- app/javascript/mastodon/components/status.jsx | 6 +- .../mastodon/components/visibility_icon.tsx | 13 +- .../mastodon/containers/compose_container.jsx | 38 +- .../compose/components/action_bar.jsx | 99 +- .../components/autosuggest_account.jsx | 2 +- .../compose/components/character_counter.jsx | 28 +- .../compose/components/compose_form.jsx | 160 +- .../compose/components/edit_indicator.jsx | 62 + .../components/emoji_picker_dropdown.jsx | 24 +- .../compose/components/language_dropdown.jsx | 35 +- .../compose/components/navigation_bar.jsx | 68 +- .../compose/components/poll_button.jsx | 12 +- .../features/compose/components/poll_form.jsx | 281 ++-- .../compose/components/privacy_dropdown.jsx | 76 +- .../compose/components/reply_indicator.jsx | 94 +- .../features/compose/components/upload.jsx | 28 +- .../compose/components/upload_button.jsx | 14 +- .../compose/components/upload_form.jsx | 19 +- .../compose/components/upload_progress.jsx | 4 +- .../containers/navigation_container.js | 36 - .../containers/poll_button_container.js | 2 +- .../compose/containers/poll_form_container.js | 53 - .../containers/reply_indicator_container.js | 36 - .../containers/sensitive_button_container.jsx | 73 - .../containers/spoiler_button_container.js | 10 +- .../containers/upload_button_container.js | 3 +- .../compose/containers/upload_container.js | 1 + .../mastodon/features/compose/index.jsx | 4 - .../features/getting_started/index.jsx | 4 +- .../features/standalone/compose/index.jsx | 32 +- .../features/ui/components/compose_panel.jsx | 6 +- .../ui/components/focal_point_modal.jsx | 2 +- .../features/ui/components/mute_modal.jsx | 1 - .../ui/components/navigation_panel.jsx | 1 - app/javascript/mastodon/locales/en.json | 41 +- app/javascript/mastodon/reducers/compose.js | 20 +- .../400-24px/bar_chart_4_bars-fill.svg | 1 + .../400-24px/bar_chart_4_bars.svg | 1 + .../material-icons/400-24px/mood-fill.svg | 1 + .../material-icons/400-24px/mood.svg | 1 + .../400-24px/photo_library-fill.svg | 1 + .../material-icons/400-24px/photo_library.svg | 1 + .../400-24px/quiet_time-fill.svg | 1 + .../material-icons/400-24px/quiet_time.svg | 1 + .../400-24px/translate-fill.svg | 1 + .../material-icons/400-24px/translate.svg | 1 + .../material-icons/400-24px/warning-fill.svg | 1 + .../material-icons/400-24px/warning.svg | 1 + app/javascript/packs/share.jsx | 4 +- app/javascript/styles/contrast/diff.scss | 37 +- .../styles/mastodon-light/diff.scss | 153 +- .../styles/mastodon-light/variables.scss | 9 +- app/javascript/styles/mastodon/_mixins.scss | 5 +- app/javascript/styles/mastodon/admin.scss | 6 + app/javascript/styles/mastodon/basics.scss | 2 +- .../styles/mastodon/components.scss | 1341 +++++++++-------- .../styles/mastodon/containers.scss | 26 +- .../styles/mastodon/emoji_picker.scss | 30 +- app/javascript/styles/mastodon/modal.scss | 2 +- app/javascript/styles/mastodon/polls.scss | 125 +- spec/system/new_statuses_spec.rb | 4 +- spec/system/share_entrypoint_spec.rb | 4 +- 71 files changed, 1574 insertions(+), 1790 deletions(-) create mode 100755 app/javascript/images/warning-stripes.svg create mode 100644 app/javascript/mastodon/features/compose/components/edit_indicator.jsx delete mode 100644 app/javascript/mastodon/features/compose/containers/navigation_container.js delete mode 100644 app/javascript/mastodon/features/compose/containers/poll_form_container.js delete mode 100644 app/javascript/mastodon/features/compose/containers/reply_indicator_container.js delete mode 100644 app/javascript/mastodon/features/compose/containers/sensitive_button_container.jsx create mode 100644 app/javascript/material-icons/400-24px/bar_chart_4_bars-fill.svg create mode 100644 app/javascript/material-icons/400-24px/bar_chart_4_bars.svg create mode 100644 app/javascript/material-icons/400-24px/mood-fill.svg create mode 100644 app/javascript/material-icons/400-24px/mood.svg create mode 100644 app/javascript/material-icons/400-24px/photo_library-fill.svg create mode 100644 app/javascript/material-icons/400-24px/photo_library.svg create mode 100644 app/javascript/material-icons/400-24px/quiet_time-fill.svg create mode 100644 app/javascript/material-icons/400-24px/quiet_time.svg create mode 100644 app/javascript/material-icons/400-24px/translate-fill.svg create mode 100644 app/javascript/material-icons/400-24px/translate.svg create mode 100644 app/javascript/material-icons/400-24px/warning-fill.svg create mode 100644 app/javascript/material-icons/400-24px/warning.svg diff --git a/.eslintrc.js b/.eslintrc.js index 1b36bcee25..ebe07f6e79 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -165,7 +165,7 @@ module.exports = defineConfig({ // }, // ], 'jsx-a11y/no-noninteractive-tabindex': 'off', - 'jsx-a11y/no-onchange': 'warn', + 'jsx-a11y/no-onchange': 'off', // recommended is full 'error' 'jsx-a11y/no-static-element-interactions': [ 'warn', diff --git a/app/javascript/images/warning-stripes.svg b/app/javascript/images/warning-stripes.svg new file mode 100755 index 0000000000..9d68acdada --- /dev/null +++ b/app/javascript/images/warning-stripes.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap index 1c37278483..dc955b7abe 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap @@ -9,7 +9,11 @@ exports[` renders emoji with custom url 1`] = ` className="emojione" src="http://example.com/emoji.png" /> - :foobar: +
+ :foobar: +
`; @@ -22,6 +26,10 @@ exports[` renders native emoji 1`] = ` className="emojione" src="/emoji/1f499.svg" /> - :foobar: +
+ :foobar: +
`; diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index f82dd9153a..4a99dd0bbf 100644 --- a/app/javascript/mastodon/components/account.jsx +++ b/app/javascript/mastodon/components/account.jsx @@ -37,10 +37,10 @@ class Account extends ImmutablePureComponent { static propTypes = { size: PropTypes.number, account: ImmutablePropTypes.record, - onFollow: PropTypes.func.isRequired, - onBlock: PropTypes.func.isRequired, - onMute: PropTypes.func.isRequired, - onMuteNotifications: PropTypes.func.isRequired, + onFollow: PropTypes.func, + onBlock: PropTypes.func, + onMute: PropTypes.func, + onMuteNotifications: PropTypes.func, intl: PropTypes.object.isRequired, hidden: PropTypes.bool, minimal: PropTypes.bool, diff --git a/app/javascript/mastodon/components/autosuggest_emoji.jsx b/app/javascript/mastodon/components/autosuggest_emoji.jsx index 28f628b4ac..adea1d9f4b 100644 --- a/app/javascript/mastodon/components/autosuggest_emoji.jsx +++ b/app/javascript/mastodon/components/autosuggest_emoji.jsx @@ -35,7 +35,7 @@ export default class AutosuggestEmoji extends PureComponent { alt={emoji.native || emoji.colons} /> - {emoji.colons} +
{emoji.colons}
); } diff --git a/app/javascript/mastodon/components/autosuggest_hashtag.tsx b/app/javascript/mastodon/components/autosuggest_hashtag.tsx index e83d493c2c..036946b0f1 100644 --- a/app/javascript/mastodon/components/autosuggest_hashtag.tsx +++ b/app/javascript/mastodon/components/autosuggest_hashtag.tsx @@ -1,5 +1,3 @@ -import { FormattedMessage } from 'react-intl'; - import { ShortNumber } from 'mastodon/components/short_number'; interface Props { @@ -16,27 +14,18 @@ interface Props { }; } -export const AutosuggestHashtag: React.FC = ({ tag }) => { - const weeklyUses = tag.history && ( - total + day.uses * 1, 0)} - /> - ); - - return ( -
-
- #{tag.name} -
- {tag.history !== undefined && ( -
- -
- )} +export const AutosuggestHashtag: React.FC = ({ tag }) => ( +
+
+ #{tag.name}
- ); -}; + + {tag.history !== undefined && ( +
+ total + day.uses * 1, 0)} + /> +
+ )} +
+); diff --git a/app/javascript/mastodon/components/autosuggest_input.jsx b/app/javascript/mastodon/components/autosuggest_input.jsx index 06cbb5d75b..f707a18e1d 100644 --- a/app/javascript/mastodon/components/autosuggest_input.jsx +++ b/app/javascript/mastodon/components/autosuggest_input.jsx @@ -5,6 +5,8 @@ import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import Overlay from 'react-overlays/Overlay'; + import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container'; import AutosuggestEmoji from './autosuggest_emoji'; @@ -195,34 +197,37 @@ export default class AutosuggestInput extends ImmutablePureComponent { return (
- - -
- {suggestions.map(this.renderSuggestion)} -
+ + {({ props }) => ( +
+
+ {suggestions.map(this.renderSuggestion)} +
+
+ )} +
); } diff --git a/app/javascript/mastodon/components/autosuggest_textarea.jsx b/app/javascript/mastodon/components/autosuggest_textarea.jsx index 4d173af59d..07fbccacc9 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.jsx +++ b/app/javascript/mastodon/components/autosuggest_textarea.jsx @@ -5,6 +5,7 @@ import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import Overlay from 'react-overlays/Overlay'; import Textarea from 'react-textarea-autosize'; import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container'; @@ -52,7 +53,6 @@ const AutosuggestTextarea = forwardRef(({ onFocus, autoFocus = true, lang, - children, }, textareaRef) => { const [suggestionsHidden, setSuggestionsHidden] = useState(true); @@ -183,40 +183,38 @@ const AutosuggestTextarea = forwardRef(({ ); }; - return [ -
-
-