From 5b0e8cc92b9ca0ab0dc24366d95f67a88c470173 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 25 Aug 2022 23:33:34 +0200 Subject: Add ability to select all accounts matching search for batch actions (#19053) --- app/javascript/styles/mastodon/tables.scss | 49 ++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index 431b8a73a..39211910f 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -190,6 +190,55 @@ a.table-action-link { } } + &__select-all { + background: $ui-base-color; + height: 47px; + align-items: center; + justify-content: center; + border: 1px solid darken($ui-base-color, 8%); + border-top: 0; + color: $secondary-text-color; + display: none; + + &.active { + display: flex; + } + + .selected, + .not-selected { + display: none; + + &.active { + display: block; + } + } + + strong { + font-weight: 700; + } + + span { + padding: 8px; + display: inline-block; + } + + button { + background: transparent; + border: 0; + font: inherit; + color: $highlight-text-color; + border-radius: 4px; + font-weight: 700; + padding: 8px; + + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 8%); + } + } + } + &__form { padding: 16px; border: 1px solid darken($ui-base-color, 8%); -- cgit From 546672e292dc3218e996048464c4c52e5d00f766 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 28 Aug 2022 04:00:39 +0200 Subject: Change "Allow trends without prior review" setting to include statuses (#17977) * Change "Allow trends without prior review" setting to include posts * Fix i18n-tasks --- app/javascript/styles/mastodon/accounts.scss | 9 ++++++++- app/javascript/styles/mastodon/forms.scss | 3 ++- app/models/account.rb | 4 ++++ app/views/admin/settings/edit.html.haml | 2 +- config/i18n-tasks.yml | 2 +- config/initializers/simple_form.rb | 5 ++++- config/locales/en.yml | 4 ++-- config/locales/simple_form.en.yml | 1 + 8 files changed, 23 insertions(+), 7 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 54b65bfc8..c007eb4b5 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -202,7 +202,8 @@ } .account-role, -.simple_form .recommended { +.simple_form .recommended, +.simple_form .not_recommended { display: inline-block; padding: 4px 6px; cursor: default; @@ -227,6 +228,12 @@ } } +.simple_form .not_recommended { + color: lighten($error-red, 12%); + background-color: rgba(lighten($error-red, 12%), 0.1); + border-color: rgba(lighten($error-red, 12%), 0.5); +} + .account__header__fields { max-width: 100vw; padding: 0; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 990903859..a6419821f 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -102,7 +102,8 @@ code { } } - .recommended { + .recommended, + .not_recommended { position: absolute; margin: 0 4px; margin-top: -2px; diff --git a/app/models/account.rb b/app/models/account.rb index d25afeb89..1be7b4d12 100644 --- a/app/models/account.rb +++ b/app/models/account.rb @@ -258,6 +258,10 @@ class Account < ApplicationRecord update!(memorial: true) end + def trendable + boolean_with_default('trendable', Setting.trendable_by_default) + end + def sign? true end diff --git a/app/views/admin/settings/edit.html.haml b/app/views/admin/settings/edit.html.haml index d7896bbc0..64687b7a6 100644 --- a/app/views/admin/settings/edit.html.haml +++ b/app/views/admin/settings/edit.html.haml @@ -81,7 +81,7 @@ = f.input :trends, as: :boolean, wrapper: :with_label, label: t('admin.settings.trends.title'), hint: t('admin.settings.trends.desc_html') .fields-group - = f.input :trendable_by_default, as: :boolean, wrapper: :with_label, label: t('admin.settings.trendable_by_default.title'), hint: t('admin.settings.trendable_by_default.desc_html') + = f.input :trendable_by_default, as: :boolean, wrapper: :with_label, label: t('admin.settings.trendable_by_default.title'), hint: t('admin.settings.trendable_by_default.desc_html'), recommended: :not_recommended .fields-group = f.input :noindex, as: :boolean, wrapper: :with_label, label: t('admin.settings.default_noindex.title'), hint: t('admin.settings.default_noindex.desc_html') diff --git a/config/i18n-tasks.yml b/config/i18n-tasks.yml index 42a7afb33..1bebae5e9 100644 --- a/config/i18n-tasks.yml +++ b/config/i18n-tasks.yml @@ -51,7 +51,7 @@ ignore_unused: - 'activerecord.errors.*' - '{devise,pagination,doorkeeper}.*' - '{date,datetime,time,number}.*' - - 'simple_form.{yes,no,recommended}' + - 'simple_form.{yes,no,recommended,not_recommended}' - 'simple_form.{placeholders,hints,labels}.*' - 'simple_form.{error_notification,required}.:' - 'errors.messages.*' diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb index 3a2097d2f..92cffc5a2 100644 --- a/config/initializers/simple_form.rb +++ b/config/initializers/simple_form.rb @@ -11,7 +11,10 @@ end module RecommendedComponent def recommended(_wrapper_options = nil) return unless options[:recommended] - options[:label_text] = ->(raw_label_text, _required_label_text, _label_present) { safe_join([raw_label_text, ' ', content_tag(:span, I18n.t('simple_form.recommended'), class: 'recommended')]) } + + key = options[:recommended].is_a?(Symbol) ? options[:recommended] : :recommended + options[:label_text] = ->(raw_label_text, _required_label_text, _label_present) { safe_join([raw_label_text, ' ', content_tag(:span, I18n.t(key, scope: 'simple_form'), class: key)]) } + nil end end diff --git a/config/locales/en.yml b/config/locales/en.yml index 0b721c163..9f047f523 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -808,8 +808,8 @@ en: title: Allow unauthenticated access to public timeline title: Site settings trendable_by_default: - desc_html: Affects hashtags that have not been previously disallowed - title: Allow hashtags to trend without prior review + desc_html: Specific trending content can still be explicitly disallowed + title: Allow trends without prior review trends: desc_html: Publicly display previously reviewed content that is currently trending title: Trends diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml index 28f78d500..ddc83e896 100644 --- a/config/locales/simple_form.en.yml +++ b/config/locales/simple_form.en.yml @@ -253,6 +253,7 @@ en: events: Enabled events url: Endpoint URL 'no': 'No' + not_recommended: Not recommended recommended: Recommended required: mark: "*" -- cgit From 43b5d5e38d2b8ad8f1d1ad0911c3c1718159c912 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 29 Sep 2022 04:39:33 +0200 Subject: Add logged-out access to the web UI (#18961) --- app/controllers/home_controller.rb | 18 ++--- app/javascript/mastodon/actions/accounts.js | 6 +- app/javascript/mastodon/actions/markers.js | 10 +-- app/javascript/mastodon/components/logo.js | 4 +- app/javascript/mastodon/containers/mastodon.js | 2 +- .../mastodon/features/account/components/header.js | 30 +++++--- .../mastodon/features/community_timeline/index.js | 6 ++ .../mastodon/features/directory/index.js | 6 ++ app/javascript/mastodon/features/explore/index.js | 6 ++ app/javascript/mastodon/features/explore/links.js | 11 +++ .../mastodon/features/explore/results.js | 18 ++++- .../mastodon/features/explore/suggestions.js | 11 +++ app/javascript/mastodon/features/explore/tags.js | 11 +++ .../mastodon/features/hashtag_timeline/index.js | 18 ++++- .../mastodon/features/public_timeline/index.js | 6 ++ app/javascript/mastodon/features/status/index.js | 24 ++++++- .../features/ui/components/columns_area.js | 4 +- .../features/ui/components/compose_panel.js | 22 +++++- .../features/ui/components/document_title.js | 41 ----------- .../mastodon/features/ui/components/link_footer.js | 46 +++++++++--- .../features/ui/components/navigation_panel.js | 83 ++++++++++++++++------ .../features/ui/components/sign_in_banner.js | 11 +++ app/javascript/mastodon/features/ui/index.js | 43 ++++++++--- app/javascript/mastodon/initial_state.js | 2 + app/javascript/styles/mastodon/_mixins.scss | 1 + app/javascript/styles/mastodon/components.scss | 56 +++++++++++++-- app/lib/permalink_redirector.rb | 4 -- app/serializers/initial_state_serializer.rb | 11 ++- app/views/home/index.html.haml | 12 ++-- package.json | 1 + spec/controllers/home_controller_spec.rb | 20 ++---- spec/lib/permalink_redirector_spec.rb | 4 +- yarn.lock | 20 ++++++ 33 files changed, 423 insertions(+), 145 deletions(-) delete mode 100644 app/javascript/mastodon/features/ui/components/document_title.js create mode 100644 app/javascript/mastodon/features/ui/components/sign_in_banner.js (limited to 'app/javascript/styles') diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb index 7e443eb9e..29478209d 100644 --- a/app/controllers/home_controller.rb +++ b/app/controllers/home_controller.rb @@ -2,8 +2,8 @@ class HomeController < ApplicationController before_action :redirect_unauthenticated_to_permalinks! - before_action :authenticate_user! before_action :set_referrer_policy_header + before_action :set_instance_presenter def index @body_classes = 'app-body' @@ -14,20 +14,16 @@ class HomeController < ApplicationController def redirect_unauthenticated_to_permalinks! return if user_signed_in? - redirect_to(PermalinkRedirector.new(request.path).redirect_path || default_redirect_path) - end + redirect_path = PermalinkRedirector.new(request.path).redirect_path - def default_redirect_path - if request.path.start_with?('/web') || whitelist_mode? - new_user_session_path - elsif single_user_mode? - short_account_path(Account.local.without_suspended.where('id > 0').first) - else - about_path - end + redirect_to(redirect_path) if redirect_path.present? end def set_referrer_policy_header response.headers['Referrer-Policy'] = 'origin' end + + def set_instance_presenter + @instance_presenter = InstancePresenter.new + end end diff --git a/app/javascript/mastodon/actions/accounts.js b/app/javascript/mastodon/actions/accounts.js index eedf61dc9..f61f06e40 100644 --- a/app/javascript/mastodon/actions/accounts.js +++ b/app/javascript/mastodon/actions/accounts.js @@ -536,10 +536,12 @@ export function expandFollowingFail(id, error) { export function fetchRelationships(accountIds) { return (dispatch, getState) => { - const loadedRelationships = getState().get('relationships'); + const state = getState(); + const loadedRelationships = state.get('relationships'); const newAccountIds = accountIds.filter(id => loadedRelationships.get(id, null) === null); + const signedIn = !!state.getIn(['meta', 'me']); - if (newAccountIds.length === 0) { + if (!signedIn || newAccountIds.length === 0) { return; } diff --git a/app/javascript/mastodon/actions/markers.js b/app/javascript/mastodon/actions/markers.js index 16a3df8f6..b7f406cb8 100644 --- a/app/javascript/mastodon/actions/markers.js +++ b/app/javascript/mastodon/actions/markers.js @@ -1,6 +1,7 @@ import api from '../api'; import { debounce } from 'lodash'; import compareId from '../compare_id'; +import { List as ImmutableList } from 'immutable'; export const MARKERS_FETCH_REQUEST = 'MARKERS_FETCH_REQUEST'; export const MARKERS_FETCH_SUCCESS = 'MARKERS_FETCH_SUCCESS'; @@ -11,7 +12,7 @@ export const synchronouslySubmitMarkers = () => (dispatch, getState) => { const accessToken = getState().getIn(['meta', 'access_token'], ''); const params = _buildParams(getState()); - if (Object.keys(params).length === 0) { + if (Object.keys(params).length === 0 || accessToken === '') { return; } @@ -63,7 +64,7 @@ export const synchronouslySubmitMarkers = () => (dispatch, getState) => { const _buildParams = (state) => { const params = {}; - const lastHomeId = state.getIn(['timelines', 'home', 'items']).find(item => item !== null); + const lastHomeId = state.getIn(['timelines', 'home', 'items'], ImmutableList()).find(item => item !== null); const lastNotificationId = state.getIn(['notifications', 'lastReadId']); if (lastHomeId && compareId(lastHomeId, state.getIn(['markers', 'home'])) > 0) { @@ -82,9 +83,10 @@ const _buildParams = (state) => { }; const debouncedSubmitMarkers = debounce((dispatch, getState) => { - const params = _buildParams(getState()); + const accessToken = getState().getIn(['meta', 'access_token'], ''); + const params = _buildParams(getState()); - if (Object.keys(params).length === 0) { + if (Object.keys(params).length === 0 || accessToken === '') { return; } diff --git a/app/javascript/mastodon/components/logo.js b/app/javascript/mastodon/components/logo.js index d1c7f08a9..3570b3644 100644 --- a/app/javascript/mastodon/components/logo.js +++ b/app/javascript/mastodon/components/logo.js @@ -1,8 +1,8 @@ import React from 'react'; const Logo = () => ( - - + + ); diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index f4bef4686..08241522c 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -26,7 +26,7 @@ const createIdentityContext = state => ({ signedIn: !!state.meta.me, accountId: state.meta.me, accessToken: state.meta.access_token, - permissions: state.role.permissions, + permissions: state.role ? state.role.permissions : 0, }); export default class Mastodon extends React.PureComponent { diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index 8f2753c35..e407a0d55 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import Button from 'mastodon/components/button'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { autoPlayGif, me } from 'mastodon/initial_state'; +import { autoPlayGif, me, title, domain } from 'mastodon/initial_state'; import classNames from 'classnames'; import Icon from 'mastodon/components/icon'; import IconButton from 'mastodon/components/icon_button'; @@ -15,6 +15,7 @@ import { NavLink } from 'react-router-dom'; import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container'; import AccountNoteContainer from '../containers/account_note_container'; import { PERMISSION_MANAGE_USERS } from 'mastodon/permissions'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, @@ -54,6 +55,14 @@ const messages = defineMessages({ languages: { id: 'account.languages', defaultMessage: 'Change subscribed languages' }, }); +const titleFromAccount = account => { + const displayName = account.get('display_name'); + const acct = account.get('acct') === account.get('username') ? `${account.get('username')}@${domain}` : account.get('acct'); + const prefix = displayName.trim().length === 0 ? account.get('username') : displayName; + + return `${prefix} (@${acct})`; +}; + const dateFormatOptions = { month: 'short', day: 'numeric', @@ -132,6 +141,7 @@ class Header extends ImmutablePureComponent { render () { const { account, hidden, intl, domain } = this.props; + const { signedIn } = this.context.identity; if (!account) { return null; @@ -162,12 +172,12 @@ class Header extends ImmutablePureComponent { } if (me !== account.get('id')) { - if (!account.get('relationship')) { // Wait until the relationship is loaded + if (signedIn && !account.get('relationship')) { // Wait until the relationship is loaded actionBtn = ''; } else if (account.getIn(['relationship', 'requested'])) { actionBtn = ; } else if (!account.getIn(['relationship', 'blocking'])) { - actionBtn = ; + actionBtn = ; } else if (account.getIn(['relationship', 'blocking'])) { actionBtn = ; } @@ -183,7 +193,7 @@ class Header extends ImmutablePureComponent { lockedIcon = ; } - if (account.get('id') !== me) { + if (signedIn && account.get('id') !== me) { menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.props.onMention }); menu.push({ text: intl.formatMessage(messages.direct, { name: account.get('username') }), action: this.props.onDirect }); menu.push(null); @@ -206,7 +216,7 @@ class Header extends ImmutablePureComponent { menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' }); menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' }); menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' }); - } else { + } else if (signedIn) { if (account.getIn(['relationship', 'following'])) { if (!account.getIn(['relationship', 'muting'])) { if (account.getIn(['relationship', 'showing_reblogs'])) { @@ -239,7 +249,7 @@ class Header extends ImmutablePureComponent { menu.push({ text: intl.formatMessage(messages.report, { name: account.get('username') }), action: this.props.onReport }); } - if (account.get('acct') !== account.get('username')) { + if (signedIn && account.get('acct') !== account.get('username')) { const domain = account.get('acct').split('@')[1]; menu.push(null); @@ -298,7 +308,7 @@ class Header extends ImmutablePureComponent { )} - + )} @@ -327,7 +337,7 @@ class Header extends ImmutablePureComponent { )} - {account.get('id') !== me && } + {(account.get('id') !== me && signedIn) && } {account.get('note').length > 0 && account.get('note') !== '

' &&
} @@ -359,6 +369,10 @@ class Header extends ImmutablePureComponent {
)} + + + {titleFromAccount(account)} - {title} + ); } diff --git a/app/javascript/mastodon/features/community_timeline/index.js b/app/javascript/mastodon/features/community_timeline/index.js index 30f776048..f9d50e64c 100644 --- a/app/javascript/mastodon/features/community_timeline/index.js +++ b/app/javascript/mastodon/features/community_timeline/index.js @@ -9,6 +9,8 @@ import { expandCommunityTimeline } from '../../actions/timelines'; import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import ColumnSettingsContainer from './containers/column_settings_container'; import { connectCommunityStream } from '../../actions/streaming'; +import { Helmet } from 'react-helmet'; +import { title } from 'mastodon/initial_state'; const messages = defineMessages({ title: { id: 'column.community', defaultMessage: 'Local timeline' }, @@ -128,6 +130,10 @@ class CommunityTimeline extends React.PureComponent { emptyMessage={} bindToDocument={!multiColumn} /> + + + {intl.formatMessage(messages.title)} - {title} + ); } diff --git a/app/javascript/mastodon/features/directory/index.js b/app/javascript/mastodon/features/directory/index.js index 94d7d1a9c..36f46c510 100644 --- a/app/javascript/mastodon/features/directory/index.js +++ b/app/javascript/mastodon/features/directory/index.js @@ -13,6 +13,8 @@ import RadioButton from 'mastodon/components/radio_button'; import LoadMore from 'mastodon/components/load_more'; import ScrollContainer from 'mastodon/containers/scroll_container'; import LoadingIndicator from 'mastodon/components/loading_indicator'; +import { title } from 'mastodon/initial_state'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ title: { id: 'column.directory', defaultMessage: 'Browse profiles' }, @@ -165,6 +167,10 @@ class Directory extends React.PureComponent { /> {multiColumn && !pinned ? {scrollableArea} : scrollableArea} + + + {intl.formatMessage(messages.title)} - {title} + ); } diff --git a/app/javascript/mastodon/features/explore/index.js b/app/javascript/mastodon/features/explore/index.js index 8082f2d99..e1d1eb563 100644 --- a/app/javascript/mastodon/features/explore/index.js +++ b/app/javascript/mastodon/features/explore/index.js @@ -11,6 +11,8 @@ import Statuses from './statuses'; import Suggestions from './suggestions'; import Search from 'mastodon/features/compose/containers/search_container'; import SearchResults from './results'; +import { Helmet } from 'react-helmet'; +import { title } from 'mastodon/initial_state'; const messages = defineMessages({ title: { id: 'explore.title', defaultMessage: 'Explore' }, @@ -81,6 +83,10 @@ class Explore extends React.PureComponent { + + + {intl.formatMessage(messages.title)} - {title} + )} diff --git a/app/javascript/mastodon/features/explore/links.js b/app/javascript/mastodon/features/explore/links.js index 6649fb6e4..d3aaa9cdd 100644 --- a/app/javascript/mastodon/features/explore/links.js +++ b/app/javascript/mastodon/features/explore/links.js @@ -5,6 +5,7 @@ import Story from './components/story'; import LoadingIndicator from 'mastodon/components/loading_indicator'; import { connect } from 'react-redux'; import { fetchTrendingLinks } from 'mastodon/actions/trends'; +import { FormattedMessage } from 'react-intl'; const mapStateToProps = state => ({ links: state.getIn(['trends', 'links', 'items']), @@ -28,6 +29,16 @@ class Links extends React.PureComponent { render () { const { isLoading, links } = this.props; + if (!isLoading && links.isEmpty()) { + return ( +
+
+ +
+
+ ); + } + return (
{isLoading ? () : links.map(link => ( diff --git a/app/javascript/mastodon/features/explore/results.js b/app/javascript/mastodon/features/explore/results.js index 1286020f5..0dc108918 100644 --- a/app/javascript/mastodon/features/explore/results.js +++ b/app/javascript/mastodon/features/explore/results.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { FormattedMessage } from 'react-intl'; +import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import { expandSearch } from 'mastodon/actions/search'; import Account from 'mastodon/containers/account_container'; @@ -10,10 +10,17 @@ import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag'; import { List as ImmutableList } from 'immutable'; import LoadMore from 'mastodon/components/load_more'; import LoadingIndicator from 'mastodon/components/loading_indicator'; +import { title } from 'mastodon/initial_state'; +import { Helmet } from 'react-helmet'; + +const messages = defineMessages({ + title: { id: 'search_results.title', defaultMessage: 'Search for {q}' }, +}); const mapStateToProps = state => ({ isLoading: state.getIn(['search', 'isLoading']), results: state.getIn(['search', 'results']), + q: state.getIn(['search', 'searchTerm']), }); const appendLoadMore = (id, list, onLoadMore) => { @@ -37,6 +44,7 @@ const renderStatuses = (results, onLoadMore) => appendLoadMore('statuses', resul )), onLoadMore); export default @connect(mapStateToProps) +@injectIntl class Results extends React.PureComponent { static propTypes = { @@ -44,6 +52,8 @@ class Results extends React.PureComponent { isLoading: PropTypes.bool, multiColumn: PropTypes.bool, dispatch: PropTypes.func.isRequired, + q: PropTypes.string, + intl: PropTypes.object, }; state = { @@ -64,7 +74,7 @@ class Results extends React.PureComponent { } render () { - const { isLoading, results } = this.props; + const { intl, isLoading, q, results } = this.props; const { type } = this.state; let filteredResults = ImmutableList(); @@ -106,6 +116,10 @@ class Results extends React.PureComponent {
{isLoading ? : filteredResults}
+ + + {intl.formatMessage(messages.title, { q })} - {title} + ); } diff --git a/app/javascript/mastodon/features/explore/suggestions.js b/app/javascript/mastodon/features/explore/suggestions.js index 0c6a7ef8a..e6ad09974 100644 --- a/app/javascript/mastodon/features/explore/suggestions.js +++ b/app/javascript/mastodon/features/explore/suggestions.js @@ -5,6 +5,7 @@ import AccountCard from 'mastodon/features/directory/components/account_card'; import LoadingIndicator from 'mastodon/components/loading_indicator'; import { connect } from 'react-redux'; import { fetchSuggestions } from 'mastodon/actions/suggestions'; +import { FormattedMessage } from 'react-intl'; const mapStateToProps = state => ({ suggestions: state.getIn(['suggestions', 'items']), @@ -28,6 +29,16 @@ class Suggestions extends React.PureComponent { render () { const { isLoading, suggestions } = this.props; + if (!isLoading && suggestions.isEmpty()) { + return ( +
+
+ +
+
+ ); + } + return (
{isLoading ? : suggestions.map(suggestion => ( diff --git a/app/javascript/mastodon/features/explore/tags.js b/app/javascript/mastodon/features/explore/tags.js index c0ad9fc6e..6cd3a6fb1 100644 --- a/app/javascript/mastodon/features/explore/tags.js +++ b/app/javascript/mastodon/features/explore/tags.js @@ -5,6 +5,7 @@ import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag'; import LoadingIndicator from 'mastodon/components/loading_indicator'; import { connect } from 'react-redux'; import { fetchTrendingHashtags } from 'mastodon/actions/trends'; +import { FormattedMessage } from 'react-intl'; const mapStateToProps = state => ({ hashtags: state.getIn(['trends', 'tags', 'items']), @@ -28,6 +29,16 @@ class Tags extends React.PureComponent { render () { const { isLoading, hashtags } = this.props; + if (!isLoading && hashtags.isEmpty()) { + return ( +
+
+ +
+
+ ); + } + return (
{isLoading ? () : hashtags.map(hashtag => ( diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.js b/app/javascript/mastodon/features/hashtag_timeline/index.js index dc8a61640..7069e0341 100644 --- a/app/javascript/mastodon/features/hashtag_timeline/index.js +++ b/app/javascript/mastodon/features/hashtag_timeline/index.js @@ -14,6 +14,8 @@ import { isEqual } from 'lodash'; import { fetchHashtag, followHashtag, unfollowHashtag } from 'mastodon/actions/tags'; import Icon from 'mastodon/components/icon'; import classNames from 'classnames'; +import { title } from 'mastodon/initial_state'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' }, @@ -31,6 +33,10 @@ class HashtagTimeline extends React.PureComponent { disconnects = []; + static contextTypes = { + identity: PropTypes.object, + }; + static propTypes = { params: PropTypes.object.isRequired, columnId: PropTypes.string, @@ -158,6 +164,11 @@ class HashtagTimeline extends React.PureComponent { handleFollow = () => { const { dispatch, params, tag } = this.props; const { id } = params; + const { signedIn } = this.context.identity; + + if (!signedIn) { + return; + } if (tag.get('following')) { dispatch(unfollowHashtag(id)); @@ -170,6 +181,7 @@ class HashtagTimeline extends React.PureComponent { const { hasUnread, columnId, multiColumn, tag, intl } = this.props; const { id, local } = this.props.params; const pinned = !!columnId; + const { signedIn } = this.context.identity; let followButton; @@ -177,7 +189,7 @@ class HashtagTimeline extends React.PureComponent { const following = tag.get('following'); followButton = ( - ); @@ -208,6 +220,10 @@ class HashtagTimeline extends React.PureComponent { emptyMessage={} bindToDocument={!multiColumn} /> + + + {`#${id}`} - {title} + ); } diff --git a/app/javascript/mastodon/features/public_timeline/index.js b/app/javascript/mastodon/features/public_timeline/index.js index b1d5518af..2f926678c 100644 --- a/app/javascript/mastodon/features/public_timeline/index.js +++ b/app/javascript/mastodon/features/public_timeline/index.js @@ -9,6 +9,8 @@ import { expandPublicTimeline } from '../../actions/timelines'; import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import ColumnSettingsContainer from './containers/column_settings_container'; import { connectPublicStream } from '../../actions/streaming'; +import { Helmet } from 'react-helmet'; +import { title } from 'mastodon/initial_state'; const messages = defineMessages({ title: { id: 'column.public', defaultMessage: 'Federated timeline' }, @@ -131,6 +133,10 @@ class PublicTimeline extends React.PureComponent { emptyMessage={} bindToDocument={!multiColumn} /> + + + {intl.formatMessage(messages.title)} - {title} + ); } diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js index 5ff7e060e..748dc7a92 100644 --- a/app/javascript/mastodon/features/status/index.js +++ b/app/javascript/mastodon/features/status/index.js @@ -56,10 +56,11 @@ import { openModal } from '../../actions/modal'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { HotKeys } from 'react-hotkeys'; -import { boostModal, deleteModal } from '../../initial_state'; +import { boostModal, deleteModal, title } from '../../initial_state'; import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen'; import { textForScreenReader, defaultMediaVisibility } from '../../components/status'; import Icon from 'mastodon/components/icon'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, @@ -156,6 +157,23 @@ const makeMapStateToProps = () => { return mapStateToProps; }; +const truncate = (str, num) => { + if (str.length > num) { + return str.slice(0, num) + '…'; + } else { + return str; + } +}; + +const titleFromStatus = status => { + const displayName = status.getIn(['account', 'display_name']); + const username = status.getIn(['account', 'username']); + const prefix = displayName.trim().length === 0 ? username : displayName; + const text = status.get('search_index'); + + return `${prefix}: "${truncate(text, 30)}"`; +}; + export default @injectIntl @connect(makeMapStateToProps) class Status extends ImmutablePureComponent { @@ -605,6 +623,10 @@ class Status extends ImmutablePureComponent { {descendants}
+ + + {titleFromStatus(status)} - {title} + ); } diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 68017a5f1..83e10e003 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -60,6 +60,7 @@ class ColumnsArea extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object.isRequired, + identity: PropTypes.object.isRequired, }; static propTypes = { @@ -212,11 +213,12 @@ class ColumnsArea extends ImmutablePureComponent { render () { const { columns, children, singleColumn, isModalOpen, intl } = this.props; const { shouldAnimate, renderComposePanel } = this.state; + const { signedIn } = this.context.identity; const columnIndex = getIndex(this.context.router.history.location.pathname); if (singleColumn) { - const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : ; + const floatingActionButton = (!signedIn || shouldHideFAB(this.context.router.history.location.pathname)) ? null : ; const content = columnIndex !== -1 ? ( diff --git a/app/javascript/mastodon/features/ui/components/compose_panel.js b/app/javascript/mastodon/features/ui/components/compose_panel.js index 3d0c48c7a..1c128188f 100644 --- a/app/javascript/mastodon/features/ui/components/compose_panel.js +++ b/app/javascript/mastodon/features/ui/components/compose_panel.js @@ -10,6 +10,10 @@ import { changeComposing } from 'mastodon/actions/compose'; export default @connect() class ComposePanel extends React.PureComponent { + static contextTypes = { + identity: PropTypes.object.isRequired, + }; + static propTypes = { dispatch: PropTypes.func.isRequired, }; @@ -23,11 +27,25 @@ class ComposePanel extends React.PureComponent { } render() { + const { signedIn } = this.context.identity; + return (
- - + + {!signedIn && ( + +
+ + )} + + {signedIn && ( + + + + + )} +
); diff --git a/app/javascript/mastodon/features/ui/components/document_title.js b/app/javascript/mastodon/features/ui/components/document_title.js deleted file mode 100644 index cd081b20c..000000000 --- a/app/javascript/mastodon/features/ui/components/document_title.js +++ /dev/null @@ -1,41 +0,0 @@ -import { PureComponent } from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import { title } from 'mastodon/initial_state'; - -const mapStateToProps = state => ({ - unread: state.getIn(['missed_updates', 'unread']), -}); - -export default @connect(mapStateToProps) -class DocumentTitle extends PureComponent { - - static propTypes = { - unread: PropTypes.number.isRequired, - }; - - componentDidMount () { - this._sideEffects(); - } - - componentDidUpdate() { - this._sideEffects(); - } - - _sideEffects () { - const { unread } = this.props; - - if (unread > 99) { - document.title = `(*) ${title}`; - } else if (unread > 0) { - document.title = `(${unread}) ${title}`; - } else { - document.title = title; - } - } - - render () { - return null; - } - -} diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js index bbb9b122a..95cd6cf8e 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.js +++ b/app/javascript/mastodon/features/ui/components/link_footer.js @@ -49,20 +49,46 @@ class LinkFooter extends React.PureComponent { render () { const { withHotkeys } = this.props; + const { signedIn, permissions } = this.context.identity; + const items = []; + + if ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS) { + items.push(); + } + + if (withHotkeys) { + items.push(); + } + + if (signedIn) { + items.push(); + } + + if (!limitedFederationMode) { + items.push(); + } + + if (profileDirectory) { + items.push(); + } + + items.push(); + items.push(); + + if (signedIn) { + items.push(); + } + + items.push(); + + if (signedIn) { + items.push(); + } return (
    - {((this.context.identity.permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS) &&
  • ·
    • } - {withHotkeys &&
  • ·
    • } -
  • ·
    • - {!limitedFederationMode &&
  • ·
    • } - {profileDirectory &&
  • ·
    • } -
  • ·
    • -
  • ·
    • -
  • ·
    • -
  • ·
    • -
    • +
  • {items.reduce((prev, curr) => [prev, ' · ', curr])}

diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index fe4ed5d77..00ae04761 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -1,5 +1,6 @@ import React from 'react'; -import { NavLink, withRouter } from 'react-router-dom'; +import PropTypes from 'prop-types'; +import { NavLink, Link } from 'react-router-dom'; import { FormattedMessage } from 'react-intl'; import Icon from 'mastodon/components/icon'; import { showTrends } from 'mastodon/initial_state'; @@ -7,30 +8,68 @@ import NotificationsCounterIcon from './notifications_counter_icon'; import FollowRequestsNavLink from './follow_requests_nav_link'; import ListPanel from './list_panel'; import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container'; +import Logo from 'mastodon/components/logo'; +import SignInBanner from './sign_in_banner'; -const NavigationPanel = () => ( -

- - - - - - - - - - +export default class NavigationPanel extends React.Component { - + static contextTypes = { + router: PropTypes.object.isRequired, + identity: PropTypes.object.isRequired, + }; -
+ render () { + const { signedIn } = this.context.identity; - - + return ( +
+ - {showTrends &&
} - {showTrends && } -
-); +
-export default withRouter(NavigationPanel); + {signedIn && ( + + + + + + )} + + + + + + {!signedIn && ( + +
+ + + )} + + {signedIn && ( + + + + + + + + +
+ + + + + )} + + {showTrends && ( + +
+ + + )} +
+ ); + } + +} diff --git a/app/javascript/mastodon/features/ui/components/sign_in_banner.js b/app/javascript/mastodon/features/ui/components/sign_in_banner.js new file mode 100644 index 000000000..c8403a8ad --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/sign_in_banner.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +const SignInBanner = () => ( +
+

+ +
+); + +export default SignInBanner; diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 9a901f12a..5825db1e4 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -20,7 +20,6 @@ import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodo import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers'; import UploadArea from './components/upload_area'; import ColumnsAreaContainer from './containers/columns_area_container'; -import DocumentTitle from './components/document_title'; import PictureInPicture from 'mastodon/features/picture_in_picture'; import { Compose, @@ -53,8 +52,9 @@ import { Explore, FollowRecommendations, } from './util/async-components'; -import { me } from '../../initial_state'; +import { me, title } from '../../initial_state'; import { closeOnboarding, INTRODUCTION_VERSION } from 'mastodon/actions/onboarding'; +import { Helmet } from 'react-helmet'; // Dummy import, to make sure that ends up in the application bundle. // Without this it ends up in ~8 very commonly used bundles. @@ -110,6 +110,10 @@ const keyMap = { class SwitchingColumnsArea extends React.PureComponent { + static contextTypes = { + identity: PropTypes.object, + }; + static propTypes = { children: PropTypes.node, location: PropTypes.object, @@ -145,12 +149,25 @@ class SwitchingColumnsArea extends React.PureComponent { render () { const { children, mobile } = this.props; - const redirect = mobile ? : ; + const { signedIn } = this.context.identity; + + let redirect; + + if (signedIn) { + if (mobile) { + redirect = ; + } else { + redirect = ; + } + } else { + redirect = ; + } return ( {redirect} + @@ -208,6 +225,7 @@ class UI extends React.PureComponent { static contextTypes = { router: PropTypes.object.isRequired, + identity: PropTypes.object.isRequired, }; static propTypes = { @@ -343,6 +361,8 @@ class UI extends React.PureComponent { } componentDidMount () { + const { signedIn } = this.context.identity; + window.addEventListener('focus', this.handleWindowFocus, false); window.addEventListener('blur', this.handleWindowBlur, false); window.addEventListener('beforeunload', this.handleBeforeUnload, false); @@ -359,16 +379,18 @@ class UI extends React.PureComponent { } // On first launch, redirect to the follow recommendations page - if (this.props.firstLaunch) { + if (signedIn && this.props.firstLaunch) { this.context.router.history.replace('/start'); this.props.dispatch(closeOnboarding()); } - this.props.dispatch(fetchMarkers()); - this.props.dispatch(expandHomeTimeline()); - this.props.dispatch(expandNotifications()); + if (signedIn) { + this.props.dispatch(fetchMarkers()); + this.props.dispatch(expandHomeTimeline()); + this.props.dispatch(expandNotifications()); - setTimeout(() => this.props.dispatch(fetchRules()), 3000); + setTimeout(() => this.props.dispatch(fetchRules()), 3000); + } this.hotkeys.__mousetrap__.stopCallback = (e, element) => { return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName); @@ -546,7 +568,10 @@ class UI extends React.PureComponent { - + + + {title} +
); diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js index 709975270..9cc75b6cb 100644 --- a/app/javascript/mastodon/initial_state.js +++ b/app/javascript/mastodon/initial_state.js @@ -3,6 +3,7 @@ const initialState = element && JSON.parse(element.textContent); const getMeta = (prop) => initialState && initialState.meta && initialState.meta[prop]; +export const domain = getMeta('domain'); export const reduceMotion = getMeta('reduce_motion'); export const autoPlayGif = getMeta('auto_play_gif'); export const displayMedia = getMeta('display_media'); @@ -26,5 +27,6 @@ export const title = getMeta('title'); export const cropImages = getMeta('crop_images'); export const disableSwiping = getMeta('disable_swiping'); export const languages = initialState && initialState.languages; +export const server = initialState && initialState.server; export default initialState; diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss index 68cad0fde..dcfab6bd0 100644 --- a/app/javascript/styles/mastodon/_mixins.scss +++ b/app/javascript/styles/mastodon/_mixins.scss @@ -20,6 +20,7 @@ font-family: inherit; background: $ui-base-color; color: $darker-text-color; + border-radius: 4px; font-size: 14px; margin: 0; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index f5377a858..1f1a5a5ca 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -126,6 +126,7 @@ &:hover { border-color: lighten($ui-primary-color, 4%); color: lighten($darker-text-color, 4%); + text-decoration: none; } &:disabled { @@ -700,6 +701,15 @@ transition: height 0.4s ease, opacity 0.4s ease; } +.sign-in-banner { + padding: 10px; + + p { + color: $darker-text-color; + margin-bottom: 20px; + } +} + .emojione { font-size: inherit; vertical-align: middle; @@ -2214,6 +2224,7 @@ a.account__display-name { > .scrollable { background: $ui-base-color; + border-radius: 0 0 4px 4px; } } @@ -2660,6 +2671,26 @@ a.account__display-name { height: calc(100% - 10px); overflow-y: hidden; + .hero-widget { + box-shadow: none; + + &__text, + &__img, + &__img img { + border-radius: 0; + } + + &__text { + padding: 15px; + color: $secondary-text-color; + + strong { + font-weight: 700; + color: $primary-text-color; + } + } + } + .navigation-bar { padding-top: 20px; padding-bottom: 20px; @@ -2667,10 +2698,6 @@ a.account__display-name { min-height: 20px; } - .flex-spacer { - background: transparent; - } - .compose-form { flex: 1; overflow-y: hidden; @@ -2709,6 +2736,14 @@ a.account__display-name { flex: 0 0 auto; } + .logo { + height: 30px; + width: auto; + } +} + +.navigation-panel, +.compose-panel { hr { flex: 0 0 auto; border: 0; @@ -2836,6 +2871,7 @@ a.account__display-name { box-sizing: border-box; width: 100%; background: lighten($ui-base-color, 4%); + border-radius: 4px 4px 0 0; color: $highlight-text-color; cursor: pointer; flex: 0 0 auto; @@ -3031,6 +3067,17 @@ a.account__display-name { color: $highlight-text-color; } } + + &--logo { + background: transparent; + padding: 10px; + + &:hover, + &:focus, + &:active { + background: transparent; + } + } } .column-link__icon { @@ -3551,6 +3598,7 @@ a.status-card.compact:hover { display: flex; font-size: 16px; background: lighten($ui-base-color, 4%); + border-radius: 4px 4px 0 0; flex: 0 0 auto; cursor: pointer; position: relative; diff --git a/app/lib/permalink_redirector.rb b/app/lib/permalink_redirector.rb index e48bce060..6d15f3963 100644 --- a/app/lib/permalink_redirector.rb +++ b/app/lib/permalink_redirector.rb @@ -17,10 +17,6 @@ class PermalinkRedirector find_status_url_by_id(path_segments[2]) elsif path_segments[1] == 'accounts' && path_segments[2] =~ /\d/ find_account_url_by_id(path_segments[2]) - elsif path_segments[1] == 'timelines' && path_segments[2] == 'tag' && path_segments[3].present? - find_tag_url_by_name(path_segments[3]) - elsif path_segments[1] == 'tags' && path_segments[2].present? - find_tag_url_by_name(path_segments[2]) end end end diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb index 5eda87757..df076ffc6 100644 --- a/app/serializers/initial_state_serializer.rb +++ b/app/serializers/initial_state_serializer.rb @@ -1,9 +1,11 @@ # frozen_string_literal: true class InitialStateSerializer < ActiveModel::Serializer + include RoutingHelper + attributes :meta, :compose, :accounts, :media_attachments, :settings, - :languages + :languages, :server has_one :push_subscription, serializer: REST::WebPushSubscriptionSerializer has_one :role, serializer: REST::RoleSerializer @@ -82,6 +84,13 @@ class InitialStateSerializer < ActiveModel::Serializer LanguagesHelper::SUPPORTED_LOCALES.map { |(key, value)| [key, value[0], value[1]] } end + def server + { + hero: instance_presenter.hero&.file&.url || instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), + description: instance_presenter.site_short_description.presence || I18n.t('about.about_mastodon_html'), + } + end + private def instance_presenter diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml index 3d6283fba..19c5191d8 100644 --- a/app/views/home/index.html.haml +++ b/app/views/home/index.html.haml @@ -1,10 +1,14 @@ - content_for :header_tags do - = preload_pack_asset 'features/getting_started.js', crossorigin: 'anonymous' - = preload_pack_asset 'features/compose.js', crossorigin: 'anonymous' - = preload_pack_asset 'features/home_timeline.js', crossorigin: 'anonymous' - = preload_pack_asset 'features/notifications.js', crossorigin: 'anonymous' + - if user_signed_in? + = preload_pack_asset 'features/getting_started.js', crossorigin: 'anonymous' + = preload_pack_asset 'features/compose.js', crossorigin: 'anonymous' + = preload_pack_asset 'features/home_timeline.js', crossorigin: 'anonymous' + = preload_pack_asset 'features/notifications.js', crossorigin: 'anonymous' + + = render partial: 'shared/og' %meta{name: 'applicationServerKey', content: Rails.configuration.x.vapid_public_key} + = render_initial_state = javascript_pack_tag 'application', crossorigin: 'anonymous' diff --git a/package.json b/package.json index ca1786038..bef027d26 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "punycode": "^2.1.0", "react": "^16.14.0", "react-dom": "^16.14.0", + "react-helmet": "^6.1.0", "react-hotkeys": "^1.1.4", "react-immutable-proptypes": "^2.2.0", "react-immutable-pure-component": "^2.2.2", diff --git a/spec/controllers/home_controller_spec.rb b/spec/controllers/home_controller_spec.rb index 70c5c42c5..d845ae01d 100644 --- a/spec/controllers/home_controller_spec.rb +++ b/spec/controllers/home_controller_spec.rb @@ -7,27 +7,21 @@ RSpec.describe HomeController, type: :controller do subject { get :index } context 'when not signed in' do - context 'when requested path is tag timeline' do - it 'redirects to the tag\'s permalink' do - @request.path = '/web/timelines/tag/name' - is_expected.to redirect_to '/tags/name' - end - end - - it 'redirects to about page' do + it 'returns http success' do @request.path = '/' - is_expected.to redirect_to(about_path) + is_expected.to have_http_status(:success) end end context 'when signed in' do let(:user) { Fabricate(:user) } - before { sign_in(user) } + before do + sign_in(user) + end - it 'assigns @body_classes' do - subject - expect(assigns(:body_classes)).to eq 'app-body' + it 'returns http success' do + is_expected.to have_http_status(:success) end end end diff --git a/spec/lib/permalink_redirector_spec.rb b/spec/lib/permalink_redirector_spec.rb index b916b33b2..abda57da4 100644 --- a/spec/lib/permalink_redirector_spec.rb +++ b/spec/lib/permalink_redirector_spec.rb @@ -21,7 +21,7 @@ describe PermalinkRedirector do it 'returns path for legacy tag links' do redirector = described_class.new('web/timelines/tag/hoge') - expect(redirector.redirect_path).to eq '/tags/hoge' + expect(redirector.redirect_path).to be_nil end it 'returns path for pretty account links' do @@ -36,7 +36,7 @@ describe PermalinkRedirector do it 'returns path for pretty tag links' do redirector = described_class.new('web/tags/hoge') - expect(redirector.redirect_path).to eq '/tags/hoge' + expect(redirector.redirect_path).to be_nil end end end diff --git a/yarn.lock b/yarn.lock index 90302b284..3628dd560 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9194,6 +9194,21 @@ react-event-listener@^0.6.0: prop-types "^15.6.0" warning "^4.0.1" +react-fast-compare@^3.1.1: + version "3.2.0" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" + integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== + +react-helmet@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" + integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw== + dependencies: + object-assign "^4.1.1" + prop-types "^15.7.2" + react-fast-compare "^3.1.1" + react-side-effect "^2.1.0" + react-hotkeys@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-1.1.4.tgz#a0712aa2e0c03a759fd7885808598497a4dace72" @@ -9368,6 +9383,11 @@ react-select@^5.4.0: prop-types "^15.6.0" react-transition-group "^4.3.0" +react-side-effect@^2.1.0: + version "2.1.2" + resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a" + integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw== + react-sparklines@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/react-sparklines/-/react-sparklines-1.7.0.tgz#9b1d97e8c8610095eeb2ad658d2e1fcf91f91a60" -- cgit From e623c302d5d4dfc05689eb8fb8e051e30fc38ec8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 29 Sep 2022 06:21:51 +0200 Subject: Add sign-up button to logged-out web UI (#19250) --- .../mastodon/components/column_header.js | 3 ++- app/javascript/mastodon/components/poll.js | 6 ++++- .../mastodon/components/status_content.js | 3 ++- .../mastodon/features/ui/components/link_footer.js | 2 +- .../features/ui/components/sign_in_banner.js | 2 ++ app/javascript/mastodon/initial_state.js | 1 + app/javascript/styles/mastodon/components.scss | 29 ++++++++++++++++++++++ app/serializers/initial_state_serializer.rb | 1 + 8 files changed, 43 insertions(+), 4 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index cbbc490a8..5b2e16627 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -17,6 +17,7 @@ class ColumnHeader extends React.PureComponent { static contextTypes = { router: PropTypes.object, + identity: PropTypes.object, }; static propTypes = { @@ -145,7 +146,7 @@ class ColumnHeader extends React.PureComponent { collapsedContent.push(moveButtons); } - if (children || (multiColumn && this.props.onPin)) { + if (this.context.identity.signedIn && (children || (multiColumn && this.props.onPin))) { collapseButton = ( } + {!showResults && } {showResults && !this.props.disabled && · } {votesCount} {poll.get('expires_at') && · {timeRemaining}} diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index 43e938d4e..a88c5f084 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -15,6 +15,7 @@ class StatusContent extends React.PureComponent { static contextTypes = { router: PropTypes.object, + identity: PropTypes.object, }; static propTypes = { @@ -180,7 +181,7 @@ class StatusContent extends React.PureComponent { const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; const renderReadMore = this.props.onClick && status.get('collapsed'); const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']); - const renderTranslate = this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && intl.locale !== status.get('language'); + const renderTranslate = this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && intl.locale !== status.get('language'); const language = preloadedLanguages.find(lang => lang[0] === status.get('language')); const languageName = language ? language[2] : status.get('language'); diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js index 95cd6cf8e..8817bb6c1 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.js +++ b/app/javascript/mastodon/features/ui/components/link_footer.js @@ -56,7 +56,7 @@ class LinkFooter extends React.PureComponent { items.push(); } - if (withHotkeys) { + if (signedIn && withHotkeys) { items.push(); } diff --git a/app/javascript/mastodon/features/ui/components/sign_in_banner.js b/app/javascript/mastodon/features/ui/components/sign_in_banner.js index c8403a8ad..5ff4ee2a8 100644 --- a/app/javascript/mastodon/features/ui/components/sign_in_banner.js +++ b/app/javascript/mastodon/features/ui/components/sign_in_banner.js @@ -1,10 +1,12 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { registrationsOpen } from 'mastodon/initial_state'; const SignInBanner = () => (

+
); diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js index 9cc75b6cb..81607a03b 100644 --- a/app/javascript/mastodon/initial_state.js +++ b/app/javascript/mastodon/initial_state.js @@ -14,6 +14,7 @@ export const deleteModal = getMeta('delete_modal'); export const me = getMeta('me'); export const searchEnabled = getMeta('search_enabled'); export const limitedFederationMode = getMeta('limited_federation_mode'); +export const registrationsOpen = getMeta('registrations_open'); export const repository = getMeta('repository'); export const source_url = getMeta('source_url'); export const version = getMeta('version'); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 1f1a5a5ca..87ec6bb8a 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -134,6 +134,26 @@ } } + &.button-tertiary { + background: transparent; + padding: 6px 17px; + color: $highlight-text-color; + border: 1px solid $highlight-text-color; + + &:active, + &:focus, + &:hover { + background: $ui-highlight-color; + color: $primary-text-color; + border: 0; + padding: 7px 18px; + } + + &:disabled { + opacity: 0.5; + } + } + &.button--block { display: block; width: 100%; @@ -708,6 +728,10 @@ color: $darker-text-color; margin-bottom: 20px; } + + .button { + margin-bottom: 10px; + } } .emojione { @@ -3671,6 +3695,11 @@ a.status-card.compact:hover { background: lighten($ui-base-color, 8%); } } + + &:disabled { + color: $dark-text-color; + cursor: default; + } } .column-header__collapsible { diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb index df076ffc6..87f4db83d 100644 --- a/app/serializers/initial_state_serializer.rb +++ b/app/serializers/initial_state_serializer.rb @@ -26,6 +26,7 @@ class InitialStateSerializer < ActiveModel::Serializer mascot: instance_presenter.mascot&.file&.url, profile_directory: Setting.profile_directory, trends: Setting.trends, + registrations_open: Setting.registrations_mode != 'none' && !Rails.configuration.x.single_user_mode, } if object.current_account -- cgit From bfc539cfb4f040fcffac740b36791c26c2a74119 Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 2 Oct 2022 18:11:46 +0200 Subject: Revert "Change "Allow trends without prior review" setting to include statuses (#17977)" This reverts commit 546672e292dc3218e996048464c4c52e5d00f766. --- app/javascript/styles/mastodon/accounts.scss | 9 +-------- app/javascript/styles/mastodon/forms.scss | 3 +-- app/models/account.rb | 4 ---- app/views/admin/settings/edit.html.haml | 2 +- config/i18n-tasks.yml | 2 +- config/initializers/simple_form.rb | 5 +---- config/locales/en.yml | 4 ++-- config/locales/simple_form.en.yml | 1 - 8 files changed, 7 insertions(+), 23 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index c007eb4b5..54b65bfc8 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -202,8 +202,7 @@ } .account-role, -.simple_form .recommended, -.simple_form .not_recommended { +.simple_form .recommended { display: inline-block; padding: 4px 6px; cursor: default; @@ -228,12 +227,6 @@ } } -.simple_form .not_recommended { - color: lighten($error-red, 12%); - background-color: rgba(lighten($error-red, 12%), 0.1); - border-color: rgba(lighten($error-red, 12%), 0.5); -} - .account__header__fields { max-width: 100vw; padding: 0; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index a6419821f..990903859 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -102,8 +102,7 @@ code { } } - .recommended, - .not_recommended { + .recommended { position: absolute; margin: 0 4px; margin-top: -2px; diff --git a/app/models/account.rb b/app/models/account.rb index 33870beda..f75750838 100644 --- a/app/models/account.rb +++ b/app/models/account.rb @@ -262,10 +262,6 @@ class Account < ApplicationRecord update!(memorial: true) end - def trendable - boolean_with_default('trendable', Setting.trendable_by_default) - end - def sign? true end diff --git a/app/views/admin/settings/edit.html.haml b/app/views/admin/settings/edit.html.haml index c8ebb3360..f2fdab90d 100644 --- a/app/views/admin/settings/edit.html.haml +++ b/app/views/admin/settings/edit.html.haml @@ -81,7 +81,7 @@ = f.input :trends, as: :boolean, wrapper: :with_label, label: t('admin.settings.trends.title'), hint: t('admin.settings.trends.desc_html') .fields-group - = f.input :trendable_by_default, as: :boolean, wrapper: :with_label, label: t('admin.settings.trendable_by_default.title'), hint: t('admin.settings.trendable_by_default.desc_html'), recommended: :not_recommended + = f.input :trendable_by_default, as: :boolean, wrapper: :with_label, label: t('admin.settings.trendable_by_default.title'), hint: t('admin.settings.trendable_by_default.desc_html') .fields-group = f.input :trending_status_cw, as: :boolean, wrapper: :with_label, label: t('admin.settings.trending_status_cw.title'), hint: t('admin.settings.trending_status_cw.desc_html') diff --git a/config/i18n-tasks.yml b/config/i18n-tasks.yml index cc607f72a..7139bcea7 100644 --- a/config/i18n-tasks.yml +++ b/config/i18n-tasks.yml @@ -51,7 +51,7 @@ ignore_unused: - 'activerecord.errors.*' - '{devise,pagination,doorkeeper}.*' - '{date,datetime,time,number}.*' - - 'simple_form.{yes,no,recommended,not_recommended}' + - 'simple_form.{yes,no,recommended}' - 'simple_form.{placeholders,hints,labels}.*' - 'simple_form.{error_notification,required}.:' - 'errors.messages.*' diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb index 92cffc5a2..3a2097d2f 100644 --- a/config/initializers/simple_form.rb +++ b/config/initializers/simple_form.rb @@ -11,10 +11,7 @@ end module RecommendedComponent def recommended(_wrapper_options = nil) return unless options[:recommended] - - key = options[:recommended].is_a?(Symbol) ? options[:recommended] : :recommended - options[:label_text] = ->(raw_label_text, _required_label_text, _label_present) { safe_join([raw_label_text, ' ', content_tag(:span, I18n.t(key, scope: 'simple_form'), class: key)]) } - + options[:label_text] = ->(raw_label_text, _required_label_text, _label_present) { safe_join([raw_label_text, ' ', content_tag(:span, I18n.t('simple_form.recommended'), class: 'recommended')]) } nil end end diff --git a/config/locales/en.yml b/config/locales/en.yml index dd341e0c8..6f0f3e953 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -807,8 +807,8 @@ en: title: Allow unauthenticated access to public timeline title: Site settings trendable_by_default: - desc_html: Specific trending content can still be explicitly disallowed - title: Allow trends without prior review + desc_html: Affects hashtags that have not been previously disallowed + title: Allow hashtags to trend without prior review trends: desc_html: Publicly display previously reviewed content that is currently trending title: Trends diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml index db5b45e41..ec4c445e8 100644 --- a/config/locales/simple_form.en.yml +++ b/config/locales/simple_form.en.yml @@ -261,7 +261,6 @@ en: events: Enabled events url: Endpoint URL 'no': 'No' - not_recommended: Not recommended recommended: Recommended required: mark: "*" -- cgit From e2b561e3a521ff893943c0e9e32952e35934ca54 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 4 Oct 2022 20:13:23 +0200 Subject: Fix logged-out web UI on smaller screens (#19263) --- .../mastodon/components/not_signed_in_indicator.js | 12 + app/javascript/mastodon/features/about/index.js | 34 +++ app/javascript/mastodon/features/compose/index.js | 87 +++---- app/javascript/mastodon/features/explore/index.js | 29 ++- .../mastodon/features/getting_started/index.js | 104 +++----- .../mastodon/features/home_timeline/index.js | 30 ++- .../mastodon/features/keyboard_shortcuts/index.js | 13 +- .../mastodon/features/notifications/index.js | 61 +++-- .../features/ui/components/columns_area.js | 84 +------ .../features/ui/components/compose_panel.js | 2 +- .../mastodon/features/ui/components/header.js | 53 ++++ .../mastodon/features/ui/components/link_footer.js | 45 ++-- .../features/ui/components/navigation_panel.js | 16 +- .../mastodon/features/ui/components/tabs_bar.js | 86 ------- app/javascript/mastodon/features/ui/index.js | 5 + .../mastodon/features/ui/util/async-components.js | 4 + app/javascript/mastodon/locales/en.json | 6 +- app/javascript/styles/mastodon/components.scss | 270 +++++++++++++-------- app/javascript/styles/mastodon/variables.scss | 2 +- 19 files changed, 479 insertions(+), 464 deletions(-) create mode 100644 app/javascript/mastodon/components/not_signed_in_indicator.js create mode 100644 app/javascript/mastodon/features/about/index.js create mode 100644 app/javascript/mastodon/features/ui/components/header.js delete mode 100644 app/javascript/mastodon/features/ui/components/tabs_bar.js (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/not_signed_in_indicator.js b/app/javascript/mastodon/components/not_signed_in_indicator.js new file mode 100644 index 000000000..b440c6be2 --- /dev/null +++ b/app/javascript/mastodon/components/not_signed_in_indicator.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +const NotSignedInIndicator = () => ( +
+
+ +
+
+); + +export default NotSignedInIndicator; diff --git a/app/javascript/mastodon/features/about/index.js b/app/javascript/mastodon/features/about/index.js new file mode 100644 index 000000000..c48d81d9a --- /dev/null +++ b/app/javascript/mastodon/features/about/index.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { defineMessages, injectIntl } from 'react-intl'; +import PropTypes from 'prop-types'; +import Column from 'mastodon/components/column'; +import LinkFooter from 'mastodon/features/ui/components/link_footer'; +import { Helmet } from 'react-helmet'; +import { title } from 'mastodon/initial_state'; + +const messages = defineMessages({ + title: { id: 'column.about', defaultMessage: 'About' }, +}); + +export default @injectIntl +class About extends React.PureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + }; + + render () { + const { intl } = this.props; + + return ( + + + + + {intl.formatMessage(messages.title)} - {title} + + + ); + } + +} diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js index 711a55904..c27556a0e 100644 --- a/app/javascript/mastodon/features/compose/index.js +++ b/app/javascript/mastodon/features/compose/index.js @@ -17,6 +17,7 @@ import elephantUIPlane from '../../../images/elephant_ui_plane.svg'; import { mascot } from '../../initial_state'; import Icon from 'mastodon/components/icon'; import { logOut } from 'mastodon/utils/log_out'; +import Column from 'mastodon/components/column'; const messages = defineMessages({ start: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, @@ -92,57 +93,59 @@ class Compose extends React.PureComponent { render () { const { multiColumn, showSearch, isSearchPage, intl } = this.props; - let header = ''; - if (multiColumn) { const { columns } = this.props; - header = ( - - ); - } - return ( -
- {header} - - {(multiColumn || isSearchPage) && } + return ( +
+ -
- {!isSearchPage &&
- + {(multiColumn || isSearchPage) && } - +
+ {!isSearchPage &&
+ -
- -
-
} + - - {({ x }) => ( -
- +
+
- )} - +
} + + + {({ x }) => ( +
+ +
+ )} + +
-
+ ); + } + + return ( + + + + ); } diff --git a/app/javascript/mastodon/features/explore/index.js b/app/javascript/mastodon/features/explore/index.js index e1d1eb563..21bb6e828 100644 --- a/app/javascript/mastodon/features/explore/index.js +++ b/app/javascript/mastodon/features/explore/index.js @@ -30,13 +30,13 @@ class Explore extends React.PureComponent { static contextTypes = { router: PropTypes.object, + identity: PropTypes.object, }; static propTypes = { intl: PropTypes.object.isRequired, multiColumn: PropTypes.bool, isSearching: PropTypes.bool, - layout: PropTypes.string, }; handleHeaderClick = () => { @@ -48,22 +48,21 @@ class Explore extends React.PureComponent { } render () { - const { intl, multiColumn, isSearching, layout } = this.props; + const { intl, multiColumn, isSearching } = this.props; + const { signedIn } = this.context.identity; return ( - {layout === 'mobile' ? ( -
- -
- ) : ( - - )} + + +
+ +
{isSearching ? ( @@ -74,7 +73,7 @@ class Explore extends React.PureComponent { - + {signedIn && }
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js index 65cee7498..d998127a2 100644 --- a/app/javascript/mastodon/features/getting_started/index.js +++ b/app/javascript/mastodon/features/getting_started/index.js @@ -1,19 +1,20 @@ import React from 'react'; -import Column from '../ui/components/column'; +import Column from 'mastodon/components/column'; +import ColumnHeader from 'mastodon/components/column_header'; import ColumnLink from '../ui/components/column_link'; import ColumnSubheading from '../ui/components/column_subheading'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { me, showTrends } from '../../initial_state'; +import { me, title, showTrends } from '../../initial_state'; import { fetchFollowRequests } from 'mastodon/actions/accounts'; import { List as ImmutableList } from 'immutable'; import NavigationContainer from '../compose/containers/navigation_container'; -import Icon from 'mastodon/components/icon'; import LinkFooter from 'mastodon/features/ui/components/link_footer'; import TrendsContainer from './containers/trends_container'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' }, @@ -40,7 +41,6 @@ const messages = defineMessages({ const mapStateToProps = state => ({ myAccount: state.getIn(['accounts', me]), - columns: state.getIn(['settings', 'columns']), unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, }); @@ -58,20 +58,18 @@ const badgeDisplay = (number, limit) => { } }; -const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); - export default @connect(mapStateToProps, mapDispatchToProps) @injectIntl class GettingStarted extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object.isRequired, + identity: PropTypes.object, }; static propTypes = { intl: PropTypes.object.isRequired, - myAccount: ImmutablePropTypes.map.isRequired, - columns: ImmutablePropTypes.list, + myAccount: ImmutablePropTypes.map, multiColumn: PropTypes.bool, fetchFollowRequests: PropTypes.func.isRequired, unreadFollowRequests: PropTypes.number, @@ -79,10 +77,10 @@ class GettingStarted extends ImmutablePureComponent { }; componentDidMount () { - const { fetchFollowRequests, multiColumn } = this.props; + const { fetchFollowRequests } = this.props; + const { signedIn } = this.context.identity; - if (!multiColumn && window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) { - this.context.router.history.replace('/home'); + if (!signedIn) { return; } @@ -90,91 +88,57 @@ class GettingStarted extends ImmutablePureComponent { } render () { - const { intl, myAccount, columns, multiColumn, unreadFollowRequests } = this.props; + const { intl, myAccount, multiColumn, unreadFollowRequests } = this.props; + const { signedIn } = this.context.identity; const navItems = []; - let height = (multiColumn) ? 0 : 60; - - if (multiColumn) { - navItems.push( - , - ); - height += 34; - } navItems.push( + , , + , + , ); - height += 48; - - if (multiColumn) { - navItems.push( - , - , - ); - - height += 48*2; + if (signedIn) { navItems.push( , - ); - - height += 34; - } - - if (multiColumn && !columns.find(item => item.get('id') === 'HOME')) { - navItems.push( , + , + , + , + , ); - height += 48; - } - - navItems.push( - , - , - , - , - ); - height += 48*4; + if (myAccount.get('locked') || unreadFollowRequests > 0) { + navItems.push(); + } - if (myAccount.get('locked') || unreadFollowRequests > 0) { - navItems.push(); - height += 48; - } - - if (!multiColumn) { navItems.push( , , ); - - height += 34 + 48; } return ( - - {multiColumn &&
-

- -

-
} - -
-
- {!multiColumn && } + + {(signedIn && !multiColumn) ? : } + +
+
{navItems}
{!multiColumn &&
} - +
- {multiColumn && showTrends && } + {(multiColumn && showTrends) && } + + + {intl.formatMessage(messages.menu)} - {title} + ); } diff --git a/app/javascript/mastodon/features/home_timeline/index.js b/app/javascript/mastodon/features/home_timeline/index.js index dc440f2fe..aac92244d 100644 --- a/app/javascript/mastodon/features/home_timeline/index.js +++ b/app/javascript/mastodon/features/home_timeline/index.js @@ -13,6 +13,9 @@ import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/an import AnnouncementsContainer from 'mastodon/features/getting_started/containers/announcements_container'; import classNames from 'classnames'; import IconWithBadge from 'mastodon/components/icon_with_badge'; +import NotSignedInIndicator from 'mastodon/components/not_signed_in_indicator'; +import { Helmet } from 'react-helmet'; +import { title } from 'mastodon/initial_state'; const messages = defineMessages({ title: { id: 'column.home', defaultMessage: 'Home' }, @@ -32,6 +35,10 @@ export default @connect(mapStateToProps) @injectIntl class HomeTimeline extends React.PureComponent { + static contextTypes = { + identity: PropTypes.object, + }; + static propTypes = { dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, @@ -113,6 +120,7 @@ class HomeTimeline extends React.PureComponent { render () { const { intl, hasUnread, columnId, multiColumn, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props; const pinned = !!columnId; + const { signedIn } = this.context.identity; let announcementsButton = null; @@ -147,14 +155,20 @@ class HomeTimeline extends React.PureComponent { - }} />} - bindToDocument={!multiColumn} - /> + {signedIn ? ( + }} />} + bindToDocument={!multiColumn} + /> + ) : } + + + {intl.formatMessage(messages.title)} - {title} + ); } diff --git a/app/javascript/mastodon/features/keyboard_shortcuts/index.js b/app/javascript/mastodon/features/keyboard_shortcuts/index.js index 8f1631d82..2a32577ba 100644 --- a/app/javascript/mastodon/features/keyboard_shortcuts/index.js +++ b/app/javascript/mastodon/features/keyboard_shortcuts/index.js @@ -1,9 +1,9 @@ import React from 'react'; -import Column from '../ui/components/column'; -import ColumnBackButtonSlim from '../../components/column_back_button_slim'; +import Column from 'mastodon/components/column'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import ColumnHeader from 'mastodon/components/column_header'; const messages = defineMessages({ heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' }, @@ -21,8 +21,13 @@ class KeyboardShortcuts extends ImmutablePureComponent { const { intl, multiColumn } = this.props; return ( - - + + +
diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js index a6a277d7e..d9f8101c3 100644 --- a/app/javascript/mastodon/features/notifications/index.js +++ b/app/javascript/mastodon/features/notifications/index.js @@ -26,6 +26,9 @@ import LoadGap from '../../components/load_gap'; import Icon from 'mastodon/components/icon'; import compareId from 'mastodon/compare_id'; import NotificationsPermissionBanner from './components/notifications_permission_banner'; +import NotSignedInIndicator from 'mastodon/components/not_signed_in_indicator'; +import { Helmet } from 'react-helmet'; +import { title } from 'mastodon/initial_state'; const messages = defineMessages({ title: { id: 'column.notifications', defaultMessage: 'Notifications' }, @@ -69,6 +72,10 @@ export default @connect(mapStateToProps) @injectIntl class Notifications extends React.PureComponent { + static contextTypes = { + identity: PropTypes.object, + }; + static propTypes = { columnId: PropTypes.string, notifications: ImmutablePropTypes.list.isRequired, @@ -178,10 +185,11 @@ class Notifications extends React.PureComponent { const { intl, notifications, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, showFilterBar, lastReadId, canMarkAsRead, needsNotificationPermission } = this.props; const pinned = !!columnId; const emptyMessage = ; + const { signedIn } = this.context.identity; let scrollableContent = null; - const filterBarContainer = showFilterBar + const filterBarContainer = (signedIn && showFilterBar) ? () : null; @@ -211,26 +219,32 @@ class Notifications extends React.PureComponent { this.scrollableContent = scrollableContent; - const scrollContainer = ( - } - alwaysPrepend - emptyMessage={emptyMessage} - onLoadMore={this.handleLoadOlder} - onLoadPending={this.handleLoadPending} - onScrollToTop={this.handleScrollToTop} - onScroll={this.handleScroll} - bindToDocument={!multiColumn} - > - {scrollableContent} - - ); + let scrollContainer; + + if (signedIn) { + scrollContainer = ( + } + alwaysPrepend + emptyMessage={emptyMessage} + onLoadMore={this.handleLoadOlder} + onLoadPending={this.handleLoadPending} + onScrollToTop={this.handleScrollToTop} + onScroll={this.handleScroll} + bindToDocument={!multiColumn} + > + {scrollableContent} + + ); + } else { + scrollContainer = ; + } let extraButton = null; @@ -262,8 +276,13 @@ class Notifications extends React.PureComponent { > + {filterBarContainer} {scrollContainer} + + + {intl.formatMessage(messages.title)} - {title} + ); } diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 83e10e003..cc1bc83e0 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -3,13 +3,7 @@ import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; - -import ReactSwipeableViews from 'react-swipeable-views'; -import TabsBar, { links, getIndex, getLink } from './tabs_bar'; import { Link } from 'react-router-dom'; - -import { disableSwiping } from 'mastodon/initial_state'; - import BundleContainer from '../containers/bundle_container'; import ColumnLoading from './column_loading'; import DrawerLoading from './drawer_loading'; @@ -71,20 +65,13 @@ class ColumnsArea extends ImmutablePureComponent { children: PropTypes.node, }; - // Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS - mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 895px)'); + // Corresponds to (max-width: $no-gap-breakpoint + 285px - 1px) in SCSS + mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 1174px)'); state = { - shouldAnimate: false, renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches), } - componentWillReceiveProps() { - if (typeof this.pendingIndex !== 'number' && this.lastIndex !== getIndex(this.context.router.history.location.pathname)) { - this.setState({ shouldAnimate: false }); - } - } - componentDidMount() { if (!this.props.singleColumn) { this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); @@ -99,10 +86,7 @@ class ColumnsArea extends ImmutablePureComponent { this.setState({ renderComposePanel: !this.mediaQuery.matches }); } - this.lastIndex = getIndex(this.context.router.history.location.pathname); this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl'); - - this.setState({ shouldAnimate: true }); } componentWillUpdate(nextProps) { @@ -115,13 +99,6 @@ class ColumnsArea extends ImmutablePureComponent { if (this.props.singleColumn !== prevProps.singleColumn && !this.props.singleColumn) { this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); } - - const newIndex = getIndex(this.context.router.history.location.pathname); - - if (this.lastIndex !== newIndex) { - this.lastIndex = newIndex; - this.setState({ shouldAnimate: true }); - } } componentWillUnmount () { @@ -149,31 +126,6 @@ class ColumnsArea extends ImmutablePureComponent { this.setState({ renderComposePanel: !e.matches }); } - handleSwipe = (index) => { - this.pendingIndex = index; - - const nextLinkTranslationId = links[index].props['data-preview-title-id']; - const currentLinkSelector = '.tabs-bar__link.active'; - const nextLinkSelector = `.tabs-bar__link[data-preview-title-id="${nextLinkTranslationId}"]`; - - // HACK: Remove the active class from the current link and set it to the next one - // React-router does this for us, but too late, feeling laggy. - document.querySelector(currentLinkSelector).classList.remove('active'); - document.querySelector(nextLinkSelector).classList.add('active'); - - if (!this.state.shouldAnimate && typeof this.pendingIndex === 'number') { - this.context.router.history.push(getLink(this.pendingIndex)); - this.pendingIndex = null; - } - } - - handleAnimationEnd = () => { - if (typeof this.pendingIndex === 'number') { - this.context.router.history.push(getLink(this.pendingIndex)); - this.pendingIndex = null; - } - } - handleWheel = () => { if (typeof this._interruptScrollAnimation !== 'function') { return; @@ -186,22 +138,6 @@ class ColumnsArea extends ImmutablePureComponent { this.node = node; } - renderView = (link, index) => { - const columnIndex = getIndex(this.context.router.history.location.pathname); - const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] }); - const icon = link.props['data-preview-icon']; - - const view = (index === columnIndex) ? - React.cloneElement(this.props.children) : - ; - - return ( -
- {view} -
- ); - } - renderLoading = columnId => () => { return columnId === 'COMPOSE' ? : ; } @@ -212,22 +148,12 @@ class ColumnsArea extends ImmutablePureComponent { render () { const { columns, children, singleColumn, isModalOpen, intl } = this.props; - const { shouldAnimate, renderComposePanel } = this.state; + const { renderComposePanel } = this.state; const { signedIn } = this.context.identity; - const columnIndex = getIndex(this.context.router.history.location.pathname); - if (singleColumn) { const floatingActionButton = (!signedIn || shouldHideFAB(this.context.router.history.location.pathname)) ? null : ; - const content = columnIndex !== -1 ? ( - - {links.map(this.renderView)} - - ) : ( -
{children}
- ); - return (
@@ -237,8 +163,8 @@ class ColumnsArea extends ImmutablePureComponent {
- - {content} +
+
{children}
diff --git a/app/javascript/mastodon/features/ui/components/compose_panel.js b/app/javascript/mastodon/features/ui/components/compose_panel.js index 1c128188f..655c202fa 100644 --- a/app/javascript/mastodon/features/ui/components/compose_panel.js +++ b/app/javascript/mastodon/features/ui/components/compose_panel.js @@ -46,7 +46,7 @@ class ComposePanel extends React.PureComponent { )} - +
); } diff --git a/app/javascript/mastodon/features/ui/components/header.js b/app/javascript/mastodon/features/ui/components/header.js new file mode 100644 index 000000000..cddab820c --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/header.js @@ -0,0 +1,53 @@ +import React from 'react'; +import Logo from 'mastodon/components/logo'; +import { Link } from 'react-router-dom'; +import { FormattedMessage } from 'react-intl'; +import { registrationsOpen, me } from 'mastodon/initial_state'; +import Avatar from 'mastodon/components/avatar'; +import Permalink from 'mastodon/components/permalink'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; + +const Account = connect(state => ({ + account: state.getIn(['accounts', me]), +}))(({ account }) => ( + + {account.get('acct')} + + +)); + +export default class Header extends React.PureComponent { + + static contextTypes = { + identity: PropTypes.object, + }; + + render () { + const { signedIn } = this.context.identity; + + let content; + + if (signedIn) { + content = ; + } else { + content = ( + + + + + ); + } + + return ( +
+ + +
+ {content} +
+
+ ); + } + +} diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js index dd05d03dd..2b092a182 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.js +++ b/app/javascript/mastodon/features/ui/components/link_footer.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { limitedFederationMode, version, repository, source_url, profile_directory as profileDirectory } from 'mastodon/initial_state'; +import { version, repository, source_url, profile_directory as profileDirectory } from 'mastodon/initial_state'; import { logOut } from 'mastodon/utils/log_out'; import { openModal } from 'mastodon/actions/modal'; import { PERMISSION_INVITE_USERS } from 'mastodon/permissions'; @@ -33,7 +33,6 @@ class LinkFooter extends React.PureComponent { }; static propTypes = { - withHotkeys: PropTypes.bool, onLogout: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; @@ -48,40 +47,26 @@ class LinkFooter extends React.PureComponent { } render () { - const { withHotkeys } = this.props; const { signedIn, permissions } = this.context.identity; const items = []; - if ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS) { - items.push(); - } - - if (signedIn && withHotkeys) { - items.push(); - } - - if (signedIn) { - items.push(); - } - - if (!limitedFederationMode) { - items.push(); - } + items.push(); + items.push(); + items.push(); + items.push(); + items.push(); + items.push(); if (profileDirectory) { - items.push(); + items.push(); } - items.push(); - items.push(); - if (signedIn) { - items.push(); - } + if ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS) { + items.push(); + } - items.push(); - - if (signedIn) { + items.push(); items.push(); } @@ -93,9 +78,9 @@ class LinkFooter extends React.PureComponent {

{repository} (v{version}) }} + id='getting_started.free_software_notice' + defaultMessage='Mastodon is free, open source software. You can view the source code, contribute or report issues at {repository}.' + values={{ repository: {repository} (v{version}) }} />

diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index 00ae04761..7c7c9056f 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -23,9 +23,10 @@ export default class NavigationPanel extends React.Component { return (
- - -
+
+ +
+
{signedIn && ( @@ -40,10 +41,10 @@ export default class NavigationPanel extends React.Component { {!signedIn && ( - +
- +
)} {signedIn && ( @@ -62,6 +63,11 @@ export default class NavigationPanel extends React.Component { )} +
+
+ +
+ {showTrends && (
diff --git a/app/javascript/mastodon/features/ui/components/tabs_bar.js b/app/javascript/mastodon/features/ui/components/tabs_bar.js deleted file mode 100644 index 55668cab6..000000000 --- a/app/javascript/mastodon/features/ui/components/tabs_bar.js +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { NavLink, withRouter } from 'react-router-dom'; -import { FormattedMessage, injectIntl } from 'react-intl'; -import { debounce } from 'lodash'; -import { isUserTouching } from '../../../is_mobile'; -import Icon from 'mastodon/components/icon'; -import NotificationsCounterIcon from './notifications_counter_icon'; - -export const links = [ - , - , - , - , - , - , -]; - -export function getIndex (path) { - return links.findIndex(link => link.props.to === path); -} - -export function getLink (index) { - return links[index].props.to; -} - -export default @injectIntl -@withRouter -class TabsBar extends React.PureComponent { - - static propTypes = { - intl: PropTypes.object.isRequired, - history: PropTypes.object.isRequired, - } - - setRef = ref => { - this.node = ref; - } - - handleClick = (e) => { - // Only apply optimization for touch devices, which we assume are slower - // We thus avoid the 250ms delay for non-touch devices and the lag for touch devices - if (isUserTouching()) { - e.preventDefault(); - e.persist(); - - requestAnimationFrame(() => { - const tabs = Array(...this.node.querySelectorAll('.tabs-bar__link')); - const currentTab = tabs.find(tab => tab.classList.contains('active')); - const nextTab = tabs.find(tab => tab.contains(e.target)); - const { props: { to } } = links[Array(...this.node.childNodes).indexOf(nextTab)]; - - - if (currentTab !== nextTab) { - if (currentTab) { - currentTab.classList.remove('active'); - } - - const listener = debounce(() => { - nextTab.removeEventListener('transitionend', listener); - this.props.history.push(to); - }, 50); - - nextTab.addEventListener('transitionend', listener); - nextTab.classList.add('active'); - } - }); - } - - } - - render () { - const { intl: { formatMessage } } = this.props; - - return ( -
- - -
-
- ); - } - -} diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 5825db1e4..4e37908c8 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -51,10 +51,12 @@ import { Directory, Explore, FollowRecommendations, + About, } from './util/async-components'; import { me, title } from '../../initial_state'; import { closeOnboarding, INTRODUCTION_VERSION } from 'mastodon/actions/onboarding'; import { Helmet } from 'react-helmet'; +import Header from './components/header'; // Dummy import, to make sure that ends up in the application bundle. // Without this it ends up in ~8 very commonly used bundles. @@ -170,6 +172,7 @@ class SwitchingColumnsArea extends React.PureComponent { + @@ -559,6 +562,8 @@ class UI extends React.PureComponent { return (
+
+ {children} diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js index 29b06206a..5907e0772 100644 --- a/app/javascript/mastodon/features/ui/util/async-components.js +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -165,3 +165,7 @@ export function Explore () { export function FilterModal () { return import(/*webpackChunkName: "modals/filter_modal" */'../components/filter_modal'); } + +export function About () { + return import(/*webpackChunkName: "features/about" */'../../about'); +} diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 463ec7bed..81a41b3fc 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -222,7 +222,7 @@ "follow_requests.unlocked_explanation": "Even though your account is not locked, the {domain} staff thought you might want to review follow requests from these accounts manually.", "generic.saved": "Saved", "getting_started.developers": "Developers", - "getting_started.directory": "Profile directory", + "getting_started.directory": "Directory", "getting_started.documentation": "Documentation", "getting_started.heading": "Getting started", "getting_started.invite": "Invite people", @@ -310,7 +310,7 @@ "mute_modal.duration": "Duration", "mute_modal.hide_notifications": "Hide notifications from this user?", "mute_modal.indefinite": "Indefinite", - "navigation_bar.apps": "Mobile apps", + "navigation_bar.apps": "Get the app", "navigation_bar.blocks": "Blocked users", "navigation_bar.bookmarks": "Bookmarks", "navigation_bar.community_timeline": "Local timeline", @@ -324,7 +324,7 @@ "navigation_bar.filters": "Muted words", "navigation_bar.follow_requests": "Follow requests", "navigation_bar.follows_and_followers": "Follows and followers", - "navigation_bar.info": "About this server", + "navigation_bar.info": "About", "navigation_bar.keyboard_shortcuts": "Hotkeys", "navigation_bar.lists": "Lists", "navigation_bar.logout": "Logout", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 87ec6bb8a..e831fce53 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2191,27 +2191,62 @@ a.account__display-name { &__main { box-sizing: border-box; width: 100%; - max-width: 600px; flex: 0 0 auto; display: flex; flex-direction: column; @media screen and (min-width: $no-gap-breakpoint) { padding: 0 10px; + max-width: 600px; } } } } +$ui-header-height: 55px; + +.ui__header { + display: none; + box-sizing: border-box; + height: $ui-header-height; + position: sticky; + top: 0; + z-index: 2; + justify-content: space-between; + align-items: center; + + &__logo { + display: inline-flex; + padding: 15px; + + .logo { + height: $ui-header-height - 30px; + width: auto; + } + } + + &__links { + display: flex; + align-items: center; + gap: 10px; + padding: 0 10px; + + .button { + flex: 0 0 auto; + } + } +} + .tabs-bar__wrapper { background: darken($ui-base-color, 8%); position: sticky; - top: 0; + top: $ui-header-height; z-index: 2; padding-top: 0; @media screen and (min-width: $no-gap-breakpoint) { padding-top: 10px; + top: 0; } .tabs-bar { @@ -2419,100 +2454,98 @@ a.account__display-name { padding-top: 0; } - @media screen and (min-width: 630px) { - .detailed-status { - padding: 15px; + .detailed-status { + padding: 15px; - .media-gallery, - .video-player, - .audio-player { - margin-top: 15px; - } + .media-gallery, + .video-player, + .audio-player { + margin-top: 15px; } + } - .account__header__bar { - padding: 5px 10px; - } + .account__header__bar { + padding: 5px 10px; + } - .navigation-bar, - .compose-form { - padding: 15px; - } + .navigation-bar, + .compose-form { + padding: 15px; + } - .compose-form .compose-form__publish .compose-form__publish-button-wrapper { - padding-top: 15px; - } + .compose-form .compose-form__publish .compose-form__publish-button-wrapper { + padding-top: 15px; + } - .notification__report { - padding: 15px 15px 15px (48px + 15px * 2); - min-height: 48px + 2px; + .notification__report { + padding: 15px 15px 15px (48px + 15px * 2); + min-height: 48px + 2px; - &__avatar { - left: 15px; - top: 17px; - } + &__avatar { + left: 15px; + top: 17px; } + } - .status { - padding: 15px 15px 15px (48px + 15px * 2); - min-height: 48px + 2px; + .status { + padding: 15px 15px 15px (48px + 15px * 2); + min-height: 48px + 2px; - &__avatar { - left: 15px; - top: 17px; - } + &__avatar { + left: 15px; + top: 17px; + } - &__content { - padding-top: 5px; - } + &__content { + padding-top: 5px; + } - &__prepend { - margin-left: 48px + 15px * 2; - padding-top: 15px; - } + &__prepend { + margin-left: 48px + 15px * 2; + padding-top: 15px; + } - &__prepend-icon-wrapper { - left: -32px; - } + &__prepend-icon-wrapper { + left: -32px; + } - .media-gallery, - &__action-bar, - .video-player, - .audio-player { - margin-top: 10px; - } + .media-gallery, + &__action-bar, + .video-player, + .audio-player { + margin-top: 10px; } + } - .account { - padding: 15px 10px; + .account { + padding: 15px 10px; - &__header__bio { - margin: 0 -10px; - } + &__header__bio { + margin: 0 -10px; } + } - .notification { - &__message { - margin-left: 48px + 15px * 2; - padding-top: 15px; - } + .notification { + &__message { + margin-left: 48px + 15px * 2; + padding-top: 15px; + } - &__favourite-icon-wrapper { - left: -32px; - } + &__favourite-icon-wrapper { + left: -32px; + } - .status { - padding-top: 8px; - } + .status { + padding-top: 8px; + } - .account { - padding-top: 8px; - } + .account { + padding-top: 8px; + } - .account__avatar-wrapper { - margin-left: 17px; - margin-right: 15px; - } + .account__avatar-wrapper { + margin-left: 17px; + margin-right: 15px; } } } @@ -2554,39 +2587,85 @@ a.account__display-name { .search { margin-bottom: 10px; } -} -@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) { - .columns-area__panels__pane--compositional { + .floating-action-button, + .tabs-bar__link.optional { + display: none; + } + + .search-page .search { + display: none; + } + + .navigation-panel__legal { display: none; } +} +@media screen and (max-width: $no-gap-breakpoint - 1px) { .with-fab .scrollable .item-list:last-child { padding-bottom: 5.25rem; } -} -@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { - .floating-action-button, - .tabs-bar__link.optional { - display: none; + .columns-area__panels__main { + width: calc(100% - 55px); } - .search-page .search { - display: none; + .columns-area__panels { + min-height: calc(100vh - $ui-header-height); } -} -@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { .columns-area__panels__pane--navigational { - display: none; + min-width: 55px; + + .columns-area__panels__pane__inner { + width: 55px; + } + + .navigation-panel { + margin: 0; + background: $ui-base-color; + border-left: 1px solid lighten($ui-base-color, 8%); + height: 100vh; + } + + .column-link span, + .navigation-panel__sign-in-banner, + .navigation-panel__logo, + .getting-started__trends { + display: none; + } + + .column-link__icon { + font-size: 18px; + } + } + + .ui__header { + display: flex; + background: $ui-base-color; + border-bottom: 1px solid lighten($ui-base-color, 8%); + } + + .column-header, + .column-back-button, + .scrollable { + border-radius: 0 !important; } } -@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) { - .tabs-bar { +.explore__search-header { + display: none; +} + +@media screen and (max-width: $no-gap-breakpoint + 285px - 1px) { + .columns-area__panels__pane--compositional { display: none; } + + .explore__search-header { + display: flex; + } } .icon-with-badge { @@ -7360,7 +7439,7 @@ noscript { path:first-child { fill: rgba($highlight-text-color, 0.25) !important; - fill-opacity: 1 !important; + fill-opacity: 100% !important; } path:last-child { @@ -7832,10 +7911,9 @@ noscript { } .explore__search-header { - background: $ui-base-color; - display: flex; - align-items: flex-start; + background: darken($ui-base-color, 4%); justify-content: center; + align-items: center; padding: 15px; .search { @@ -7844,14 +7922,8 @@ noscript { } .search__input { - border-radius: 4px; - color: $inverted-text-color; - background: $simple-background-color; + border: 1px solid lighten($ui-base-color, 8%); padding: 10px; - - &::placeholder { - color: $dark-text-color; - } } .search .fa { diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index be2c900ea..775a12e68 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -53,7 +53,7 @@ $media-modal-media-max-width: 100%; // put margins on top and bottom of image to avoid the screen covered by image. $media-modal-media-max-height: 80%; -$no-gap-breakpoint: 415px; +$no-gap-breakpoint: 890px; $font-sans-serif: 'mastodon-font-sans-serif' !default; $font-display: 'mastodon-font-display' !default; -- cgit From d2528b26b6da34f34b5d7a392e263428d3c09d69 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 5 Oct 2022 03:47:56 +0200 Subject: Add server banner to web app, add `GET /api/v2/instance` to REST API (#19294) --- app/controllers/about_controller.rb | 2 +- app/controllers/api/v1/instances_controller.rb | 2 +- app/controllers/api/v2/instances_controller.rb | 8 ++ app/javascript/mastodon/actions/rules.js | 27 ------ app/javascript/mastodon/actions/server.js | 30 ++++++ app/javascript/mastodon/components/account.js | 14 ++- app/javascript/mastodon/components/display_name.js | 8 +- .../mastodon/components/server_banner.js | 91 ++++++++++++++++++ app/javascript/mastodon/features/report/rules.js | 2 +- .../features/ui/components/compose_panel.js | 2 + .../features/ui/components/report_modal.js | 4 +- app/javascript/mastodon/features/ui/index.js | 4 +- app/javascript/mastodon/initial_state.js | 1 - app/javascript/mastodon/reducers/index.js | 4 +- app/javascript/mastodon/reducers/rules.js | 13 --- app/javascript/mastodon/reducers/server.js | 19 ++++ app/javascript/styles/mastodon/components.scss | 82 +++++++++++++++++ app/presenters/instance_presenter.rb | 64 +++++++++---- app/serializers/initial_state_serializer.rb | 19 ++-- app/serializers/manifest_serializer.rb | 4 +- app/serializers/rest/instance_serializer.rb | 81 +++++----------- app/serializers/rest/v1/instance_serializer.rb | 102 +++++++++++++++++++++ app/views/about/more.html.haml | 8 +- app/views/about/show.html.haml | 6 +- app/views/application/_sidebar.html.haml | 4 +- app/views/privacy/show.html.haml | 2 +- app/views/shared/_og.html.haml | 4 +- config/routes.rb | 4 +- spec/presenters/instance_presenter_spec.rb | 38 ++++---- spec/views/about/show.html.haml_spec.rb | 20 +--- 30 files changed, 473 insertions(+), 196 deletions(-) create mode 100644 app/controllers/api/v2/instances_controller.rb delete mode 100644 app/javascript/mastodon/actions/rules.js create mode 100644 app/javascript/mastodon/actions/server.js create mode 100644 app/javascript/mastodon/components/server_banner.js delete mode 100644 app/javascript/mastodon/reducers/rules.js create mode 100644 app/javascript/mastodon/reducers/server.js create mode 100644 app/serializers/rest/v1/instance_serializer.rb (limited to 'app/javascript/styles') diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb index 4fc2fbe34..8da4a19ab 100644 --- a/app/controllers/about_controller.rb +++ b/app/controllers/about_controller.rb @@ -18,7 +18,7 @@ class AboutController < ApplicationController def more flash.now[:notice] = I18n.t('about.instance_actor_flash') if params[:instance_actor] - toc_generator = TOCGenerator.new(@instance_presenter.site_extended_description) + toc_generator = TOCGenerator.new(@instance_presenter.extended_description) @rules = Rule.ordered @contents = toc_generator.html diff --git a/app/controllers/api/v1/instances_controller.rb b/app/controllers/api/v1/instances_controller.rb index 5b5058a7b..913319a86 100644 --- a/app/controllers/api/v1/instances_controller.rb +++ b/app/controllers/api/v1/instances_controller.rb @@ -6,6 +6,6 @@ class Api::V1::InstancesController < Api::BaseController def show expires_in 3.minutes, public: true - render_with_cache json: {}, serializer: REST::InstanceSerializer, root: 'instance' + render_with_cache json: InstancePresenter.new, serializer: REST::V1::InstanceSerializer, root: 'instance' end end diff --git a/app/controllers/api/v2/instances_controller.rb b/app/controllers/api/v2/instances_controller.rb new file mode 100644 index 000000000..bcd90cff2 --- /dev/null +++ b/app/controllers/api/v2/instances_controller.rb @@ -0,0 +1,8 @@ +# frozen_string_literal: true + +class Api::V2::InstancesController < Api::V1::InstancesController + def show + expires_in 3.minutes, public: true + render_with_cache json: InstancePresenter.new, serializer: REST::InstanceSerializer, root: 'instance' + end +end diff --git a/app/javascript/mastodon/actions/rules.js b/app/javascript/mastodon/actions/rules.js deleted file mode 100644 index 34e60a121..000000000 --- a/app/javascript/mastodon/actions/rules.js +++ /dev/null @@ -1,27 +0,0 @@ -import api from '../api'; - -export const RULES_FETCH_REQUEST = 'RULES_FETCH_REQUEST'; -export const RULES_FETCH_SUCCESS = 'RULES_FETCH_SUCCESS'; -export const RULES_FETCH_FAIL = 'RULES_FETCH_FAIL'; - -export const fetchRules = () => (dispatch, getState) => { - dispatch(fetchRulesRequest()); - - api(getState) - .get('/api/v1/instance').then(({ data }) => dispatch(fetchRulesSuccess(data.rules))) - .catch(err => dispatch(fetchRulesFail(err))); -}; - -const fetchRulesRequest = () => ({ - type: RULES_FETCH_REQUEST, -}); - -const fetchRulesSuccess = rules => ({ - type: RULES_FETCH_SUCCESS, - rules, -}); - -const fetchRulesFail = error => ({ - type: RULES_FETCH_FAIL, - error, -}); diff --git a/app/javascript/mastodon/actions/server.js b/app/javascript/mastodon/actions/server.js new file mode 100644 index 000000000..af8fef780 --- /dev/null +++ b/app/javascript/mastodon/actions/server.js @@ -0,0 +1,30 @@ +import api from '../api'; +import { importFetchedAccount } from './importer'; + +export const SERVER_FETCH_REQUEST = 'Server_FETCH_REQUEST'; +export const SERVER_FETCH_SUCCESS = 'Server_FETCH_SUCCESS'; +export const SERVER_FETCH_FAIL = 'Server_FETCH_FAIL'; + +export const fetchServer = () => (dispatch, getState) => { + dispatch(fetchServerRequest()); + + api(getState) + .get('/api/v2/instance').then(({ data }) => { + if (data.contact.account) dispatch(importFetchedAccount(data.contact.account)); + dispatch(fetchServerSuccess(data)); + }).catch(err => dispatch(fetchServerFail(err))); +}; + +const fetchServerRequest = () => ({ + type: SERVER_FETCH_REQUEST, +}); + +const fetchServerSuccess = server => ({ + type: SERVER_FETCH_SUCCESS, + server, +}); + +const fetchServerFail = error => ({ + type: SERVER_FETCH_FAIL, + error, +}); diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index af9f119c8..36429e647 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -9,6 +9,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { me } from '../initial_state'; import RelativeTimestamp from './relative_timestamp'; +import Skeleton from 'mastodon/components/skeleton'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -26,7 +27,7 @@ export default @injectIntl class Account extends ImmutablePureComponent { static propTypes = { - account: ImmutablePropTypes.map.isRequired, + account: ImmutablePropTypes.map, onFollow: PropTypes.func.isRequired, onBlock: PropTypes.func.isRequired, onMute: PropTypes.func.isRequired, @@ -67,7 +68,16 @@ class Account extends ImmutablePureComponent { const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction } = this.props; if (!account) { - return
; + return ( +
+
+
+
+ +
+
+
+ ); } if (hidden) { diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js index 7ccfbd0cd..e9139ab0f 100644 --- a/app/javascript/mastodon/components/display_name.js +++ b/app/javascript/mastodon/components/display_name.js @@ -2,11 +2,12 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { autoPlayGif } from 'mastodon/initial_state'; +import Skeleton from 'mastodon/components/skeleton'; export default class DisplayName extends React.PureComponent { static propTypes = { - account: ImmutablePropTypes.map.isRequired, + account: ImmutablePropTypes.map, others: ImmutablePropTypes.list, localDomain: PropTypes.string, }; @@ -48,7 +49,7 @@ export default class DisplayName extends React.PureComponent { if (others.size - 2 > 0) { suffix = `+${others.size - 2}`; } - } else { + } else if ((others && others.size > 0) || this.props.account) { if (others && others.size > 0) { account = others.first(); } else { @@ -63,6 +64,9 @@ export default class DisplayName extends React.PureComponent { displayName = ; suffix = @{acct}; + } else { + displayName = ; + suffix = ; } return ( diff --git a/app/javascript/mastodon/components/server_banner.js b/app/javascript/mastodon/components/server_banner.js new file mode 100644 index 000000000..bdd7f7380 --- /dev/null +++ b/app/javascript/mastodon/components/server_banner.js @@ -0,0 +1,91 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { domain } from 'mastodon/initial_state'; +import { fetchServer } from 'mastodon/actions/server'; +import { connect } from 'react-redux'; +import Account from 'mastodon/containers/account_container'; +import ShortNumber from 'mastodon/components/short_number'; +import Skeleton from 'mastodon/components/skeleton'; +import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; + +const messages = defineMessages({ + aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' }, +}); + +const mapStateToProps = state => ({ + server: state.get('server'), +}); + +export default @connect(mapStateToProps) +@injectIntl +class ServerBanner extends React.PureComponent { + + static propTypes = { + server: PropTypes.object, + dispatch: PropTypes.func, + intl: PropTypes.object, + }; + + componentDidMount () { + const { dispatch } = this.props; + dispatch(fetchServer()); + } + + render () { + const { server, intl } = this.props; + const isLoading = server.get('isLoading'); + + return ( +
+
+ {domain}, mastodon: Mastodon }} /> +
+ + {server.get('title')} + +
+ {isLoading ? ( + <> + +
+ +
+ + + ) : server.get('description')} +
+ +
+
+

+ + +
+ +
+

+ + {isLoading ? ( + <> + +
+ + + ) : ( + <> + +
+ + + )} +
+
+ +
+ + +
+ ); + } + +} diff --git a/app/javascript/mastodon/features/report/rules.js b/app/javascript/mastodon/features/report/rules.js index f2db0d9e4..2cb4a95b5 100644 --- a/app/javascript/mastodon/features/report/rules.js +++ b/app/javascript/mastodon/features/report/rules.js @@ -7,7 +7,7 @@ import Button from 'mastodon/components/button'; import Option from './components/option'; const mapStateToProps = state => ({ - rules: state.get('rules'), + rules: state.getIn(['server', 'rules']), }); export default @connect(mapStateToProps) diff --git a/app/javascript/mastodon/features/ui/components/compose_panel.js b/app/javascript/mastodon/features/ui/components/compose_panel.js index 655c202fa..1d481eab5 100644 --- a/app/javascript/mastodon/features/ui/components/compose_panel.js +++ b/app/javascript/mastodon/features/ui/components/compose_panel.js @@ -5,6 +5,7 @@ import SearchContainer from 'mastodon/features/compose/containers/search_contain import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container'; import NavigationContainer from 'mastodon/features/compose/containers/navigation_container'; import LinkFooter from './link_footer'; +import ServerBanner from 'mastodon/components/server_banner'; import { changeComposing } from 'mastodon/actions/compose'; export default @connect() @@ -35,6 +36,7 @@ class ComposePanel extends React.PureComponent { {!signedIn && ( +
)} diff --git a/app/javascript/mastodon/features/ui/components/report_modal.js b/app/javascript/mastodon/features/ui/components/report_modal.js index 744dd248b..264da07ce 100644 --- a/app/javascript/mastodon/features/ui/components/report_modal.js +++ b/app/javascript/mastodon/features/ui/components/report_modal.js @@ -2,7 +2,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { submitReport } from 'mastodon/actions/reports'; import { expandAccountTimeline } from 'mastodon/actions/timelines'; -import { fetchRules } from 'mastodon/actions/rules'; +import { fetchServer } from 'mastodon/actions/server'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { makeGetAccount } from 'mastodon/selectors'; @@ -117,7 +117,7 @@ class ReportModal extends ImmutablePureComponent { const { dispatch, accountId } = this.props; dispatch(expandAccountTimeline(accountId, { withReplies: true })); - dispatch(fetchRules()); + dispatch(fetchServer()); } render () { diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 4e37908c8..bc6ff1866 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -13,7 +13,7 @@ import { debounce } from 'lodash'; import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose'; import { expandHomeTimeline } from '../../actions/timelines'; import { expandNotifications } from '../../actions/notifications'; -import { fetchRules } from '../../actions/rules'; +import { fetchServer } from '../../actions/server'; import { clearHeight } from '../../actions/height_cache'; import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app'; import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers'; @@ -392,7 +392,7 @@ class UI extends React.PureComponent { this.props.dispatch(expandHomeTimeline()); this.props.dispatch(expandNotifications()); - setTimeout(() => this.props.dispatch(fetchRules()), 3000); + setTimeout(() => this.props.dispatch(fetchServer()), 3000); } this.hotkeys.__mousetrap__.stopCallback = (e, element) => { diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js index 81607a03b..9ecbfe576 100644 --- a/app/javascript/mastodon/initial_state.js +++ b/app/javascript/mastodon/initial_state.js @@ -28,6 +28,5 @@ export const title = getMeta('title'); export const cropImages = getMeta('crop_images'); export const disableSwiping = getMeta('disable_swiping'); export const languages = initialState && initialState.languages; -export const server = initialState && initialState.server; export default initialState; diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js index d3d0303df..bccdc1865 100644 --- a/app/javascript/mastodon/reducers/index.js +++ b/app/javascript/mastodon/reducers/index.js @@ -17,7 +17,7 @@ import status_lists from './status_lists'; import mutes from './mutes'; import blocks from './blocks'; import boosts from './boosts'; -import rules from './rules'; +import server from './server'; import contexts from './contexts'; import compose from './compose'; import search from './search'; @@ -62,7 +62,7 @@ const reducers = { mutes, blocks, boosts, - rules, + server, contexts, compose, search, diff --git a/app/javascript/mastodon/reducers/rules.js b/app/javascript/mastodon/reducers/rules.js deleted file mode 100644 index c1180b520..000000000 --- a/app/javascript/mastodon/reducers/rules.js +++ /dev/null @@ -1,13 +0,0 @@ -import { RULES_FETCH_SUCCESS } from 'mastodon/actions/rules'; -import { List as ImmutableList, fromJS } from 'immutable'; - -const initialState = ImmutableList(); - -export default function rules(state = initialState, action) { - switch (action.type) { - case RULES_FETCH_SUCCESS: - return fromJS(action.rules); - default: - return state; - } -} diff --git a/app/javascript/mastodon/reducers/server.js b/app/javascript/mastodon/reducers/server.js new file mode 100644 index 000000000..68131c6dd --- /dev/null +++ b/app/javascript/mastodon/reducers/server.js @@ -0,0 +1,19 @@ +import { SERVER_FETCH_REQUEST, SERVER_FETCH_SUCCESS, SERVER_FETCH_FAIL } from 'mastodon/actions/server'; +import { Map as ImmutableMap, fromJS } from 'immutable'; + +const initialState = ImmutableMap({ + isLoading: true, +}); + +export default function server(state = initialState, action) { + switch (action.type) { + case SERVER_FETCH_REQUEST: + return state.set('isLoading', true); + case SERVER_FETCH_SUCCESS: + return fromJS(action.server).set('isLoading', false); + case SERVER_FETCH_FAIL: + return state.set('isLoading', false); + default: + return state; + } +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index e831fce53..4bdd5accf 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -8021,3 +8021,85 @@ noscript { } } } + +.server-banner { + padding: 20px 0; + + &__introduction { + color: $darker-text-color; + margin-bottom: 20px; + + strong { + font-weight: 600; + } + + a { + color: inherit; + text-decoration: underline; + + &:hover, + &:active, + &:focus { + text-decoration: none; + } + } + } + + &__hero { + display: block; + border-radius: 4px; + width: 100%; + height: auto; + margin-bottom: 20px; + aspect-ratio: 1.9; + border: 0; + background: $ui-base-color; + object-fit: cover; + } + + &__description { + margin-bottom: 20px; + } + + &__meta { + display: flex; + gap: 10px; + max-width: 100%; + + &__column { + flex: 0 0 auto; + width: calc(50% - 5px); + overflow: hidden; + } + } + + &__number { + font-weight: 600; + color: $primary-text-color; + } + + &__number-label { + color: $darker-text-color; + font-weight: 500; + } + + h4 { + text-transform: uppercase; + color: $darker-text-color; + margin-bottom: 10px; + font-weight: 600; + } + + .account { + padding: 0; + border: 0; + } + + .account__avatar-wrapper { + margin-left: 0; + } + + .spacer { + margin: 10px 0; + } +} diff --git a/app/presenters/instance_presenter.rb b/app/presenters/instance_presenter.rb index 3e85faa92..c461ac55f 100644 --- a/app/presenters/instance_presenter.rb +++ b/app/presenters/instance_presenter.rb @@ -1,19 +1,51 @@ # frozen_string_literal: true -class InstancePresenter - delegate( - :site_contact_email, - :site_title, - :site_short_description, - :site_description, - :site_extended_description, - :site_terms, - :closed_registrations_message, - to: Setting - ) - - def contact_account - Account.find_local(Setting.site_contact_username.strip.gsub(/\A@/, '')) +class InstancePresenter < ActiveModelSerializers::Model + attributes :domain, :title, :version, :source_url, + :description, :languages, :rules, :contact + + class ContactPresenter < ActiveModelSerializers::Model + attributes :email, :account + + def email + Setting.site_contact_email + end + + def account + Account.find_local(Setting.site_contact_username.strip.gsub(/\A@/, '')) + end + end + + def contact + ContactPresenter.new + end + + def closed_registrations_message + Setting.closed_registrations_message + end + + def description + Setting.site_short_description + end + + def extended_description + Setting.site_extended_description + end + + def privacy_policy + Setting.site_terms + end + + def domain + Rails.configuration.x.local_domain + end + + def title + Setting.site_title + end + + def languages + [I18n.default_locale] end def rules @@ -40,8 +72,8 @@ class InstancePresenter Rails.cache.fetch('sample_accounts', expires_in: 12.hours) { Account.local.discoverable.popular.limit(3) } end - def version_number - Mastodon::Version + def version + Mastodon::Version.to_s end def source_url diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb index 87f4db83d..1a49182a8 100644 --- a/app/serializers/initial_state_serializer.rb +++ b/app/serializers/initial_state_serializer.rb @@ -5,23 +5,24 @@ class InitialStateSerializer < ActiveModel::Serializer attributes :meta, :compose, :accounts, :media_attachments, :settings, - :languages, :server + :languages has_one :push_subscription, serializer: REST::WebPushSubscriptionSerializer has_one :role, serializer: REST::RoleSerializer + # rubocop:disable Metrics/AbcSize def meta store = { streaming_api_base_url: Rails.configuration.x.streaming_api_base_url, access_token: object.token, locale: I18n.locale, - domain: Rails.configuration.x.local_domain, - title: instance_presenter.site_title, + domain: instance_presenter.domain, + title: instance_presenter.title, admin: object.admin&.id&.to_s, search_enabled: Chewy.enabled?, repository: Mastodon::Version.repository, - source_url: Mastodon::Version.source_url, - version: Mastodon::Version.to_s, + source_url: instance_presenter.source_url, + version: instance_presenter.version, limited_federation_mode: Rails.configuration.x.whitelist_mode, mascot: instance_presenter.mascot&.file&.url, profile_directory: Setting.profile_directory, @@ -54,6 +55,7 @@ class InitialStateSerializer < ActiveModel::Serializer store end + # rubocop:enable Metrics/AbcSize def compose store = {} @@ -85,13 +87,6 @@ class InitialStateSerializer < ActiveModel::Serializer LanguagesHelper::SUPPORTED_LOCALES.map { |(key, value)| [key, value[0], value[1]] } end - def server - { - hero: instance_presenter.hero&.file&.url || instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), - description: instance_presenter.site_short_description.presence || I18n.t('about.about_mastodon_html'), - } - end - private def instance_presenter diff --git a/app/serializers/manifest_serializer.rb b/app/serializers/manifest_serializer.rb index 9827323a8..6b5296480 100644 --- a/app/serializers/manifest_serializer.rb +++ b/app/serializers/manifest_serializer.rb @@ -22,11 +22,11 @@ class ManifestSerializer < ActiveModel::Serializer :share_target, :shortcuts def name - object.site_title + object.title end def short_name - object.site_title + object.title end def icons diff --git a/app/serializers/rest/instance_serializer.rb b/app/serializers/rest/instance_serializer.rb index 9cc245422..f4ea49427 100644 --- a/app/serializers/rest/instance_serializer.rb +++ b/app/serializers/rest/instance_serializer.rb @@ -1,61 +1,39 @@ # frozen_string_literal: true class REST::InstanceSerializer < ActiveModel::Serializer - include RoutingHelper - - attributes :uri, :title, :short_description, :description, :email, - :version, :urls, :stats, :thumbnail, - :languages, :registrations, :approval_required, :invites_enabled, - :configuration - - has_one :contact_account, serializer: REST::AccountSerializer - - has_many :rules, serializer: REST::RuleSerializer - - delegate :contact_account, :rules, to: :instance_presenter - - def uri - Rails.configuration.x.local_domain - end + class ContactSerializer < ActiveModel::Serializer + attributes :email - def title - Setting.site_title + has_one :account, serializer: REST::AccountSerializer end - def short_description - Setting.site_short_description - end - - def description - Setting.site_description - end + include RoutingHelper - def email - Setting.site_contact_email - end + attributes :domain, :title, :version, :source_url, :description, + :usage, :thumbnail, :languages, :configuration, + :registrations - def version - Mastodon::Version.to_s - end + has_one :contact, serializer: ContactSerializer + has_many :rules, serializer: REST::RuleSerializer def thumbnail - instance_presenter.thumbnail ? full_asset_url(instance_presenter.thumbnail.file.url) : full_pack_url('media/images/preview.png') + object.thumbnail ? full_asset_url(object.thumbnail.file.url) : full_pack_url('media/images/preview.png') end - def stats + def usage { - user_count: instance_presenter.user_count, - status_count: instance_presenter.status_count, - domain_count: instance_presenter.domain_count, + users: { + active_month: object.active_user_count(4), + }, } end - def urls - { streaming_api: Rails.configuration.x.streaming_api_base_url } - end - def configuration { + urls: { + streaming: Rails.configuration.x.streaming_api_base_url, + }, + statuses: { max_characters: StatusLengthValidator::MAX_CHARS, max_media_attachments: 4, @@ -80,25 +58,10 @@ class REST::InstanceSerializer < ActiveModel::Serializer } end - def languages - [I18n.default_locale] - end - def registrations - Setting.registrations_mode != 'none' && !Rails.configuration.x.single_user_mode - end - - def approval_required - Setting.registrations_mode == 'approved' - end - - def invites_enabled - UserRole.everyone.can?(:invite_users) - end - - private - - def instance_presenter - @instance_presenter ||= InstancePresenter.new + { + enabled: Setting.registrations_mode != 'none' && !Rails.configuration.x.single_user_mode, + approval_required: Setting.registrations_mode == 'approved', + } end end diff --git a/app/serializers/rest/v1/instance_serializer.rb b/app/serializers/rest/v1/instance_serializer.rb new file mode 100644 index 000000000..47fa086fc --- /dev/null +++ b/app/serializers/rest/v1/instance_serializer.rb @@ -0,0 +1,102 @@ +# frozen_string_literal: true + +class REST::V1::InstanceSerializer < ActiveModel::Serializer + include RoutingHelper + + attributes :uri, :title, :short_description, :description, :email, + :version, :urls, :stats, :thumbnail, + :languages, :registrations, :approval_required, :invites_enabled, + :configuration + + has_one :contact_account, serializer: REST::AccountSerializer + + has_many :rules, serializer: REST::RuleSerializer + + def uri + object.domain + end + + def short_description + object.description + end + + def description + Setting.site_description # Legacy + end + + def email + object.contact.email + end + + def contact_account + object.contact.account + end + + def thumbnail + instance_presenter.thumbnail ? full_asset_url(instance_presenter.thumbnail.file.url) : full_pack_url('media/images/preview.png') + end + + def stats + { + user_count: instance_presenter.user_count, + status_count: instance_presenter.status_count, + domain_count: instance_presenter.domain_count, + } + end + + def urls + { streaming_api: Rails.configuration.x.streaming_api_base_url } + end + + def usage + { + users: { + active_month: instance_presenter.active_user_count(4), + }, + } + end + + def configuration + { + statuses: { + max_characters: StatusLengthValidator::MAX_CHARS, + max_media_attachments: 4, + characters_reserved_per_url: StatusLengthValidator::URL_PLACEHOLDER_CHARS, + }, + + media_attachments: { + supported_mime_types: MediaAttachment::IMAGE_MIME_TYPES + MediaAttachment::VIDEO_MIME_TYPES + MediaAttachment::AUDIO_MIME_TYPES, + image_size_limit: MediaAttachment::IMAGE_LIMIT, + image_matrix_limit: Attachmentable::MAX_MATRIX_LIMIT, + video_size_limit: MediaAttachment::VIDEO_LIMIT, + video_frame_rate_limit: MediaAttachment::MAX_VIDEO_FRAME_RATE, + video_matrix_limit: MediaAttachment::MAX_VIDEO_MATRIX_LIMIT, + }, + + polls: { + max_options: PollValidator::MAX_OPTIONS, + max_characters_per_option: PollValidator::MAX_OPTION_CHARS, + min_expiration: PollValidator::MIN_EXPIRATION, + max_expiration: PollValidator::MAX_EXPIRATION, + }, + } + end + + def registrations + Setting.registrations_mode != 'none' && !Rails.configuration.x.single_user_mode + end + + def approval_required + Setting.registrations_mode == 'approved' + end + + def invites_enabled + UserRole.everyone.can?(:invite_users) + end + + private + + def instance_presenter + @instance_presenter ||= InstancePresenter.new + end +end diff --git a/app/views/about/more.html.haml b/app/views/about/more.html.haml index 3b48afc0c..a5a10b620 100644 --- a/app/views/about/more.html.haml +++ b/app/views/about/more.html.haml @@ -9,7 +9,7 @@ .column-0 .public-account-header.public-account-header--no-bar .public-account-header__image - = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title, class: 'parallax' + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title, class: 'parallax' .column-1 .landing-page__call-to-action{ dir: 'ltr' } @@ -31,14 +31,14 @@ .contact-widget %h4= t 'about.administered_by' - = account_link_to(@instance_presenter.contact_account) + = account_link_to(@instance_presenter.contact.account) - - if @instance_presenter.site_contact_email.present? + - if @instance_presenter.contact.email.present? %h4 = succeed ':' do = t 'about.contact' - = mail_to @instance_presenter.site_contact_email, nil, title: @instance_presenter.site_contact_email + = mail_to @instance_presenter.contact.email, nil, title: @instance_presenter.contact.email .column-3 = render 'application/flashes' diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index d61b3cd51..75124d5e2 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -40,11 +40,11 @@ .hero-widget .hero-widget__img - = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title .hero-widget__text %p - = @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html') + = @instance_presenter.description.html_safe.presence || t('about.about_mastodon_html') = link_to about_more_path do = t('about.learn_more') = fa_icon 'angle-double-right' @@ -53,7 +53,7 @@ .hero-widget__footer__column %h4= t 'about.administered_by' - = account_link_to @instance_presenter.contact_account + = account_link_to @instance_presenter.contact.account .hero-widget__footer__column %h4= t 'about.server_stats' diff --git a/app/views/application/_sidebar.html.haml b/app/views/application/_sidebar.html.haml index cc157bf47..eb2813dd0 100644 --- a/app/views/application/_sidebar.html.haml +++ b/app/views/application/_sidebar.html.haml @@ -1,9 +1,9 @@ .hero-widget .hero-widget__img - = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title .hero-widget__text - %p= @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html') + %p= @instance_presenter.description.html_safe.presence || t('about.about_mastodon_html') - if Setting.trends && !(user_signed_in? && !current_user.setting_trends) - trends = Trends.tags.query.allowed.limit(3) diff --git a/app/views/privacy/show.html.haml b/app/views/privacy/show.html.haml index 9d076a91b..cdd38a595 100644 --- a/app/views/privacy/show.html.haml +++ b/app/views/privacy/show.html.haml @@ -4,6 +4,6 @@ .grid .column-0 .box-widget - .rich-formatting= @instance_presenter.site_terms.html_safe.presence || t('terms.body_html') + .rich-formatting= @instance_presenter.privacy_policy.html_safe.presence || t('terms.body_html') .column-1 = render 'application/sidebar' diff --git a/app/views/shared/_og.html.haml b/app/views/shared/_og.html.haml index 7feae1b8b..b54ab2429 100644 --- a/app/views/shared/_og.html.haml +++ b/app/views/shared/_og.html.haml @@ -1,12 +1,12 @@ - thumbnail = @instance_presenter.thumbnail -- description ||= strip_tags(@instance_presenter.site_short_description.presence || t('about.about_mastodon_html')) +- description ||= strip_tags(@instance_presenter.description.presence || t('about.about_mastodon_html')) %meta{ name: 'description', content: description }/ = opengraph 'og:site_name', t('about.hosted_on', domain: site_hostname) = opengraph 'og:url', url_for(only_path: false) = opengraph 'og:type', 'website' -= opengraph 'og:title', @instance_presenter.site_title += opengraph 'og:title', @instance_presenter.title = opengraph 'og:description', description = opengraph 'og:image', full_asset_url(thumbnail&.file&.url || asset_pack_path('media/images/preview.png', protocol: :request)) = opengraph 'og:image:width', thumbnail ? thumbnail.meta['width'] : '1200' diff --git a/config/routes.rb b/config/routes.rb index d2ede87d3..188898fd0 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -616,10 +616,12 @@ Rails.application.routes.draw do end namespace :v2 do - resources :media, only: [:create] get '/search', to: 'search#index', as: :search + + resources :media, only: [:create] resources :suggestions, only: [:index] resources :filters, only: [:index, :create, :show, :update, :destroy] + resource :instance, only: [:show] namespace :admin do resources :accounts, only: [:index] diff --git a/spec/presenters/instance_presenter_spec.rb b/spec/presenters/instance_presenter_spec.rb index 973b3e23c..a0a8628e8 100644 --- a/spec/presenters/instance_presenter_spec.rb +++ b/spec/presenters/instance_presenter_spec.rb @@ -3,21 +3,20 @@ require 'rails_helper' describe InstancePresenter do let(:instance_presenter) { InstancePresenter.new } - context do + describe '#description' do around do |example| - site_description = Setting.site_description + site_description = Setting.site_short_description example.run - Setting.site_description = site_description + Setting.site_short_description = site_description end it "delegates site_description to Setting" do - Setting.site_description = "Site desc" - - expect(instance_presenter.site_description).to eq "Site desc" + Setting.site_short_description = "Site desc" + expect(instance_presenter.description).to eq "Site desc" end end - context do + describe '#extended_description' do around do |example| site_extended_description = Setting.site_extended_description example.run @@ -26,12 +25,11 @@ describe InstancePresenter do it "delegates site_extended_description to Setting" do Setting.site_extended_description = "Extended desc" - - expect(instance_presenter.site_extended_description).to eq "Extended desc" + expect(instance_presenter.extended_description).to eq "Extended desc" end end - context do + describe '#email' do around do |example| site_contact_email = Setting.site_contact_email example.run @@ -40,12 +38,11 @@ describe InstancePresenter do it "delegates contact_email to Setting" do Setting.site_contact_email = "admin@example.com" - - expect(instance_presenter.site_contact_email).to eq "admin@example.com" + expect(instance_presenter.contact.email).to eq "admin@example.com" end end - describe "contact_account" do + describe '#account' do around do |example| site_contact_username = Setting.site_contact_username example.run @@ -55,12 +52,11 @@ describe InstancePresenter do it "returns the account for the site contact username" do Setting.site_contact_username = "aaa" account = Fabricate(:account, username: "aaa") - - expect(instance_presenter.contact_account).to eq(account) + expect(instance_presenter.contact.account).to eq(account) end end - describe "user_count" do + describe '#user_count' do it "returns the number of site users" do Rails.cache.write 'user_count', 123 @@ -68,7 +64,7 @@ describe InstancePresenter do end end - describe "status_count" do + describe '#status_count' do it "returns the number of local statuses" do Rails.cache.write 'local_status_count', 234 @@ -76,7 +72,7 @@ describe InstancePresenter do end end - describe "domain_count" do + describe '#domain_count' do it "returns the number of known domains" do Rails.cache.write 'distinct_domain_count', 345 @@ -84,9 +80,9 @@ describe InstancePresenter do end end - describe '#version_number' do - it 'returns Mastodon::Version' do - expect(instance_presenter.version_number).to be(Mastodon::Version) + describe '#version' do + it 'returns string' do + expect(instance_presenter.version).to be_a String end end diff --git a/spec/views/about/show.html.haml_spec.rb b/spec/views/about/show.html.haml_spec.rb index 4eab97da9..bf6e19d2b 100644 --- a/spec/views/about/show.html.haml_spec.rb +++ b/spec/views/about/show.html.haml_spec.rb @@ -12,25 +12,7 @@ describe 'about/show.html.haml', without_verify_partial_doubles: true do end it 'has valid open graph tags' do - instance_presenter = double( - :instance_presenter, - site_title: 'something', - site_short_description: 'something', - site_description: 'something', - version_number: '1.0', - source_url: 'https://github.com/mastodon/mastodon', - open_registrations: false, - thumbnail: nil, - hero: nil, - mascot: nil, - user_count: 420, - status_count: 69, - active_user_count: 420, - contact_account: nil, - sample_accounts: [] - ) - - assign(:instance_presenter, instance_presenter) + assign(:instance_presenter, InstancePresenter.new) render header_tags = view.content_for(:header_tags) -- cgit From 0e41d360c068deb8655dc1b9facfa4c15985c271 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 5 Oct 2022 07:02:09 +0200 Subject: Change font size of active users in server banner to be larger in web UI (#19295) --- app/javascript/styles/mastodon/components.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 4bdd5accf..491aec339 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -8076,11 +8076,13 @@ noscript { &__number { font-weight: 600; color: $primary-text-color; + font-size: 14px; } &__number-label { color: $darker-text-color; font-weight: 500; + font-size: 14px; } h4 { -- cgit From 679274465b3a2aaf87a13553f08104d6d3f1d275 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 5 Oct 2022 18:57:33 +0200 Subject: Add server rules to sign-up flow (#19296) --- app/controllers/auth/registrations_controller.rb | 16 +++++++- app/javascript/styles/mastodon/containers.scss | 6 +-- app/javascript/styles/mastodon/forms.scss | 49 +++++++++++++++++++++--- app/views/auth/registrations/new.html.haml | 29 +++++++------- app/views/auth/registrations/rules.html.haml | 20 ++++++++++ config/locales/en.yml | 11 ++++-- 6 files changed, 101 insertions(+), 30 deletions(-) create mode 100644 app/views/auth/registrations/rules.html.haml (limited to 'app/javascript/styles') diff --git a/app/controllers/auth/registrations_controller.rb b/app/controllers/auth/registrations_controller.rb index 7e86e01ba..84a802447 100644 --- a/app/controllers/auth/registrations_controller.rb +++ b/app/controllers/auth/registrations_controller.rb @@ -14,6 +14,8 @@ class Auth::RegistrationsController < Devise::RegistrationsController before_action :set_body_classes, only: [:new, :create, :edit, :update] before_action :require_not_suspended!, only: [:update] before_action :set_cache_headers, only: [:edit, :update] + before_action :set_rules, only: :new + before_action :require_rules_acceptance!, only: :new before_action :set_registration_form_time, only: :new skip_before_action :require_functional!, only: [:edit, :update] @@ -55,7 +57,7 @@ class Auth::RegistrationsController < Devise::RegistrationsController def configure_sign_up_params devise_parameter_sanitizer.permit(:sign_up) do |u| - u.permit({ account_attributes: [:username], invite_request_attributes: [:text] }, :email, :password, :password_confirmation, :invite_code, :agreement, :website, :confirm_password) + u.permit({ account_attributes: [:username, :display_name], invite_request_attributes: [:text] }, :email, :password, :password_confirmation, :invite_code, :agreement, :website, :confirm_password) end end @@ -138,6 +140,18 @@ class Auth::RegistrationsController < Devise::RegistrationsController forbidden if current_account.suspended? end + def set_rules + @rules = Rule.ordered + end + + def require_rules_acceptance! + return if @rules.empty? || (session[:accept_token].present? && params[:accept] == session[:accept_token]) + + @accept_token = session[:accept_token] = SecureRandom.hex + + set_locale { render :rules } + end + def set_cache_headers response.headers['Cache-Control'] = 'no-cache, no-store, max-age=0, must-revalidate' end diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 5703a64e3..01ee56219 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -9,11 +9,7 @@ } .logo-container { - margin: 100px auto 50px; - - @media screen and (max-width: 500px) { - margin: 40px auto 0; - } + margin: 50px auto; h1 { display: flex; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index a6419821f..3d67f3b56 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -6,9 +6,10 @@ code { } .form-container { - max-width: 400px; + max-width: 450px; padding: 20px; - margin: 0 auto; + padding-bottom: 50px; + margin: 50px auto; } .indicator-icon { @@ -124,11 +125,32 @@ code { } .title { - color: #d9e1e8; - font-size: 20px; - line-height: 28px; - font-weight: 400; + font-size: 28px; + line-height: 33px; + font-weight: 700; + margin-bottom: 15px; + } + + .lead { + font-size: 17px; + line-height: 22px; + color: $secondary-text-color; + margin-bottom: 30px; + } + + .rules-list { + list-style: decimal; + font-size: 17px; + line-height: 22px; + font-weight: 500; + background: transparent; + border: 0; + padding: 0.5em 1em !important; margin-bottom: 30px; + + li { + border-color: lighten($ui-base-color, 8%); + } } .hint { @@ -461,6 +483,11 @@ code { } } + .stacked-actions { + margin-top: 30px; + margin-bottom: 15px; + } + button, .button, .block-button { @@ -512,6 +539,16 @@ code { } } + .button.button-tertiary { + padding: 9px; + + &:hover, + &:focus, + &:active { + padding: 10px; + } + } + select { appearance: none; box-sizing: border-box; diff --git a/app/views/auth/registrations/new.html.haml b/app/views/auth/registrations/new.html.haml index 6981195ed..5eb3f937c 100644 --- a/app/views/auth/registrations/new.html.haml +++ b/app/views/auth/registrations/new.html.haml @@ -5,6 +5,9 @@ = render partial: 'shared/og', locals: { description: description_for_sign_up } = simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { novalidate: false }) do |f| + %h1.title= t('auth.sign_up.title', domain: site_hostname) + %p.lead= t('auth.sign_up.preamble') + = render 'shared/error_messages', object: resource - if @invite.present? && @invite.autofollow? @@ -12,31 +15,27 @@ %p.hint= t('invites.invited_by') = render 'application/card', account: @invite.user.account - = f.simple_fields_for :account do |ff| - .fields-group - = ff.input :username, wrapper: :with_label, autofocus: true, label: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', pattern: '[a-zA-Z0-9_]+', maxlength: 30 }, append: "@#{site_hostname}", hint: t('simple_form.hints.defaults.username', domain: site_hostname) - - .fields-group - = f.input :email, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' } - .fields-group - = f.input :password, wrapper: :with_label, label: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off', :minlength => User.password_length.first, :maxlength => User.password_length.last } - - .fields-group - = f.input :password_confirmation, wrapper: :with_label, label: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password'), :autocomplete => 'off' } - = f.input :confirm_password, as: :string, wrapper: :with_label, label: t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), :autocomplete => 'off' } - - = f.input :website, as: :url, wrapper: :with_label, label: t('simple_form.labels.defaults.honeypot', label: 'Website'), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: 'Website'), :autocomplete => 'off' } + = f.simple_fields_for :account do |ff| + = ff.input :display_name, wrapper: :with_label, label: false, required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.display_name'), :autocomplete => 'off', placeholder: t('simple_form.labels.defaults.display_name') } + = ff.input :username, wrapper: :with_label, label: false, required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', placeholder: t('simple_form.labels.defaults.username'), pattern: '[a-zA-Z0-9_]+', maxlength: 30 }, append: "@#{site_hostname}", hint: false + = f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }, hint: false + = f.input :password, placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'new-password', :minlength => User.password_length.first, :maxlength => User.password_length.last }, hint: false + = f.input :password_confirmation, placeholder: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password'), :autocomplete => 'new-password' }, hint: false + = f.input :confirm_password, as: :string, placeholder: t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), :autocomplete => 'off' }, hint: false + = f.input :website, as: :url, wrapper: :with_label, label: t('simple_form.labels.defaults.honeypot', label: 'Website'), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: 'Website'), :autocomplete => 'off' } - if approved_registrations? && !@invite.present? .fields-group = f.simple_fields_for :invite_request, resource.invite_request || resource.build_invite_request do |invite_request_fields| = invite_request_fields.input :text, as: :text, wrapper: :with_block_label, required: Setting.require_invite_text + + = hidden_field_tag :accept, params[:accept] = f.input :invite_code, as: :hidden .fields-group - = f.input :agreement, as: :boolean, wrapper: :with_label, label: whitelist_mode? ? t('auth.checkbox_agreement_without_rules_html', terms_path: terms_path) : t('auth.checkbox_agreement_html', rules_path: about_more_path, terms_path: terms_path), required: true + = f.input :agreement, as: :boolean, wrapper: :with_label, label: t('auth.privacy_policy_agreement_html', rules_path: about_more_path, privacy_policy_path: privacy_policy_path), required: true .actions = f.button :button, @invite.present? ? t('auth.register') : sign_up_message, type: :submit diff --git a/app/views/auth/registrations/rules.html.haml b/app/views/auth/registrations/rules.html.haml new file mode 100644 index 000000000..a41581b32 --- /dev/null +++ b/app/views/auth/registrations/rules.html.haml @@ -0,0 +1,20 @@ +- content_for :page_title do + = t('auth.register') + +- content_for :header_tags do + = render partial: 'shared/og', locals: { description: description_for_sign_up } + +.simple_form + %h1.title= t('auth.rules.title') + %p.lead= t('auth.rules.preamble', domain: site_hostname) + + %ol.rules-list + - @rules.each do |rule| + %li + .rules-list__text= rule.text + + .stacked-actions + = link_to t('auth.rules.accept'), new_user_registration_path(accept: @accept_token), class: 'button' + = link_to t('auth.rules.back'), root_path, class: 'button button-tertiary' + +.form-footer= render 'auth/shared/links' diff --git a/config/locales/en.yml b/config/locales/en.yml index 8f4ea652b..5050cee42 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1001,10 +1001,8 @@ en: warning: Be very careful with this data. Never share it with anyone! your_token: Your access token auth: - apply_for_account: Request an invite + apply_for_account: Get on waitlist change_password: Password - checkbox_agreement_html: I agree to the server rules and terms of service - checkbox_agreement_without_rules_html: I agree to the terms of service delete_account: Delete account delete_account_html: If you wish to delete your account, you can proceed here. You will be asked for confirmation. description: @@ -1023,6 +1021,7 @@ en: migrate_account: Move to a different account migrate_account_html: If you wish to redirect this account to a different one, you can configure it here. or_log_in_with: Or log in with + privacy_policy_agreement_html: I have read and agree to the privacy policy providers: cas: CAS saml: SAML @@ -1030,12 +1029,18 @@ en: registration_closed: "%{instance} is not accepting new members" resend_confirmation: Resend confirmation instructions reset_password: Reset password + rules: + preamble: These are set and enforced by the %{domain} moderators. + title: Some ground rules. security: Security set_new_password: Set new password setup: email_below_hint_html: If the below e-mail address is incorrect, you can change it here and receive a new confirmation e-mail. email_settings_hint_html: The confirmation e-mail was sent to %{email}. If that e-mail address is not correct, you can change it in account settings. title: Setup + sign_up: + preamble: With an account on this Mastodon server, you'll be able to follow any other person on the network, regardless of where their account is hosted. + title: Let's get you set up on %{domain}. status: account_status: Account status confirming: Waiting for e-mail confirmation to be completed. -- cgit From 7fb738c8372a700e1b42534cb202005b8c73b946 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 7 Oct 2022 10:14:31 +0200 Subject: Add interaction modal to logged-out web UI (#19306) --- app/javascript/mastodon/components/status.js | 1 + .../mastodon/components/status_action_bar.js | 23 ++-- .../mastodon/containers/status_container.js | 8 ++ .../mastodon/features/account/components/header.js | 3 +- .../features/account_timeline/components/header.js | 6 + .../containers/header_container.js | 8 ++ .../mastodon/features/interaction_modal/index.js | 132 +++++++++++++++++++++ .../picture_in_picture/components/footer.js | 66 ++++++++--- .../features/status/components/action_bar.js | 7 +- app/javascript/mastodon/features/status/index.js | 67 ++++++++--- .../mastodon/features/ui/components/modal_root.js | 2 + app/javascript/styles/mastodon/components.scss | 121 +++++++++++++++++++ 12 files changed, 394 insertions(+), 50 deletions(-) create mode 100644 app/javascript/mastodon/features/interaction_modal/index.js (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 0d3b51f07..381088be7 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -86,6 +86,7 @@ class Status extends ImmutablePureComponent { onToggleHidden: PropTypes.func, onToggleCollapsed: PropTypes.func, onTranslate: PropTypes.func, + onInteractionModal: PropTypes.func, muted: PropTypes.bool, hidden: PropTypes.bool, unread: PropTypes.bool, diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index 4b384e6e5..9e8cadce2 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -82,6 +82,7 @@ class StatusActionBar extends ImmutablePureComponent { onBookmark: PropTypes.func, onFilter: PropTypes.func, onAddFilter: PropTypes.func, + onInteractionModal: PropTypes.func, withDismiss: PropTypes.bool, withCounters: PropTypes.bool, scrollKey: PropTypes.string, @@ -97,10 +98,12 @@ class StatusActionBar extends ImmutablePureComponent { ] handleReplyClick = () => { - if (me) { + const { signedIn } = this.context.identity; + + if (signedIn) { this.props.onReply(this.props.status, this.context.router.history); } else { - this._openInteractionDialog('reply'); + this.props.onInteractionModal('reply', this.props.status); } } @@ -114,25 +117,25 @@ class StatusActionBar extends ImmutablePureComponent { } handleFavouriteClick = () => { - if (me) { + const { signedIn } = this.context.identity; + + if (signedIn) { this.props.onFavourite(this.props.status); } else { - this._openInteractionDialog('favourite'); + this.props.onInteractionModal('favourite', this.props.status); } } handleReblogClick = e => { - if (me) { + const { signedIn } = this.context.identity; + + if (signedIn) { this.props.onReblog(this.props.status, e); } else { - this._openInteractionDialog('reblog'); + this.props.onInteractionModal('reblog', this.props.status); } } - _openInteractionDialog = type => { - window.open(`/interact/${this.props.status.get('id')}?type=${type}`, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes'); - } - handleBookmarkClick = () => { this.props.onBookmark(this.props.status); } diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js index 9280a6ee3..294105f25 100644 --- a/app/javascript/mastodon/containers/status_container.js +++ b/app/javascript/mastodon/containers/status_container.js @@ -237,6 +237,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ dispatch(deployPictureInPicture(status.get('id'), status.getIn(['account', 'id']), type, mediaProps)); }, + onInteractionModal (type, status) { + dispatch(openModal('INTERACTION', { + type, + accountId: status.getIn(['account', 'id']), + url: status.get('url'), + })); + }, + }); export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status)); diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index e407a0d55..765b3cc1e 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -96,6 +96,7 @@ class Header extends ImmutablePureComponent { onAddToList: PropTypes.func.isRequired, onEditAccountNote: PropTypes.func.isRequired, onChangeLanguages: PropTypes.func.isRequired, + onInteractionModal: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, domain: PropTypes.string.isRequired, hidden: PropTypes.bool, @@ -177,7 +178,7 @@ class Header extends ImmutablePureComponent { } else if (account.getIn(['relationship', 'requested'])) { actionBtn = +
+ ); + } + +} + +export default @connect(mapStateToProps) +class InteractionModal extends React.PureComponent { + + static propTypes = { + displayNameHtml: PropTypes.string, + url: PropTypes.string, + type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']), + }; + + render () { + const { url, type, displayNameHtml } = this.props; + + const name = ; + + let title, actionDescription, icon; + + switch(type) { + case 'reply': + icon = ; + title = ; + actionDescription = ; + break; + case 'reblog': + icon = ; + title = ; + actionDescription = ; + break; + case 'favourite': + icon = ; + title = ; + actionDescription = ; + break; + case 'follow': + icon = ; + title = ; + actionDescription = ; + break; + } + + return ( +
+
+

{icon} {title}

+

{actionDescription}

+
+ +
+
+

+ + +
+ +
+

+

+ +
+
+
+ ); + } + +} diff --git a/app/javascript/mastodon/features/picture_in_picture/components/footer.js b/app/javascript/mastodon/features/picture_in_picture/components/footer.js index 0cb42b25a..0beb2e14d 100644 --- a/app/javascript/mastodon/features/picture_in_picture/components/footer.js +++ b/app/javascript/mastodon/features/picture_in_picture/components/footer.js @@ -43,6 +43,7 @@ class Footer extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object, + identity: PropTypes.object, }; static propTypes = { @@ -67,26 +68,44 @@ class Footer extends ImmutablePureComponent { }; handleReplyClick = () => { - const { dispatch, askReplyConfirmation, intl } = this.props; - - if (askReplyConfirmation) { - dispatch(openModal('CONFIRM', { - message: intl.formatMessage(messages.replyMessage), - confirm: intl.formatMessage(messages.replyConfirm), - onConfirm: this._performReply, - })); + const { dispatch, askReplyConfirmation, status, intl } = this.props; + const { signedIn } = this.context.identity; + + if (signedIn) { + if (askReplyConfirmation) { + dispatch(openModal('CONFIRM', { + message: intl.formatMessage(messages.replyMessage), + confirm: intl.formatMessage(messages.replyConfirm), + onConfirm: this._performReply, + })); + } else { + this._performReply(); + } } else { - this._performReply(); + dispatch(openModal('INTERACTION', { + type: 'reply', + accountId: status.getIn(['account', 'id']), + url: status.get('url'), + })); } }; handleFavouriteClick = () => { const { dispatch, status } = this.props; - - if (status.get('favourited')) { - dispatch(unfavourite(status)); + const { signedIn } = this.context.identity; + + if (signedIn) { + if (status.get('favourited')) { + dispatch(unfavourite(status)); + } else { + dispatch(favourite(status)); + } } else { - dispatch(favourite(status)); + dispatch(openModal('INTERACTION', { + type: 'favourite', + accountId: status.getIn(['account', 'id']), + url: status.get('url'), + })); } }; @@ -97,13 +116,22 @@ class Footer extends ImmutablePureComponent { handleReblogClick = e => { const { dispatch, status } = this.props; - - if (status.get('reblogged')) { - dispatch(unreblog(status)); - } else if ((e && e.shiftKey) || !boostModal) { - this._performReblog(status); + const { signedIn } = this.context.identity; + + if (signedIn) { + if (status.get('reblogged')) { + dispatch(unreblog(status)); + } else if ((e && e.shiftKey) || !boostModal) { + this._performReblog(status); + } else { + dispatch(initBoostModal({ status, onReblog: this._performReblog })); + } } else { - dispatch(initBoostModal({ status, onReblog: this._performReblog })); + dispatch(openModal('INTERACTION', { + type: 'reblog', + accountId: status.getIn(['account', 'id']), + url: status.get('url'), + })); } }; diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js index 50bda69f8..2e240c414 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.js +++ b/app/javascript/mastodon/features/status/components/action_bar.js @@ -194,6 +194,7 @@ class ActionBar extends React.PureComponent { render () { const { status, relationship, intl } = this.props; + const { signedIn, permissions } = this.context.identity; const publicStatus = ['public', 'unlisted'].includes(status.get('visibility')); const pinnableStatus = ['public', 'unlisted', 'private'].includes(status.get('visibility')); @@ -250,7 +251,7 @@ class ActionBar extends React.PureComponent { } } - if ((this.context.identity.permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) { + if ((permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) { menu.push(null); menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), href: `/admin/accounts/${status.getIn(['account', 'id'])}` }); menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses?id=${status.get('id')}` }); @@ -287,10 +288,10 @@ class ActionBar extends React.PureComponent {
{shareButton} -
+
- +
); diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js index 748dc7a92..3d238e7ee 100644 --- a/app/javascript/mastodon/features/status/index.js +++ b/app/javascript/mastodon/features/status/index.js @@ -180,6 +180,7 @@ class Status extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object, + identity: PropTypes.object, }; static propTypes = { @@ -228,10 +229,21 @@ class Status extends ImmutablePureComponent { } handleFavouriteClick = (status) => { - if (status.get('favourited')) { - this.props.dispatch(unfavourite(status)); + const { dispatch } = this.props; + const { signedIn } = this.context.identity; + + if (signedIn) { + if (status.get('favourited')) { + dispatch(unfavourite(status)); + } else { + dispatch(favourite(status)); + } } else { - this.props.dispatch(favourite(status)); + dispatch(openModal('INTERACTION', { + type: 'favourite', + accountId: status.getIn(['account', 'id']), + url: status.get('url'), + })); } } @@ -244,15 +256,25 @@ class Status extends ImmutablePureComponent { } handleReplyClick = (status) => { - let { askReplyConfirmation, dispatch, intl } = this.props; - if (askReplyConfirmation) { - dispatch(openModal('CONFIRM', { - message: intl.formatMessage(messages.replyMessage), - confirm: intl.formatMessage(messages.replyConfirm), - onConfirm: () => dispatch(replyCompose(status, this.context.router.history)), - })); + const { askReplyConfirmation, dispatch, intl } = this.props; + const { signedIn } = this.context.identity; + + if (signedIn) { + if (askReplyConfirmation) { + dispatch(openModal('CONFIRM', { + message: intl.formatMessage(messages.replyMessage), + confirm: intl.formatMessage(messages.replyConfirm), + onConfirm: () => dispatch(replyCompose(status, this.context.router.history)), + })); + } else { + dispatch(replyCompose(status, this.context.router.history)); + } } else { - dispatch(replyCompose(status, this.context.router.history)); + dispatch(openModal('INTERACTION', { + type: 'reply', + accountId: status.getIn(['account', 'id']), + url: status.get('url'), + })); } } @@ -261,14 +283,25 @@ class Status extends ImmutablePureComponent { } handleReblogClick = (status, e) => { - if (status.get('reblogged')) { - this.props.dispatch(unreblog(status)); - } else { - if ((e && e.shiftKey) || !boostModal) { - this.handleModalReblog(status); + const { dispatch } = this.props; + const { signedIn } = this.context.identity; + + if (signedIn) { + if (status.get('reblogged')) { + dispatch(unreblog(status)); } else { - this.props.dispatch(initBoostModal({ status, onReblog: this.handleModalReblog })); + if ((e && e.shiftKey) || !boostModal) { + this.handleModalReblog(status); + } else { + dispatch(initBoostModal({ status, onReblog: this.handleModalReblog })); + } } + } else { + dispatch(openModal('INTERACTION', { + type: 'reblog', + accountId: status.getIn(['account', 'id']), + url: status.get('url'), + })); } } diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index dfa89f2ce..5c273ffa4 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -13,6 +13,7 @@ import AudioModal from './audio_modal'; import ConfirmationModal from './confirmation_modal'; import SubscribedLanguagesModal from 'mastodon/features/subscribed_languages_modal'; import FocalPointModal from './focal_point_modal'; +import InteractionModal from 'mastodon/features/interaction_modal'; import { MuteModal, BlockModal, @@ -41,6 +42,7 @@ const MODAL_COMPONENTS = { 'COMPARE_HISTORY': CompareHistoryModal, 'FILTER': FilterModal, 'SUBSCRIBED_LANGUAGES': () => Promise.resolve({ default: SubscribedLanguagesModal }), + 'INTERACTION': () => Promise.resolve({ default: InteractionModal }), }; export default class ModalRoot extends React.PureComponent { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 491aec339..a3dc4c637 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4899,6 +4899,7 @@ a.status-card.compact:hover { left: 0; width: 100%; height: 100%; + box-sizing: border-box; display: flex; flex-direction: column; align-items: center; @@ -8105,3 +8106,123 @@ noscript { margin: 10px 0; } } + +.interaction-modal { + max-width: 90vw; + width: 600px; + background: $ui-base-color; + border-radius: 8px; + overflow: hidden; + position: relative; + display: block; + padding: 20px; + + h3 { + font-size: 22px; + line-height: 33px; + font-weight: 700; + text-align: center; + } + + &__icon { + color: $highlight-text-color; + margin: 0 5px; + } + + &__lead { + padding: 20px; + text-align: center; + + h3 { + margin-bottom: 15px; + } + + p { + font-size: 17px; + line-height: 22px; + color: $darker-text-color; + } + } + + &__choices { + display: flex; + + &__choice { + flex: 0 0 auto; + width: 50%; + box-sizing: border-box; + padding: 20px; + + h3 { + margin-bottom: 20px; + } + + p { + color: $darker-text-color; + margin-bottom: 20px; + } + + .button { + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + } + } + } + + @media screen and (max-width: $no-gap-breakpoint - 1px) { + &__choices { + display: block; + + &__choice { + width: auto; + margin-bottom: 20px; + } + } + } +} + +.copypaste { + display: flex; + align-items: center; + gap: 10px; + + input { + display: block; + font-family: inherit; + background: darken($ui-base-color, 8%); + border: 1px solid $highlight-text-color; + color: $darker-text-color; + border-radius: 4px; + padding: 6px 9px; + line-height: 22px; + font-size: 14px; + transition: border-color 300ms linear; + flex: 1 1 auto; + overflow: hidden; + + &:focus { + outline: 0; + background: darken($ui-base-color, 4%); + } + } + + .button { + flex: 0 0 auto; + transition: background 300ms linear; + } + + &.copied { + input { + border: 1px solid $valid-value-color; + transition: none; + } + + .button { + background: $valid-value-color; + transition: none; + } + } +} -- cgit From a2ba01132603174c43c5788a95f9ee127b684c0a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 8 Oct 2022 06:01:11 +0200 Subject: Change privacy policy to be rendered in web UI, add REST API (#19310) Source string no longer localized, Markdown instead of raw HTML --- Gemfile | 1 + Gemfile.lock | 8 +- .../v1/instances/privacy_policies_controller.rb | 18 +++++ app/controllers/privacy_controller.rb | 17 +---- .../mastodon/features/privacy_policy/index.js | 60 +++++++++++++++ .../mastodon/features/ui/components/link_footer.js | 2 +- app/javascript/mastodon/features/ui/index.js | 2 + .../mastodon/features/ui/util/async-components.js | 4 + app/javascript/styles/mastodon/components.scss | 88 +++++++++++++++++++++- app/models/privacy_policy.rb | 77 +++++++++++++++++++ app/serializers/rest/privacy_policy_serializer.rb | 19 +++++ app/views/privacy/show.html.haml | 9 +-- config/i18n-tasks.yml | 1 - config/locales/en.yml | 85 +-------------------- config/routes.rb | 3 +- 15 files changed, 282 insertions(+), 112 deletions(-) create mode 100644 app/controllers/api/v1/instances/privacy_policies_controller.rb create mode 100644 app/javascript/mastodon/features/privacy_policy/index.js create mode 100644 app/models/privacy_policy.rb create mode 100644 app/serializers/rest/privacy_policy_serializer.rb (limited to 'app/javascript/styles') diff --git a/Gemfile b/Gemfile index fedd55f2f..34899967b 100644 --- a/Gemfile +++ b/Gemfile @@ -72,6 +72,7 @@ gem 'rack-attack', '~> 6.6' gem 'rack-cors', '~> 1.1', require: 'rack/cors' gem 'rails-i18n', '~> 6.0' gem 'rails-settings-cached', '~> 0.6' +gem 'redcarpet', '~> 3.5' gem 'redis', '~> 4.5', require: ['redis', 'redis/connection/hiredis'] gem 'mario-redis-lock', '~> 1.2', require: 'redis_lock' gem 'rqrcode', '~> 2.1' diff --git a/Gemfile.lock b/Gemfile.lock index 6866ef721..5788c857d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -402,7 +402,6 @@ GEM mime-types-data (~> 3.2015) mime-types-data (3.2022.0105) mini_mime (1.1.2) - mini_portile2 (2.8.0) minitest (5.16.3) msgpack (1.5.4) multi_json (1.15.0) @@ -412,8 +411,7 @@ GEM net-ssh (>= 2.6.5, < 8.0.0) net-ssh (7.0.1) nio4r (2.5.8) - nokogiri (1.13.8) - mini_portile2 (~> 2.8.0) + nokogiri (1.13.8-x86_64-linux) racc (~> 1.4) nsa (0.2.8) activesupport (>= 4.2, < 7) @@ -539,6 +537,7 @@ GEM link_header (~> 0.0, >= 0.0.8) rdf-normalize (0.5.0) rdf (~> 3.2) + redcarpet (3.5.1) redis (4.5.1) redis-namespace (1.9.0) redis (>= 4) @@ -727,7 +726,7 @@ GEM zeitwerk (2.6.0) PLATFORMS - ruby + x86_64-linux DEPENDENCIES active_model_serializers (~> 0.10) @@ -819,6 +818,7 @@ DEPENDENCIES rails-i18n (~> 6.0) rails-settings-cached (~> 0.6) rdf-normalize (~> 0.5) + redcarpet (~> 3.5) redis (~> 4.5) redis-namespace (~> 1.9) rexml (~> 3.2) diff --git a/app/controllers/api/v1/instances/privacy_policies_controller.rb b/app/controllers/api/v1/instances/privacy_policies_controller.rb new file mode 100644 index 000000000..dbd69f54d --- /dev/null +++ b/app/controllers/api/v1/instances/privacy_policies_controller.rb @@ -0,0 +1,18 @@ +# frozen_string_literal: true + +class Api::V1::Instances::PrivacyPoliciesController < Api::BaseController + skip_before_action :require_authenticated_user!, unless: :whitelist_mode? + + before_action :set_privacy_policy + + def show + expires_in 1.day, public: true + render json: @privacy_policy, serializer: REST::PrivacyPolicySerializer + end + + private + + def set_privacy_policy + @privacy_policy = PrivacyPolicy.current + end +end diff --git a/app/controllers/privacy_controller.rb b/app/controllers/privacy_controller.rb index ced84dbe5..bc98bca51 100644 --- a/app/controllers/privacy_controller.rb +++ b/app/controllers/privacy_controller.rb @@ -1,22 +1,11 @@ # frozen_string_literal: true class PrivacyController < ApplicationController - layout 'public' - - before_action :set_instance_presenter - before_action :set_expires_in + include WebAppControllerConcern skip_before_action :require_functional! - def show; end - - private - - def set_instance_presenter - @instance_presenter = InstancePresenter.new - end - - def set_expires_in - expires_in 0, public: true + def show + expires_in 0, public: true if current_account.nil? end end diff --git a/app/javascript/mastodon/features/privacy_policy/index.js b/app/javascript/mastodon/features/privacy_policy/index.js new file mode 100644 index 000000000..b7ca03d2c --- /dev/null +++ b/app/javascript/mastodon/features/privacy_policy/index.js @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { title } from 'mastodon/initial_state'; +import { Helmet } from 'react-helmet'; +import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl'; +import Column from 'mastodon/components/column'; +import api from 'mastodon/api'; +import Skeleton from 'mastodon/components/skeleton'; + +const messages = defineMessages({ + title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' }, +}); + +export default @injectIntl +class PrivacyPolicy extends React.PureComponent { + + static propTypes = { + intl: PropTypes.object, + }; + + state = { + content: null, + lastUpdated: null, + isLoading: true, + }; + + componentDidMount () { + api().get('/api/v1/instance/privacy_policy').then(({ data }) => { + this.setState({ content: data.content, lastUpdated: data.updated_at, isLoading: false }); + }).catch(() => { + this.setState({ isLoading: false }); + }); + } + + render () { + const { intl } = this.props; + const { isLoading, content, lastUpdated } = this.state; + + return ( + +
+
+

+

: }} />

+
+ +
+
+ + + {intl.formatMessage(messages.title)} - {title} + + + ); + } + +} diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js index 2b092a182..c4ce2a985 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.js +++ b/app/javascript/mastodon/features/ui/components/link_footer.js @@ -54,7 +54,7 @@ class LinkFooter extends React.PureComponent { items.push(); items.push(); items.push(); - items.push(); + items.push(); items.push(); if (profileDirectory) { diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index bc6ff1866..bd1930368 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -52,6 +52,7 @@ import { Explore, FollowRecommendations, About, + PrivacyPolicy, } from './util/async-components'; import { me, title } from '../../initial_state'; import { closeOnboarding, INTRODUCTION_VERSION } from 'mastodon/actions/onboarding'; @@ -173,6 +174,7 @@ class SwitchingColumnsArea extends React.PureComponent { + diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js index 5907e0772..c79dc014c 100644 --- a/app/javascript/mastodon/features/ui/util/async-components.js +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -169,3 +169,7 @@ export function FilterModal () { export function About () { return import(/*webpackChunkName: "features/about" */'../../about'); } + +export function PrivacyPolicy () { + return import(/*webpackChunkName: "features/privacy_policy" */'../../privacy_policy'); +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index a3dc4c637..cc8455ce3 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2283,7 +2283,8 @@ $ui-header-height: 55px; > .scrollable { background: $ui-base-color; - border-radius: 0 0 4px 4px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } } @@ -8226,3 +8227,88 @@ noscript { } } } + +.privacy-policy { + background: $ui-base-color; + padding: 20px; + + @media screen and (min-width: $no-gap-breakpoint) { + border-radius: 4px; + } + + &__body { + margin-top: 20px; + color: $secondary-text-color; + font-size: 15px; + line-height: 22px; + + h1, + p, + ul, + ol { + margin-bottom: 20px; + } + + ul { + list-style: disc; + } + + ol { + list-style: decimal; + } + + ul, + ol { + padding-left: 1em; + } + + li { + margin-bottom: 10px; + + &::marker { + color: $darker-text-color; + } + + &:last-child { + margin-bottom: 0; + } + } + + h1 { + color: $primary-text-color; + font-size: 19px; + line-height: 24px; + font-weight: 700; + margin-top: 30px; + + &:first-child { + margin-top: 0; + } + } + + strong { + font-weight: 700; + color: $primary-text-color; + } + + em { + font-style: italic; + } + + a { + color: $highlight-text-color; + text-decoration: underline; + + &:focus, + &:hover, + &:active { + text-decoration: none; + } + } + + hr { + border: 1px solid lighten($ui-base-color, 4%); + margin: 30px 0; + } + } +} diff --git a/app/models/privacy_policy.rb b/app/models/privacy_policy.rb new file mode 100644 index 000000000..b93b6cf35 --- /dev/null +++ b/app/models/privacy_policy.rb @@ -0,0 +1,77 @@ +# frozen_string_literal: true + +class PrivacyPolicy < ActiveModelSerializers::Model + DEFAULT_PRIVACY_POLICY = <<~TXT + This privacy policy describes how %{domain} ("%{domain}", "we", "us") collects, protects and uses the personally identifiable information you may provide through the %{domain} website or its API. The policy also describes the choices available to you regarding our use of your personal information and how you can access and update this information. This policy does not apply to the practices of companies that %{domain} does not own or control, or to individuals that %{domain} does not employ or manage. + + # What information do we collect? + + - **Basic account information**: If you register on this server, you may be asked to enter a username, an e-mail address and a password. You may also enter additional profile information such as a display name and biography, and upload a profile picture and header image. The username, display name, biography, profile picture and header image are always listed publicly. + - **Posts, following and other public information**: The list of people you follow is listed publicly, the same is true for your followers. When you submit a message, the date and time is stored as well as the application you submitted the message from. Messages may contain media attachments, such as pictures and videos. Public and unlisted posts are available publicly. When you feature a post on your profile, that is also publicly available information. Your posts are delivered to your followers, in some cases it means they are delivered to different servers and copies are stored there. When you delete posts, this is likewise delivered to your followers. The action of reblogging or favouriting another post is always public. + - **Direct and followers-only posts**: All posts are stored and processed on the server. Followers-only posts are delivered to your followers and users who are mentioned in them, and direct posts are delivered only to users mentioned in them. In some cases it means they are delivered to different servers and copies are stored there. We make a good faith effort to limit the access to those posts only to authorized persons, but other servers may fail to do so. Therefore it's important to review servers your followers belong to. You may toggle an option to approve and reject new followers manually in the settings. **Please keep in mind that the operators of the server and any receiving server may view such messages**, and that recipients may screenshot, copy or otherwise re-share them. **Do not share any sensitive information over Mastodon.** + - **IPs and other metadata**: When you log in, we record the IP address you log in from, as well as the name of your browser application. All the logged in sessions are available for your review and revocation in the settings. The latest IP address used is stored for up to 12 months. We also may retain server logs which include the IP address of every request to our server. + + # What do we use your information for? + + Any of the information we collect from you may be used in the following ways: + + - To provide the core functionality of Mastodon. You can only interact with other people's content and post your own content when you are logged in. For example, you may follow other people to view their combined posts in your own personalized home timeline. + - To aid moderation of the community, for example comparing your IP address with other known ones to determine ban evasion or other violations. + - The email address you provide may be used to send you information, notifications about other people interacting with your content or sending you messages, and to respond to inquiries, and/or other requests or questions. + + # How do we protect your information? + + We implement a variety of security measures to maintain the safety of your personal information when you enter, submit, or access your personal information. Among other things, your browser session, as well as the traffic between your applications and the API, are secured with SSL, and your password is hashed using a strong one-way algorithm. You may enable two-factor authentication to further secure access to your account. + + # What is our data retention policy? + + We will make a good faith effort to: + + - Retain server logs containing the IP address of all requests to this server, in so far as such logs are kept, no more than 90 days. + - Retain the IP addresses associated with registered users no more than 12 months. + + You can request and download an archive of your content, including your posts, media attachments, profile picture, and header image. + + You may irreversibly delete your account at any time. + + # Do we use cookies? + + Yes. Cookies are small files that a site or its service provider transfers to your computer's hard drive through your Web browser (if you allow). These cookies enable the site to recognize your browser and, if you have a registered account, associate it with your registered account. + + We use cookies to understand and save your preferences for future visits. + + # Do we disclose any information to outside parties? + + We do not sell, trade, or otherwise transfer to outside parties your personally identifiable information. This does not include trusted third parties who assist us in operating our site, conducting our business, or servicing you, so long as those parties agree to keep this information confidential. We may also release your information when we believe release is appropriate to comply with the law, enforce our site policies, or protect ours or others rights, property, or safety. + + Your public content may be downloaded by other servers in the network. Your public and followers-only posts are delivered to the servers where your followers reside, and direct messages are delivered to the servers of the recipients, in so far as those followers or recipients reside on a different server than this. + + When you authorize an application to use your account, depending on the scope of permissions you approve, it may access your public profile information, your following list, your followers, your lists, all your posts, and your favourites. Applications can never access your e-mail address or password. + + # Site usage by children + + If this server is in the EU or the EEA: Our site, products and services are all directed to people who are at least 16 years old. If you are under the age of 16, per the requirements of the GDPR (General Data Protection Regulation) do not use this site. + + If this server is in the USA: Our site, products and services are all directed to people who are at least 13 years old. If you are under the age of 13, per the requirements of COPPA (Children's Online Privacy Protection Act) do not use this site. + + Law requirements can be different if this server is in another jurisdiction. + + ___ + + This document is CC-BY-SA. Originally adapted from the [Discourse privacy policy](https://github.com/discourse/discourse). + TXT + + DEFAULT_UPDATED_AT = DateTime.new(2022, 10, 7).freeze + + attributes :updated_at, :text + + def self.current + custom = Setting.find_by(var: 'site_terms') + + if custom + new(text: custom.value, updated_at: custom.updated_at) + else + new(text: DEFAULT_PRIVACY_POLICY, updated_at: DEFAULT_UPDATED_AT) + end + end +end diff --git a/app/serializers/rest/privacy_policy_serializer.rb b/app/serializers/rest/privacy_policy_serializer.rb new file mode 100644 index 000000000..f0572e714 --- /dev/null +++ b/app/serializers/rest/privacy_policy_serializer.rb @@ -0,0 +1,19 @@ +# frozen_string_literal: true + +class REST::PrivacyPolicySerializer < ActiveModel::Serializer + attributes :updated_at, :content + + def updated_at + object.updated_at.iso8601 + end + + def content + markdown.render(object.text % { domain: Rails.configuration.x.local_domain }) + end + + private + + def markdown + @markdown ||= Redcarpet::Markdown.new(Redcarpet::Render::HTML, escape_html: true, no_images: true) + end +end diff --git a/app/views/privacy/show.html.haml b/app/views/privacy/show.html.haml index cdd38a595..cfc285925 100644 --- a/app/views/privacy/show.html.haml +++ b/app/views/privacy/show.html.haml @@ -1,9 +1,4 @@ - content_for :page_title do - = t('terms.title', instance: site_hostname) + = t('privacy_policy.title') -.grid - .column-0 - .box-widget - .rich-formatting= @instance_presenter.privacy_policy.html_safe.presence || t('terms.body_html') - .column-1 - = render 'application/sidebar' += render 'shared/web_app' diff --git a/config/i18n-tasks.yml b/config/i18n-tasks.yml index 1bebae5e9..c1da42bd8 100644 --- a/config/i18n-tasks.yml +++ b/config/i18n-tasks.yml @@ -40,7 +40,6 @@ ignore_missing: - 'errors.messages.*' - 'activerecord.errors.models.doorkeeper/*' - 'sessions.{browsers,platforms}.*' - - 'terms.body_html' - 'application_mailer.salutation' - 'errors.500' - 'auth.providers.*' diff --git a/config/locales/en.yml b/config/locales/en.yml index 505a2f9fc..cdac4fb54 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1405,6 +1405,8 @@ en: other: Other posting_defaults: Posting defaults public_timelines: Public timelines + privacy_policy: + title: Privacy Policy reactions: errors: limit_reached: Limit of different reactions reached @@ -1614,89 +1616,6 @@ en: too_late: It is too late to appeal this strike tags: does_not_match_previous_name: does not match the previous name - terms: - body_html: | -

Privacy Policy

-

What information do we collect?

- -
    -
  • Basic account information: If you register on this server, you may be asked to enter a username, an e-mail address and a password. You may also enter additional profile information such as a display name and biography, and upload a profile picture and header image. The username, display name, biography, profile picture and header image are always listed publicly.
    • -
  • Posts, following and other public information: The list of people you follow is listed publicly, the same is true for your followers. When you submit a message, the date and time is stored as well as the application you submitted the message from. Messages may contain media attachments, such as pictures and videos. Public and unlisted posts are available publicly. When you feature a post on your profile, that is also publicly available information. Your posts are delivered to your followers, in some cases it means they are delivered to different servers and copies are stored there. When you delete posts, this is likewise delivered to your followers. The action of reblogging or favouriting another post is always public.
    • -
  • Direct and followers-only posts: All posts are stored and processed on the server. Followers-only posts are delivered to your followers and users who are mentioned in them, and direct posts are delivered only to users mentioned in them. In some cases it means they are delivered to different servers and copies are stored there. We make a good faith effort to limit the access to those posts only to authorized persons, but other servers may fail to do so. Therefore it's important to review servers your followers belong to. You may toggle an option to approve and reject new followers manually in the settings. Please keep in mind that the operators of the server and any receiving server may view such messages, and that recipients may screenshot, copy or otherwise re-share them. Do not share any sensitive information over Mastodon.
    • -
  • IPs and other metadata: When you log in, we record the IP address you log in from, as well as the name of your browser application. All the logged in sessions are available for your review and revocation in the settings. The latest IP address used is stored for up to 12 months. We also may retain server logs which include the IP address of every request to our server.
    • -
- -
- -

What do we use your information for?

- -

Any of the information we collect from you may be used in the following ways:

- -
    -
  • To provide the core functionality of Mastodon. You can only interact with other people's content and post your own content when you are logged in. For example, you may follow other people to view their combined posts in your own personalized home timeline.
    • -
  • To aid moderation of the community, for example comparing your IP address with other known ones to determine ban evasion or other violations.
    • -
  • The email address you provide may be used to send you information, notifications about other people interacting with your content or sending you messages, and to respond to inquiries, and/or other requests or questions.
    • -
- -
- -

How do we protect your information?

- -

We implement a variety of security measures to maintain the safety of your personal information when you enter, submit, or access your personal information. Among other things, your browser session, as well as the traffic between your applications and the API, are secured with SSL, and your password is hashed using a strong one-way algorithm. You may enable two-factor authentication to further secure access to your account.

- -
- -

What is our data retention policy?

- -

We will make a good faith effort to:

- -
    -
  • Retain server logs containing the IP address of all requests to this server, in so far as such logs are kept, no more than 90 days.
    • -
  • Retain the IP addresses associated with registered users no more than 12 months.
    • -
- -

You can request and download an archive of your content, including your posts, media attachments, profile picture, and header image.

- -

You may irreversibly delete your account at any time.

- -
- -

Do we use cookies?

- -

Yes. Cookies are small files that a site or its service provider transfers to your computer's hard drive through your Web browser (if you allow). These cookies enable the site to recognize your browser and, if you have a registered account, associate it with your registered account.

- -

We use cookies to understand and save your preferences for future visits.

- -
- -

Do we disclose any information to outside parties?

- -

We do not sell, trade, or otherwise transfer to outside parties your personally identifiable information. This does not include trusted third parties who assist us in operating our site, conducting our business, or servicing you, so long as those parties agree to keep this information confidential. We may also release your information when we believe release is appropriate to comply with the law, enforce our site policies, or protect ours or others rights, property, or safety.

- -

Your public content may be downloaded by other servers in the network. Your public and followers-only posts are delivered to the servers where your followers reside, and direct messages are delivered to the servers of the recipients, in so far as those followers or recipients reside on a different server than this.

- -

When you authorize an application to use your account, depending on the scope of permissions you approve, it may access your public profile information, your following list, your followers, your lists, all your posts, and your favourites. Applications can never access your e-mail address or password.

- -
- -

Site usage by children

- -

If this server is in the EU or the EEA: Our site, products and services are all directed to people who are at least 16 years old. If you are under the age of 16, per the requirements of the GDPR (General Data Protection Regulation) do not use this site.

- -

If this server is in the USA: Our site, products and services are all directed to people who are at least 13 years old. If you are under the age of 13, per the requirements of COPPA (Children's Online Privacy Protection Act) do not use this site.

- -

Law requirements can be different if this server is in another jurisdiction.

- -
- -

Changes to our Privacy Policy

- -

If we decide to change our privacy policy, we will post those changes on this page.

- -

This document is CC-BY-SA. It was last updated May 26, 2022.

- -

Originally adapted from the Discourse privacy policy.

- title: "%{instance} Privacy Policy" themes: contrast: Mastodon (High contrast) default: Mastodon (Dark) diff --git a/config/routes.rb b/config/routes.rb index 472e6aa6b..e6098cd17 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -486,8 +486,9 @@ Rails.application.routes.draw do resource :instance, only: [:show] do resources :peers, only: [:index], controller: 'instances/peers' - resource :activity, only: [:show], controller: 'instances/activity' resources :rules, only: [:index], controller: 'instances/rules' + resource :privacy_policy, only: [:show], controller: 'instances/privacy_policies' + resource :activity, only: [:show], controller: 'instances/activity' end resource :domain_blocks, only: [:show, :create, :destroy] -- cgit From f41ec9af05d3e2145e62f705225dbabb7e04e242 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 9 Oct 2022 06:08:37 +0200 Subject: Add dismissable hints to various timelines in web UI (#19315) Co-authored-by: Yamagishi Kazutoshi --- .../mastodon/components/dismissable_banner.js | 51 ++++++++++++++++++++++ .../mastodon/features/community_timeline/index.js | 6 +++ app/javascript/mastodon/features/explore/links.js | 11 +++++ .../mastodon/features/explore/statuses.js | 29 +++++++----- app/javascript/mastodon/features/explore/tags.js | 11 +++++ .../mastodon/features/public_timeline/index.js | 5 +++ app/javascript/mastodon/settings.js | 1 + app/javascript/styles/mastodon/components.scss | 25 +++++++++++ 8 files changed, 128 insertions(+), 11 deletions(-) create mode 100644 app/javascript/mastodon/components/dismissable_banner.js (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/dismissable_banner.js b/app/javascript/mastodon/components/dismissable_banner.js new file mode 100644 index 000000000..1ee032056 --- /dev/null +++ b/app/javascript/mastodon/components/dismissable_banner.js @@ -0,0 +1,51 @@ +import React from 'react'; +import IconButton from './icon_button'; +import PropTypes from 'prop-types'; +import { injectIntl, defineMessages } from 'react-intl'; +import { bannerSettings } from 'mastodon/settings'; + +const messages = defineMessages({ + dismiss: { id: 'dismissable_banner.dismiss', defaultMessage: 'Dismiss' }, +}); + +export default @injectIntl +class DismissableBanner extends React.PureComponent { + + static propTypes = { + id: PropTypes.string.isRequired, + children: PropTypes.node, + intl: PropTypes.object.isRequired, + }; + + state = { + visible: !bannerSettings.get(this.props.id), + }; + + handleDismiss = () => { + const { id } = this.props; + this.setState({ visible: false }, () => bannerSettings.set(id, true)); + } + + render () { + const { visible } = this.state; + + if (!visible) { + return null; + } + + const { children, intl } = this.props; + + return ( +
+
+ {children} +
+ +
+ +
+
+ ); + } + +} diff --git a/app/javascript/mastodon/features/community_timeline/index.js b/app/javascript/mastodon/features/community_timeline/index.js index afa7b3ed4..757521802 100644 --- a/app/javascript/mastodon/features/community_timeline/index.js +++ b/app/javascript/mastodon/features/community_timeline/index.js @@ -10,6 +10,8 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import ColumnSettingsContainer from './containers/column_settings_container'; import { connectCommunityStream } from '../../actions/streaming'; import { Helmet } from 'react-helmet'; +import { domain } from 'mastodon/initial_state'; +import DismissableBanner from 'mastodon/components/dismissable_banner'; const messages = defineMessages({ title: { id: 'column.community', defaultMessage: 'Local timeline' }, @@ -134,6 +136,10 @@ class CommunityTimeline extends React.PureComponent { + + + + ({ links: state.getIn(['trends', 'links', 'items']), @@ -29,9 +30,17 @@ class Links extends React.PureComponent { render () { const { isLoading, links } = this.props; + const banner = ( + + + + ); + if (!isLoading && links.isEmpty()) { return (
+ {banner} +
@@ -41,6 +50,8 @@ class Links extends React.PureComponent { return (
+ {banner} + {isLoading ? () : links.map(link => ( ({ statusIds: state.getIn(['status_lists', 'trending', 'items']), @@ -40,17 +41,23 @@ class Statuses extends React.PureComponent { const emptyMessage = ; return ( - + <> + + + + + + ); } diff --git a/app/javascript/mastodon/features/explore/tags.js b/app/javascript/mastodon/features/explore/tags.js index 6cd3a6fb1..258dc392f 100644 --- a/app/javascript/mastodon/features/explore/tags.js +++ b/app/javascript/mastodon/features/explore/tags.js @@ -6,6 +6,7 @@ import LoadingIndicator from 'mastodon/components/loading_indicator'; import { connect } from 'react-redux'; import { fetchTrendingHashtags } from 'mastodon/actions/trends'; import { FormattedMessage } from 'react-intl'; +import DismissableBanner from 'mastodon/components/dismissable_banner'; const mapStateToProps = state => ({ hashtags: state.getIn(['trends', 'tags', 'items']), @@ -29,9 +30,17 @@ class Tags extends React.PureComponent { render () { const { isLoading, hashtags } = this.props; + const banner = ( + + + + ); + if (!isLoading && hashtags.isEmpty()) { return (
+ {banner} +
@@ -41,6 +50,8 @@ class Tags extends React.PureComponent { return (
+ {banner} + {isLoading ? () : hashtags.map(hashtag => ( ))} diff --git a/app/javascript/mastodon/features/public_timeline/index.js b/app/javascript/mastodon/features/public_timeline/index.js index 5b1b7c650..8dbef98c0 100644 --- a/app/javascript/mastodon/features/public_timeline/index.js +++ b/app/javascript/mastodon/features/public_timeline/index.js @@ -10,6 +10,7 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import ColumnSettingsContainer from './containers/column_settings_container'; import { connectPublicStream } from '../../actions/streaming'; import { Helmet } from 'react-helmet'; +import DismissableBanner from 'mastodon/components/dismissable_banner'; const messages = defineMessages({ title: { id: 'column.public', defaultMessage: 'Federated timeline' }, @@ -137,6 +138,10 @@ class PublicTimeline extends React.PureComponent { + + + + Date: Sun, 9 Oct 2022 15:55:32 +0200 Subject: Fix intermediary responsive layout, accessibility on navigation in web UI (#19324) * Fix intermediary responsive layout, accessibility on navigation in web UI * `yarn test:jest -u` Co-authored-by: Yamagishi Kazutoshi --- .../__tests__/__snapshots__/avatar-test.js.snap | 4 ++ app/javascript/mastodon/components/avatar.js | 2 + app/javascript/mastodon/components/logo.js | 3 +- .../mastodon/features/ui/components/column_link.js | 20 +++++--- .../ui/components/follow_requests_column_link.js | 51 +++++++++++++++++++ .../ui/components/follow_requests_nav_link.js | 39 -------------- .../mastodon/features/ui/components/header.js | 3 +- .../features/ui/components/navigation_panel.js | 59 +++++++++++++++------- app/javascript/styles/mastodon/components.scss | 34 +++++++++++-- app/javascript/styles/mastodon/variables.scss | 2 +- 10 files changed, 142 insertions(+), 75 deletions(-) create mode 100644 app/javascript/mastodon/features/ui/components/follow_requests_column_link.js delete mode 100644 app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap index 1c200b184..f5c10aa37 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap @@ -2,9 +2,11 @@ exports[` Autoplay renders a animated avatar 1`] = `
Autoplay renders a animated avatar 1`] = ` exports[` Still renders a still avatar 1`] = `
); } diff --git a/app/javascript/mastodon/components/logo.js b/app/javascript/mastodon/components/logo.js index 3570b3644..ee5c22496 100644 --- a/app/javascript/mastodon/components/logo.js +++ b/app/javascript/mastodon/components/logo.js @@ -1,7 +1,8 @@ import React from 'react'; const Logo = () => ( - + + Mastodon ); diff --git a/app/javascript/mastodon/features/ui/components/column_link.js b/app/javascript/mastodon/features/ui/components/column_link.js index 0a25f1ea2..42da05c0a 100644 --- a/app/javascript/mastodon/features/ui/components/column_link.js +++ b/app/javascript/mastodon/features/ui/components/column_link.js @@ -1,37 +1,41 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; import Icon from 'mastodon/components/icon'; +import classNames from 'classnames'; -const ColumnLink = ({ icon, text, to, href, method, badge }) => { +const ColumnLink = ({ icon, text, to, href, method, badge, transparent, ...other }) => { + const className = classNames('column-link', { 'column-link--transparent': transparent }); const badgeElement = typeof badge !== 'undefined' ? {badge} : null; + const iconElement = typeof icon === 'string' ? : icon; if (href) { return ( - - + + {iconElement} {text} {badgeElement} ); } else { return ( - - + + {iconElement} {text} {badgeElement} - + ); } }; ColumnLink.propTypes = { - icon: PropTypes.string.isRequired, + icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, text: PropTypes.string.isRequired, to: PropTypes.string, href: PropTypes.string, method: PropTypes.string, badge: PropTypes.node, + transparent: PropTypes.bool, }; export default ColumnLink; diff --git a/app/javascript/mastodon/features/ui/components/follow_requests_column_link.js b/app/javascript/mastodon/features/ui/components/follow_requests_column_link.js new file mode 100644 index 000000000..8d4057782 --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/follow_requests_column_link.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { fetchFollowRequests } from 'mastodon/actions/accounts'; +import { connect } from 'react-redux'; +import ColumnLink from 'mastodon/features/ui/components/column_link'; +import IconWithBadge from 'mastodon/components/icon_with_badge'; +import { List as ImmutableList } from 'immutable'; +import { injectIntl, defineMessages } from 'react-intl'; + +const messages = defineMessages({ + text: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, +}); + +const mapStateToProps = state => ({ + count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, +}); + +export default @injectIntl +@connect(mapStateToProps) +class FollowRequestsColumnLink extends React.Component { + + static propTypes = { + dispatch: PropTypes.func.isRequired, + count: PropTypes.number.isRequired, + intl: PropTypes.object.isRequired, + }; + + componentDidMount () { + const { dispatch } = this.props; + + dispatch(fetchFollowRequests()); + } + + render () { + const { count, intl } = this.props; + + if (count === 0) { + return null; + } + + return ( + } + text={intl.formatMessage(messages.text)} + /> + ); + } + +} diff --git a/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js b/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js deleted file mode 100644 index 950ed7b27..000000000 --- a/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { fetchFollowRequests } from 'mastodon/actions/accounts'; -import { connect } from 'react-redux'; -import { NavLink, withRouter } from 'react-router-dom'; -import IconWithBadge from 'mastodon/components/icon_with_badge'; -import { List as ImmutableList } from 'immutable'; -import { FormattedMessage } from 'react-intl'; - -const mapStateToProps = state => ({ - count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, -}); - -export default @withRouter -@connect(mapStateToProps) -class FollowRequestsNavLink extends React.Component { - - static propTypes = { - dispatch: PropTypes.func.isRequired, - count: PropTypes.number.isRequired, - }; - - componentDidMount () { - const { dispatch } = this.props; - - dispatch(fetchFollowRequests()); - } - - render () { - const { count } = this.props; - - if (count === 0) { - return null; - } - - return ; - } - -} diff --git a/app/javascript/mastodon/features/ui/components/header.js b/app/javascript/mastodon/features/ui/components/header.js index cddab820c..c49f48cc9 100644 --- a/app/javascript/mastodon/features/ui/components/header.js +++ b/app/javascript/mastodon/features/ui/components/header.js @@ -11,8 +11,7 @@ import { connect } from 'react-redux'; const Account = connect(state => ({ account: state.getIn(['accounts', me]), }))(({ account }) => ( - - {account.get('acct')} + )); diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index a9b80e71d..aa917c1ca 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -1,24 +1,45 @@ -import PropTypes from 'prop-types'; import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Link, NavLink } from 'react-router-dom'; -import Icon from 'mastodon/components/icon'; +import PropTypes from 'prop-types'; +import { defineMessages, injectIntl } from 'react-intl'; +import { Link } from 'react-router-dom'; import Logo from 'mastodon/components/logo'; import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container'; import { showTrends, timelinePreview } from 'mastodon/initial_state'; -import FollowRequestsNavLink from './follow_requests_nav_link'; +import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; import SignInBanner from './sign_in_banner'; +import ColumnLink from 'mastodon/features/ui/components/column_link'; + +const messages = defineMessages({ + home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, + notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' }, + explore: { id: 'explore.title', defaultMessage: 'Explore' }, + local: { id: 'tabs_bar.local_timeline', defaultMessage: 'Local' }, + federated: { id: 'tabs_bar.federated_timeline', defaultMessage: 'Federated' }, + direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' }, + favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' }, + bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' }, + lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, + preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, + followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' }, + about: { id: 'navigation_bar.about', defaultMessage: 'About' }, +}); -export default class NavigationPanel extends React.Component { +export default @injectIntl +class NavigationPanel extends React.Component { static contextTypes = { router: PropTypes.object.isRequired, identity: PropTypes.object.isRequired, }; + static propTypes = { + intl: PropTypes.object.isRequired, + }; + render () { + const { intl } = this.props; const { signedIn } = this.context.identity; return ( @@ -30,17 +51,17 @@ export default class NavigationPanel extends React.Component { {signedIn && ( - - - + + } text={intl.formatMessage(messages.notifications)} /> + )} - + {signedIn || timelinePreview && ( <> - - + + )} @@ -53,23 +74,23 @@ export default class NavigationPanel extends React.Component { {signedIn && ( - - - - + + + +
- - + + )}
- +
{showTrends && ( diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 02c2a14bf..039d0b904 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2604,12 +2604,14 @@ $ui-header-height: 55px; } @media screen and (max-width: $no-gap-breakpoint - 1px) { + $sidebar-width: 285px; + .with-fab .scrollable .item-list:last-child { padding-bottom: 5.25rem; } .columns-area__panels__main { - width: calc(100% - 55px); + width: calc(100% - $sidebar-width); } .columns-area__panels { @@ -2617,10 +2619,10 @@ $ui-header-height: 55px; } .columns-area__panels__pane--navigational { - min-width: 55px; + min-width: $sidebar-width; .columns-area__panels__pane__inner { - width: 55px; + width: $sidebar-width; } .navigation-panel { @@ -2630,7 +2632,6 @@ $ui-header-height: 55px; height: 100vh; } - .column-link span, .navigation-panel__sign-in-banner, .navigation-panel__logo, .getting-started__trends { @@ -2655,11 +2656,31 @@ $ui-header-height: 55px; } } +@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) { + $sidebar-width: 55px; + + .columns-area__panels__main { + width: calc(100% - $sidebar-width); + } + + .columns-area__panels__pane--navigational { + min-width: $sidebar-width; + + .columns-area__panels__pane__inner { + width: $sidebar-width; + } + + .column-link span { + display: none; + } + } +} + .explore__search-header { display: none; } -@media screen and (max-width: $no-gap-breakpoint + 285px - 1px) { +@media screen and (max-width: $no-gap-breakpoint - 1px) { .columns-area__panels__pane--compositional { display: none; } @@ -3145,6 +3166,9 @@ $ui-header-height: 55px; font-size: 16px; padding: 15px; text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; &:hover, &:focus, diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 775a12e68..2f6c41d5f 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -53,7 +53,7 @@ $media-modal-media-max-width: 100%; // put margins on top and bottom of image to avoid the screen covered by image. $media-modal-media-max-height: 80%; -$no-gap-breakpoint: 890px; +$no-gap-breakpoint: 1175px; $font-sans-serif: 'mastodon-font-sans-serif' !default; $font-display: 'mastodon-font-display' !default; -- cgit From bf3cb42da78a3f31a9e07167a764aa942ec73731 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 5 Oct 2022 03:47:56 +0200 Subject: Add server banner to web app, add `GET /api/v2/instance` to REST API (#19294) Cherry-picked d2528b26b6da34f34b5d7a392e263428d3c09d69 Conflicts: - `app/serializers/initial_state_serializer.rb`: Upstream changed stuff, we had extra attributes. Applied upstream changes while keeping our extra attributes. - `app/serializers/rest/instance_serializer.rb`: Upstream actually moved that to `app/serializers/rest/v1/instance_serializer.rb`, so updated that file by keeping our extra attributes, and took upstream's version of `app/serializers/rest/instance_serializer.rb`. - `spec/views/about/show.html.haml_spec.rb`: Took upstream's version. --- app/controllers/about_controller.rb | 2 +- app/controllers/api/v1/instances_controller.rb | 2 +- app/controllers/api/v2/instances_controller.rb | 8 ++ app/javascript/mastodon/actions/rules.js | 27 ----- app/javascript/mastodon/actions/server.js | 30 ++++++ app/javascript/mastodon/components/account.js | 14 ++- app/javascript/mastodon/components/display_name.js | 8 +- .../mastodon/components/server_banner.js | 91 ++++++++++++++++ app/javascript/mastodon/features/report/rules.js | 2 +- .../features/ui/components/compose_panel.js | 2 + .../features/ui/components/report_modal.js | 4 +- app/javascript/mastodon/features/ui/index.js | 4 +- app/javascript/mastodon/initial_state.js | 1 - app/javascript/mastodon/reducers/index.js | 4 +- app/javascript/mastodon/reducers/rules.js | 13 --- app/javascript/mastodon/reducers/server.js | 19 ++++ app/javascript/styles/mastodon/components.scss | 82 +++++++++++++++ app/presenters/instance_presenter.rb | 64 +++++++++--- app/serializers/initial_state_serializer.rb | 19 ++-- app/serializers/manifest_serializer.rb | 4 +- app/serializers/rest/instance_serializer.rb | 94 ++++------------- app/serializers/rest/v1/instance_serializer.rb | 115 +++++++++++++++++++++ app/views/about/more.html.haml | 8 +- app/views/about/show.html.haml | 6 +- app/views/application/_sidebar.html.haml | 4 +- app/views/privacy/show.html.haml | 2 +- app/views/shared/_og.html.haml | 4 +- config/routes.rb | 4 +- spec/presenters/instance_presenter_spec.rb | 38 +++---- spec/views/about/show.html.haml_spec.rb | 21 +--- 30 files changed, 486 insertions(+), 210 deletions(-) create mode 100644 app/controllers/api/v2/instances_controller.rb delete mode 100644 app/javascript/mastodon/actions/rules.js create mode 100644 app/javascript/mastodon/actions/server.js create mode 100644 app/javascript/mastodon/components/server_banner.js delete mode 100644 app/javascript/mastodon/reducers/rules.js create mode 100644 app/javascript/mastodon/reducers/server.js create mode 100644 app/serializers/rest/v1/instance_serializer.rb (limited to 'app/javascript/styles') diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb index 654f2d92c..d3f03374f 100644 --- a/app/controllers/about_controller.rb +++ b/app/controllers/about_controller.rb @@ -20,7 +20,7 @@ class AboutController < ApplicationController def more flash.now[:notice] = I18n.t('about.instance_actor_flash') if params[:instance_actor] - toc_generator = TOCGenerator.new(@instance_presenter.site_extended_description) + toc_generator = TOCGenerator.new(@instance_presenter.extended_description) @rules = Rule.ordered @contents = toc_generator.html diff --git a/app/controllers/api/v1/instances_controller.rb b/app/controllers/api/v1/instances_controller.rb index 5b5058a7b..913319a86 100644 --- a/app/controllers/api/v1/instances_controller.rb +++ b/app/controllers/api/v1/instances_controller.rb @@ -6,6 +6,6 @@ class Api::V1::InstancesController < Api::BaseController def show expires_in 3.minutes, public: true - render_with_cache json: {}, serializer: REST::InstanceSerializer, root: 'instance' + render_with_cache json: InstancePresenter.new, serializer: REST::V1::InstanceSerializer, root: 'instance' end end diff --git a/app/controllers/api/v2/instances_controller.rb b/app/controllers/api/v2/instances_controller.rb new file mode 100644 index 000000000..bcd90cff2 --- /dev/null +++ b/app/controllers/api/v2/instances_controller.rb @@ -0,0 +1,8 @@ +# frozen_string_literal: true + +class Api::V2::InstancesController < Api::V1::InstancesController + def show + expires_in 3.minutes, public: true + render_with_cache json: InstancePresenter.new, serializer: REST::InstanceSerializer, root: 'instance' + end +end diff --git a/app/javascript/mastodon/actions/rules.js b/app/javascript/mastodon/actions/rules.js deleted file mode 100644 index 34e60a121..000000000 --- a/app/javascript/mastodon/actions/rules.js +++ /dev/null @@ -1,27 +0,0 @@ -import api from '../api'; - -export const RULES_FETCH_REQUEST = 'RULES_FETCH_REQUEST'; -export const RULES_FETCH_SUCCESS = 'RULES_FETCH_SUCCESS'; -export const RULES_FETCH_FAIL = 'RULES_FETCH_FAIL'; - -export const fetchRules = () => (dispatch, getState) => { - dispatch(fetchRulesRequest()); - - api(getState) - .get('/api/v1/instance').then(({ data }) => dispatch(fetchRulesSuccess(data.rules))) - .catch(err => dispatch(fetchRulesFail(err))); -}; - -const fetchRulesRequest = () => ({ - type: RULES_FETCH_REQUEST, -}); - -const fetchRulesSuccess = rules => ({ - type: RULES_FETCH_SUCCESS, - rules, -}); - -const fetchRulesFail = error => ({ - type: RULES_FETCH_FAIL, - error, -}); diff --git a/app/javascript/mastodon/actions/server.js b/app/javascript/mastodon/actions/server.js new file mode 100644 index 000000000..af8fef780 --- /dev/null +++ b/app/javascript/mastodon/actions/server.js @@ -0,0 +1,30 @@ +import api from '../api'; +import { importFetchedAccount } from './importer'; + +export const SERVER_FETCH_REQUEST = 'Server_FETCH_REQUEST'; +export const SERVER_FETCH_SUCCESS = 'Server_FETCH_SUCCESS'; +export const SERVER_FETCH_FAIL = 'Server_FETCH_FAIL'; + +export const fetchServer = () => (dispatch, getState) => { + dispatch(fetchServerRequest()); + + api(getState) + .get('/api/v2/instance').then(({ data }) => { + if (data.contact.account) dispatch(importFetchedAccount(data.contact.account)); + dispatch(fetchServerSuccess(data)); + }).catch(err => dispatch(fetchServerFail(err))); +}; + +const fetchServerRequest = () => ({ + type: SERVER_FETCH_REQUEST, +}); + +const fetchServerSuccess = server => ({ + type: SERVER_FETCH_SUCCESS, + server, +}); + +const fetchServerFail = error => ({ + type: SERVER_FETCH_FAIL, + error, +}); diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index af9f119c8..36429e647 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -9,6 +9,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { me } from '../initial_state'; import RelativeTimestamp from './relative_timestamp'; +import Skeleton from 'mastodon/components/skeleton'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -26,7 +27,7 @@ export default @injectIntl class Account extends ImmutablePureComponent { static propTypes = { - account: ImmutablePropTypes.map.isRequired, + account: ImmutablePropTypes.map, onFollow: PropTypes.func.isRequired, onBlock: PropTypes.func.isRequired, onMute: PropTypes.func.isRequired, @@ -67,7 +68,16 @@ class Account extends ImmutablePureComponent { const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction } = this.props; if (!account) { - return
; + return ( +
+
+
+
+ +
+
+
+ ); } if (hidden) { diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js index 7ccfbd0cd..e9139ab0f 100644 --- a/app/javascript/mastodon/components/display_name.js +++ b/app/javascript/mastodon/components/display_name.js @@ -2,11 +2,12 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { autoPlayGif } from 'mastodon/initial_state'; +import Skeleton from 'mastodon/components/skeleton'; export default class DisplayName extends React.PureComponent { static propTypes = { - account: ImmutablePropTypes.map.isRequired, + account: ImmutablePropTypes.map, others: ImmutablePropTypes.list, localDomain: PropTypes.string, }; @@ -48,7 +49,7 @@ export default class DisplayName extends React.PureComponent { if (others.size - 2 > 0) { suffix = `+${others.size - 2}`; } - } else { + } else if ((others && others.size > 0) || this.props.account) { if (others && others.size > 0) { account = others.first(); } else { @@ -63,6 +64,9 @@ export default class DisplayName extends React.PureComponent { displayName = ; suffix = @{acct}; + } else { + displayName = ; + suffix = ; } return ( diff --git a/app/javascript/mastodon/components/server_banner.js b/app/javascript/mastodon/components/server_banner.js new file mode 100644 index 000000000..bdd7f7380 --- /dev/null +++ b/app/javascript/mastodon/components/server_banner.js @@ -0,0 +1,91 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { domain } from 'mastodon/initial_state'; +import { fetchServer } from 'mastodon/actions/server'; +import { connect } from 'react-redux'; +import Account from 'mastodon/containers/account_container'; +import ShortNumber from 'mastodon/components/short_number'; +import Skeleton from 'mastodon/components/skeleton'; +import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; + +const messages = defineMessages({ + aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' }, +}); + +const mapStateToProps = state => ({ + server: state.get('server'), +}); + +export default @connect(mapStateToProps) +@injectIntl +class ServerBanner extends React.PureComponent { + + static propTypes = { + server: PropTypes.object, + dispatch: PropTypes.func, + intl: PropTypes.object, + }; + + componentDidMount () { + const { dispatch } = this.props; + dispatch(fetchServer()); + } + + render () { + const { server, intl } = this.props; + const isLoading = server.get('isLoading'); + + return ( +
+
+ {domain}, mastodon: Mastodon }} /> +
+ + {server.get('title')} + +
+ {isLoading ? ( + <> + +
+ +
+ + + ) : server.get('description')} +
+ +
+
+

+ + +
+ +
+

+ + {isLoading ? ( + <> + +
+ + + ) : ( + <> + +
+ + + )} +
+
+ +
+ + +
+ ); + } + +} diff --git a/app/javascript/mastodon/features/report/rules.js b/app/javascript/mastodon/features/report/rules.js index f2db0d9e4..2cb4a95b5 100644 --- a/app/javascript/mastodon/features/report/rules.js +++ b/app/javascript/mastodon/features/report/rules.js @@ -7,7 +7,7 @@ import Button from 'mastodon/components/button'; import Option from './components/option'; const mapStateToProps = state => ({ - rules: state.get('rules'), + rules: state.getIn(['server', 'rules']), }); export default @connect(mapStateToProps) diff --git a/app/javascript/mastodon/features/ui/components/compose_panel.js b/app/javascript/mastodon/features/ui/components/compose_panel.js index 1c128188f..c8bc79a67 100644 --- a/app/javascript/mastodon/features/ui/components/compose_panel.js +++ b/app/javascript/mastodon/features/ui/components/compose_panel.js @@ -5,6 +5,7 @@ import SearchContainer from 'mastodon/features/compose/containers/search_contain import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container'; import NavigationContainer from 'mastodon/features/compose/containers/navigation_container'; import LinkFooter from './link_footer'; +import ServerBanner from 'mastodon/components/server_banner'; import { changeComposing } from 'mastodon/actions/compose'; export default @connect() @@ -35,6 +36,7 @@ class ComposePanel extends React.PureComponent { {!signedIn && ( +
)} diff --git a/app/javascript/mastodon/features/ui/components/report_modal.js b/app/javascript/mastodon/features/ui/components/report_modal.js index 744dd248b..264da07ce 100644 --- a/app/javascript/mastodon/features/ui/components/report_modal.js +++ b/app/javascript/mastodon/features/ui/components/report_modal.js @@ -2,7 +2,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { submitReport } from 'mastodon/actions/reports'; import { expandAccountTimeline } from 'mastodon/actions/timelines'; -import { fetchRules } from 'mastodon/actions/rules'; +import { fetchServer } from 'mastodon/actions/server'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { makeGetAccount } from 'mastodon/selectors'; @@ -117,7 +117,7 @@ class ReportModal extends ImmutablePureComponent { const { dispatch, accountId } = this.props; dispatch(expandAccountTimeline(accountId, { withReplies: true })); - dispatch(fetchRules()); + dispatch(fetchServer()); } render () { diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 5825db1e4..efe460fab 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -13,7 +13,7 @@ import { debounce } from 'lodash'; import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose'; import { expandHomeTimeline } from '../../actions/timelines'; import { expandNotifications } from '../../actions/notifications'; -import { fetchRules } from '../../actions/rules'; +import { fetchServer } from '../../actions/server'; import { clearHeight } from '../../actions/height_cache'; import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app'; import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers'; @@ -389,7 +389,7 @@ class UI extends React.PureComponent { this.props.dispatch(expandHomeTimeline()); this.props.dispatch(expandNotifications()); - setTimeout(() => this.props.dispatch(fetchRules()), 3000); + setTimeout(() => this.props.dispatch(fetchServer()), 3000); } this.hotkeys.__mousetrap__.stopCallback = (e, element) => { diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js index 3587bb32a..08121005a 100644 --- a/app/javascript/mastodon/initial_state.js +++ b/app/javascript/mastodon/initial_state.js @@ -29,6 +29,5 @@ export const title = getMeta('title'); export const cropImages = getMeta('crop_images'); export const disableSwiping = getMeta('disable_swiping'); export const languages = initialState && initialState.languages; -export const server = initialState && initialState.server; export default initialState; diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js index d3d0303df..bccdc1865 100644 --- a/app/javascript/mastodon/reducers/index.js +++ b/app/javascript/mastodon/reducers/index.js @@ -17,7 +17,7 @@ import status_lists from './status_lists'; import mutes from './mutes'; import blocks from './blocks'; import boosts from './boosts'; -import rules from './rules'; +import server from './server'; import contexts from './contexts'; import compose from './compose'; import search from './search'; @@ -62,7 +62,7 @@ const reducers = { mutes, blocks, boosts, - rules, + server, contexts, compose, search, diff --git a/app/javascript/mastodon/reducers/rules.js b/app/javascript/mastodon/reducers/rules.js deleted file mode 100644 index c1180b520..000000000 --- a/app/javascript/mastodon/reducers/rules.js +++ /dev/null @@ -1,13 +0,0 @@ -import { RULES_FETCH_SUCCESS } from 'mastodon/actions/rules'; -import { List as ImmutableList, fromJS } from 'immutable'; - -const initialState = ImmutableList(); - -export default function rules(state = initialState, action) { - switch (action.type) { - case RULES_FETCH_SUCCESS: - return fromJS(action.rules); - default: - return state; - } -} diff --git a/app/javascript/mastodon/reducers/server.js b/app/javascript/mastodon/reducers/server.js new file mode 100644 index 000000000..68131c6dd --- /dev/null +++ b/app/javascript/mastodon/reducers/server.js @@ -0,0 +1,19 @@ +import { SERVER_FETCH_REQUEST, SERVER_FETCH_SUCCESS, SERVER_FETCH_FAIL } from 'mastodon/actions/server'; +import { Map as ImmutableMap, fromJS } from 'immutable'; + +const initialState = ImmutableMap({ + isLoading: true, +}); + +export default function server(state = initialState, action) { + switch (action.type) { + case SERVER_FETCH_REQUEST: + return state.set('isLoading', true); + case SERVER_FETCH_SUCCESS: + return fromJS(action.server).set('isLoading', false); + case SERVER_FETCH_FAIL: + return state.set('isLoading', false); + default: + return state; + } +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index a75437b1c..b906117db 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -7949,3 +7949,85 @@ noscript { } } } + +.server-banner { + padding: 20px 0; + + &__introduction { + color: $darker-text-color; + margin-bottom: 20px; + + strong { + font-weight: 600; + } + + a { + color: inherit; + text-decoration: underline; + + &:hover, + &:active, + &:focus { + text-decoration: none; + } + } + } + + &__hero { + display: block; + border-radius: 4px; + width: 100%; + height: auto; + margin-bottom: 20px; + aspect-ratio: 1.9; + border: 0; + background: $ui-base-color; + object-fit: cover; + } + + &__description { + margin-bottom: 20px; + } + + &__meta { + display: flex; + gap: 10px; + max-width: 100%; + + &__column { + flex: 0 0 auto; + width: calc(50% - 5px); + overflow: hidden; + } + } + + &__number { + font-weight: 600; + color: $primary-text-color; + } + + &__number-label { + color: $darker-text-color; + font-weight: 500; + } + + h4 { + text-transform: uppercase; + color: $darker-text-color; + margin-bottom: 10px; + font-weight: 600; + } + + .account { + padding: 0; + border: 0; + } + + .account__avatar-wrapper { + margin-left: 0; + } + + .spacer { + margin: 10px 0; + } +} diff --git a/app/presenters/instance_presenter.rb b/app/presenters/instance_presenter.rb index 3e85faa92..c461ac55f 100644 --- a/app/presenters/instance_presenter.rb +++ b/app/presenters/instance_presenter.rb @@ -1,19 +1,51 @@ # frozen_string_literal: true -class InstancePresenter - delegate( - :site_contact_email, - :site_title, - :site_short_description, - :site_description, - :site_extended_description, - :site_terms, - :closed_registrations_message, - to: Setting - ) - - def contact_account - Account.find_local(Setting.site_contact_username.strip.gsub(/\A@/, '')) +class InstancePresenter < ActiveModelSerializers::Model + attributes :domain, :title, :version, :source_url, + :description, :languages, :rules, :contact + + class ContactPresenter < ActiveModelSerializers::Model + attributes :email, :account + + def email + Setting.site_contact_email + end + + def account + Account.find_local(Setting.site_contact_username.strip.gsub(/\A@/, '')) + end + end + + def contact + ContactPresenter.new + end + + def closed_registrations_message + Setting.closed_registrations_message + end + + def description + Setting.site_short_description + end + + def extended_description + Setting.site_extended_description + end + + def privacy_policy + Setting.site_terms + end + + def domain + Rails.configuration.x.local_domain + end + + def title + Setting.site_title + end + + def languages + [I18n.default_locale] end def rules @@ -40,8 +72,8 @@ class InstancePresenter Rails.cache.fetch('sample_accounts', expires_in: 12.hours) { Account.local.discoverable.popular.limit(3) } end - def version_number - Mastodon::Version + def version + Mastodon::Version.to_s end def source_url diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb index 45a5cda6f..aa36f82a1 100644 --- a/app/serializers/initial_state_serializer.rb +++ b/app/serializers/initial_state_serializer.rb @@ -6,7 +6,7 @@ class InitialStateSerializer < ActiveModel::Serializer attributes :meta, :compose, :accounts, :media_attachments, :settings, :max_toot_chars, :poll_limits, - :languages, :server + :languages has_one :push_subscription, serializer: REST::WebPushSubscriptionSerializer has_one :role, serializer: REST::RoleSerializer @@ -24,18 +24,19 @@ class InitialStateSerializer < ActiveModel::Serializer } end + # rubocop:disable Metrics/AbcSize def meta store = { streaming_api_base_url: Rails.configuration.x.streaming_api_base_url, access_token: object.token, locale: I18n.locale, - domain: Rails.configuration.x.local_domain, - title: instance_presenter.site_title, + domain: instance_presenter.domain, + title: instance_presenter.title, admin: object.admin&.id&.to_s, search_enabled: Chewy.enabled?, repository: Mastodon::Version.repository, - source_url: Mastodon::Version.source_url, - version: Mastodon::Version.to_s, + source_url: instance_presenter.source_url, + version: instance_presenter.version, limited_federation_mode: Rails.configuration.x.whitelist_mode, mascot: instance_presenter.mascot&.file&.url, profile_directory: Setting.profile_directory, @@ -71,6 +72,7 @@ class InitialStateSerializer < ActiveModel::Serializer store end + # rubocop:enable Metrics/AbcSize def compose store = {} @@ -102,13 +104,6 @@ class InitialStateSerializer < ActiveModel::Serializer LanguagesHelper::SUPPORTED_LOCALES.map { |(key, value)| [key, value[0], value[1]] } end - def server - { - hero: instance_presenter.hero&.file&.url || instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), - description: instance_presenter.site_short_description.presence || I18n.t('about.about_mastodon_html'), - } - end - private def instance_presenter diff --git a/app/serializers/manifest_serializer.rb b/app/serializers/manifest_serializer.rb index 9827323a8..6b5296480 100644 --- a/app/serializers/manifest_serializer.rb +++ b/app/serializers/manifest_serializer.rb @@ -22,11 +22,11 @@ class ManifestSerializer < ActiveModel::Serializer :share_target, :shortcuts def name - object.site_title + object.title end def short_name - object.site_title + object.title end def icons diff --git a/app/serializers/rest/instance_serializer.rb b/app/serializers/rest/instance_serializer.rb index 575c6214e..f4ea49427 100644 --- a/app/serializers/rest/instance_serializer.rb +++ b/app/serializers/rest/instance_serializer.rb @@ -1,74 +1,39 @@ # frozen_string_literal: true class REST::InstanceSerializer < ActiveModel::Serializer - include RoutingHelper - - attributes :uri, :title, :short_description, :description, :email, - :version, :urls, :stats, :thumbnail, :max_toot_chars, :poll_limits, - :languages, :registrations, :approval_required, :invites_enabled, - :configuration - - has_one :contact_account, serializer: REST::AccountSerializer - - has_many :rules, serializer: REST::RuleSerializer - - delegate :contact_account, :rules, to: :instance_presenter - - def uri - Rails.configuration.x.local_domain - end - - def title - Setting.site_title - end + class ContactSerializer < ActiveModel::Serializer + attributes :email - def short_description - Setting.site_short_description + has_one :account, serializer: REST::AccountSerializer end - def description - Setting.site_description - end + include RoutingHelper - def email - Setting.site_contact_email - end + attributes :domain, :title, :version, :source_url, :description, + :usage, :thumbnail, :languages, :configuration, + :registrations - def version - Mastodon::Version.to_s - end + has_one :contact, serializer: ContactSerializer + has_many :rules, serializer: REST::RuleSerializer def thumbnail - instance_presenter.thumbnail ? full_asset_url(instance_presenter.thumbnail.file.url) : full_pack_url('media/images/preview.png') + object.thumbnail ? full_asset_url(object.thumbnail.file.url) : full_pack_url('media/images/preview.png') end - def max_toot_chars - StatusLengthValidator::MAX_CHARS - end - - def poll_limits + def usage { - max_options: PollValidator::MAX_OPTIONS, - max_option_chars: PollValidator::MAX_OPTION_CHARS, - min_expiration: PollValidator::MIN_EXPIRATION, - max_expiration: PollValidator::MAX_EXPIRATION, - } - end - - def stats - { - user_count: instance_presenter.user_count, - status_count: instance_presenter.status_count, - domain_count: instance_presenter.domain_count, + users: { + active_month: object.active_user_count(4), + }, } end - def urls - { streaming_api: Rails.configuration.x.streaming_api_base_url } - end - def configuration { + urls: { + streaming: Rails.configuration.x.streaming_api_base_url, + }, + statuses: { max_characters: StatusLengthValidator::MAX_CHARS, max_media_attachments: 4, @@ -93,25 +58,10 @@ class REST::InstanceSerializer < ActiveModel::Serializer } end - def languages - [I18n.default_locale] - end - def registrations - Setting.registrations_mode != 'none' && !Rails.configuration.x.single_user_mode - end - - def approval_required - Setting.registrations_mode == 'approved' - end - - def invites_enabled - UserRole.everyone.can?(:invite_users) - end - - private - - def instance_presenter - @instance_presenter ||= InstancePresenter.new + { + enabled: Setting.registrations_mode != 'none' && !Rails.configuration.x.single_user_mode, + approval_required: Setting.registrations_mode == 'approved', + } end end diff --git a/app/serializers/rest/v1/instance_serializer.rb b/app/serializers/rest/v1/instance_serializer.rb new file mode 100644 index 000000000..fefbed8ee --- /dev/null +++ b/app/serializers/rest/v1/instance_serializer.rb @@ -0,0 +1,115 @@ +# frozen_string_literal: true + +class REST::V1::InstanceSerializer < ActiveModel::Serializer + include RoutingHelper + + attributes :uri, :title, :short_description, :description, :email, + :version, :urls, :stats, :thumbnail, :max_toot_chars, :poll_limits, + :languages, :registrations, :approval_required, :invites_enabled, + :configuration + + has_one :contact_account, serializer: REST::AccountSerializer + + has_many :rules, serializer: REST::RuleSerializer + + def uri + object.domain + end + + def short_description + object.description + end + + def description + Setting.site_description # Legacy + end + + def email + object.contact.email + end + + def contact_account + object.contact.account + end + + def thumbnail + instance_presenter.thumbnail ? full_asset_url(instance_presenter.thumbnail.file.url) : full_pack_url('media/images/preview.png') + end + + def max_toot_chars + StatusLengthValidator::MAX_CHARS + end + + def poll_limits + { + max_options: PollValidator::MAX_OPTIONS, + max_option_chars: PollValidator::MAX_OPTION_CHARS, + min_expiration: PollValidator::MIN_EXPIRATION, + max_expiration: PollValidator::MAX_EXPIRATION, + } + end + + def stats + { + user_count: instance_presenter.user_count, + status_count: instance_presenter.status_count, + domain_count: instance_presenter.domain_count, + } + end + + def urls + { streaming_api: Rails.configuration.x.streaming_api_base_url } + end + + def usage + { + users: { + active_month: instance_presenter.active_user_count(4), + }, + } + end + + def configuration + { + statuses: { + max_characters: StatusLengthValidator::MAX_CHARS, + max_media_attachments: 4, + characters_reserved_per_url: StatusLengthValidator::URL_PLACEHOLDER_CHARS, + }, + + media_attachments: { + supported_mime_types: MediaAttachment::IMAGE_MIME_TYPES + MediaAttachment::VIDEO_MIME_TYPES + MediaAttachment::AUDIO_MIME_TYPES, + image_size_limit: MediaAttachment::IMAGE_LIMIT, + image_matrix_limit: Attachmentable::MAX_MATRIX_LIMIT, + video_size_limit: MediaAttachment::VIDEO_LIMIT, + video_frame_rate_limit: MediaAttachment::MAX_VIDEO_FRAME_RATE, + video_matrix_limit: MediaAttachment::MAX_VIDEO_MATRIX_LIMIT, + }, + + polls: { + max_options: PollValidator::MAX_OPTIONS, + max_characters_per_option: PollValidator::MAX_OPTION_CHARS, + min_expiration: PollValidator::MIN_EXPIRATION, + max_expiration: PollValidator::MAX_EXPIRATION, + }, + } + end + + def registrations + Setting.registrations_mode != 'none' && !Rails.configuration.x.single_user_mode + end + + def approval_required + Setting.registrations_mode == 'approved' + end + + def invites_enabled + UserRole.everyone.can?(:invite_users) + end + + private + + def instance_presenter + @instance_presenter ||= InstancePresenter.new + end +end diff --git a/app/views/about/more.html.haml b/app/views/about/more.html.haml index 0b75f159a..a75549120 100644 --- a/app/views/about/more.html.haml +++ b/app/views/about/more.html.haml @@ -8,7 +8,7 @@ .column-0 .public-account-header.public-account-header--no-bar .public-account-header__image - = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title, class: 'parallax' + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title, class: 'parallax' .column-1 .landing-page__call-to-action{ dir: 'ltr' } @@ -30,14 +30,14 @@ .contact-widget %h4= t 'about.administered_by' - = account_link_to(@instance_presenter.contact_account) + = account_link_to(@instance_presenter.contact.account) - - if @instance_presenter.site_contact_email.present? + - if @instance_presenter.contact.email.present? %h4 = succeed ':' do = t 'about.contact' - = mail_to @instance_presenter.site_contact_email, nil, title: @instance_presenter.site_contact_email + = mail_to @instance_presenter.contact.email, nil, title: @instance_presenter.contact.email .column-3 = render 'application/flashes' diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index fb292941b..8d09a2938 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -53,11 +53,11 @@ .hero-widget .hero-widget__img - = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title .hero-widget__text %p - = @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html') + = @instance_presenter.description.html_safe.presence || t('about.about_mastodon_html') = link_to about_more_path do = t('about.learn_more') = fa_icon 'angle-double-right' @@ -66,7 +66,7 @@ .hero-widget__footer__column %h4= t 'about.administered_by' - = account_link_to @instance_presenter.contact_account + = account_link_to @instance_presenter.contact.account .hero-widget__footer__column %h4= t 'about.server_stats' diff --git a/app/views/application/_sidebar.html.haml b/app/views/application/_sidebar.html.haml index cc157bf47..eb2813dd0 100644 --- a/app/views/application/_sidebar.html.haml +++ b/app/views/application/_sidebar.html.haml @@ -1,9 +1,9 @@ .hero-widget .hero-widget__img - = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title .hero-widget__text - %p= @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html') + %p= @instance_presenter.description.html_safe.presence || t('about.about_mastodon_html') - if Setting.trends && !(user_signed_in? && !current_user.setting_trends) - trends = Trends.tags.query.allowed.limit(3) diff --git a/app/views/privacy/show.html.haml b/app/views/privacy/show.html.haml index 9d076a91b..cdd38a595 100644 --- a/app/views/privacy/show.html.haml +++ b/app/views/privacy/show.html.haml @@ -4,6 +4,6 @@ .grid .column-0 .box-widget - .rich-formatting= @instance_presenter.site_terms.html_safe.presence || t('terms.body_html') + .rich-formatting= @instance_presenter.privacy_policy.html_safe.presence || t('terms.body_html') .column-1 = render 'application/sidebar' diff --git a/app/views/shared/_og.html.haml b/app/views/shared/_og.html.haml index 7feae1b8b..b54ab2429 100644 --- a/app/views/shared/_og.html.haml +++ b/app/views/shared/_og.html.haml @@ -1,12 +1,12 @@ - thumbnail = @instance_presenter.thumbnail -- description ||= strip_tags(@instance_presenter.site_short_description.presence || t('about.about_mastodon_html')) +- description ||= strip_tags(@instance_presenter.description.presence || t('about.about_mastodon_html')) %meta{ name: 'description', content: description }/ = opengraph 'og:site_name', t('about.hosted_on', domain: site_hostname) = opengraph 'og:url', url_for(only_path: false) = opengraph 'og:type', 'website' -= opengraph 'og:title', @instance_presenter.site_title += opengraph 'og:title', @instance_presenter.title = opengraph 'og:description', description = opengraph 'og:image', full_asset_url(thumbnail&.file&.url || asset_pack_path('media/images/preview.png', protocol: :request)) = opengraph 'og:image:width', thumbnail ? thumbnail.meta['width'] : '1200' diff --git a/config/routes.rb b/config/routes.rb index 7330bb8df..8df1e45b7 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -639,10 +639,12 @@ Rails.application.routes.draw do end namespace :v2 do - resources :media, only: [:create] get '/search', to: 'search#index', as: :search + + resources :media, only: [:create] resources :suggestions, only: [:index] resources :filters, only: [:index, :create, :show, :update, :destroy] + resource :instance, only: [:show] namespace :admin do resources :accounts, only: [:index] diff --git a/spec/presenters/instance_presenter_spec.rb b/spec/presenters/instance_presenter_spec.rb index 81d8d0e98..4baad03f4 100644 --- a/spec/presenters/instance_presenter_spec.rb +++ b/spec/presenters/instance_presenter_spec.rb @@ -3,21 +3,20 @@ require 'rails_helper' describe InstancePresenter do let(:instance_presenter) { InstancePresenter.new } - context do + describe '#description' do around do |example| - site_description = Setting.site_description + site_description = Setting.site_short_description example.run - Setting.site_description = site_description + Setting.site_short_description = site_description end it "delegates site_description to Setting" do - Setting.site_description = "Site desc" - - expect(instance_presenter.site_description).to eq "Site desc" + Setting.site_short_description = "Site desc" + expect(instance_presenter.description).to eq "Site desc" end end - context do + describe '#extended_description' do around do |example| site_extended_description = Setting.site_extended_description example.run @@ -26,12 +25,11 @@ describe InstancePresenter do it "delegates site_extended_description to Setting" do Setting.site_extended_description = "Extended desc" - - expect(instance_presenter.site_extended_description).to eq "Extended desc" + expect(instance_presenter.extended_description).to eq "Extended desc" end end - context do + describe '#email' do around do |example| site_contact_email = Setting.site_contact_email example.run @@ -40,12 +38,11 @@ describe InstancePresenter do it "delegates contact_email to Setting" do Setting.site_contact_email = "admin@example.com" - - expect(instance_presenter.site_contact_email).to eq "admin@example.com" + expect(instance_presenter.contact.email).to eq "admin@example.com" end end - describe "contact_account" do + describe '#account' do around do |example| site_contact_username = Setting.site_contact_username example.run @@ -55,12 +52,11 @@ describe InstancePresenter do it "returns the account for the site contact username" do Setting.site_contact_username = "aaa" account = Fabricate(:account, username: "aaa") - - expect(instance_presenter.contact_account).to eq(account) + expect(instance_presenter.contact.account).to eq(account) end end - describe "user_count" do + describe '#user_count' do it "returns the number of site users" do Rails.cache.write 'user_count', 123 @@ -68,7 +64,7 @@ describe InstancePresenter do end end - describe "status_count" do + describe '#status_count' do it "returns the number of local statuses" do Rails.cache.write 'local_status_count', 234 @@ -76,7 +72,7 @@ describe InstancePresenter do end end - describe "domain_count" do + describe '#domain_count' do it "returns the number of known domains" do Rails.cache.write 'distinct_domain_count', 345 @@ -84,9 +80,9 @@ describe InstancePresenter do end end - describe '#version_number' do - it 'returns Mastodon::Version' do - expect(instance_presenter.version_number).to be(Mastodon::Version) + describe '#version' do + it 'returns string' do + expect(instance_presenter.version).to be_a String end end diff --git a/spec/views/about/show.html.haml_spec.rb b/spec/views/about/show.html.haml_spec.rb index 140f3fd41..15802799a 100644 --- a/spec/views/about/show.html.haml_spec.rb +++ b/spec/views/about/show.html.haml_spec.rb @@ -14,26 +14,7 @@ describe 'about/show.html.haml', without_verify_partial_doubles: true do end it 'has valid open graph tags' do - instance_presenter = double( - :instance_presenter, - site_title: 'something', - site_short_description: 'something', - site_description: 'something', - version_number: '1.0', - source_url: 'https://github.com/mastodon/mastodon', - open_registrations: false, - thumbnail: nil, - hero: nil, - mascot: nil, - user_count: 420, - status_count: 69, - active_user_count: 420, - commit_hash: commit_hash, - contact_account: nil, - sample_accounts: [] - ) - - assign(:instance_presenter, instance_presenter) + assign(:instance_presenter, InstancePresenter.new) render header_tags = view.content_for(:header_tags) -- cgit From d7873433256746c9b453aeca31520d68c6de4975 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Tue, 11 Oct 2022 04:41:25 +0900 Subject: Hide list panel from nav bar in mobile layout (#19337) --- .../mastodon/features/ui/components/list_panel.js | 12 ++++++------ .../mastodon/features/ui/components/navigation_panel.js | 2 +- app/javascript/mastodon/is_mobile.js | 13 ++++++++++++- app/javascript/styles/mastodon/about.scss | 4 ++-- app/javascript/styles/mastodon/components.scss | 6 +++++- 5 files changed, 26 insertions(+), 11 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/ui/components/list_panel.js b/app/javascript/mastodon/features/ui/components/list_panel.js index 411f62508..2f92a9254 100644 --- a/app/javascript/mastodon/features/ui/components/list_panel.js +++ b/app/javascript/mastodon/features/ui/components/list_panel.js @@ -1,12 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { createSelector } from 'reselect'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { fetchLists } from 'mastodon/actions/lists'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; -import { NavLink, withRouter } from 'react-router-dom'; -import Icon from 'mastodon/components/icon'; +import { withRouter } from 'react-router-dom'; +import { fetchLists } from 'mastodon/actions/lists'; +import ColumnLink from './column_link'; const getOrderedLists = createSelector([state => state.get('lists')], lists => { if (!lists) { @@ -42,11 +42,11 @@ class ListPanel extends ImmutablePureComponent { } return ( -
+
{lists.map(list => ( - {list.get('title')} + ))}
); diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index 4dadf294d..166d3552b 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -5,11 +5,11 @@ import { Link } from 'react-router-dom'; import Logo from 'mastodon/components/logo'; import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container'; import { showTrends, timelinePreview } from 'mastodon/initial_state'; +import ColumnLink from './column_link'; import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; import SignInBanner from './sign_in_banner'; -import ColumnLink from 'mastodon/features/ui/components/column_link'; const messages = defineMessages({ home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js index 2926eb4b1..3c8ec1545 100644 --- a/app/javascript/mastodon/is_mobile.js +++ b/app/javascript/mastodon/is_mobile.js @@ -1,10 +1,19 @@ +// @ts-check + import { supportsPassiveEvents } from 'detect-passive-events'; import { forceSingleColumn } from 'mastodon/initial_state'; const LAYOUT_BREAKPOINT = 630; +/** + * @param {number} width + * @returns {boolean} + */ export const isMobile = width => width <= LAYOUT_BREAKPOINT; +/** + * @returns {string} + */ export const layoutFromWindow = () => { if (isMobile(window.innerWidth)) { return 'mobile'; @@ -17,11 +26,13 @@ export const layoutFromWindow = () => { const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; +const listenerOptions = supportsPassiveEvents ? { passive: true } : false; + let userTouching = false; -let listenerOptions = supportsPassiveEvents ? { passive: true } : false; const touchListener = () => { userTouching = true; + window.removeEventListener('touchstart', touchListener, listenerOptions); }; diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index c82be742d..8893e3cf0 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -163,8 +163,8 @@ $small-breakpoint: 960px; th, td { padding: 8px; - align-self: start; - align-items: start; + align-self: flex-start; + align-items: flex-start; word-break: break-all; &.nowrap { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 039d0b904..a8919b9cb 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2673,6 +2673,10 @@ $ui-header-height: 55px; .column-link span { display: none; } + + .list-panel { + display: none; + } } } @@ -2755,7 +2759,7 @@ $ui-header-height: 55px; .column-actions { display: flex; - align-items: start; + align-items: flex-start; justify-content: center; padding: 40px; padding-top: 40px; -- cgit From 1bd00036c284bcafb419eaf80347ba49d1b491d9 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 13 Oct 2022 14:42:37 +0200 Subject: Change about page to be mounted in the web UI (#19345) --- app/controllers/about_controller.rb | 60 +- .../api/v1/instances/domain_blocks_controller.rb | 23 + .../instances/extended_descriptions_controller.rb | 18 + .../fonts/montserrat/Montserrat-Medium.ttf | Bin 192488 -> 0 bytes .../fonts/montserrat/Montserrat-Regular.ttf | Bin 191860 -> 0 bytes .../fonts/montserrat/Montserrat-Regular.woff | Bin 81244 -> 0 bytes .../fonts/montserrat/Montserrat-Regular.woff2 | Bin 61840 -> 0 bytes app/javascript/mastodon/actions/server.js | 61 ++ app/javascript/mastodon/components/image.js | 33 + .../mastodon/components/server_banner.js | 8 +- app/javascript/mastodon/components/skeleton.js | 4 +- app/javascript/mastodon/features/about/index.js | 195 ++++- .../mastodon/features/privacy_policy/index.js | 2 +- app/javascript/mastodon/features/report/rules.js | 2 +- .../mastodon/features/ui/components/link_footer.js | 2 +- app/javascript/mastodon/reducers/server.js | 46 +- app/javascript/styles/application.scss | 2 - app/javascript/styles/contrast/diff.scss | 4 - app/javascript/styles/fonts/montserrat.scss | 21 - app/javascript/styles/mastodon-light/diff.scss | 86 +- app/javascript/styles/mastodon/about.scss | 902 +-------------------- app/javascript/styles/mastodon/compact_header.scss | 34 - app/javascript/styles/mastodon/components.scss | 474 +++++++++-- app/javascript/styles/mastodon/containers.scss | 1 - app/javascript/styles/mastodon/dashboard.scss | 1 - app/javascript/styles/mastodon/forms.scss | 63 +- app/javascript/styles/mastodon/widgets.scss | 229 +----- app/models/domain_block.rb | 4 +- app/models/extended_description.rb | 15 + app/serializers/rest/domain_block_serializer.rb | 17 + .../rest/extended_description_serializer.rb | 13 + app/views/about/_domain_blocks.html.haml | 12 - app/views/about/more.html.haml | 96 --- app/views/about/show.html.haml | 4 + config/locales/en.yml | 28 +- config/routes.rb | 6 +- spec/controllers/about_controller_spec.rb | 8 +- 37 files changed, 900 insertions(+), 1574 deletions(-) create mode 100644 app/controllers/api/v1/instances/domain_blocks_controller.rb create mode 100644 app/controllers/api/v1/instances/extended_descriptions_controller.rb delete mode 100644 app/javascript/fonts/montserrat/Montserrat-Medium.ttf delete mode 100644 app/javascript/fonts/montserrat/Montserrat-Regular.ttf delete mode 100644 app/javascript/fonts/montserrat/Montserrat-Regular.woff delete mode 100644 app/javascript/fonts/montserrat/Montserrat-Regular.woff2 create mode 100644 app/javascript/mastodon/components/image.js delete mode 100644 app/javascript/styles/fonts/montserrat.scss delete mode 100644 app/javascript/styles/mastodon/compact_header.scss create mode 100644 app/models/extended_description.rb create mode 100644 app/serializers/rest/domain_block_serializer.rb create mode 100644 app/serializers/rest/extended_description_serializer.rb delete mode 100644 app/views/about/_domain_blocks.html.haml delete mode 100644 app/views/about/more.html.haml create mode 100644 app/views/about/show.html.haml (limited to 'app/javascript/styles') diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb index eae7de8c8..0fbc6a800 100644 --- a/app/controllers/about_controller.rb +++ b/app/controllers/about_controller.rb @@ -1,63 +1,11 @@ # frozen_string_literal: true class AboutController < ApplicationController - include RegistrationSpamConcern + include WebAppControllerConcern - layout 'public' + skip_before_action :require_functional! - before_action :require_open_federation!, only: [:more] - before_action :set_body_classes, only: :show - before_action :set_instance_presenter - before_action :set_expires_in, only: [:more] - - skip_before_action :require_functional!, only: [:more] - - def more - flash.now[:notice] = I18n.t('about.instance_actor_flash') if params[:instance_actor] - - toc_generator = TOCGenerator.new(@instance_presenter.extended_description) - - @rules = Rule.ordered - @contents = toc_generator.html - @table_of_contents = toc_generator.toc - @blocks = DomainBlock.with_user_facing_limitations.by_severity if display_blocks? - end - - helper_method :display_blocks? - helper_method :display_blocks_rationale? - helper_method :public_fetch_mode? - helper_method :new_user - - private - - def require_open_federation! - not_found if whitelist_mode? - end - - def display_blocks? - Setting.show_domain_blocks == 'all' || (Setting.show_domain_blocks == 'users' && user_signed_in?) - end - - def display_blocks_rationale? - Setting.show_domain_blocks_rationale == 'all' || (Setting.show_domain_blocks_rationale == 'users' && user_signed_in?) - end - - def new_user - User.new.tap do |user| - user.build_account - user.build_invite_request - end - end - - def set_instance_presenter - @instance_presenter = InstancePresenter.new - end - - def set_body_classes - @hide_navbar = true - end - - def set_expires_in - expires_in 0, public: true + def show + expires_in 0, public: true unless user_signed_in? end end diff --git a/app/controllers/api/v1/instances/domain_blocks_controller.rb b/app/controllers/api/v1/instances/domain_blocks_controller.rb new file mode 100644 index 000000000..37a6906fb --- /dev/null +++ b/app/controllers/api/v1/instances/domain_blocks_controller.rb @@ -0,0 +1,23 @@ +# frozen_string_literal: true + +class Api::V1::Instances::DomainBlocksController < Api::BaseController + skip_before_action :require_authenticated_user!, unless: :whitelist_mode? + + before_action :require_enabled_api! + before_action :set_domain_blocks + + def index + expires_in 3.minutes, public: true + render json: @domain_blocks, each_serializer: REST::DomainBlockSerializer, with_comment: (Setting.show_domain_blocks_rationale == 'all' || (Setting.show_domain_blocks_rationale == 'users' && user_signed_in?)) + end + + private + + def require_enabled_api! + head 404 unless Setting.show_domain_blocks == 'all' || (Setting.show_domain_blocks == 'users' && user_signed_in?) + end + + def set_domain_blocks + @domain_blocks = DomainBlock.with_user_facing_limitations.by_severity + end +end diff --git a/app/controllers/api/v1/instances/extended_descriptions_controller.rb b/app/controllers/api/v1/instances/extended_descriptions_controller.rb new file mode 100644 index 000000000..c72e16cff --- /dev/null +++ b/app/controllers/api/v1/instances/extended_descriptions_controller.rb @@ -0,0 +1,18 @@ +# frozen_string_literal: true + +class Api::V1::Instances::ExtendedDescriptionsController < Api::BaseController + skip_before_action :require_authenticated_user!, unless: :whitelist_mode? + + before_action :set_extended_description + + def show + expires_in 3.minutes, public: true + render json: @extended_description, serializer: REST::ExtendedDescriptionSerializer + end + + private + + def set_extended_description + @extended_description = ExtendedDescription.current + end +end diff --git a/app/javascript/fonts/montserrat/Montserrat-Medium.ttf b/app/javascript/fonts/montserrat/Montserrat-Medium.ttf deleted file mode 100644 index 88d70b89c..000000000 Binary files a/app/javascript/fonts/montserrat/Montserrat-Medium.ttf and /dev/null differ diff --git a/app/javascript/fonts/montserrat/Montserrat-Regular.ttf b/app/javascript/fonts/montserrat/Montserrat-Regular.ttf deleted file mode 100644 index 29ca85d4a..000000000 Binary files a/app/javascript/fonts/montserrat/Montserrat-Regular.ttf and /dev/null differ diff --git a/app/javascript/fonts/montserrat/Montserrat-Regular.woff b/app/javascript/fonts/montserrat/Montserrat-Regular.woff deleted file mode 100644 index af3b5ec44..000000000 Binary files a/app/javascript/fonts/montserrat/Montserrat-Regular.woff and /dev/null differ diff --git a/app/javascript/fonts/montserrat/Montserrat-Regular.woff2 b/app/javascript/fonts/montserrat/Montserrat-Regular.woff2 deleted file mode 100644 index 3d75434dd..000000000 Binary files a/app/javascript/fonts/montserrat/Montserrat-Regular.woff2 and /dev/null differ diff --git a/app/javascript/mastodon/actions/server.js b/app/javascript/mastodon/actions/server.js index af8fef780..31d4aea10 100644 --- a/app/javascript/mastodon/actions/server.js +++ b/app/javascript/mastodon/actions/server.js @@ -5,6 +5,14 @@ export const SERVER_FETCH_REQUEST = 'Server_FETCH_REQUEST'; export const SERVER_FETCH_SUCCESS = 'Server_FETCH_SUCCESS'; export const SERVER_FETCH_FAIL = 'Server_FETCH_FAIL'; +export const EXTENDED_DESCRIPTION_REQUEST = 'EXTENDED_DESCRIPTION_REQUEST'; +export const EXTENDED_DESCRIPTION_SUCCESS = 'EXTENDED_DESCRIPTION_SUCCESS'; +export const EXTENDED_DESCRIPTION_FAIL = 'EXTENDED_DESCRIPTION_FAIL'; + +export const SERVER_DOMAIN_BLOCKS_FETCH_REQUEST = 'SERVER_DOMAIN_BLOCKS_FETCH_REQUEST'; +export const SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS = 'SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS'; +export const SERVER_DOMAIN_BLOCKS_FETCH_FAIL = 'SERVER_DOMAIN_BLOCKS_FETCH_FAIL'; + export const fetchServer = () => (dispatch, getState) => { dispatch(fetchServerRequest()); @@ -28,3 +36,56 @@ const fetchServerFail = error => ({ type: SERVER_FETCH_FAIL, error, }); + +export const fetchExtendedDescription = () => (dispatch, getState) => { + dispatch(fetchExtendedDescriptionRequest()); + + api(getState) + .get('/api/v1/instance/extended_description') + .then(({ data }) => dispatch(fetchExtendedDescriptionSuccess(data))) + .catch(err => dispatch(fetchExtendedDescriptionFail(err))); +}; + +const fetchExtendedDescriptionRequest = () => ({ + type: EXTENDED_DESCRIPTION_REQUEST, +}); + +const fetchExtendedDescriptionSuccess = description => ({ + type: EXTENDED_DESCRIPTION_SUCCESS, + description, +}); + +const fetchExtendedDescriptionFail = error => ({ + type: EXTENDED_DESCRIPTION_FAIL, + error, +}); + +export const fetchDomainBlocks = () => (dispatch, getState) => { + dispatch(fetchDomainBlocksRequest()); + + api(getState) + .get('/api/v1/instance/domain_blocks') + .then(({ data }) => dispatch(fetchDomainBlocksSuccess(true, data))) + .catch(err => { + if (err.response.status === 404) { + dispatch(fetchDomainBlocksSuccess(false, [])); + } else { + dispatch(fetchDomainBlocksFail(err)); + } + }); +}; + +const fetchDomainBlocksRequest = () => ({ + type: SERVER_DOMAIN_BLOCKS_FETCH_REQUEST, +}); + +const fetchDomainBlocksSuccess = (isAvailable, blocks) => ({ + type: SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS, + isAvailable, + blocks, +}); + +const fetchDomainBlocksFail = error => ({ + type: SERVER_DOMAIN_BLOCKS_FETCH_FAIL, + error, +}); diff --git a/app/javascript/mastodon/components/image.js b/app/javascript/mastodon/components/image.js new file mode 100644 index 000000000..6e81ddf08 --- /dev/null +++ b/app/javascript/mastodon/components/image.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Blurhash from './blurhash'; +import classNames from 'classnames'; + +export default class Image extends React.PureComponent { + + static propTypes = { + src: PropTypes.string, + srcSet: PropTypes.string, + blurhash: PropTypes.string, + className: PropTypes.string, + }; + + state = { + loaded: false, + }; + + handleLoad = () => this.setState({ loaded: true }); + + render () { + const { src, srcSet, blurhash, className } = this.props; + const { loaded } = this.state; + + return ( +
+ {blurhash && } + +
+ ); + } + +} diff --git a/app/javascript/mastodon/components/server_banner.js b/app/javascript/mastodon/components/server_banner.js index ae4e200c3..c2336e43d 100644 --- a/app/javascript/mastodon/components/server_banner.js +++ b/app/javascript/mastodon/components/server_banner.js @@ -7,13 +7,15 @@ import ShortNumber from 'mastodon/components/short_number'; import Skeleton from 'mastodon/components/skeleton'; import Account from 'mastodon/containers/account_container'; import { domain } from 'mastodon/initial_state'; +import Image from 'mastodon/components/image'; +import { Link } from 'react-router-dom'; const messages = defineMessages({ aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' }, }); const mapStateToProps = state => ({ - server: state.get('server'), + server: state.getIn(['server', 'server']), }); export default @connect(mapStateToProps) @@ -41,7 +43,7 @@ class ServerBanner extends React.PureComponent { {domain}, mastodon: Mastodon }} />
- {server.get('title')} +
{isLoading ? ( @@ -83,7 +85,7 @@ class ServerBanner extends React.PureComponent {
- +
); } diff --git a/app/javascript/mastodon/components/skeleton.js b/app/javascript/mastodon/components/skeleton.js index 09093e99c..6a17ffb26 100644 --- a/app/javascript/mastodon/components/skeleton.js +++ b/app/javascript/mastodon/components/skeleton.js @@ -4,8 +4,8 @@ import PropTypes from 'prop-types'; const Skeleton = ({ width, height }) => ‌; Skeleton.propTypes = { - width: PropTypes.number, - height: PropTypes.number, + width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), }; export default Skeleton; diff --git a/app/javascript/mastodon/features/about/index.js b/app/javascript/mastodon/features/about/index.js index bc8d3a41b..e9212565a 100644 --- a/app/javascript/mastodon/features/about/index.js +++ b/app/javascript/mastodon/features/about/index.js @@ -1,27 +1,214 @@ import React from 'react'; -import { defineMessages, injectIntl } from 'react-intl'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import Column from 'mastodon/components/column'; import LinkFooter from 'mastodon/features/ui/components/link_footer'; import { Helmet } from 'react-helmet'; +import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server'; +import Account from 'mastodon/containers/account_container'; +import Skeleton from 'mastodon/components/skeleton'; +import Icon from 'mastodon/components/icon'; +import classNames from 'classnames'; +import Image from 'mastodon/components/image'; const messages = defineMessages({ title: { id: 'column.about', defaultMessage: 'About' }, + rules: { id: 'about.rules', defaultMessage: 'Server rules' }, + blocks: { id: 'about.blocks', defaultMessage: 'Moderated servers' }, + silenced: { id: 'about.domain_blocks.silenced.title', defaultMessage: 'Limited' }, + silencedExplanation: { id: 'about.domain_blocks.silenced.explanation', defaultMessage: 'You will generally not see profiles and content from this server, unless you explicitly look it up or opt into it by following.' }, + suspended: { id: 'about.domain_blocks.suspended.title', defaultMessage: 'Suspended' }, + suspendedExplanation: { id: 'about.domain_blocks.suspended.explanation', defaultMessage: 'No data from this server will be processed, stored or exchanged, making any interaction or communication with users from this server impossible.' }, }); -export default @injectIntl +const severityMessages = { + silence: { + title: messages.silenced, + explanation: messages.silencedExplanation, + }, + + suspend: { + title: messages.suspended, + explanation: messages.suspendedExplanation, + }, +}; + +const mapStateToProps = state => ({ + server: state.getIn(['server', 'server']), + extendedDescription: state.getIn(['server', 'extendedDescription']), + domainBlocks: state.getIn(['server', 'domainBlocks']), +}); + +class Section extends React.PureComponent { + + static propTypes = { + title: PropTypes.string, + children: PropTypes.node, + open: PropTypes.bool, + onOpen: PropTypes.func, + }; + + state = { + collapsed: !this.props.open, + }; + + handleClick = () => { + const { onOpen } = this.props; + const { collapsed } = this.state; + + this.setState({ collapsed: !collapsed }, () => onOpen && onOpen()); + } + + render () { + const { title, children } = this.props; + const { collapsed } = this.state; + + return ( +
+
+ {title} +
+ + {!collapsed && ( +
{children}
+ )} +
+ ); + } + +} + +export default @connect(mapStateToProps) +@injectIntl class About extends React.PureComponent { static propTypes = { + server: ImmutablePropTypes.map, + extendedDescription: ImmutablePropTypes.map, + domainBlocks: ImmutablePropTypes.contains({ + isLoading: PropTypes.bool, + isAvailable: PropTypes.bool, + items: ImmutablePropTypes.list, + }), + dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; + componentDidMount () { + const { dispatch } = this.props; + dispatch(fetchServer()); + dispatch(fetchExtendedDescription()); + } + + handleDomainBlocksOpen = () => { + const { dispatch } = this.props; + dispatch(fetchDomainBlocks()); + } + render () { - const { intl } = this.props; + const { intl, server, extendedDescription, domainBlocks } = this.props; + const isLoading = server.get('isLoading'); return ( - +
+
+ `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' /> +

{isLoading ? : server.get('domain')}

+

Mastodon }} />

+
+ +
+
+

+ + +
+ +
+ +
+

+ + {isLoading ? : {server.getIn(['contact', 'email'])}} +
+
+ +
+ {extendedDescription.get('isLoading') ? ( + <> + +
+ +
+ +
+ + + ) : (extendedDescription.get('content')?.length > 0 ? ( +
+ ) : ( +

+ ))} +
+ +
+ {!isLoading && (server.get('rules').isEmpty() ? ( +

+ ) : ( +
    + {server.get('rules').map(rule => ( +
  1. + {rule.get('text')} +
    2. + ))} +
+ ))} +
+ +
+ {domainBlocks.get('isLoading') ? ( + <> + +
+ + + ) : (domainBlocks.get('isAvailable') ? ( + <> +

+ +
+ + + + + + + + + + {domainBlocks.get('items').map(block => ( + + + + + + ))} + +
{block.get('domain')}{intl.formatMessage(severityMessages[block.get('severity')].title)}{block.get('comment')}
+ + ) : ( +

+ ))} + + + +
{intl.formatMessage(messages.title)} diff --git a/app/javascript/mastodon/features/privacy_policy/index.js b/app/javascript/mastodon/features/privacy_policy/index.js index 5fbe340c0..eee4255f4 100644 --- a/app/javascript/mastodon/features/privacy_policy/index.js +++ b/app/javascript/mastodon/features/privacy_policy/index.js @@ -44,7 +44,7 @@ class PrivacyPolicy extends React.PureComponent {
diff --git a/app/javascript/mastodon/features/report/rules.js b/app/javascript/mastodon/features/report/rules.js index 2cb4a95b5..920da68d6 100644 --- a/app/javascript/mastodon/features/report/rules.js +++ b/app/javascript/mastodon/features/report/rules.js @@ -7,7 +7,7 @@ import Button from 'mastodon/components/button'; import Option from './components/option'; const mapStateToProps = state => ({ - rules: state.getIn(['server', 'rules']), + rules: state.getIn(['server', 'server', 'rules']), }); export default @connect(mapStateToProps) diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js index c4ce2a985..cc3d83572 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.js +++ b/app/javascript/mastodon/features/ui/components/link_footer.js @@ -51,7 +51,7 @@ class LinkFooter extends React.PureComponent { const items = []; items.push(); - items.push(); + items.push(); items.push(); items.push(); items.push(); diff --git a/app/javascript/mastodon/reducers/server.js b/app/javascript/mastodon/reducers/server.js index 68131c6dd..db9f2b5e6 100644 --- a/app/javascript/mastodon/reducers/server.js +++ b/app/javascript/mastodon/reducers/server.js @@ -1,18 +1,52 @@ -import { SERVER_FETCH_REQUEST, SERVER_FETCH_SUCCESS, SERVER_FETCH_FAIL } from 'mastodon/actions/server'; -import { Map as ImmutableMap, fromJS } from 'immutable'; +import { + SERVER_FETCH_REQUEST, + SERVER_FETCH_SUCCESS, + SERVER_FETCH_FAIL, + EXTENDED_DESCRIPTION_REQUEST, + EXTENDED_DESCRIPTION_SUCCESS, + EXTENDED_DESCRIPTION_FAIL, + SERVER_DOMAIN_BLOCKS_FETCH_REQUEST, + SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS, + SERVER_DOMAIN_BLOCKS_FETCH_FAIL, +} from 'mastodon/actions/server'; +import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'; const initialState = ImmutableMap({ - isLoading: true, + server: ImmutableMap({ + isLoading: true, + }), + + extendedDescription: ImmutableMap({ + isLoading: true, + }), + + domainBlocks: ImmutableMap({ + isLoading: true, + isAvailable: true, + items: ImmutableList(), + }), }); export default function server(state = initialState, action) { switch (action.type) { case SERVER_FETCH_REQUEST: - return state.set('isLoading', true); + return state.setIn(['server', 'isLoading'], true); case SERVER_FETCH_SUCCESS: - return fromJS(action.server).set('isLoading', false); + return state.set('server', fromJS(action.server)).setIn(['server', 'isLoading'], false); case SERVER_FETCH_FAIL: - return state.set('isLoading', false); + return state.setIn(['server', 'isLoading'], false); + case EXTENDED_DESCRIPTION_REQUEST: + return state.setIn(['extendedDescription', 'isLoading'], true); + case EXTENDED_DESCRIPTION_SUCCESS: + return state.set('extendedDescription', fromJS(action.description)).setIn(['extendedDescription', 'isLoading'], false); + case EXTENDED_DESCRIPTION_FAIL: + return state.setIn(['extendedDescription', 'isLoading'], false); + case SERVER_DOMAIN_BLOCKS_FETCH_REQUEST: + return state.setIn(['domainBlocks', 'isLoading'], true); + case SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS: + return state.setIn(['domainBlocks', 'items'], fromJS(action.blocks)).setIn(['domainBlocks', 'isLoading'], false).setIn(['domainBlocks', 'isAvailable'], action.isAvailable); + case SERVER_DOMAIN_BLOCKS_FETCH_FAIL: + return state.setIn(['domainBlocks', 'isLoading'], false); default: return state; } diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index bbea06195..e9f596e2f 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -2,7 +2,6 @@ @import 'mastodon/variables'; @import 'fonts/roboto'; @import 'fonts/roboto-mono'; -@import 'fonts/montserrat'; @import 'mastodon/reset'; @import 'mastodon/basics'; @@ -10,7 +9,6 @@ @import 'mastodon/containers'; @import 'mastodon/lists'; @import 'mastodon/footer'; -@import 'mastodon/compact_header'; @import 'mastodon/widgets'; @import 'mastodon/forms'; @import 'mastodon/accounts'; diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss index 841ed6648..22f5bcc94 100644 --- a/app/javascript/styles/contrast/diff.scss +++ b/app/javascript/styles/contrast/diff.scss @@ -13,10 +13,6 @@ } } -.rich-formatting a, -.rich-formatting p a, -.rich-formatting li a, -.landing-page__short-description p a, .status__content a, .reply-indicator__content a { color: lighten($ui-highlight-color, 12%); diff --git a/app/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss deleted file mode 100644 index 170fe6542..000000000 --- a/app/javascript/styles/fonts/montserrat.scss +++ /dev/null @@ -1,21 +0,0 @@ -@font-face { - font-family: mastodon-font-display; - src: - local('Montserrat'), - url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'), - url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'), - url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype'); - font-weight: 400; - font-display: swap; - font-style: normal; -} - -@font-face { - font-family: mastodon-font-display; - src: - local('Montserrat Medium'), - url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype'); - font-weight: 500; - font-display: swap; - font-style: normal; -} diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 0bc6247ef..4b27e6b4f 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -36,6 +36,20 @@ html { border-top: 0; } +.column > .scrollable.about { + border-top: 1px solid lighten($ui-base-color, 8%); +} + +.about__meta, +.about__section__title { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); +} + +.rules-list li::before { + background: $ui-highlight-color; +} + .directory__card__img { background: lighten($ui-base-color, 12%); } @@ -45,10 +59,6 @@ html { border-bottom: 1px solid lighten($ui-base-color, 8%); } -.table-of-contents { - border: 1px solid lighten($ui-base-color, 8%); -} - .column-back-button, .column-header { background: $white; @@ -138,11 +148,6 @@ html { .compose-form__poll-wrapper select, .search__input, .setting-text, -.box-widget input[type="text"], -.box-widget input[type="email"], -.box-widget input[type="password"], -.box-widget textarea, -.statuses-grid .detailed-status, .report-dialog-modal__textarea, .audio-player { border: 1px solid lighten($ui-base-color, 8%); @@ -480,52 +485,16 @@ html { background: $white; } -.tabs-bar { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); - border-bottom: 0; - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 0; - } - - &__link { - padding-bottom: 14px; - border-bottom-width: 1px; - border-bottom-color: lighten($ui-base-color, 8%); - - &:hover, - &:active, - &:focus { - background: $ui-base-color; - } - - &.active { - &:hover, - &:active, - &:focus { - background: transparent; - border-bottom-color: $ui-highlight-color; - } - } - } -} - // Change the default colors used on some parts of the profile pages .activity-stream-tabs { background: $account-background-color; border-bottom-color: lighten($ui-base-color, 8%); } -.box-widget, .nothing-here, .page-header, .directory__tag > a, -.directory__tag > div, -.landing-page__call-to-action, -.contact-widget, -.landing .hero-widget__text, -.landing-page__information.contact-widget { +.directory__tag > div { background: $white; border: 1px solid lighten($ui-base-color, 8%); @@ -536,11 +505,6 @@ html { } } -.landing .hero-widget__text { - border-top: 0; - border-bottom: 0; -} - .simple_form { input[type="text"], input[type="number"], @@ -553,26 +517,12 @@ html { } } -.landing .hero-widget__footer { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); - border-top: 0; - - @media screen and (max-width: $no-gap-breakpoint) { - border: 0; - } -} - .picture-in-picture-placeholder { background: $white; border-color: lighten($ui-base-color, 8%); color: lighten($ui-base-color, 8%); } -.brand__tagline { - color: $ui-secondary-color; -} - .directory__tag > a { &:hover, &:active, @@ -666,8 +616,7 @@ html { } } -.simple_form, -.table-form { +.simple_form { .warning { box-shadow: none; background: rgba($error-red, 0.5); @@ -801,9 +750,6 @@ html { } .hero-widget, -.box-widget, -.contact-widget, -.landing-page__information.contact-widget, .moved-account-widget, .memoriam-widget, .activity-stream, diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index 8893e3cf0..0183c43d5 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -1,7 +1,5 @@ $maximum-width: 1235px; $fluid-breakpoint: $maximum-width + 20px; -$column-breakpoint: 700px; -$small-breakpoint: 960px; .container { box-sizing: border-box; @@ -15,892 +13,44 @@ $small-breakpoint: 960px; } } -.rich-formatting { - font-family: $font-sans-serif, sans-serif; - font-size: 14px; - font-weight: 400; - line-height: 1.7; - word-wrap: break-word; - color: $darker-text-color; - - a { - color: $highlight-text-color; - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - - p, - li { - color: $darker-text-color; - } - - p { - margin-top: 0; - margin-bottom: 0.85em; - - &:last-child { - margin-bottom: 0; - } - } - - strong { - font-weight: 700; - color: $secondary-text-color; - } - - em { - font-style: italic; - color: $secondary-text-color; - } - - code { - font-size: 0.85em; - background: darken($ui-base-color, 8%); - border-radius: 4px; - padding: 0.2em 0.3em; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: $font-display, sans-serif; - margin-top: 1.275em; - margin-bottom: 0.85em; - font-weight: 500; - color: $secondary-text-color; - } - - h1 { - font-size: 2em; - } - - h2 { - font-size: 1.75em; - } - - h3 { - font-size: 1.5em; - } - - h4 { - font-size: 1.25em; - } - - h5, - h6 { - font-size: 1em; - } - - ul { - list-style: disc; - } - - ol { - list-style: decimal; - } - - ul, - ol { - margin: 0; - padding: 0; - padding-left: 2em; - margin-bottom: 0.85em; - - &[type='a'] { - list-style-type: lower-alpha; - } - - &[type='i'] { - list-style-type: lower-roman; - } - } - - hr { - width: 100%; - height: 0; - border: 0; - border-bottom: 1px solid lighten($ui-base-color, 4%); - margin: 1.7em 0; - - &.spacer { - height: 1px; - border: 0; - } - } - - table { - width: 100%; - border-collapse: collapse; - break-inside: auto; - margin-top: 24px; - margin-bottom: 32px; - - thead tr, - tbody tr { - border-bottom: 1px solid lighten($ui-base-color, 4%); - font-size: 1em; - line-height: 1.625; - font-weight: 400; - text-align: left; - color: $darker-text-color; - } - - thead tr { - border-bottom-width: 2px; - line-height: 1.5; - font-weight: 500; - color: $dark-text-color; - } - - th, - td { - padding: 8px; - align-self: flex-start; - align-items: flex-start; - word-break: break-all; - - &.nowrap { - width: 25%; - position: relative; - - &::before { - content: ' '; - visibility: hidden; - } - - span { - position: absolute; - left: 8px; - right: 8px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - } - - & > :first-child { - margin-top: 0; - } +.brand { + position: relative; + text-decoration: none; } -.information-board { - background: darken($ui-base-color, 4%); - padding: 20px 0; - - .container-alt { - position: relative; - padding-right: 280px + 15px; - } - - &__sections { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - - &__section { - flex: 1 0 0; - font-family: $font-sans-serif, sans-serif; - font-size: 16px; - line-height: 28px; - color: $primary-text-color; - text-align: right; - padding: 10px 15px; - - span, - strong { - display: block; - } - - span { - &:last-child { - color: $secondary-text-color; - } - } - - strong { - font-family: $font-display, sans-serif; - font-weight: 500; - font-size: 32px; - line-height: 48px; - } - - @media screen and (max-width: $column-breakpoint) { - text-align: center; - } - } - - .panel { - position: absolute; - width: 280px; - box-sizing: border-box; - background: darken($ui-base-color, 8%); - padding: 20px; - padding-top: 10px; - border-radius: 4px 4px 0 0; - right: 0; - bottom: -40px; - - .panel-header { - font-family: $font-display, sans-serif; - font-size: 14px; - line-height: 24px; - font-weight: 500; - color: $darker-text-color; - padding-bottom: 5px; - margin-bottom: 15px; - border-bottom: 1px solid lighten($ui-base-color, 4%); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - a, - span { - font-weight: 400; - color: darken($darker-text-color, 10%); - } - - a { - text-decoration: none; - } - } - } - - .owner { - text-align: center; - - .avatar { - width: 80px; - height: 80px; - margin: 0 auto; - margin-bottom: 15px; - - img { - display: block; - width: 80px; - height: 80px; - border-radius: 48px; - } - } - - .name { - font-size: 14px; - - a { - display: block; - color: $primary-text-color; - text-decoration: none; - - &:hover { - .display_name { - text-decoration: underline; - } - } - } - - .username { - display: block; - color: $darker-text-color; - } - } - } -} +.rules-list { + font-size: 15px; + line-height: 22px; + color: $primary-text-color; + counter-reset: list-counter; -.landing-page { - p, li { - font-family: $font-sans-serif, sans-serif; - font-size: 16px; - font-weight: 400; - line-height: 30px; - margin-bottom: 12px; - color: $darker-text-color; - - a { - color: $highlight-text-color; - text-decoration: underline; - } - } - - em { - display: inline; - margin: 0; - padding: 0; - font-weight: 700; - background: transparent; - font-family: inherit; - font-size: inherit; - line-height: inherit; - color: lighten($darker-text-color, 10%); - } - - h1 { - font-family: $font-display, sans-serif; - font-size: 26px; - line-height: 30px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - - small { - font-family: $font-sans-serif, sans-serif; - display: block; - font-size: 18px; - font-weight: 400; - color: lighten($darker-text-color, 10%); - } - } - - h2 { - font-family: $font-display, sans-serif; - font-size: 22px; - line-height: 26px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - h3 { - font-family: $font-display, sans-serif; - font-size: 18px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - h4 { - font-family: $font-display, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - h5 { - font-family: $font-display, sans-serif; - font-size: 14px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - h6 { - font-family: $font-display, sans-serif; - font-size: 12px; - line-height: 24px; + position: relative; + border-bottom: 1px solid lighten($ui-base-color, 8%); + padding: 1em 1.75em; + padding-left: 3em; font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - ul, - ol { - margin-left: 20px; - - &[type='a'] { - list-style-type: lower-alpha; - } - - &[type='i'] { - list-style-type: lower-roman; - } - } - - ul { - list-style: disc; - } - - ol { - list-style: decimal; - } - - li > ol, - li > ul { - margin-top: 6px; - } - - hr { - width: 100%; - height: 0; - border: 0; - border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6); - margin: 20px 0; - - &.spacer { - height: 1px; - border: 0; - } - } - - &__information, - &__forms { - padding: 20px; - } - - &__call-to-action { - background: $ui-base-color; - border-radius: 4px; - padding: 25px 40px; - overflow: hidden; - box-sizing: border-box; - - .row { - width: 100%; - display: flex; - flex-direction: row-reverse; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - } - - .row__information-board { - display: flex; - justify-content: flex-end; - align-items: flex-end; - - .information-board__section { - flex: 1 0 auto; - padding: 0 10px; - } - - @media screen and (max-width: $no-gap-breakpoint) { - width: 100%; - justify-content: space-between; - } - } - - .row__mascot { - flex: 1; - margin: 10px -50px 0 0; - - @media screen and (max-width: $no-gap-breakpoint) { - display: none; - } - } - } - - &__logo { - margin-right: 20px; - - img { - height: 50px; - width: auto; - mix-blend-mode: lighten; - } - } - - &__information { - padding: 45px 40px; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - - strong { + counter-increment: list-counter; + + &::before { + content: counter(list-counter); + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + background: $highlight-text-color; + color: $ui-base-color; + border-radius: 50%; + width: 4ch; + height: 4ch; font-weight: 500; - color: lighten($darker-text-color, 10%); - } - - .account { - border-bottom: 0; - padding: 0; - - &__display-name { - align-items: center; - display: flex; - margin-right: 5px; - } - - div.account__display-name { - &:hover { - .display-name strong { - text-decoration: none; - } - } - - .account__avatar { - cursor: default; - } - } - - &__avatar-wrapper { - margin-left: 0; - flex: 0 0 auto; - } - - .display-name { - font-size: 15px; - - &__account { - font-size: 14px; - } - } - } - - @media screen and (max-width: $small-breakpoint) { - .contact { - margin-top: 30px; - } - } - - @media screen and (max-width: $column-breakpoint) { - padding: 25px 20px; - } - } - - &__information, - &__forms, - #mastodon-timeline { - box-sizing: border-box; - background: $ui-base-color; - border-radius: 4px; - box-shadow: 0 0 6px rgba($black, 0.1); - } - - &__mascot { - height: 104px; - position: relative; - left: -40px; - bottom: 25px; - - img { - height: 190px; - width: auto; - } - } - - &__short-description { - .row { display: flex; - flex-wrap: wrap; + justify-content: center; align-items: center; - margin-bottom: 40px; - } - - @media screen and (max-width: $column-breakpoint) { - .row { - margin-bottom: 20px; - } - } - - p a { - color: $secondary-text-color; - } - - h1 { - font-weight: 500; - color: $primary-text-color; - margin-bottom: 0; - - small { - color: $darker-text-color; - - span { - color: $secondary-text-color; - } - } - } - - p:last-child { - margin-bottom: 0; - } - } - - &__hero { - margin-bottom: 10px; - - img { - display: block; - margin: 0; - max-width: 100%; - height: auto; - border-radius: 4px; - } - } - - @media screen and (max-width: 840px) { - .information-board { - .container-alt { - padding-right: 20px; - } - - .panel { - position: static; - margin-top: 20px; - width: 100%; - border-radius: 4px; - - .panel-header { - text-align: center; - } - } - } - } - - @media screen and (max-width: 675px) { - .header-wrapper { - padding-top: 0; - - &.compact { - padding-bottom: 0; - } - - &.compact .hero .heading { - text-align: initial; - } } - .header .container-alt, - .features .container-alt { - display: block; - } - } - - .cta { - margin: 20px; - } -} - -.landing { - margin-bottom: 100px; - - @media screen and (max-width: 738px) { - margin-bottom: 0; - } - - &__brand { - display: flex; - justify-content: center; - align-items: center; - padding: 50px; - - .logo { - fill: $primary-text-color; - height: 52px; - } - - @media screen and (max-width: $no-gap-breakpoint) { - padding: 0; - margin-bottom: 30px; - } - } - - .directory { - margin-top: 30px; - background: transparent; - box-shadow: none; - border-radius: 0; - } - - .hero-widget { - margin-top: 30px; - margin-bottom: 0; - - h4 { - padding: 10px; - text-transform: uppercase; - font-weight: 700; - font-size: 13px; - color: $darker-text-color; - } - - &__text { - border-radius: 0; - padding-bottom: 0; - } - - &__footer { - background: $ui-base-color; - padding: 10px; - border-radius: 0 0 4px 4px; - display: flex; - - &__column { - flex: 1 1 50%; - overflow-x: hidden; - } - } - - .account { - padding: 10px 0; - border-bottom: 0; - - .account__display-name { - display: flex; - align-items: center; - } - } - - &__counters__wrapper { - display: flex; - } - - &__counter { - padding: 10px; - width: 50%; - - strong { - font-family: $font-display, sans-serif; - font-size: 15px; - font-weight: 700; - display: block; - } - - span { - font-size: 14px; - color: $darker-text-color; - } - } - } - - .simple_form .user_agreement .label_input > label { - font-weight: 400; - color: $darker-text-color; - } - - .simple_form p.lead { - color: $darker-text-color; - font-size: 15px; - line-height: 20px; - font-weight: 400; - margin-bottom: 25px; - } - - &__grid { - max-width: 960px; - margin: 0 auto; - display: grid; - grid-template-columns: minmax(0, 50%) minmax(0, 50%); - grid-gap: 30px; - - @media screen and (max-width: 738px) { - grid-template-columns: minmax(0, 100%); - grid-gap: 10px; - - &__column-login { - grid-row: 1; - display: flex; - flex-direction: column; - - .box-widget { - order: 2; - flex: 0 0 auto; - } - - .hero-widget { - margin-top: 0; - margin-bottom: 10px; - order: 1; - flex: 0 0 auto; - } - } - - &__column-registration { - grid-row: 2; - } - - .directory { - margin-top: 10px; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - grid-gap: 0; - - .hero-widget { - display: block; - margin-bottom: 0; - box-shadow: none; - - &__img, - &__img img, - &__footer { - border-radius: 0; - } - } - - .hero-widget, - .box-widget, - .directory__tag { - border-bottom: 1px solid lighten($ui-base-color, 8%); - } - - .directory { - margin-top: 0; - - &__tag { - margin-bottom: 0; - - & > a, - & > div { - border-radius: 0; - box-shadow: none; - } - - &:last-child { - border-bottom: 0; - } - } - } - } - } -} - -.brand { - position: relative; - text-decoration: none; -} - -.brand__tagline { - display: block; - position: absolute; - bottom: -10px; - left: 50px; - width: 300px; - color: $ui-primary-color; - text-decoration: none; - font-size: 14px; - - @media screen and (max-width: $no-gap-breakpoint) { - position: static; - width: auto; - margin-top: 20px; - color: $dark-text-color; - } -} - -.rules-list { - background: darken($ui-base-color, 2%); - border: 1px solid darken($ui-base-color, 8%); - border-radius: 4px; - padding: 0.5em 2.5em !important; - margin-top: 1.85em !important; - - li { - border-bottom: 1px solid lighten($ui-base-color, 4%); - color: $dark-text-color; - padding: 1em; - &:last-child { border-bottom: 0; } } - - &__text { - color: $primary-text-color; - } } diff --git a/app/javascript/styles/mastodon/compact_header.scss b/app/javascript/styles/mastodon/compact_header.scss deleted file mode 100644 index 4980ab5f1..000000000 --- a/app/javascript/styles/mastodon/compact_header.scss +++ /dev/null @@ -1,34 +0,0 @@ -.compact-header { - h1 { - font-size: 24px; - line-height: 28px; - color: $darker-text-color; - font-weight: 500; - margin-bottom: 20px; - padding: 0 10px; - word-wrap: break-word; - - @media screen and (max-width: 740px) { - text-align: center; - padding: 20px 10px 0; - } - - a { - color: inherit; - text-decoration: none; - } - - small { - font-weight: 400; - color: $secondary-text-color; - } - - img { - display: inline-block; - margin-bottom: -5px; - margin-right: 15px; - width: 36px; - height: 36px; - } - } -} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index a8919b9cb..d4657d180 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3261,6 +3261,7 @@ $ui-header-height: 55px; padding: 10px; padding-top: 20px; z-index: 1; + font-size: 13px; ul { margin-bottom: 10px; @@ -3272,7 +3273,6 @@ $ui-header-height: 55px; p { color: $dark-text-color; - font-size: 13px; margin-bottom: 20px; a { @@ -8266,79 +8266,202 @@ noscript { &__body { margin-top: 20px; - color: $secondary-text-color; - font-size: 15px; - line-height: 22px; + } +} - h1, - p, - ul, - ol { - margin-bottom: 20px; - } +.prose { + color: $secondary-text-color; + font-size: 15px; + line-height: 22px; - ul { - list-style: disc; - } + p, + ul, + ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } - ol { - list-style: decimal; - } + img { + margin-top: 2em; + margin-bottom: 2em; + } - ul, - ol { - padding-left: 1em; + video { + margin-top: 2em; + margin-bottom: 2em; + } + + figure { + margin-top: 2em; + margin-bottom: 2em; + + figcaption { + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; } + } - li { - margin-bottom: 10px; + figure > * { + margin-top: 0; + margin-bottom: 0; + } - &::marker { - color: $darker-text-color; - } + h1 { + font-size: 1.5em; + margin-top: 0; + margin-bottom: 1em; + line-height: 1.33; + } - &:last-child { - margin-bottom: 0; - } - } + h2 { + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + h3, + h4, + h5, + h6 { + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } - h1 { - color: $primary-text-color; - font-size: 19px; - line-height: 24px; - font-weight: 700; - margin-top: 30px; + ol { + counter-reset: list-counter; + } - &:first-child { - margin-top: 0; - } - } + li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } - strong { - font-weight: 700; - color: $primary-text-color; - } + ol > li { + counter-increment: list-counter; - em { - font-style: italic; + &::before { + content: counter(list-counter) "."; + position: absolute; + left: 0; } + } - a { - color: $highlight-text-color; - text-decoration: underline; + ul > li::before { + content: ""; + position: absolute; + background-color: $darker-text-color; + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: 0.5em; + left: 0.25em; + } - &:focus, - &:hover, - &:active { - text-decoration: none; - } - } + ul > li, + ol > li { + position: relative; + padding-left: 1.75em; + } - hr { - border: 1px solid lighten($ui-base-color, 4%); - margin: 30px 0; + & > ul > li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + & > ul > li > *:first-child { + margin-top: 1.25em; + } + + & > ul > li > *:last-child { + margin-bottom: 1.25em; + } + + & > ol > li > *:first-child { + margin-top: 1.25em; + } + + & > ol > li > *:last-child { + margin-bottom: 1.25em; + } + + ul ul, + ul ol, + ol ul, + ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + h1, + h2, + h3, + h4, + h5, + h6, + strong, + b { + color: $primary-text-color; + font-weight: 700; + } + + em, + i { + font-style: italic; + } + + a { + color: $highlight-text-color; + text-decoration: underline; + + &:focus, + &:hover, + &:active { + text-decoration: none; } } + + code { + font-size: 0.875em; + background: darken($ui-base-color, 8%); + border-radius: 4px; + padding: 0.2em 0.3em; + } + + hr { + border: 0; + border-top: 1px solid lighten($ui-base-color, 4%); + margin-top: 3em; + margin-bottom: 3em; + } + + hr + * { + margin-top: 0; + } + + h2 + * { + margin-top: 0; + } + + h3 + * { + margin-top: 0; + } + + h4 + *, + h5 + *, + h6 + * { + margin-top: 0; + } + + & > :first-child { + margin-top: 0; + } + + & > :last-child { + margin-bottom: 0; + } } .dismissable-banner { @@ -8365,3 +8488,242 @@ noscript { justify-content: center; } } + +.image { + position: relative; + overflow: hidden; + + &__preview { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + + &.loaded &__preview { + display: none; + } + + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + border: 0; + background: transparent; + opacity: 0; + } + + &.loaded img { + opacity: 1; + } +} + +.about { + padding: 20px; + + @media screen and (min-width: $no-gap-breakpoint) { + border-radius: 4px; + } + + &__header { + margin-bottom: 30px; + + &__hero { + width: 100%; + height: auto; + aspect-ratio: 1.9; + background: lighten($ui-base-color, 4%); + border-radius: 8px; + margin-bottom: 30px; + } + + h1, + p { + text-align: center; + } + + h1 { + font-size: 24px; + line-height: 1.5; + font-weight: 700; + margin-bottom: 10px; + } + + p { + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: $darker-text-color; + } + } + + &__meta { + background: lighten($ui-base-color, 4%); + border-radius: 4px; + display: flex; + margin-bottom: 30px; + font-size: 15px; + + &__column { + box-sizing: border-box; + width: 50%; + padding: 20px; + } + + &__divider { + width: 0; + border: 0; + border-style: solid; + border-color: lighten($ui-base-color, 8%); + border-left-width: 1px; + min-height: calc(100% - 60px); + flex: 0 0 auto; + } + + h4 { + font-size: 15px; + text-transform: uppercase; + color: $darker-text-color; + font-weight: 500; + margin-bottom: 20px; + } + + @media screen and (max-width: 600px) { + display: block; + + h4 { + text-align: center; + } + + &__column { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + &__divider { + min-height: 0; + width: 100%; + border-left-width: 0; + border-top-width: 1px; + } + } + + .layout-multiple-columns & { + display: block; + + h4 { + text-align: center; + } + + &__column { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + &__divider { + min-height: 0; + width: 100%; + border-left-width: 0; + border-top-width: 1px; + } + } + } + + &__mail { + color: $primary-text-color; + text-decoration: none; + font-weight: 500; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + + .getting-started__footer { + padding: 0; + margin-top: 60px; + text-align: center; + font-size: 15px; + line-height: 22px; + + @media screen and (min-width: $no-gap-breakpoint) { + display: none; + } + } + + .account { + padding: 0; + border: 0; + } + + .account__avatar-wrapper { + margin-left: 0; + } + + .account__relationship { + display: none; + } + + &__section { + margin-bottom: 10px; + + &__title { + font-size: 17px; + font-weight: 600; + line-height: 22px; + padding: 20px; + border-radius: 4px; + background: lighten($ui-base-color, 4%); + color: $highlight-text-color; + cursor: pointer; + } + + &.active &__title { + border-radius: 4px 4px 0 0; + } + + &__body { + border: 1px solid lighten($ui-base-color, 4%); + border-top: 0; + padding: 20px; + font-size: 15px; + line-height: 22px; + } + } + + &__domain-blocks { + margin-top: 30px; + width: 100%; + border-collapse: collapse; + break-inside: auto; + + th { + text-align: left; + font-weight: 500; + color: $darker-text-color; + } + + thead tr, + tbody tr { + border-bottom: 1px solid lighten($ui-base-color, 8%); + } + + tbody tr:last-child { + border-bottom: 0; + } + + th, + td { + padding: 8px; + } + } +} diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 01ee56219..8e5ed03f0 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -30,7 +30,6 @@ outline: 0; padding: 12px 16px; line-height: 32px; - font-family: $font-display, sans-serif; font-weight: 500; font-size: 14px; } diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss index c21fc9eba..f25765d1d 100644 --- a/app/javascript/styles/mastodon/dashboard.scss +++ b/app/javascript/styles/mastodon/dashboard.scss @@ -38,7 +38,6 @@ font-weight: 500; font-size: 24px; color: $primary-text-color; - font-family: $font-display, sans-serif; margin-bottom: 20px; line-height: 30px; } diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 3d67f3b56..69a0b22d6 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -139,18 +139,9 @@ code { } .rules-list { - list-style: decimal; font-size: 17px; line-height: 22px; - font-weight: 500; - background: transparent; - border: 0; - padding: 0.5em 1em !important; margin-bottom: 30px; - - li { - border-color: lighten($ui-base-color, 8%); - } } .hint { @@ -603,41 +594,6 @@ code { } } } - - &__overlay-area { - position: relative; - - &__blurred form { - filter: blur(2px); - } - - &__overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - background: rgba($ui-base-color, 0.65); - border-radius: 4px; - margin-left: -4px; - margin-top: -4px; - padding: 4px; - - &__content { - text-align: center; - - &.rich-formatting { - &, - p { - color: $primary-text-color; - } - } - } - } - } } .block-icon { @@ -908,24 +864,7 @@ code { } } -.table-form { - p { - margin-bottom: 15px; - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - } -} - -.simple_form, -.table-form { +.simple_form { .warning { box-sizing: border-box; background: rgba($error-value-color, 0.5); diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 43284eb48..260a97c6d 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -112,13 +112,6 @@ } } -.box-widget { - padding: 20px; - border-radius: 4px; - background: $ui-base-color; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); -} - .placeholder-widget { padding: 16px; border-radius: 4px; @@ -128,47 +121,6 @@ margin-bottom: 10px; } -.contact-widget { - min-height: 100%; - font-size: 15px; - color: $darker-text-color; - line-height: 20px; - word-wrap: break-word; - font-weight: 400; - padding: 0; - - h4 { - padding: 10px; - text-transform: uppercase; - font-weight: 700; - font-size: 13px; - color: $darker-text-color; - } - - .account { - border-bottom: 0; - padding: 10px 0; - padding-top: 5px; - } - - & > a { - display: inline-block; - padding: 10px; - padding-top: 0; - color: $darker-text-color; - text-decoration: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } -} - .moved-account-widget { padding: 15px; padding-bottom: 20px; @@ -249,37 +201,6 @@ margin-bottom: 10px; } -.page-header { - background: lighten($ui-base-color, 8%); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - border-radius: 4px; - padding: 60px 15px; - text-align: center; - margin: 10px 0; - - h1 { - color: $primary-text-color; - font-size: 36px; - line-height: 1.1; - font-weight: 700; - margin-bottom: 10px; - } - - p { - font-size: 15px; - color: $darker-text-color; - } - - @media screen and (max-width: $no-gap-breakpoint) { - margin-top: 0; - background: lighten($ui-base-color, 4%); - - h1 { - font-size: 24px; - } - } -} - .directory { background: $ui-base-color; border-radius: 4px; @@ -366,34 +287,6 @@ } } -.avatar-stack { - display: flex; - justify-content: flex-end; - - .account__avatar { - flex: 0 0 auto; - width: 36px; - height: 36px; - border-radius: 50%; - position: relative; - margin-left: -10px; - background: darken($ui-base-color, 8%); - border: 2px solid $ui-base-color; - - &:nth-child(1) { - z-index: 1; - } - - &:nth-child(2) { - z-index: 2; - } - - &:nth-child(3) { - z-index: 3; - } - } -} - .accounts-table { width: 100%; @@ -495,11 +388,7 @@ .moved-account-widget, .memoriam-widget, -.box-widget, -.contact-widget, -.landing-page__information.contact-widget, -.directory, -.page-header { +.directory { @media screen and (max-width: $no-gap-breakpoint) { margin-bottom: 0; box-shadow: none; @@ -507,88 +396,6 @@ } } -$maximum-width: 1235px; -$fluid-breakpoint: $maximum-width + 20px; - -.statuses-grid { - min-height: 600px; - - @media screen and (max-width: 640px) { - width: 100% !important; // Masonry layout is unnecessary at this width - } - - &__item { - width: math.div(960px - 20px, 3); - - @media screen and (max-width: $fluid-breakpoint) { - width: math.div(940px - 20px, 3); - } - - @media screen and (max-width: 640px) { - width: 100%; - } - - @media screen and (max-width: $no-gap-breakpoint) { - width: 100vw; - } - } - - .detailed-status { - border-radius: 4px; - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 1px solid lighten($ui-base-color, 16%); - } - - &.compact { - .detailed-status__meta { - margin-top: 15px; - } - - .status__content { - font-size: 15px; - line-height: 20px; - - .emojione { - width: 20px; - height: 20px; - margin: -3px 0 0; - } - - .status__content__spoiler-link { - line-height: 20px; - margin: 0; - } - } - - .media-gallery, - .status-card, - .video-player { - margin-top: 15px; - } - } - } -} - -.notice-widget { - margin-bottom: 10px; - color: $darker-text-color; - - p { - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - } - - a { - font-size: 14px; - line-height: 20px; - } -} - -.notice-widget, .placeholder-widget { a { text-decoration: none; @@ -602,37 +409,3 @@ $fluid-breakpoint: $maximum-width + 20px; } } } - -.table-of-contents { - background: darken($ui-base-color, 4%); - min-height: 100%; - font-size: 14px; - border-radius: 4px; - - li a { - display: block; - font-weight: 500; - padding: 15px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-decoration: none; - color: $primary-text-color; - border-bottom: 1px solid lighten($ui-base-color, 4%); - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - - li:last-child a { - border-bottom: 0; - } - - li ul { - padding-left: 20px; - border-bottom: 1px solid lighten($ui-base-color, 4%); - } -} diff --git a/app/models/domain_block.rb b/app/models/domain_block.rb index b08687787..ad1dc2a38 100644 --- a/app/models/domain_block.rb +++ b/app/models/domain_block.rb @@ -28,8 +28,8 @@ class DomainBlock < ApplicationRecord delegate :count, to: :accounts, prefix: true scope :matches_domain, ->(value) { where(arel_table[:domain].matches("%#{value}%")) } - scope :with_user_facing_limitations, -> { where(severity: [:silence, :suspend]).or(where(reject_media: true)) } - scope :by_severity, -> { order(Arel.sql('(CASE severity WHEN 0 THEN 1 WHEN 1 THEN 2 WHEN 2 THEN 0 END), reject_media, domain')) } + scope :with_user_facing_limitations, -> { where(severity: [:silence, :suspend]) } + scope :by_severity, -> { order(Arel.sql('(CASE severity WHEN 0 THEN 1 WHEN 1 THEN 2 WHEN 2 THEN 0 END), domain')) } def to_log_human_identifier domain diff --git a/app/models/extended_description.rb b/app/models/extended_description.rb new file mode 100644 index 000000000..6e5c0d1b6 --- /dev/null +++ b/app/models/extended_description.rb @@ -0,0 +1,15 @@ +# frozen_string_literal: true + +class ExtendedDescription < ActiveModelSerializers::Model + attributes :updated_at, :text + + def self.current + custom = Setting.find_by(var: 'site_extended_description') + + if custom&.value.present? + new(text: custom.value, updated_at: custom.updated_at) + else + new + end + end +end diff --git a/app/serializers/rest/domain_block_serializer.rb b/app/serializers/rest/domain_block_serializer.rb new file mode 100644 index 000000000..678463e13 --- /dev/null +++ b/app/serializers/rest/domain_block_serializer.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + +class REST::DomainBlockSerializer < ActiveModel::Serializer + attributes :domain, :digest, :severity, :comment + + def domain + object.public_domain + end + + def digest + object.domain_digest + end + + def comment + object.public_comment if instance_options[:with_comment] + end +end diff --git a/app/serializers/rest/extended_description_serializer.rb b/app/serializers/rest/extended_description_serializer.rb new file mode 100644 index 000000000..0c3649033 --- /dev/null +++ b/app/serializers/rest/extended_description_serializer.rb @@ -0,0 +1,13 @@ +# frozen_string_literal: true + +class REST::ExtendedDescriptionSerializer < ActiveModel::Serializer + attributes :updated_at, :content + + def updated_at + object.updated_at&.iso8601 + end + + def content + object.text + end +end diff --git a/app/views/about/_domain_blocks.html.haml b/app/views/about/_domain_blocks.html.haml deleted file mode 100644 index 35a30f16e..000000000 --- a/app/views/about/_domain_blocks.html.haml +++ /dev/null @@ -1,12 +0,0 @@ -%table - %thead - %tr - %th= t('about.unavailable_content_description.domain') - %th= t('about.unavailable_content_description.reason') - %tbody - - domain_blocks.each do |domain_block| - %tr - %td.nowrap - %span{ title: "SHA-256: #{domain_block.domain_digest}" }= domain_block.public_domain - %td - = domain_block.public_comment if display_blocks_rationale? diff --git a/app/views/about/more.html.haml b/app/views/about/more.html.haml deleted file mode 100644 index a5a10b620..000000000 --- a/app/views/about/more.html.haml +++ /dev/null @@ -1,96 +0,0 @@ -- content_for :page_title do - = site_hostname - -- content_for :header_tags do - = javascript_pack_tag 'public', crossorigin: 'anonymous' - = render partial: 'shared/og' - -.grid-4 - .column-0 - .public-account-header.public-account-header--no-bar - .public-account-header__image - = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title, class: 'parallax' - - .column-1 - .landing-page__call-to-action{ dir: 'ltr' } - .row - .row__information-board - .information-board__section - %span= t 'about.user_count_before' - %strong= friendly_number_to_human @instance_presenter.user_count - %span= t 'about.user_count_after', count: @instance_presenter.user_count - .information-board__section - %span= t 'about.status_count_before' - %strong= friendly_number_to_human @instance_presenter.status_count - %span= t 'about.status_count_after', count: @instance_presenter.status_count - .row__mascot - .landing-page__mascot - = image_tag @instance_presenter.mascot&.file&.url || asset_pack_path('media/images/elephant_ui_plane.svg'), alt: '' - - .column-2 - .contact-widget - %h4= t 'about.administered_by' - - = account_link_to(@instance_presenter.contact.account) - - - if @instance_presenter.contact.email.present? - %h4 - = succeed ':' do - = t 'about.contact' - - = mail_to @instance_presenter.contact.email, nil, title: @instance_presenter.contact.email - - .column-3 - = render 'application/flashes' - - - if @contents.blank? && @rules.empty? && (!display_blocks? || @blocks&.empty?) - = nothing_here - - else - .box-widget - .rich-formatting - - unless @rules.empty? - %h2#rules= t('about.rules') - - %p= t('about.rules_html') - - %ol.rules-list - - @rules.each do |rule| - %li - .rules-list__text= rule.text - - = @contents.html_safe - - - if display_blocks? && !@blocks.empty? - %h2#unavailable-content= t('about.unavailable_content') - - %p= t('about.unavailable_content_html') - - - if (blocks = @blocks.select(&:reject_media?)) && !blocks.empty? - %h3= t('about.unavailable_content_description.rejecting_media_title') - %p= t('about.unavailable_content_description.rejecting_media') - = render partial: 'domain_blocks', locals: { domain_blocks: blocks } - - if (blocks = @blocks.select(&:silence?)) && !blocks.empty? - %h3= t('about.unavailable_content_description.silenced_title') - %p= t('about.unavailable_content_description.silenced') - = render partial: 'domain_blocks', locals: { domain_blocks: blocks } - - if (blocks = @blocks.select(&:suspend?)) && !blocks.empty? - %h3= t('about.unavailable_content_description.suspended_title') - %p= t('about.unavailable_content_description.suspended') - = render partial: 'domain_blocks', locals: { domain_blocks: blocks } - - .column-4 - %ul.table-of-contents - - unless @rules.empty? - %li= link_to t('about.rules'), '#rules' - - - @table_of_contents.each do |item| - %li - = link_to item.title, "##{item.anchor}" - - - unless item.children.empty? - %ul - - item.children.each do |sub_item| - %li= link_to sub_item.title, "##{sub_item.anchor}" - - - if display_blocks? && !@blocks.empty? - %li= link_to t('about.unavailable_content'), '#unavailable-content' diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml new file mode 100644 index 000000000..aff28b9a9 --- /dev/null +++ b/app/views/about/show.html.haml @@ -0,0 +1,4 @@ +- content_for :page_title do + = t('about.title') + += render partial: 'shared/web_app' diff --git a/config/locales/en.yml b/config/locales/en.yml index 8a70bd8ca..11716234e 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2,41 +2,15 @@ en: about: about_mastodon_html: 'The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!' - about_this: About - administered_by: 'Administered by:' api: API apps: Mobile apps - contact: Contact contact_missing: Not set contact_unavailable: N/A documentation: Documentation hosted_on: Mastodon hosted on %{domain} - instance_actor_flash: | - This account is a virtual actor used to represent the server itself and not any individual user. - It is used for federation purposes and should not be blocked unless you want to block the whole instance, in which case you should use a domain block. privacy_policy: Privacy Policy - rules: Server rules - rules_html: 'Below is a summary of rules you need to follow if you want to have an account on this server of Mastodon:' source_code: Source code - status_count_after: - one: post - other: posts - status_count_before: Who published - unavailable_content: Moderated servers - unavailable_content_description: - domain: Server - reason: Reason - rejecting_media: 'Media files from these servers will not be processed or stored, and no thumbnails will be displayed, requiring manual click-through to the original file:' - rejecting_media_title: Filtered media - silenced: 'Posts from these servers will be hidden in public timelines and conversations, and no notifications will be generated from their users interactions, unless you are following them:' - silenced_title: Limited servers - suspended: 'No data from these servers will be processed, stored or exchanged, making any interaction or communication with users from these servers impossible:' - suspended_title: Suspended servers - unavailable_content_html: Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server. - user_count_after: - one: user - other: users - user_count_before: Home to + title: About what_is_mastodon: What is Mastodon? accounts: choices_html: "%{name}'s choices:" diff --git a/config/routes.rb b/config/routes.rb index e6098cd17..29ec0f8a5 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -487,7 +487,9 @@ Rails.application.routes.draw do resource :instance, only: [:show] do resources :peers, only: [:index], controller: 'instances/peers' resources :rules, only: [:index], controller: 'instances/rules' + resources :domain_blocks, only: [:index], controller: 'instances/domain_blocks' resource :privacy_policy, only: [:show], controller: 'instances/privacy_policies' + resource :extended_description, only: [:show], controller: 'instances/extended_descriptions' resource :activity, only: [:show], controller: 'instances/activity' end @@ -642,8 +644,8 @@ Rails.application.routes.draw do get '/web/(*any)', to: 'home#index', as: :web - get '/about', to: redirect('/') - get '/about/more', to: 'about#more' + get '/about', to: 'about#show' + get '/about/more', to: redirect('/about') get '/privacy-policy', to: 'privacy#show', as: :privacy_policy get '/terms', to: redirect('/privacy-policy') diff --git a/spec/controllers/about_controller_spec.rb b/spec/controllers/about_controller_spec.rb index 20069e413..97143ec43 100644 --- a/spec/controllers/about_controller_spec.rb +++ b/spec/controllers/about_controller_spec.rb @@ -3,13 +3,9 @@ require 'rails_helper' RSpec.describe AboutController, type: :controller do render_views - describe 'GET #more' do + describe 'GET #show' do before do - get :more - end - - it 'assigns @instance_presenter' do - expect(assigns(:instance_presenter)).to be_kind_of InstancePresenter + get :show end it 'returns http success' do -- cgit From 4c7b5fb6c1787438ef130d9aecd5d0a4d54d08a9 Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Sun, 16 Oct 2022 15:43:59 +0900 Subject: Add featured tags selector for WebUI (#19358) * Add featured tags selector for WebUI * Add title to tag count --- app/javascript/mastodon/actions/featured_tags.js | 34 +++++++++++ app/javascript/mastodon/actions/timelines.js | 4 +- .../features/account/components/featured_tags.js | 71 ++++++++++++++++++++++ .../features/account_timeline/components/header.js | 20 +++--- .../mastodon/features/account_timeline/index.js | 26 +++++--- app/javascript/mastodon/features/ui/index.js | 1 + app/javascript/mastodon/locales/en.json | 3 + app/javascript/mastodon/reducers/user_lists.js | 28 ++++++++- app/javascript/styles/mastodon/components.scss | 27 ++++++++ 9 files changed, 194 insertions(+), 20 deletions(-) create mode 100644 app/javascript/mastodon/actions/featured_tags.js create mode 100644 app/javascript/mastodon/features/account/components/featured_tags.js (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/actions/featured_tags.js b/app/javascript/mastodon/actions/featured_tags.js new file mode 100644 index 000000000..18bb61539 --- /dev/null +++ b/app/javascript/mastodon/actions/featured_tags.js @@ -0,0 +1,34 @@ +import api from '../api'; + +export const FEATURED_TAGS_FETCH_REQUEST = 'FEATURED_TAGS_FETCH_REQUEST'; +export const FEATURED_TAGS_FETCH_SUCCESS = 'FEATURED_TAGS_FETCH_SUCCESS'; +export const FEATURED_TAGS_FETCH_FAIL = 'FEATURED_TAGS_FETCH_FAIL'; + +export const fetchFeaturedTags = (id) => (dispatch, getState) => { + if (getState().getIn(['user_lists', 'featured_tags', id, 'items'])) { + return; + } + + dispatch(fetchFeaturedTagsRequest(id)); + + api(getState).get(`/api/v1/accounts/${id}/featured_tags`) + .then(({ data }) => dispatch(fetchFeaturedTagsSuccess(id, data))) + .catch(err => dispatch(fetchFeaturedTagsFail(id, err))); +}; + +export const fetchFeaturedTagsRequest = (id) => ({ + type: FEATURED_TAGS_FETCH_REQUEST, + id, +}); + +export const fetchFeaturedTagsSuccess = (id, tags) => ({ + type: FEATURED_TAGS_FETCH_SUCCESS, + id, + tags, +}); + +export const fetchFeaturedTagsFail = (id, error) => ({ + type: FEATURED_TAGS_FETCH_FAIL, + id, + error, +}); diff --git a/app/javascript/mastodon/actions/timelines.js b/app/javascript/mastodon/actions/timelines.js index 44fedd5c2..a3434908f 100644 --- a/app/javascript/mastodon/actions/timelines.js +++ b/app/javascript/mastodon/actions/timelines.js @@ -143,8 +143,8 @@ export function fillTimelineGaps(timelineId, path, params = {}, done = noOp) { export const expandHomeTimeline = ({ maxId } = {}, done = noOp) => expandTimeline('home', '/api/v1/timelines/home', { max_id: maxId }, done); export const expandPublicTimeline = ({ maxId, onlyMedia, onlyRemote } = {}, done = noOp) => expandTimeline(`public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { remote: !!onlyRemote, max_id: maxId, only_media: !!onlyMedia }, done); export const expandCommunityTimeline = ({ maxId, onlyMedia } = {}, done = noOp) => expandTimeline(`community${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { local: true, max_id: maxId, only_media: !!onlyMedia }, done); -export const expandAccountTimeline = (accountId, { maxId, withReplies } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, max_id: maxId }); -export const expandAccountFeaturedTimeline = accountId => expandTimeline(`account:${accountId}:pinned`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true }); +export const expandAccountTimeline = (accountId, { maxId, withReplies, tagged } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, tagged, max_id: maxId }); +export const expandAccountFeaturedTimeline = (accountId, { tagged } = {}) => expandTimeline(`account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true, tagged }); export const expandAccountMediaTimeline = (accountId, { maxId } = {}) => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { max_id: maxId, only_media: true, limit: 40 }); export const expandListTimeline = (id, { maxId } = {}, done = noOp) => expandTimeline(`list:${id}`, `/api/v1/timelines/list/${id}`, { max_id: maxId }, done); export const expandHashtagTimeline = (hashtag, { maxId, tags, local } = {}, done = noOp) => { diff --git a/app/javascript/mastodon/features/account/components/featured_tags.js b/app/javascript/mastodon/features/account/components/featured_tags.js new file mode 100644 index 000000000..3d5b8b079 --- /dev/null +++ b/app/javascript/mastodon/features/account/components/featured_tags.js @@ -0,0 +1,71 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { defineMessages, injectIntl } from 'react-intl'; +import classNames from 'classnames'; +import Permalink from 'mastodon/components/permalink'; +import ShortNumber from 'mastodon/components/short_number'; +import { List as ImmutableList } from 'immutable'; + +const messages = defineMessages({ + hashtag_all: { id: 'account.hashtag_all', defaultMessage: 'All' }, + hashtag_all_description: { id: 'account.hashtag_all_description', defaultMessage: 'All posts (deselect hashtags)' }, + hashtag_select_description: { id: 'account.hashtag_select_description', defaultMessage: 'Select hashtag #{name}' }, + statuses_counter: { id: 'account.statuses_counter', defaultMessage: '{count, plural, one {{counter} Post} other {{counter} Posts}}' }, +}); + +const mapStateToProps = (state, { account }) => ({ + featuredTags: state.getIn(['user_lists', 'featured_tags', account.get('id'), 'items'], ImmutableList()), +}); + +export default @connect(mapStateToProps) +@injectIntl +class FeaturedTags extends ImmutablePureComponent { + + static contextTypes = { + router: PropTypes.object, + }; + + static propTypes = { + account: ImmutablePropTypes.map, + featuredTags: ImmutablePropTypes.list, + tagged: PropTypes.string, + intl: PropTypes.object.isRequired, + }; + + render () { + const { account, featuredTags, tagged, intl } = this.props; + + if (!account || featuredTags.isEmpty()) { + return null; + } + + const suspended = account.get('suspended'); + + return ( +
+
+
+ {intl.formatMessage(messages.hashtag_all)} + {!suspended && featuredTags.map(featuredTag => { + const name = featuredTag.get('name'); + const url = featuredTag.get('url'); + const to = `/@${account.get('acct')}/tagged/${name}`; + const desc = intl.formatMessage(messages.hashtag_select_description, { name }); + const count = featuredTag.get('statuses_count'); + + return ( + + #{name} ({}) + + ); + })} +
+
+
+ ); + } + +} diff --git a/app/javascript/mastodon/features/account_timeline/components/header.js b/app/javascript/mastodon/features/account_timeline/components/header.js index f31848f41..ea34a934a 100644 --- a/app/javascript/mastodon/features/account_timeline/components/header.js +++ b/app/javascript/mastodon/features/account_timeline/components/header.js @@ -1,7 +1,8 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import InnerHeader from '../../account/components/header'; +import FeaturedTags from '../../account/components/featured_tags'; import ImmutablePureComponent from 'react-immutable-pure-component'; import MovedNote from './moved_note'; import { FormattedMessage } from 'react-intl'; @@ -27,6 +28,7 @@ export default class Header extends ImmutablePureComponent { hideTabs: PropTypes.bool, domain: PropTypes.string.isRequired, hidden: PropTypes.bool, + tagged: PropTypes.string, }; static contextTypes = { @@ -102,7 +104,7 @@ export default class Header extends ImmutablePureComponent { } render () { - const { account, hidden, hideTabs } = this.props; + const { account, hidden, hideTabs, tagged } = this.props; if (account === null) { return null; @@ -134,11 +136,15 @@ export default class Header extends ImmutablePureComponent { /> {!(hideTabs || hidden) && ( -
- - - -
+ +
+ + + +
+ + + )}
); diff --git a/app/javascript/mastodon/features/account_timeline/index.js b/app/javascript/mastodon/features/account_timeline/index.js index 5b592c5a7..51fb76f1f 100644 --- a/app/javascript/mastodon/features/account_timeline/index.js +++ b/app/javascript/mastodon/features/account_timeline/index.js @@ -18,10 +18,11 @@ import { me } from 'mastodon/initial_state'; import { connectTimeline, disconnectTimeline } from 'mastodon/actions/timelines'; import LimitedAccountHint from './components/limited_account_hint'; import { getAccountHidden } from 'mastodon/selectors'; +import { fetchFeaturedTags } from '../../actions/featured_tags'; const emptyList = ImmutableList(); -const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) => { +const mapStateToProps = (state, { params: { acct, id, tagged }, withReplies = false }) => { const accountId = id || state.getIn(['accounts_map', acct]); if (!accountId) { @@ -30,7 +31,7 @@ const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) = }; } - const path = withReplies ? `${accountId}:with_replies` : accountId; + const path = withReplies ? `${accountId}:with_replies` : `${accountId}${tagged ? `:${tagged}` : ''}`; return { accountId, @@ -38,7 +39,7 @@ const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) = remoteUrl: state.getIn(['accounts', accountId, 'url']), isAccount: !!state.getIn(['accounts', accountId]), statusIds: state.getIn(['timelines', `account:${path}`, 'items'], emptyList), - featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], emptyList), + featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, 'items'], emptyList), isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']), hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']), suspended: state.getIn(['accounts', accountId, 'suspended'], false), @@ -62,6 +63,7 @@ class AccountTimeline extends ImmutablePureComponent { params: PropTypes.shape({ acct: PropTypes.string, id: PropTypes.string, + tagged: PropTypes.string, }).isRequired, accountId: PropTypes.string, dispatch: PropTypes.func.isRequired, @@ -80,15 +82,16 @@ class AccountTimeline extends ImmutablePureComponent { }; _load () { - const { accountId, withReplies, dispatch } = this.props; + const { accountId, withReplies, params: { tagged }, dispatch } = this.props; dispatch(fetchAccount(accountId)); if (!withReplies) { - dispatch(expandAccountFeaturedTimeline(accountId)); + dispatch(expandAccountFeaturedTimeline(accountId, { tagged })); } - dispatch(expandAccountTimeline(accountId, { withReplies })); + dispatch(fetchFeaturedTags(accountId)); + dispatch(expandAccountTimeline(accountId, { withReplies, tagged })); if (accountId === me) { dispatch(connectTimeline(`account:${me}`)); @@ -106,12 +109,17 @@ class AccountTimeline extends ImmutablePureComponent { } componentDidUpdate (prevProps) { - const { params: { acct }, accountId, dispatch } = this.props; + const { params: { acct, tagged }, accountId, withReplies, dispatch } = this.props; if (prevProps.accountId !== accountId && accountId) { this._load(); } else if (prevProps.params.acct !== acct) { dispatch(lookupAccount(acct)); + } else if (prevProps.params.tagged !== tagged) { + if (!withReplies) { + dispatch(expandAccountFeaturedTimeline(accountId, { tagged })); + } + dispatch(expandAccountTimeline(accountId, { withReplies, tagged })); } if (prevProps.accountId === me && accountId !== me) { @@ -128,7 +136,7 @@ class AccountTimeline extends ImmutablePureComponent { } handleLoadMore = maxId => { - this.props.dispatch(expandAccountTimeline(this.props.accountId, { maxId, withReplies: this.props.withReplies })); + this.props.dispatch(expandAccountTimeline(this.props.accountId, { maxId, withReplies: this.props.withReplies, tagged: this.props.params.tagged })); } render () { @@ -174,7 +182,7 @@ class AccountTimeline extends ImmutablePureComponent { } + prepend={} alwaysPrepend append={remoteMessage} scrollKey='account_timeline' diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 8333ea282..8f9f38036 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -195,6 +195,7 @@ class SwitchingColumnsArea extends React.PureComponent { + diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 3eb13a8ea..d840a7103 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -35,6 +35,9 @@ "account.following_counter": "{count, plural, one {{counter} Following} other {{counter} Following}}", "account.follows.empty": "This user doesn't follow anyone yet.", "account.follows_you": "Follows you", + "account.hashtag_all": "All", + "account.hashtag_all_description": "All posts (deselect hashtags)", + "account.hashtag_select_description": "Select hashtag #{name}", "account.hide_reblogs": "Hide boosts from @{name}", "account.joined": "Joined {date}", "account.languages": "Change subscribed languages", diff --git a/app/javascript/mastodon/reducers/user_lists.js b/app/javascript/mastodon/reducers/user_lists.js index 10aaa2d68..f19c1e2e9 100644 --- a/app/javascript/mastodon/reducers/user_lists.js +++ b/app/javascript/mastodon/reducers/user_lists.js @@ -22,7 +22,7 @@ import { FOLLOW_REQUESTS_EXPAND_FAIL, FOLLOW_REQUEST_AUTHORIZE_SUCCESS, FOLLOW_REQUEST_REJECT_SUCCESS, -} from '../actions/accounts'; + } from '../actions/accounts'; import { REBLOGS_FETCH_SUCCESS, FAVOURITES_FETCH_SUCCESS, @@ -51,7 +51,12 @@ import { DIRECTORY_EXPAND_SUCCESS, DIRECTORY_EXPAND_FAIL, } from 'mastodon/actions/directory'; -import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; +import { + FEATURED_TAGS_FETCH_REQUEST, + FEATURED_TAGS_FETCH_SUCCESS, + FEATURED_TAGS_FETCH_FAIL, +} from 'mastodon/actions/featured_tags'; +import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'; const initialListState = ImmutableMap({ next: null, @@ -67,6 +72,7 @@ const initialState = ImmutableMap({ follow_requests: initialListState, blocks: initialListState, mutes: initialListState, + featured_tags: initialListState, }); const normalizeList = (state, path, accounts, next) => { @@ -89,6 +95,18 @@ const normalizeFollowRequest = (state, notification) => { }); }; +const normalizeFeaturedTag = (featuredTags, accountId) => { + const normalizeFeaturedTag = { ...featuredTags, accountId: accountId }; + return fromJS(normalizeFeaturedTag); +}; + +const normalizeFeaturedTags = (state, path, featuredTags, accountId) => { + return state.setIn(path, ImmutableMap({ + items: ImmutableList(featuredTags.map(featuredTag => normalizeFeaturedTag(featuredTag, accountId)).sort((a, b) => b.get('statuses_count') - a.get('statuses_count'))), + isLoading: false, + })); +}; + export default function userLists(state = initialState, action) { switch(action.type) { case FOLLOWERS_FETCH_SUCCESS: @@ -160,6 +178,12 @@ export default function userLists(state = initialState, action) { case DIRECTORY_FETCH_FAIL: case DIRECTORY_EXPAND_FAIL: return state.setIn(['directory', 'isLoading'], false); + case FEATURED_TAGS_FETCH_SUCCESS: + return normalizeFeaturedTags(state, ['featured_tags', action.id], action.tags, action.id); + case FEATURED_TAGS_FETCH_REQUEST: + return state.setIn(['featured_tags', action.id, 'isLoading'], true); + case FEATURED_TAGS_FETCH_FAIL: + return state.setIn(['featured_tags', action.id, 'isLoading'], false); default: return state; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index d4657d180..f8f9200f4 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -7338,6 +7338,33 @@ noscript { } } } + + &__hashtag-links { + overflow: hidden; + padding: 10px 5px; + margin: 0; + color: $darker-text-color; + border-bottom: 1px solid lighten($ui-base-color, 12%); + + a { + display: inline-block; + color: $darker-text-color; + text-decoration: none; + padding: 5px 10px; + font-weight: 500; + + strong { + font-weight: 700; + color: $primary-text-color; + } + } + + a.active { + color: darken($ui-base-color, 4%); + background: $darker-text-color; + border-radius: 18px; + } + } } &__account-note { -- cgit From aefa9253d61def572396c18a8d2ac3cc706ffa2e Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 19 Oct 2022 11:30:59 +0200 Subject: Change featured hashtags to be displayed in navigation panel (#19382) --- app/javascript/mastodon/components/hashtag.js | 36 +++++++++---- .../mastodon/components/navigation_portal.js | 30 +++++++++++ .../features/account/components/featured_tags.js | 60 ++++++++-------------- .../account/containers/featured_tags_container.js | 15 ++++++ .../mastodon/features/account/navigation.js | 51 ++++++++++++++++++ .../features/account_timeline/components/header.js | 20 +++----- .../features/ui/components/navigation_panel.js | 11 ++-- app/javascript/styles/mastodon/components.scss | 33 ------------ app/serializers/rest/featured_tag_serializer.rb | 8 +++ 9 files changed, 162 insertions(+), 102 deletions(-) create mode 100644 app/javascript/mastodon/components/navigation_portal.js create mode 100644 app/javascript/mastodon/features/account/containers/featured_tags_container.js create mode 100644 app/javascript/mastodon/features/account/navigation.js (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/hashtag.js b/app/javascript/mastodon/components/hashtag.js index 4a5a4bb57..8dd27290a 100644 --- a/app/javascript/mastodon/components/hashtag.js +++ b/app/javascript/mastodon/components/hashtag.js @@ -65,23 +65,35 @@ ImmutableHashtag.propTypes = { hashtag: ImmutablePropTypes.map.isRequired, }; -const Hashtag = ({ name, href, to, people, history, className }) => ( +const Hashtag = ({ name, href, to, people, uses, history, className, description, withGraph }) => (
{name ? #{name} : } - {typeof people !== 'undefined' ? : } + {description ? ( + {description} + ) : ( + typeof people !== 'undefined' ? : + )}
-
- - 0)}> - - - -
+ {typeof uses !== 'undefined' && ( +
+ +
+ )} + + {withGraph && ( +
+ + 0)}> + + + +
+ )}
); @@ -90,9 +102,15 @@ Hashtag.propTypes = { href: PropTypes.string, to: PropTypes.string, people: PropTypes.number, + description: PropTypes.node, uses: PropTypes.number, history: PropTypes.arrayOf(PropTypes.number), className: PropTypes.string, + withGraph: PropTypes.bool, +}; + +Hashtag.defaultProps = { + withGraph: true, }; export default Hashtag; diff --git a/app/javascript/mastodon/components/navigation_portal.js b/app/javascript/mastodon/components/navigation_portal.js new file mode 100644 index 000000000..b2d054a3b --- /dev/null +++ b/app/javascript/mastodon/components/navigation_portal.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { Switch, Route, withRouter } from 'react-router-dom'; +import { showTrends } from 'mastodon/initial_state'; +import Trends from 'mastodon/features/getting_started/containers/trends_container'; +import AccountNavigation from 'mastodon/features/account/navigation'; + +const DefaultNavigation = () => ( + <> + {showTrends && ( + <> +
+ + + )} + +); + +export default @withRouter +class NavigationPortal extends React.PureComponent { + + render () { + return ( + + + + + ); + } + +} diff --git a/app/javascript/mastodon/features/account/components/featured_tags.js b/app/javascript/mastodon/features/account/components/featured_tags.js index 3d5b8b079..5837f6e6d 100644 --- a/app/javascript/mastodon/features/account/components/featured_tags.js +++ b/app/javascript/mastodon/features/account/components/featured_tags.js @@ -1,27 +1,16 @@ import React from 'react'; -import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { defineMessages, injectIntl } from 'react-intl'; -import classNames from 'classnames'; -import Permalink from 'mastodon/components/permalink'; -import ShortNumber from 'mastodon/components/short_number'; -import { List as ImmutableList } from 'immutable'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import Hashtag from 'mastodon/components/hashtag'; const messages = defineMessages({ - hashtag_all: { id: 'account.hashtag_all', defaultMessage: 'All' }, - hashtag_all_description: { id: 'account.hashtag_all_description', defaultMessage: 'All posts (deselect hashtags)' }, - hashtag_select_description: { id: 'account.hashtag_select_description', defaultMessage: 'Select hashtag #{name}' }, - statuses_counter: { id: 'account.statuses_counter', defaultMessage: '{count, plural, one {{counter} Post} other {{counter} Posts}}' }, + lastStatusAt: { id: 'account.featured_tags.last_status_at', defaultMessage: 'Last post on {date}' }, + empty: { id: 'account.featured_tags.last_status_never', defaultMessage: 'No posts' }, }); -const mapStateToProps = (state, { account }) => ({ - featuredTags: state.getIn(['user_lists', 'featured_tags', account.get('id'), 'items'], ImmutableList()), -}); - -export default @connect(mapStateToProps) -@injectIntl +export default @injectIntl class FeaturedTags extends ImmutablePureComponent { static contextTypes = { @@ -36,34 +25,27 @@ class FeaturedTags extends ImmutablePureComponent { }; render () { - const { account, featuredTags, tagged, intl } = this.props; + const { account, featuredTags, intl } = this.props; - if (!account || featuredTags.isEmpty()) { + if (!account || account.get('suspended') || featuredTags.isEmpty()) { return null; } - const suspended = account.get('suspended'); - return ( -
-
-
- {intl.formatMessage(messages.hashtag_all)} - {!suspended && featuredTags.map(featuredTag => { - const name = featuredTag.get('name'); - const url = featuredTag.get('url'); - const to = `/@${account.get('acct')}/tagged/${name}`; - const desc = intl.formatMessage(messages.hashtag_select_description, { name }); - const count = featuredTag.get('statuses_count'); - - return ( - - #{name} ({}) - - ); - })} -
-
+
+

}} />

+ + {featuredTags.map(featuredTag => ( + 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)} + /> + ))}
); } diff --git a/app/javascript/mastodon/features/account/containers/featured_tags_container.js b/app/javascript/mastodon/features/account/containers/featured_tags_container.js new file mode 100644 index 000000000..7e206567f --- /dev/null +++ b/app/javascript/mastodon/features/account/containers/featured_tags_container.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import FeaturedTags from '../components/featured_tags'; +import { makeGetAccount } from 'mastodon/selectors'; +import { List as ImmutableList } from 'immutable'; + +const mapStateToProps = () => { + const getAccount = makeGetAccount(); + + return (state, { accountId }) => ({ + account: getAccount(state, accountId), + featuredTags: state.getIn(['user_lists', 'featured_tags', accountId, 'items'], ImmutableList()), + }); +}; + +export default connect(mapStateToProps)(FeaturedTags); diff --git a/app/javascript/mastodon/features/account/navigation.js b/app/javascript/mastodon/features/account/navigation.js new file mode 100644 index 000000000..122674139 --- /dev/null +++ b/app/javascript/mastodon/features/account/navigation.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import FeaturedTags from 'mastodon/features/account/containers/featured_tags_container'; + +const mapStateToProps = (state, { match: { params: { acct } } }) => { + const accountId = state.getIn(['accounts_map', acct]); + + if (!accountId) { + return { + isLoading: true, + }; + } + + return { + accountId, + isLoading: false, + }; +}; + +export default @connect(mapStateToProps) +class AccountNavigation extends React.PureComponent { + + static propTypes = { + match: PropTypes.shape({ + params: PropTypes.shape({ + acct: PropTypes.string, + tagged: PropTypes.string, + }).isRequired, + }).isRequired, + + accountId: PropTypes.string, + isLoading: PropTypes.bool, + }; + + render () { + const { accountId, isLoading, match: { params: { tagged } } } = this.props; + + if (isLoading) { + return null; + } + + return ( + <> +
+ + + ); + } + +} diff --git a/app/javascript/mastodon/features/account_timeline/components/header.js b/app/javascript/mastodon/features/account_timeline/components/header.js index ea34a934a..f31848f41 100644 --- a/app/javascript/mastodon/features/account_timeline/components/header.js +++ b/app/javascript/mastodon/features/account_timeline/components/header.js @@ -1,8 +1,7 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import InnerHeader from '../../account/components/header'; -import FeaturedTags from '../../account/components/featured_tags'; import ImmutablePureComponent from 'react-immutable-pure-component'; import MovedNote from './moved_note'; import { FormattedMessage } from 'react-intl'; @@ -28,7 +27,6 @@ export default class Header extends ImmutablePureComponent { hideTabs: PropTypes.bool, domain: PropTypes.string.isRequired, hidden: PropTypes.bool, - tagged: PropTypes.string, }; static contextTypes = { @@ -104,7 +102,7 @@ export default class Header extends ImmutablePureComponent { } render () { - const { account, hidden, hideTabs, tagged } = this.props; + const { account, hidden, hideTabs } = this.props; if (account === null) { return null; @@ -136,15 +134,11 @@ export default class Header extends ImmutablePureComponent { /> {!(hideTabs || hidden) && ( - -
- - - -
- - - +
+ + + +
)}
); diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index 166d3552b..757ef54ae 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -3,13 +3,13 @@ import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; import Logo from 'mastodon/components/logo'; -import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container'; -import { showTrends, timelinePreview } from 'mastodon/initial_state'; +import { timelinePreview } from 'mastodon/initial_state'; import ColumnLink from './column_link'; import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; import SignInBanner from './sign_in_banner'; +import NavigationPortal from 'mastodon/components/navigation_portal'; const messages = defineMessages({ home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, @@ -93,12 +93,7 @@ class NavigationPanel extends React.Component {
- {showTrends && ( - -
- - - )} +
); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index f8f9200f4..587eba663 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -7338,33 +7338,6 @@ noscript { } } } - - &__hashtag-links { - overflow: hidden; - padding: 10px 5px; - margin: 0; - color: $darker-text-color; - border-bottom: 1px solid lighten($ui-base-color, 12%); - - a { - display: inline-block; - color: $darker-text-color; - text-decoration: none; - padding: 5px 10px; - font-weight: 500; - - strong { - font-weight: 700; - color: $primary-text-color; - } - } - - a.active { - color: darken($ui-base-color, 4%); - background: $darker-text-color; - border-radius: 18px; - } - } } &__account-note { @@ -7482,12 +7455,6 @@ noscript { margin-left: 5px; color: $secondary-text-color; text-decoration: none; - - &__asterisk { - color: $darker-text-color; - font-size: 18px; - vertical-align: super; - } } &__sparkline { diff --git a/app/serializers/rest/featured_tag_serializer.rb b/app/serializers/rest/featured_tag_serializer.rb index 8abcd9b90..c4b35ab03 100644 --- a/app/serializers/rest/featured_tag_serializer.rb +++ b/app/serializers/rest/featured_tag_serializer.rb @@ -16,4 +16,12 @@ class REST::FeaturedTagSerializer < ActiveModel::Serializer def name object.display_name end + + def statuses_count + object.statuses_count.to_s + end + + def last_status_at + object.last_status_at&.to_date&.iso8601 + end end -- cgit From 839f893168ab221b08fa439012189e6c29a2721a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 20 Oct 2022 14:35:29 +0200 Subject: Change public accounts pages to mount the web UI (#19319) * Change public accounts pages to mount the web UI * Fix handling of remote usernames in routes - When logged in, serve web app - When logged out, redirect to permalink - Fix `app-body` class not being set sometimes due to name conflict * Fix missing `multiColumn` prop * Fix failing test * Use `discoverable` attribute to control indexing directives * Fix `` not using `multiColumn` * Add `noindex` to accounts in REST API * Change noindex directive to not be rendered by default before a route is mounted * Add loading indicator for detailed status in web UI * Fix missing indicator appearing while account is loading in web UI --- app/controllers/about_controller.rb | 8 + app/controllers/account_follow_controller.rb | 12 - app/controllers/account_unfollow_controller.rb | 12 - app/controllers/accounts_controller.rb | 58 -- .../concerns/account_controller_concern.rb | 3 +- .../concerns/web_app_controller_concern.rb | 13 +- app/controllers/follower_accounts_controller.rb | 5 +- app/controllers/following_accounts_controller.rb | 5 +- app/controllers/home_controller.rb | 13 +- app/controllers/privacy_controller.rb | 8 + app/controllers/remote_follow_controller.rb | 41 -- app/controllers/remote_interaction_controller.rb | 55 -- app/controllers/statuses_controller.rb | 2 +- app/controllers/tags_controller.rb | 10 +- app/helpers/accounts_helper.rb | 50 +- .../mastodon/components/error_boundary.js | 7 + .../mastodon/components/missing_indicator.js | 5 + app/javascript/mastodon/containers/mastodon.js | 2 +- app/javascript/mastodon/features/about/index.js | 6 +- .../mastodon/features/account/components/header.js | 5 +- .../mastodon/features/account_timeline/index.js | 12 +- .../mastodon/features/bookmarked_statuses/index.js | 1 + .../mastodon/features/community_timeline/index.js | 1 + app/javascript/mastodon/features/compose/index.js | 5 + .../mastodon/features/direct_timeline/index.js | 1 + .../mastodon/features/directory/index.js | 1 + .../mastodon/features/domain_blocks/index.js | 6 + app/javascript/mastodon/features/explore/index.js | 1 + .../mastodon/features/favourited_statuses/index.js | 1 + .../mastodon/features/favourites/index.js | 5 + .../features/follow_recommendations/index.js | 5 + .../mastodon/features/follow_requests/index.js | 5 + .../mastodon/features/getting_started/index.js | 1 + .../mastodon/features/hashtag_timeline/index.js | 1 + .../mastodon/features/home_timeline/index.js | 3 +- .../mastodon/features/keyboard_shortcuts/index.js | 5 + .../mastodon/features/list_timeline/index.js | 1 + app/javascript/mastodon/features/lists/index.js | 1 + app/javascript/mastodon/features/mutes/index.js | 5 + .../mastodon/features/notifications/index.js | 1 + .../mastodon/features/pinned_statuses/index.js | 4 + .../mastodon/features/privacy_policy/index.js | 6 +- .../mastodon/features/public_timeline/index.js | 1 + app/javascript/mastodon/features/reblogs/index.js | 5 + app/javascript/mastodon/features/status/index.js | 17 +- .../features/ui/components/bundle_column_error.js | 27 +- .../features/ui/components/column_loading.js | 6 +- .../features/ui/components/columns_area.js | 4 +- .../mastodon/features/ui/components/modal_root.js | 21 +- app/javascript/mastodon/features/ui/index.js | 4 +- .../mastodon/features/ui/util/async-components.js | 8 + .../features/ui/util/react_router_helpers.js | 4 +- app/javascript/mastodon/main.js | 8 - app/javascript/mastodon/reducers/statuses.js | 6 + app/javascript/mastodon/selectors/index.js | 2 +- .../service_worker/web_push_notifications.js | 26 +- app/javascript/packs/public.js | 29 - app/javascript/styles/application.scss | 1 - app/javascript/styles/contrast/diff.scss | 4 - app/javascript/styles/mastodon-light/diff.scss | 89 --- app/javascript/styles/mastodon/containers.scss | 782 --------------------- app/javascript/styles/mastodon/footer.scss | 152 ---- app/javascript/styles/mastodon/rtl.scss | 74 -- app/javascript/styles/mastodon/statuses.scss | 3 +- app/lib/permalink_redirector.rb | 36 +- app/models/account.rb | 1 + app/models/user.rb | 4 + app/serializers/rest/account_serializer.rb | 7 +- app/views/about/show.html.haml | 3 + app/views/accounts/_bio.html.haml | 21 - app/views/accounts/_header.html.haml | 43 -- app/views/accounts/_moved.html.haml | 20 - app/views/accounts/show.html.haml | 76 +- app/views/follower_accounts/index.html.haml | 18 +- app/views/following_accounts/index.html.haml | 18 +- app/views/home/index.html.haml | 3 + app/views/layouts/public.html.haml | 60 -- app/views/privacy/show.html.haml | 3 + app/views/remote_follow/new.html.haml | 20 - app/views/remote_interaction/new.html.haml | 24 - app/views/statuses/_detailed_status.html.haml | 6 +- app/views/statuses/_simple_status.html.haml | 6 +- app/views/statuses/show.html.haml | 2 +- app/views/tags/show.html.haml | 5 + config/locales/en.yml | 40 -- config/routes.rb | 57 +- package.json | 1 - spec/controllers/account_follow_controller_spec.rb | 64 -- .../account_unfollow_controller_spec.rb | 64 -- spec/controllers/accounts_controller_spec.rb | 194 ----- .../authorize_interactions_controller_spec.rb | 4 +- .../follower_accounts_controller_spec.rb | 21 - .../following_accounts_controller_spec.rb | 21 - spec/controllers/remote_follow_controller_spec.rb | 135 ---- .../remote_interaction_controller_spec.rb | 39 - spec/controllers/tags_controller_spec.rb | 7 +- spec/features/profile_spec.rb | 26 +- spec/lib/permalink_redirector_spec.rb | 31 +- spec/requests/account_show_page_spec.rb | 15 - spec/routing/accounts_routing_spec.rb | 88 ++- yarn.lock | 5 - 101 files changed, 389 insertions(+), 2464 deletions(-) delete mode 100644 app/controllers/account_follow_controller.rb delete mode 100644 app/controllers/account_unfollow_controller.rb delete mode 100644 app/controllers/remote_follow_controller.rb delete mode 100644 app/controllers/remote_interaction_controller.rb delete mode 100644 app/javascript/styles/mastodon/footer.scss delete mode 100644 app/views/accounts/_bio.html.haml delete mode 100644 app/views/accounts/_header.html.haml delete mode 100644 app/views/accounts/_moved.html.haml delete mode 100644 app/views/layouts/public.html.haml delete mode 100644 app/views/remote_follow/new.html.haml delete mode 100644 app/views/remote_interaction/new.html.haml create mode 100644 app/views/tags/show.html.haml delete mode 100644 spec/controllers/account_follow_controller_spec.rb delete mode 100644 spec/controllers/account_unfollow_controller_spec.rb delete mode 100644 spec/controllers/remote_follow_controller_spec.rb delete mode 100644 spec/controllers/remote_interaction_controller_spec.rb (limited to 'app/javascript/styles') diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb index 0fbc6a800..104348614 100644 --- a/app/controllers/about_controller.rb +++ b/app/controllers/about_controller.rb @@ -5,7 +5,15 @@ class AboutController < ApplicationController skip_before_action :require_functional! + before_action :set_instance_presenter + def show expires_in 0, public: true unless user_signed_in? end + + private + + def set_instance_presenter + @instance_presenter = InstancePresenter.new + end end diff --git a/app/controllers/account_follow_controller.rb b/app/controllers/account_follow_controller.rb deleted file mode 100644 index 33394074d..000000000 --- a/app/controllers/account_follow_controller.rb +++ /dev/null @@ -1,12 +0,0 @@ -# frozen_string_literal: true - -class AccountFollowController < ApplicationController - include AccountControllerConcern - - before_action :authenticate_user! - - def create - FollowService.new.call(current_user.account, @account, with_rate_limit: true) - redirect_to account_path(@account) - end -end diff --git a/app/controllers/account_unfollow_controller.rb b/app/controllers/account_unfollow_controller.rb deleted file mode 100644 index 378ec86dc..000000000 --- a/app/controllers/account_unfollow_controller.rb +++ /dev/null @@ -1,12 +0,0 @@ -# frozen_string_literal: true - -class AccountUnfollowController < ApplicationController - include AccountControllerConcern - - before_action :authenticate_user! - - def create - UnfollowService.new.call(current_user.account, @account) - redirect_to account_path(@account) - end -end diff --git a/app/controllers/accounts_controller.rb b/app/controllers/accounts_controller.rb index d92f91b30..5ceea5d3c 100644 --- a/app/controllers/accounts_controller.rb +++ b/app/controllers/accounts_controller.rb @@ -9,7 +9,6 @@ class AccountsController < ApplicationController before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? } before_action :set_cache_headers - before_action :set_body_classes skip_around_action :set_locale, if: -> { [:json, :rss].include?(request.format&.to_sym) } skip_before_action :require_functional!, unless: :whitelist_mode? @@ -18,24 +17,6 @@ class AccountsController < ApplicationController respond_to do |format| format.html do expires_in 0, public: true unless user_signed_in? - - @pinned_statuses = [] - @endorsed_accounts = @account.endorsed_accounts.to_a.sample(4) - @featured_hashtags = @account.featured_tags.order(statuses_count: :desc) - - if current_account && @account.blocking?(current_account) - @statuses = [] - return - end - - @pinned_statuses = cached_filtered_status_pins if show_pinned_statuses? - @statuses = cached_filtered_status_page - @rss_url = rss_url - - unless @statuses.empty? - @older_url = older_url if @statuses.last.id > filtered_statuses.last.id - @newer_url = newer_url if @statuses.first.id < filtered_statuses.first.id - end end format.rss do @@ -55,18 +36,6 @@ class AccountsController < ApplicationController private - def set_body_classes - @body_classes = 'with-modals' - end - - def show_pinned_statuses? - [replies_requested?, media_requested?, tag_requested?, params[:max_id].present?, params[:min_id].present?].none? - end - - def filtered_pinned_statuses - @account.pinned_statuses.where(visibility: [:public, :unlisted]) - end - def filtered_statuses default_statuses.tap do |statuses| statuses.merge!(hashtag_scope) if tag_requested? @@ -113,26 +82,6 @@ class AccountsController < ApplicationController end end - def older_url - pagination_url(max_id: @statuses.last.id) - end - - def newer_url - pagination_url(min_id: @statuses.first.id) - end - - def pagination_url(max_id: nil, min_id: nil) - if tag_requested? - short_account_tag_url(@account, params[:tag], max_id: max_id, min_id: min_id) - elsif media_requested? - short_account_media_url(@account, max_id: max_id, min_id: min_id) - elsif replies_requested? - short_account_with_replies_url(@account, max_id: max_id, min_id: min_id) - else - short_account_url(@account, max_id: max_id, min_id: min_id) - end - end - def media_requested? request.path.split('.').first.end_with?('/media') && !tag_requested? end @@ -145,13 +94,6 @@ class AccountsController < ApplicationController request.path.split('.').first.end_with?(Addressable::URI.parse("/tagged/#{params[:tag]}").normalize) end - def cached_filtered_status_pins - cache_collection( - filtered_pinned_statuses, - Status - ) - end - def cached_filtered_status_page cache_collection_paginated_by_id( filtered_statuses, diff --git a/app/controllers/concerns/account_controller_concern.rb b/app/controllers/concerns/account_controller_concern.rb index 11eac0eb6..2f7d84df0 100644 --- a/app/controllers/concerns/account_controller_concern.rb +++ b/app/controllers/concerns/account_controller_concern.rb @@ -3,13 +3,12 @@ module AccountControllerConcern extend ActiveSupport::Concern + include WebAppControllerConcern include AccountOwnedConcern FOLLOW_PER_PAGE = 12 included do - layout 'public' - before_action :set_instance_presenter before_action :set_link_headers, if: -> { request.format.nil? || request.format == :html } end diff --git a/app/controllers/concerns/web_app_controller_concern.rb b/app/controllers/concerns/web_app_controller_concern.rb index 8a6c73af3..c671ce785 100644 --- a/app/controllers/concerns/web_app_controller_concern.rb +++ b/app/controllers/concerns/web_app_controller_concern.rb @@ -4,15 +4,24 @@ module WebAppControllerConcern extend ActiveSupport::Concern included do - before_action :set_body_classes + before_action :redirect_unauthenticated_to_permalinks! + before_action :set_app_body_class before_action :set_referrer_policy_header end - def set_body_classes + def set_app_body_class @body_classes = 'app-body' end def set_referrer_policy_header response.headers['Referrer-Policy'] = 'origin' end + + def redirect_unauthenticated_to_permalinks! + return if user_signed_in? + + redirect_path = PermalinkRedirector.new(request.path).redirect_path + + redirect_to(redirect_path) if redirect_path.present? + end end diff --git a/app/controllers/follower_accounts_controller.rb b/app/controllers/follower_accounts_controller.rb index da7bb4ed2..e4d8cc495 100644 --- a/app/controllers/follower_accounts_controller.rb +++ b/app/controllers/follower_accounts_controller.rb @@ -3,6 +3,7 @@ class FollowerAccountsController < ApplicationController include AccountControllerConcern include SignatureVerification + include WebAppControllerConcern before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? } before_action :set_cache_headers @@ -14,10 +15,6 @@ class FollowerAccountsController < ApplicationController respond_to do |format| format.html do expires_in 0, public: true unless user_signed_in? - - next if @account.hide_collections? - - follows end format.json do diff --git a/app/controllers/following_accounts_controller.rb b/app/controllers/following_accounts_controller.rb index c37e3b68c..f84dca1e5 100644 --- a/app/controllers/following_accounts_controller.rb +++ b/app/controllers/following_accounts_controller.rb @@ -3,6 +3,7 @@ class FollowingAccountsController < ApplicationController include AccountControllerConcern include SignatureVerification + include WebAppControllerConcern before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? } before_action :set_cache_headers @@ -14,10 +15,6 @@ class FollowingAccountsController < ApplicationController respond_to do |format| format.html do expires_in 0, public: true unless user_signed_in? - - next if @account.hide_collections? - - follows end format.json do diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb index b4d6578b9..d8ee82a7a 100644 --- a/app/controllers/home_controller.rb +++ b/app/controllers/home_controller.rb @@ -3,21 +3,14 @@ class HomeController < ApplicationController include WebAppControllerConcern - before_action :redirect_unauthenticated_to_permalinks! before_action :set_instance_presenter - def index; end + def index + expires_in 0, public: true unless user_signed_in? + end private - def redirect_unauthenticated_to_permalinks! - return if user_signed_in? - - redirect_path = PermalinkRedirector.new(request.path).redirect_path - - redirect_to(redirect_path) if redirect_path.present? - end - def set_instance_presenter @instance_presenter = InstancePresenter.new end diff --git a/app/controllers/privacy_controller.rb b/app/controllers/privacy_controller.rb index bc98bca51..2c98bf3bf 100644 --- a/app/controllers/privacy_controller.rb +++ b/app/controllers/privacy_controller.rb @@ -5,7 +5,15 @@ class PrivacyController < ApplicationController skip_before_action :require_functional! + before_action :set_instance_presenter + def show expires_in 0, public: true if current_account.nil? end + + private + + def set_instance_presenter + @instance_presenter = InstancePresenter.new + end end diff --git a/app/controllers/remote_follow_controller.rb b/app/controllers/remote_follow_controller.rb deleted file mode 100644 index db1604644..000000000 --- a/app/controllers/remote_follow_controller.rb +++ /dev/null @@ -1,41 +0,0 @@ -# frozen_string_literal: true - -class RemoteFollowController < ApplicationController - include AccountOwnedConcern - - layout 'modal' - - before_action :set_body_classes - - skip_before_action :require_functional! - - def new - @remote_follow = RemoteFollow.new(session_params) - end - - def create - @remote_follow = RemoteFollow.new(resource_params) - - if @remote_follow.valid? - session[:remote_follow] = @remote_follow.acct - redirect_to @remote_follow.subscribe_address_for(@account) - else - render :new - end - end - - private - - def resource_params - params.require(:remote_follow).permit(:acct) - end - - def session_params - { acct: session[:remote_follow] || current_account&.username } - end - - def set_body_classes - @body_classes = 'modal-layout' - @hide_header = true - end -end diff --git a/app/controllers/remote_interaction_controller.rb b/app/controllers/remote_interaction_controller.rb deleted file mode 100644 index 6c29a2b9f..000000000 --- a/app/controllers/remote_interaction_controller.rb +++ /dev/null @@ -1,55 +0,0 @@ -# frozen_string_literal: true - -class RemoteInteractionController < ApplicationController - include Authorization - - layout 'modal' - - before_action :authenticate_user!, if: :whitelist_mode? - before_action :set_interaction_type - before_action :set_status - before_action :set_body_classes - - skip_before_action :require_functional!, unless: :whitelist_mode? - - def new - @remote_follow = RemoteFollow.new(session_params) - end - - def create - @remote_follow = RemoteFollow.new(resource_params) - - if @remote_follow.valid? - session[:remote_follow] = @remote_follow.acct - redirect_to @remote_follow.interact_address_for(@status) - else - render :new - end - end - - private - - def resource_params - params.require(:remote_follow).permit(:acct) - end - - def session_params - { acct: session[:remote_follow] || current_account&.username } - end - - def set_status - @status = Status.find(params[:id]) - authorize @status, :show? - rescue Mastodon::NotPermittedError - not_found - end - - def set_body_classes - @body_classes = 'modal-layout' - @hide_header = true - end - - def set_interaction_type - @interaction_type = %w(reply reblog favourite).include?(params[:type]) ? params[:type] : 'reply' - end -end diff --git a/app/controllers/statuses_controller.rb b/app/controllers/statuses_controller.rb index 181c76c9a..bb4e5b01f 100644 --- a/app/controllers/statuses_controller.rb +++ b/app/controllers/statuses_controller.rb @@ -1,11 +1,11 @@ # frozen_string_literal: true class StatusesController < ApplicationController + include WebAppControllerConcern include StatusControllerConcern include SignatureAuthentication include Authorization include AccountOwnedConcern - include WebAppControllerConcern before_action :require_account_signature!, only: [:show, :activity], if: -> { request.format == :json && authorized_fetch_mode? } before_action :set_status diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb index 2890c179d..f0a099350 100644 --- a/app/controllers/tags_controller.rb +++ b/app/controllers/tags_controller.rb @@ -2,18 +2,16 @@ class TagsController < ApplicationController include SignatureVerification + include WebAppControllerConcern PAGE_SIZE = 20 PAGE_SIZE_MAX = 200 - layout 'public' - before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? } before_action :authenticate_user!, if: :whitelist_mode? before_action :set_local before_action :set_tag before_action :set_statuses - before_action :set_body_classes before_action :set_instance_presenter skip_before_action :require_functional!, unless: :whitelist_mode? @@ -21,7 +19,7 @@ class TagsController < ApplicationController def show respond_to do |format| format.html do - redirect_to web_path("tags/#{@tag.name}") + expires_in 0, public: true unless user_signed_in? end format.rss do @@ -54,10 +52,6 @@ class TagsController < ApplicationController end end - def set_body_classes - @body_classes = 'with-modals' - end - def set_instance_presenter @instance_presenter = InstancePresenter.new end diff --git a/app/helpers/accounts_helper.rb b/app/helpers/accounts_helper.rb index 59664373d..6301919a9 100644 --- a/app/helpers/accounts_helper.rb +++ b/app/helpers/accounts_helper.rb @@ -20,54 +20,10 @@ module AccountsHelper end def account_action_button(account) - if user_signed_in? - if account.id == current_user.account_id - link_to settings_profile_url, class: 'button logo-button' do - safe_join([logo_as_symbol, t('settings.edit_profile')]) - end - elsif current_account.following?(account) || current_account.requested?(account) - link_to account_unfollow_path(account), class: 'button logo-button button--destructive', data: { method: :post } do - safe_join([logo_as_symbol, t('accounts.unfollow')]) - end - elsif !(account.memorial? || account.moved?) - link_to account_follow_path(account), class: "button logo-button#{account.blocking?(current_account) ? ' disabled' : ''}", data: { method: :post } do - safe_join([logo_as_symbol, t('accounts.follow')]) - end - end - elsif !(account.memorial? || account.moved?) - link_to account_remote_follow_path(account), class: 'button logo-button modal-button', target: '_new' do - safe_join([logo_as_symbol, t('accounts.follow')]) - end - end - end - - def minimal_account_action_button(account) - if user_signed_in? - return if account.id == current_user.account_id - - if current_account.following?(account) || current_account.requested?(account) - link_to account_unfollow_path(account), class: 'icon-button active', data: { method: :post }, title: t('accounts.unfollow') do - fa_icon('user-times fw') - end - elsif !(account.memorial? || account.moved?) - link_to account_follow_path(account), class: "icon-button#{account.blocking?(current_account) ? ' disabled' : ''}", data: { method: :post }, title: t('accounts.follow') do - fa_icon('user-plus fw') - end - end - elsif !(account.memorial? || account.moved?) - link_to account_remote_follow_path(account), class: 'icon-button modal-button', target: '_new', title: t('accounts.follow') do - fa_icon('user-plus fw') - end - end - end + return if account.memorial? || account.moved? - def account_badge(account) - if account.bot? - content_tag(:div, content_tag(:div, t('accounts.roles.bot'), class: 'account-role bot'), class: 'roles') - elsif account.group? - content_tag(:div, content_tag(:div, t('accounts.roles.group'), class: 'account-role group'), class: 'roles') - elsif account.user_role&.highlighted? - content_tag(:div, content_tag(:div, account.user_role.name, class: "account-role user-role-#{account.user_role.id}"), class: 'roles') + link_to ActivityPub::TagManager.instance.url_for(account), class: 'button logo-button', target: '_new' do + safe_join([logo_as_symbol, t('accounts.follow')]) end end diff --git a/app/javascript/mastodon/components/error_boundary.js b/app/javascript/mastodon/components/error_boundary.js index ca4a2cfe1..02d5616d6 100644 --- a/app/javascript/mastodon/components/error_boundary.js +++ b/app/javascript/mastodon/components/error_boundary.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { version, source_url } from 'mastodon/initial_state'; import StackTrace from 'stacktrace-js'; +import { Helmet } from 'react-helmet'; export default class ErrorBoundary extends React.PureComponent { @@ -84,6 +85,7 @@ export default class ErrorBoundary extends React.PureComponent { )}

+

{ likelyBrowserAddonIssue ? ( @@ -91,8 +93,13 @@ export default class ErrorBoundary extends React.PureComponent { )}

+

Mastodon v{version} · ·

+ + + +
); } diff --git a/app/javascript/mastodon/components/missing_indicator.js b/app/javascript/mastodon/components/missing_indicator.js index 7b0101bab..05e0d653d 100644 --- a/app/javascript/mastodon/components/missing_indicator.js +++ b/app/javascript/mastodon/components/missing_indicator.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import illustration from 'mastodon/../images/elephant_ui_disappointed.svg'; import classNames from 'classnames'; +import { Helmet } from 'react-helmet'; const MissingIndicator = ({ fullPage }) => (
@@ -14,6 +15,10 @@ const MissingIndicator = ({ fullPage }) => (
+ + + +
); diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index 8e5a1fa3a..730695c49 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -78,7 +78,7 @@ export default class Mastodon extends React.PureComponent { - + diff --git a/app/javascript/mastodon/features/about/index.js b/app/javascript/mastodon/features/about/index.js index e9212565a..75fed9b95 100644 --- a/app/javascript/mastodon/features/about/index.js +++ b/app/javascript/mastodon/features/about/index.js @@ -94,6 +94,7 @@ class About extends React.PureComponent { }), dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + multiColumn: PropTypes.bool, }; componentDidMount () { @@ -108,11 +109,11 @@ class About extends React.PureComponent { } render () { - const { intl, server, extendedDescription, domainBlocks } = this.props; + const { multiColumn, intl, server, extendedDescription, domainBlocks } = this.props; const isLoading = server.get('isLoading'); return ( - +
`${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' /> @@ -212,6 +213,7 @@ class About extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index 44c53f9ce..954cb0ee7 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -270,7 +270,9 @@ class Header extends ImmutablePureComponent { const content = { __html: account.get('note_emojified') }; const displayNameHtml = { __html: account.get('display_name_html') }; const fields = account.get('fields'); - const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); + const isLocal = account.get('acct').indexOf('@') === -1; + const acct = isLocal && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); + const isIndexable = !account.get('noindex'); let badge; @@ -373,6 +375,7 @@ class Header extends ImmutablePureComponent { {titleFromAccount(account)} +
); diff --git a/app/javascript/mastodon/features/account_timeline/index.js b/app/javascript/mastodon/features/account_timeline/index.js index 51fb76f1f..437cee95c 100644 --- a/app/javascript/mastodon/features/account_timeline/index.js +++ b/app/javascript/mastodon/features/account_timeline/index.js @@ -142,19 +142,17 @@ class AccountTimeline extends ImmutablePureComponent { render () { const { accountId, statusIds, featuredStatusIds, isLoading, hasMore, blockedBy, suspended, isAccount, hidden, multiColumn, remote, remoteUrl } = this.props; - if (!isAccount) { + if (isLoading && statusIds.isEmpty()) { return ( - - + ); - } - - if (!statusIds && isLoading) { + } else if (!isLoading && !isAccount) { return ( - + + ); } diff --git a/app/javascript/mastodon/features/bookmarked_statuses/index.js b/app/javascript/mastodon/features/bookmarked_statuses/index.js index 0e466e5ed..097be17c9 100644 --- a/app/javascript/mastodon/features/bookmarked_statuses/index.js +++ b/app/javascript/mastodon/features/bookmarked_statuses/index.js @@ -99,6 +99,7 @@ class Bookmarks extends ImmutablePureComponent { {intl.formatMessage(messages.heading)} + ); diff --git a/app/javascript/mastodon/features/community_timeline/index.js b/app/javascript/mastodon/features/community_timeline/index.js index 757521802..7b3f8845f 100644 --- a/app/javascript/mastodon/features/community_timeline/index.js +++ b/app/javascript/mastodon/features/community_timeline/index.js @@ -151,6 +151,7 @@ class CommunityTimeline extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js index c27556a0e..763c715de 100644 --- a/app/javascript/mastodon/features/compose/index.js +++ b/app/javascript/mastodon/features/compose/index.js @@ -18,6 +18,7 @@ import { mascot } from '../../initial_state'; import Icon from 'mastodon/components/icon'; import { logOut } from 'mastodon/utils/log_out'; import Column from 'mastodon/components/column'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ start: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, @@ -145,6 +146,10 @@ class Compose extends React.PureComponent { + + + + ); } diff --git a/app/javascript/mastodon/features/direct_timeline/index.js b/app/javascript/mastodon/features/direct_timeline/index.js index cfaa9c4c5..8dcc43e28 100644 --- a/app/javascript/mastodon/features/direct_timeline/index.js +++ b/app/javascript/mastodon/features/direct_timeline/index.js @@ -98,6 +98,7 @@ class DirectTimeline extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/mastodon/features/directory/index.js b/app/javascript/mastodon/features/directory/index.js index 0ce7919b6..b45faa049 100644 --- a/app/javascript/mastodon/features/directory/index.js +++ b/app/javascript/mastodon/features/directory/index.js @@ -169,6 +169,7 @@ class Directory extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/mastodon/features/domain_blocks/index.js b/app/javascript/mastodon/features/domain_blocks/index.js index edb80aef4..43b275c2d 100644 --- a/app/javascript/mastodon/features/domain_blocks/index.js +++ b/app/javascript/mastodon/features/domain_blocks/index.js @@ -11,6 +11,7 @@ import ColumnBackButtonSlim from '../../components/column_back_button_slim'; import DomainContainer from '../../containers/domain_container'; import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks'; import ScrollableList from '../../components/scrollable_list'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'column.domain_blocks', defaultMessage: 'Blocked domains' }, @@ -59,6 +60,7 @@ class Blocks extends ImmutablePureComponent { return ( + , )} + + + + ); } diff --git a/app/javascript/mastodon/features/explore/index.js b/app/javascript/mastodon/features/explore/index.js index 566be631e..1c7049e97 100644 --- a/app/javascript/mastodon/features/explore/index.js +++ b/app/javascript/mastodon/features/explore/index.js @@ -84,6 +84,7 @@ class Explore extends React.PureComponent { {intl.formatMessage(messages.title)} + )} diff --git a/app/javascript/mastodon/features/favourited_statuses/index.js b/app/javascript/mastodon/features/favourited_statuses/index.js index f1d32eff1..3741f68f6 100644 --- a/app/javascript/mastodon/features/favourited_statuses/index.js +++ b/app/javascript/mastodon/features/favourited_statuses/index.js @@ -99,6 +99,7 @@ class Favourites extends ImmutablePureComponent { {intl.formatMessage(messages.heading)} + ); diff --git a/app/javascript/mastodon/features/favourites/index.js b/app/javascript/mastodon/features/favourites/index.js index 673317f04..ad10744da 100644 --- a/app/javascript/mastodon/features/favourites/index.js +++ b/app/javascript/mastodon/features/favourites/index.js @@ -11,6 +11,7 @@ import LoadingIndicator from 'mastodon/components/loading_indicator'; import ScrollableList from 'mastodon/components/scrollable_list'; import AccountContainer from 'mastodon/containers/account_container'; import Column from 'mastodon/features/ui/components/column'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ refresh: { id: 'refresh', defaultMessage: 'Refresh' }, @@ -80,6 +81,10 @@ class Favourites extends ImmutablePureComponent { , )} + + + + ); } diff --git a/app/javascript/mastodon/features/follow_recommendations/index.js b/app/javascript/mastodon/features/follow_recommendations/index.js index 32b55eeb3..5f7baa64c 100644 --- a/app/javascript/mastodon/features/follow_recommendations/index.js +++ b/app/javascript/mastodon/features/follow_recommendations/index.js @@ -12,6 +12,7 @@ import Column from 'mastodon/features/ui/components/column'; import Account from './components/account'; import imageGreeting from 'mastodon/../images/elephant_ui_greeting.svg'; import Button from 'mastodon/components/button'; +import { Helmet } from 'react-helmet'; const mapStateToProps = state => ({ suggestions: state.getIn(['suggestions', 'items']), @@ -104,6 +105,10 @@ class FollowRecommendations extends ImmutablePureComponent { )}
+ + + + ); } diff --git a/app/javascript/mastodon/features/follow_requests/index.js b/app/javascript/mastodon/features/follow_requests/index.js index 1f9b635bb..d16aa7737 100644 --- a/app/javascript/mastodon/features/follow_requests/index.js +++ b/app/javascript/mastodon/features/follow_requests/index.js @@ -12,6 +12,7 @@ import AccountAuthorizeContainer from './containers/account_authorize_container' import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts'; import ScrollableList from '../../components/scrollable_list'; import { me } from '../../initial_state'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' }, @@ -87,6 +88,10 @@ class FollowRequests extends ImmutablePureComponent { , )} + + + + ); } diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js index 42a5b581f..f002ffc77 100644 --- a/app/javascript/mastodon/features/getting_started/index.js +++ b/app/javascript/mastodon/features/getting_started/index.js @@ -138,6 +138,7 @@ class GettingStarted extends ImmutablePureComponent { {intl.formatMessage(messages.menu)} + ); diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.js b/app/javascript/mastodon/features/hashtag_timeline/index.js index 0f7df5036..ec524be8f 100644 --- a/app/javascript/mastodon/features/hashtag_timeline/index.js +++ b/app/javascript/mastodon/features/hashtag_timeline/index.js @@ -228,6 +228,7 @@ class HashtagTimeline extends React.PureComponent { #{id} + ); diff --git a/app/javascript/mastodon/features/home_timeline/index.js b/app/javascript/mastodon/features/home_timeline/index.js index 68770b739..838ed7dd8 100644 --- a/app/javascript/mastodon/features/home_timeline/index.js +++ b/app/javascript/mastodon/features/home_timeline/index.js @@ -20,7 +20,7 @@ const messages = defineMessages({ title: { id: 'column.home', defaultMessage: 'Home' }, show_announcements: { id: 'home.show_announcements', defaultMessage: 'Show announcements' }, hide_announcements: { id: 'home.hide_announcements', defaultMessage: 'Hide announcements' }, -}); +}); const mapStateToProps = state => ({ hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0, @@ -167,6 +167,7 @@ class HomeTimeline extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/mastodon/features/keyboard_shortcuts/index.js b/app/javascript/mastodon/features/keyboard_shortcuts/index.js index 2a32577ba..9a870478d 100644 --- a/app/javascript/mastodon/features/keyboard_shortcuts/index.js +++ b/app/javascript/mastodon/features/keyboard_shortcuts/index.js @@ -4,6 +4,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ColumnHeader from 'mastodon/components/column_header'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' }, @@ -164,6 +165,10 @@ class KeyboardShortcuts extends ImmutablePureComponent {
+ + + + ); } diff --git a/app/javascript/mastodon/features/list_timeline/index.js b/app/javascript/mastodon/features/list_timeline/index.js index f0a7a0c7f..fd9d33df7 100644 --- a/app/javascript/mastodon/features/list_timeline/index.js +++ b/app/javascript/mastodon/features/list_timeline/index.js @@ -212,6 +212,7 @@ class ListTimeline extends React.PureComponent { {title} + ); diff --git a/app/javascript/mastodon/features/lists/index.js b/app/javascript/mastodon/features/lists/index.js index 389a0c5c8..017595ba0 100644 --- a/app/javascript/mastodon/features/lists/index.js +++ b/app/javascript/mastodon/features/lists/index.js @@ -80,6 +80,7 @@ class Lists extends ImmutablePureComponent { {intl.formatMessage(messages.heading)} + ); diff --git a/app/javascript/mastodon/features/mutes/index.js b/app/javascript/mastodon/features/mutes/index.js index c21433cc4..65df6149f 100644 --- a/app/javascript/mastodon/features/mutes/index.js +++ b/app/javascript/mastodon/features/mutes/index.js @@ -11,6 +11,7 @@ import ColumnBackButtonSlim from '../../components/column_back_button_slim'; import AccountContainer from '../../containers/account_container'; import { fetchMutes, expandMutes } from '../../actions/mutes'; import ScrollableList from '../../components/scrollable_list'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'column.mutes', defaultMessage: 'Muted users' }, @@ -72,6 +73,10 @@ class Mutes extends ImmutablePureComponent { , )} + + + + ); } diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js index 4577bcb2d..f1bc5f160 100644 --- a/app/javascript/mastodon/features/notifications/index.js +++ b/app/javascript/mastodon/features/notifications/index.js @@ -281,6 +281,7 @@ class Notifications extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/mastodon/features/pinned_statuses/index.js b/app/javascript/mastodon/features/pinned_statuses/index.js index 67b13f10a..c6790ea06 100644 --- a/app/javascript/mastodon/features/pinned_statuses/index.js +++ b/app/javascript/mastodon/features/pinned_statuses/index.js @@ -8,6 +8,7 @@ import ColumnBackButtonSlim from '../../components/column_back_button_slim'; import StatusList from '../../components/status_list'; import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ heading: { id: 'column.pins', defaultMessage: 'Pinned post' }, @@ -54,6 +55,9 @@ class PinnedStatuses extends ImmutablePureComponent { hasMore={hasMore} bindToDocument={!multiColumn} /> + + + ); } diff --git a/app/javascript/mastodon/features/privacy_policy/index.js b/app/javascript/mastodon/features/privacy_policy/index.js index eee4255f4..3df487e8f 100644 --- a/app/javascript/mastodon/features/privacy_policy/index.js +++ b/app/javascript/mastodon/features/privacy_policy/index.js @@ -15,6 +15,7 @@ class PrivacyPolicy extends React.PureComponent { static propTypes = { intl: PropTypes.object, + multiColumn: PropTypes.bool, }; state = { @@ -32,11 +33,11 @@ class PrivacyPolicy extends React.PureComponent { } render () { - const { intl } = this.props; + const { intl, multiColumn } = this.props; const { isLoading, content, lastUpdated } = this.state; return ( - +

@@ -51,6 +52,7 @@ class PrivacyPolicy extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/mastodon/features/public_timeline/index.js b/app/javascript/mastodon/features/public_timeline/index.js index 8dbef98c0..a41be07e1 100644 --- a/app/javascript/mastodon/features/public_timeline/index.js +++ b/app/javascript/mastodon/features/public_timeline/index.js @@ -153,6 +153,7 @@ class PublicTimeline extends React.PureComponent { {intl.formatMessage(messages.title)} + ); diff --git a/app/javascript/mastodon/features/reblogs/index.js b/app/javascript/mastodon/features/reblogs/index.js index 7704a049f..70d338ef1 100644 --- a/app/javascript/mastodon/features/reblogs/index.js +++ b/app/javascript/mastodon/features/reblogs/index.js @@ -11,6 +11,7 @@ import Column from '../ui/components/column'; import ScrollableList from '../../components/scrollable_list'; import Icon from 'mastodon/components/icon'; import ColumnHeader from '../../components/column_header'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ refresh: { id: 'refresh', defaultMessage: 'Refresh' }, @@ -80,6 +81,10 @@ class Reblogs extends ImmutablePureComponent { , )} + + + + ); } diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js index f9a97c9b5..02f390c6a 100644 --- a/app/javascript/mastodon/features/status/index.js +++ b/app/javascript/mastodon/features/status/index.js @@ -7,6 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { createSelector } from 'reselect'; import { fetchStatus } from '../../actions/statuses'; import MissingIndicator from '../../components/missing_indicator'; +import LoadingIndicator from 'mastodon/components/loading_indicator'; import DetailedStatus from './components/detailed_status'; import ActionBar from './components/action_bar'; import Column from '../ui/components/column'; @@ -145,6 +146,7 @@ const makeMapStateToProps = () => { } return { + isLoading: state.getIn(['statuses', props.params.statusId, 'isLoading']), status, ancestorsIds, descendantsIds, @@ -187,6 +189,7 @@ class Status extends ImmutablePureComponent { params: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, status: ImmutablePropTypes.map, + isLoading: PropTypes.bool, ancestorsIds: ImmutablePropTypes.list, descendantsIds: ImmutablePropTypes.list, intl: PropTypes.object.isRequired, @@ -566,9 +569,17 @@ class Status extends ImmutablePureComponent { render () { let ancestors, descendants; - const { status, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props; + const { isLoading, status, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props; const { fullscreen } = this.state; + if (isLoading) { + return ( + + + + ); + } + if (status === null) { return ( @@ -586,6 +597,9 @@ class Status extends ImmutablePureComponent { descendants =
{this.renderChildren(descendantsIds)}
; } + const isLocal = status.getIn(['account', 'acct'], '').indexOf('@') === -1; + const isIndexable = !status.getIn(['account', 'noindex']); + const handlers = { moveUp: this.handleHotkeyMoveUp, moveDown: this.handleHotkeyMoveDown, @@ -659,6 +673,7 @@ class Status extends ImmutablePureComponent { {titleFromStatus(status)} + ); diff --git a/app/javascript/mastodon/features/ui/components/bundle_column_error.js b/app/javascript/mastodon/features/ui/components/bundle_column_error.js index f39ebd900..ab6d4aa44 100644 --- a/app/javascript/mastodon/features/ui/components/bundle_column_error.js +++ b/app/javascript/mastodon/features/ui/components/bundle_column_error.js @@ -1,11 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; - -import Column from './column'; -import ColumnHeader from './column_header'; -import ColumnBackButtonSlim from '../../../components/column_back_button_slim'; -import IconButton from '../../../components/icon_button'; +import Column from 'mastodon/components/column'; +import ColumnHeader from 'mastodon/components/column_header'; +import IconButton from 'mastodon/components/icon_button'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' }, @@ -18,6 +17,7 @@ class BundleColumnError extends React.PureComponent { static propTypes = { onRetry: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + multiColumn: PropTypes.bool, } handleRetry = () => { @@ -25,16 +25,25 @@ class BundleColumnError extends React.PureComponent { } render () { - const { intl: { formatMessage } } = this.props; + const { multiColumn, intl: { formatMessage } } = this.props; return ( - - - + + +
{formatMessage(messages.body)}
+ + + + ); } diff --git a/app/javascript/mastodon/features/ui/components/column_loading.js b/app/javascript/mastodon/features/ui/components/column_loading.js index 0cdfd05d8..e5ed22584 100644 --- a/app/javascript/mastodon/features/ui/components/column_loading.js +++ b/app/javascript/mastodon/features/ui/components/column_loading.js @@ -10,6 +10,7 @@ export default class ColumnLoading extends ImmutablePureComponent { static propTypes = { title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), icon: PropTypes.string, + multiColumn: PropTypes.bool, }; static defaultProps = { @@ -18,10 +19,11 @@ export default class ColumnLoading extends ImmutablePureComponent { }; render() { - let { title, icon } = this.props; + let { title, icon, multiColumn } = this.props; + return ( - +
); diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index cc1bc83e0..9ee6fca43 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -139,11 +139,11 @@ class ColumnsArea extends ImmutablePureComponent { } renderLoading = columnId => () => { - return columnId === 'COMPOSE' ? : ; + return columnId === 'COMPOSE' ? : ; } renderError = (props) => { - return ; + return ; } render () { diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index 5c273ffa4..2224a8207 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -11,9 +11,7 @@ import VideoModal from './video_modal'; import BoostModal from './boost_modal'; import AudioModal from './audio_modal'; import ConfirmationModal from './confirmation_modal'; -import SubscribedLanguagesModal from 'mastodon/features/subscribed_languages_modal'; import FocalPointModal from './focal_point_modal'; -import InteractionModal from 'mastodon/features/interaction_modal'; import { MuteModal, BlockModal, @@ -23,7 +21,10 @@ import { ListAdder, CompareHistoryModal, FilterModal, + InteractionModal, + SubscribedLanguagesModal, } from 'mastodon/features/ui/util/async-components'; +import { Helmet } from 'react-helmet'; const MODAL_COMPONENTS = { 'MEDIA': () => Promise.resolve({ default: MediaModal }), @@ -41,8 +42,8 @@ const MODAL_COMPONENTS = { 'LIST_ADDER': ListAdder, 'COMPARE_HISTORY': CompareHistoryModal, 'FILTER': FilterModal, - 'SUBSCRIBED_LANGUAGES': () => Promise.resolve({ default: SubscribedLanguagesModal }), - 'INTERACTION': () => Promise.resolve({ default: InteractionModal }), + 'SUBSCRIBED_LANGUAGES': SubscribedLanguagesModal, + 'INTERACTION': InteractionModal, }; export default class ModalRoot extends React.PureComponent { @@ -111,9 +112,15 @@ export default class ModalRoot extends React.PureComponent { return ( {visible && ( - - {(SpecificComponent) => } - + <> + + {(SpecificComponent) => } + + + + + + )} ); diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 8f9f38036..003991857 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -197,8 +197,8 @@ class SwitchingColumnsArea extends React.PureComponent { - - + + diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js index c79dc014c..7686a69ea 100644 --- a/app/javascript/mastodon/features/ui/util/async-components.js +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -166,6 +166,14 @@ export function FilterModal () { return import(/*webpackChunkName: "modals/filter_modal" */'../components/filter_modal'); } +export function InteractionModal () { + return import(/*webpackChunkName: "modals/interaction_modal" */'../../interaction_modal'); +} + +export function SubscribedLanguagesModal () { + return import(/*webpackChunkName: "modals/subscribed_languages_modal" */'../../subscribed_languages_modal'); +} + export function About () { return import(/*webpackChunkName: "features/about" */'../../about'); } diff --git a/app/javascript/mastodon/features/ui/util/react_router_helpers.js b/app/javascript/mastodon/features/ui/util/react_router_helpers.js index d452b871f..a65d79def 100644 --- a/app/javascript/mastodon/features/ui/util/react_router_helpers.js +++ b/app/javascript/mastodon/features/ui/util/react_router_helpers.js @@ -53,7 +53,9 @@ export class WrappedRoute extends React.Component { } renderLoading = () => { - return ; + const { multiColumn } = this.props; + + return ; } renderError = (props) => { diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js index f33375b50..d0337ce0c 100644 --- a/app/javascript/mastodon/main.js +++ b/app/javascript/mastodon/main.js @@ -12,14 +12,6 @@ const perf = require('mastodon/performance'); function main() { perf.start('main()'); - if (window.history && history.replaceState) { - const { pathname, search, hash } = window.location; - const path = pathname + search + hash; - if (!(/^\/web($|\/)/).test(path)) { - history.replaceState(null, document.title, `/web${path}`); - } - } - return ready(async () => { const mountNode = document.getElementById('mastodon'); const props = JSON.parse(mountNode.getAttribute('data-props')); diff --git a/app/javascript/mastodon/reducers/statuses.js b/app/javascript/mastodon/reducers/statuses.js index 7efb49d85..c30c1e2cc 100644 --- a/app/javascript/mastodon/reducers/statuses.js +++ b/app/javascript/mastodon/reducers/statuses.js @@ -15,6 +15,8 @@ import { STATUS_COLLAPSE, STATUS_TRANSLATE_SUCCESS, STATUS_TRANSLATE_UNDO, + STATUS_FETCH_REQUEST, + STATUS_FETCH_FAIL, } from '../actions/statuses'; import { TIMELINE_DELETE } from '../actions/timelines'; import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer'; @@ -37,6 +39,10 @@ const initialState = ImmutableMap(); export default function statuses(state = initialState, action) { switch(action.type) { + case STATUS_FETCH_REQUEST: + return state.setIn([action.id, 'isLoading'], true); + case STATUS_FETCH_FAIL: + return state.delete(action.id); case STATUS_IMPORT: return importStatus(state, action.status); case STATUSES_IMPORT: diff --git a/app/javascript/mastodon/selectors/index.js b/app/javascript/mastodon/selectors/index.js index 3dd7f4897..bf46c810e 100644 --- a/app/javascript/mastodon/selectors/index.js +++ b/app/javascript/mastodon/selectors/index.js @@ -41,7 +41,7 @@ export const makeGetStatus = () => { ], (statusBase, statusReblog, accountBase, accountReblog, filters) => { - if (!statusBase) { + if (!statusBase || statusBase.get('isLoading')) { return null; } diff --git a/app/javascript/mastodon/service_worker/web_push_notifications.js b/app/javascript/mastodon/service_worker/web_push_notifications.js index 9b75e9b9d..f12595777 100644 --- a/app/javascript/mastodon/service_worker/web_push_notifications.js +++ b/app/javascript/mastodon/service_worker/web_push_notifications.js @@ -15,7 +15,7 @@ const notify = options => icon: '/android-chrome-192x192.png', tag: GROUP_TAG, data: { - url: (new URL('/web/notifications', self.location)).href, + url: (new URL('/notifications', self.location)).href, count: notifications.length + 1, preferred_locale: options.data.preferred_locale, }, @@ -90,7 +90,7 @@ export const handlePush = (event) => { options.tag = notification.id; options.badge = '/badge.png'; options.image = notification.status && notification.status.media_attachments.length > 0 && notification.status.media_attachments[0].preview_url || undefined; - options.data = { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/web/@${notification.account.acct}/${notification.status.id}` : `/web/@${notification.account.acct}` }; + options.data = { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/@${notification.account.acct}/${notification.status.id}` : `/@${notification.account.acct}` }; if (notification.status && notification.status.spoiler_text || notification.status.sensitive) { options.data.hiddenBody = htmlToPlainText(notification.status.content); @@ -115,7 +115,7 @@ export const handlePush = (event) => { tag: notification_id, timestamp: new Date(), badge: '/badge.png', - data: { access_token, preferred_locale, url: '/web/notifications' }, + data: { access_token, preferred_locale, url: '/notifications' }, }); }), ); @@ -166,24 +166,10 @@ const removeActionFromNotification = (notification, action) => { const openUrl = url => self.clients.matchAll({ type: 'window' }).then(clientList => { - if (clientList.length !== 0) { - const webClients = clientList.filter(client => /\/web\//.test(client.url)); - - if (webClients.length !== 0) { - const client = findBestClient(webClients); - const { pathname } = new URL(url, self.location); - - if (pathname.startsWith('/web/')) { - return client.focus().then(client => client.postMessage({ - type: 'navigate', - path: pathname.slice('/web/'.length - 1), - })); - } - } else if ('navigate' in clientList[0]) { // Chrome 42-48 does not support navigate - const client = findBestClient(clientList); + if (clientList.length !== 0 && 'navigate' in clientList[0]) { // Chrome 42-48 does not support navigate + const client = findBestClient(clientList); - return client.navigate(url).then(client => client.focus()); - } + return client.navigate(url).then(client => client.focus()); } return self.clients.openWindow(url); diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index e42468e0c..5ff45fa55 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -33,7 +33,6 @@ function main() { const { messages } = getLocale(); const React = require('react'); const ReactDOM = require('react-dom'); - const Rellax = require('rellax'); const { createBrowserHistory } = require('history'); const scrollToDetailedStatus = () => { @@ -112,12 +111,6 @@ function main() { scrollToDetailedStatus(); } - const parallaxComponents = document.querySelectorAll('.parallax'); - - if (parallaxComponents.length > 0 ) { - new Rellax('.parallax', { speed: -1 }); - } - delegate(document, '#registration_user_password_confirmation,#registration_user_password', 'input', () => { const password = document.getElementById('registration_user_password'); const confirmation = document.getElementById('registration_user_password_confirmation'); @@ -168,28 +161,6 @@ function main() { }); }); - delegate(document, '.webapp-btn', 'click', ({ target, button }) => { - if (button !== 0) { - return true; - } - window.location.href = target.href; - return false; - }); - - delegate(document, '.modal-button', 'click', e => { - e.preventDefault(); - - let href; - - if (e.target.nodeName !== 'A') { - href = e.target.parentNode.href; - } else { - href = e.target.href; - } - - window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes'); - }); - delegate(document, '#account_display_name', 'input', ({ target }) => { const name = document.querySelector('.card .display-name strong'); if (name) { diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index e9f596e2f..81a040108 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -8,7 +8,6 @@ @import 'mastodon/branding'; @import 'mastodon/containers'; @import 'mastodon/lists'; -@import 'mastodon/footer'; @import 'mastodon/widgets'; @import 'mastodon/forms'; @import 'mastodon/accounts'; diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss index 22f5bcc94..27eb837df 100644 --- a/app/javascript/styles/contrast/diff.scss +++ b/app/javascript/styles/contrast/diff.scss @@ -68,10 +68,6 @@ color: $darker-text-color; } -.public-layout .public-account-header__tabs__tabs .counter.active::after { - border-bottom: 4px solid $ui-highlight-color; -} - .compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .spoiler-input__input::placeholder { color: $inverted-text-color; diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 4b27e6b4f..20e973b8b 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -655,95 +655,6 @@ html { } } -.public-layout { - .account__section-headline { - border: 1px solid lighten($ui-base-color, 8%); - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 0; - } - } - - .header, - .public-account-header, - .public-account-bio { - box-shadow: none; - } - - .public-account-bio, - .hero-widget__text { - background: $account-background-color; - } - - .header { - background: $ui-base-color; - border: 1px solid lighten($ui-base-color, 8%); - - @media screen and (max-width: $no-gap-breakpoint) { - border: 0; - } - - .brand { - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 4%); - } - } - } - - .public-account-header { - &__image { - background: lighten($ui-base-color, 12%); - - &::after { - box-shadow: none; - } - } - - &__bar { - &::before { - background: $account-background-color; - border: 1px solid lighten($ui-base-color, 8%); - border-top: 0; - } - - .avatar img { - border-color: $account-background-color; - } - - @media screen and (max-width: $no-columns-breakpoint) { - background: $account-background-color; - border: 1px solid lighten($ui-base-color, 8%); - border-top: 0; - } - } - - &__tabs { - &__name { - h1, - h1 small { - color: $white; - - @media screen and (max-width: $no-columns-breakpoint) { - color: $primary-text-color; - } - } - } - } - - &__extra { - .public-account-bio { - border: 0; - } - - .public-account-bio .account__header__fields { - border-color: lighten($ui-base-color, 8%); - } - } - } -} - .notification__filter-bar button.active::after, .account__section-headline a.active::after { border-color: transparent transparent $white; diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 8e5ed03f0..b49b93984 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -104,785 +104,3 @@ margin-left: 10px; } } - -.grid-3 { - display: grid; - grid-gap: 10px; - grid-template-columns: 3fr 1fr; - grid-auto-columns: 25%; - grid-auto-rows: max-content; - - .column-0 { - grid-column: 1 / 3; - grid-row: 1; - } - - .column-1 { - grid-column: 1; - grid-row: 2; - } - - .column-2 { - grid-column: 2; - grid-row: 2; - } - - .column-3 { - grid-column: 1 / 3; - grid-row: 3; - } - - @media screen and (max-width: $no-gap-breakpoint) { - grid-gap: 0; - grid-template-columns: minmax(0, 100%); - - .column-0 { - grid-column: 1; - } - - .column-1 { - grid-column: 1; - grid-row: 3; - } - - .column-2 { - grid-column: 1; - grid-row: 2; - } - - .column-3 { - grid-column: 1; - grid-row: 4; - } - } -} - -.grid-4 { - display: grid; - grid-gap: 10px; - grid-template-columns: repeat(4, minmax(0, 1fr)); - grid-auto-columns: 25%; - grid-auto-rows: max-content; - - .column-0 { - grid-column: 1 / 5; - grid-row: 1; - } - - .column-1 { - grid-column: 1 / 4; - grid-row: 2; - } - - .column-2 { - grid-column: 4; - grid-row: 2; - } - - .column-3 { - grid-column: 2 / 5; - grid-row: 3; - } - - .column-4 { - grid-column: 1; - grid-row: 3; - } - - .landing-page__call-to-action { - min-height: 100%; - } - - .flash-message { - margin-bottom: 10px; - } - - @media screen and (max-width: 738px) { - grid-template-columns: minmax(0, 50%) minmax(0, 50%); - - .landing-page__call-to-action { - padding: 20px; - display: flex; - align-items: center; - justify-content: center; - } - - .row__information-board { - width: 100%; - justify-content: center; - align-items: center; - } - - .row__mascot { - display: none; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - grid-gap: 0; - grid-template-columns: minmax(0, 100%); - - .column-0 { - grid-column: 1; - } - - .column-1 { - grid-column: 1; - grid-row: 3; - } - - .column-2 { - grid-column: 1; - grid-row: 2; - } - - .column-3 { - grid-column: 1; - grid-row: 5; - } - - .column-4 { - grid-column: 1; - grid-row: 4; - } - } -} - -.public-layout { - @media screen and (max-width: $no-gap-breakpoint) { - padding-top: 48px; - } - - .container { - max-width: 960px; - - @media screen and (max-width: $no-gap-breakpoint) { - padding: 0; - } - } - - .header { - background: lighten($ui-base-color, 8%); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - border-radius: 4px; - height: 48px; - margin: 10px 0; - display: flex; - align-items: stretch; - justify-content: center; - flex-wrap: nowrap; - overflow: hidden; - - @media screen and (max-width: $no-gap-breakpoint) { - position: fixed; - width: 100%; - top: 0; - left: 0; - margin: 0; - border-radius: 0; - box-shadow: none; - z-index: 110; - } - - & > div { - flex: 1 1 33.3%; - min-height: 1px; - } - - .nav-left { - display: flex; - align-items: stretch; - justify-content: flex-start; - flex-wrap: nowrap; - } - - .nav-center { - display: flex; - align-items: stretch; - justify-content: center; - flex-wrap: nowrap; - } - - .nav-right { - display: flex; - align-items: stretch; - justify-content: flex-end; - flex-wrap: nowrap; - } - - .brand { - display: block; - padding: 15px; - - .logo { - display: block; - height: 18px; - width: auto; - position: relative; - bottom: -2px; - fill: $primary-text-color; - - @media screen and (max-width: $no-gap-breakpoint) { - height: 20px; - } - } - - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 12%); - } - } - - .nav-link { - display: flex; - align-items: center; - padding: 0 1rem; - font-size: 12px; - font-weight: 500; - text-decoration: none; - color: $darker-text-color; - white-space: nowrap; - text-align: center; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - color: $primary-text-color; - } - - @media screen and (max-width: 550px) { - &.optional { - display: none; - } - } - } - - .nav-button { - background: lighten($ui-base-color, 16%); - margin: 8px; - margin-left: 0; - border-radius: 4px; - - &:hover, - &:focus, - &:active { - text-decoration: none; - background: lighten($ui-base-color, 20%); - } - } - } - - $no-columns-breakpoint: 600px; - - .grid { - display: grid; - grid-gap: 10px; - grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr); - grid-auto-columns: 25%; - grid-auto-rows: max-content; - - .column-0 { - grid-row: 1; - grid-column: 1; - } - - .column-1 { - grid-row: 1; - grid-column: 2; - } - - @media screen and (max-width: $no-columns-breakpoint) { - grid-template-columns: 100%; - grid-gap: 0; - - .column-1 { - display: none; - } - } - } - - .page-header { - @media screen and (max-width: $no-gap-breakpoint) { - border-bottom: 0; - } - } - - .public-account-header { - overflow: hidden; - margin-bottom: 10px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - - &.inactive { - opacity: 0.5; - - .public-account-header__image, - .avatar { - filter: grayscale(100%); - } - - .logo-button { - background-color: $secondary-text-color; - } - } - - .logo-button { - padding: 3px 15px; - } - - &__image { - border-radius: 4px 4px 0 0; - overflow: hidden; - height: 300px; - position: relative; - background: darken($ui-base-color, 12%); - - &::after { - content: ""; - display: block; - position: absolute; - width: 100%; - height: 100%; - box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15); - top: 0; - left: 0; - } - - img { - object-fit: cover; - display: block; - width: 100%; - height: 100%; - margin: 0; - border-radius: 4px 4px 0 0; - } - - @media screen and (max-width: 600px) { - height: 200px; - } - } - - &--no-bar { - margin-bottom: 0; - - .public-account-header__image, - .public-account-header__image img { - border-radius: 4px; - - @media screen and (max-width: $no-gap-breakpoint) { - border-radius: 0; - } - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - margin-bottom: 0; - box-shadow: none; - - &__image::after { - display: none; - } - - &__image, - &__image img { - border-radius: 0; - } - } - - &__bar { - position: relative; - margin-top: -80px; - display: flex; - justify-content: flex-start; - - &::before { - content: ""; - display: block; - background: lighten($ui-base-color, 4%); - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 60px; - border-radius: 0 0 4px 4px; - z-index: -1; - } - - .avatar { - display: block; - width: 120px; - height: 120px; - padding-left: 20px - 4px; - flex: 0 0 auto; - - img { - display: block; - width: 100%; - height: 100%; - margin: 0; - border-radius: 50%; - border: 4px solid lighten($ui-base-color, 4%); - background: darken($ui-base-color, 8%); - } - } - - @media screen and (max-width: 600px) { - margin-top: 0; - background: lighten($ui-base-color, 4%); - border-radius: 0 0 4px 4px; - padding: 5px; - - &::before { - display: none; - } - - .avatar { - width: 48px; - height: 48px; - padding: 7px 0; - padding-left: 10px; - - img { - border: 0; - border-radius: 4px; - } - - @media screen and (max-width: 360px) { - display: none; - } - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - border-radius: 0; - } - - @media screen and (max-width: $no-columns-breakpoint) { - flex-wrap: wrap; - } - } - - &__tabs { - flex: 1 1 auto; - margin-left: 20px; - - &__name { - padding-top: 20px; - padding-bottom: 8px; - - h1 { - font-size: 20px; - line-height: 18px * 1.5; - color: $primary-text-color; - font-weight: 500; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-shadow: 1px 1px 1px $base-shadow-color; - - small { - display: block; - font-size: 14px; - color: $primary-text-color; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - @media screen and (max-width: 600px) { - margin-left: 15px; - display: flex; - justify-content: space-between; - align-items: center; - - &__name { - padding-top: 0; - padding-bottom: 0; - - h1 { - font-size: 16px; - line-height: 24px; - text-shadow: none; - - small { - color: $darker-text-color; - } - } - } - } - - &__tabs { - display: flex; - justify-content: flex-start; - align-items: stretch; - height: 58px; - - .details-counters { - display: flex; - flex-direction: row; - min-width: 300px; - } - - @media screen and (max-width: $no-columns-breakpoint) { - .details-counters { - display: none; - } - } - - .counter { - min-width: 33.3%; - box-sizing: border-box; - flex: 0 0 auto; - color: $darker-text-color; - padding: 10px; - border-right: 1px solid lighten($ui-base-color, 4%); - cursor: default; - text-align: center; - position: relative; - - a { - display: block; - } - - &:last-child { - border-right: 0; - } - - &::after { - display: block; - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - border-bottom: 4px solid $ui-primary-color; - opacity: 0.5; - transition: all 400ms ease; - } - - &.active { - &::after { - border-bottom: 4px solid $highlight-text-color; - opacity: 1; - } - - &.inactive::after { - border-bottom-color: $secondary-text-color; - } - } - - &:hover { - &::after { - opacity: 1; - transition-duration: 100ms; - } - } - - a { - text-decoration: none; - color: inherit; - } - - .counter-label { - font-size: 12px; - display: block; - } - - .counter-number { - font-weight: 500; - font-size: 18px; - margin-bottom: 5px; - color: $primary-text-color; - font-family: $font-display, sans-serif; - } - } - - .spacer { - flex: 1 1 auto; - height: 1px; - } - - &__buttons { - padding: 7px 8px; - } - } - } - - &__extra { - display: none; - margin-top: 4px; - - .public-account-bio { - border-radius: 0; - box-shadow: none; - background: transparent; - margin: 0 -5px; - - .account__header__fields { - border-top: 1px solid lighten($ui-base-color, 12%); - } - - .roles { - display: none; - } - } - - &__links { - margin-top: -15px; - font-size: 14px; - color: $darker-text-color; - - a { - display: inline-block; - color: $darker-text-color; - text-decoration: none; - padding: 15px; - font-weight: 500; - - strong { - font-weight: 700; - color: $primary-text-color; - } - } - } - - @media screen and (max-width: $no-columns-breakpoint) { - display: block; - flex: 100%; - } - } - } - - .account__section-headline { - border-radius: 4px 4px 0 0; - - @media screen and (max-width: $no-gap-breakpoint) { - border-radius: 0; - } - } - - .detailed-status__meta { - margin-top: 25px; - } - - .public-account-bio { - background: lighten($ui-base-color, 8%); - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - border-radius: 4px; - overflow: hidden; - margin-bottom: 10px; - - @media screen and (max-width: $no-gap-breakpoint) { - box-shadow: none; - margin-bottom: 0; - border-radius: 0; - } - - .account__header__fields { - margin: 0; - border-top: 0; - - a { - color: $highlight-text-color; - } - - dl:first-child .verified { - border-radius: 0 4px 0 0; - } - - .verified a { - color: $valid-value-color; - } - } - - .account__header__content { - padding: 20px; - padding-bottom: 0; - color: $primary-text-color; - } - - &__extra, - .roles { - padding: 20px; - font-size: 14px; - color: $darker-text-color; - } - - .roles { - padding-bottom: 0; - } - } - - .directory__list { - display: grid; - grid-gap: 10px; - grid-template-columns: minmax(0, 50%) minmax(0, 50%); - - .account-card { - display: flex; - flex-direction: column; - } - - @media screen and (max-width: $no-gap-breakpoint) { - display: block; - - .account-card { - margin-bottom: 10px; - display: block; - } - } - } - - .card-grid { - display: flex; - flex-wrap: wrap; - min-width: 100%; - margin: 0 -5px; - - & > div { - box-sizing: border-box; - flex: 1 0 auto; - width: 300px; - padding: 0 5px; - margin-bottom: 10px; - max-width: 33.333%; - - @media screen and (max-width: 900px) { - max-width: 50%; - } - - @media screen and (max-width: 600px) { - max-width: 100%; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - margin: 0; - border-top: 1px solid lighten($ui-base-color, 8%); - - & > div { - width: 100%; - padding: 0; - margin-bottom: 0; - border-bottom: 1px solid lighten($ui-base-color, 8%); - - &:last-child { - border-bottom: 0; - } - - .card__bar { - background: $ui-base-color; - - &:hover, - &:active, - &:focus { - background: lighten($ui-base-color, 4%); - } - } - } - } - } -} diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss deleted file mode 100644 index 0c3e42033..000000000 --- a/app/javascript/styles/mastodon/footer.scss +++ /dev/null @@ -1,152 +0,0 @@ -.public-layout { - .footer { - text-align: left; - padding-top: 20px; - padding-bottom: 60px; - font-size: 12px; - color: lighten($ui-base-color, 34%); - - @media screen and (max-width: $no-gap-breakpoint) { - padding-left: 20px; - padding-right: 20px; - } - - .grid { - display: grid; - grid-gap: 10px; - grid-template-columns: 1fr 1fr 2fr 1fr 1fr; - - .column-0 { - grid-column: 1; - grid-row: 1; - min-width: 0; - } - - .column-1 { - grid-column: 2; - grid-row: 1; - min-width: 0; - } - - .column-2 { - grid-column: 3; - grid-row: 1; - min-width: 0; - text-align: center; - - h4 a { - color: lighten($ui-base-color, 34%); - } - } - - .column-3 { - grid-column: 4; - grid-row: 1; - min-width: 0; - } - - .column-4 { - grid-column: 5; - grid-row: 1; - min-width: 0; - } - - @media screen and (max-width: 690px) { - grid-template-columns: 1fr 2fr 1fr; - - .column-0, - .column-1 { - grid-column: 1; - } - - .column-1 { - grid-row: 2; - } - - .column-2 { - grid-column: 2; - } - - .column-3, - .column-4 { - grid-column: 3; - } - - .column-4 { - grid-row: 2; - } - } - - @media screen and (max-width: 600px) { - .column-1 { - display: block; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - .column-0, - .column-1, - .column-3, - .column-4 { - display: none; - } - - .column-2 h4 { - display: none; - } - } - } - - .legal-xs { - display: none; - text-align: center; - padding-top: 20px; - - @media screen and (max-width: $no-gap-breakpoint) { - display: block; - } - } - - h4 { - text-transform: uppercase; - font-weight: 700; - margin-bottom: 8px; - color: $darker-text-color; - - a { - color: inherit; - text-decoration: none; - } - } - - ul a, - .legal-xs a { - text-decoration: none; - color: lighten($ui-base-color, 34%); - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } - - .brand { - .logo { - display: block; - height: 36px; - width: auto; - margin: 0 auto; - color: lighten($ui-base-color, 34%); - } - - &:hover, - &:focus, - &:active { - .logo { - color: lighten($ui-base-color, 38%); - } - } - } - } -} diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 98eb1511c..ccec8e95e 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -53,16 +53,6 @@ body.rtl { right: -26px; } - .landing-page__logo { - margin-right: 0; - margin-left: 20px; - } - - .landing-page .features-list .features-list__row .visual { - margin-left: 0; - margin-right: 15px; - } - .column-link__icon, .column-header__icon { margin-right: 0; @@ -350,44 +340,6 @@ body.rtl { margin-left: 45px; } - .landing-page .header-wrapper .mascot { - right: 60px; - left: auto; - } - - .landing-page__call-to-action .row__information-board { - direction: rtl; - } - - .landing-page .header .hero .floats .float-1 { - left: -120px; - right: auto; - } - - .landing-page .header .hero .floats .float-2 { - left: 210px; - right: auto; - } - - .landing-page .header .hero .floats .float-3 { - left: 110px; - right: auto; - } - - .landing-page .header .links .brand img { - left: 0; - } - - .landing-page .fa-external-link { - padding-right: 5px; - padding-left: 0 !important; - } - - .landing-page .features #mastodon-timeline { - margin-right: 0; - margin-left: 30px; - } - @media screen and (min-width: 631px) { .column, .drawer { @@ -415,32 +367,6 @@ body.rtl { padding-right: 0; } - .public-layout { - .header { - .nav-button { - margin-left: 8px; - margin-right: 0; - } - } - - .public-account-header__tabs { - margin-left: 0; - margin-right: 20px; - } - } - - .landing-page__information { - .account__display-name { - margin-right: 0; - margin-left: 5px; - } - - .account__avatar-wrapper { - margin-left: 12px; - margin-right: 0; - } - } - .card__bar .display-name { margin-left: 0; margin-right: 15px; diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index a3237a630..ce71d11e4 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -137,8 +137,7 @@ a.button.logo-button { justify-content: center; } -.embed, -.public-layout { +.embed { .status__content[data-spoiler="folded"] { .e-content { display: none; diff --git a/app/lib/permalink_redirector.rb b/app/lib/permalink_redirector.rb index 6d15f3963..cf1a37625 100644 --- a/app/lib/permalink_redirector.rb +++ b/app/lib/permalink_redirector.rb @@ -8,16 +8,14 @@ class PermalinkRedirector end def redirect_path - if path_segments[0] == 'web' - if path_segments[1].present? && path_segments[1].start_with?('@') && path_segments[2] =~ /\d/ - find_status_url_by_id(path_segments[2]) - elsif path_segments[1].present? && path_segments[1].start_with?('@') - find_account_url_by_name(path_segments[1]) - elsif path_segments[1] == 'statuses' && path_segments[2] =~ /\d/ - find_status_url_by_id(path_segments[2]) - elsif path_segments[1] == 'accounts' && path_segments[2] =~ /\d/ - find_account_url_by_id(path_segments[2]) - end + if path_segments[0].present? && path_segments[0].start_with?('@') && path_segments[1] =~ /\d/ + find_status_url_by_id(path_segments[1]) + elsif path_segments[0].present? && path_segments[0].start_with?('@') + find_account_url_by_name(path_segments[0]) + elsif path_segments[0] == 'statuses' && path_segments[1] =~ /\d/ + find_status_url_by_id(path_segments[1]) + elsif path_segments[0] == 'accounts' && path_segments[1] =~ /\d/ + find_account_url_by_id(path_segments[1]) end end @@ -29,18 +27,12 @@ class PermalinkRedirector def find_status_url_by_id(id) status = Status.find_by(id: id) - - return unless status&.distributable? - - ActivityPub::TagManager.instance.url_for(status) + ActivityPub::TagManager.instance.url_for(status) if status&.distributable? && !status.account.local? end def find_account_url_by_id(id) account = Account.find_by(id: id) - - return unless account - - ActivityPub::TagManager.instance.url_for(account) + ActivityPub::TagManager.instance.url_for(account) if account.present? && !account.local? end def find_account_url_by_name(name) @@ -48,12 +40,6 @@ class PermalinkRedirector domain = nil if TagManager.instance.local_domain?(domain) account = Account.find_remote(username, domain) - return unless account - - ActivityPub::TagManager.instance.url_for(account) - end - - def find_tag_url_by_name(name) - tag_path(CGI.unescape(name)) + ActivityPub::TagManager.instance.url_for(account) if account.present? && !account.local? end end diff --git a/app/models/account.rb b/app/models/account.rb index 1be7b4d12..df7fa8d50 100644 --- a/app/models/account.rb +++ b/app/models/account.rb @@ -134,6 +134,7 @@ class Account < ApplicationRecord :role, :locale, :shows_application?, + :prefers_noindex?, to: :user, prefix: true, allow_nil: true diff --git a/app/models/user.rb b/app/models/user.rb index 4767189a0..6d566b1c2 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -281,6 +281,10 @@ class User < ApplicationRecord save! end + def prefers_noindex? + setting_noindex + end + def preferred_posting_language valid_locale_cascade(settings.default_language, locale, I18n.locale) end diff --git a/app/serializers/rest/account_serializer.rb b/app/serializers/rest/account_serializer.rb index c52a89d87..e521dacaa 100644 --- a/app/serializers/rest/account_serializer.rb +++ b/app/serializers/rest/account_serializer.rb @@ -14,6 +14,7 @@ class REST::AccountSerializer < ActiveModel::Serializer attribute :suspended, if: :suspended? attribute :silenced, key: :limited, if: :silenced? + attribute :noindex, if: :local? class FieldSerializer < ActiveModel::Serializer include FormattingHelper @@ -103,7 +104,11 @@ class REST::AccountSerializer < ActiveModel::Serializer object.silenced? end - delegate :suspended?, :silenced?, to: :object + def noindex + object.user_prefers_noindex? + end + + delegate :suspended?, :silenced?, :local?, to: :object def moved_and_not_nested? object.moved? && object.moved_to_account.moved_to_account_id.nil? diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index aff28b9a9..05d8989ad 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -1,4 +1,7 @@ - content_for :page_title do = t('about.title') +- content_for :header_tags do + = render partial: 'shared/og' + = render partial: 'shared/web_app' diff --git a/app/views/accounts/_bio.html.haml b/app/views/accounts/_bio.html.haml deleted file mode 100644 index e2539b1d4..000000000 --- a/app/views/accounts/_bio.html.haml +++ /dev/null @@ -1,21 +0,0 @@ -- fields = account.fields - -.public-account-bio - - unless fields.empty? - .account__header__fields - - fields.each do |field| - %dl - %dt.emojify{ title: field.name }= prerender_custom_emojis(h(field.name), account.emojis) - %dd{ title: field.value, class: custom_field_classes(field) } - - if field.verified? - %span.verified__mark{ title: t('accounts.link_verified_on', date: l(field.verified_at)) } - = fa_icon 'check' - = prerender_custom_emojis(account_field_value_format(field), account.emojis) - - = account_badge(account) - - - if account.note.present? - .account__header__content.emojify= prerender_custom_emojis(account_bio_format(account), account.emojis) - - .public-account-bio__extra - = t 'accounts.joined', date: l(account.created_at, format: :month) diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml deleted file mode 100644 index d9966723a..000000000 --- a/app/views/accounts/_header.html.haml +++ /dev/null @@ -1,43 +0,0 @@ -.public-account-header{:class => ("inactive" if account.moved?)} - .public-account-header__image - = image_tag (prefers_autoplay? ? account.header_original_url : account.header_static_url), class: 'parallax' - .public-account-header__bar - = link_to short_account_url(account), class: 'avatar' do - = image_tag (prefers_autoplay? ? account.avatar_original_url : account.avatar_static_url), id: 'profile_page_avatar', data: { original: full_asset_url(account.avatar_original_url), static: full_asset_url(account.avatar_static_url), autoplay: prefers_autoplay? } - .public-account-header__tabs - .public-account-header__tabs__name - %h1 - = display_name(account, custom_emojify: true) - %small - = acct(account) - = fa_icon('lock') if account.locked? - .public-account-header__tabs__tabs - .details-counters - .counter{ class: active_nav_class(short_account_url(account), short_account_with_replies_url(account), short_account_media_url(account)) } - = link_to short_account_url(account), class: 'u-url u-uid', title: number_with_delimiter(account.statuses_count) do - %span.counter-number= friendly_number_to_human account.statuses_count - %span.counter-label= t('accounts.posts', count: account.statuses_count) - - .counter{ class: active_nav_class(account_following_index_url(account)) } - = link_to account_following_index_url(account), title: number_with_delimiter(account.following_count) do - %span.counter-number= friendly_number_to_human account.following_count - %span.counter-label= t('accounts.following', count: account.following_count) - - .counter{ class: active_nav_class(account_followers_url(account)) } - = link_to account_followers_url(account), title: number_with_delimiter(account.followers_count) do - %span.counter-number= friendly_number_to_human account.followers_count - %span.counter-label= t('accounts.followers', count: account.followers_count) - .spacer - .public-account-header__tabs__tabs__buttons - = account_action_button(account) - - .public-account-header__extra - = render 'accounts/bio', account: account - - .public-account-header__extra__links - = link_to account_following_index_url(account) do - %strong= friendly_number_to_human account.following_count - = t('accounts.following', count: account.following_count) - = link_to account_followers_url(account) do - %strong= friendly_number_to_human account.followers_count - = t('accounts.followers', count: account.followers_count) diff --git a/app/views/accounts/_moved.html.haml b/app/views/accounts/_moved.html.haml deleted file mode 100644 index 2f46e0dd0..000000000 --- a/app/views/accounts/_moved.html.haml +++ /dev/null @@ -1,20 +0,0 @@ -- moved_to_account = account.moved_to_account - -.moved-account-widget - .moved-account-widget__message - = fa_icon 'suitcase' - = t('accounts.moved_html', name: content_tag(:bdi, content_tag(:strong, display_name(account, custom_emojify: true), class: :emojify)), new_profile_link: link_to(content_tag(:strong, safe_join(['@', content_tag(:span, moved_to_account.pretty_acct)])), ActivityPub::TagManager.instance.url_for(moved_to_account), class: 'mention')) - - .moved-account-widget__card - = link_to ActivityPub::TagManager.instance.url_for(moved_to_account), class: 'detailed-status__display-name p-author h-card', target: '_blank', rel: 'me noopener noreferrer' do - .detailed-status__display-avatar - .account__avatar-overlay - .account__avatar-overlay-base - = image_tag moved_to_account.avatar_static_url - .account__avatar-overlay-overlay - = image_tag account.avatar_static_url - - %span.display-name - %bdi - %strong.emojify= display_name(moved_to_account, custom_emojify: true) - %span @#{moved_to_account.pretty_acct} diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml index 7fa688bd3..a51dcd7be 100644 --- a/app/views/accounts/show.html.haml +++ b/app/views/accounts/show.html.haml @@ -2,85 +2,13 @@ = "#{display_name(@account)} (#{acct(@account)})" - content_for :header_tags do - - if @account.user&.setting_noindex + - if @account.user_prefers_noindex? %meta{ name: 'robots', content: 'noindex, noarchive' }/ %link{ rel: 'alternate', type: 'application/rss+xml', href: @rss_url }/ %link{ rel: 'alternate', type: 'application/activity+json', href: ActivityPub::TagManager.instance.uri_for(@account) }/ - - if @older_url - %link{ rel: 'next', href: @older_url }/ - - if @newer_url - %link{ rel: 'prev', href: @newer_url }/ - = opengraph 'og:type', 'profile' = render 'og', account: @account, url: short_account_url(@account, only_path: false) - -= render 'header', account: @account, with_bio: true - -.grid - .column-0 - .h-feed - %data.p-name{ value: "#{@account.username} on #{site_hostname}" }/ - - .account__section-headline - = active_link_to t('accounts.posts_tab_heading'), short_account_url(@account) - = active_link_to t('accounts.posts_with_replies'), short_account_with_replies_url(@account) - = active_link_to t('accounts.media'), short_account_media_url(@account) - - - if user_signed_in? && @account.blocking?(current_account) - .nothing-here.nothing-here--under-tabs= t('accounts.unavailable') - - elsif @statuses.empty? - = nothing_here 'nothing-here--under-tabs' - - else - .activity-stream.activity-stream--under-tabs - - if params[:page].to_i.zero? - = render partial: 'statuses/status', collection: @pinned_statuses, as: :status, locals: { pinned: true } - - - if @newer_url - .entry= link_to_newer @newer_url - - = render partial: 'statuses/status', collection: @statuses, as: :status - - - if @older_url - .entry= link_to_older @older_url - - .column-1 - - if @account.memorial? - .memoriam-widget= t('in_memoriam_html') - - elsif @account.moved? - = render 'moved', account: @account - - = render 'bio', account: @account - - - if @endorsed_accounts.empty? && @account.id == current_account&.id - .placeholder-widget= t('accounts.endorsements_hint') - - elsif !@endorsed_accounts.empty? - .endorsements-widget - %h4= t 'accounts.choices_html', name: content_tag(:bdi, display_name(@account, custom_emojify: true)) - - - @endorsed_accounts.each do |account| - = account_link_to account - - - if @featured_hashtags.empty? && @account.id == current_account&.id - .placeholder-widget - = t('accounts.featured_tags_hint') - = link_to settings_featured_tags_path do - = t('featured_tags.add_new') - = fa_icon 'chevron-right fw' - - else - - @featured_hashtags.each do |featured_tag| - .directory__tag{ class: params[:tag] == featured_tag.name ? 'active' : nil } - = link_to short_account_tag_path(@account, featured_tag.tag) do - %h4 - = fa_icon 'hashtag' - = featured_tag.display_name - %small - - if featured_tag.last_status_at.nil? - = t('accounts.nothing_here') - - else - %time.formatted{ datetime: featured_tag.last_status_at.iso8601, title: l(featured_tag.last_status_at) }= l featured_tag.last_status_at - .trends__item__current= friendly_number_to_human featured_tag.statuses_count - - = render 'application/sidebar' += render partial: 'shared/web_app' diff --git a/app/views/follower_accounts/index.html.haml b/app/views/follower_accounts/index.html.haml index 92de35a9f..d93540c02 100644 --- a/app/views/follower_accounts/index.html.haml +++ b/app/views/follower_accounts/index.html.haml @@ -1,20 +1,6 @@ -- content_for :page_title do - = t('accounts.people_who_follow', name: display_name(@account)) - - content_for :header_tags do %meta{ name: 'robots', content: 'noindex' }/ - = render 'accounts/og', account: @account, url: account_followers_url(@account, only_path: false) -= render 'accounts/header', account: @account - -- if @account.hide_collections? - .nothing-here= t('accounts.network_hidden') -- elsif user_signed_in? && @account.blocking?(current_account) - .nothing-here= t('accounts.unavailable') -- elsif @follows.empty? - = nothing_here -- else - .card-grid - = render partial: 'application/card', collection: @follows.map(&:account), as: :account + = render 'accounts/og', account: @account, url: account_followers_url(@account, only_path: false) - = paginate @follows += render 'shared/web_app' diff --git a/app/views/following_accounts/index.html.haml b/app/views/following_accounts/index.html.haml index 9bb1a9edd..d93540c02 100644 --- a/app/views/following_accounts/index.html.haml +++ b/app/views/following_accounts/index.html.haml @@ -1,20 +1,6 @@ -- content_for :page_title do - = t('accounts.people_followed_by', name: display_name(@account)) - - content_for :header_tags do %meta{ name: 'robots', content: 'noindex' }/ - = render 'accounts/og', account: @account, url: account_followers_url(@account, only_path: false) -= render 'accounts/header', account: @account - -- if @account.hide_collections? - .nothing-here= t('accounts.network_hidden') -- elsif user_signed_in? && @account.blocking?(current_account) - .nothing-here= t('accounts.unavailable') -- elsif @follows.empty? - = nothing_here -- else - .card-grid - = render partial: 'application/card', collection: @follows.map(&:target_account), as: :account + = render 'accounts/og', account: @account, url: account_followers_url(@account, only_path: false) - = paginate @follows += render 'shared/web_app' diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml index 76a02e0f0..45990cd10 100644 --- a/app/views/home/index.html.haml +++ b/app/views/home/index.html.haml @@ -1,4 +1,7 @@ - content_for :header_tags do + - unless request.path == '/' + %meta{ name: 'robots', content: 'noindex' }/ + = render partial: 'shared/og' = render 'shared/web_app' diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml deleted file mode 100644 index 9b9e725e9..000000000 --- a/app/views/layouts/public.html.haml +++ /dev/null @@ -1,60 +0,0 @@ -- content_for :header_tags do - = render_initial_state - = javascript_pack_tag 'public', crossorigin: 'anonymous' - -- content_for :content do - .public-layout - - unless @hide_navbar - .container - %nav.header - .nav-left - = link_to root_url, class: 'brand' do - = logo_as_symbol(:wordmark) - - - unless whitelist_mode? - = link_to t('about.about_this'), about_more_path, class: 'nav-link optional' - = link_to t('about.apps'), 'https://joinmastodon.org/apps', class: 'nav-link optional' - - .nav-center - - .nav-right - - if user_signed_in? - = link_to t('settings.back'), root_url, class: 'nav-link nav-button webapp-btn' - - else - = link_to_login t('auth.login'), class: 'webapp-btn nav-link nav-button' - = link_to t('auth.register'), available_sign_up_path, class: 'webapp-btn nav-link nav-button' - - .container= yield - - .container - .footer - .grid - .column-0 - %h4= t 'footer.resources' - %ul - %li= link_to t('about.privacy_policy'), privacy_policy_path - .column-1 - %h4= t 'footer.developers' - %ul - %li= link_to t('about.documentation'), 'https://docs.joinmastodon.org/' - %li= link_to t('about.api'), 'https://docs.joinmastodon.org/client/intro/' - .column-2 - %h4= link_to t('about.what_is_mastodon'), 'https://joinmastodon.org/' - = link_to logo_as_symbol, root_url, class: 'brand' - .column-3 - %h4= site_hostname - %ul - - unless whitelist_mode? - %li= link_to t('about.about_this'), about_more_path - %li= "v#{Mastodon::Version.to_s}" - .column-4 - %h4= t 'footer.more' - %ul - %li= link_to t('about.source_code'), Mastodon::Version.source_url - %li= link_to t('about.apps'), 'https://joinmastodon.org/apps' - .legal-xs - = link_to "v#{Mastodon::Version.to_s}", Mastodon::Version.source_url - · - = link_to t('about.privacy_policy'), privacy_policy_path - -= render template: 'layouts/application' diff --git a/app/views/privacy/show.html.haml b/app/views/privacy/show.html.haml index cfc285925..95e506641 100644 --- a/app/views/privacy/show.html.haml +++ b/app/views/privacy/show.html.haml @@ -1,4 +1,7 @@ - content_for :page_title do = t('privacy_policy.title') +- content_for :header_tags do + = render partial: 'shared/og' + = render 'shared/web_app' diff --git a/app/views/remote_follow/new.html.haml b/app/views/remote_follow/new.html.haml deleted file mode 100644 index 4e9601f6a..000000000 --- a/app/views/remote_follow/new.html.haml +++ /dev/null @@ -1,20 +0,0 @@ -- content_for :header_tags do - %meta{ name: 'robots', content: 'noindex' }/ - -.form-container - .follow-prompt - %h2= t('remote_follow.prompt') - - = render partial: 'application/card', locals: { account: @account } - - = simple_form_for @remote_follow, as: :remote_follow, url: account_remote_follow_path(@account) do |f| - = render 'shared/error_messages', object: @remote_follow - - = f.input :acct, placeholder: t('remote_follow.acct'), input_html: { autocapitalize: 'none', autocorrect: 'off' } - - .actions - = f.button :button, t('remote_follow.proceed'), type: :submit - - %p.hint.subtle-hint - = t('remote_follow.reason_html', instance: site_hostname) - = t('remote_follow.no_account_html', sign_up_path: available_sign_up_path) diff --git a/app/views/remote_interaction/new.html.haml b/app/views/remote_interaction/new.html.haml deleted file mode 100644 index 2cc0fcb93..000000000 --- a/app/views/remote_interaction/new.html.haml +++ /dev/null @@ -1,24 +0,0 @@ -- content_for :header_tags do - %meta{ name: 'robots', content: 'noindex' }/ - -.form-container - .follow-prompt - %h2= t("remote_interaction.#{@interaction_type}.prompt") - - .public-layout - .activity-stream.activity-stream--highlighted - = render 'statuses/status', status: @status - - = simple_form_for @remote_follow, as: :remote_follow, url: remote_interaction_path(@status) do |f| - = render 'shared/error_messages', object: @remote_follow - - = hidden_field_tag :type, @interaction_type - - = f.input :acct, placeholder: t('remote_follow.acct'), input_html: { autocapitalize: 'none', autocorrect: 'off' } - - .actions - = f.button :button, t("remote_interaction.#{@interaction_type}.proceed"), type: :submit - - %p.hint.subtle-hint - = t('remote_follow.reason_html', instance: site_hostname) - = t('remote_follow.no_account_html', sign_up_path: available_sign_up_path) diff --git a/app/views/statuses/_detailed_status.html.haml b/app/views/statuses/_detailed_status.html.haml index c67f0e4d9..37001b022 100644 --- a/app/views/statuses/_detailed_status.html.haml +++ b/app/views/statuses/_detailed_status.html.haml @@ -56,7 +56,7 @@ - else = link_to status.application.name, status.application.website, class: 'detailed-status__application', target: '_blank', rel: 'noopener noreferrer' · - = link_to remote_interaction_path(status, type: :reply), class: 'modal-button detailed-status__link' do + %span.detailed-status__link - if status.in_reply_to_id.nil? = fa_icon('reply') - else @@ -65,12 +65,12 @@ = " " · - if status.public_visibility? || status.unlisted_visibility? - = link_to remote_interaction_path(status, type: :reblog), class: 'modal-button detailed-status__link' do + %span.detailed-status__link = fa_icon('retweet') %span.detailed-status__reblogs>= friendly_number_to_human status.reblogs_count = " " · - = link_to remote_interaction_path(status, type: :favourite), class: 'modal-button detailed-status__link' do + %span.detailed-status__link = fa_icon('star') %span.detailed-status__favorites>= friendly_number_to_human status.favourites_count = " " diff --git a/app/views/statuses/_simple_status.html.haml b/app/views/statuses/_simple_status.html.haml index f16d2c186..bfde3a260 100644 --- a/app/views/statuses/_simple_status.html.haml +++ b/app/views/statuses/_simple_status.html.haml @@ -53,18 +53,18 @@ = t 'statuses.show_thread' .status__action-bar - = link_to remote_interaction_path(status, type: :reply), class: 'status__action-bar-button icon-button icon-button--with-counter modal-button' do + %span.status__action-bar-button.icon-button.icon-button--with-counter - if status.in_reply_to_id.nil? = fa_icon 'reply fw' - else = fa_icon 'reply-all fw' %span.icon-button__counter= obscured_counter status.replies_count - = link_to remote_interaction_path(status, type: :reblog), class: 'status__action-bar-button icon-button modal-button' do + %span.status__action-bar-button.icon-button - if status.distributable? = fa_icon 'retweet fw' - elsif status.private_visibility? || status.limited_visibility? = fa_icon 'lock fw' - else = fa_icon 'at fw' - = link_to remote_interaction_path(status, type: :favourite), class: 'status__action-bar-button icon-button modal-button' do + %span.status__action-bar-button.icon-button = fa_icon 'star fw' diff --git a/app/views/statuses/show.html.haml b/app/views/statuses/show.html.haml index 5a3c94b84..106c41725 100644 --- a/app/views/statuses/show.html.haml +++ b/app/views/statuses/show.html.haml @@ -2,7 +2,7 @@ = t('statuses.title', name: display_name(@account), quote: truncate(@status.spoiler_text.presence || @status.text, length: 50, omission: '…', escape: false)) - content_for :header_tags do - - if @account.user&.setting_noindex + - if @account.user_prefers_noindex? %meta{ name: 'robots', content: 'noindex, noarchive' }/ %link{ rel: 'alternate', type: 'application/json+oembed', href: api_oembed_url(url: short_account_status_url(@account, @status), format: 'json') }/ diff --git a/app/views/tags/show.html.haml b/app/views/tags/show.html.haml new file mode 100644 index 000000000..4b4967a8f --- /dev/null +++ b/app/views/tags/show.html.haml @@ -0,0 +1,5 @@ +- content_for :header_tags do + %meta{ name: 'robots', content: 'noindex' }/ + = render partial: 'shared/og' + += render partial: 'shared/web_app' diff --git a/config/locales/en.yml b/config/locales/en.yml index 504f1b364..412178ca3 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2,47 +2,26 @@ en: about: about_mastodon_html: 'The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!' - api: API - apps: Mobile apps contact_missing: Not set contact_unavailable: N/A - documentation: Documentation hosted_on: Mastodon hosted on %{domain} - privacy_policy: Privacy Policy - source_code: Source code title: About - what_is_mastodon: What is Mastodon? accounts: - choices_html: "%{name}'s choices:" - endorsements_hint: You can endorse people you follow from the web interface, and they will show up here. - featured_tags_hint: You can feature specific hashtags that will be displayed here. follow: Follow followers: one: Follower other: Followers following: Following instance_actor_flash: This account is a virtual actor used to represent the server itself and not any individual user. It is used for federation purposes and should not be suspended. - joined: Joined %{date} last_active: last active link_verified_on: Ownership of this link was checked on %{date} - media: Media - moved_html: "%{name} has moved to %{new_profile_link}:" - network_hidden: This information is not available nothing_here: There is nothing here! - people_followed_by: People whom %{name} follows - people_who_follow: People who follow %{name} pin_errors: following: You must be already following the person you want to endorse posts: one: Post other: Posts posts_tab_heading: Posts - posts_with_replies: Posts and replies - roles: - bot: Bot - group: Group - unavailable: Profile unavailable - unfollow: Unfollow admin: account_actions: action: Perform action @@ -1176,9 +1155,6 @@ en: hint: This filter applies to select individual posts regardless of other criteria. You can add more posts to this filter from the web interface. title: Filtered posts footer: - developers: Developers - more: More… - resources: Resources trending_now: Trending now generic: all: All @@ -1221,7 +1197,6 @@ en: following: Following list muting: Muting list upload: Upload - in_memoriam_html: In Memoriam. invites: delete: Deactivate expired: Expired @@ -1402,22 +1377,7 @@ en: remove_selected_follows: Unfollow selected users status: Account status remote_follow: - acct: Enter your username@domain you want to act from missing_resource: Could not find the required redirect URL for your account - no_account_html: Don't have an account? You can sign up here - proceed: Proceed to follow - prompt: 'You are going to follow:' - reason_html: "Why is this step necessary? %{instance} might not be the server where you are registered, so we need to redirect you to your home server first." - remote_interaction: - favourite: - proceed: Proceed to favourite - prompt: 'You want to favourite this post:' - reblog: - proceed: Proceed to boost - prompt: 'You want to boost this post:' - reply: - proceed: Proceed to reply - prompt: 'You want to reply to this post:' reports: errors: invalid_rules: does not reference valid rules diff --git a/config/routes.rb b/config/routes.rb index 29ec0f8a5..1ed585f19 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -3,6 +3,31 @@ require 'sidekiq_unique_jobs/web' require 'sidekiq-scheduler/web' +# Paths of routes on the web app that to not require to be indexed or +# have alternative format representations requiring separate controllers +WEB_APP_PATHS = %w( + /getting-started + /keyboard-shortcuts + /home + /public + /public/local + /conversations + /lists/(*any) + /notifications + /favourites + /bookmarks + /pinned + /start + /directory + /explore/(*any) + /search + /publish + /follow_requests + /blocks + /domain_blocks + /mutes +).freeze + Rails.application.routes.draw do root 'home#index' @@ -59,9 +84,6 @@ Rails.application.routes.draw do get '/authorize_follow', to: redirect { |_, request| "/authorize_interaction?#{request.params.to_query}" } resources :accounts, path: 'users', only: [:show], param: :username do - get :remote_follow, to: 'remote_follow#new' - post :remote_follow, to: 'remote_follow#create' - resources :statuses, only: [:show] do member do get :activity @@ -85,16 +107,21 @@ Rails.application.routes.draw do resource :inbox, only: [:create], module: :activitypub - get '/@:username', to: 'accounts#show', as: :short_account - get '/@:username/with_replies', to: 'accounts#show', as: :short_account_with_replies - get '/@:username/media', to: 'accounts#show', as: :short_account_media - get '/@:username/tagged/:tag', to: 'accounts#show', as: :short_account_tag - get '/@:account_username/:id', to: 'statuses#show', as: :short_account_status - get '/@:account_username/:id/embed', to: 'statuses#embed', as: :embed_short_account_status + constraints(username: /[^@\/.]+/) do + get '/@:username', to: 'accounts#show', as: :short_account + get '/@:username/with_replies', to: 'accounts#show', as: :short_account_with_replies + get '/@:username/media', to: 'accounts#show', as: :short_account_media + get '/@:username/tagged/:tag', to: 'accounts#show', as: :short_account_tag + end - get '/interact/:id', to: 'remote_interaction#new', as: :remote_interaction - post '/interact/:id', to: 'remote_interaction#create' + constraints(account_username: /[^@\/.]+/) do + get '/@:account_username/following', to: 'following_accounts#index' + get '/@:account_username/followers', to: 'follower_accounts#index' + get '/@:account_username/:id', to: 'statuses#show', as: :short_account_status + get '/@:account_username/:id/embed', to: 'statuses#embed', as: :embed_short_account_status + end + get '/@:username_with_domain/(*any)', to: 'home#index', constraints: { username_with_domain: /([^\/])+?/ }, format: false get '/settings', to: redirect('/settings/profile') namespace :settings do @@ -187,9 +214,6 @@ Rails.application.routes.draw do resource :relationships, only: [:show, :update] resource :statuses_cleanup, controller: :statuses_cleanup, only: [:show, :update] - get '/explore', to: redirect('/web/explore') - get '/public', to: redirect('/web/public') - get '/public/local', to: redirect('/web/public/local') get '/media_proxy/:id/(*any)', to: 'media_proxy#show', as: :media_proxy resource :authorize_interaction, only: [:show, :create] @@ -642,8 +666,11 @@ Rails.application.routes.draw do end end - get '/web/(*any)', to: 'home#index', as: :web + WEB_APP_PATHS.each do |path| + get path, to: 'home#index' + end + get '/web/(*any)', to: redirect('/%{any}', status: 302), as: :web get '/about', to: 'about#show' get '/about/more', to: redirect('/about') diff --git a/package.json b/package.json index 5d8f20abf..0a57336d6 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,6 @@ "redux-immutable": "^4.0.0", "redux-thunk": "^2.4.1", "regenerator-runtime": "^0.13.9", - "rellax": "^1.12.1", "requestidlecallback": "^0.3.0", "reselect": "^4.1.6", "rimraf": "^3.0.2", diff --git a/spec/controllers/account_follow_controller_spec.rb b/spec/controllers/account_follow_controller_spec.rb deleted file mode 100644 index d33cd0499..000000000 --- a/spec/controllers/account_follow_controller_spec.rb +++ /dev/null @@ -1,64 +0,0 @@ -require 'rails_helper' - -describe AccountFollowController do - render_views - - let(:user) { Fabricate(:user) } - let(:alice) { Fabricate(:account, username: 'alice') } - - describe 'POST #create' do - let(:service) { double } - - subject { post :create, params: { account_username: alice.username } } - - before do - allow(FollowService).to receive(:new).and_return(service) - allow(service).to receive(:call) - end - - context 'when account is permanently suspended' do - before do - alice.suspend! - alice.deletion_request.destroy - subject - end - - it 'returns http gone' do - expect(response).to have_http_status(410) - end - end - - context 'when account is temporarily suspended' do - before do - alice.suspend! - subject - end - - it 'returns http forbidden' do - expect(response).to have_http_status(403) - end - end - - context 'when signed out' do - before do - subject - end - - it 'does not follow' do - expect(FollowService).not_to receive(:new) - end - end - - context 'when signed in' do - before do - sign_in(user) - subject - end - - it 'redirects to account path' do - expect(service).to have_received(:call).with(user.account, alice, with_rate_limit: true) - expect(response).to redirect_to(account_path(alice)) - end - end - end -end diff --git a/spec/controllers/account_unfollow_controller_spec.rb b/spec/controllers/account_unfollow_controller_spec.rb deleted file mode 100644 index a11f7aa68..000000000 --- a/spec/controllers/account_unfollow_controller_spec.rb +++ /dev/null @@ -1,64 +0,0 @@ -require 'rails_helper' - -describe AccountUnfollowController do - render_views - - let(:user) { Fabricate(:user) } - let(:alice) { Fabricate(:account, username: 'alice') } - - describe 'POST #create' do - let(:service) { double } - - subject { post :create, params: { account_username: alice.username } } - - before do - allow(UnfollowService).to receive(:new).and_return(service) - allow(service).to receive(:call) - end - - context 'when account is permanently suspended' do - before do - alice.suspend! - alice.deletion_request.destroy - subject - end - - it 'returns http gone' do - expect(response).to have_http_status(410) - end - end - - context 'when account is temporarily suspended' do - before do - alice.suspend! - subject - end - - it 'returns http forbidden' do - expect(response).to have_http_status(403) - end - end - - context 'when signed out' do - before do - subject - end - - it 'does not unfollow' do - expect(UnfollowService).not_to receive(:new) - end - end - - context 'when signed in' do - before do - sign_in(user) - subject - end - - it 'redirects to account path' do - expect(service).to have_received(:call).with(user.account, alice) - expect(response).to redirect_to(account_path(alice)) - end - end - end -end diff --git a/spec/controllers/accounts_controller_spec.rb b/spec/controllers/accounts_controller_spec.rb index 12266c800..defa8b2d3 100644 --- a/spec/controllers/accounts_controller_spec.rb +++ b/spec/controllers/accounts_controller_spec.rb @@ -99,100 +99,6 @@ RSpec.describe AccountsController, type: :controller do end it_behaves_like 'common response characteristics' - - it 'renders public status' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status)) - end - - it 'renders self-reply' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_self_reply)) - end - - it 'renders status with media' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_media)) - end - - it 'renders reblog' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_reblog.reblog)) - end - - it 'renders pinned status' do - expect(response.body).to include(I18n.t('stream_entries.pinned')) - end - - it 'does not render private status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private)) - end - - it 'does not render direct status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_direct)) - end - - it 'does not render reply to someone else' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reply)) - end - end - - context 'when signed-in' do - let(:user) { Fabricate(:user) } - - before do - sign_in(user) - end - - context 'when user follows account' do - before do - user.account.follow!(account) - get :show, params: { username: account.username, format: format } - end - - it 'does not render private status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private)) - end - end - - context 'when user is blocked' do - before do - account.block!(user.account) - get :show, params: { username: account.username, format: format } - end - - it 'renders unavailable message' do - expect(response.body).to include(I18n.t('accounts.unavailable')) - end - - it 'does not render public status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status)) - end - - it 'does not render self-reply' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_self_reply)) - end - - it 'does not render status with media' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_media)) - end - - it 'does not render reblog' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reblog.reblog)) - end - - it 'does not render pinned status' do - expect(response.body).to_not include(I18n.t('stream_entries.pinned')) - end - - it 'does not render private status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private)) - end - - it 'does not render direct status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_direct)) - end - - it 'does not render reply to someone else' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reply)) - end - end end context 'with replies' do @@ -202,38 +108,6 @@ RSpec.describe AccountsController, type: :controller do end it_behaves_like 'common response characteristics' - - it 'renders public status' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status)) - end - - it 'renders self-reply' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_self_reply)) - end - - it 'renders status with media' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_media)) - end - - it 'renders reblog' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_reblog.reblog)) - end - - it 'does not render pinned status' do - expect(response.body).to_not include(I18n.t('stream_entries.pinned')) - end - - it 'does not render private status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private)) - end - - it 'does not render direct status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_direct)) - end - - it 'renders reply to someone else' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_reply)) - end end context 'with media' do @@ -243,38 +117,6 @@ RSpec.describe AccountsController, type: :controller do end it_behaves_like 'common response characteristics' - - it 'does not render public status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status)) - end - - it 'does not render self-reply' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_self_reply)) - end - - it 'renders status with media' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_media)) - end - - it 'does not render reblog' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reblog.reblog)) - end - - it 'does not render pinned status' do - expect(response.body).to_not include(I18n.t('stream_entries.pinned')) - end - - it 'does not render private status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private)) - end - - it 'does not render direct status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_direct)) - end - - it 'does not render reply to someone else' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reply)) - end end context 'with tag' do @@ -289,42 +131,6 @@ RSpec.describe AccountsController, type: :controller do end it_behaves_like 'common response characteristics' - - it 'does not render public status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status)) - end - - it 'does not render self-reply' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_self_reply)) - end - - it 'does not render status with media' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_media)) - end - - it 'does not render reblog' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reblog.reblog)) - end - - it 'does not render pinned status' do - expect(response.body).to_not include(I18n.t('stream_entries.pinned')) - end - - it 'does not render private status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private)) - end - - it 'does not render direct status' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_direct)) - end - - it 'does not render reply to someone else' do - expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reply)) - end - - it 'renders status with tag' do - expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_tag)) - end end end diff --git a/spec/controllers/authorize_interactions_controller_spec.rb b/spec/controllers/authorize_interactions_controller_spec.rb index 99f3f6ffc..44f52df69 100644 --- a/spec/controllers/authorize_interactions_controller_spec.rb +++ b/spec/controllers/authorize_interactions_controller_spec.rb @@ -39,7 +39,7 @@ describe AuthorizeInteractionsController do end it 'sets resource from url' do - account = Account.new + account = Fabricate(:account) service = double allow(ResolveURLService).to receive(:new).and_return(service) allow(service).to receive(:call).with('http://example.com').and_return(account) @@ -51,7 +51,7 @@ describe AuthorizeInteractionsController do end it 'sets resource from acct uri' do - account = Account.new + account = Fabricate(:account) service = double allow(ResolveAccountService).to receive(:new).and_return(service) allow(service).to receive(:call).with('found@hostname').and_return(account) diff --git a/spec/controllers/follower_accounts_controller_spec.rb b/spec/controllers/follower_accounts_controller_spec.rb index 4d2a6e01a..ab2e82e85 100644 --- a/spec/controllers/follower_accounts_controller_spec.rb +++ b/spec/controllers/follower_accounts_controller_spec.rb @@ -34,27 +34,6 @@ describe FollowerAccountsController do expect(response).to have_http_status(403) end end - - it 'assigns follows' do - expect(response).to have_http_status(200) - - assigned = assigns(:follows).to_a - expect(assigned.size).to eq 2 - expect(assigned[0]).to eq follow1 - expect(assigned[1]).to eq follow0 - end - - it 'does not assign blocked users' do - user = Fabricate(:user) - user.account.block!(follower0) - sign_in(user) - - expect(response).to have_http_status(200) - - assigned = assigns(:follows).to_a - expect(assigned.size).to eq 1 - expect(assigned[0]).to eq follow1 - end end context 'when format is json' do diff --git a/spec/controllers/following_accounts_controller_spec.rb b/spec/controllers/following_accounts_controller_spec.rb index bb6d221ca..e43dbf882 100644 --- a/spec/controllers/following_accounts_controller_spec.rb +++ b/spec/controllers/following_accounts_controller_spec.rb @@ -34,27 +34,6 @@ describe FollowingAccountsController do expect(response).to have_http_status(403) end end - - it 'assigns follows' do - expect(response).to have_http_status(200) - - assigned = assigns(:follows).to_a - expect(assigned.size).to eq 2 - expect(assigned[0]).to eq follow1 - expect(assigned[1]).to eq follow0 - end - - it 'does not assign blocked users' do - user = Fabricate(:user) - user.account.block!(followee0) - sign_in(user) - - expect(response).to have_http_status(200) - - assigned = assigns(:follows).to_a - expect(assigned.size).to eq 1 - expect(assigned[0]).to eq follow1 - end end context 'when format is json' do diff --git a/spec/controllers/remote_follow_controller_spec.rb b/spec/controllers/remote_follow_controller_spec.rb deleted file mode 100644 index 01d43f48c..000000000 --- a/spec/controllers/remote_follow_controller_spec.rb +++ /dev/null @@ -1,135 +0,0 @@ -# frozen_string_literal: true - -require 'rails_helper' - -describe RemoteFollowController do - render_views - - describe '#new' do - it 'returns success when session is empty' do - account = Fabricate(:account) - get :new, params: { account_username: account.to_param } - - expect(response).to have_http_status(200) - expect(response).to render_template(:new) - expect(assigns(:remote_follow).acct).to be_nil - end - - it 'populates the remote follow with session data when session exists' do - session[:remote_follow] = 'user@example.com' - account = Fabricate(:account) - get :new, params: { account_username: account.to_param } - - expect(response).to have_http_status(200) - expect(response).to render_template(:new) - expect(assigns(:remote_follow).acct).to eq 'user@example.com' - end - end - - describe '#create' do - before do - @account = Fabricate(:account, username: 'test_user') - end - - context 'with a valid acct' do - context 'when webfinger values are wrong' do - it 'renders new when redirect url is nil' do - resource_with_nil_link = double(link: nil) - allow_any_instance_of(WebfingerHelper).to receive(:webfinger!).with('acct:user@example.com').and_return(resource_with_nil_link) - post :create, params: { account_username: @account.to_param, remote_follow: { acct: 'user@example.com' } } - - expect(response).to render_template(:new) - expect(response.body).to include(I18n.t('remote_follow.missing_resource')) - end - - it 'renders new when template is nil' do - resource_with_link = double(link: nil) - allow_any_instance_of(WebfingerHelper).to receive(:webfinger!).with('acct:user@example.com').and_return(resource_with_link) - post :create, params: { account_username: @account.to_param, remote_follow: { acct: 'user@example.com' } } - - expect(response).to render_template(:new) - expect(response.body).to include(I18n.t('remote_follow.missing_resource')) - end - end - - context 'when webfinger values are good' do - before do - resource_with_link = double(link: 'http://example.com/follow_me?acct={uri}') - allow_any_instance_of(WebfingerHelper).to receive(:webfinger!).with('acct:user@example.com').and_return(resource_with_link) - post :create, params: { account_username: @account.to_param, remote_follow: { acct: 'user@example.com' } } - end - - it 'saves the session' do - expect(session[:remote_follow]).to eq 'user@example.com' - end - - it 'redirects to the remote location' do - expect(response).to redirect_to("http://example.com/follow_me?acct=https%3A%2F%2F#{Rails.configuration.x.local_domain}%2Fusers%2Ftest_user") - end - end - end - - context 'with an invalid acct' do - it 'renders new when acct is missing' do - post :create, params: { account_username: @account.to_param, remote_follow: { acct: '' } } - - expect(response).to render_template(:new) - end - - it 'renders new with error when webfinger fails' do - allow_any_instance_of(WebfingerHelper).to receive(:webfinger!).with('acct:user@example.com').and_raise(Webfinger::Error) - post :create, params: { account_username: @account.to_param, remote_follow: { acct: 'user@example.com' } } - - expect(response).to render_template(:new) - expect(response.body).to include(I18n.t('remote_follow.missing_resource')) - end - - it 'renders new when occur HTTP::ConnectionError' do - allow_any_instance_of(WebfingerHelper).to receive(:webfinger!).with('acct:user@unknown').and_raise(HTTP::ConnectionError) - post :create, params: { account_username: @account.to_param, remote_follow: { acct: 'user@unknown' } } - - expect(response).to render_template(:new) - expect(response.body).to include(I18n.t('remote_follow.missing_resource')) - end - end - end - - context 'with a permanently suspended account' do - before do - @account = Fabricate(:account) - @account.suspend! - @account.deletion_request.destroy - end - - it 'returns http gone on GET to #new' do - get :new, params: { account_username: @account.to_param } - - expect(response).to have_http_status(410) - end - - it 'returns http gone on POST to #create' do - post :create, params: { account_username: @account.to_param } - - expect(response).to have_http_status(410) - end - end - - context 'with a temporarily suspended account' do - before do - @account = Fabricate(:account) - @account.suspend! - end - - it 'returns http forbidden on GET to #new' do - get :new, params: { account_username: @account.to_param } - - expect(response).to have_http_status(403) - end - - it 'returns http forbidden on POST to #create' do - post :create, params: { account_username: @account.to_param } - - expect(response).to have_http_status(403) - end - end -end diff --git a/spec/controllers/remote_interaction_controller_spec.rb b/spec/controllers/remote_interaction_controller_spec.rb deleted file mode 100644 index bb0074b11..000000000 --- a/spec/controllers/remote_interaction_controller_spec.rb +++ /dev/null @@ -1,39 +0,0 @@ -# frozen_string_literal: true - -require 'rails_helper' - -describe RemoteInteractionController, type: :controller do - render_views - - let(:status) { Fabricate(:status) } - - describe 'GET #new' do - it 'returns 200' do - get :new, params: { id: status.id } - expect(response).to have_http_status(200) - end - end - - describe 'POST #create' do - context '@remote_follow is valid' do - it 'returns 302' do - allow_any_instance_of(RemoteFollow).to receive(:valid?) { true } - allow_any_instance_of(RemoteFollow).to receive(:addressable_template) do - Addressable::Template.new('https://hoge.com') - end - - post :create, params: { id: status.id, remote_follow: { acct: '@hoge' } } - expect(response).to have_http_status(302) - end - end - - context '@remote_follow is invalid' do - it 'returns 200' do - allow_any_instance_of(RemoteFollow).to receive(:valid?) { false } - post :create, params: { id: status.id, remote_follow: { acct: '@hoge' } } - - expect(response).to have_http_status(200) - end - end - end -end diff --git a/spec/controllers/tags_controller_spec.rb b/spec/controllers/tags_controller_spec.rb index 1fd8494d6..547bcfb39 100644 --- a/spec/controllers/tags_controller_spec.rb +++ b/spec/controllers/tags_controller_spec.rb @@ -10,16 +10,15 @@ RSpec.describe TagsController, type: :controller do let!(:late) { Fabricate(:status, tags: [tag], text: 'late #test') } context 'when tag exists' do - it 'redirects to web version' do + it 'returns http success' do get :show, params: { id: 'test', max_id: late.id } - expect(response).to redirect_to('/web/tags/test') + expect(response).to have_http_status(200) end end context 'when tag does not exist' do - it 'returns http missing for non-existent tag' do + it 'returns http not found' do get :show, params: { id: 'none' } - expect(response).to have_http_status(404) end end diff --git a/spec/features/profile_spec.rb b/spec/features/profile_spec.rb index b6de3e9d1..ec4f9a53f 100644 --- a/spec/features/profile_spec.rb +++ b/spec/features/profile_spec.rb @@ -18,36 +18,16 @@ feature 'Profile' do visit account_path('alice') is_expected.to have_title("alice (@alice@#{local_domain})") - - within('.public-account-header h1') do - is_expected.to have_content("alice @alice@#{local_domain}") - end - - bio_elem = first('.public-account-bio') - expect(bio_elem).to have_content(alice_bio) - # The bio has hashtags made clickable - expect(bio_elem).to have_link('cryptology') - expect(bio_elem).to have_link('science') - # Nicknames are make clickable - expect(bio_elem).to have_link('@alice') - expect(bio_elem).to have_link('@bob') - # Nicknames not on server are not clickable - expect(bio_elem).not_to have_link('@pepe') end scenario 'I can change my account' do visit settings_profile_path + fill_in 'Display name', with: 'Bob' fill_in 'Bio', with: 'Bob is silent' - first('.btn[type=submit]').click - is_expected.to have_content 'Changes successfully saved!' - # View my own public profile and see the changes - click_link "Bob @bob@#{local_domain}" + first('button[type=submit]').click - within('.public-account-header h1') do - is_expected.to have_content("Bob @bob@#{local_domain}") - end - expect(first('.public-account-bio')).to have_content('Bob is silent') + is_expected.to have_content 'Changes successfully saved!' end end diff --git a/spec/lib/permalink_redirector_spec.rb b/spec/lib/permalink_redirector_spec.rb index abda57da4..a00913656 100644 --- a/spec/lib/permalink_redirector_spec.rb +++ b/spec/lib/permalink_redirector_spec.rb @@ -3,40 +3,31 @@ require 'rails_helper' describe PermalinkRedirector do + let(:remote_account) { Fabricate(:account, username: 'alice', domain: 'example.com', url: 'https://example.com/@alice', id: 2) } + describe '#redirect_url' do before do - account = Fabricate(:account, username: 'alice', id: 1) - Fabricate(:status, account: account, id: 123) + Fabricate(:status, account: remote_account, id: 123, url: 'https://example.com/status-123') end it 'returns path for legacy account links' do - redirector = described_class.new('web/accounts/1') - expect(redirector.redirect_path).to eq 'https://cb6e6126.ngrok.io/@alice' + redirector = described_class.new('accounts/2') + expect(redirector.redirect_path).to eq 'https://example.com/@alice' end it 'returns path for legacy status links' do - redirector = described_class.new('web/statuses/123') - expect(redirector.redirect_path).to eq 'https://cb6e6126.ngrok.io/@alice/123' - end - - it 'returns path for legacy tag links' do - redirector = described_class.new('web/timelines/tag/hoge') - expect(redirector.redirect_path).to be_nil + redirector = described_class.new('statuses/123') + expect(redirector.redirect_path).to eq 'https://example.com/status-123' end it 'returns path for pretty account links' do - redirector = described_class.new('web/@alice') - expect(redirector.redirect_path).to eq 'https://cb6e6126.ngrok.io/@alice' + redirector = described_class.new('@alice@example.com') + expect(redirector.redirect_path).to eq 'https://example.com/@alice' end it 'returns path for pretty status links' do - redirector = described_class.new('web/@alice/123') - expect(redirector.redirect_path).to eq 'https://cb6e6126.ngrok.io/@alice/123' - end - - it 'returns path for pretty tag links' do - redirector = described_class.new('web/tags/hoge') - expect(redirector.redirect_path).to be_nil + redirector = described_class.new('@alice/123') + expect(redirector.redirect_path).to eq 'https://example.com/status-123' end end end diff --git a/spec/requests/account_show_page_spec.rb b/spec/requests/account_show_page_spec.rb index 4e51cf7ef..e84c46c47 100644 --- a/spec/requests/account_show_page_spec.rb +++ b/spec/requests/account_show_page_spec.rb @@ -3,17 +3,6 @@ require 'rails_helper' describe 'The account show page' do - it 'Has an h-feed with correct number of h-entry objects in it' do - alice = Fabricate(:account, username: 'alice', display_name: 'Alice') - _status = Fabricate(:status, account: alice, text: 'Hello World') - _status2 = Fabricate(:status, account: alice, text: 'Hello World Again') - _status3 = Fabricate(:status, account: alice, text: 'Are You Still There World?') - - get '/@alice' - - expect(h_feed_entries.size).to eq(3) - end - it 'has valid opengraph tags' do alice = Fabricate(:account, username: 'alice', display_name: 'Alice') _status = Fabricate(:status, account: alice, text: 'Hello World') @@ -33,8 +22,4 @@ describe 'The account show page' do def head_section Nokogiri::Slop(response.body).html.head end - - def h_feed_entries - Nokogiri::HTML(response.body).search('.h-feed .h-entry') - end end diff --git a/spec/routing/accounts_routing_spec.rb b/spec/routing/accounts_routing_spec.rb index d04cb27f0..3f0e9b3e9 100644 --- a/spec/routing/accounts_routing_spec.rb +++ b/spec/routing/accounts_routing_spec.rb @@ -1,31 +1,83 @@ require 'rails_helper' describe 'Routes under accounts/' do - describe 'the route for accounts who are followers of an account' do - it 'routes to the followers action with the right username' do - expect(get('/users/name/followers')). - to route_to('follower_accounts#index', account_username: 'name') + context 'with local username' do + let(:username) { 'alice' } + + it 'routes /@:username' do + expect(get("/@#{username}")).to route_to('accounts#show', username: username) end - end - describe 'the route for accounts who are followed by an account' do - it 'routes to the following action with the right username' do - expect(get('/users/name/following')). - to route_to('following_accounts#index', account_username: 'name') + it 'routes /@:username.json' do + expect(get("/@#{username}.json")).to route_to('accounts#show', username: username, format: 'json') + end + + it 'routes /@:username.rss' do + expect(get("/@#{username}.rss")).to route_to('accounts#show', username: username, format: 'rss') + end + + it 'routes /@:username/:id' do + expect(get("/@#{username}/123")).to route_to('statuses#show', account_username: username, id: '123') + end + + it 'routes /@:username/:id/embed' do + expect(get("/@#{username}/123/embed")).to route_to('statuses#embed', account_username: username, id: '123') + end + + it 'routes /@:username/following' do + expect(get("/@#{username}/following")).to route_to('following_accounts#index', account_username: username) + end + + it 'routes /@:username/followers' do + expect(get("/@#{username}/followers")).to route_to('follower_accounts#index', account_username: username) + end + + it 'routes /@:username/with_replies' do + expect(get("/@#{username}/with_replies")).to route_to('accounts#show', username: username) + end + + it 'routes /@:username/media' do + expect(get("/@#{username}/media")).to route_to('accounts#show', username: username) end - end - describe 'the route for following an account' do - it 'routes to the follow create action with the right username' do - expect(post('/users/name/follow')). - to route_to('account_follow#create', account_username: 'name') + it 'routes /@:username/tagged/:tag' do + expect(get("/@#{username}/tagged/foo")).to route_to('accounts#show', username: username, tag: 'foo') end end - describe 'the route for unfollowing an account' do - it 'routes to the unfollow create action with the right username' do - expect(post('/users/name/unfollow')). - to route_to('account_unfollow#create', account_username: 'name') + context 'with remote username' do + let(:username) { 'alice@example.com' } + + it 'routes /@:username' do + expect(get("/@#{username}")).to route_to('home#index', username_with_domain: username) + end + + it 'routes /@:username/:id' do + expect(get("/@#{username}/123")).to route_to('home#index', username_with_domain: username, any: '123') + end + + it 'routes /@:username/:id/embed' do + expect(get("/@#{username}/123/embed")).to route_to('home#index', username_with_domain: username, any: '123/embed') + end + + it 'routes /@:username/following' do + expect(get("/@#{username}/following")).to route_to('home#index', username_with_domain: username, any: 'following') + end + + it 'routes /@:username/followers' do + expect(get("/@#{username}/followers")).to route_to('home#index', username_with_domain: username, any: 'followers') + end + + it 'routes /@:username/with_replies' do + expect(get("/@#{username}/with_replies")).to route_to('home#index', username_with_domain: username, any: 'with_replies') + end + + it 'routes /@:username/media' do + expect(get("/@#{username}/media")).to route_to('home#index', username_with_domain: username, any: 'media') + end + + it 'routes /@:username/tagged/:tag' do + expect(get("/@#{username}/tagged/foo")).to route_to('home#index', username_with_domain: username, any: 'tagged/foo') end end end diff --git a/yarn.lock b/yarn.lock index 6ae965464..98666f23d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9663,11 +9663,6 @@ regjsparser@^0.8.2: dependencies: jsesc "~0.5.0" -rellax@^1.12.1: - version "1.12.1" - resolved "https://registry.yarnpkg.com/rellax/-/rellax-1.12.1.tgz#1b433ef7ac4aa3573449a33efab391c112f6b34d" - integrity sha512-XBIi0CDpW5FLTujYjYBn1CIbK2CJL6TsAg/w409KghP2LucjjzBjsujXDAjyBLWgsfupfUcL5WzdnIPcGfK7XA== - remove-trailing-separator@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef" -- cgit From 7c152acb2cc545a87610de349a94e14f45fbed5d Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 22 Oct 2022 11:44:41 +0200 Subject: Change settings area to be separated into categories in admin UI (#19407) And update all descriptions --- app/controllers/admin/settings/about_controller.rb | 9 ++ .../admin/settings/appearance_controller.rb | 9 ++ .../admin/settings/branding_controller.rb | 9 ++ .../admin/settings/content_retention_controller.rb | 9 ++ .../admin/settings/discovery_controller.rb | 9 ++ .../admin/settings/registrations_controller.rb | 9 ++ app/controllers/admin/settings_controller.rb | 10 +- app/controllers/admin/site_uploads_controller.rb | 2 +- app/helpers/admin/settings_helper.rb | 7 -- app/javascript/styles/mastodon/admin.scss | 82 +++++++++++++---- app/javascript/styles/mastodon/components.scss | 5 + app/javascript/styles/mastodon/forms.scss | 16 +++- app/models/form/admin_settings.rb | 57 +++++++----- .../rest/extended_description_serializer.rb | 12 ++- app/views/admin/settings/about/show.html.haml | 33 +++++++ app/views/admin/settings/appearance/show.html.haml | 34 +++++++ app/views/admin/settings/branding/show.html.haml | 39 ++++++++ .../settings/content_retention/show.html.haml | 22 +++++ app/views/admin/settings/discovery/show.html.haml | 40 ++++++++ app/views/admin/settings/edit.html.haml | 102 --------------------- .../admin/settings/registrations/show.html.haml | 27 ++++++ app/views/admin/settings/shared/_links.html.haml | 8 ++ app/views/layouts/admin.html.haml | 11 ++- config/locales/en.yml | 87 +++++------------- config/locales/simple_form.en.yml | 37 ++++++++ config/navigation.rb | 2 +- config/routes.rb | 13 ++- .../admin/settings/branding_controller_spec.rb | 53 +++++++++++ spec/controllers/admin/settings_controller_spec.rb | 71 -------------- 29 files changed, 528 insertions(+), 296 deletions(-) create mode 100644 app/controllers/admin/settings/about_controller.rb create mode 100644 app/controllers/admin/settings/appearance_controller.rb create mode 100644 app/controllers/admin/settings/branding_controller.rb create mode 100644 app/controllers/admin/settings/content_retention_controller.rb create mode 100644 app/controllers/admin/settings/discovery_controller.rb create mode 100644 app/controllers/admin/settings/registrations_controller.rb create mode 100644 app/views/admin/settings/about/show.html.haml create mode 100644 app/views/admin/settings/appearance/show.html.haml create mode 100644 app/views/admin/settings/branding/show.html.haml create mode 100644 app/views/admin/settings/content_retention/show.html.haml create mode 100644 app/views/admin/settings/discovery/show.html.haml delete mode 100644 app/views/admin/settings/edit.html.haml create mode 100644 app/views/admin/settings/registrations/show.html.haml create mode 100644 app/views/admin/settings/shared/_links.html.haml create mode 100644 spec/controllers/admin/settings/branding_controller_spec.rb delete mode 100644 spec/controllers/admin/settings_controller_spec.rb (limited to 'app/javascript/styles') diff --git a/app/controllers/admin/settings/about_controller.rb b/app/controllers/admin/settings/about_controller.rb new file mode 100644 index 000000000..86327fe39 --- /dev/null +++ b/app/controllers/admin/settings/about_controller.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +class Admin::Settings::AboutController < Admin::SettingsController + private + + def after_update_redirect_path + admin_settings_about_path + end +end diff --git a/app/controllers/admin/settings/appearance_controller.rb b/app/controllers/admin/settings/appearance_controller.rb new file mode 100644 index 000000000..39b2448d8 --- /dev/null +++ b/app/controllers/admin/settings/appearance_controller.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +class Admin::Settings::AppearanceController < Admin::SettingsController + private + + def after_update_redirect_path + admin_settings_appearance_path + end +end diff --git a/app/controllers/admin/settings/branding_controller.rb b/app/controllers/admin/settings/branding_controller.rb new file mode 100644 index 000000000..4a4d76f49 --- /dev/null +++ b/app/controllers/admin/settings/branding_controller.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +class Admin::Settings::BrandingController < Admin::SettingsController + private + + def after_update_redirect_path + admin_settings_branding_path + end +end diff --git a/app/controllers/admin/settings/content_retention_controller.rb b/app/controllers/admin/settings/content_retention_controller.rb new file mode 100644 index 000000000..b88336a2c --- /dev/null +++ b/app/controllers/admin/settings/content_retention_controller.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +class Admin::Settings::ContentRetentionController < Admin::SettingsController + private + + def after_update_redirect_path + admin_settings_content_retention_path + end +end diff --git a/app/controllers/admin/settings/discovery_controller.rb b/app/controllers/admin/settings/discovery_controller.rb new file mode 100644 index 000000000..be4b57f79 --- /dev/null +++ b/app/controllers/admin/settings/discovery_controller.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +class Admin::Settings::DiscoveryController < Admin::SettingsController + private + + def after_update_redirect_path + admin_settings_discovery_path + end +end diff --git a/app/controllers/admin/settings/registrations_controller.rb b/app/controllers/admin/settings/registrations_controller.rb new file mode 100644 index 000000000..b4a74349c --- /dev/null +++ b/app/controllers/admin/settings/registrations_controller.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +class Admin::Settings::RegistrationsController < Admin::SettingsController + private + + def after_update_redirect_path + admin_settings_registrations_path + end +end diff --git a/app/controllers/admin/settings_controller.rb b/app/controllers/admin/settings_controller.rb index dc1c79b7f..338a3638c 100644 --- a/app/controllers/admin/settings_controller.rb +++ b/app/controllers/admin/settings_controller.rb @@ -2,7 +2,7 @@ module Admin class SettingsController < BaseController - def edit + def show authorize :settings, :show? @admin_settings = Form::AdminSettings.new @@ -15,14 +15,18 @@ module Admin if @admin_settings.save flash[:notice] = I18n.t('generic.changes_saved_msg') - redirect_to edit_admin_settings_path + redirect_to after_update_redirect_path else - render :edit + render :show end end private + def after_update_redirect_path + raise NotImplementedError + end + def settings_params params.require(:form_admin_settings).permit(*Form::AdminSettings::KEYS) end diff --git a/app/controllers/admin/site_uploads_controller.rb b/app/controllers/admin/site_uploads_controller.rb index cacecedb0..a5d2cf41c 100644 --- a/app/controllers/admin/site_uploads_controller.rb +++ b/app/controllers/admin/site_uploads_controller.rb @@ -9,7 +9,7 @@ module Admin @site_upload.destroy! - redirect_to edit_admin_settings_path, notice: I18n.t('admin.site_uploads.destroyed_msg') + redirect_to admin_settings_path, notice: I18n.t('admin.site_uploads.destroyed_msg') end private diff --git a/app/helpers/admin/settings_helper.rb b/app/helpers/admin/settings_helper.rb index baf14ab25..a133b4e7d 100644 --- a/app/helpers/admin/settings_helper.rb +++ b/app/helpers/admin/settings_helper.rb @@ -1,11 +1,4 @@ # frozen_string_literal: true module Admin::SettingsHelper - def site_upload_delete_hint(hint, var) - upload = SiteUpload.find_by(var: var.to_s) - return hint unless upload - - link = link_to t('admin.site_uploads.delete'), admin_site_upload_path(upload), data: { method: :delete } - safe_join([hint, link], '
'.html_safe) - end end diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 1c5494cde..affe1c79c 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -188,21 +188,70 @@ $content-width: 840px; padding-top: 30px; } - &-heading { - display: flex; + &__heading { padding-bottom: 36px; border-bottom: 1px solid lighten($ui-base-color, 8%); - margin: -15px -15px 40px 0; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; + margin-bottom: 40px; - & > * { - margin-top: 15px; - margin-right: 15px; + &__row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + margin: -15px -15px 0 0; + + & > * { + margin-top: 15px; + margin-right: 15px; + } } - &-actions { + &__tabs { + margin-top: 30px; + margin-bottom: -31px; + + & > div { + display: flex; + gap: 10px; + } + + a { + font-size: 14px; + display: inline-flex; + align-items: center; + padding: 7px 15px; + border-radius: 4px; + color: $darker-text-color; + text-decoration: none; + position: relative; + font-weight: 500; + gap: 5px; + white-space: nowrap; + + &.selected { + font-weight: 700; + color: $primary-text-color; + + &::after { + content: ""; + display: block; + width: 100%; + border-bottom: 1px solid $ui-highlight-color; + position: absolute; + bottom: -5px; + left: 0; + } + } + + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 4%); + } + } + } + + &__actions { display: inline-flex; & > :not(:first-child) { @@ -228,11 +277,7 @@ $content-width: 840px; color: $secondary-text-color; font-size: 24px; line-height: 36px; - font-weight: 400; - - @media screen and (max-width: $no-columns-breakpoint) { - font-weight: 700; - } + font-weight: 700; } h3 { @@ -437,6 +482,11 @@ body, } } + & > div { + display: flex; + gap: 5px; + } + strong { font-weight: 500; text-transform: uppercase; @@ -1143,7 +1193,7 @@ a.name-tag, path:first-child { fill: rgba($highlight-text-color, 0.25) !important; - fill-opacity: 1 !important; + fill-opacity: 100% !important; } path:last-child { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 587eba663..5d0ff8536 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -29,6 +29,11 @@ background: transparent; padding: 0; cursor: pointer; + text-decoration: none; + + &--destructive { + color: $error-value-color; + } &:hover, &:active { diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 69a0b22d6..25c9c9fe5 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -254,7 +254,7 @@ code { & > label { font-family: inherit; - font-size: 16px; + font-size: 14px; color: $primary-text-color; display: block; font-weight: 500; @@ -291,6 +291,20 @@ code { .input:last-child { margin-bottom: 0; } + + &__thumbnail { + display: block; + margin: 0; + margin-bottom: 10px; + max-width: 100%; + height: auto; + border-radius: 4px; + background: url("images/void.png"); + + &:last-child { + margin-bottom: 0; + } + } } .fields-row { diff --git a/app/models/form/admin_settings.rb b/app/models/form/admin_settings.rb index b6bb3d795..957a32b7c 100644 --- a/app/models/form/admin_settings.rb +++ b/app/models/form/admin_settings.rb @@ -8,7 +8,6 @@ class Form::AdminSettings site_contact_email site_title site_short_description - site_description site_extended_description site_terms registrations_mode @@ -53,45 +52,55 @@ class Form::AdminSettings attr_accessor(*KEYS) - validates :site_short_description, :site_description, html: { wrap_with: :p } - validates :site_extended_description, :site_terms, :closed_registrations_message, html: true - validates :registrations_mode, inclusion: { in: %w(open approved none) } - validates :site_contact_email, :site_contact_username, presence: true - validates :site_contact_username, existing_username: true - validates :bootstrap_timeline_accounts, existing_username: { multiple: true } - validates :show_domain_blocks, inclusion: { in: %w(disabled users all) } - validates :show_domain_blocks_rationale, inclusion: { in: %w(disabled users all) } - validates :media_cache_retention_period, :content_cache_retention_period, :backups_retention_period, numericality: { only_integer: true }, allow_blank: true + validates :registrations_mode, inclusion: { in: %w(open approved none) }, if: -> { defined?(@registrations_mode) } + validates :site_contact_email, :site_contact_username, presence: true, if: -> { defined?(@site_contact_username) || defined?(@site_contact_email) } + validates :site_contact_username, existing_username: true, if: -> { defined?(@site_contact_username) } + validates :bootstrap_timeline_accounts, existing_username: { multiple: true }, if: -> { defined?(@bootstrap_timeline_accounts) } + validates :show_domain_blocks, inclusion: { in: %w(disabled users all) }, if: -> { defined?(@show_domain_blocks) } + validates :show_domain_blocks_rationale, inclusion: { in: %w(disabled users all) }, if: -> { defined?(@show_domain_blocks_rationale) } + validates :media_cache_retention_period, :content_cache_retention_period, :backups_retention_period, numericality: { only_integer: true }, allow_blank: true, if: -> { defined?(@media_cache_retention_period) || defined?(@content_cache_retention_period) || defined?(@backups_retention_period) } + validates :site_short_description, length: { maximum: 200 }, if: -> { defined?(@site_short_description) } - def initialize(_attributes = {}) - super - initialize_attributes + KEYS.each do |key| + define_method(key) do + return instance_variable_get("@#{key}") if instance_variable_defined?("@#{key}") + + stored_value = begin + if UPLOAD_KEYS.include?(key) + SiteUpload.where(var: key).first_or_initialize(var: key) + else + Setting.public_send(key) + end + end + + instance_variable_set("@#{key}", stored_value) + end + end + + UPLOAD_KEYS.each do |key| + define_method("#{key}=") do |file| + value = public_send(key) + value.file = file + end end def save return false unless valid? KEYS.each do |key| - value = instance_variable_get("@#{key}") + next unless instance_variable_defined?("@#{key}") - if UPLOAD_KEYS.include?(key) && !value.nil? - upload = SiteUpload.where(var: key).first_or_initialize(var: key) - upload.update(file: value) + if UPLOAD_KEYS.include?(key) + public_send(key).save else setting = Setting.where(var: key).first_or_initialize(var: key) - setting.update(value: typecast_value(key, value)) + setting.update(value: typecast_value(key, instance_variable_get("@#{key}"))) end end end private - def initialize_attributes - KEYS.each do |key| - instance_variable_set("@#{key}", Setting.public_send(key)) if instance_variable_get("@#{key}").nil? - end - end - def typecast_value(key, value) if BOOLEAN_KEYS.include?(key) value == '1' diff --git a/app/serializers/rest/extended_description_serializer.rb b/app/serializers/rest/extended_description_serializer.rb index 0c3649033..c0fa3450d 100644 --- a/app/serializers/rest/extended_description_serializer.rb +++ b/app/serializers/rest/extended_description_serializer.rb @@ -8,6 +8,16 @@ class REST::ExtendedDescriptionSerializer < ActiveModel::Serializer end def content - object.text + if object.text.present? + markdown.render(object.text) + else + '' + end + end + + private + + def markdown + @markdown ||= Redcarpet::Markdown.new(Redcarpet::Render::HTML) end end diff --git a/app/views/admin/settings/about/show.html.haml b/app/views/admin/settings/about/show.html.haml new file mode 100644 index 000000000..366d213f6 --- /dev/null +++ b/app/views/admin/settings/about/show.html.haml @@ -0,0 +1,33 @@ +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + +- content_for :page_title do + = t('admin.settings.about.title') + +- content_for :heading do + %h2= t('admin.settings.title') + = render partial: 'admin/settings/shared/links' + += simple_form_for @admin_settings, url: admin_settings_about_path, html: { method: :patch } do |f| + = render 'shared/error_messages', object: @admin_settings + + %p.lead= t('admin.settings.about.preamble') + + .fields-group + = f.input :site_extended_description, wrapper: :with_block_label, as: :text, input_html: { rows: 8 } + + %p.hint + = t 'admin.settings.about.rules_hint' + = link_to t('admin.settings.about.manage_rules'), admin_rules_path + + .fields-row + .fields-row__column.fields-row__column-6.fields-group + = f.input :show_domain_blocks, wrapper: :with_label, collection: %i(disabled users all), label_method: lambda { |value| t("admin.settings.domain_blocks.#{value}") }, include_blank: false, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li' + .fields-row__column.fields-row__column-6.fields-group + = f.input :show_domain_blocks_rationale, wrapper: :with_label, collection: %i(disabled users all), label_method: lambda { |value| t("admin.settings.domain_blocks.#{value}") }, include_blank: false, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li' + + .fields-group + = f.input :site_terms, wrapper: :with_block_label, as: :text, input_html: { rows: 8 } + + .actions + = f.button :button, t('generic.save_changes'), type: :submit diff --git a/app/views/admin/settings/appearance/show.html.haml b/app/views/admin/settings/appearance/show.html.haml new file mode 100644 index 000000000..d321c4b04 --- /dev/null +++ b/app/views/admin/settings/appearance/show.html.haml @@ -0,0 +1,34 @@ +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + +- content_for :page_title do + = t('admin.settings.appearance.title') + +- content_for :heading do + %h2= t('admin.settings.title') + = render partial: 'admin/settings/shared/links' + += simple_form_for @admin_settings, url: admin_settings_appearance_path, html: { method: :patch } do |f| + = render 'shared/error_messages', object: @admin_settings + + %p.lead= t('admin.settings.appearance.preamble') + + .fields-group + = f.input :theme, collection: Themes.instance.names, label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false + + .fields-group + = f.input :custom_css, wrapper: :with_block_label, as: :text, input_html: { rows: 8 } + + .fields-row + .fields-row__column.fields-row__column-6.fields-group + = f.input :mascot, as: :file, wrapper: :with_block_label + + .fields-row__column.fields-row__column-6.fields-group + - if @admin_settings.mascot.persisted? + = image_tag @admin_settings.mascot.file.url, class: 'fields-group__thumbnail' + = link_to admin_site_upload_path(@admin_settings.mascot), data: { method: :delete }, class: 'link-button link-button--destructive' do + = fa_icon 'trash fw' + = t('admin.site_uploads.delete') + + .actions + = f.button :button, t('generic.save_changes'), type: :submit diff --git a/app/views/admin/settings/branding/show.html.haml b/app/views/admin/settings/branding/show.html.haml new file mode 100644 index 000000000..74a6fadf9 --- /dev/null +++ b/app/views/admin/settings/branding/show.html.haml @@ -0,0 +1,39 @@ +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + +- content_for :page_title do + = t('admin.settings.branding.title') + +- content_for :heading do + %h2= t('admin.settings.title') + = render partial: 'admin/settings/shared/links' + += simple_form_for @admin_settings, url: admin_settings_branding_path, html: { method: :patch } do |f| + = render 'shared/error_messages', object: @admin_settings + + %p.lead= t('admin.settings.branding.preamble') + + .fields-group + = f.input :site_title, wrapper: :with_label + + .fields-row + .fields-row__column.fields-row__column-6.fields-group + = f.input :site_contact_username, wrapper: :with_label + .fields-row__column.fields-row__column-6.fields-group + = f.input :site_contact_email, wrapper: :with_label + + .fields-group + = f.input :site_short_description, wrapper: :with_block_label, as: :text, input_html: { rows: 2, maxlength: 200 } + + .fields-row + .fields-row__column.fields-row__column-6.fields-group + = f.input :thumbnail, as: :file, wrapper: :with_block_label + .fields-row__column.fields-row__column-6.fields-group + - if @admin_settings.thumbnail.persisted? + = image_tag @admin_settings.thumbnail.file.url(:'@1x'), class: 'fields-group__thumbnail' + = link_to admin_site_upload_path(@admin_settings.thumbnail), data: { method: :delete }, class: 'link-button link-button--destructive' do + = fa_icon 'trash fw' + = t('admin.site_uploads.delete') + + .actions + = f.button :button, t('generic.save_changes'), type: :submit diff --git a/app/views/admin/settings/content_retention/show.html.haml b/app/views/admin/settings/content_retention/show.html.haml new file mode 100644 index 000000000..36856127f --- /dev/null +++ b/app/views/admin/settings/content_retention/show.html.haml @@ -0,0 +1,22 @@ +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + +- content_for :page_title do + = t('admin.settings.content_retention.title') + +- content_for :heading do + %h2= t('admin.settings.title') + = render partial: 'admin/settings/shared/links' + += simple_form_for @admin_settings, url: admin_settings_content_retention_path, html: { method: :patch } do |f| + = render 'shared/error_messages', object: @admin_settings + + %p.lead= t('admin.settings.content_retention.preamble') + + .fields-group + = f.input :media_cache_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' } + = f.input :content_cache_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' } + = f.input :backups_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' } + + .actions + = f.button :button, t('generic.save_changes'), type: :submit diff --git a/app/views/admin/settings/discovery/show.html.haml b/app/views/admin/settings/discovery/show.html.haml new file mode 100644 index 000000000..e63c853fb --- /dev/null +++ b/app/views/admin/settings/discovery/show.html.haml @@ -0,0 +1,40 @@ +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + +- content_for :page_title do + = t('admin.settings.discovery.title') + +- content_for :heading do + %h2= t('admin.settings.title') + = render partial: 'admin/settings/shared/links' + += simple_form_for @admin_settings, url: admin_settings_discovery_path, html: { method: :patch } do |f| + = render 'shared/error_messages', object: @admin_settings + + %p.lead= t('admin.settings.discovery.preamble') + + %h4= t('admin.settings.discovery.trends') + + .fields-group + = f.input :trends, as: :boolean, wrapper: :with_label + + .fields-group + = f.input :trendable_by_default, as: :boolean, wrapper: :with_label + + %h4= t('admin.settings.discovery.public_timelines') + + .fields-group + = f.input :timeline_preview, as: :boolean, wrapper: :with_label + + %h4= t('admin.settings.discovery.follow_recommendations') + + .fields-group + = f.input :bootstrap_timeline_accounts, wrapper: :with_block_label + + %h4= t('admin.settings.discovery.profile_directory') + + .fields-group + = f.input :profile_directory, as: :boolean, wrapper: :with_label + + .actions + = f.button :button, t('generic.save_changes'), type: :submit diff --git a/app/views/admin/settings/edit.html.haml b/app/views/admin/settings/edit.html.haml deleted file mode 100644 index 15b1a2498..000000000 --- a/app/views/admin/settings/edit.html.haml +++ /dev/null @@ -1,102 +0,0 @@ -- content_for :header_tags do - = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' - -- content_for :page_title do - = t('admin.settings.title') - - - content_for :heading_actions do - = button_tag t('generic.save_changes'), class: 'button', form: 'edit_admin' - -= simple_form_for @admin_settings, url: admin_settings_path, html: { method: :patch, id: 'edit_admin' } do |f| - = render 'shared/error_messages', object: @admin_settings - - .fields-group - = f.input :site_title, wrapper: :with_label, label: t('admin.settings.site_title') - - .fields-row - .fields-row__column.fields-row__column-6.fields-group - = f.input :theme, collection: Themes.instance.names, label: t('simple_form.labels.defaults.setting_theme'), label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false - .fields-row__column.fields-row__column-6.fields-group - = f.input :registrations_mode, collection: %w(open approved none), wrapper: :with_label, label: t('admin.settings.registrations_mode.title'), include_blank: false, label_method: lambda { |mode| I18n.t("admin.settings.registrations_mode.modes.#{mode}") } - - .fields-row - .fields-row__column.fields-row__column-6.fields-group - = f.input :site_contact_username, wrapper: :with_label, label: t('admin.settings.contact_information.username') - .fields-row__column.fields-row__column-6.fields-group - = f.input :site_contact_email, wrapper: :with_label, label: t('admin.settings.contact_information.email') - - .fields-group - = f.input :site_short_description, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_short_description.title'), hint: t('admin.settings.site_short_description.desc_html'), input_html: { rows: 2 } - - .fields-group - = f.input :site_description, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_description.title'), hint: t('admin.settings.site_description.desc_html'), input_html: { rows: 2 } - - .fields-row - .fields-row__column.fields-row__column-6.fields-group - = f.input :thumbnail, as: :file, wrapper: :with_block_label, label: t('admin.settings.thumbnail.title'), hint: site_upload_delete_hint(t('admin.settings.thumbnail.desc_html'), :thumbnail) - - .fields-row - .fields-row__column.fields-row__column-6.fields-group - = f.input :mascot, as: :file, wrapper: :with_block_label, label: t('admin.settings.mascot.title'), hint: site_upload_delete_hint(t('admin.settings.mascot.desc_html'), :mascot) - - %hr.spacer/ - - .fields-group - = f.input :require_invite_text, as: :boolean, wrapper: :with_label, label: t('admin.settings.registrations.require_invite_text.title'), hint: t('admin.settings.registrations.require_invite_text.desc_html'), disabled: !approved_registrations? - - %hr.spacer/ - - .fields-group - = f.input :bootstrap_timeline_accounts, wrapper: :with_block_label, label: t('admin.settings.bootstrap_timeline_accounts.title'), hint: t('admin.settings.bootstrap_timeline_accounts.desc_html') - - %hr.spacer/ - - - unless whitelist_mode? - .fields-group - = f.input :timeline_preview, as: :boolean, wrapper: :with_label, label: t('admin.settings.timeline_preview.title'), hint: t('admin.settings.timeline_preview.desc_html') - - - unless whitelist_mode? - .fields-group - = f.input :activity_api_enabled, as: :boolean, wrapper: :with_label, label: t('admin.settings.activity_api_enabled.title'), hint: t('admin.settings.activity_api_enabled.desc_html'), recommended: true - - .fields-group - = f.input :peers_api_enabled, as: :boolean, wrapper: :with_label, label: t('admin.settings.peers_api_enabled.title'), hint: t('admin.settings.peers_api_enabled.desc_html'), recommended: true - - .fields-group - = f.input :preview_sensitive_media, as: :boolean, wrapper: :with_label, label: t('admin.settings.preview_sensitive_media.title'), hint: t('admin.settings.preview_sensitive_media.desc_html') - - .fields-group - = f.input :profile_directory, as: :boolean, wrapper: :with_label, label: t('admin.settings.profile_directory.title'), hint: t('admin.settings.profile_directory.desc_html') - - .fields-group - = f.input :trends, as: :boolean, wrapper: :with_label, label: t('admin.settings.trends.title'), hint: t('admin.settings.trends.desc_html') - - .fields-group - = f.input :trendable_by_default, as: :boolean, wrapper: :with_label, label: t('admin.settings.trendable_by_default.title'), hint: t('admin.settings.trendable_by_default.desc_html'), recommended: :not_recommended - - .fields-group - = f.input :noindex, as: :boolean, wrapper: :with_label, label: t('admin.settings.default_noindex.title'), hint: t('admin.settings.default_noindex.desc_html') - - %hr.spacer/ - - .fields-row - .fields-row__column.fields-row__column-6.fields-group - = f.input :show_domain_blocks, wrapper: :with_label, collection: %i(disabled users all), label: t('admin.settings.domain_blocks.title'), label_method: lambda { |value| t("admin.settings.domain_blocks.#{value}") }, include_blank: false, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li' - .fields-row__column.fields-row__column-6.fields-group - = f.input :show_domain_blocks_rationale, wrapper: :with_label, collection: %i(disabled users all), label: t('admin.settings.domain_blocks_rationale.title'), label_method: lambda { |value| t("admin.settings.domain_blocks.#{value}") }, include_blank: false, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li' - - .fields-group - = f.input :site_extended_description, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_description_extended.title'), hint: t('admin.settings.site_description_extended.desc_html'), input_html: { rows: 8 } unless whitelist_mode? - = f.input :closed_registrations_message, as: :text, wrapper: :with_block_label, label: t('admin.settings.registrations.closed_message.title'), hint: t('admin.settings.registrations.closed_message.desc_html'), input_html: { rows: 8 } - = f.input :site_terms, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_terms.title'), hint: t('admin.settings.site_terms.desc_html'), input_html: { rows: 8 } - = f.input :custom_css, wrapper: :with_block_label, as: :text, input_html: { rows: 8 }, label: t('admin.settings.custom_css.title'), hint: t('admin.settings.custom_css.desc_html') - - %hr.spacer/ - - .fields-group - = f.input :media_cache_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' } - = f.input :content_cache_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' } - = f.input :backups_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' } - - .actions - = f.button :button, t('generic.save_changes'), type: :submit diff --git a/app/views/admin/settings/registrations/show.html.haml b/app/views/admin/settings/registrations/show.html.haml new file mode 100644 index 000000000..0129332d7 --- /dev/null +++ b/app/views/admin/settings/registrations/show.html.haml @@ -0,0 +1,27 @@ +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + +- content_for :page_title do + = t('admin.settings.registrations.title') + +- content_for :heading do + %h2= t('admin.settings.title') + = render partial: 'admin/settings/shared/links' + += simple_form_for @admin_settings, url: admin_settings_branding_path, html: { method: :patch } do |f| + = render 'shared/error_messages', object: @admin_settings + + %p.lead= t('admin.settings.registrations.preamble') + + .fields-row + .fields-row__column.fields-row__column-6.fields-group + = f.input :registrations_mode, collection: %w(open approved none), wrapper: :with_label, include_blank: false, label_method: lambda { |mode| I18n.t("admin.settings.registrations_mode.modes.#{mode}") } + + .fields-row__column.fields-row__column-6.fields-group + = f.input :require_invite_text, as: :boolean, wrapper: :with_label, disabled: !approved_registrations? + + .fields-group + = f.input :closed_registrations_message, as: :text, wrapper: :with_block_label, input_html: { rows: 2 } + + .actions + = f.button :button, t('generic.save_changes'), type: :submit diff --git a/app/views/admin/settings/shared/_links.html.haml b/app/views/admin/settings/shared/_links.html.haml new file mode 100644 index 000000000..1294c26ce --- /dev/null +++ b/app/views/admin/settings/shared/_links.html.haml @@ -0,0 +1,8 @@ +.content__heading__tabs + = render_navigation renderer: :links do |primary| + - primary.item :branding, safe_join([fa_icon('pencil fw'), t('admin.settings.branding.title')]), admin_settings_branding_path + - primary.item :about, safe_join([fa_icon('file-text fw'), t('admin.settings.about.title')]), admin_settings_about_path + - primary.item :registrations, safe_join([fa_icon('users fw'), t('admin.settings.registrations.title')]), admin_settings_registrations_path + - primary.item :discovery, safe_join([fa_icon('search fw'), t('admin.settings.discovery.title')]), admin_settings_discovery_path + - primary.item :content_retention, safe_join([fa_icon('history fw'), t('admin.settings.content_retention.title')]), admin_settings_content_retention_path + - primary.item :appearance, safe_join([fa_icon('desktop fw'), t('admin.settings.appearance.title')]), admin_settings_appearance_path diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml index e577b9803..59021ad88 100644 --- a/app/views/layouts/admin.html.haml +++ b/app/views/layouts/admin.html.haml @@ -22,15 +22,16 @@ .content-wrapper .content - .content-heading + .content__heading - if content_for?(:heading) = yield :heading - else - %h2= yield :page_title + .content__heading__row + %h2= yield :page_title - - if :heading_actions - .content-heading-actions - = yield :heading_actions + - if content_for?(:heading_actions) + .content__heading__actions + = yield :heading_actions = render 'application/flashes' diff --git a/config/locales/en.yml b/config/locales/en.yml index 412178ca3..70850d478 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -667,79 +667,40 @@ en: empty: No server rules have been defined yet. title: Server rules settings: - activity_api_enabled: - desc_html: Counts of locally published posts, active users, and new registrations in weekly buckets - title: Publish aggregate statistics about user activity in the API - bootstrap_timeline_accounts: - desc_html: Separate multiple usernames by comma. These accounts will be guaranteed to be shown in follow recommendations - title: Recommend these accounts to new users - contact_information: - email: Business e-mail - username: Contact username - custom_css: - desc_html: Modify the look with CSS loaded on every page - title: Custom CSS - default_noindex: - desc_html: Affects all users who have not changed this setting themselves - title: Opt users out of search engine indexing by default + about: + manage_rules: Manage server rules + preamble: Provide in-depth information about how the server is operated, moderated, funded. + rules_hint: There is a dedicated area for rules that your users are expected to adhere to. + title: About + appearance: + preamble: Customize Mastodon's web interface. + title: Appearance + branding: + preamble: Your server's branding differentiates it from other servers in the network. This information may be displayed across a variety of environments, such as Mastodon's web interface, native applications, in link previews on other websites and within messaging apps, and so on. For this reason, it is best to keep this information clear, short and concise. + title: Branding + content_retention: + preamble: Control how user-generated content is stored in Mastodon. + title: Content retention + discovery: + follow_recommendations: Follow recommendations + preamble: Surfacing interesting content is instrumental in onboarding new users who may not know anyone Mastodon. Control how various discovery features work on your server. + profile_directory: Profile directory + public_timelines: Public timelines + title: Discovery + trends: Trends domain_blocks: all: To everyone disabled: To no one - title: Show domain blocks users: To logged-in local users - domain_blocks_rationale: - title: Show rationale - mascot: - desc_html: Displayed on multiple pages. At least 293×205px recommended. When not set, falls back to default mascot - title: Mascot image - peers_api_enabled: - desc_html: Domain names this server has encountered in the fediverse - title: Publish list of discovered servers in the API - preview_sensitive_media: - desc_html: Link previews on other websites will display a thumbnail even if the media is marked as sensitive - title: Show sensitive media in OpenGraph previews - profile_directory: - desc_html: Allow users to be discoverable - title: Enable profile directory registrations: - closed_message: - desc_html: Displayed on frontpage when registrations are closed. You can use HTML tags - title: Closed registration message - require_invite_text: - desc_html: When registrations require manual approval, make the “Why do you want to join?” text input mandatory rather than optional - title: Require new users to enter a reason to join + preamble: Control who can create an account on your server. + title: Registrations registrations_mode: modes: approved: Approval required for sign up none: Nobody can sign up open: Anyone can sign up - title: Registrations mode - site_description: - desc_html: Introductory paragraph on the API. Describe what makes this Mastodon server special and anything else important. You can use HTML tags, in particular <a> and <em>. - title: Server description - site_description_extended: - desc_html: A good place for your code of conduct, rules, guidelines and other things that set your server apart. You can use HTML tags - title: Custom extended information - site_short_description: - desc_html: Displayed in sidebar and meta tags. Describe what Mastodon is and what makes this server special in a single paragraph. - title: Short server description - site_terms: - desc_html: You can write your own privacy policy. You can use HTML tags - title: Custom privacy policy - site_title: Server name - thumbnail: - desc_html: Used for previews via OpenGraph and API. 1200x630px recommended - title: Server thumbnail - timeline_preview: - desc_html: Display link to public timeline on landing page and allow API access to the public timeline without authentication - title: Allow unauthenticated access to public timeline - title: Site settings - trendable_by_default: - desc_html: Specific trending content can still be explicitly disallowed - title: Allow trends without prior review - trends: - desc_html: Publicly display previously reviewed content that is currently trending - title: Trends + title: Server Settings site_uploads: delete: Delete uploaded file destroyed_msg: Site upload successfully deleted! diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml index db5b45e41..64281d7b7 100644 --- a/config/locales/simple_form.en.yml +++ b/config/locales/simple_form.en.yml @@ -75,8 +75,25 @@ en: warn: Hide the filtered content behind a warning mentioning the filter's title form_admin_settings: backups_retention_period: Keep generated user archives for the specified number of days. + bootstrap_timeline_accounts: These accounts will be pinned to the top of new users' follow recommendations. + closed_registrations_message: Displayed when sign-ups are closed content_cache_retention_period: Posts from other servers will be deleted after the specified number of days when set to a positive value. This may be irreversible. + custom_css: You can apply custom styles on the web version of Mastodon. + mascot: Overrides the illustration in the advanced web interface. media_cache_retention_period: Downloaded media files will be deleted after the specified number of days when set to a positive value, and re-downloaded on demand. + profile_directory: The profile directory lists all users who have opted-in to be discoverable. + require_invite_text: When sign-ups require manual approval, make the “Why do you want to join?” text input mandatory rather than optional + site_contact_email: How people can reach you for legal or support inquiries. + site_contact_username: How people can reach you on Mastodon. + site_extended_description: Any additional information that may be useful to visitors and your users. Can be structured with Markdown syntax. + site_short_description: A short description to help uniquely identify your server. Who is running it, who is it for? + site_terms: Use your own privacy policy or leave blank to use the default. Can be structured with Markdown syntax. + site_title: How people may refer to your server besides its domain name. + theme: Theme that logged out visitors and new users see. + thumbnail: A roughly 2:1 image displayed alongside your server information. + timeline_preview: Logged out visitors will be able to browse the most recent public posts available on the server. + trendable_by_default: Skip manual review of trending content. Individual items can still be removed from trends after the fact. + trends: Trends show which posts, hashtags and news stories are gaining traction on your server. form_challenge: current_password: You are entering a secure area imports: @@ -213,8 +230,28 @@ en: warn: Hide with a warning form_admin_settings: backups_retention_period: User archive retention period + bootstrap_timeline_accounts: Always recommend these accounts to new users + closed_registrations_message: Custom message when sign-ups are not available content_cache_retention_period: Content cache retention period + custom_css: Custom CSS + mascot: Custom mascot (legacy) media_cache_retention_period: Media cache retention period + profile_directory: Enable profile directory + registrations_mode: Who can sign-up + require_invite_text: Require a reason to join + show_domain_blocks: Show domain blocks + show_domain_blocks_rationale: Show why domains were blocked + site_contact_email: Contact e-mail + site_contact_username: Contact username + site_extended_description: Extended description + site_short_description: Server description + site_terms: Privacy Policy + site_title: Server name + theme: Default theme + thumbnail: Server thumbnail + timeline_preview: Allow unauthenticated access to public timelines + trendable_by_default: Allow trends without prior review + trends: Enable trends interactions: must_be_follower: Block notifications from non-followers must_be_following: Block notifications from people you don't follow diff --git a/config/navigation.rb b/config/navigation.rb index 706de0471..e901fb932 100644 --- a/config/navigation.rb +++ b/config/navigation.rb @@ -52,7 +52,7 @@ SimpleNavigation::Configuration.run do |navigation| n.item :admin, safe_join([fa_icon('cogs fw'), t('admin.title')]), nil, if: -> { current_user.can?(:view_dashboard, :manage_settings, :manage_rules, :manage_announcements, :manage_custom_emojis, :manage_webhooks, :manage_federation) } do |s| s.item :dashboard, safe_join([fa_icon('tachometer fw'), t('admin.dashboard.title')]), admin_dashboard_path, if: -> { current_user.can?(:view_dashboard) } - s.item :settings, safe_join([fa_icon('cogs fw'), t('admin.settings.title')]), edit_admin_settings_path, if: -> { current_user.can?(:manage_settings) }, highlights_on: %r{/admin/settings} + s.item :settings, safe_join([fa_icon('cogs fw'), t('admin.settings.title')]), admin_settings_path, if: -> { current_user.can?(:manage_settings) }, highlights_on: %r{/admin/settings} s.item :rules, safe_join([fa_icon('gavel fw'), t('admin.rules.title')]), admin_rules_path, highlights_on: %r{/admin/rules}, if: -> { current_user.can?(:manage_rules) } s.item :roles, safe_join([fa_icon('vcard fw'), t('admin.roles.title')]), admin_roles_path, highlights_on: %r{/admin/roles}, if: -> { current_user.can?(:manage_roles) } s.item :announcements, safe_join([fa_icon('bullhorn fw'), t('admin.announcements.title')]), admin_announcements_path, highlights_on: %r{/admin/announcements}, if: -> { current_user.can?(:manage_announcements) } diff --git a/config/routes.rb b/config/routes.rb index 1ed585f19..b44479e77 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -241,7 +241,18 @@ Rails.application.routes.draw do end end - resource :settings, only: [:edit, :update] + get '/settings', to: redirect('/admin/settings/branding') + get '/settings/edit', to: redirect('/admin/settings/branding') + + namespace :settings do + resource :branding, only: [:show, :update], controller: 'branding' + resource :registrations, only: [:show, :update], controller: 'registrations' + resource :content_retention, only: [:show, :update], controller: 'content_retention' + resource :about, only: [:show, :update], controller: 'about' + resource :appearance, only: [:show, :update], controller: 'appearance' + resource :discovery, only: [:show, :update], controller: 'discovery' + end + resources :site_uploads, only: [:destroy] resources :invites, only: [:index, :create, :destroy] do diff --git a/spec/controllers/admin/settings/branding_controller_spec.rb b/spec/controllers/admin/settings/branding_controller_spec.rb new file mode 100644 index 000000000..ee1c441bc --- /dev/null +++ b/spec/controllers/admin/settings/branding_controller_spec.rb @@ -0,0 +1,53 @@ +# frozen_string_literal: true + +require 'rails_helper' + +RSpec.describe Admin::Settings::BrandingController, type: :controller do + render_views + + describe 'When signed in as an admin' do + before do + sign_in Fabricate(:user, role: UserRole.find_by(name: 'Admin')), scope: :user + end + + describe 'GET #show' do + it 'returns http success' do + get :show + + expect(response).to have_http_status(200) + end + end + + describe 'PUT #update' do + before do + allow_any_instance_of(Form::AdminSettings).to receive(:valid?).and_return(true) + end + + around do |example| + before = Setting.site_short_description + Setting.site_short_description = nil + example.run + Setting.site_short_description = before + Setting.new_setting_key = nil + end + + it 'cannot create a setting value for a non-admin key' do + expect(Setting.new_setting_key).to be_blank + + patch :update, params: { form_admin_settings: { new_setting_key: 'New key value' } } + + expect(response).to redirect_to(admin_settings_branding_path) + expect(Setting.new_setting_key).to be_nil + end + + it 'creates a settings value that didnt exist before for eligible key' do + expect(Setting.site_short_description).to be_blank + + patch :update, params: { form_admin_settings: { site_short_description: 'New key value' } } + + expect(response).to redirect_to(admin_settings_branding_path) + expect(Setting.site_short_description).to eq 'New key value' + end + end + end +end diff --git a/spec/controllers/admin/settings_controller_spec.rb b/spec/controllers/admin/settings_controller_spec.rb deleted file mode 100644 index 46749f76c..000000000 --- a/spec/controllers/admin/settings_controller_spec.rb +++ /dev/null @@ -1,71 +0,0 @@ -# frozen_string_literal: true - -require 'rails_helper' - -RSpec.describe Admin::SettingsController, type: :controller do - render_views - - describe 'When signed in as an admin' do - before do - sign_in Fabricate(:user, role: UserRole.find_by(name: 'Admin')), scope: :user - end - - describe 'GET #edit' do - it 'returns http success' do - get :edit - - expect(response).to have_http_status(200) - end - end - - describe 'PUT #update' do - before do - allow_any_instance_of(Form::AdminSettings).to receive(:valid?).and_return(true) - end - - describe 'for a record that doesnt exist' do - around do |example| - before = Setting.site_extended_description - Setting.site_extended_description = nil - example.run - Setting.site_extended_description = before - Setting.new_setting_key = nil - end - - it 'cannot create a setting value for a non-admin key' do - expect(Setting.new_setting_key).to be_blank - - patch :update, params: { form_admin_settings: { new_setting_key: 'New key value' } } - - expect(response).to redirect_to(edit_admin_settings_path) - expect(Setting.new_setting_key).to be_nil - end - - it 'creates a settings value that didnt exist before for eligible key' do - expect(Setting.site_extended_description).to be_blank - - patch :update, params: { form_admin_settings: { site_extended_description: 'New key value' } } - - expect(response).to redirect_to(edit_admin_settings_path) - expect(Setting.site_extended_description).to eq 'New key value' - end - end - - context do - around do |example| - site_title = Setting.site_title - example.run - Setting.site_title = site_title - end - - it 'updates a settings value' do - Setting.site_title = 'Original' - patch :update, params: { form_admin_settings: { site_title: 'New title' } } - - expect(response).to redirect_to(edit_admin_settings_path) - expect(Setting.site_title).to eq 'New title' - end - end - end - end -end -- cgit From 56efa8d22f041ca87efdfb2e95e80d213e72dde9 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 22 Oct 2022 23:15:14 +0200 Subject: Fix reply not opening compose page on certain screen sizes in web UI (#19417) Fix ellipsis next to icons on navigation panel on some browsers --- app/javascript/mastodon/actions/compose.js | 4 +--- app/javascript/styles/mastodon/components.scss | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 0cfc1868e..42d4ad8df 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -79,10 +79,8 @@ const messages = defineMessages({ uploadErrorPoll: { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' }, }); -const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 1); - export const ensureComposeIsVisible = (getState, routerHistory) => { - if (!getState().getIn(['compose', 'mounted']) && window.innerWidth < COMPOSE_PANEL_BREAKPOINT) { + if (!getState().getIn(['compose', 'mounted'])) { routerHistory.push('/publish'); } }; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 5d0ff8536..107a4e586 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3176,7 +3176,6 @@ $ui-header-height: 55px; padding: 15px; text-decoration: none; overflow: hidden; - text-overflow: ellipsis; white-space: nowrap; &:hover, -- cgit From a43a8237681187f6e56524aa3effcfc998a877de Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 22 Oct 2022 23:18:32 +0200 Subject: Add error boundary around routes in web UI (#19412) * Add error boundary around routes in web UI * Update app/javascript/mastodon/features/ui/util/react_router_helpers.js Co-authored-by: Yamagishi Kazutoshi * Update app/javascript/mastodon/features/ui/util/react_router_helpers.js Co-authored-by: Yamagishi Kazutoshi * Update app/javascript/mastodon/features/ui/components/bundle_column_error.js Co-authored-by: Yamagishi Kazutoshi Co-authored-by: Yamagishi Kazutoshi --- .../features/ui/components/bundle_column_error.js | 157 +++++++++++++++++---- app/javascript/mastodon/features/ui/index.js | 6 +- .../features/ui/util/react_router_helpers.js | 34 ++++- app/javascript/styles/mastodon/components.scss | 53 ++++++- 4 files changed, 219 insertions(+), 31 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/ui/components/bundle_column_error.js b/app/javascript/mastodon/features/ui/components/bundle_column_error.js index ab6d4aa44..dfe970ad0 100644 --- a/app/javascript/mastodon/features/ui/components/bundle_column_error.js +++ b/app/javascript/mastodon/features/ui/components/bundle_column_error.js @@ -1,44 +1,155 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; +import { injectIntl, FormattedMessage } from 'react-intl'; import Column from 'mastodon/components/column'; -import ColumnHeader from 'mastodon/components/column_header'; -import IconButton from 'mastodon/components/icon_button'; +import Button from 'mastodon/components/button'; import { Helmet } from 'react-helmet'; +import { Link } from 'react-router-dom'; +import classNames from 'classnames'; +import { autoPlayGif } from 'mastodon/initial_state'; -const messages = defineMessages({ - title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' }, - body: { id: 'bundle_column_error.body', defaultMessage: 'Something went wrong while loading this component.' }, - retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' }, -}); +class GIF extends React.PureComponent { + static propTypes = { + src: PropTypes.string.isRequired, + staticSrc: PropTypes.string.isRequired, + className: PropTypes.string, + animate: PropTypes.bool, + }; + + static defaultProps = { + animate: autoPlayGif, + }; + + state = { + hovering: false, + }; + + handleMouseEnter = () => { + const { animate } = this.props; + + if (!animate) { + this.setState({ hovering: true }); + } + } + + handleMouseLeave = () => { + const { animate } = this.props; + + if (!animate) { + this.setState({ hovering: false }); + } + } + + render () { + const { src, staticSrc, className, animate } = this.props; + const { hovering } = this.state; + + return ( + + ); + } + +} + +class CopyButton extends React.PureComponent { + + static propTypes = { + children: PropTypes.node.isRequired, + value: PropTypes.string.isRequired, + }; + + state = { + copied: false, + }; + + handleClick = () => { + const { value } = this.props; + navigator.clipboard.writeText(value); + this.setState({ copied: true }); + this.timeout = setTimeout(() => this.setState({ copied: false }), 700); + } + + componentWillUnmount () { + if (this.timeout) clearTimeout(this.timeout); + } + + render () { + const { children } = this.props; + const { copied } = this.state; + + return ( + + ); + } + +} + +export default @injectIntl class BundleColumnError extends React.PureComponent { static propTypes = { - onRetry: PropTypes.func.isRequired, + errorType: PropTypes.oneOf(['routing', 'network', 'error']), + onRetry: PropTypes.func, intl: PropTypes.object.isRequired, multiColumn: PropTypes.bool, - } + stacktrace: PropTypes.string, + }; + + static defaultProps = { + errorType: 'routing', + }; handleRetry = () => { - this.props.onRetry(); + const { onRetry } = this.props; + + if (onRetry) { + onRetry(); + } } render () { - const { multiColumn, intl: { formatMessage } } = this.props; + const { errorType, multiColumn, stacktrace } = this.props; - return ( - - + let title, body; + switch(errorType) { + case 'routing': + title = ; + body = ; + break; + case 'network': + title = ; + body = ; + break; + case 'error': + title = ; + body = ; + break; + } + + return ( +
- - {formatMessage(messages.body)} + + +
+

{title}

+

{body}

+ +
+ {errorType === 'network' && } + {errorType === 'error' && } + +
+
@@ -49,5 +160,3 @@ class BundleColumnError extends React.PureComponent { } } - -export default injectIntl(BundleColumnError); diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 531747cae..7cda5e106 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -3,7 +3,7 @@ import React from 'react'; import { HotKeys } from 'react-hotkeys'; import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; -import { Redirect, withRouter } from 'react-router-dom'; +import { Redirect, Route, withRouter } from 'react-router-dom'; import PropTypes from 'prop-types'; import NotificationsContainer from './containers/notifications_container'; import LoadingBarContainer from './containers/loading_bar_container'; @@ -18,6 +18,7 @@ import { clearHeight } from '../../actions/height_cache'; import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app'; import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers'; import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers'; +import BundleColumnError from './components/bundle_column_error'; import UploadArea from './components/upload_area'; import ColumnsAreaContainer from './containers/columns_area_container'; import PictureInPicture from 'mastodon/features/picture_in_picture'; @@ -39,7 +40,6 @@ import { HashtagTimeline, Notifications, FollowRequests, - GenericNotFound, FavouritedStatuses, BookmarkedStatuses, ListTimeline, @@ -219,7 +219,7 @@ class SwitchingColumnsArea extends React.PureComponent { - + ); diff --git a/app/javascript/mastodon/features/ui/util/react_router_helpers.js b/app/javascript/mastodon/features/ui/util/react_router_helpers.js index a65d79def..2ee06c3ff 100644 --- a/app/javascript/mastodon/features/ui/util/react_router_helpers.js +++ b/app/javascript/mastodon/features/ui/util/react_router_helpers.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Switch, Route } from 'react-router-dom'; - +import StackTrace from 'stacktrace-js'; import ColumnLoading from '../components/column_loading'; import BundleColumnError from '../components/bundle_column_error'; import BundleContainer from '../containers/bundle_container'; @@ -42,8 +42,38 @@ export class WrappedRoute extends React.Component { componentParams: {}, }; + static getDerivedStateFromError () { + return { + hasError: true, + }; + }; + + state = { + hasError: false, + stacktrace: '', + }; + + componentDidCatch (error) { + StackTrace.fromError(error).then(stackframes => { + this.setState({ stacktrace: error.toString() + '\n' + stackframes.map(frame => frame.toString()).join('\n') }); + }).catch(err => { + console.error(err); + }); + } + renderComponent = ({ match }) => { const { component, content, multiColumn, componentParams } = this.props; + const { hasError, stacktrace } = this.state; + + if (hasError) { + return ( + + ); + } return ( @@ -59,7 +89,7 @@ export class WrappedRoute extends React.Component { } renderError = (props) => { - return ; + return ; } render () { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 107a4e586..afe9f9da9 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -89,6 +89,15 @@ cursor: default; } + &.copyable { + transition: background 300ms linear; + } + + &.copied { + background: $valid-value-color; + transition: none; + } + &::-moz-focus-inner { border: 0; } @@ -2656,7 +2665,8 @@ $ui-header-height: 55px; .column-header, .column-back-button, - .scrollable { + .scrollable, + .error-column { border-radius: 0 !important; } } @@ -4292,7 +4302,6 @@ a.status-card.compact:hover { } .empty-column-indicator, -.error-column, .follow_requests-unlocked_explanation { color: $dark-text-color; background: $ui-base-color; @@ -4330,7 +4339,47 @@ a.status-card.compact:hover { } .error-column { + padding: 20px; + background: $ui-base-color; + border-radius: 4px; + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; flex-direction: column; + cursor: default; + + &__image { + max-width: 350px; + margin-top: -50px; + } + + &__message { + text-align: center; + color: $darker-text-color; + font-size: 15px; + line-height: 22px; + + h1 { + font-size: 28px; + line-height: 33px; + font-weight: 700; + margin-bottom: 15px; + color: $primary-text-color; + } + + p { + max-width: 48ch; + } + + &__actions { + margin-top: 30px; + display: flex; + gap: 10px; + align-items: center; + justify-content: center; + } + } } @keyframes heartbeat { -- cgit From 1fd6460b02d2e73c94e7c6b1fa8fdc4d2ae36241 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 23 Oct 2022 15:58:24 +0200 Subject: Change floating action button to be a button in header in web UI (#19422) - Fix theme color - Fix elephant being too big on error page on small screens - Remove "Follows and Followers" link from navigation panel --- .../features/ui/components/columns_area.js | 26 +++------------ .../mastodon/features/ui/components/header.js | 21 +++++++++--- .../features/ui/components/navigation_panel.js | 1 - app/javascript/mastodon/features/ui/index.js | 2 +- app/javascript/styles/mastodon/components.scss | 39 ++-------------------- app/serializers/manifest_serializer.rb | 2 +- app/views/layouts/application.html.haml | 2 +- 7 files changed, 25 insertions(+), 68 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 9ee6fca43..f4824f045 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -1,9 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { Link } from 'react-router-dom'; import BundleContainer from '../containers/bundle_container'; import ColumnLoading from './column_loading'; import DrawerLoading from './drawer_loading'; @@ -21,10 +19,8 @@ import { ListTimeline, Directory, } from '../../ui/util/async-components'; -import Icon from 'mastodon/components/icon'; import ComposePanel from './compose_panel'; import NavigationPanel from './navigation_panel'; - import { supportsPassiveEvents } from 'detect-passive-events'; import { scrollRight } from '../../../scroll'; @@ -43,22 +39,13 @@ const componentMap = { 'DIRECTORY': Directory, }; -const messages = defineMessages({ - publish: { id: 'compose_form.publish', defaultMessage: 'Publish' }, -}); - -const shouldHideFAB = path => path.match(/^\/statuses\/|^\/@[^/]+\/\d+|^\/publish|^\/explore|^\/getting-started|^\/start/); - -export default @(component => injectIntl(component, { withRef: true })) -class ColumnsArea extends ImmutablePureComponent { +export default class ColumnsArea extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object.isRequired, - identity: PropTypes.object.isRequired, }; static propTypes = { - intl: PropTypes.object.isRequired, columns: ImmutablePropTypes.list.isRequired, isModalOpen: PropTypes.bool.isRequired, singleColumn: PropTypes.bool, @@ -143,17 +130,14 @@ class ColumnsArea extends ImmutablePureComponent { } renderError = (props) => { - return ; + return ; } render () { - const { columns, children, singleColumn, isModalOpen, intl } = this.props; + const { columns, children, singleColumn, isModalOpen } = this.props; const { renderComposePanel } = this.state; - const { signedIn } = this.context.identity; if (singleColumn) { - const floatingActionButton = (!signedIn || shouldHideFAB(this.context.router.history.location.pathname)) ? null : ; - return (
@@ -162,7 +146,7 @@ class ColumnsArea extends ImmutablePureComponent {
-
+
{children}
@@ -172,8 +156,6 @@ class ColumnsArea extends ImmutablePureComponent {
- - {floatingActionButton}
); } diff --git a/app/javascript/mastodon/features/ui/components/header.js b/app/javascript/mastodon/features/ui/components/header.js index c49f48cc9..a1c281315 100644 --- a/app/javascript/mastodon/features/ui/components/header.js +++ b/app/javascript/mastodon/features/ui/components/header.js @@ -1,6 +1,6 @@ import React from 'react'; import Logo from 'mastodon/components/logo'; -import { Link } from 'react-router-dom'; +import { Link, withRouter } from 'react-router-dom'; import { FormattedMessage } from 'react-intl'; import { registrationsOpen, me } from 'mastodon/initial_state'; import Avatar from 'mastodon/components/avatar'; @@ -16,25 +16,36 @@ const Account = connect(state => ({ )); -export default class Header extends React.PureComponent { +export default @withRouter +class Header extends React.PureComponent { static contextTypes = { identity: PropTypes.object, }; + static propTypes = { + location: PropTypes.object, + }; + render () { const { signedIn } = this.context.identity; + const { location } = this.props; let content; if (signedIn) { - content = ; + content = ( + <> + {location.pathname !== '/publish' && } + + + ); } else { content = ( - + <> - + ); } diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index 757ef54ae..10678f7d8 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -84,7 +84,6 @@ class NavigationPanel extends React.Component {
- )} diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 7cda5e106..298f2111d 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -145,7 +145,7 @@ class SwitchingColumnsArea extends React.PureComponent { setRef = c => { if (c) { - this.node = c.getWrappedInstance(); + this.node = c; } } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index afe9f9da9..cca29161a 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2565,30 +2565,6 @@ $ui-header-height: 55px; } } -.floating-action-button { - position: fixed; - display: flex; - justify-content: center; - align-items: center; - width: 3.9375rem; - height: 3.9375rem; - bottom: 1.3125rem; - right: 1.3125rem; - background: darken($ui-highlight-color, 2%); - color: $white; - border-radius: 50%; - font-size: 21px; - line-height: 21px; - text-decoration: none; - box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4); - - &:hover, - &:focus, - &:active { - background: $ui-highlight-color; - } -} - @media screen and (min-width: $no-gap-breakpoint) { .tabs-bar { width: 100%; @@ -2603,7 +2579,6 @@ $ui-header-height: 55px; margin-bottom: 10px; } - .floating-action-button, .tabs-bar__link.optional { display: none; } @@ -2620,10 +2595,6 @@ $ui-header-height: 55px; @media screen and (max-width: $no-gap-breakpoint - 1px) { $sidebar-width: 285px; - .with-fab .scrollable .item-list:last-child { - padding-bottom: 5.25rem; - } - .columns-area__panels__main { width: calc(100% - $sidebar-width); } @@ -4350,6 +4321,7 @@ a.status-card.compact:hover { cursor: default; &__image { + width: 70%; max-width: 350px; margin-top: -50px; } @@ -7270,6 +7242,7 @@ noscript { &__buttons { display: flex; align-items: center; + gap: 8px; padding-top: 55px; overflow: hidden; @@ -7279,14 +7252,6 @@ noscript { box-sizing: content-box; padding: 2px; } - - & > .icon-button { - margin-right: 8px; - } - - .button { - margin: 0 8px; - } } &__name { diff --git a/app/serializers/manifest_serializer.rb b/app/serializers/manifest_serializer.rb index fb7ab563c..5604325be 100644 --- a/app/serializers/manifest_serializer.rb +++ b/app/serializers/manifest_serializer.rb @@ -40,7 +40,7 @@ class ManifestSerializer < ActiveModel::Serializer end def theme_color - '#6364FF' + '#191b22' end def background_color diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 3e50de3fb..52cdce7c6 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -21,7 +21,7 @@ %link{ rel: 'mask-icon', href: asset_pack_path('media/images/logo-symbol-icon.svg'), color: '#6364FF' }/ %link{ rel: 'manifest', href: manifest_path(format: :json) }/ - %meta{ name: 'theme-color', content: '#6364FF' }/ + %meta{ name: 'theme-color', content: '#191b22' }/ %meta{ name: 'apple-mobile-web-app-capable', content: 'yes' }/ %meta{ name: 'apple-itunes-app', content: 'app-id=1571998974' }/ -- cgit From 3ad0a2ae3dcd36e4a9e0be5f72273f9c30df7548 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 23 Oct 2022 23:38:20 +0200 Subject: Fix language dropdown causing zoom on mobile devices in web UI (#19428) --- app/javascript/styles/mastodon/components.scss | 4 ---- app/javascript/styles/mastodon/emoji_picker.scss | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index cca29161a..f6b34b5f3 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4810,10 +4810,6 @@ a.status-card.compact:hover { &:focus { background: lighten($ui-base-color, 4%); } - - @media screen and (max-width: 600px) { - font-size: 16px; - } } .search__icon { diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 24061d2ca..e4ec96d89 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -111,7 +111,7 @@ position: relative; input { - font-size: 14px; + font-size: 16px; font-weight: 400; padding: 7px 9px; padding-right: 25px; -- cgit From fcca781aae609067bc9e43ad4a466ef6d2074bbb Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 25 Oct 2022 18:47:21 +0200 Subject: Change design of translations in web UI (#19453) --- .../mastodon/components/status_content.js | 89 +++++++++++++++------- app/javascript/styles/mastodon/components.scss | 12 ++- 2 files changed, 67 insertions(+), 34 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index ff539268c..5e66c6fb3 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -10,6 +10,43 @@ import { autoPlayGif, languages as preloadedLanguages, translationEnabled } from const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) +class TranslateButton extends React.PureComponent { + + static propTypes = { + translation: ImmutablePropTypes.map, + onClick: PropTypes.func, + }; + + render () { + const { translation, onClick } = this.props; + + if (translation) { + const language = preloadedLanguages.find(lang => lang[0] === translation.get('detected_source_language')); + const languageName = language ? language[2] : translation.get('detected_source_language'); + const provider = translation.get('provider'); + + return ( +
+
+ +
+ + +
+ ); + } + + return ( + + ); + } + +} + export default @injectIntl class StatusContent extends React.PureComponent { @@ -179,8 +216,6 @@ class StatusContent extends React.PureComponent { const renderReadMore = this.props.onClick && status.get('collapsed'); const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']); const renderTranslate = translationEnabled && this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && status.get('language') !== null && intl.locale !== status.get('language'); - const language = preloadedLanguages.find(lang => lang[0] === status.get('language')); - const languageName = language ? language[2] : status.get('language'); const content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') }; const spoilerContent = { __html: status.get('spoilerHtml') }; @@ -191,22 +226,24 @@ class StatusContent extends React.PureComponent { 'status__content--collapsed': renderReadMore, }); - const showThreadButton = ( + const showThreadButton = renderViewThread && ( ); - const readMoreButton = ( + const readMoreButton = renderReadMore && ( ); - const translateButton = ( - + const translateButton = renderTranslate && ( + + ); + + const poll = !!status.get('poll') && ( + ); if (status.get('spoiler_text').length > 0) { @@ -236,35 +273,33 @@ class StatusContent extends React.PureComponent {
- {!hidden && !!status.get('poll') && } - {!hidden && renderTranslate && translateButton} - {renderViewThread && showThreadButton} + {!hidden && poll} + {!hidden && translateButton} + {showThreadButton}
); } else if (this.props.onClick) { - const output = [ -
-
- - {!!status.get('poll') && } - {renderTranslate && translateButton} - {renderViewThread && showThreadButton} -
, - ]; + return ( + <> +
+
- if (renderReadMore) { - output.push(readMoreButton); - } + {poll} + {translateButton} + {showThreadButton} +
- return output; + {readMoreButton} + + ); } else { return (
- {!!status.get('poll') && } - {renderTranslate && translateButton} - {renderViewThread && showThreadButton} + {poll} + {translateButton} + {showThreadButton}
); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index f6b34b5f3..15351d850 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -24,7 +24,7 @@ display: block; font-size: 15px; line-height: 20px; - color: $ui-highlight-color; + color: $highlight-text-color; border: 0; background: transparent; padding: 0; @@ -969,15 +969,13 @@ } } -.status__content__edited-label { - display: block; - cursor: default; +.translate-button { + margin-top: 16px; font-size: 15px; line-height: 20px; - padding: 0; - padding-top: 8px; + display: flex; + justify-content: space-between; color: $dark-text-color; - font-weight: 500; } .status__content__spoiler-link { -- cgit From 0ca29eaa3f762219cacce46059acfa71393533ad Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 25 Oct 2022 19:02:21 +0200 Subject: Change layout of posts in web UI (#19423) --- app/javascript/mastodon/components/account.js | 2 +- app/javascript/mastodon/components/status.js | 14 +- .../mastodon/components/status_action_bar.js | 16 +- .../mastodon/components/status_content.js | 11 - .../features/account/components/featured_tags.js | 2 +- .../mastodon/features/account/components/header.js | 31 +- .../features/compose/components/action_bar.js | 2 +- .../features/compose/components/navigation_bar.js | 2 +- .../features/status/components/action_bar.js | 3 +- .../features/status/components/detailed_status.js | 2 +- .../features/ui/components/actions_modal.js | 28 -- .../mastodon/features/ui/components/boost_modal.js | 11 +- app/javascript/styles/mastodon/components.scss | 424 +++++++-------------- 13 files changed, 193 insertions(+), 355 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index 36429e647..92d14da8b 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -136,7 +136,7 @@ class Account extends ImmutablePureComponent {
-
+
{mute_expires_at} diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 381088be7..3106a3ecd 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -386,6 +386,15 @@ class Status extends ImmutablePureComponent { account = status.get('account'); status = status.get('reblog'); + } else if (showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) { + const display_name_html = { __html: status.getIn(['account', 'display_name_html']) }; + + prepend = ( +
+
+ }} /> +
+ ); } if (pictureInPicture.get('inUse')) { @@ -481,7 +490,7 @@ class Status extends ImmutablePureComponent { } if (account === undefined || account === null) { - statusAvatar = ; + statusAvatar = ; } else { statusAvatar = ; } @@ -501,8 +510,6 @@ class Status extends ImmutablePureComponent { {prepend}
-
-
@@ -522,7 +529,6 @@ class Status extends ImmutablePureComponent { status={status} onClick={this.handleClick} expanded={!status.get('hidden')} - showThread={showThread} onExpandedToggle={this.handleExpandedToggle} onTranslate={this.handleTranslate} collapsable diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index 9e8cadce2..17150524e 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -246,8 +246,9 @@ class StatusActionBar extends ImmutablePureComponent { render () { const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props; + const { signedIn } = this.context.identity; - const anonymousAccess = !me; + const anonymousAccess = !signedIn; const publicStatus = ['public', 'unlisted'].includes(status.get('visibility')); const pinnableStatus = ['public', 'unlisted', 'private'].includes(status.get('visibility')); const mutingConversation = status.get('muted'); @@ -350,24 +351,25 @@ class StatusActionBar extends ImmutablePureComponent { } const shareButton = ('share' in navigator) && publicStatus && ( - + ); const filterButton = this.props.onFilter && ( - + ); return (
- - - + + + + {shareButton} {filterButton} -
+
); } else if (this.props.onClick) { @@ -286,7 +277,6 @@ class StatusContent extends React.PureComponent { {poll} {translateButton} - {showThreadButton}
{readMoreButton} @@ -299,7 +289,6 @@ class StatusContent extends React.PureComponent { {poll} {translateButton} - {showThreadButton}
); } diff --git a/app/javascript/mastodon/features/account/components/featured_tags.js b/app/javascript/mastodon/features/account/components/featured_tags.js index 51be9a609..8194c063a 100644 --- a/app/javascript/mastodon/features/account/components/featured_tags.js +++ b/app/javascript/mastodon/features/account/components/featured_tags.js @@ -41,7 +41,7 @@ class FeaturedTags extends ImmutablePureComponent { name={featuredTag.get('name')} href={featuredTag.get('url')} to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`} - uses={featuredTag.get('statuses_count')} + uses={featuredTag.get('statuses_count') * 1} withGraph={false} description={((featuredTag.get('statuses_count') * 1) > 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)} /> diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index 954cb0ee7..e39f0158e 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -326,25 +326,26 @@ class Header extends ImmutablePureComponent { {!(suspended || hidden) && (
- {fields.size > 0 && ( -
- {fields.map((pair, i) => ( -
-
- -
- {pair.get('verified_at') && } -
-
- ))} -
- )} - {(account.get('id') !== me && signedIn) && } {account.get('note').length > 0 && account.get('note') !== '

' &&
} -
+
+
+
+
{intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' })}
+
+ + {fields.map((pair, i) => ( +
+
+ +
+ {pair.get('verified_at') && } +
+
+ ))} +
diff --git a/app/javascript/mastodon/features/compose/components/action_bar.js b/app/javascript/mastodon/features/compose/components/action_bar.js index 4ff0b7b94..ceed928bf 100644 --- a/app/javascript/mastodon/features/compose/components/action_bar.js +++ b/app/javascript/mastodon/features/compose/components/action_bar.js @@ -56,7 +56,7 @@ class ActionBar extends React.PureComponent { return (
- +
); diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.js b/app/javascript/mastodon/features/compose/components/navigation_bar.js index e6ba7d8b7..372765ca4 100644 --- a/app/javascript/mastodon/features/compose/components/navigation_bar.js +++ b/app/javascript/mastodon/features/compose/components/navigation_bar.js @@ -21,7 +21,7 @@ export default class NavigationBar extends ImmutablePureComponent {
{this.props.account.get('acct')} - +
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js index 2e240c414..a0a6a7894 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.js +++ b/app/javascript/mastodon/features/status/components/action_bar.js @@ -287,9 +287,10 @@ class ActionBar extends React.PureComponent {
- {shareButton}
+ {shareButton} +
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 320a847f7..1a2aab819 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -262,7 +262,7 @@ class DetailedStatus extends ImmutablePureComponent {
-
+
diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.js b/app/javascript/mastodon/features/ui/components/actions_modal.js index 875b2b75d..67be69d43 100644 --- a/app/javascript/mastodon/features/ui/components/actions_modal.js +++ b/app/javascript/mastodon/features/ui/components/actions_modal.js @@ -2,10 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import StatusContent from '../../../components/status_content'; -import Avatar from '../../../components/avatar'; -import RelativeTimestamp from '../../../components/relative_timestamp'; -import DisplayName from '../../../components/display_name'; import IconButton from '../../../components/icon_button'; import classNames from 'classnames'; @@ -38,32 +34,8 @@ export default class ActionsModal extends ImmutablePureComponent { } render () { - const status = this.props.status && ( -
- - - -
- ); - return (
- {status} -
    {this.props.actions.map(this.renderAction)}
diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.js b/app/javascript/mastodon/features/ui/components/boost_modal.js index ab87ee427..d7a6d711e 100644 --- a/app/javascript/mastodon/features/ui/components/boost_modal.js +++ b/app/javascript/mastodon/features/ui/components/boost_modal.js @@ -97,12 +97,11 @@ class BoostModal extends ImmutablePureComponent {
-
-
- - - -
+
+ + + +
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 15351d850..633b9ed70 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -367,7 +367,7 @@ } .compose-form { - padding: 10px; + padding: 15px; &__sensitive-button { padding: 10px; @@ -714,7 +714,7 @@ .compose-form__publish-button-wrapper { overflow: hidden; - padding-top: 10px; + padding-top: 15px; } } } @@ -808,7 +808,7 @@ .reply-indicator__content { position: relative; font-size: 15px; - line-height: 20px; + line-height: 22px; word-wrap: break-word; font-weight: 400; overflow: hidden; @@ -955,12 +955,12 @@ .status__content__read-more-button { display: block; font-size: 15px; - line-height: 20px; + line-height: 22px; color: $highlight-text-color; border: 0; background: transparent; padding: 0; - padding-top: 8px; + padding-top: 16px; text-decoration: none; &:hover, @@ -972,7 +972,7 @@ .translate-button { margin-top: 16px; font-size: 15px; - line-height: 20px; + line-height: 22px; display: flex; justify-content: space-between; color: $dark-text-color; @@ -1022,11 +1022,6 @@ } } -.status__prepend-icon-wrapper { - left: -26px; - position: absolute; -} - .focusable { &:focus { outline: 0; @@ -1040,19 +1035,11 @@ } .status { - padding: 8px 10px; - padding-left: 68px; - position: relative; + padding: 16px; min-height: 54px; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: auto; - @supports (-ms-overflow-style: -ms-autohiding-scrollbar) { - // Add margin to avoid Edge auto-hiding scrollbar appearing over content. - // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px. - padding-right: 26px; // 10px + 16px - } - @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } @@ -1061,9 +1048,11 @@ opacity: 1; animation: fade 150ms linear; + .media-gallery, .video-player, - .audio-player { - margin-top: 8px; + .audio-player, + .attachment-list { + margin-top: 16px; } &.light { @@ -1091,7 +1080,7 @@ color: $highlight-text-color; } - a.status__content__spoiler-link { + &__spoiler-link { color: $primary-text-color; background: $ui-primary-color; @@ -1104,7 +1093,16 @@ } } -.status__relative-time, +.status__relative-time { + display: block; + font-size: 15px; + line-height: 22px; + height: 40px; + order: 2; + flex: 0 0 auto; + color: $dark-text-color; +} + .notification__relative_time { color: $dark-text-color; float: right; @@ -1121,13 +1119,36 @@ } .status__info .status__display-name { - display: block; max-width: 100%; - padding-right: 25px; + display: flex; + font-size: 15px; + line-height: 22px; + align-items: center; + gap: 10px; + overflow: hidden; + + .display-name { + bdi { + overflow: hidden; + text-overflow: ellipsis; + } + + &__account { + white-space: nowrap; + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + } } .status__info { font-size: 15px; + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; } .status-check-box__status { @@ -1166,12 +1187,14 @@ } .status__prepend { - margin-left: 68px; + padding: 16px; + padding-bottom: 0; + display: flex; + gap: 10px; + font-size: 15px; + line-height: 22px; + font-weight: 500; color: $dark-text-color; - padding: 8px 0; - padding-bottom: 2px; - font-size: 14px; - position: relative; .status__display-name strong { color: $dark-text-color; @@ -1185,22 +1208,11 @@ } .status__action-bar { - align-items: center; display: flex; - margin-top: 8px; -} - -.status__action-bar-button { - margin-right: 18px; - - &.icon-button--with-counter { - margin-right: 14px; - } -} - -.status__action-bar-dropdown { - height: 23.15px; - width: 23.15px; + justify-content: space-between; + align-items: center; + gap: 18px; + margin-top: 16px; } .detailed-status__action-bar-dropdown { @@ -1213,7 +1225,7 @@ .detailed-status { background: lighten($ui-base-color, 4%); - padding: 14px 10px; + padding: 16px; &--flex { display: flex; @@ -1243,14 +1255,15 @@ } } + .media-gallery, .video-player, .audio-player { - margin-top: 8px; + margin-top: 16px; } } .detailed-status__meta { - margin-top: 15px; + margin-top: 16px; color: $dark-text-color; font-size: 14px; line-height: 18px; @@ -1312,7 +1325,7 @@ } .account { - padding: 10px; + padding: 16px; border-bottom: 1px solid lighten($ui-base-color, 8%); &.compact { @@ -1326,7 +1339,9 @@ .account__display-name { flex: 1 1 auto; - display: block; + display: flex; + align-items: center; + gap: 10px; color: $darker-text-color; overflow: hidden; text-decoration: none; @@ -1359,12 +1374,7 @@ .account__wrapper { display: flex; -} - -.account__avatar-wrapper { - float: left; - margin-left: 12px; - margin-right: 12px; + gap: 10px; } .account__avatar { @@ -1372,9 +1382,6 @@ display: block; position: relative; - width: 36px; - height: 36px; - background-size: 36px 36px; &-inline { display: inline-block; @@ -1414,7 +1421,7 @@ a .account__avatar { } .account__avatar-overlay { - @include avatar-size(48px); + @include avatar-size(46px); position: relative; @@ -1615,10 +1622,13 @@ a.account__display-name { } .detailed-status__display-name { - color: $secondary-text-color; - display: block; - line-height: 24px; - margin-bottom: 15px; + color: $darker-text-color; + display: flex; + align-items: center; + gap: 10px; + font-size: 15px; + line-height: 22px; + margin-bottom: 16px; overflow: hidden; strong, @@ -1629,31 +1639,13 @@ a.account__display-name { } strong { - font-size: 16px; color: $primary-text-color; } } -.detailed-status__display-avatar { - float: left; - margin-right: 10px; -} - .status__avatar { - height: 48px; - left: 10px; - position: absolute; - top: 10px; - width: 48px; -} - -.status__expand { - width: 68px; - position: absolute; - left: 0; - top: 0; - height: 100%; - cursor: pointer; + width: 46px; + height: 46px; } .muted { @@ -1684,40 +1676,52 @@ a.account__display-name { } .notification__report { - padding: 8px 10px; - padding-left: 68px; - position: relative; + padding: 16px; border-bottom: 1px solid lighten($ui-base-color, 8%); - min-height: 54px; + display: flex; + gap: 10px; + + &__avatar { + flex: 0 0 auto; + } &__details { + flex: 1 1 auto; display: flex; justify-content: space-between; align-items: center; color: $darker-text-color; + gap: 10px; font-size: 15px; line-height: 22px; + white-space: nowrap; + overflow: hidden; + + & > div { + overflow: hidden; + text-overflow: ellipsis; + } strong { font-weight: 500; } } - &__avatar { - position: absolute; - left: 10px; - top: 10px; + &__actions { + flex: 0 0 auto; } } .notification__message { - margin: 0 10px 0 68px; - padding: 8px 0 0; + padding: 16px; + padding-bottom: 0; cursor: default; color: $darker-text-color; font-size: 15px; line-height: 22px; - position: relative; + font-weight: 500; + display: flex; + gap: 10px; .fa { color: $highlight-text-color; @@ -1731,9 +1735,6 @@ a.account__display-name { } .notification__favourite-icon-wrapper { - left: -26px; - position: absolute; - .star-icon { color: $gold-star; } @@ -1767,15 +1768,10 @@ a.account__display-name { text-decoration: none; &:hover { - color: $primary-text-color; text-decoration: underline; } } -.notification__relative_time { - float: right; -} - .display-name { display: block; max-width: 100%; @@ -1788,10 +1784,6 @@ a.account__display-name { font-weight: 500; } -.display-name__account { - font-size: 14px; -} - .status__relative-time, .detailed-status__datetime { &:hover { @@ -1860,11 +1852,12 @@ a.account__display-name { } .navigation-bar { - padding: 10px; + padding: 15px; display: flex; align-items: center; flex-shrink: 0; cursor: default; + gap: 10px; color: $darker-text-color; strong { @@ -1899,9 +1892,7 @@ a.account__display-name { .navigation-bar__profile { flex: 1 1 auto; - margin-left: 8px; line-height: 20px; - margin-top: -1px; overflow: hidden; } @@ -2466,101 +2457,6 @@ $ui-header-height: 55px; padding: 10px 0; padding-top: 0; } - - .detailed-status { - padding: 15px; - - .media-gallery, - .video-player, - .audio-player { - margin-top: 15px; - } - } - - .account__header__bar { - padding: 5px 10px; - } - - .navigation-bar, - .compose-form { - padding: 15px; - } - - .compose-form .compose-form__publish .compose-form__publish-button-wrapper { - padding-top: 15px; - } - - .notification__report { - padding: 15px 15px 15px (48px + 15px * 2); - min-height: 48px + 2px; - - &__avatar { - left: 15px; - top: 17px; - } - } - - .status { - padding: 15px 15px 15px (48px + 15px * 2); - min-height: 48px + 2px; - - &__avatar { - left: 15px; - top: 17px; - } - - &__content { - padding-top: 5px; - } - - &__prepend { - margin-left: 48px + 15px * 2; - padding-top: 15px; - } - - &__prepend-icon-wrapper { - left: -32px; - } - - .media-gallery, - &__action-bar, - .video-player, - .audio-player { - margin-top: 10px; - } - } - - .account { - padding: 15px 10px; - - &__header__bio { - margin: 0 -10px; - } - } - - .notification { - &__message { - margin-left: 48px + 15px * 2; - padding-top: 15px; - } - - &__favourite-icon-wrapper { - left: -32px; - } - - .status { - padding-top: 8px; - } - - .account { - padding-top: 8px; - } - - .account__avatar-wrapper { - margin-left: 17px; - margin-right: 15px; - } - } } @media screen and (min-width: $no-gap-breakpoint) { @@ -2805,10 +2701,7 @@ $ui-header-height: 55px; } .navigation-bar { - padding-top: 20px; - padding-bottom: 20px; flex: 0 1 48px; - min-height: 20px; } .compose-form { @@ -5303,24 +5196,6 @@ a.status-card.compact:hover { width: 480px; position: relative; flex-direction: column; - - .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; - } - - .status__avatar { - height: 28px; - left: 10px; - position: absolute; - top: 10px; - width: 48px; - } - - .status__content__spoiler-link { - color: lighten($secondary-text-color, 8%); - } } .actions-modal { @@ -5352,9 +5227,9 @@ a.status-card.compact:hover { .block-modal__action-bar { display: flex; justify-content: space-between; + align-items: center; background: $ui-secondary-color; - padding: 10px; - line-height: 36px; + padding: 15px; & > div { flex: 1 1 auto; @@ -5368,15 +5243,6 @@ a.status-card.compact:hover { } } -.boost-modal__status-header { - font-size: 15px; -} - -.boost-modal__status-time { - float: right; - font-size: 14px; -} - .mute-modal, .block-modal { line-height: 24px; @@ -5988,7 +5854,7 @@ a.status-card.compact:hover { font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; - margin-top: 14px; + margin-top: 16px; overflow: hidden; &__icon { @@ -6034,7 +5900,6 @@ a.status-card.compact:hover { &.compact { border: 0; - margin-top: 4px; .attachment-list__list { padding: 0; @@ -7177,6 +7042,7 @@ noscript { .account__header { overflow: hidden; + background: lighten($ui-base-color, 4%); &.inactive { opacity: 0.5; @@ -7210,8 +7076,7 @@ noscript { &__bar { position: relative; - background: lighten($ui-base-color, 4%); - padding: 5px; + padding: 0 20px; border-bottom: 1px solid lighten($ui-base-color, 12%); .avatar { @@ -7230,8 +7095,8 @@ noscript { &__tabs { display: flex; align-items: flex-start; - padding: 7px 10px; margin-top: -55px; + padding-top: 10px; &__buttons { display: flex; @@ -7249,7 +7114,8 @@ noscript { } &__name { - padding: 5px 10px; + margin-top: 16px; + margin-bottom: 16px; .account-role { vertical-align: top; @@ -7261,17 +7127,17 @@ noscript { } h1 { - font-size: 16px; - line-height: 24px; + font-size: 17px; + line-height: 22px; color: $primary-text-color; - font-weight: 500; + font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; small { display: block; - font-size: 14px; + font-size: 15px; color: $darker-text-color; font-weight: 400; overflow: hidden; @@ -7286,34 +7152,41 @@ noscript { } &__bio { - overflow: hidden; - margin: 0 -5px; - .account__header__content { - padding: 20px 15px; - padding-bottom: 5px; color: $primary-text-color; + } - .columns-area--mobile & { - padding-left: 20px; - padding-right: 20px; + .account__header__fields { + margin: 0; + margin-top: 16px; + border-radius: 4px; + background: darken($ui-base-color, 4%); + border: 0; + + dl { + display: block; + padding: 11px 16px; + border-bottom-color: lighten($ui-base-color, 4%); } - } - .account__header__joined { - font-size: 14px; - padding: 5px 15px; - color: $darker-text-color; + dd, + dt { + font-size: 13px; + line-height: 18px; + padding: 0; + text-align: initial; + } - .columns-area--mobile & { - padding-left: 20px; - padding-right: 20px; + dt { + width: auto; + background: transparent; + text-transform: uppercase; + color: $dark-text-color; } - } - .account__header__fields { - margin: 0; - border-top: 1px solid lighten($ui-base-color, 12%); + dd { + color: $darker-text-color; + } a { color: lighten($ui-highlight-color, 8%); @@ -7330,12 +7203,14 @@ noscript { } &__extra { - margin-top: 4px; + margin-top: 16px; &__links { font-size: 14px; color: $darker-text-color; - padding: 10px 0; + margin: 0 -10px; + padding-top: 16px; + padding-bottom: 10px; a { display: inline-block; @@ -7353,17 +7228,10 @@ noscript { } &__account-note { - padding: 15px; - padding-bottom: 10px; color: $primary-text-color; font-size: 14px; font-weight: 400; - border-bottom: 1px solid lighten($ui-base-color, 12%); - - .columns-area--mobile & { - padding-left: 20px; - padding-right: 20px; - } + margin-bottom: 10px; label { display: block; -- cgit From 6f01111863bfb15b3574c95c8d60d59ae1d79772 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 25 Oct 2022 21:43:33 +0200 Subject: Fix wrong size of avatars in admin UI (#19457) --- app/helpers/home_helper.rb | 2 +- app/javascript/styles/mastodon/widgets.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/helpers/home_helper.rb b/app/helpers/home_helper.rb index 4da68500a..f41104709 100644 --- a/app/helpers/home_helper.rb +++ b/app/helpers/home_helper.rb @@ -23,7 +23,7 @@ module HomeHelper else link_to(path || ActivityPub::TagManager.instance.url_for(account), class: 'account__display-name') do content_tag(:div, class: 'account__avatar-wrapper') do - image_tag(full_asset_url(current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url), class: 'account__avatar') + image_tag(full_asset_url(current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url), class: 'account__avatar', width: 46, height: 46) end + content_tag(:span, class: 'display-name') do content_tag(:bdi) do diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 260a97c6d..0e39dc87b 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -359,8 +359,9 @@ vertical-align: initial !important; } - &__interrelationships { + tbody td.accounts-table__interrelationships { width: 21px; + padding-right: 16px; } .fa { -- cgit From f8ca3bb2a1dd648f41e8fea5b5eb87b53bc8d521 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 26 Oct 2022 13:42:29 +0200 Subject: Add ability to view previous edits of a status in admin UI (#19462) * Add ability to view previous edits of a status in admin UI * Change moderator access to posts to be controlled by a separate policy --- app/controllers/admin/statuses_controller.rb | 16 +++++- .../admin/trends/statuses_controller.rb | 4 +- .../mastodon/components/status_action_bar.js | 2 +- .../features/status/components/action_bar.js | 2 +- app/javascript/styles/mastodon/admin.scss | 64 ++++++++++++++++++++++ app/models/admin/status_filter.rb | 5 +- app/models/status_edit.rb | 13 ++++- app/policies/admin/status_policy.rb | 29 ++++++++++ app/policies/status_policy.rb | 12 +--- .../admin/reports/_media_attachments.html.haml | 8 +++ app/views/admin/reports/_status.html.haml | 11 +--- .../admin/status_edits/_status_edit.html.haml | 20 +++++++ app/views/admin/statuses/show.html.haml | 64 ++++++++++++++++++++++ config/locales/en.yml | 13 +++++ config/routes.rb | 2 +- spec/policies/status_policy_spec.rb | 22 -------- 16 files changed, 232 insertions(+), 55 deletions(-) create mode 100644 app/policies/admin/status_policy.rb create mode 100644 app/views/admin/reports/_media_attachments.html.haml create mode 100644 app/views/admin/status_edits/_status_edit.html.haml create mode 100644 app/views/admin/statuses/show.html.haml (limited to 'app/javascript/styles') diff --git a/app/controllers/admin/statuses_controller.rb b/app/controllers/admin/statuses_controller.rb index 084921ceb..b80cd20f5 100644 --- a/app/controllers/admin/statuses_controller.rb +++ b/app/controllers/admin/statuses_controller.rb @@ -3,18 +3,23 @@ module Admin class StatusesController < BaseController before_action :set_account - before_action :set_statuses + before_action :set_statuses, except: :show + before_action :set_status, only: :show PER_PAGE = 20 def index - authorize :status, :index? + authorize [:admin, :status], :index? @status_batch_action = Admin::StatusBatchAction.new end + def show + authorize [:admin, @status], :show? + end + def batch - authorize :status, :index? + authorize [:admin, :status], :index? @status_batch_action = Admin::StatusBatchAction.new(admin_status_batch_action_params.merge(current_account: current_account, report_id: params[:report_id], type: action_from_button)) @status_batch_action.save! @@ -32,6 +37,7 @@ module Admin def after_create_redirect_path report_id = @status_batch_action&.report_id || params[:report_id] + if report_id.present? admin_report_path(report_id) else @@ -43,6 +49,10 @@ module Admin @account = Account.find(params[:account_id]) end + def set_status + @status = @account.statuses.find(params[:id]) + end + def set_statuses @statuses = Admin::StatusFilter.new(@account, filter_params).results.preload(:application, :preloadable_poll, :media_attachments, active_mentions: :account, reblog: [:account, :application, :preloadable_poll, :media_attachments, active_mentions: :account]).page(params[:page]).per(PER_PAGE) end diff --git a/app/controllers/admin/trends/statuses_controller.rb b/app/controllers/admin/trends/statuses_controller.rb index 004f42b0c..3d8b53ea8 100644 --- a/app/controllers/admin/trends/statuses_controller.rb +++ b/app/controllers/admin/trends/statuses_controller.rb @@ -2,7 +2,7 @@ class Admin::Trends::StatusesController < Admin::BaseController def index - authorize :status, :review? + authorize [:admin, :status], :review? @locales = StatusTrend.pluck('distinct language') @statuses = filtered_statuses.page(params[:page]) @@ -10,7 +10,7 @@ class Admin::Trends::StatusesController < Admin::BaseController end def batch - authorize :status, :review? + authorize [:admin, :status], :review? @form = Trends::StatusBatch.new(trends_status_batch_params.merge(current_account: current_account, action: action_from_button)) @form.save diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index 17150524e..fe8ece0f9 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -323,7 +323,7 @@ class StatusActionBar extends ImmutablePureComponent { if ((this.context.identity.permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) { menu.push(null); menu.push({ text: intl.formatMessage(messages.admin_account, { name: account.get('username') }), href: `/admin/accounts/${status.getIn(['account', 'id'])}` }); - menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses?id=${status.get('id')}` }); + menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` }); } } diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js index a0a6a7894..4bd419ca4 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.js +++ b/app/javascript/mastodon/features/status/components/action_bar.js @@ -254,7 +254,7 @@ class ActionBar extends React.PureComponent { if ((permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) { menu.push(null); menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), href: `/admin/accounts/${status.getIn(['account', 'id'])}` }); - menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses?id=${status.get('id')}` }); + menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` }); } } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index affe1c79c..f86778399 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1752,3 +1752,67 @@ a.sparkline { } } } + +.history { + counter-reset: step 0; + font-size: 15px; + line-height: 22px; + + li { + counter-increment: step 1; + padding-left: 2.5rem; + padding-bottom: 8px; + position: relative; + margin-bottom: 8px; + + &::before { + position: absolute; + content: counter(step); + font-size: 0.625rem; + font-weight: 500; + left: 0; + display: flex; + justify-content: center; + align-items: center; + width: calc(1.375rem + 1px); + height: calc(1.375rem + 1px); + background: $ui-base-color; + border: 1px solid $highlight-text-color; + color: $highlight-text-color; + border-radius: 8px; + } + + &::after { + position: absolute; + content: ""; + width: 1px; + background: $highlight-text-color; + bottom: 0; + top: calc(1.875rem + 1px); + left: 0.6875rem; + } + + &:last-child { + margin-bottom: 0; + + &::after { + display: none; + } + } + } + + &__entry { + h5 { + font-weight: 500; + color: $primary-text-color; + line-height: 25px; + margin-bottom: 16px; + } + + .status { + border: 1px solid lighten($ui-base-color, 4%); + background: $ui-base-color; + border-radius: 4px; + } + } +} diff --git a/app/models/admin/status_filter.rb b/app/models/admin/status_filter.rb index 4fba612a6..d7a16f760 100644 --- a/app/models/admin/status_filter.rb +++ b/app/models/admin/status_filter.rb @@ -3,7 +3,6 @@ class Admin::StatusFilter KEYS = %i( media - id report_id ).freeze @@ -28,12 +27,10 @@ class Admin::StatusFilter private - def scope_for(key, value) + def scope_for(key, _value) case key.to_s when 'media' Status.joins(:media_attachments).merge(@account.media_attachments.reorder(nil)).group(:id).reorder('statuses.id desc') - when 'id' - Status.where(id: value) else raise "Unknown filter: #{key}" end diff --git a/app/models/status_edit.rb b/app/models/status_edit.rb index e9c8fbe98..e33470226 100644 --- a/app/models/status_edit.rb +++ b/app/models/status_edit.rb @@ -30,7 +30,7 @@ class StatusEdit < ApplicationRecord :preview_remote_url, :text_url, :meta, :blurhash, :not_processed?, :needs_redownload?, :local?, :file, :thumbnail, :thumbnail_remote_url, - :shortcode, to: :media_attachment + :shortcode, :video?, :audio?, to: :media_attachment end rate_limit by: :account, family: :statuses @@ -40,7 +40,8 @@ class StatusEdit < ApplicationRecord default_scope { order(id: :asc) } - delegate :local?, to: :status + delegate :local?, :application, :edited?, :edited_at, + :discarded?, :visibility, to: :status def emojis return @emojis if defined?(@emojis) @@ -59,4 +60,12 @@ class StatusEdit < ApplicationRecord end end end + + def proper + self + end + + def reblog? + false + end end diff --git a/app/policies/admin/status_policy.rb b/app/policies/admin/status_policy.rb new file mode 100644 index 000000000..ffaa30f13 --- /dev/null +++ b/app/policies/admin/status_policy.rb @@ -0,0 +1,29 @@ +# frozen_string_literal: true + +class Admin::StatusPolicy < ApplicationPolicy + def initialize(current_account, record, preloaded_relations = {}) + super(current_account, record) + + @preloaded_relations = preloaded_relations + end + + def index? + role.can?(:manage_reports, :manage_users) + end + + def show? + role.can?(:manage_reports, :manage_users) && (record.public_visibility? || record.unlisted_visibility? || record.reported?) + end + + def destroy? + role.can?(:manage_reports) + end + + def update? + role.can?(:manage_reports) + end + + def review? + role.can?(:manage_taxonomies) + end +end diff --git a/app/policies/status_policy.rb b/app/policies/status_policy.rb index 2f48b5d70..f3d0ffdba 100644 --- a/app/policies/status_policy.rb +++ b/app/policies/status_policy.rb @@ -7,10 +7,6 @@ class StatusPolicy < ApplicationPolicy @preloaded_relations = preloaded_relations end - def index? - role.can?(:manage_reports, :manage_users) - end - def show? return false if author.suspended? @@ -32,17 +28,13 @@ class StatusPolicy < ApplicationPolicy end def destroy? - role.can?(:manage_reports) || owned? + owned? end alias unreblog? destroy? def update? - role.can?(:manage_reports) || owned? - end - - def review? - role.can?(:manage_taxonomies) + owned? end private diff --git a/app/views/admin/reports/_media_attachments.html.haml b/app/views/admin/reports/_media_attachments.html.haml new file mode 100644 index 000000000..d0b7d52c3 --- /dev/null +++ b/app/views/admin/reports/_media_attachments.html.haml @@ -0,0 +1,8 @@ +- if status.ordered_media_attachments.first.video? + - video = status.ordered_media_attachments.first + = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), frameRate: video.file.meta.dig('original', 'frame_rate'), blurhash: video.blurhash, sensitive: status.sensitive?, visible: false, width: 610, height: 343, inline: true, alt: video.description, media: [ActiveModelSerializers::SerializableResource.new(video, serializer: REST::MediaAttachmentSerializer)].as_json +- elsif status.ordered_media_attachments.first.audio? + - audio = status.ordered_media_attachments.first + = react_component :audio, src: audio.file.url(:original), height: 110, alt: audio.description, duration: audio.file.meta.dig(:original, :duration) +- else + = react_component :media_gallery, height: 343, sensitive: status.sensitive?, visible: false, media: status.ordered_media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } diff --git a/app/views/admin/reports/_status.html.haml b/app/views/admin/reports/_status.html.haml index 392fc8f81..b2982a42b 100644 --- a/app/views/admin/reports/_status.html.haml +++ b/app/views/admin/reports/_status.html.haml @@ -12,14 +12,7 @@ = prerender_custom_emojis(status_content_format(status.proper), status.proper.emojis) - unless status.proper.ordered_media_attachments.empty? - - if status.proper.ordered_media_attachments.first.video? - - video = status.proper.ordered_media_attachments.first - = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), frameRate: video.file.meta.dig('original', 'frame_rate'), blurhash: video.blurhash, sensitive: status.proper.sensitive?, visible: false, width: 610, height: 343, inline: true, alt: video.description, media: [ActiveModelSerializers::SerializableResource.new(video, serializer: REST::MediaAttachmentSerializer)].as_json - - elsif status.proper.ordered_media_attachments.first.audio? - - audio = status.proper.ordered_media_attachments.first - = react_component :audio, src: audio.file.url(:original), height: 110, alt: audio.description, duration: audio.file.meta.dig(:original, :duration) - - else - = react_component :media_gallery, height: 343, sensitive: status.proper.sensitive?, visible: false, media: status.proper.ordered_media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } + = render partial: 'admin/reports/media_attachments', locals: { status: status.proper } .detailed-status__meta - if status.application @@ -29,7 +22,7 @@ %time.formatted{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at) - if status.edited? · - = t('statuses.edited_at_html', date: content_tag(:time, l(status.edited_at), datetime: status.edited_at.iso8601, title: l(status.edited_at), class: 'formatted')) + = link_to t('statuses.edited_at_html', date: content_tag(:time, l(status.edited_at), datetime: status.edited_at.iso8601, title: l(status.edited_at), class: 'formatted')), admin_account_status_path(status.account_id, status), class: 'detailed-status__datetime' - if status.discarded? · %span.negative-hint= t('admin.statuses.deleted') diff --git a/app/views/admin/status_edits/_status_edit.html.haml b/app/views/admin/status_edits/_status_edit.html.haml new file mode 100644 index 000000000..19a0e063d --- /dev/null +++ b/app/views/admin/status_edits/_status_edit.html.haml @@ -0,0 +1,20 @@ +.status + .status__content>< + - if status_edit.spoiler_text.blank? + = prerender_custom_emojis(status_content_format(status_edit), status_edit.emojis) + - else + %details< + %summary>< + %strong> Content warning: #{prerender_custom_emojis(h(status_edit.spoiler_text), status_edit.emojis)} + = prerender_custom_emojis(status_content_format(status_edit), status_edit.emojis) + + - unless status_edit.ordered_media_attachments.empty? + = render partial: 'admin/reports/media_attachments', locals: { status: status_edit } + + .detailed-status__meta + %time.formatted{ datetime: status_edit.created_at.iso8601, title: l(status_edit.created_at) }= l(status_edit.created_at) + + - if status_edit.sensitive? + · + = fa_icon('eye-slash fw') + = t('stream_entries.sensitive_content') diff --git a/app/views/admin/statuses/show.html.haml b/app/views/admin/statuses/show.html.haml new file mode 100644 index 000000000..62b49de8c --- /dev/null +++ b/app/views/admin/statuses/show.html.haml @@ -0,0 +1,64 @@ +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + +- content_for :page_title do + = t('statuses.title', name: display_name(@account), quote: truncate(@status.spoiler_text.presence || @status.text, length: 50, omission: '…', escape: false)) + +- content_for :heading_actions do + = link_to t('admin.statuses.open'), ActivityPub::TagManager.instance.url_for(@status), class: 'button', target: '_blank' + +%h3= t('admin.statuses.metadata') + +.table-wrapper + %table.table.horizontal-table + %tbody + %tr + %th= t('admin.statuses.account') + %td= admin_account_link_to @status.account + - if @status.reply? + %tr + %th= t('admin.statuses.in_reply_to') + %td= admin_account_link_to @status.in_reply_to_account, path: admin_account_status_path(@status.thread.account_id, @status.in_reply_to_id) + %tr + %th= t('admin.statuses.application') + %td= @status.application&.name + %tr + %th= t('admin.statuses.language') + %td= standard_locale_name(@status.language) + %tr + %th= t('admin.statuses.visibility') + %td= t("statuses.visibilities.#{@status.visibility}") + - if @status.trend + %tr + %th= t('admin.statuses.trending') + %td + - if @status.trend.allowed? + %abbr{ title: t('admin.trends.tags.current_score', score: @status.trend.score) }= t('admin.trends.tags.trending_rank', rank: @status.trend.rank) + - elsif @status.trend.requires_review? + = t('admin.trends.pending_review') + - else + = t('admin.trends.not_allowed_to_trend') + %tr + %th= t('admin.statuses.reblogs') + %td= friendly_number_to_human @status.reblogs_count + %tr + %th= t('admin.statuses.favourites') + %td= friendly_number_to_human @status.favourites_count + +%hr.spacer/ + +%h3= t('admin.statuses.history') + +%ol.history + - @status.edits.includes(:account, status: [:account]).each.with_index do |status_edit, i| + %li + .history__entry + %h5 + - if i.zero? + = t('admin.statuses.original_status') + - else + = t('admin.statuses.status_changed') + · + %time.formatted{ datetime: status_edit.created_at.iso8601, title: l(status_edit.created_at) }= l(status_edit.created_at) + + = render status_edit diff --git a/config/locales/en.yml b/config/locales/en.yml index 70850d478..fd845c3c2 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -705,16 +705,29 @@ en: delete: Delete uploaded file destroyed_msg: Site upload successfully deleted! statuses: + account: Author + application: Application back_to_account: Back to account page back_to_report: Back to report page batch: remove_from_report: Remove from report report: Report deleted: Deleted + favourites: Favourites + history: Version history + in_reply_to: Replying to + language: Language media: title: Media + metadata: Metadata no_status_selected: No posts were changed as none were selected + open: Open post + original_status: Original post + reblogs: Reblogs + status_changed: Post changed title: Account posts + trending: Trending + visibility: Visibility with_media: With media strikes: actions: diff --git a/config/routes.rb b/config/routes.rb index b44479e77..12726a677 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -325,7 +325,7 @@ Rails.application.routes.draw do resource :reset, only: [:create] resource :action, only: [:new, :create], controller: 'account_actions' - resources :statuses, only: [:index] do + resources :statuses, only: [:index, :show] do collection do post :batch end diff --git a/spec/policies/status_policy_spec.rb b/spec/policies/status_policy_spec.rb index 205ecd720..b88521708 100644 --- a/spec/policies/status_policy_spec.rb +++ b/spec/policies/status_policy_spec.rb @@ -96,10 +96,6 @@ RSpec.describe StatusPolicy, type: :model do expect(subject).to permit(status.account, status) end - it 'grants access when account is admin' do - expect(subject).to permit(admin.account, status) - end - it 'denies access when account is not deleter' do expect(subject).to_not permit(bob, status) end @@ -125,27 +121,9 @@ RSpec.describe StatusPolicy, type: :model do end end - permissions :index? do - it 'grants access if staff' do - expect(subject).to permit(admin.account) - end - - it 'denies access unless staff' do - expect(subject).to_not permit(alice) - end - end - permissions :update? do - it 'grants access if staff' do - expect(subject).to permit(admin.account, status) - end - it 'grants access if owner' do expect(subject).to permit(status.account, status) end - - it 'denies access unless staff' do - expect(subject).to_not permit(bob, status) - end end end -- cgit From 8dfe5179ee7186e549dbe1186a151ffa848fe8ab Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 28 Oct 2022 00:48:45 +0200 Subject: Fix avatars not using image tags in web UI (#19488) Fix #19483 --- .../__tests__/__snapshots__/avatar-test.js.snap | 22 +++++----- .../__snapshots__/avatar_overlay-test.js.snap | 50 +++++++++++++++++----- app/javascript/mastodon/components/avatar.js | 26 ++++------- .../mastodon/components/avatar_composite.js | 7 +-- .../mastodon/components/avatar_overlay.js | 36 +++++++++++----- app/javascript/styles/mastodon/components.scss | 39 ++++++----------- 6 files changed, 102 insertions(+), 78 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap index f5c10aa37..7fbdedeb2 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap @@ -2,36 +2,38 @@ exports[` Autoplay renders a animated avatar 1`] = `
+> + alice +
`; exports[` Still renders a still avatar 1`] = `
+> + alice +
`; diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap index 58f27a321..f8385357a 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap @@ -3,22 +3,52 @@ exports[`
+
+ > + alice +
+
+
+ > + eve@blackhat.lair +
+
`; diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js index dd3932ae6..207b26691 100644 --- a/app/javascript/mastodon/components/avatar.js +++ b/app/javascript/mastodon/components/avatar.js @@ -42,30 +42,20 @@ export default class Avatar extends React.PureComponent { ...this.props.style, width: `${size}px`, height: `${size}px`, - backgroundSize: `${size}px ${size}px`, }; - if (account) { - const src = account.get('avatar'); - const staticSrc = account.get('avatar_static'); + let src; - if (hovering || animate) { - style.backgroundImage = `url(${src})`; - } else { - style.backgroundImage = `url(${staticSrc})`; - } + if (hovering || animate) { + src = account?.get('avatar'); + } else { + src = account?.get('avatar_static'); } - return ( -
+
+ {account?.get('acct')} +
); } diff --git a/app/javascript/mastodon/components/avatar_composite.js b/app/javascript/mastodon/components/avatar_composite.js index 5d5b89749..220bf5b4f 100644 --- a/app/javascript/mastodon/components/avatar_composite.js +++ b/app/javascript/mastodon/components/avatar_composite.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { autoPlayGif } from '../initial_state'; +import Avatar from './avatar'; export default class AvatarComposite extends React.PureComponent { @@ -74,12 +75,12 @@ export default class AvatarComposite extends React.PureComponent { bottom: bottom, width: `${width}%`, height: `${height}%`, - backgroundSize: 'cover', - backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`, }; return ( -
+
+ +
); } diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js index 3ec1d7730..8d5d44ea5 100644 --- a/app/javascript/mastodon/components/avatar_overlay.js +++ b/app/javascript/mastodon/components/avatar_overlay.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { autoPlayGif } from '../initial_state'; +import Avatar from './avatar'; export default class AvatarOverlay extends React.PureComponent { @@ -9,27 +10,40 @@ export default class AvatarOverlay extends React.PureComponent { account: ImmutablePropTypes.map.isRequired, friend: ImmutablePropTypes.map.isRequired, animate: PropTypes.bool, + size: PropTypes.number, + baseSize: PropTypes.number, + overlaySize: PropTypes.number, }; static defaultProps = { animate: autoPlayGif, + size: 46, + baseSize: 36, + overlaySize: 24, }; - render() { - const { account, friend, animate } = this.props; + state = { + hovering: false, + }; + + handleMouseEnter = () => { + if (this.props.animate) return; + this.setState({ hovering: true }); + } - const baseStyle = { - backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`, - }; + handleMouseLeave = () => { + if (this.props.animate) return; + this.setState({ hovering: false }); + } - const overlayStyle = { - backgroundImage: `url(${friend.get(animate ? 'avatar' : 'avatar_static')})`, - }; + render() { + const { account, friend, animate, size, baseSize, overlaySize } = this.props; + const { hovering } = this.state; return ( -
-
-
+
+
+
); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 633b9ed70..69301fb05 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1382,6 +1382,14 @@ display: block; position: relative; + overflow: hidden; + + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } &-inline { display: inline-block; @@ -1390,8 +1398,6 @@ } &-composite { - @include avatar-radius; - border-radius: 50%; overflow: hidden; position: relative; @@ -1402,6 +1408,11 @@ box-sizing: border-box; } + .account__avatar { + width: 100% !important; + height: 100% !important; + } + &__label { display: block; position: absolute; @@ -1421,37 +1432,13 @@ a .account__avatar { } .account__avatar-overlay { - @include avatar-size(46px); - position: relative; - &-base { - @include avatar-radius; - @include avatar-size(36px); - - img { - @include avatar-radius; - - width: 100%; - height: 100%; - } - } - &-overlay { - @include avatar-radius; - @include avatar-size(24px); - position: absolute; bottom: 0; right: 0; z-index: 1; - - img { - @include avatar-radius; - - width: 100%; - height: 100%; - } } } -- cgit From 10922294ffd2c83e155f020896318d16f3764e8d Mon Sep 17 00:00:00 2001 From: Robert Laurenz <8169746+laurenzcodes@users.noreply.github.com> Date: Fri, 28 Oct 2022 12:46:41 +0200 Subject: fix(component): adjust style of counter button to fix overflow issue (#19494) --- app/javascript/styles/mastodon/components.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 69301fb05..73f00e4c5 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -279,11 +279,12 @@ display: inline-flex; align-items: center; width: auto !important; + padding: 0 4px 0 2px; } &__counter { display: inline-block; - width: 14px; + width: auto; margin-left: 4px; font-size: 12px; font-weight: 500; -- cgit From d9d722d74b2cb9bf30fa4cc98af6ddbeca003ebc Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 28 Oct 2022 12:56:32 +0200 Subject: Change admin announcement edition interface to use datetime-local (#18321) * Change admin announcement edition interface to use datetime-local * Dynamically set announcement stop date as required if start date is set, set minimum date for stop date * Change `all_day` to not be bound to presence of time-range * Add pattern and placeholder as minimal fallback for browsers not supporting datetime-local * Display datetime-local inputs as local time Co-authored-by: Eugen Rochko --- app/javascript/packs/admin.js | 54 ++++++++++++++++++++++++++++ app/javascript/styles/mastodon/forms.scss | 5 ++- app/models/announcement.rb | 5 --- app/views/admin/announcements/edit.html.haml | 7 ++-- app/views/admin/announcements/new.html.haml | 9 +++-- 5 files changed, 69 insertions(+), 11 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/packs/admin.js b/app/javascript/packs/admin.js index b733d6b18..de86e0e11 100644 --- a/app/javascript/packs/admin.js +++ b/app/javascript/packs/admin.js @@ -2,6 +2,24 @@ import './public-path'; import { delegate } from '@rails/ujs'; import ready from '../mastodon/ready'; +const setAnnouncementEndsAttributes = (target) => { + const valid = target?.value && target?.validity?.valid; + const element = document.querySelector('input[type="datetime-local"]#announcement_ends_at'); + if (valid) { + element.classList.remove('optional'); + element.required = true; + element.min = target.value; + } else { + element.classList.add('optional'); + element.removeAttribute('required'); + element.removeAttribute('min'); + } +}; + +delegate(document, 'input[type="datetime-local"]#announcement_starts_at', 'change', ({ target }) => { + setAnnouncementEndsAttributes(target); +}); + const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]'; const showSelectAll = () => { @@ -141,6 +159,20 @@ const onChangeRegistrationMode = (target) => { }); }; +const convertUTCDateTimeToLocal = (value) => { + const date = new Date(value + 'Z'); + const twoChars = (x) => (x.toString().padStart(2, '0')); + return `${date.getFullYear()}-${twoChars(date.getMonth()+1)}-${twoChars(date.getDate())}T${twoChars(date.getHours())}:${twoChars(date.getMinutes())}`; +}; + +const convertLocalDatetimeToUTC = (value) => { + const re = /^([0-9]{4,})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2})/; + const match = re.exec(value); + const date = new Date(match[1], match[2] - 1, match[3], match[4], match[5]); + const fullISO8601 = date.toISOString(); + return fullISO8601.slice(0, fullISO8601.indexOf('T') + 6); +}; + delegate(document, '#form_admin_settings_registrations_mode', 'change', ({ target }) => onChangeRegistrationMode(target)); ready(() => { @@ -163,6 +195,28 @@ ready(() => { } }); + [].forEach.call(document.querySelectorAll('input[type="datetime-local"]'), element => { + if (element.value) { + element.value = convertUTCDateTimeToLocal(element.value); + } + if (element.placeholder) { + element.placeholder = convertUTCDateTimeToLocal(element.placeholder); + } + }); + + delegate(document, 'form', 'submit', ({ target }) => { + [].forEach.call(target.querySelectorAll('input[type="datetime-local"]'), element => { + if (element.value && element.validity.valid) { + element.value = convertLocalDatetimeToUTC(element.value); + } + }); + }); + + const announcementStartsAt = document.querySelector('input[type="datetime-local"]#announcement_starts_at'); + if (announcementStartsAt) { + setAnnouncementEndsAttributes(announcementStartsAt); + } + const React = require('react'); const ReactDOM = require('react-dom'); diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 25c9c9fe5..a3ddc7636 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -405,6 +405,7 @@ code { input[type="email"], input[type="password"], input[type="url"], + input[type="datetime-local"], textarea { box-sizing: border-box; font-size: 16px; @@ -445,7 +446,8 @@ code { input[type="text"], input[type="number"], input[type="email"], - input[type="password"] { + input[type="password"], + input[type="datetime-local"] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { border-color: lighten($error-red, 12%); @@ -461,6 +463,7 @@ code { input[type="number"], input[type="email"], input[type="password"], + input[type="datetime-local"], textarea, select { border-color: lighten($error-red, 12%); diff --git a/app/models/announcement.rb b/app/models/announcement.rb index bedced9de..4b2cb4c6d 100644 --- a/app/models/announcement.rb +++ b/app/models/announcement.rb @@ -31,7 +31,6 @@ class Announcement < ApplicationRecord validates :starts_at, presence: true, if: -> { ends_at.present? } validates :ends_at, presence: true, if: -> { starts_at.present? } - before_validation :set_all_day before_validation :set_published, on: :create def to_log_human_identifier @@ -89,10 +88,6 @@ class Announcement < ApplicationRecord private - def set_all_day - self.all_day = false if starts_at.blank? || ends_at.blank? - end - def set_published return unless scheduled_at.blank? || scheduled_at.past? diff --git a/app/views/admin/announcements/edit.html.haml b/app/views/admin/announcements/edit.html.haml index 5f56db5e7..e20a839b9 100644 --- a/app/views/admin/announcements/edit.html.haml +++ b/app/views/admin/announcements/edit.html.haml @@ -1,12 +1,15 @@ - content_for :page_title do = t('.title') +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + = simple_form_for @announcement, url: admin_announcement_path(@announcement) do |f| = render 'shared/error_messages', object: @announcement .fields-group - = f.input :starts_at, include_blank: true, wrapper: :with_block_label - = f.input :ends_at, include_blank: true, wrapper: :with_block_label + = f.input :starts_at, include_blank: true, wrapper: :with_block_label, html5: true, input_html: { pattern: '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}(:[0-9]{2}){1,2}', placeholder: Time.now.strftime('%FT%R') } + = f.input :ends_at, include_blank: true, wrapper: :with_block_label, html5: true, input_html: { pattern: '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}(:[0-9]{2}){1,2}', placeholder: Time.now.strftime('%FT%R') } .fields-group = f.input :all_day, as: :boolean, wrapper: :with_label diff --git a/app/views/admin/announcements/new.html.haml b/app/views/admin/announcements/new.html.haml index a5298c5f6..d5881b7aa 100644 --- a/app/views/admin/announcements/new.html.haml +++ b/app/views/admin/announcements/new.html.haml @@ -1,12 +1,15 @@ - content_for :page_title do = t('.title') +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + = simple_form_for @announcement, url: admin_announcements_path do |f| = render 'shared/error_messages', object: @announcement .fields-group - = f.input :starts_at, include_blank: true, wrapper: :with_block_label - = f.input :ends_at, include_blank: true, wrapper: :with_block_label + = f.input :starts_at, include_blank: true, wrapper: :with_block_label, html5: true, input_html: { pattern: '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}(:[0-9]{2}){1,2}', placeholder: Time.now.strftime('%FT%R') } + = f.input :ends_at, include_blank: true, wrapper: :with_block_label, html5: true, input_html: { pattern: '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}(:[0-9]{2}){1,2}', placeholder: Time.now.strftime('%FT%R') } .fields-group = f.input :all_day, as: :boolean, wrapper: :with_label @@ -15,7 +18,7 @@ = f.input :text, wrapper: :with_block_label .fields-group - = f.input :scheduled_at, include_blank: true, wrapper: :with_block_label + = f.input :scheduled_at, include_blank: true, wrapper: :with_block_label, html5: true, input_html: { pattern: '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}(:[0-9]{2}){1,2}', placeholder: Time.now.strftime('%FT%R') } .actions = f.button :button, t('.create'), type: :submit -- cgit From 923f06a07c851b25b989412f341f87f8b8fff42f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 28 Oct 2022 12:56:51 +0200 Subject: Fix number of uses being shown again on trending hashtags in web UI (#19484) --- app/javascript/mastodon/components/hashtag.js | 1 - app/javascript/styles/mastodon/components.scss | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/hashtag.js b/app/javascript/mastodon/components/hashtag.js index 8dd27290a..75220211e 100644 --- a/app/javascript/mastodon/components/hashtag.js +++ b/app/javascript/mastodon/components/hashtag.js @@ -56,7 +56,6 @@ export const ImmutableHashtag = ({ hashtag }) => ( href={hashtag.get('url')} to={`/tags/${hashtag.get('name')}`} people={hashtag.getIn(['history', 0, 'accounts']) * 1 + hashtag.getIn(['history', 1, 'accounts']) * 1} - uses={hashtag.getIn(['history', 0, 'uses']) * 1 + hashtag.getIn(['history', 1, 'uses']) * 1} history={hashtag.get('history').reverse().map((day) => day.get('uses')).toArray()} /> ); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 73f00e4c5..ded5634d6 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -7278,6 +7278,7 @@ noscript { align-items: center; padding: 15px; border-bottom: 1px solid lighten($ui-base-color, 8%); + gap: 15px; &:last-child { border-bottom: 0; @@ -7319,8 +7320,6 @@ noscript { font-size: 24px; font-weight: 500; text-align: right; - padding-right: 15px; - margin-left: 5px; color: $secondary-text-color; text-decoration: none; } -- cgit From 84da970d6b14fe16c8fffdfc4d4a7daa1eed470c Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 28 Oct 2022 17:10:00 +0200 Subject: Fix assets compilation Not too sure why the loader behaves differently than it previously did, though. --- app/javascript/styles/mastodon/components.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 69301fb05..b13d39a4f 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1804,7 +1804,7 @@ a.account__display-name { .image-loader__preview-canvas { max-width: $media-modal-media-max-width; max-height: $media-modal-media-max-height; - background: url('../images/void.png') repeat; + background: url('~images/void.png') repeat; object-fit: contain; } @@ -6950,7 +6950,7 @@ noscript { width: 100px; height: 100px; transform: translate(-50%, -50%); - background: url('../images/reticle.png') no-repeat 0 0; + background: url('~images/reticle.png') no-repeat 0 0; border-radius: 50%; box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35); } -- cgit From ad83e64795361dc9d5990a9dae4f91a3642109a0 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 30 Oct 2022 02:43:15 +0200 Subject: Fix sidebar and tabs on settings on small screens in admin UI (#19533) --- app/javascript/packs/public.js | 25 ++++++++- app/javascript/styles/mastodon/admin.scss | 89 +++++++++++++++++-------------- app/views/layouts/admin.html.haml | 3 +- config/locales/en.yml | 2 + 4 files changed, 77 insertions(+), 42 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 5ff45fa55..786fc8ede 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -247,8 +247,31 @@ function main() { input.readonly = oldReadOnly; }); + const toggleSidebar = () => { + const sidebar = document.querySelector('.sidebar ul'); + const toggleButton = document.querySelector('.sidebar__toggle__icon'); + + if (sidebar.classList.contains('visible')) { + document.body.style.overflow = null; + toggleButton.setAttribute('aria-expanded', false); + } else { + document.body.style.overflow = 'hidden'; + toggleButton.setAttribute('aria-expanded', true); + } + + toggleButton.classList.toggle('active'); + sidebar.classList.toggle('visible'); + }; + delegate(document, '.sidebar__toggle__icon', 'click', () => { - document.querySelector('.sidebar ul').classList.toggle('visible'); + toggleSidebar(); + }); + + delegate(document, '.sidebar__toggle__icon', 'keydown', e => { + if (e.key === ' ' || e.key === 'Enter') { + e.preventDefault(); + toggleSidebar(); + } }); // Empty the honeypot fields in JS in case something like an extension diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index f86778399..7a50a89bb 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -31,23 +31,17 @@ $content-width: 840px; &__toggle { display: none; - background: lighten($ui-base-color, 8%); - height: 48px; + background: darken($ui-base-color, 4%); + border-bottom: 1px solid lighten($ui-base-color, 4%); + align-items: center; &__logo { flex: 1 1 auto; a { - display: inline-block; + display: block; padding: 15px; } - - svg { - fill: $primary-text-color; - height: 20px; - position: relative; - bottom: -2px; - } } &__icon { @@ -55,15 +49,27 @@ $content-width: 840px; color: $darker-text-color; text-decoration: none; flex: 0 0 auto; - font-size: 20px; - padding: 15px; - } + font-size: 18px; + padding: 10px; + margin: 5px 10px; + border-radius: 4px; - a { - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 12%); + &:focus { + background: $ui-base-color; + } + + .fa-times { + display: none; + } + + &.active { + .fa-times { + display: block; + } + + .fa-bars { + display: none; + } } } } @@ -79,7 +85,7 @@ $content-width: 840px; display: inherit; margin: inherit; width: inherit; - height: 20px; + height: 25px; } @media screen and (max-width: $no-columns-breakpoint) { @@ -189,9 +195,7 @@ $content-width: 840px; } &__heading { - padding-bottom: 36px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - margin-bottom: 40px; + margin-bottom: 45px; &__row { display: flex; @@ -208,46 +212,43 @@ $content-width: 840px; &__tabs { margin-top: 30px; - margin-bottom: -31px; + width: 100%; & > div { display: flex; - gap: 10px; + flex-wrap: wrap; + gap: 5px; } a { font-size: 14px; display: inline-flex; align-items: center; - padding: 7px 15px; + padding: 7px 10px; border-radius: 4px; color: $darker-text-color; text-decoration: none; - position: relative; font-weight: 500; gap: 5px; white-space: nowrap; + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 4%); + } + &.selected { font-weight: 700; color: $primary-text-color; + background: $ui-highlight-color; - &::after { - content: ""; - display: block; - width: 100%; - border-bottom: 1px solid $ui-highlight-color; - position: absolute; - bottom: -5px; - left: 0; + &:hover, + &:focus, + &:active { + background: lighten($ui-highlight-color, 4%); } } - - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 4%); - } } } @@ -382,6 +383,14 @@ $content-width: 840px; &.visible { display: block; + position: fixed; + z-index: 10; + width: 100%; + height: calc(100vh - 56px); + left: 0; + bottom: 0; + overflow-y: auto; + background: $ui-base-color; } } diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml index 59021ad88..e7a163c92 100644 --- a/app/views/layouts/admin.html.haml +++ b/app/views/layouts/admin.html.haml @@ -15,8 +15,9 @@ = link_to root_path do = logo_as_symbol(:wordmark) - = link_to '#', class: 'sidebar__toggle__icon' do + = link_to '#', class: 'sidebar__toggle__icon', 'aria-label': t('navigation.toggle_menu'), 'aria-expanded': 'false' do = fa_icon 'bars' + = fa_icon 'times' = render_navigation diff --git a/config/locales/en.yml b/config/locales/en.yml index fd845c3c2..547b19f07 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1249,6 +1249,8 @@ en: carry_blocks_over_text: This user moved from %{acct}, which you had blocked. carry_mutes_over_text: This user moved from %{acct}, which you had muted. copy_account_note_text: 'This user moved from %{acct}, here were your previous notes about them:' + navigation: + toggle_menu: Toggle menu notification_mailer: admin: report: -- cgit 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/mastodon/components/account.js | 9 ++- .../mastodon/components/server_banner.js | 2 +- app/javascript/mastodon/features/about/index.js | 6 +- .../mastodon/features/ui/components/link_footer.js | 64 +++++++++--------- app/javascript/styles/mastodon/components.scss | 75 +++++++++++----------- 5 files changed, 84 insertions(+), 72 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index 92d14da8b..51d2b8ba2 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -27,6 +27,7 @@ export default @injectIntl class Account extends ImmutablePureComponent { static propTypes = { + size: PropTypes.number, account: ImmutablePropTypes.map, onFollow: PropTypes.func.isRequired, onBlock: PropTypes.func.isRequired, @@ -40,6 +41,10 @@ class Account extends ImmutablePureComponent { onActionClick: PropTypes.func, }; + static defaultProps = { + size: 46, + }; + handleFollow = () => { this.props.onFollow(this.props.account); } @@ -65,7 +70,7 @@ class Account extends ImmutablePureComponent { } render () { - const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction } = this.props; + const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props; if (!account) { return ( @@ -136,7 +141,7 @@ class Account extends ImmutablePureComponent {
-
+
{mute_expires_at} diff --git a/app/javascript/mastodon/components/server_banner.js b/app/javascript/mastodon/components/server_banner.js index c2336e43d..617fdecdf 100644 --- a/app/javascript/mastodon/components/server_banner.js +++ b/app/javascript/mastodon/components/server_banner.js @@ -61,7 +61,7 @@ class ServerBanner extends React.PureComponent {

- +
diff --git a/app/javascript/mastodon/features/about/index.js b/app/javascript/mastodon/features/about/index.js index 75fed9b95..832836272 100644 --- a/app/javascript/mastodon/features/about/index.js +++ b/app/javascript/mastodon/features/about/index.js @@ -125,7 +125,7 @@ class About extends React.PureComponent {

- +
@@ -209,6 +209,10 @@ class About extends React.PureComponent { + +
+

+
diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js index cc3d83572..c29aac418 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.js +++ b/app/javascript/mastodon/features/ui/components/link_footer.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { version, repository, source_url, profile_directory as profileDirectory } from 'mastodon/initial_state'; +import { domain, version, source_url, profile_directory as profileDirectory } from 'mastodon/initial_state'; import { logOut } from 'mastodon/utils/log_out'; import { openModal } from 'mastodon/actions/modal'; import { PERMISSION_INVITE_USERS } from 'mastodon/permissions'; @@ -48,40 +48,44 @@ class LinkFooter extends React.PureComponent { render () { const { signedIn, permissions } = this.context.identity; - const items = []; - items.push(); - items.push(); - items.push(); - items.push(); - items.push(); - items.push(); - - if (profileDirectory) { - items.push(); - } - - if (signedIn) { - if ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS) { - items.push(); - } - - items.push(); - items.push(); - } + const canInvite = signedIn && ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS); + const canProfileDirectory = profileDirectory; return ( -
-
    -
  • {items.reduce((prev, curr) => [prev, ' · ', curr])}
    • -
+
+

+ {domain}: + {' '} + + {canInvite && ( + <> + {' · '} + + + )} + {canProfileDirectory && ( + <> + {' · '} + + + )} + {' · '} + +

- {repository} (v{version}) }} - /> + Mastodon: + {' '} + + {' · '} + + {' · '} + + {' · '} + + {' · '} + v{version}

); 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 From 4b7f32a2a668b7068ede7ac8eb2ac087883ba213 Mon Sep 17 00:00:00 2001 From: Sunny Ripert Date: Mon, 7 Nov 2022 03:40:54 +0100 Subject: Fix double button to clear emoji search input (#19888) --- app/javascript/styles/mastodon/emoji_picker.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index e4ec96d89..1042ddda8 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -132,6 +132,10 @@ &:active { outline: 0 !important; } + + &::-webkit-search-cancel-button { + display: none; + } } } -- cgit From 0beb095a4bfbcce55acb016eaaa54b5e93a56023 Mon Sep 17 00:00:00 2001 From: Zach Flanders Date: Mon, 7 Nov 2022 15:37:36 -0600 Subject: Fix spoiler buttons css not rendering correct color in light theme (#19960) * Updating status__content__spoiler-link css for mastodon-light theme to ensure correct rendering precedence * Adding focus css selector to status__content__spoiler-link mastodon-light theme * reformatting code to match convention of having css selectors on separate lines * fixing code format for scss linting issue --- app/javascript/styles/mastodon-light/diff.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index d928a55ed..d960070d6 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -268,7 +268,8 @@ html { .status__content .status__content__spoiler-link { background: $ui-base-color; - &:hover { + &:hover, + &:focus { background: lighten($ui-base-color, 4%); } } -- cgit From e37e8deb0ff207d36bb359ce395e2888dacc216d Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 10 Nov 2022 07:32:37 +0100 Subject: Fix profile header being cut off in light theme in web UI (#20298) --- app/javascript/styles/mastodon-light/diff.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index d960070d6..1214d2519 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -78,7 +78,7 @@ html { .column-header__back-button, .column-header__button, .column-header__button.active, -.account__header__bar { +.account__header { background: $white; } -- cgit From 7bdb2433f1a6e0b6a5e4df068003ac6e2e296048 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 10 Nov 2022 08:49:59 +0100 Subject: Change larger reblogs/favourites numbers to be shortened in web UI (#20303) --- app/javascript/mastodon/components/animated_number.js | 6 +++--- app/javascript/styles/mastodon/components.scss | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/animated_number.js b/app/javascript/mastodon/components/animated_number.js index fbe948c5b..b1aebc73e 100644 --- a/app/javascript/mastodon/components/animated_number.js +++ b/app/javascript/mastodon/components/animated_number.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { FormattedNumber } from 'react-intl'; +import ShortNumber from 'mastodon/components/short_number'; import TransitionMotion from 'react-motion/lib/TransitionMotion'; import spring from 'react-motion/lib/spring'; import { reduceMotion } from 'mastodon/initial_state'; @@ -51,7 +51,7 @@ export default class AnimatedNumber extends React.PureComponent { const { direction } = this.state; if (reduceMotion) { - return obfuscate ? obfuscatedCount(value) : ; + return obfuscate ? obfuscatedCount(value) : ; } const styles = [{ @@ -65,7 +65,7 @@ export default class AnimatedNumber extends React.PureComponent { {items => ( {items.map(({ key, data, style }) => ( - 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : } + 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : } ))} )} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 57a383476..ecbf6afc0 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1303,6 +1303,7 @@ display: inline-block; font-weight: 500; font-size: 12px; + line-height: 17px; margin-left: 6px; } -- cgit