From 21c2bc119ca2bd278339799960914a91fdfa30c1 Mon Sep 17 00:00:00 2001 From: unarist Date: Sun, 25 Jun 2017 06:18:11 +0900 Subject: [PATCH] Clean column collapsible (#3931) * Remove unused column_collapsable.js * Remove old styles * Extract `> div` style to independent class --- .../mastodon/components/column_collapsable.js | 50 ------------------- .../mastodon/components/column_header.js | 2 +- app/javascript/styles/components.scss | 41 ++------------- 3 files changed, 6 insertions(+), 87 deletions(-) delete mode 100644 app/javascript/mastodon/components/column_collapsable.js diff --git a/app/javascript/mastodon/components/column_collapsable.js b/app/javascript/mastodon/components/column_collapsable.js deleted file mode 100644 index d6b4edb9fe..0000000000 --- a/app/javascript/mastodon/components/column_collapsable.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -export default class ColumnCollapsable extends React.PureComponent { - - static propTypes = { - icon: PropTypes.string.isRequired, - title: PropTypes.string, - fullHeight: PropTypes.number.isRequired, - children: PropTypes.node, - onCollapse: PropTypes.func, - }; - - state = { - collapsed: true, - animating: false, - }; - - handleToggleCollapsed = () => { - const currentState = this.state.collapsed; - - this.setState({ collapsed: !currentState, animating: true }); - - if (!currentState && this.props.onCollapse) { - this.props.onCollapse(); - } - } - - handleTransitionEnd = () => { - this.setState({ animating: false }); - } - - render () { - const { icon, title, fullHeight, children } = this.props; - const { collapsed, animating } = this.state; - - return ( -
-
- -
- -
- {(!collapsed || animating) && children} -
-
- ); - } - -} diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index a309f74e8a..ec9379320f 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -132,7 +132,7 @@ export default class ColumnHeader extends React.PureComponent {
-
+
{(!collapsed || animating) && collapsedContent}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index c2062c398f..4b4f72cf7a 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -58,37 +58,6 @@ position: relative; } -.column-collapsable { - position: relative; - - .column-collapsable__content { - overflow: auto; - transition: 300ms ease; - opacity: 1; - max-height: 70vh; - } - - &.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 { background: lighten($ui-base-color, 4%); color: $ui-primary-color; @@ -2110,11 +2079,6 @@ button.icon-button.active i.fa-retweet { transition: max-height 150ms ease-in-out, opacity 300ms linear; opacity: 1; - & > div { - background: lighten($ui-base-color, 8%); - padding: 15px; - } - &.collapsed { max-height: 0; opacity: 0.5; @@ -2125,6 +2089,11 @@ button.icon-button.active i.fa-retweet { } } +.column-header__collapsible-inner { + background: lighten($ui-base-color, 8%); + padding: 15px; +} + .column-header__setting-btn { &:hover { color: lighten($ui-primary-color, 4%);