From bd53dd521064b12261b82105624cf5f8b9ca9d69 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 9 Mar 2022 08:52:32 +0100 Subject: Change design of federation pages in admin UI (#17704) * Change design of federation pages in admin UI * Fix query performance in instance media attachments measure * Fix reblogs being included in instance languages dimension --- app/javascript/styles/mastodon/admin.scss | 50 ++++++++++++++++++++++++++++++ app/javascript/styles/mastodon/tables.scss | 18 +++++++++++ 2 files changed, 68 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 42f055618..dc4d65edd 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -367,6 +367,21 @@ body, } } + .positive-hint, + .negative-hint, + .neutral-hint { + a { + color: inherit; + text-decoration: underline; + + &:focus, + &:hover, + &:active { + text-decoration: none; + } + } + } + .positive-hint { color: $valid-value-color; font-weight: 500; @@ -1596,3 +1611,38 @@ a.sparkline { } } } + +.availability-indicator { + display: flex; + align-items: center; + margin-bottom: 30px; + font-size: 14px; + line-height: 21px; + + &__hint { + padding: 0 15px; + } + + &__graphic { + display: flex; + margin: 0 -2px; + + &__item { + display: block; + flex: 0 0 auto; + width: 4px; + height: 21px; + background: lighten($ui-base-color, 8%); + margin: 0 2px; + border-radius: 2px; + + &.positive { + background: $valid-value-color; + } + + &.negative { + background: $error-value-color; + } + } + } +} diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index 1f7e71776..431b8a73a 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -65,6 +65,24 @@ } } + &.horizontal-table { + border-collapse: collapse; + border-style: hidden; + + & > tbody > tr > th, + & > tbody > tr > td { + padding: 11px 10px; + background: transparent; + border: 1px solid lighten($ui-base-color, 8%); + color: $secondary-text-color; + } + + & > tbody > tr > th { + color: $darker-text-color; + font-weight: 600; + } + } + &.batch-table { & > thead > tr > th { background: $ui-base-color; -- cgit From 9f2791eb64d5d19418561270f79071c185876d20 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 9 Mar 2022 21:15:24 +0100 Subject: Add polls and media attachments to edit comparison modal in web UI (#17727) --- .../mastodon/components/media_attachments.js | 116 +++++++++++++++++++++ .../features/report/components/status_check_box.js | 52 +-------- .../ui/components/compare_history_modal.js | 20 ++++ app/javascript/styles/mastodon/components.scss | 8 +- app/models/status_edit.rb | 7 +- 5 files changed, 154 insertions(+), 49 deletions(-) create mode 100644 app/javascript/mastodon/components/media_attachments.js (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/media_attachments.js b/app/javascript/mastodon/components/media_attachments.js new file mode 100644 index 000000000..d27720de4 --- /dev/null +++ b/app/javascript/mastodon/components/media_attachments.js @@ -0,0 +1,116 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { MediaGallery, Video, Audio } from 'mastodon/features/ui/util/async-components'; +import Bundle from 'mastodon/features/ui/components/bundle'; +import noop from 'lodash/noop'; + +export default class MediaAttachments extends ImmutablePureComponent { + + static propTypes = { + status: ImmutablePropTypes.map.isRequired, + height: PropTypes.number, + width: PropTypes.number, + }; + + static defaultProps = { + height: 110, + width: 239, + }; + + updateOnProps = [ + 'status', + ]; + + renderLoadingMediaGallery = () => { + const { height, width } = this.props; + + return ( +
+ ); + } + + renderLoadingVideoPlayer = () => { + const { height, width } = this.props; + + return ( +
+ ); + } + + renderLoadingAudioPlayer = () => { + const { height, width } = this.props; + + return ( +
+ ); + } + + render () { + const { status, width, height } = this.props; + const mediaAttachments = status.get('media_attachments'); + + if (mediaAttachments.size === 0) { + return null; + } + + if (mediaAttachments.getIn([0, 'type']) === 'audio') { + const audio = mediaAttachments.get(0); + + return ( + + {Component => ( + + )} + + ); + } else if (mediaAttachments.getIn([0, 'type']) === 'video') { + const video = mediaAttachments.get(0); + + return ( + + {Component => ( + + )} + + ); + } else { + return ( + + {Component => ( + + )} + + ); + } + } + +} diff --git a/app/javascript/mastodon/features/report/components/status_check_box.js b/app/javascript/mastodon/features/report/components/status_check_box.js index a2eb3d6f5..373c60e21 100644 --- a/app/javascript/mastodon/features/report/components/status_check_box.js +++ b/app/javascript/mastodon/features/report/components/status_check_box.js @@ -1,14 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import noop from 'lodash/noop'; import StatusContent from 'mastodon/components/status_content'; -import { MediaGallery, Video } from 'mastodon/features/ui/util/async-components'; -import Bundle from 'mastodon/features/ui/components/bundle'; import Avatar from 'mastodon/components/avatar'; import DisplayName from 'mastodon/components/display_name'; import RelativeTimestamp from 'mastodon/components/relative_timestamp'; import Option from './option'; +import MediaAttachments from 'mastodon/components/media_attachments'; export default class StatusCheckBox extends React.PureComponent { @@ -27,51 +25,10 @@ export default class StatusCheckBox extends React.PureComponent { render () { const { status, checked } = this.props; - let media = null; - if (status.get('reblog')) { return null; } - if (status.get('media_attachments').size > 0) { - if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) { - - } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { - const video = status.getIn(['media_attachments', 0]); - - media = ( - - {Component => ( - - )} - - ); - } else { - media = ( - - {Component => ( - - )} - - ); - } - } - const labelComponent = (
@@ -79,12 +36,13 @@ export default class StatusCheckBox extends React.PureComponent {
-
·
+
+ · +
- - {media} +
); diff --git a/app/javascript/mastodon/features/ui/components/compare_history_modal.js b/app/javascript/mastodon/features/ui/components/compare_history_modal.js index 40cfba335..ecccc8f7d 100644 --- a/app/javascript/mastodon/features/ui/components/compare_history_modal.js +++ b/app/javascript/mastodon/features/ui/components/compare_history_modal.js @@ -9,6 +9,7 @@ import escapeTextContentForBrowser from 'escape-html'; import InlineAccount from 'mastodon/components/inline_account'; import IconButton from 'mastodon/components/icon_button'; import RelativeTimestamp from 'mastodon/components/relative_timestamp'; +import MediaAttachments from 'mastodon/components/media_attachments'; const mapStateToProps = (state, { statusId }) => ({ versions: state.getIn(['history', statusId, 'items']), @@ -70,6 +71,25 @@ class CompareHistoryModal extends React.PureComponent { )}
+ + {!!currentVersion.get('poll') && ( +
+
    + {currentVersion.getIn(['poll', 'options']).map(option => ( +
  • + + + +
    • + ))} +
+
+ )} + +
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 5d0d44b73..97587b62b 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1127,7 +1127,7 @@ .media-gallery, .audio-player, .video-player { - margin-top: 8px; + margin-top: 15px; max-width: 250px; } @@ -5609,6 +5609,12 @@ a.status-card.compact:hover { margin: 20px 0; } } + + .media-gallery, + .audio-player, + .video-player { + margin-top: 15px; + } } .loading-bar { diff --git a/app/models/status_edit.rb b/app/models/status_edit.rb index 6da9b4b85..e9c8fbe98 100644 --- a/app/models/status_edit.rb +++ b/app/models/status_edit.rb @@ -25,7 +25,12 @@ class StatusEdit < ApplicationRecord class PreservedMediaAttachment < ActiveModelSerializers::Model attributes :media_attachment, :description - delegate :id, :type, :url, :preview_url, :remote_url, :preview_remote_url, :text_url, :meta, :blurhash, to: :media_attachment + + delegate :id, :type, :url, :preview_url, :remote_url, + :preview_remote_url, :text_url, :meta, :blurhash, + :not_processed?, :needs_redownload?, :local?, + :file, :thumbnail, :thumbnail_remote_url, + :shortcode, to: :media_attachment end rate_limit by: :account, family: :statuses -- cgit From 29ee3c61a3d3ec98335052b579d956a518d1ac94 Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 10 Mar 2022 00:11:15 +0100 Subject: Fix report dialog being illegible using mastodon-light theme (#17734) Fixes #17726 --- app/javascript/styles/mastodon-light/diff.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index eb6bdea99..7a2dd0330 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -143,10 +143,15 @@ html { .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%); } +.report-dialog-modal .dialog-option .poll__input { + color: $white; +} + .search__input { @media screen and (max-width: $no-gap-breakpoint) { border-top: 0; @@ -342,6 +347,7 @@ html { .mute-modal, .block-modal, .report-modal, +.report-dialog-modal, .embed-modal, .error-modal, .onboarding-modal, -- cgit