From ca8d52c2a4e7d71836008f63cffd273542ab2476 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 5 Nov 2022 23:06:32 +0100 Subject: [PATCH] Change design of new list form in web UI (#19801) --- .../mastodon/components/setting_text.js | 34 ----- .../lists/components/new_list_form.js | 9 +- .../mastodon/features/lists/index.js | 8 +- .../styles/mastodon/components.scss | 122 +++++++----------- 4 files changed, 55 insertions(+), 118 deletions(-) delete mode 100644 app/javascript/mastodon/components/setting_text.js diff --git a/app/javascript/mastodon/components/setting_text.js b/app/javascript/mastodon/components/setting_text.js deleted file mode 100644 index a6dde4c0f..000000000 --- a/app/javascript/mastodon/components/setting_text.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; - -export default class SettingText extends React.PureComponent { - - static propTypes = { - settings: ImmutablePropTypes.map.isRequired, - settingKey: PropTypes.array.isRequired, - label: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, - }; - - handleChange = (e) => { - this.props.onChange(this.props.settingKey, e.target.value); - } - - render () { - const { settings, settingKey, label } = this.props; - - return ( - - ); - } - -} diff --git a/app/javascript/mastodon/features/lists/components/new_list_form.js b/app/javascript/mastodon/features/lists/components/new_list_form.js index 7faf50be8..f790ccbe6 100644 --- a/app/javascript/mastodon/features/lists/components/new_list_form.js +++ b/app/javascript/mastodon/features/lists/components/new_list_form.js @@ -1,8 +1,8 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import { changeListEditorTitle, submitListEditor } from '../../../actions/lists'; -import IconButton from '../../../components/icon_button'; +import { changeListEditorTitle, submitListEditor } from 'mastodon/actions/lists'; +import Button from 'mastodon/components/button'; import { defineMessages, injectIntl } from 'react-intl'; const messages = defineMessages({ @@ -65,10 +65,9 @@ class NewListForm extends React.PureComponent { /> - diff --git a/app/javascript/mastodon/features/lists/index.js b/app/javascript/mastodon/features/lists/index.js index 017595ba0..3a0b1373a 100644 --- a/app/javascript/mastodon/features/lists/index.js +++ b/app/javascript/mastodon/features/lists/index.js @@ -7,10 +7,10 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { fetchLists } from 'mastodon/actions/lists'; -import ColumnBackButtonSlim from 'mastodon/components/column_back_button_slim'; import LoadingIndicator from 'mastodon/components/loading_indicator'; import ScrollableList from 'mastodon/components/scrollable_list'; -import Column from 'mastodon/features/ui/components/column'; +import Column from 'mastodon/components/column'; +import ColumnHeader from 'mastodon/components/column_header'; import ColumnLink from 'mastodon/features/ui/components/column_link'; import ColumnSubheading from 'mastodon/features/ui/components/column_subheading'; import NewListForm from './components/new_list_form'; @@ -62,8 +62,8 @@ class Lists extends ImmutablePureComponent { const emptyMessage = ; return ( - - + + diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index d3046761c..57a383476 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3200,23 +3200,49 @@ $ui-header-height: 55px; .setting-text { display: block; box-sizing: border-box; - width: 100%; margin: 0; - color: $darker-text-color; - background: transparent; - padding: 7px 0; + color: $inverted-text-color; + background: $white; + padding: 7px 10px; font-family: inherit; font-size: 14px; - resize: vertical; - border: 0; - border-bottom: 2px solid $ui-primary-color; - outline: 0; + line-height: 22px; + border-radius: 4px; + border: 1px solid $white; - &:focus, - &:active { - color: $primary-text-color; - border-bottom-color: $ui-highlight-color; + &:focus { outline: 0; + border-color: lighten($ui-highlight-color, 12%); + } + + &__wrapper { + background: $white; + border: 1px solid $ui-secondary-color; + margin-bottom: 10px; + border-radius: 4px; + + .setting-text { + border: 0; + margin-bottom: 0; + border-radius: 0; + + &:focus { + border: 0; + } + } + + &__modifiers { + color: $inverted-text-color; + font-family: inherit; + font-size: 14px; + background: $white; + } + } + + &__toolbar { + display: flex; + justify-content: space-between; + margin-bottom: 20px; } @media screen and (max-width: 600px) { @@ -5503,59 +5529,6 @@ a.status-card.compact:hover { margin-bottom: 20px; } - .setting-text { - display: block; - box-sizing: border-box; - width: 100%; - margin: 0; - color: $inverted-text-color; - background: $white; - padding: 10px; - font-family: inherit; - font-size: 14px; - resize: none; - outline: 0; - border-radius: 4px; - border: 1px solid $ui-secondary-color; - min-height: 100px; - max-height: 50vh; - margin-bottom: 10px; - - &:focus { - border: 1px solid darken($ui-secondary-color, 8%); - } - - &__wrapper { - background: $white; - border: 1px solid $ui-secondary-color; - margin-bottom: 10px; - border-radius: 4px; - - .setting-text { - border: 0; - margin-bottom: 0; - border-radius: 0; - - &:focus { - border: 0; - } - } - - &__modifiers { - color: $inverted-text-color; - font-family: inherit; - font-size: 14px; - background: $white; - } - } - - &__toolbar { - display: flex; - justify-content: space-between; - margin-bottom: 20px; - } - } - .setting-text-label { display: block; color: $inverted-text-color; @@ -5564,6 +5537,14 @@ a.status-card.compact:hover { margin-bottom: 10px; } + .setting-text { + width: 100%; + resize: none; + min-height: 100px; + max-height: 50vh; + border: 0; + } + .setting-toggle { margin-top: 20px; margin-bottom: 24px; @@ -6765,9 +6746,9 @@ noscript { .column-inline-form { padding: 15px; - padding-right: 0; display: flex; justify-content: flex-start; + gap: 15px; align-items: center; background: lighten($ui-base-color, 4%); @@ -6776,17 +6757,8 @@ noscript { input { width: 100%; - - &:focus { - outline: 0; - } } } - - .icon-button { - flex: 0 0 auto; - margin: 0 10px; - } } .drawer__backdrop {