From aa884e04848a6c06dbf7c27ae7a3fcc7d379792d Mon Sep 17 00:00:00 2001 From: ThibG Date: Thu, 24 Oct 2019 22:46:59 +0200 Subject: Fix batch actions being hidden from mobile view (#12183) On mobile, batch actions are hidden from the settings/admin interface, but there are several places those actions can only be performed through batch actions. This may not look great, but at least it makes the actions available again. --- app/javascript/styles/mastodon/tables.scss | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index 5a6e10aa4..62f5554ff 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -149,10 +149,6 @@ a.table-action-link { margin-top: 0; } } - - @media screen and (max-width: $no-gap-breakpoint) { - display: none; - } } &__actions, @@ -174,10 +170,6 @@ a.table-action-link { text-align: right; padding-right: 16px - 5px; } - - @media screen and (max-width: $no-gap-breakpoint) { - display: none; - } } &__form { @@ -198,7 +190,7 @@ a.table-action-link { background: darken($ui-base-color, 4%); @media screen and (max-width: $no-gap-breakpoint) { - &:first-child { + .optional &:first-child { border-top: 1px solid darken($ui-base-color, 8%); } } @@ -264,6 +256,13 @@ a.table-action-link { } } + &.optional .batch-table__toolbar, + &.optional .batch-table__row__select { + @media screen and (max-width: $no-gap-breakpoint) { + display: none; + } + } + .status__content { padding-top: 0; -- cgit From 547a5bac9d9c909b306933596bc121b63809d772 Mon Sep 17 00:00:00 2001 From: Hinaloe Date: Fri, 25 Oct 2019 05:47:37 +0900 Subject: don't show outline of full-screen video (#12176) --- 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 86425c47c..0fe86bf16 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5194,6 +5194,7 @@ a.status-card.compact:hover { max-height: 100% !important; width: 100% !important; height: 100% !important; + outline: 0; } } -- cgit From 3a929dbedd31ea67723746bdf387e22e66e247cd Mon Sep 17 00:00:00 2001 From: ThibG Date: Thu, 24 Oct 2019 22:47:48 +0200 Subject: Replace fav icon animation with CSS (#12175) Fixes #12151 --- app/javascript/mastodon/components/icon_button.js | 84 ++++++++++------------- app/javascript/styles/mastodon/components.scss | 58 ++++++++++++++++ 2 files changed, 96 insertions(+), 46 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js index 401675052..fd715bc3c 100644 --- a/app/javascript/mastodon/components/icon_button.js +++ b/app/javascript/mastodon/components/icon_button.js @@ -1,6 +1,4 @@ import React from 'react'; -import Motion from '../features/ui/util/optional_motion'; -import spring from 'react-motion/lib/spring'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import Icon from 'mastodon/components/icon'; @@ -37,6 +35,21 @@ export default class IconButton extends React.PureComponent { tabIndex: '0', }; + state = { + activate: false, + deactivate: false, + } + + componentWillReceiveProps (nextProps) { + if (!nextProps.animate) return; + + if (this.props.active && !nextProps.active) { + this.setState({ activate: false, deactivate: true }); + } else if (!this.props.active && nextProps.active) { + this.setState({ activate: true, deactivate: false }); + } + } + handleClick = (e) => { e.preventDefault(); @@ -75,7 +88,6 @@ export default class IconButton extends React.PureComponent { const { active, - animate, className, disabled, expanded, @@ -87,57 +99,37 @@ export default class IconButton extends React.PureComponent { title, } = this.props; + const { + activate, + deactivate, + } = this.state; + const classes = classNames(className, 'icon-button', { active, disabled, inverted, + activate, + deactivate, overlayed: overlay, }); - if (!animate) { - // Perf optimization: avoid unnecessary components unless - // we actually need to animate. - return ( - - ); - } - return ( - - {({ rotate }) => ( - - )} - + ); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 0fe86bf16..52fe3bed0 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1591,6 +1591,20 @@ a.account__display-name { color: $gold-star; } +.no-reduce-motion .icon-button.star-icon { + &.activate { + & > .fa-star { + animation: spring-rotate-in 1s linear; + } + } + + &.deactivate { + & > .fa-star { + animation: spring-rotate-out 1s linear; + } + } +} + .notification__display-name { color: inherit; font-weight: 500; @@ -3373,6 +3387,50 @@ a.status-card.compact:hover { animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } +@keyframes spring-rotate-in { + 0% { + transform: rotate(0deg); + } + + 30% { + transform: rotate(-484.8deg); + } + + 60% { + transform: rotate(-316.7deg); + } + + 90% { + transform: rotate(-375deg); + } + + 100% { + transform: rotate(-360deg); + } +} + +@keyframes spring-rotate-out { + 0% { + transform: rotate(-360deg); + } + + 30% { + transform: rotate(124.8deg); + } + + 60% { + transform: rotate(-43.27deg); + } + + 90% { + transform: rotate(15deg); + } + + 100% { + transform: rotate(0deg); + } +} + @keyframes loader-figure { 0% { width: 0; -- cgit From 9b36f62df63003419cb2ca08e77f2fa69fed91ad Mon Sep 17 00:00:00 2001 From: Nima Boscarino Date: Fri, 25 Oct 2019 02:48:20 -0700 Subject: Add download button to audio and video players (#12179) * Add download button for audio player * Add download button for video player * fix padding for download button in Audio component --- app/javascript/mastodon/features/audio/index.js | 9 +++++++++ app/javascript/mastodon/features/video/index.js | 7 +++++++ app/javascript/mastodon/locales/defaultMessages.json | 4 ++++ app/javascript/styles/mastodon/components.scss | 4 ++++ 4 files changed, 24 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js index d3b309f0f..1b4cdbb4f 100644 --- a/app/javascript/mastodon/features/audio/index.js +++ b/app/javascript/mastodon/features/audio/index.js @@ -12,6 +12,7 @@ const messages = defineMessages({ pause: { id: 'video.pause', defaultMessage: 'Pause' }, mute: { id: 'video.mute', defaultMessage: 'Mute sound' }, unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' }, + download: { id: 'video.download', defaultMessage: 'Download file' }, }); export default @injectIntl @@ -218,6 +219,14 @@ class Audio extends React.PureComponent { {formatTime(this.state.duration || Math.floor(this.props.duration))} + +
+ +
diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js index 07051ddf3..7ca477d35 100644 --- a/app/javascript/mastodon/features/video/index.js +++ b/app/javascript/mastodon/features/video/index.js @@ -19,6 +19,7 @@ const messages = defineMessages({ close: { id: 'video.close', defaultMessage: 'Close video' }, fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' }, exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' }, + download: { id: 'video.download', defaultMessage: 'Download file' }, }); export const formatTime = secondsNum => { @@ -494,7 +495,13 @@ class Video extends React.PureComponent { {(!onCloseVideo && !editable) && } {(!fullscreen && onOpenVideo) && } {onCloseVideo && } + + diff --git a/app/javascript/mastodon/locales/defaultMessages.json b/app/javascript/mastodon/locales/defaultMessages.json index 8ab40ce3c..4778ed56f 100644 --- a/app/javascript/mastodon/locales/defaultMessages.json +++ b/app/javascript/mastodon/locales/defaultMessages.json @@ -776,6 +776,10 @@ { "defaultMessage": "Unmute sound", "id": "video.unmute" + }, + { + "defaultMessage": "Download file", + "id": "video.download" } ], "path": "app/javascript/mastodon/features/audio/index.json" diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 52fe3bed0..417e8c899 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5330,6 +5330,10 @@ a.status-card.compact:hover { display: flex; justify-content: space-between; padding-bottom: 10px; + + .video-player__download__icon { + color: inherit; + } } &__buttons { -- cgit