From 960181fd99cad30f860356a04d8237c19e9c82c8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 11 Apr 2017 21:24:17 +0200 Subject: [PATCH] Fix look of the modals --- .../features/ui/components/boost_modal.jsx | 59 ++++++++----- app/assets/stylesheets/components.scss | 86 ++++++++++++++----- 2 files changed, 102 insertions(+), 43 deletions(-) diff --git a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx index 8b91541836..023abc6ac2 100644 --- a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx +++ b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx @@ -1,27 +1,21 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import IconButton from '../../../components/icon_button'; import Button from '../../../components/button'; -import DetailedStatus from '../../status/components/detailed_status'; +import StatusContent from '../../../components/status_content'; +import Avatar from '../../../components/avatar'; +import RelativeTimestamp from '../../../components/relative_timestamp'; +import DisplayName from '../../../components/display_name'; const messages = defineMessages({ - close: { id: 'lightbox.close', defaultMessage: 'Close' }, reblog: { id: 'status.reblog', defaultMessage: 'Boost' } }); -const closeStyle = { - position: 'absolute', - top: '4px', - right: '4px' -}; - -const buttonContainerStyle = { - textAlign: 'right', - padding: '10px' -}; - const BoostModal = React.createClass({ + contextTypes: { + router: React.PropTypes.object + }, propTypes: { status: ImmutablePropTypes.map.isRequired, @@ -37,23 +31,42 @@ const BoostModal = React.createClass({ this.props.onClose(); }, - handleOpenMedia() { - // do nothing" + handleAccountClick (e) { + if (e.button === 0) { + e.preventDefault(); + this.props.onClose(); + this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`); + } }, render () { const { status, intl, onClose } = this.props; - const reblogButton = {intl.formatMessage(messages.reblog)}; - return (
- -
- +
+
+
+
+ +
+ + +
+ +
+ + +
+
+ + +
-
-
); diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 316398874b..d7473eddb8 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -349,6 +349,43 @@ a.status__content__spoiler-link { .status__display-name { color: lighten($color1, 26%); } + + &.light { + .status__relative-time { + color: $color3; + } + + .status__display-name { + color: $color1; + } + + .display-name { + strong { + color: $color1; + } + + span { + color: $color3; + } + } + + .status__content { + color: $color1; + + a { + color: $color4; + } + + a.status__content__spoiler-link { + color: $color5; + background: $color3; + + &:hover { + background: lighten($color3, 8%); + } + } + } + } } .status-check-box { @@ -1938,30 +1975,39 @@ button.icon-button.active i.fa-retweet { } .boost-modal { - display: block; - - color: white; - background: lighten($color1, 13%); - + background: lighten($color2, 8%); + color: $color1; + border-radius: 8px; + overflow: hidden; max-width: 90vw; width: 480px; - - padding-top: 25px; - border-radius: 3px; - position: relative; + flex-direction: column; +} - & .detailed-status { - pointer-events: none; - max-height: 60vh; - overflow-y: auto; - } +.boost-modal__container { + padding: 10px; - & > .icon-button { - color: lighten($color1, 40%); - - &:hover, &:active { - color: lighten($color1, 60%); - } + .status { + user-select: text; + border-bottom: 0; + } +} + +.boost-modal__action-bar { + display: flex; + background: $color2; + padding: 10px; + line-height: 36px; + + & > div { + flex: 1 1 auto; + text-align: right; + color: lighten($color1, 33%); + padding-right: 10px; + } + + .button { + flex: 0 0 auto; } }