From 2d9a85db6efe0c9ccfda1420551ce3d6025bc27e Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 31 Oct 2022 13:06:17 +0100 Subject: Change design of link footer (#19562) --- app/javascript/styles/mastodon/components.scss | 75 +++++++++++++------------- 1 file changed, 37 insertions(+), 38 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index ded5634d6..f60ad6050 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3120,43 +3120,6 @@ $ui-header-height: 55px; color: $dark-text-color; overflow: auto; - &__footer { - flex: 0 0 auto; - padding: 10px; - padding-top: 20px; - z-index: 1; - font-size: 13px; - - ul { - margin-bottom: 10px; - } - - ul li { - display: inline; - } - - p { - color: $dark-text-color; - margin-bottom: 20px; - - a { - color: $dark-text-color; - text-decoration: underline; - } - } - - a { - text-decoration: none; - color: $darker-text-color; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - &__trends { flex: 0 1 auto; opacity: 1; @@ -8382,6 +8345,34 @@ noscript { } } +.link-footer { + flex: 0 0 auto; + padding: 10px; + padding-top: 20px; + z-index: 1; + font-size: 13px; + + p { + color: $dark-text-color; + margin-bottom: 20px; + + strong { + font-weight: 500; + } + + a { + color: $dark-text-color; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + } +} + .about { padding: 20px; @@ -8389,6 +8380,14 @@ noscript { border-radius: 4px; } + &__footer { + color: $dark-text-color; + text-align: center; + font-size: 15px; + line-height: 22px; + margin-top: 20px; + } + &__header { margin-bottom: 30px; @@ -8509,7 +8508,7 @@ noscript { } } - .getting-started__footer { + .link-footer { padding: 0; margin-top: 60px; text-align: center; -- cgit From 5825402ed57e42dc8093133aaf2815fd2008c185 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 4 Nov 2022 02:28:00 +0100 Subject: Fix design of verified links in web UI (#19709) --- .../mastodon/features/account/components/header.js | 4 ++-- app/javascript/styles/mastodon/components.scss | 25 +++++++++++++++++----- 2 files changed, 22 insertions(+), 7 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index e39f0158e..8d3b3c5e6 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -337,10 +337,10 @@ class Header extends ImmutablePureComponent { {fields.map((pair, i) => ( -
+
-
+
{pair.get('verified_at') && }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index f60ad6050..f1622dbb5 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -7143,12 +7143,27 @@ noscript { color: lighten($ui-highlight-color, 8%); } - dl:first-child .verified { - border-radius: 0 4px 0 0; - } + .verified { + border: 1px solid rgba($valid-value-color, 0.5); + + &:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + + &:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + + dt, + dd { + color: $valid-value-color; + } - .verified a { - color: $valid-value-color; + a { + color: $valid-value-color; + } } } } -- cgit From 1c3192df6bf48eb4c3613f2a8744c809f6eeeec0 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 4 Nov 2022 02:28:14 +0100 Subject: Fix wrong colors in the high-contrast theme (#19708) --- app/javascript/styles/contrast/diff.scss | 74 ++++++++++++++------------- app/javascript/styles/contrast/variables.scss | 4 +- 2 files changed, 41 insertions(+), 37 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss index 27eb837df..4fa1a0361 100644 --- a/app/javascript/styles/contrast/diff.scss +++ b/app/javascript/styles/contrast/diff.scss @@ -1,4 +1,3 @@ -// components.scss .compose-form { .compose-form__modifiers { .compose-form__upload { @@ -14,61 +13,66 @@ } .status__content a, -.reply-indicator__content a { - color: lighten($ui-highlight-color, 12%); +.link-footer a, +.reply-indicator__content a, +.status__content__read-more-button { text-decoration: underline; - &.mention { + &:hover, + &:focus, + &:active { text-decoration: none; } - &.mention span { - text-decoration: underline; + &.mention { + text-decoration: none; + + span { + text-decoration: underline; + } &:hover, &:focus, &:active { - text-decoration: none; + span { + text-decoration: none; + } } } +} - &:hover, - &:focus, - &:active { - text-decoration: none; - } +.status__content a { + color: $highlight-text-color; +} - &.status__content__spoiler-link { - color: $secondary-text-color; - text-decoration: none; - } +.nothing-here { + color: $darker-text-color; } -.status__content__read-more-button { - text-decoration: underline; +.compose-form__poll-wrapper .button.button-secondary, +.compose-form .autosuggest-textarea__textarea::placeholder, +.compose-form .spoiler-input__input::placeholder, +.report-dialog-modal__textarea::placeholder, +.language-dropdown__dropdown__results__item__common-name, +.compose-form .icon-button { + color: $inverted-text-color; +} - &:hover, - &:focus, - &:active { - text-decoration: none; - } +.text-icon-button.active { + color: $ui-highlight-color; } -.getting-started__footer a { - text-decoration: underline; +.language-dropdown__dropdown__results__item.active { + background: $ui-highlight-color; + font-weight: 500; +} + +.link-button:disabled { + cursor: not-allowed; &:hover, &:focus, &:active { - text-decoration: none; + text-decoration: none !important; } } - -.nothing-here { - color: $darker-text-color; -} - -.compose-form .autosuggest-textarea__textarea::placeholder, -.compose-form .spoiler-input__input::placeholder { - color: $inverted-text-color; -} diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss index 9edfd6d8d..e38d24b27 100644 --- a/app/javascript/styles/contrast/variables.scss +++ b/app/javascript/styles/contrast/variables.scss @@ -14,8 +14,8 @@ $ui-highlight-color: $classic-highlight-color !default; $darker-text-color: lighten($ui-primary-color, 20%) !default; $dark-text-color: lighten($ui-primary-color, 12%) !default; $secondary-text-color: lighten($ui-secondary-color, 6%) !default; -$highlight-text-color: lighten($ui-highlight-color, 8%) !default; -$action-button-color: #8d9ac2; +$highlight-text-color: lighten($ui-highlight-color, 10%) !default; +$action-button-color: lighten($ui-base-color, 50%); $inverted-text-color: $black !default; $lighter-text-color: darken($ui-base-color, 6%) !default; -- cgit From 20aa8881dc98264e5875fa37fc2dbf18e3f2baac Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 4 Nov 2022 02:32:26 +0100 Subject: Fix colors in light theme (#19714) --- app/javascript/styles/mastodon-light/diff.scss | 42 ++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 20e973b8b..d928a55ed 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -41,7 +41,8 @@ html { } .about__meta, -.about__section__title { +.about__section__title, +.interaction-modal { background: $white; border: 1px solid lighten($ui-base-color, 8%); } @@ -414,6 +415,7 @@ html { .icon-with-badge__badge { border-color: $white; + color: $white; } .report-modal__comment { @@ -430,10 +432,36 @@ html { border-top: 0; } -.focal-point__preview strong { +.dashboard__quick-access, +.focal-point__preview strong, +.admin-wrapper .content__heading__tabs a.selected { color: $white; } +.button.button-tertiary { + &:hover, + &:focus, + &:active { + color: $white; + } +} + +.button.button-secondary { + border-color: $darker-text-color; + color: $darker-text-color; + + &:hover, + &:focus, + &:active { + border-color: darken($darker-text-color, 8%); + color: darken($darker-text-color, 8%); + } +} + +.flash-message.warning { + color: lighten($gold-star, 16%); +} + .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, @@ -640,6 +668,16 @@ html { } } +.reply-indicator { + background: transparent; + border: 1px solid lighten($ui-base-color, 8%); +} + +.dismissable-banner { + border-left: 1px solid lighten($ui-base-color, 8%); + border-right: 1px solid lighten($ui-base-color, 8%); +} + .status__content, .reply-indicator__content { a { -- cgit From f002878c95442bae71e64d45d2502e63efb4d468 Mon Sep 17 00:00:00 2001 From: Jeong Arm Date: Sat, 5 Nov 2022 00:04:25 +0900 Subject: Make word-break: keep-all for dismissable banner (#19719) --- app/javascript/styles/mastodon/components.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index f1622dbb5..2edb10857 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -8317,6 +8317,7 @@ noscript { font-size: 14px; line-height: 18px; color: $primary-text-color; + word-break: keep-all; } &__action { -- cgit From 312d616371096235f1f317041300b8220c447613 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 5 Nov 2022 18:28:13 +0100 Subject: Change sign-in banner to reflect disabled or moved account status (#19773) --- app/helpers/application_helper.rb | 5 ++ app/javascript/mastodon/containers/mastodon.js | 2 + .../ui/components/disabled_account_banner.js | 92 ++++++++++++++++++++++ .../features/ui/components/navigation_panel.js | 5 +- app/javascript/mastodon/initial_state.js | 4 + app/javascript/styles/mastodon/components.scss | 14 ++++ app/presenters/initial_state_presenter.rb | 3 +- app/serializers/initial_state_serializer.rb | 5 ++ 8 files changed, 127 insertions(+), 3 deletions(-) create mode 100644 app/javascript/mastodon/features/ui/components/disabled_account_banner.js (limited to 'app/javascript/styles') diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 8706f5c2a..4c20f1e14 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -211,6 +211,11 @@ module ApplicationHelper state_params[:admin] = Account.find_local(Setting.site_contact_username.strip.gsub(/\A@/, '')) end + if user_signed_in? && !current_user.functional? + state_params[:disabled_account] = current_account + state_params[:moved_to_account] = current_account.moved_to_account + end + if single_user_mode? state_params[:owner] = Account.local.without_suspended.where('id > 0').first end diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index 730695c49..724719f74 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -28,6 +28,7 @@ store.dispatch(fetchCustomEmojis()); const createIdentityContext = state => ({ signedIn: !!state.meta.me, accountId: state.meta.me, + disabledAccountId: state.meta.disabled_account_id, accessToken: state.meta.access_token, permissions: state.role ? state.role.permissions : 0, }); @@ -42,6 +43,7 @@ export default class Mastodon extends React.PureComponent { identity: PropTypes.shape({ signedIn: PropTypes.bool.isRequired, accountId: PropTypes.string, + disabledAccountId: PropTypes.string, accessToken: PropTypes.string, }).isRequired, }; diff --git a/app/javascript/mastodon/features/ui/components/disabled_account_banner.js b/app/javascript/mastodon/features/ui/components/disabled_account_banner.js new file mode 100644 index 000000000..c9845d917 --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/disabled_account_banner.js @@ -0,0 +1,92 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { Link } from 'react-router-dom'; +import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; +import { disabledAccountId, movedToAccountId, domain } from 'mastodon/initial_state'; +import { openModal } from 'mastodon/actions/modal'; +import { logOut } from 'mastodon/utils/log_out'; + +const messages = defineMessages({ + logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' }, + logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' }, +}); + +const mapStateToProps = (state) => ({ + disabledAcct: state.getIn(['accounts', disabledAccountId, 'acct']), + movedToAcct: movedToAccountId ? state.getIn(['accounts', movedToAccountId, 'acct']) : undefined, +}); + +const mapDispatchToProps = (dispatch, { intl }) => ({ + onLogout () { + dispatch(openModal('CONFIRM', { + message: intl.formatMessage(messages.logoutMessage), + confirm: intl.formatMessage(messages.logoutConfirm), + closeWhenConfirm: false, + onConfirm: () => logOut(), + })); + }, +}); + +export default @injectIntl +@connect(mapStateToProps, mapDispatchToProps) +class DisabledAccountBanner extends React.PureComponent { + + static propTypes = { + disabledAcct: PropTypes.string.isRequired, + movedToAcct: PropTypes.string, + onLogout: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + handleLogOutClick = e => { + e.preventDefault(); + e.stopPropagation(); + + this.props.onLogout(); + + return false; + } + + render () { + const { disabledAcct, movedToAcct } = this.props; + + const disabledAccountLink = ( + + {disabledAcct}@{domain} + + ); + + return ( +
+

+ {movedToAcct ? ( + {movedToAcct.includes('@') ? movedToAcct : `${movedToAcct}@{domain}`}, + }} + /> + ) : ( + + )} +

+ + + + +
+ ); + } + +}; diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index 4e9e39e2f..9a9309be0 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'; import Logo from 'mastodon/components/logo'; import { timelinePreview, showTrends } from 'mastodon/initial_state'; import ColumnLink from './column_link'; +import DisabledAccountBanner from './disabled_account_banner'; import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; @@ -41,7 +42,7 @@ class NavigationPanel extends React.Component { render () { const { intl } = this.props; - const { signedIn } = this.context.identity; + const { signedIn, disabledAccountId } = this.context.identity; return (
@@ -74,7 +75,7 @@ class NavigationPanel extends React.Component { {!signedIn && (
- + { disabledAccountId ? : }
)} diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js index bb05dafdf..62fd4ac72 100644 --- a/app/javascript/mastodon/initial_state.js +++ b/app/javascript/mastodon/initial_state.js @@ -54,6 +54,7 @@ * @property {boolean} crop_images * @property {boolean=} delete_modal * @property {boolean=} disable_swiping + * @property {string=} disabled_account_id * @property {boolean} display_media * @property {string} domain * @property {boolean=} expand_spoilers @@ -61,6 +62,7 @@ * @property {string} locale * @property {string | null} mascot * @property {string=} me + * @property {string=} moved_to_account_id * @property {string=} owner * @property {boolean} profile_directory * @property {boolean} registrations_open @@ -104,6 +106,7 @@ export const boostModal = getMeta('boost_modal'); export const cropImages = getMeta('crop_images'); export const deleteModal = getMeta('delete_modal'); export const disableSwiping = getMeta('disable_swiping'); +export const disabledAccountId = getMeta('disabled_account_id'); export const displayMedia = getMeta('display_media'); export const domain = getMeta('domain'); export const expandSpoilers = getMeta('expand_spoilers'); @@ -111,6 +114,7 @@ export const forceSingleColumn = !getMeta('advanced_layout'); export const limitedFederationMode = getMeta('limited_federation_mode'); export const mascot = getMeta('mascot'); export const me = getMeta('me'); +export const movedToAccountId = getMeta('moved_to_account_id'); export const owner = getMeta('owner'); export const profile_directory = getMeta('profile_directory'); export const reduceMotion = getMeta('reduce_motion'); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 2edb10857..542a2ce1b 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -742,6 +742,20 @@ p { color: $darker-text-color; margin-bottom: 20px; + + a { + color: $secondary-text-color; + text-decoration: none; + unicode-bidi: isolate; + + &:hover { + text-decoration: underline; + + .fa { + color: lighten($dark-text-color, 7%); + } + } + } } .button { diff --git a/app/presenters/initial_state_presenter.rb b/app/presenters/initial_state_presenter.rb index ed0479211..b87cff51e 100644 --- a/app/presenters/initial_state_presenter.rb +++ b/app/presenters/initial_state_presenter.rb @@ -2,7 +2,8 @@ class InitialStatePresenter < ActiveModelSerializers::Model attributes :settings, :push_subscription, :token, - :current_account, :admin, :owner, :text, :visibility + :current_account, :admin, :owner, :text, :visibility, + :disabled_account, :moved_to_account def role current_account&.user_role diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb index 02e45a92e..89f468ab5 100644 --- a/app/serializers/initial_state_serializer.rb +++ b/app/serializers/initial_state_serializer.rb @@ -57,6 +57,9 @@ class InitialStateSerializer < ActiveModel::Serializer store[:crop_images] = Setting.crop_images end + store[:disabled_account_id] = object.disabled_account.id.to_s if object.disabled_account + store[:moved_to_account_id] = object.moved_to_account.id.to_s if object.moved_to_account + if Rails.configuration.x.single_user_mode store[:owner] = object.owner&.id&.to_s end @@ -85,6 +88,8 @@ class InitialStateSerializer < ActiveModel::Serializer store[object.current_account.id.to_s] = ActiveModelSerializers::SerializableResource.new(object.current_account, serializer: REST::AccountSerializer) if object.current_account store[object.admin.id.to_s] = ActiveModelSerializers::SerializableResource.new(object.admin, serializer: REST::AccountSerializer) if object.admin store[object.owner.id.to_s] = ActiveModelSerializers::SerializableResource.new(object.owner, serializer: REST::AccountSerializer) if object.owner + store[object.disabled_account.id.to_s] = ActiveModelSerializers::SerializableResource.new(object.disabled_account, serializer: REST::AccountSerializer) if object.disabled_account + store[object.moved_to_account.id.to_s] = ActiveModelSerializers::SerializableResource.new(object.moved_to_account, serializer: REST::AccountSerializer) if object.moved_to_account store end -- cgit From 30e786225e665f44676ed6f1c6d5200e68b3a378 Mon Sep 17 00:00:00 2001 From: eai04191 Date: Sun, 6 Nov 2022 05:03:58 +0900 Subject: Remove word-break:keep-all from Dismissable banner message (#19799) --- app/javascript/styles/mastodon/components.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 542a2ce1b..28b06b591 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -8331,7 +8331,6 @@ noscript { font-size: 14px; line-height: 18px; color: $primary-text-color; - word-break: keep-all; } &__action { -- cgit From 7c65f5269277cd8e953efb25fa77dc28441904e7 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 5 Nov 2022 21:11:24 +0100 Subject: Change design of moved account banner in web UI (#19790) --- .../account_timeline/components/moved_note.js | 36 ++++++++-------------- app/javascript/mastodon/locales/en.json | 2 +- app/javascript/styles/mastodon/components.scss | 35 +++++++++------------ 3 files changed, 27 insertions(+), 46 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/account_timeline/components/moved_note.js b/app/javascript/mastodon/features/account_timeline/components/moved_note.js index 2e32d660f..a548160a5 100644 --- a/app/javascript/mastodon/features/account_timeline/components/moved_note.js +++ b/app/javascript/mastodon/features/account_timeline/components/moved_note.js @@ -1,47 +1,35 @@ import React from 'react'; -import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import AvatarOverlay from '../../../components/avatar_overlay'; import DisplayName from '../../../components/display_name'; -import Icon from 'mastodon/components/icon'; +import Permalink from 'mastodon/components/permalink'; export default class MovedNote extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { from: ImmutablePropTypes.map.isRequired, to: ImmutablePropTypes.map.isRequired, }; - handleAccountClick = e => { - if (e.button === 0) { - e.preventDefault(); - this.context.router.history.push(`/@${this.props.to.get('acct')}`); - } - - e.stopPropagation(); - } - render () { const { from, to } = this.props; - const displayNameHtml = { __html: from.get('display_name_html') }; return ( -
-
-
- }} /> +
+
+ }} />
- -
- - +
+ +
+ + + + +
); } diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index fd504fa04..0e58a7133 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -46,7 +46,7 @@ "account.locked_info": "This account privacy status is set to locked. The owner manually reviews who can follow them.", "account.media": "Media", "account.mention": "Mention @{name}", - "account.moved_to": "{name} has moved to:", + "account.moved_to": "{name} has indicated that their new account is now:", "account.mute": "Mute @{name}", "account.mute_notifications": "Mute notifications from @{name}", "account.muted": "Muted", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 28b06b591..d3046761c 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -6733,36 +6733,29 @@ noscript { } } -.account__moved-note { - padding: 14px 10px; - padding-bottom: 16px; +.moved-account-banner { + padding: 20px; background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + display: flex; + align-items: center; + flex-direction: column; &__message { - position: relative; - margin-left: 58px; - color: $dark-text-color; + color: $darker-text-color; padding: 8px 0; padding-top: 0; padding-bottom: 4px; font-size: 14px; - - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } - } - - &__icon-wrapper { - left: -26px; - position: absolute; + font-weight: 500; + text-align: center; + margin-bottom: 16px; } - .detailed-status__display-avatar { - position: relative; + &__action { + display: flex; + justify-content: space-between; + align-items: center; + gap: 15px; } .detailed-status__display-name { -- cgit From ca8d52c2a4e7d71836008f63cffd273542ab2476 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 5 Nov 2022 23:06:32 +0100 Subject: Change design of new list form in web UI (#19801) --- app/javascript/mastodon/components/setting_text.js | 34 ------ .../features/lists/components/new_list_form.js | 9 +- app/javascript/mastodon/features/lists/index.js | 8 +- app/javascript/styles/mastodon/components.scss | 122 ++++++++------------- 4 files changed, 55 insertions(+), 118 deletions(-) delete mode 100644 app/javascript/mastodon/components/setting_text.js (limited to 'app/javascript/styles') 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 { -- cgit