From 3722f908655b8de7669c89c10aeff10a2c07d277 Mon Sep 17 00:00:00 2001 From: unarist Date: Wed, 17 May 2017 07:24:46 +0900 Subject: [PATCH] Make .column-collapse animation simple (#3086) * Always set `overflow: auto` to allow scroll just after opening * Remove bounce animation which may cause unintended behavior due to max-height * Use CSS transition instead of react-motion * Some CSS refactoring including className changing --- .../mastodon/components/column_collapsable.js | 16 +++----- app/javascript/styles/components.scss | 41 ++++++++++++------- 2 files changed, 31 insertions(+), 26 deletions(-) diff --git a/app/javascript/mastodon/components/column_collapsable.js b/app/javascript/mastodon/components/column_collapsable.js index 3154c977f..a54f76932 100644 --- a/app/javascript/mastodon/components/column_collapsable.js +++ b/app/javascript/mastodon/components/column_collapsable.js @@ -1,5 +1,4 @@ import React from 'react'; -import { Motion, spring } from 'react-motion'; import PropTypes from 'prop-types'; class ColumnCollapsable extends React.PureComponent { @@ -29,21 +28,16 @@ class ColumnCollapsable extends React.PureComponent { render () { const { icon, title, fullHeight, children } = this.props; const { collapsed } = this.state; - const collapsedClassName = collapsed ? 'collapsable-collapsed' : 'collapsable'; return ( -
-
+
+
- - {({ opacity, height }) => -
- {children} -
- } -
+
+ {children} +
); } diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 4de8b7969..3c90ae728 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -48,6 +48,32 @@ .column-collapsable { position: relative; + + .column-collapsable__content { + overflow: auto; + transition: 300ms ease; + opacity: 1; + } + + &.collapsed .column-collapsable__content { + height: 0 !important; + opacity: 0; + } + + .column-collapsable__button { + color: $primary-text-color; + background: lighten($ui-base-color, 8%); + + &:hover { + color: $primary-text-color; + background: lighten($ui-base-color, 8%); + } + } + + &.collapsed .column-collapsable__button { + color: $ui-primary-color; + background: lighten($ui-base-color, 4%); + } } .column-icon { @@ -1984,21 +2010,6 @@ button.icon-button.active i.fa-retweet { text-align: center; } -.collapsable-collapsed { - color: $ui-primary-color; - background: lighten($ui-base-color, 4%); -} - -.collapsable { - color: $primary-text-color; - background: lighten($ui-base-color, 8%); - - &:hover { - color: $primary-text-color; - background: lighten($ui-base-color, 8%); - } -} - .video-error-cover { align-items: center; background: $base-overlay-background;