@@ -123,6 +123,10 @@ export function submitComposeFail(error) { | |||
export function uploadCompose(files) { | |||
return function (dispatch, getState) { | |||
if (getState().getIn(['compose', 'media_attachments']).size > 3) { | |||
return; | |||
} | |||
dispatch(uploadComposeRequest()); | |||
let data = new FormData(); | |||
@@ -231,17 +235,15 @@ export function unmountCompose() { | |||
}; | |||
}; | |||
export function changeComposeSensitivity(checked) { | |||
export function changeComposeSensitivity() { | |||
return { | |||
type: COMPOSE_SENSITIVITY_CHANGE, | |||
checked | |||
}; | |||
}; | |||
export function changeComposeSpoilerness(checked) { | |||
export function changeComposeSpoilerness() { | |||
return { | |||
type: COMPOSE_SPOILERNESS_CHANGE, | |||
checked | |||
type: COMPOSE_SPOILERNESS_CHANGE | |||
}; | |||
}; | |||
@@ -252,17 +254,10 @@ export function changeComposeSpoilerText(text) { | |||
}; | |||
}; | |||
export function changeComposeVisibility(checked) { | |||
export function changeComposeVisibility(value) { | |||
return { | |||
type: COMPOSE_VISIBILITY_CHANGE, | |||
checked | |||
}; | |||
}; | |||
export function changeComposeListability(checked) { | |||
return { | |||
type: COMPOSE_LISTABILITY_CHANGE, | |||
checked | |||
value | |||
}; | |||
}; | |||
@@ -12,6 +12,7 @@ const IconButton = React.createClass({ | |||
style: React.PropTypes.object, | |||
activeStyle: React.PropTypes.object, | |||
disabled: React.PropTypes.bool, | |||
inverted: React.PropTypes.bool, | |||
animate: React.PropTypes.bool | |||
}, | |||
@@ -36,10 +37,6 @@ const IconButton = React.createClass({ | |||
render () { | |||
let style = { | |||
display: 'inline-block', | |||
border: 'none', | |||
padding: '0', | |||
background: 'transparent', | |||
fontSize: `${this.props.size}px`, | |||
width: `${this.props.size * 1.28571429}px`, | |||
height: `${this.props.size}px`, | |||
@@ -57,7 +54,7 @@ const IconButton = React.createClass({ | |||
<button | |||
aria-label={this.props.title} | |||
title={this.props.title} | |||
className={`icon-button ${this.props.active ? 'active' : ''} ${this.props.disabled ? 'disabled' : ''}`} | |||
className={`icon-button ${this.props.active ? 'active' : ''} ${this.props.disabled ? 'disabled' : ''} ${this.props.inverted ? 'inverted' : ''}`} | |||
onClick={this.handleClick} | |||
style={style}> | |||
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' /> | |||
@@ -3,19 +3,18 @@ import Button from '../../../components/button'; | |||
import PureRenderMixin from 'react-addons-pure-render-mixin'; | |||
import ImmutablePropTypes from 'react-immutable-proptypes'; | |||
import ReplyIndicatorContainer from '../containers/reply_indicator_container'; | |||
import UploadButton from './upload_button'; | |||
import AutosuggestTextarea from '../../../components/autosuggest_textarea'; | |||
import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container'; | |||
import { debounce } from 'react-decoration'; | |||
import UploadButtonContainer from '../containers/upload_button_container'; | |||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | |||
import Toggle from 'react-toggle'; | |||
import Collapsable from '../../../components/collapsable'; | |||
import UnlistedToggleContainer from '../containers/unlisted_toggle_container'; | |||
import SpoilerToggleContainer from '../containers/spoiler_toggle_container'; | |||
import PrivateToggleContainer from '../containers/private_toggle_container'; | |||
import SensitiveToggleContainer from '../containers/sensitive_toggle_container'; | |||
import SpoilerButtonContainer from '../containers/spoiler_button_container'; | |||
import PrivacyDropdownContainer from '../containers/privacy_dropdown_container'; | |||
import SensitiveButtonContainer from '../containers/sensitive_button_container'; | |||
import EmojiPickerDropdown from './emoji_picker_dropdown'; | |||
import UploadFormContainer from '../containers/upload_form_container'; | |||
import TextIconButton from './text_icon_button'; | |||
const messages = defineMessages({ | |||
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, | |||
@@ -156,33 +155,39 @@ const ComposeForm = React.createClass({ | |||
<ReplyIndicatorContainer /> | |||
<AutosuggestTextarea | |||
ref={this.setAutosuggestTextarea} | |||
placeholder={intl.formatMessage(messages.placeholder)} | |||
disabled={disabled} | |||
value={this.props.text} | |||
onChange={this.handleChange} | |||
suggestions={this.props.suggestions} | |||
onKeyDown={this.handleKeyDown} | |||
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} | |||
onSuggestionsClearRequested={this.onSuggestionsClearRequested} | |||
onSuggestionSelected={this.onSuggestionSelected} | |||
onPaste={onPaste} | |||
/> | |||
<div style={{ marginTop: '10px', overflow: 'hidden' }}> | |||
<div style={{ float: 'right' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled} /></div> | |||
<div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={[this.props.spoiler_text, this.props.text].join('')} /></div> | |||
<div style={{ display: 'flex', paddingTop: '4px' }}> | |||
<div style={{ position: 'relative' }}> | |||
<AutosuggestTextarea | |||
ref={this.setAutosuggestTextarea} | |||
placeholder={intl.formatMessage(messages.placeholder)} | |||
disabled={disabled} | |||
value={this.props.text} | |||
onChange={this.handleChange} | |||
suggestions={this.props.suggestions} | |||
onKeyDown={this.handleKeyDown} | |||
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} | |||
onSuggestionsClearRequested={this.onSuggestionsClearRequested} | |||
onSuggestionSelected={this.onSuggestionSelected} | |||
onPaste={onPaste} | |||
/> | |||
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} /> | |||
</div> | |||
<div className='compose-form__modifiers'> | |||
<UploadFormContainer /> | |||
</div> | |||
<div style={{ display: 'flex' }}> | |||
<div className='compose-form__buttons'> | |||
<UploadButtonContainer /> | |||
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} /> | |||
<PrivacyDropdownContainer /> | |||
<SensitiveButtonContainer /> | |||
<SpoilerButtonContainer /> | |||
</div> | |||
</div> | |||
<SpoilerToggleContainer /> | |||
<PrivateToggleContainer /> | |||
<UnlistedToggleContainer /> | |||
<SensitiveToggleContainer /> | |||
<div style={{ paddingTop: '10px', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={[this.props.spoiler_text, this.props.text].join('')} /></div> | |||
<div style={{ paddingTop: '10px' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled} /></div> | |||
</div> | |||
</div> | |||
); | |||
} | |||
@@ -13,6 +13,12 @@ const settings = { | |||
imagePathPNG: '/emoji/' | |||
}; | |||
const style = { | |||
position: 'absolute', | |||
right: '5px', | |||
top: '5px' | |||
}; | |||
const EmojiPickerDropdown = React.createClass({ | |||
propTypes: { | |||
@@ -35,12 +41,12 @@ const EmojiPickerDropdown = React.createClass({ | |||
const { intl } = this.props; | |||
return ( | |||
<Dropdown ref={this.setRef} style={{ marginLeft: '5px' }}> | |||
<DropdownTrigger className='icon-button emoji-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}> | |||
<img className="emojione" alt="🙂" src="/emoji/1f642.png" /> | |||
<Dropdown ref={this.setRef} style={style}> | |||
<DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}> | |||
<img className="emojione" alt="🙂" src="/emoji/1f602.png" /> | |||
</DropdownTrigger> | |||
<DropdownContent> | |||
<DropdownContent className='dropdown__left'> | |||
<EmojiPicker emojione={settings} onChange={this.handleChange} /> | |||
</DropdownContent> | |||
</Dropdown> | |||
@@ -0,0 +1,83 @@ | |||
import PureRenderMixin from 'react-addons-pure-render-mixin'; | |||
import { FormattedMessage } from 'react-intl'; | |||
import IconButton from '../../../components/icon_button'; | |||
const PrivacyDropdown = React.createClass({ | |||
propTypes: { | |||
value: React.PropTypes.string.isRequired, | |||
onChange: React.PropTypes.func.isRequired | |||
}, | |||
getInitialState () { | |||
return { | |||
open: false | |||
}; | |||
}, | |||
mixins: [PureRenderMixin], | |||
handleToggle () { | |||
this.setState({ open: !this.state.open }); | |||
}, | |||
handleClick (value, e) { | |||
e.preventDefault(); | |||
this.setState({ open: false }); | |||
this.props.onChange(value); | |||
}, | |||
onGlobalClick (e) { | |||
if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) { | |||
this.setState({ open: false }); | |||
} | |||
}, | |||
componentDidMount () { | |||
window.addEventListener('click', this.onGlobalClick); | |||
window.addEventListener('touchstart', this.onGlobalClick); | |||
}, | |||
componentWillUnmount () { | |||
window.removeEventListener('click', this.onGlobalClick); | |||
window.removeEventListener('touchstart', this.onGlobalClick); | |||
}, | |||
setRef (c) { | |||
this.node = c; | |||
}, | |||
render () { | |||
const { value, onChange } = this.props; | |||
const { open } = this.state; | |||
const options = [ | |||
{ icon: 'globe', value: 'public', shortText: 'Public', longText: 'Anyone can see' }, | |||
{ icon: 'globe', value: 'unlisted', shortText: 'Unlisted', longText: 'Anyone can see' }, | |||
{ icon: 'lock', value: 'private', shortText: 'Private', longText: 'Followers can see' }, | |||
{ icon: 'send', value: 'direct', shortText: 'Direct', longText: 'Mentions can see' } | |||
]; | |||
const valueOption = options.find(item => item.value === value); | |||
return ( | |||
<div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}> | |||
<div className='privacy-dropdown__value'><IconButton icon={valueOption.icon} size={22} active={open} inverted onClick={this.handleToggle} /></div> | |||
<div className='privacy-dropdown__dropdown'> | |||
{options.map(item => | |||
<div key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}> | |||
<div className='privacy-dropdown__option__icon'><i className={`fa fa-fw fa-${item.icon}`} /></div> | |||
<div className='privacy-dropdown__option__content'> | |||
<strong>{item.shortText}</strong> | |||
{item.longText} | |||
</div> | |||
</div> | |||
)} | |||
</div> | |||
</div> | |||
); | |||
} | |||
}); | |||
export default PrivacyDropdown; |
@@ -1,27 +0,0 @@ | |||
import PureRenderMixin from 'react-addons-pure-render-mixin'; | |||
import { FormattedMessage } from 'react-intl'; | |||
import Toggle from 'react-toggle'; | |||
const PrivateToggle = React.createClass({ | |||
propTypes: { | |||
isPrivate: React.PropTypes.bool, | |||
onChange: React.PropTypes.func.isRequired | |||
}, | |||
mixins: [PureRenderMixin], | |||
render () { | |||
const { isPrivate, onChange } = this.props; | |||
return ( | |||
<label className='compose-form__label with-border'> | |||
<Toggle checked={isPrivate} onChange={onChange} /> | |||
<span className='compose-form__label__text'><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span> | |||
</label> | |||
); | |||
} | |||
}); | |||
export default PrivateToggle; |
@@ -0,0 +1,31 @@ | |||
import PureRenderMixin from 'react-addons-pure-render-mixin'; | |||
const TextIconButton = React.createClass({ | |||
propTypes: { | |||
label: React.PropTypes.string.isRequired, | |||
title: React.PropTypes.string, | |||
active: React.PropTypes.bool, | |||
onClick: React.PropTypes.func.isRequired | |||
}, | |||
mixins: [PureRenderMixin], | |||
handleClick (e) { | |||
e.preventDefault(); | |||
this.props.onClick(); | |||
}, | |||
render () { | |||
const { label, title, active } = this.props; | |||
return ( | |||
<button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} onClick={this.handleClick}> | |||
{label} | |||
</button> | |||
); | |||
} | |||
}); | |||
export default TextIconButton; |
@@ -1,32 +0,0 @@ | |||
import PureRenderMixin from 'react-addons-pure-render-mixin'; | |||
import { FormattedMessage } from 'react-intl'; | |||
import Toggle from 'react-toggle'; | |||
import Collapsable from '../../../components/collapsable'; | |||
const UnlistedToggle = React.createClass({ | |||
propTypes: { | |||
isPrivate: React.PropTypes.bool, | |||
isUnlisted: React.PropTypes.bool, | |||
isReplyToOther: React.PropTypes.bool, | |||
onChangeListability: React.PropTypes.func.isRequired | |||
}, | |||
mixins: [PureRenderMixin], | |||
render () { | |||
const { isPrivate, isUnlisted, isReplyToOther, onChangeListability } = this.props; | |||
return ( | |||
<Collapsable isVisible={!(isPrivate || isReplyToOther)} fullHeight={39.5}> | |||
<label className='compose-form__label'> | |||
<Toggle checked={isUnlisted} onChange={onChangeListability} /> | |||
<span className='compose-form__label__text'><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display on public timelines' /></span> | |||
</label> | |||
</Collapsable> | |||
); | |||
} | |||
}); | |||
export default UnlistedToggle; |
@@ -37,7 +37,7 @@ const UploadButton = React.createClass({ | |||
return ( | |||
<div style={this.props.style}> | |||
<IconButton icon='photo' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} size={24} /> | |||
<IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} size={22} inverted /> | |||
<input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} /> | |||
</div> | |||
); | |||
@@ -23,7 +23,7 @@ const UploadForm = React.createClass({ | |||
const { intl, media } = this.props; | |||
const uploads = media.map(attachment => | |||
<div key={attachment.get('id')} style={{ marginBottom: '10px' }}> | |||
<div key={attachment.get('id')} style={{ margin: '5px', flex: '1 1 0' }}> | |||
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}> | |||
{({ scale }) => | |||
<div style={{ transform: `translateZ(0) scale(${scale})`, width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}> | |||
@@ -35,9 +35,9 @@ const UploadForm = React.createClass({ | |||
); | |||
return ( | |||
<div style={{ marginBottom: '20px', padding: '10px', overflow: 'hidden', flexShrink: '0' }}> | |||
<div style={{ overflow: 'hidden' }}> | |||
<UploadProgressContainer /> | |||
{uploads} | |||
<div style={{ display: 'flex', padding: '5px' }}>{uploads}</div> | |||
</div> | |||
); | |||
} | |||
@@ -1,17 +1,17 @@ | |||
import { connect } from 'react-redux'; | |||
import PrivateToggle from '../components/private_toggle'; | |||
import PrivacyDropdown from '../components/privacy_dropdown'; | |||
import { changeComposeVisibility } from '../../../actions/compose'; | |||
const mapStateToProps = state => ({ | |||
isPrivate: state.getIn(['compose', 'private']) | |||
value: state.getIn(['compose', 'privacy']) | |||
}); | |||
const mapDispatchToProps = dispatch => ({ | |||
onChange (e) { | |||
dispatch(changeComposeVisibility(e.target.checked)); | |||
onChange (value) { | |||
dispatch(changeComposeVisibility(value)); | |||
} | |||
}); | |||
export default connect(mapStateToProps, mapDispatchToProps)(PrivateToggle); | |||
export default connect(mapStateToProps, mapDispatchToProps)(PrivacyDropdown); |
@@ -0,0 +1,49 @@ | |||
import { connect } from 'react-redux'; | |||
import TextIconButton from '../components/text_icon_button'; | |||
import { changeComposeSensitivity } from '../../../actions/compose'; | |||
import { Motion, spring } from 'react-motion'; | |||
import { injectIntl, defineMessages } from 'react-intl'; | |||
const messages = defineMessages({ | |||
title: { id: 'compose_form.sensitive', defaultMessage: 'Mark media as sensitive' } | |||
}); | |||
const mapStateToProps = state => ({ | |||
visible: state.getIn(['compose', 'media_attachments']).size > 0, | |||
active: state.getIn(['compose', 'sensitive']) | |||
}); | |||
const mapDispatchToProps = dispatch => ({ | |||
onClick () { | |||
dispatch(changeComposeSensitivity()); | |||
} | |||
}); | |||
const SensitiveButton = React.createClass({ | |||
propTypes: { | |||
visible: React.PropTypes.bool, | |||
active: React.PropTypes.bool, | |||
onClick: React.PropTypes.func.isRequired, | |||
intl: React.PropTypes.object.isRequired | |||
}, | |||
render () { | |||
const { visible, active, onClick, intl } = this.props; | |||
return ( | |||
<Motion defaultStyle={{ scale: 0.87 }} style={{ scale: spring(visible ? 1 : 0.87, { stiffness: 200, damping: 3 }) }}> | |||
{({ scale }) => | |||
<div style={{ display: visible ? 'block' : 'none', transform: `translateZ(0) scale(${scale})` }}> | |||
<TextIconButton onClick={onClick} label='NSFW' title={intl.formatMessage(messages.title)} active={active} /> | |||
</div> | |||
} | |||
</Motion> | |||
); | |||
} | |||
}); | |||
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton)); |
@@ -1,18 +0,0 @@ | |||
import { connect } from 'react-redux'; | |||
import SensitiveToggle from '../components/sensitive_toggle'; | |||
import { changeComposeSensitivity } from '../../../actions/compose'; | |||
const mapStateToProps = state => ({ | |||
hasMedia: state.getIn(['compose', 'media_attachments']).size > 0, | |||
isSensitive: state.getIn(['compose', 'sensitive']) | |||
}); | |||
const mapDispatchToProps = dispatch => ({ | |||
onChange (e) { | |||
dispatch(changeComposeSensitivity(e.target.checked)); | |||
} | |||
}); | |||
export default connect(mapStateToProps, mapDispatchToProps)(SensitiveToggle); |
@@ -0,0 +1,24 @@ | |||
import { connect } from 'react-redux'; | |||
import TextIconButton from '../components/text_icon_button'; | |||
import { changeComposeSpoilerness } from '../../../actions/compose'; | |||
import { injectIntl, defineMessages } from 'react-intl'; | |||
const messages = defineMessages({ | |||
title: { id: 'compose_form.spoiler', defaultMessage: 'Hide text behind content warning' } | |||
}); | |||
const mapStateToProps = (state, { intl }) => ({ | |||
label: 'CW', | |||
title: intl.formatMessage(messages.title), | |||
active: state.getIn(['compose', 'spoiler']) | |||
}); | |||
const mapDispatchToProps = dispatch => ({ | |||
onClick () { | |||
dispatch(changeComposeSpoilerness()); | |||
} | |||
}); | |||
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton)); |
@@ -1,17 +0,0 @@ | |||
import { connect } from 'react-redux'; | |||
import SpoilerToggle from '../components/spoiler_toggle'; | |||
import { changeComposeSpoilerness } from '../../../actions/compose'; | |||
const mapStateToProps = state => ({ | |||
isSpoiler: state.getIn(['compose', 'spoiler']) | |||
}); | |||
const mapDispatchToProps = dispatch => ({ | |||
onChange (e) { | |||
dispatch(changeComposeSpoilerness(e.target.checked)); | |||
} | |||
}); | |||
export default connect(mapStateToProps, mapDispatchToProps)(SpoilerToggle); |
@@ -1,31 +0,0 @@ | |||
import { connect } from 'react-redux'; | |||
import UnlistedToggle from '../components/unlisted_toggle'; | |||
import { makeGetStatus } from '../../../selectors'; | |||
import { changeComposeListability } from '../../../actions/compose'; | |||
const makeMapStateToProps = () => { | |||
const getStatus = makeGetStatus(); | |||
const mapStateToProps = state => { | |||
const status = getStatus(state, state.getIn(['compose', 'in_reply_to'])); | |||
const me = state.getIn(['compose', 'me']); | |||
return { | |||
isPrivate: state.getIn(['compose', 'private']), | |||
isUnlisted: state.getIn(['compose', 'unlisted']), | |||
isReplyToOther: status ? status.getIn(['account', 'id']) !== me : false | |||
}; | |||
}; | |||
return mapStateToProps; | |||
}; | |||
const mapDispatchToProps = dispatch => ({ | |||
onChangeListability (e) { | |||
dispatch(changeComposeListability(e.target.checked)); | |||
} | |||
}); | |||
export default connect(makeMapStateToProps, mapDispatchToProps)(UnlistedToggle); |
@@ -30,7 +30,6 @@ const Compose = React.createClass({ | |||
<SearchContainer /> | |||
<NavigationContainer /> | |||
<ComposeFormContainer /> | |||
<UploadFormContainer /> | |||
</Drawer> | |||
); | |||
} | |||
@@ -32,8 +32,7 @@ const initialState = Immutable.Map({ | |||
sensitive: false, | |||
spoiler: false, | |||
spoiler_text: '', | |||
unlisted: false, | |||
private: false, | |||
privacy: null, | |||
text: '', | |||
focusDate: null, | |||
preselectDate: null, | |||
@@ -67,8 +66,7 @@ function clearAll(state) { | |||
map.set('spoiler_text', ''); | |||
map.set('is_submitting', false); | |||
map.set('in_reply_to', null); | |||
map.set('unlisted', state.get('default_privacy') === 'unlisted'); | |||
map.set('private', state.get('default_privacy') === 'private'); | |||
map.set('privacy', state.get('default_privacy')); | |||
map.update('media_attachments', list => list.clear()); | |||
}); | |||
}; | |||
@@ -114,6 +112,18 @@ const insertEmoji = (state, position, emojiData) => { | |||
}); | |||
}; | |||
const privacyPreference = (a, b) => { | |||
if (a === 'direct' || b === 'direct') { | |||
return 'direct'; | |||
} else if (a === 'private' || b === 'private') { | |||
return 'private'; | |||
} else if (a === 'unlisted' || b === 'unlisted') { | |||
return 'unlisted'; | |||
} else { | |||
return 'public'; | |||
} | |||
}; | |||
export default function compose(state = initialState, action) { | |||
switch(action.type) { | |||
case STORE_HYDRATE: | |||
@@ -123,26 +133,23 @@ export default function compose(state = initialState, action) { | |||
case COMPOSE_UNMOUNT: | |||
return state.set('mounted', false); | |||
case COMPOSE_SENSITIVITY_CHANGE: | |||
return state.set('sensitive', action.checked); | |||
return state.set('sensitive', !state.get('sensitive')); | |||
case COMPOSE_SPOILERNESS_CHANGE: | |||
return state.withMutations(map => { | |||
map.set('spoiler_text', ''); | |||
map.set('spoiler', action.checked); | |||
map.set('spoiler', !state.get('spoiler')); | |||
}); | |||
case COMPOSE_SPOILER_TEXT_CHANGE: | |||
return state.set('spoiler_text', action.text); | |||
case COMPOSE_VISIBILITY_CHANGE: | |||
return state.set('private', action.checked); | |||
case COMPOSE_LISTABILITY_CHANGE: | |||
return state.set('unlisted', action.checked); | |||
return state.set('privacy', action.value); | |||
case COMPOSE_CHANGE: | |||
return state.set('text', action.text); | |||
case COMPOSE_REPLY: | |||
return state.withMutations(map => { | |||
map.set('in_reply_to', action.status.get('id')); | |||
map.set('text', statusToTextMentions(state, action.status)); | |||
map.set('unlisted', action.status.get('visibility') === 'unlisted' || state.get('default_privacy') === 'unlisted'); | |||
map.set('private', action.status.get('visibility') === 'private' || state.get('default_privacy') === 'private'); | |||
map.set('privacy', privacyPreference(action.status.get('visibility'), state.get('default_privacy'))); | |||
map.set('focusDate', new Date()); | |||
map.set('preselectDate', new Date()); | |||
}); | |||
@@ -150,8 +157,7 @@ export default function compose(state = initialState, action) { | |||
return state.withMutations(map => { | |||
map.set('in_reply_to', null); | |||
map.set('text', ''); | |||
map.set('unlisted', state.get('default_privacy') === 'unlisted'); | |||
map.set('private', state.get('default_privacy') === 'private'); | |||
map.set('privacy', state.get('default_privacy')); | |||
}); | |||
case COMPOSE_SUBMIT_REQUEST: | |||
return state.set('is_submitting', true); | |||
@@ -19,9 +19,11 @@ | |||
line-height: 36px; | |||
border-radius: 4px; | |||
text-decoration: none; | |||
transition: all 100ms ease-in; | |||
&:hover { | |||
background-color: lighten($color4, 7%); | |||
transition: all 200ms ease-out; | |||
} | |||
&:disabled { | |||
@@ -44,13 +46,17 @@ | |||
} | |||
.icon-button { | |||
display: inline-block; | |||
padding: 0; | |||
color: lighten($color1, 26%); | |||
border: none; | |||
background: transparent; | |||
cursor: pointer; | |||
transition: all 100ms ease-in; | |||
&:hover { | |||
color: lighten($color1, 33%); | |||
transition: all 200ms ease-out; | |||
} | |||
&.disabled { | |||
@@ -62,8 +68,63 @@ | |||
color: $color4; | |||
} | |||
&:focus { | |||
outline: none; | |||
&::-moz-focus-inner { | |||
border: 0; | |||
} | |||
&::-moz-focus-inner, &:focus, &:active { | |||
outline: 0 !important; | |||
} | |||
&.inverted { | |||
color: lighten($color1, 33%); | |||
&:hover { | |||
color: lighten($color1, 26%); | |||
} | |||
&.active { | |||
color: $color4; | |||
} | |||
&.disabled { | |||
color: $color3; | |||
} | |||
} | |||
} | |||
.text-icon-button { | |||
color: lighten($color1, 26%); | |||
border: none; | |||
background: transparent; | |||
cursor: pointer; | |||
font-weight: 600; | |||
font-size: 12px; | |||
padding: 0 3px; | |||
line-height: 27px; | |||
outline: 0; | |||
transition: all 100ms ease-in; | |||
&:hover { | |||
color: lighten($color1, 33%); | |||
transition: all 200ms ease-out; | |||
} | |||
&.disabled { | |||
color: lighten($color1, 13%); | |||
cursor: default; | |||
} | |||
&.active { | |||
color: $color4; | |||
} | |||
&::-moz-focus-inner { | |||
border: 0; | |||
} | |||
&::-moz-focus-inner, &:focus, &:active { | |||
outline: 0 !important; | |||
} | |||
} | |||
@@ -103,6 +164,29 @@ | |||
} | |||
} | |||
.compose-form__modifiers { | |||
color: $color1; | |||
font-family: inherit; | |||
font-size: 14px; | |||
background: $color5; | |||
border-radius: 0 0 4px 0; | |||
} | |||
.compose-form__buttons { | |||
padding: 10px; | |||
background: darken($color5, 8%); | |||
box-shadow: inset 0 5px 5px rgba($color8, 0.05); | |||
border-radius: 0 0 4px 4px; | |||
flex: 1 1 auto; | |||
margin-right: 16px; | |||
display: flex; | |||
.icon-button { | |||
box-sizing: content-box; | |||
padding: 0 3px; | |||
} | |||
} | |||
.compose-form__label { | |||
display: block; | |||
line-height: 24px; | |||
@@ -144,6 +228,9 @@ | |||
} | |||
.reply-indicator { | |||
border-radius: 4px 4px 0 0; | |||
position: relative; | |||
bottom: -2px; | |||
background: $color3; | |||
padding: 10px; | |||
@@ -515,6 +602,7 @@ a.status__content__spoiler-link { | |||
flex-shrink: 0; | |||
cursor: default; | |||
color: $color3; | |||
padding-bottom: 5px; | |||
strong { | |||
color: $color5; | |||
@@ -568,6 +656,10 @@ a.status__content__spoiler-link { | |||
& > ul { | |||
left: -98px; | |||
} | |||
& > .emoji-dialog { | |||
left: -249px; | |||
} | |||
} | |||
& > ul > li > a { | |||
@@ -585,7 +677,7 @@ a.status__content__spoiler-link { | |||
white-space: nowrap; | |||
&:focus { | |||
outline: none; | |||
outline: 0; | |||
} | |||
&:hover { | |||
@@ -643,7 +735,7 @@ a.status__content__spoiler-link { | |||
} | |||
.drawer { | |||
width: 280px; | |||
width: 330px; | |||
box-sizing: border-box; | |||
display: flex; | |||
flex-direction: column; | |||
@@ -676,7 +768,8 @@ a.status__content__spoiler-link { | |||
} | |||
.drawer__inner { | |||
background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65)); | |||
//background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65)); | |||
background: lighten($color1, 13%); | |||
box-sizing: border-box; | |||
padding: 0; | |||
display: flex; | |||
@@ -965,11 +1058,23 @@ a.status__content__spoiler-link { | |||
font-size: 14px; | |||
resize: vertical; | |||
border: 0; | |||
outline: 0; | |||
&:focus { | |||
outline: 0; | |||
} | |||
} | |||
.spoiler-input__input { | |||
border-radius: 4px; | |||
} | |||
.autosuggest-textarea__textarea { | |||
height: 100px; | |||
background: $color5; | |||
border-radius: 4px 4px 0 0; | |||
padding-bottom: 0; | |||
padding-right: 10px + 22px; | |||
} | |||
.autosuggest-textarea__suggestions { | |||
@@ -1153,6 +1258,11 @@ button.active i.fa-retweet { | |||
.collapsable { | |||
color: $color5; | |||
background: lighten($color1, 8%); | |||
&:hover { | |||
color: $color5; | |||
background: lighten($color1, 8%); | |||
} | |||
} | |||
.media-spoiler { | |||
@@ -1411,7 +1521,7 @@ button.active i.fa-retweet { | |||
cursor: pointer; | |||
&:focus { | |||
outline: none; | |||
outline: 0; | |||
} | |||
} | |||
} | |||
@@ -1479,7 +1589,7 @@ button.active i.fa-retweet { | |||
} | |||
.upload-progress { | |||
padding-bottom: 20px; | |||
padding: 10px; | |||
color: lighten($color1, 26%); | |||
overflow: hidden; | |||
display: flex; | |||
@@ -1511,14 +1621,20 @@ button.active i.fa-retweet { | |||
left: 0; | |||
top: 0; | |||
height: 6px; | |||
background: $color2; | |||
background: $color4; | |||
border-radius: 6px; | |||
} | |||
.emoji-button { | |||
outline: 0; | |||
&:active, &:focus { | |||
outline: 0 !important; | |||
} | |||
img { | |||
filter: grayscale(100%); | |||
opacity: 0.4; | |||
opacity: 0.8; | |||
display: block; | |||
margin: 0; | |||
width: 22px; | |||
@@ -1538,3 +1654,74 @@ button.active i.fa-retweet { | |||
opacity: 1; | |||
filter: none; | |||
} | |||
.privacy-dropdown { | |||
position: relative; | |||
} | |||
.privacy-dropdown__dropdown { | |||
display: none; | |||
position: absolute; | |||
left: 0; | |||
top: 24px; | |||
width: 180px; | |||
background: $color5; | |||
border-radius: 0 4px 4px 4px; | |||
z-index: 2; | |||
overflow: hidden; | |||
} | |||
.privacy-dropdown__option { | |||
color: $color1; | |||
padding: 10px; | |||
cursor: pointer; | |||
display: flex; | |||
&:hover, &.active { | |||
background: $color4; | |||
color: $color5; | |||
.privacy-dropdown__option__content { | |||
color: $color5; | |||
strong { | |||
color: $color5; | |||
} | |||
} | |||
} | |||
&.active:hover { | |||
background: lighten($color4, 4%); | |||
} | |||
} | |||
.privacy-dropdown__option__icon { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
margin-right: 10px; | |||
} | |||
.privacy-dropdown__option__content { | |||
flex: 1 1 auto; | |||
color: $color3; | |||
strong { | |||
font-weight: 500; | |||
display: block; | |||
color: $color1; | |||
} | |||
} | |||
.privacy-dropdown.active { | |||
.privacy-dropdown__value { | |||
background: $color5; | |||
border-radius: 4px 4px 0 0; | |||
box-shadow: 0 -4px 4px rgba($color8, 0.1); | |||
} | |||
.privacy-dropdown__dropdown { | |||
display: block; | |||
box-shadow: 2px 4px 6px rgba($color8, 0.1); | |||
} | |||
} |
@@ -1,3 +1,4 @@ | |||
/* | |||
@font-face { | |||
font-family: 'Roboto Mono'; | |||
src: font-url('roboto-mono/robotomono-bold-webfont.eot'); | |||
@@ -105,7 +106,7 @@ | |||
} | |||
*/ | |||
@font-face { | |||
font-family: 'Roboto Mono'; | |||
@@ -121,7 +122,7 @@ | |||
} | |||
/* | |||
@font-face { | |||
font-family: 'Roboto Mono'; | |||
@@ -150,4 +151,4 @@ | |||
font-weight: 200; | |||
font-style: italic; | |||
} | |||
}*/ |
@@ -1,3 +1,4 @@ | |||
/* | |||
@font-face { | |||
font-family: 'Roboto'; | |||
src: font-url('roboto/roboto-lightitalic-webfont.eot'); | |||
@@ -8,7 +9,7 @@ | |||
font-url('roboto/roboto-lightitalic-webfont.svg#roboto-lightitalic-webfont') format('svg'); | |||
font-weight: 300; | |||
font-style: italic; | |||
} | |||
}*/ | |||
@font-face { | |||
font-family: 'Roboto'; | |||
@@ -46,7 +47,7 @@ | |||
font-weight: 500; | |||
font-style: normal; | |||
} | |||
/* | |||
@font-face { | |||
font-family: 'Roboto'; | |||
src: font-url('roboto/roboto-thin-webfont.eot'); | |||
@@ -57,7 +58,7 @@ | |||
font-url('roboto/roboto-thin-webfont.svg#roboto-thin-webfont') format('svg'); | |||
font-weight: 100; | |||
font-style: normal; | |||
} | |||
}*/ | |||
@font-face { | |||
font-family: 'Roboto'; | |||
@@ -70,7 +71,7 @@ | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
/* | |||
@font-face { | |||
font-family: 'Roboto'; | |||
src: font-url('roboto/roboto-mediumitalic-webfont.eot'); | |||
@@ -141,4 +142,4 @@ | |||
font-url('roboto/roboto-black-webfont.svg#roboto-black-webfont') format('svg'); | |||
font-weight: 900; | |||
font-style: normal; | |||
} | |||
}*/ |