From 960181fd99cad30f860356a04d8237c19e9c82c8 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
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 | 82 +++++++++++++++----
2 files changed, 100 insertions(+), 41 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 = <span><i className='fa fa-retweet' /> {intl.formatMessage(messages.reblog)}</span>;
-
return (
<div className='modal-root__modal boost-modal'>
- <IconButton title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} style={closeStyle} />
- <div>
- <DetailedStatus status={status} onOpenMedia={this.handleOpenMedia} />
+ <div className='boost-modal__container'>
+ <div className='status light'>
+ <div style={{ fontSize: '15px' }}>
+ <div style={{ float: 'right', fontSize: '14px' }}>
+ <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
+ </div>
+
+ <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px' }}>
+ <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
+ <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />
+ </div>
+
+ <DisplayName account={status.get('account')} />
+ </a>
+ </div>
+
+ <StatusContent status={status} />
+ </div>
</div>
- <div style={buttonContainerStyle}>
- <Button text={reblogButton} onClick={this.handleReblog} />
+
+ <div className='boost-modal__action-bar'>
+ <div><FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Alt + <i className='fa fa-retweet' /></span> }} /></div>
+ <Button text={intl.formatMessage(messages.reblog)} onClick={this.handleReblog} />
</div>
</div>
);
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;
+
+ .status {
+ user-select: text;
+ border-bottom: 0;
}
+}
- & > .icon-button {
- color: lighten($color1, 40%);
+.boost-modal__action-bar {
+ display: flex;
+ background: $color2;
+ padding: 10px;
+ line-height: 36px;
- &:hover, &:active {
- color: lighten($color1, 60%);
- }
+ & > div {
+ flex: 1 1 auto;
+ text-align: right;
+ color: lighten($color1, 33%);
+ padding-right: 10px;
+ }
+
+ .button {
+ flex: 0 0 auto;
}
}
--
GitLab