@@ -22,6 +22,8 @@ export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT'; | |||
export const COMPOSE_MOUNT = 'COMPOSE_MOUNT'; | |||
export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT'; | |||
export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE'; | |||
export function changeCompose(text) { | |||
return { | |||
type: COMPOSE_CHANGE, | |||
@@ -62,7 +64,8 @@ export function submitCompose() { | |||
api(getState).post('/api/v1/statuses', { | |||
status: getState().getIn(['compose', 'text'], ''), | |||
in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null), | |||
media_ids: getState().getIn(['compose', 'media_attachments']).map(item => item.get('id')) | |||
media_ids: getState().getIn(['compose', 'media_attachments']).map(item => item.get('id')), | |||
sensitive: getState().getIn(['compose', 'sensitive']) | |||
}).then(function (response) { | |||
dispatch(submitComposeSuccess(response.data)); | |||
dispatch(updateTimeline('home', response.data)); | |||
@@ -197,3 +200,10 @@ export function unmountCompose() { | |||
type: COMPOSE_UNMOUNT | |||
}; | |||
}; | |||
export function changeComposeSensitivity(checked) { | |||
return { | |||
type: COMPOSE_SENSITIVITY_CHANGE, | |||
checked | |||
}; | |||
}; |
@@ -14,16 +14,20 @@ const spoilerStyle = { | |||
color: '#fff', | |||
textAlign: 'center', | |||
height: '100%', | |||
cursor: 'pointer' | |||
cursor: 'pointer', | |||
display: 'flex', | |||
alignItems: 'center', | |||
justifyContent: 'center', | |||
flexDirection: 'column' | |||
}; | |||
const spoilerSpanStyle = { | |||
display: 'block', | |||
fontSize: '14px', | |||
paddingTop: '45%' | |||
}; | |||
const spoilerSubSpanStyle = { | |||
display: 'block', | |||
fontSize: '11px', | |||
fontWeight: '500' | |||
}; | |||
@@ -26,20 +26,25 @@ const muteStyle = { | |||
}; | |||
const spoilerStyle = { | |||
marginTop: '8px', | |||
background: '#000', | |||
color: '#fff', | |||
textAlign: 'center', | |||
height: '100%', | |||
cursor: 'pointer' | |||
cursor: 'pointer', | |||
display: 'flex', | |||
alignItems: 'center', | |||
justifyContent: 'center', | |||
flexDirection: 'column' | |||
}; | |||
const spoilerSpanStyle = { | |||
display: 'block', | |||
fontSize: '14px', | |||
paddingTop: '45%' | |||
fontSize: '14px' | |||
}; | |||
const spoilerSubSpanStyle = { | |||
display: 'block', | |||
fontSize: '11px', | |||
fontWeight: '500' | |||
}; | |||
@@ -92,7 +97,7 @@ const VideoPlayer = React.createClass({ | |||
if (sensitive && !this.state.visible) { | |||
return ( | |||
<div style={spoilerStyle} onClick={this.handleOpen}> | |||
<div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} onClick={this.handleOpen}> | |||
<span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span> | |||
<span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> | |||
</div> | |||
@@ -9,6 +9,7 @@ import AutosuggestAccountContainer from '../../compose/containers/autosuggest_ac | |||
import { debounce } from 'react-decoration'; | |||
import UploadButtonContainer from '../containers/upload_button_container'; | |||
import { defineMessages, injectIntl } from 'react-intl'; | |||
import Toggle from 'react-toggle'; | |||
const messages = defineMessages({ | |||
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, | |||
@@ -67,6 +68,7 @@ const ComposeForm = React.createClass({ | |||
text: React.PropTypes.string.isRequired, | |||
suggestion_token: React.PropTypes.string, | |||
suggestions: React.PropTypes.array, | |||
sensitive: React.PropTypes.bool, | |||
is_submitting: React.PropTypes.bool, | |||
is_uploading: React.PropTypes.bool, | |||
in_reply_to: ImmutablePropTypes.map, | |||
@@ -75,7 +77,8 @@ const ComposeForm = React.createClass({ | |||
onCancelReply: React.PropTypes.func.isRequired, | |||
onClearSuggestions: React.PropTypes.func.isRequired, | |||
onFetchSuggestions: React.PropTypes.func.isRequired, | |||
onSuggestionSelected: React.PropTypes.func.isRequired | |||
onSuggestionSelected: React.PropTypes.func.isRequired, | |||
onChangeSensitivity: React.PropTypes.func.isRequired | |||
}, | |||
mixins: [PureRenderMixin], | |||
@@ -139,6 +142,10 @@ const ComposeForm = React.createClass({ | |||
this.autosuggest = c; | |||
}, | |||
handleChangeSensitivity (e) { | |||
this.props.onChangeSensitivity(e.target.checked); | |||
}, | |||
render () { | |||
const { intl } = this.props; | |||
let replyArea = ''; | |||
@@ -178,6 +185,11 @@ const ComposeForm = React.createClass({ | |||
<div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={this.props.text} /></div> | |||
<UploadButtonContainer style={{ paddingTop: '4px' }} /> | |||
</div> | |||
<label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', marginTop: '10px', borderTop: '1px solid #616b86', paddingTop: '10px' }}> | |||
<Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} /> | |||
<span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}>Sensitive content</span> | |||
</label> | |||
</div> | |||
); | |||
} | |||
@@ -6,7 +6,8 @@ import { | |||
cancelReplyCompose, | |||
clearComposeSuggestions, | |||
fetchComposeSuggestions, | |||
selectComposeSuggestion | |||
selectComposeSuggestion, | |||
changeComposeSensitivity | |||
} from '../../../actions/compose'; | |||
import { makeGetStatus } from '../../../selectors'; | |||
@@ -18,6 +19,7 @@ const makeMapStateToProps = () => { | |||
text: state.getIn(['compose', 'text']), | |||
suggestion_token: state.getIn(['compose', 'suggestion_token']), | |||
suggestions: state.getIn(['compose', 'suggestions']).toJS(), | |||
sensitive: state.getIn(['compose', 'sensitive']), | |||
is_submitting: state.getIn(['compose', 'is_submitting']), | |||
is_uploading: state.getIn(['compose', 'is_uploading']), | |||
in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])) | |||
@@ -51,6 +53,10 @@ const mapDispatchToProps = function (dispatch) { | |||
onSuggestionSelected (position, accountId) { | |||
dispatch(selectComposeSuggestion(position, accountId)); | |||
}, | |||
onChangeSensitivity (checked) { | |||
dispatch(changeComposeSensitivity(checked)); | |||
} | |||
} | |||
}; | |||
@@ -36,9 +36,9 @@ const DetailedStatus = React.createClass({ | |||
if (status.get('media_attachments').size > 0) { | |||
if (status.getIn(['media_attachments', 0, 'type']) === 'video') { | |||
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} width={317} height={178} />; | |||
media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={317} height={178} />; | |||
} else { | |||
media = <MediaGallery media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />; | |||
media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />; | |||
} | |||
} | |||
@@ -15,7 +15,8 @@ import { | |||
COMPOSE_UPLOAD_PROGRESS, | |||
COMPOSE_SUGGESTIONS_CLEAR, | |||
COMPOSE_SUGGESTIONS_READY, | |||
COMPOSE_SUGGESTION_SELECT | |||
COMPOSE_SUGGESTION_SELECT, | |||
COMPOSE_SENSITIVITY_CHANGE | |||
} from '../actions/compose'; | |||
import { TIMELINE_DELETE } from '../actions/timelines'; | |||
import { ACCOUNT_SET_SELF } from '../actions/accounts'; | |||
@@ -23,6 +24,7 @@ import Immutable from 'immutable'; | |||
const initialState = Immutable.Map({ | |||
mounted: false, | |||
sensitive: false, | |||
text: '', | |||
in_reply_to: null, | |||
is_submitting: false, | |||
@@ -87,6 +89,8 @@ export default function compose(state = initialState, action) { | |||
return state.set('mounted', true); | |||
case COMPOSE_UNMOUNT: | |||
return state.set('mounted', false); | |||
case COMPOSE_SENSITIVITY_CHANGE: | |||
return state.set('sensitive', action.checked); | |||
case COMPOSE_CHANGE: | |||
return state.set('text', action.text); | |||
case COMPOSE_REPLY: | |||
@@ -405,3 +405,109 @@ | |||
text-decoration: underline; | |||
} | |||
} | |||
.react-toggle { | |||
display: inline-block; | |||
position: relative; | |||
cursor: pointer; | |||
background-color: transparent; | |||
border: 0; | |||
padding: 0; | |||
user-select: none; | |||
-webkit-tap-highlight-color: rgba(0,0,0,0); | |||
-webkit-tap-highlight-color: transparent; | |||
} | |||
.react-toggle-screenreader-only { | |||
border: 0; | |||
clip: rect(0 0 0 0); | |||
height: 1px; | |||
margin: -1px; | |||
overflow: hidden; | |||
padding: 0; | |||
position: absolute; | |||
width: 1px; | |||
} | |||
.react-toggle--disabled { | |||
cursor: not-allowed; | |||
opacity: 0.5; | |||
transition: opacity 0.25s; | |||
} | |||
.react-toggle-track { | |||
width: 50px; | |||
height: 24px; | |||
padding: 0; | |||
border-radius: 30px; | |||
background-color: #282c37; | |||
transition: all 0.2s ease; | |||
} | |||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { | |||
background-color: darken(#282c37, 10%); | |||
} | |||
.react-toggle--checked .react-toggle-track { | |||
background-color: #2b90d9; | |||
} | |||
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { | |||
background-color: lighten(#2b90d9, 10%); | |||
} | |||
.react-toggle-track-check { | |||
position: absolute; | |||
width: 14px; | |||
height: 10px; | |||
top: 0px; | |||
bottom: 0px; | |||
margin-top: auto; | |||
margin-bottom: auto; | |||
line-height: 0; | |||
left: 8px; | |||
opacity: 0; | |||
transition: opacity 0.25s ease; | |||
} | |||
.react-toggle--checked .react-toggle-track-check { | |||
opacity: 1; | |||
transition: opacity 0.25s ease; | |||
} | |||
.react-toggle-track-x { | |||
position: absolute; | |||
width: 10px; | |||
height: 10px; | |||
top: 0px; | |||
bottom: 0px; | |||
margin-top: auto; | |||
margin-bottom: auto; | |||
line-height: 0; | |||
right: 10px; | |||
opacity: 1; | |||
transition: opacity 0.25s ease; | |||
} | |||
.react-toggle--checked .react-toggle-track-x { | |||
opacity: 0; | |||
} | |||
.react-toggle-thumb { | |||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; | |||
position: absolute; | |||
top: 1px; | |||
left: 1px; | |||
width: 22px; | |||
height: 22px; | |||
border: 1px solid #282c37; | |||
border-radius: 50%; | |||
background-color: #FAFAFA; | |||
box-sizing: border-box; | |||
transition: all 0.25s ease; | |||
} | |||
.react-toggle--checked .react-toggle-thumb { | |||
left: 27px; | |||
border-color: #2b90d9; | |||
} |
@@ -8,6 +8,7 @@ | |||
"@kadira/storybook": "^2.24.0", | |||
"axios": "^0.14.0", | |||
"babel-plugin-react-transform": "^2.0.2", | |||
"babel-plugin-transform-decorators-legacy": "^1.3.4", | |||
"babel-plugin-transform-object-rest-spread": "^6.8.0", | |||
"babel-preset-es2015": "^6.13.2", | |||
"babel-preset-react": "^6.11.1", | |||
@@ -16,37 +17,39 @@ | |||
"browserify-incremental": "^3.1.1", | |||
"chai": "^3.5.0", | |||
"chai-enzyme": "^0.5.2", | |||
"emojione": "^2.2.6", | |||
"enzyme": "^2.4.1", | |||
"es6-promise": "^3.2.1", | |||
"http-link-header": "^0.5.0", | |||
"immutable": "^3.8.1", | |||
"intl": "^1.2.5", | |||
"jsdom": "^9.6.0", | |||
"mocha": "^3.1.1", | |||
"react": "^15.3.2", | |||
"react-addons-perf": "^15.3.2", | |||
"react-addons-pure-render-mixin": "^15.3.1", | |||
"react-addons-test-utils": "^15.3.2", | |||
"react-autosuggest": "^7.0.1", | |||
"react-decoration": "^1.4.0", | |||
"react-dom": "^15.3.0", | |||
"react-immutable-proptypes": "^2.1.0", | |||
"react-intl": "^2.1.5", | |||
"react-motion": "^0.4.5", | |||
"react-notification": "^6.4.0", | |||
"react-proxy": "^1.1.8", | |||
"react-redux": "^5.0.0-beta.3", | |||
"react-redux-loading-bar": "^2.4.1", | |||
"react-responsive": "^1.1.5", | |||
"react-router": "^2.8.0", | |||
"react-router-scroll": "^0.3.2", | |||
"react-simple-dropdown": "^1.1.4", | |||
"redux": "^3.5.2", | |||
"redux-immutable": "^3.0.8", | |||
"redux-thunk": "^2.1.0", | |||
"reselect": "^2.5.4", | |||
"sinon": "^1.17.6", | |||
"babel-plugin-transform-decorators-legacy": "^1.3.4", | |||
"emojione": "^2.2.6", | |||
"http-link-header": "^0.5.0", | |||
"intl": "^1.2.5", | |||
"react-autosuggest": "^7.0.1", | |||
"react-decoration": "^1.4.0", | |||
"react-intl": "^2.1.5", | |||
"react-motion": "^0.4.5", | |||
"react-responsive": "^1.1.5", | |||
"react-router-scroll": "^0.3.2" | |||
"sinon": "^1.17.6" | |||
}, | |||
"dependencies": { | |||
"react-toggle": "^2.1.1" | |||
} | |||
} |
@@ -1335,7 +1335,7 @@ clap@^1.0.9: | |||
dependencies: | |||
chalk "^1.1.3" | |||
classnames@^2.1.2, classnames@^2.2.3: | |||
classnames@^2.1.2, classnames@^2.2.3, classnames@~2.2: | |||
version "2.2.5" | |||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" | |||
@@ -3841,7 +3841,7 @@ react-addons-perf@^15.3.2: | |||
version "15.3.2" | |||
resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.3.2.tgz#bbdbebe8649f936f9636a5750ac145bf5c620213" | |||
react-addons-pure-render-mixin@^15.3.1: | |||
react-addons-pure-render-mixin@>=0.14.0, react-addons-pure-render-mixin@^15.3.1: | |||
version "15.3.2" | |||
resolved "https://registry.yarnpkg.com/react-addons-pure-render-mixin/-/react-addons-pure-render-mixin-15.3.2.tgz#c5f54764667ead26e6cdf7178b6c8dbbd8463ec2" | |||
@@ -4022,6 +4022,13 @@ react-themeable@^1.1.0: | |||
dependencies: | |||
object-assign "^3.0.0" | |||
react-toggle@^2.1.1: | |||
version "2.1.1" | |||
resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-2.1.1.tgz#80600a64417a1acc8aaa4c1477f7fbdb88b988fb" | |||
dependencies: | |||
classnames "~2.2" | |||
react-addons-pure-render-mixin ">=0.14.0" | |||
react@^15.3.2: | |||
version "15.3.2" | |||
resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e" | |||