mirror of
https://framagit.org/tykayn/mastodon.git
synced 2023-08-25 08:33:12 +02:00
WIP <Compose> Refactor; 1000 tiny edits
This commit is contained in:
kibigo!
parent
b4a3792201
commit
42f50049ff
@ -134,11 +134,12 @@ export default class Dropdown extends React.PureComponent {
|
||||
this.props.onModalOpen({
|
||||
status,
|
||||
actions: items.map(
|
||||
(item, i) => ({
|
||||
(item, i) => item ? {
|
||||
...item,
|
||||
name: `${item.text}-${i}`,
|
||||
onClick: this.handleItemClick.bind(i),
|
||||
}),
|
||||
} : null
|
||||
),
|
||||
});
|
||||
|
||||
return;
|
||||
|
||||
@ -45,7 +45,7 @@ export default class Link extends React.PureComponent {
|
||||
title,
|
||||
...rest
|
||||
} = this.props;
|
||||
const computedClass = classNames('link', className, role);
|
||||
const computedClass = classNames('link', className, `role-${role}`);
|
||||
|
||||
// We assume that our `onClick` is a routing function and give it
|
||||
// the qualities of a link even if no `href` is provided. However,
|
||||
|
||||
@ -52,6 +52,7 @@ function mapStateToProps (state) {
|
||||
focusDate: state.getIn(['compose', 'focusDate']),
|
||||
isSubmitting: state.getIn(['compose', 'is_submitting']),
|
||||
isUploading: state.getIn(['compose', 'is_uploading']),
|
||||
layout: state.getIn(['local_settings', 'layout']),
|
||||
media: state.getIn(['compose', 'media_attachments']),
|
||||
preselectDate: state.getIn(['compose', 'preselectDate']),
|
||||
privacy: state.getIn(['compose', 'privacy']),
|
||||
@ -71,132 +72,96 @@ function mapStateToProps (state) {
|
||||
};
|
||||
|
||||
// Dispatch mapping.
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
cancelReply () {
|
||||
dispatch(cancelReplyCompose());
|
||||
},
|
||||
changeDescription (mediaId, description) {
|
||||
dispatch(changeUploadCompose(mediaId, description));
|
||||
},
|
||||
changeSensitivity () {
|
||||
dispatch(changeComposeSensitivity());
|
||||
},
|
||||
changeSpoilerText (checked) {
|
||||
dispatch(changeComposeSpoilerText(checked));
|
||||
},
|
||||
changeSpoilerness () {
|
||||
dispatch(changeComposeSpoilerness());
|
||||
},
|
||||
changeText (text) {
|
||||
dispatch(changeCompose(text));
|
||||
},
|
||||
changeVisibility (value) {
|
||||
dispatch(changeComposeVisibility(value));
|
||||
},
|
||||
clearSuggestions () {
|
||||
dispatch(clearComposeSuggestions());
|
||||
},
|
||||
closeModal () {
|
||||
dispatch(closeModal());
|
||||
},
|
||||
fetchSuggestions (token) {
|
||||
dispatch(fetchComposeSuggestions(token));
|
||||
},
|
||||
insertEmoji (position, data) {
|
||||
dispatch(insertEmojiCompose(position, data));
|
||||
},
|
||||
openActionsModal (data) {
|
||||
dispatch(openModal('ACTIONS', data));
|
||||
},
|
||||
openDoodleModal () {
|
||||
dispatch(openModal('DOODLE', { noEsc: true }));
|
||||
},
|
||||
selectSuggestion (position, token, accountId) {
|
||||
dispatch(selectComposeSuggestion(position, token, accountId));
|
||||
},
|
||||
submit () {
|
||||
dispatch(submitCompose());
|
||||
},
|
||||
toggleAdvancedOption (option) {
|
||||
dispatch(toggleComposeAdvancedOption(option));
|
||||
},
|
||||
undoUpload (mediaId) {
|
||||
dispatch(undoUploadCompose(mediaId));
|
||||
},
|
||||
upload (files) {
|
||||
dispatch(uploadCompose(files));
|
||||
},
|
||||
});
|
||||
const mapDispatchToProps = {
|
||||
onCancelReply: cancelReplyCompose,
|
||||
onChangeDescription: changeUploadCompose,
|
||||
onChangeSensitivity: changeComposeSensitivity,
|
||||
onChangeSpoilerText: changeComposeSpoilerText,
|
||||
onChangeSpoilerness: changeComposeSpoilerness,
|
||||
onChangeText: changeCompose,
|
||||
onChangeVisibility: changeComposeVisibility,
|
||||
onClearSuggestions: clearComposeSuggestions,
|
||||
onCloseModal: closeModal,
|
||||
onFetchSuggestions: fetchComposeSuggestions,
|
||||
onInsertEmoji: insertEmojiCompose,
|
||||
onOpenActionsModal: openModal.bind(null, 'ACTIONS'),
|
||||
onOpenDoodleModal: openModal.bind(null, 'DOODLE', { noEsc: true }),
|
||||
onSelectSuggestion: selectComposeSuggestion,
|
||||
onSubmit: submitCompose,
|
||||
onToggleAdvancedOption: toggleComposeAdvancedOption,
|
||||
onUndoUpload: undoUploadCompose,
|
||||
onUpload: uploadCompose,
|
||||
};
|
||||
|
||||
// Handlers.
|
||||
const handlers = {
|
||||
|
||||
// Changes the text value of the spoiler.
|
||||
changeSpoiler ({ target: { value } }) {
|
||||
const { dispatch: { changeSpoilerText } } = this.props;
|
||||
if (changeSpoilerText) {
|
||||
changeSpoilerText(value);
|
||||
handleChangeSpoiler ({ target: { value } }) {
|
||||
const { onChangeSpoilerText } = this.props;
|
||||
if (onChangeSpoilerText) {
|
||||
onChangeSpoilerText(value);
|
||||
}
|
||||
},
|
||||
|
||||
// Inserts an emoji at the caret.
|
||||
emoji (data) {
|
||||
handleEmoji (data) {
|
||||
const { textarea: { selectionStart } } = this;
|
||||
const { dispatch: { insertEmoji } } = this.props;
|
||||
const { onInsertEmoji } = this.props;
|
||||
this.caretPos = selectionStart + data.native.length + 1;
|
||||
if (insertEmoji) {
|
||||
insertEmoji(selectionStart, data);
|
||||
if (onInsertEmoji) {
|
||||
onInsertEmoji(selectionStart, data);
|
||||
}
|
||||
},
|
||||
|
||||
// Handles the secondary submit button.
|
||||
secondarySubmit () {
|
||||
const { submit } = this.handlers;
|
||||
handleSecondarySubmit () {
|
||||
const { handleSubmit } = this.handlers;
|
||||
const {
|
||||
dispatch: { changeVisibility },
|
||||
side_arm,
|
||||
onChangeVisibility,
|
||||
sideArm,
|
||||
} = this.props;
|
||||
if (changeVisibility) {
|
||||
changeVisibility(side_arm);
|
||||
if (sideArm !== 'none' && onChangeVisibility) {
|
||||
onChangeVisibility(sideArm);
|
||||
}
|
||||
submit();
|
||||
handleSubmit();
|
||||
},
|
||||
|
||||
// Selects a suggestion from the autofill.
|
||||
select (tokenStart, token, value) {
|
||||
const { dispatch: { selectSuggestion } } = this.props;
|
||||
handleSelect (tokenStart, token, value) {
|
||||
const { onSelectSuggestion } = this.props;
|
||||
this.caretPos = null;
|
||||
if (selectSuggestion) {
|
||||
selectSuggestion(tokenStart, token, value);
|
||||
if (onSelectSuggestion) {
|
||||
onSelectSuggestion(tokenStart, token, value);
|
||||
}
|
||||
},
|
||||
|
||||
// Submits the status.
|
||||
submit () {
|
||||
handleSubmit () {
|
||||
const { textarea: { value } } = this;
|
||||
const {
|
||||
dispatch: {
|
||||
changeText,
|
||||
submit,
|
||||
},
|
||||
state: { text },
|
||||
onChangeText,
|
||||
onSubmit,
|
||||
text,
|
||||
} = this.props;
|
||||
|
||||
// If something changes inside the textarea, then we update the
|
||||
// state before submitting.
|
||||
if (changeText && text !== value) {
|
||||
changeText(value);
|
||||
if (onChangeText && text !== value) {
|
||||
onChangeText(value);
|
||||
}
|
||||
|
||||
// Submits the status.
|
||||
if (submit) {
|
||||
submit();
|
||||
if (onSubmit) {
|
||||
onSubmit();
|
||||
}
|
||||
},
|
||||
|
||||
// Sets a reference to the textarea.
|
||||
refTextarea ({ textarea }) {
|
||||
this.textarea = textarea;
|
||||
handleRefTextarea (textareaComponent) {
|
||||
if (textareaComponent) {
|
||||
this.textarea = textareaComponent.textarea;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -216,10 +181,10 @@ class Composer extends React.Component {
|
||||
// If this is the update where we've finished uploading,
|
||||
// save the last caret position so we can restore it below!
|
||||
componentWillReceiveProps (nextProps) {
|
||||
const { textarea: { selectionStart } } = this;
|
||||
const { state: { isUploading } } = this.props;
|
||||
if (isUploading && !nextProps.state.isUploading) {
|
||||
this.caretPos = selectionStart;
|
||||
const { textarea } = this;
|
||||
const { isUploading } = this.props;
|
||||
if (textarea && isUploading && !nextProps.isUploading) {
|
||||
this.caretPos = textarea.selectionStart;
|
||||
}
|
||||
}
|
||||
|
||||
@ -239,20 +204,18 @@ class Composer extends React.Component {
|
||||
textarea,
|
||||
} = this;
|
||||
const {
|
||||
state: {
|
||||
focusDate,
|
||||
isUploading,
|
||||
isSubmitting,
|
||||
preselectDate,
|
||||
text,
|
||||
},
|
||||
} = this.props;
|
||||
let selectionEnd, selectionStart;
|
||||
|
||||
// Caret/selection handling.
|
||||
if (focusDate !== prevProps.state.focusDate || (prevProps.state.isUploading && !isUploading && !isNaN(caretPos) && caretPos !== null)) {
|
||||
if (focusDate !== prevProps.focusDate || (prevProps.isUploading && !isUploading && !isNaN(caretPos) && caretPos !== null)) {
|
||||
switch (true) {
|
||||
case preselectDate !== prevProps.state.preselectDate:
|
||||
case preselectDate !== prevProps.preselectDate:
|
||||
selectionStart = text.search(/\s/) + 1;
|
||||
selectionEnd = text.length;
|
||||
break;
|
||||
@ -262,49 +225,50 @@ class Composer extends React.Component {
|
||||
default:
|
||||
selectionStart = selectionEnd = text.length;
|
||||
}
|
||||
if (textarea) {
|
||||
textarea.setSelectionRange(selectionStart, selectionEnd);
|
||||
textarea.focus();
|
||||
}
|
||||
|
||||
// Refocuses the textarea after submitting.
|
||||
} else if (prevProps.state.isSubmitting && !isSubmitting) {
|
||||
} else if (textarea && prevProps.isSubmitting && !isSubmitting) {
|
||||
textarea.focus();
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
changeSpoiler,
|
||||
emoji,
|
||||
secondarySubmit,
|
||||
select,
|
||||
submit,
|
||||
refTextarea,
|
||||
handleChangeSpoiler,
|
||||
handleEmoji,
|
||||
handleSecondarySubmit,
|
||||
handleSelect,
|
||||
handleSubmit,
|
||||
handleRefTextarea,
|
||||
} = this.handlers;
|
||||
const { history } = this.context;
|
||||
const {
|
||||
dispatch: {
|
||||
cancelReply,
|
||||
changeDescription,
|
||||
changeSensitivity,
|
||||
changeText,
|
||||
changeVisibility,
|
||||
clearSuggestions,
|
||||
closeModal,
|
||||
fetchSuggestions,
|
||||
openActionsModal,
|
||||
openDoodleModal,
|
||||
toggleAdvancedOption,
|
||||
undoUpload,
|
||||
upload,
|
||||
},
|
||||
intl,
|
||||
state: {
|
||||
acceptContentTypes,
|
||||
amUnlocked,
|
||||
doNotFederate,
|
||||
intl,
|
||||
isSubmitting,
|
||||
isUploading,
|
||||
layout,
|
||||
media,
|
||||
onCancelReply,
|
||||
onChangeDescription,
|
||||
onChangeSensitivity,
|
||||
onChangeSpoilerness,
|
||||
onChangeText,
|
||||
onChangeVisibility,
|
||||
onClearSuggestions,
|
||||
onCloseModal,
|
||||
onFetchSuggestions,
|
||||
onOpenActionsModal,
|
||||
onOpenDoodleModal,
|
||||
onToggleAdvancedOption,
|
||||
onUndoUpload,
|
||||
onUpload,
|
||||
privacy,
|
||||
progress,
|
||||
replyAccount,
|
||||
@ -317,16 +281,15 @@ class Composer extends React.Component {
|
||||
spoilerText,
|
||||
suggestions,
|
||||
text,
|
||||
},
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className='compose'>
|
||||
<div className='composer'>
|
||||
<ComposerSpoiler
|
||||
hidden={!spoiler}
|
||||
intl={intl}
|
||||
onChange={changeSpoiler}
|
||||
onSubmit={submit}
|
||||
onChange={handleChangeSpoiler}
|
||||
onSubmit={handleSubmit}
|
||||
text={spoilerText}
|
||||
/>
|
||||
{privacy === 'private' && amUnlocked ? <ComposerWarning /> : null}
|
||||
@ -336,32 +299,32 @@ class Composer extends React.Component {
|
||||
content={replyContent}
|
||||
history={history}
|
||||
intl={intl}
|
||||
onCancel={cancelReply}
|
||||
onCancel={onCancelReply}
|
||||
/>
|
||||
) : null}
|
||||
<ComposerTextarea
|
||||
autoFocus={!showSearch && !isMobile(window.innerWidth)}
|
||||
autoFocus={!showSearch && !isMobile(window.innerWidth, layout)}
|
||||
disabled={isSubmitting}
|
||||
intl={intl}
|
||||
onChange={changeText}
|
||||
onPaste={upload}
|
||||
onPickEmoji={emoji}
|
||||
onSubmit={submit}
|
||||
onSuggestionsClearRequested={clearSuggestions}
|
||||
onSuggestionsFetchRequested={fetchSuggestions}
|
||||
onSuggestionSelected={select}
|
||||
ref={refTextarea}
|
||||
onChange={onChangeText}
|
||||
onPaste={onUpload}
|
||||
onPickEmoji={handleEmoji}
|
||||
onSubmit={handleSubmit}
|
||||
onSuggestionsClearRequested={onClearSuggestions}
|
||||
onSuggestionsFetchRequested={onFetchSuggestions}
|
||||
onSuggestionSelected={handleSelect}
|
||||
ref={handleRefTextarea}
|
||||
suggestions={suggestions}
|
||||
value={text}
|
||||
/>
|
||||
{media && media.size ? (
|
||||
{isUploading || media && media.size ? (
|
||||
<ComposerUploadForm
|
||||
active={isUploading}
|
||||
intl={intl}
|
||||
media={media}
|
||||
onChangeDescription={changeDescription}
|
||||
onRemove={undoUpload}
|
||||
onChangeDescription={onChangeDescription}
|
||||
onRemove={onUndoUpload}
|
||||
progress={progress}
|
||||
uploading={isUploading}
|
||||
/>
|
||||
) : null}
|
||||
<ComposerOptions
|
||||
@ -373,13 +336,14 @@ class Composer extends React.Component {
|
||||
)}
|
||||
hasMedia={!!media.size}
|
||||
intl={intl}
|
||||
onChangeSensitivity={changeSensitivity}
|
||||
onChangeVisibility={changeVisibility}
|
||||
onDoodleOpen={openDoodleModal}
|
||||
onModalClose={closeModal}
|
||||
onModalOpen={openActionsModal}
|
||||
onToggleAdvancedOption={toggleAdvancedOption}
|
||||
onUpload={upload}
|
||||
onChangeSensitivity={onChangeSensitivity}
|
||||
onChangeVisibility={onChangeVisibility}
|
||||
onDoodleOpen={onOpenDoodleModal}
|
||||
onModalClose={onCloseModal}
|
||||
onModalOpen={onOpenActionsModal}
|
||||
onToggleAdvancedOption={onToggleAdvancedOption}
|
||||
onToggleSpoiler={onChangeSpoilerness}
|
||||
onUpload={onUpload}
|
||||
privacy={privacy}
|
||||
resetFileKey={resetFileKey}
|
||||
sensitive={sensitive}
|
||||
@ -387,10 +351,10 @@ class Composer extends React.Component {
|
||||
/>
|
||||
<ComposerPublisher
|
||||
countText={`${spoilerText}${countableText(text)}${doNotFederate ? ' 👁️' : ''}`}
|
||||
disabled={isSubmitting || isUploading || text.length && text.trim().length === 0}
|
||||
disabled={isSubmitting || isUploading || !!text.length && !text.trim().length}
|
||||
intl={intl}
|
||||
onSecondarySubmit={secondarySubmit}
|
||||
onSubmit={submit}
|
||||
onSecondarySubmit={handleSecondarySubmit}
|
||||
onSubmit={handleSubmit}
|
||||
privacy={privacy}
|
||||
sideArm={sideArm}
|
||||
/>
|
||||
@ -407,22 +371,23 @@ Composer.contextTypes = {
|
||||
|
||||
// Props.
|
||||
Composer.propTypes = {
|
||||
dispatch: PropTypes.objectOf(PropTypes.func).isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
state: PropTypes.shape({
|
||||
|
||||
// State props.
|
||||
acceptContentTypes: PropTypes.string,
|
||||
amUnlocked: PropTypes.bool,
|
||||
doNotFederate: PropTypes.bool,
|
||||
focusDate: PropTypes.instanceOf(Date),
|
||||
isSubmitting: PropTypes.bool,
|
||||
isUploading: PropTypes.bool,
|
||||
media: PropTypes.list,
|
||||
layout: PropTypes.string,
|
||||
media: ImmutablePropTypes.list,
|
||||
preselectDate: PropTypes.instanceOf(Date),
|
||||
privacy: PropTypes.string,
|
||||
progress: PropTypes.number,
|
||||
replyAccount: ImmutablePropTypes.map,
|
||||
replyContent: PropTypes.string,
|
||||
resetFileKey: PropTypes.string,
|
||||
resetFileKey: PropTypes.number,
|
||||
sideArm: PropTypes.string,
|
||||
sensitive: PropTypes.bool,
|
||||
showSearch: PropTypes.bool,
|
||||
@ -431,13 +396,26 @@ Composer.propTypes = {
|
||||
suggestionToken: PropTypes.string,
|
||||
suggestions: ImmutablePropTypes.list,
|
||||
text: PropTypes.string,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
// Default props.
|
||||
Composer.defaultProps = {
|
||||
dispatch: {},
|
||||
state: {},
|
||||
// Dispatch props.
|
||||
onCancelReply: PropTypes.func,
|
||||
onChangeDescription: PropTypes.func,
|
||||
onChangeSensitivity: PropTypes.func,
|
||||
onChangeSpoilerText: PropTypes.func,
|
||||
onChangeSpoilerness: PropTypes.func,
|
||||
onChangeText: PropTypes.func,
|
||||
onChangeVisibility: PropTypes.func,
|
||||
onClearSuggestions: PropTypes.func,
|
||||
onCloseModal: PropTypes.func,
|
||||
onFetchSuggestions: PropTypes.func,
|
||||
onInsertEmoji: PropTypes.func,
|
||||
onOpenActionsModal: PropTypes.func,
|
||||
onOpenDoodleModal: PropTypes.func,
|
||||
onSelectSuggestion: PropTypes.func,
|
||||
onSubmit: PropTypes.func,
|
||||
onToggleAdvancedOption: PropTypes.func,
|
||||
onUndoUpload: PropTypes.func,
|
||||
onUpload: PropTypes.func,
|
||||
};
|
||||
|
||||
// Connecting and export.
|
||||
|
||||
@ -0,0 +1,138 @@
|
||||
// Package imports.
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import spring from 'react-motion/lib/spring';
|
||||
|
||||
// Components.
|
||||
import ComposerOptionsDropdownContentItem from './item';
|
||||
|
||||
// Utils.
|
||||
import { withPassive } from 'flavours/glitch/util/dom_helpers';
|
||||
import Motion from 'flavours/glitch/util/optional_motion';
|
||||
import { assignHandlers } from 'flavours/glitch/util/react_helpers';
|
||||
|
||||
// Handlers.
|
||||
const handlers = {
|
||||
|
||||
// When the document is clicked elsewhere, we close the dropdown.
|
||||
handleDocumentClick ({ target }) {
|
||||
const { node } = this;
|
||||
const { onClose } = this.props;
|
||||
if (onClose && node && !node.contains(target)) {
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
|
||||
// Stores our node in `this.node`.
|
||||
handleRef (node) {
|
||||
this.node = node;
|
||||
},
|
||||
};
|
||||
|
||||
// The spring to use with our motion.
|
||||
const springMotion = spring(1, {
|
||||
damping: 35,
|
||||
stiffness: 400,
|
||||
});
|
||||
|
||||
// The component.
|
||||
export default class ComposerOptionsDropdownContent extends React.PureComponent {
|
||||
|
||||
// Constructor.
|
||||
constructor (props) {
|
||||
super(props);
|
||||
assignHandlers(this, handlers);
|
||||
|
||||
// Instance variables.
|
||||
this.node = null;
|
||||
}
|
||||
|
||||
// On mounting, we add our listeners.
|
||||
componentDidMount () {
|
||||
const { handleDocumentClick } = this.handlers;
|
||||
document.addEventListener('click', handleDocumentClick, false);
|
||||
document.addEventListener('touchend', handleDocumentClick, withPassive);
|
||||
}
|
||||
|
||||
// On unmounting, we remove our listeners.
|
||||
componentWillUnmount () {
|
||||
const { handleDocumentClick } = this.handlers;
|
||||
document.removeEventListener('click', handleDocumentClick, false);
|
||||
document.removeEventListener('touchend', handleDocumentClick, withPassive);
|
||||
}
|
||||
|
||||
// Rendering.
|
||||
render () {
|
||||
const { handleRef } = this.handlers;
|
||||
const {
|
||||
items,
|
||||
onChange,
|
||||
onClose,
|
||||
style,
|
||||
value,
|
||||
} = this.props;
|
||||
|
||||
// The result.
|
||||
return (
|
||||
<Motion
|
||||
defaultStyle={{
|
||||
opacity: 0,
|
||||
scaleX: 0.85,
|
||||
scaleY: 0.75,
|
||||
}}
|
||||
style={{
|
||||
opacity: springMotion,
|
||||
scaleX: springMotion,
|
||||
scaleY: springMotion,
|
||||
}}
|
||||
>
|
||||
{({ opacity, scaleX, scaleY }) => (
|
||||
<div
|
||||
className='composer--options--dropdown--content'
|
||||
ref={handleRef}
|
||||
style={{
|
||||
...style,
|
||||
opacity: opacity,
|
||||
transform: `scale(${scaleX}, ${scaleY})`,
|
||||
}}
|
||||
>
|
||||
{items.map(
|
||||
({
|
||||
name,
|
||||
...rest
|
||||
}) => (
|
||||
<ComposerOptionsDropdownContentItem
|
||||
active={name === value}
|
||||
key={name}
|
||||
name={name}
|
||||
onChange={onChange}
|
||||
onClose={onClose}
|
||||
options={rest}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Motion>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Props.
|
||||
ComposerOptionsDropdownContent.propTypes = {
|
||||
items: PropTypes.arrayOf(PropTypes.shape({
|
||||
icon: PropTypes.string,
|
||||
meta: PropTypes.node,
|
||||
name: PropTypes.string.isRequired,
|
||||
on: PropTypes.bool,
|
||||
text: PropTypes.node,
|
||||
})).isRequired,
|
||||
onChange: PropTypes.func,
|
||||
onClose: PropTypes.func,
|
||||
style: PropTypes.object,
|
||||
value: PropTypes.string,
|
||||
};
|
||||
|
||||
// Default props.
|
||||
ComposerOptionsDropdownContent.defaultProps = { style: {} };
|
||||
@ -14,7 +14,7 @@ import { assignHandlers } from 'flavours/glitch/util/react_helpers';
|
||||
const handlers = {
|
||||
|
||||
// This function activates the dropdown item.
|
||||
activate (e) {
|
||||
handleActivate (e) {
|
||||
const {
|
||||
name,
|
||||
onChange,
|
||||
@ -35,11 +35,10 @@ const handlers = {
|
||||
onChange(name);
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
// The component.
|
||||
export default class ComposerOptionsDropdownItem extends React.PureComponent {
|
||||
export default class ComposerOptionsDropdownContentItem extends React.PureComponent {
|
||||
|
||||
// Constructor.
|
||||
constructor (props) {
|
||||
@ -49,7 +48,7 @@ export default class ComposerOptionsDropdownItem extends React.PureComponent {
|
||||
|
||||
// Rendering.
|
||||
render () {
|
||||
const { activate } = this.handlers;
|
||||
const { handleActivate } = this.handlers;
|
||||
const {
|
||||
active,
|
||||
options: {
|
||||
@ -59,7 +58,7 @@ export default class ComposerOptionsDropdownItem extends React.PureComponent {
|
||||
text,
|
||||
},
|
||||
} = this.props;
|
||||
const computedClass = classNames('composer--options--dropdown_item', {
|
||||
const computedClass = classNames('composer--options--dropdown--content--item', {
|
||||
active,
|
||||
lengthy: meta,
|
||||
'toggled-off': !on && on !== null && typeof on !== 'undefined',
|
||||
@ -71,8 +70,8 @@ export default class ComposerOptionsDropdownItem extends React.PureComponent {
|
||||
return (
|
||||
<div
|
||||
className={computedClass}
|
||||
onClick={activate}
|
||||
onKeyDown={activate}
|
||||
onClick={handleActivate}
|
||||
onKeyDown={handleActivate}
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
>
|
||||
@ -85,7 +84,7 @@ export default class ComposerOptionsDropdownItem extends React.PureComponent {
|
||||
return (
|
||||
<Toggle
|
||||
checked={on}
|
||||
onChange={activate}
|
||||
onChange={handleActivate}
|
||||
/>
|
||||
);
|
||||
case !!icon:
|
||||
@ -113,7 +112,7 @@ export default class ComposerOptionsDropdownItem extends React.PureComponent {
|
||||
};
|
||||
|
||||
// Props.
|
||||
ComposerOptionsDropdownItem.propTypes = {
|
||||
ComposerOptionsDropdownContentItem.propTypes = {
|
||||
active: PropTypes.bool,
|
||||
name: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
@ -2,77 +2,59 @@
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import spring from 'react-motion/lib/spring';
|
||||
import Overlay from 'react-overlays/lib/Overlay';
|
||||
|
||||
// Components.
|
||||
import IconButton from 'flavours/glitch/components/icon_button';
|
||||
import ComposerOptionsDropdownItem from './item';
|
||||
import ComposerOptionsDropdownContent from './content';
|
||||
|
||||
// Utils.
|
||||
import { withPassive } from 'flavours/glitch/util/dom_helpers';
|
||||
import { isUserTouching } from 'flavours/glitch/util/is_mobile';
|
||||
import Motion from 'flavours/glitch/util/optional_motion';
|
||||
import { assignHandlers } from 'flavours/glitch/util/react_helpers';
|
||||
|
||||
// We'll use this to define our various transitions.
|
||||
const springMotion = spring(1, {
|
||||
damping: 35,
|
||||
stiffness: 400,
|
||||
});
|
||||
|
||||
// Handlers.
|
||||
const handlers = {
|
||||
|
||||
// Closes the dropdown.
|
||||
close () {
|
||||
handleClose () {
|
||||
this.setState({ open: false });
|
||||
},
|
||||
|
||||
// When the document is clicked elsewhere, we close the dropdown.
|
||||
documentClick ({ target }) {
|
||||
const { node } = this;
|
||||
const { onClose } = this.props;
|
||||
if (onClose && node && !node.contains(target)) {
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
|
||||
// The enter key toggles the dropdown's open state, and the escape
|
||||
// key closes it.
|
||||
keyDown ({ key }) {
|
||||
handleKeyDown ({ key }) {
|
||||
const {
|
||||
close,
|
||||
toggle,
|
||||
handleClose,
|
||||
handleToggle,
|
||||
} = this.handlers;
|
||||
switch (key) {
|
||||
case 'Enter':
|
||||
toggle();
|
||||
handleToggle();
|
||||
break;
|
||||
case 'Escape':
|
||||
close();
|
||||
handleClose();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// Toggles opening and closing the dropdown.
|
||||
toggle () {
|
||||
// Creates an action modal object.
|
||||
handleMakeModal () {
|
||||
const component = this;
|
||||
const {
|
||||
items,
|
||||
onChange,
|
||||
onModalClose,
|
||||
onModalOpen,
|
||||
onModalClose,
|
||||
value,
|
||||
} = this.props;
|
||||
const { open } = this.state;
|
||||
|
||||
// If this is a touch device, we open a modal instead of the
|
||||
// dropdown.
|
||||
if (onModalClose && isUserTouching()) {
|
||||
if (open) {
|
||||
onModalClose();
|
||||
} else if (onChange && onModalOpen) {
|
||||
onModalOpen({
|
||||
// Required props.
|
||||
if (!(onChange && onModalOpen && onModalClose && items)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// The object.
|
||||
return {
|
||||
actions: items.map(
|
||||
({
|
||||
name,
|
||||
@ -89,21 +71,51 @@ const handlers = {
|
||||
onPassiveClick (e) {
|
||||
e.preventDefault(); // Prevents focus from changing
|
||||
onChange(name);
|
||||
component.setState({ needsModalUpdate: true });
|
||||
},
|
||||
})
|
||||
),
|
||||
});
|
||||
};
|
||||
},
|
||||
|
||||
// Toggles opening and closing the dropdown.
|
||||
handleToggle () {
|
||||
const { handleMakeModal } = this.handlers;
|
||||
const { onModalOpen } = this.props;
|
||||
const { open } = this.state;
|
||||
|
||||
// If this is a touch device, we open a modal instead of the
|
||||
// dropdown.
|
||||
if (isUserTouching()) {
|
||||
|
||||
// This gets the modal to open.
|
||||
const modal = handleMakeModal();
|
||||
|
||||
// If we can, we then open the modal.
|
||||
if (modal && onModalOpen) {
|
||||
onModalOpen(modal);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Otherwise, we just set our state to open.
|
||||
} else {
|
||||
this.setState({ open: !open });
|
||||
}
|
||||
},
|
||||
|
||||
// Stores our node in `this.node`.
|
||||
ref (node) {
|
||||
this.node = node;
|
||||
// If our modal is open and our props update, we need to also update
|
||||
// the modal.
|
||||
handleUpdate () {
|
||||
const { handleMakeModal } = this.handlers;
|
||||
const { onModalOpen } = this.props;
|
||||
const { needsModalUpdate } = this.state;
|
||||
|
||||
// Gets our modal object.
|
||||
const modal = handleMakeModal();
|
||||
|
||||
// Reopens the modal with the new object.
|
||||
if (needsModalUpdate && modal && onModalOpen) {
|
||||
onModalOpen(modal);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -114,33 +126,31 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
assignHandlers(this, handlers);
|
||||
this.state = { open: false };
|
||||
|
||||
// Instance variables.
|
||||
this.node = null;
|
||||
this.state = {
|
||||
needsModalUpdate: false,
|
||||
open: false,
|
||||
};
|
||||
}
|
||||
|
||||
// On mounting, we add our listeners.
|
||||
componentDidMount () {
|
||||
const { documentClick } = this.handlers;
|
||||
document.addEventListener('click', documentClick, false);
|
||||
document.addEventListener('touchend', documentClick, withPassive);
|
||||
// Updates our modal as necessary.
|
||||
componentDidUpdate (prevProps) {
|
||||
const { handleUpdate } = this.handlers;
|
||||
const { items } = this.props;
|
||||
const { needsModalUpdate } = this.state;
|
||||
if (needsModalUpdate && items.find(
|
||||
(item, i) => item.on !== prevProps.items[i].on
|
||||
)) {
|
||||
handleUpdate();
|
||||
this.setState({ needsModalUpdate: false });
|
||||
}
|
||||
|
||||
// On unmounting, we remove our listeners.
|
||||
componentWillUnmount () {
|
||||
const { documentClick } = this.handlers;
|
||||
document.removeEventListener('click', documentClick, false);
|
||||
document.removeEventListener('touchend', documentClick, withPassive);
|
||||
}
|
||||
|
||||
// Rendering.
|
||||
render () {
|
||||
const {
|
||||
close,
|
||||
keyDown,
|
||||
ref,
|
||||
toggle,
|
||||
handleClose,
|
||||
handleKeyDown,
|
||||
handleToggle,
|
||||
} = this.handlers;
|
||||
const {
|
||||
active,
|
||||
@ -154,22 +164,21 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
|
||||
const { open } = this.state;
|
||||
const computedClass = classNames('composer--options--dropdown', {
|
||||
active,
|
||||
open: open || active,
|
||||
open,
|
||||
});
|
||||
|
||||
// The result.
|
||||
return (
|
||||
<div
|
||||
className={computedClass}
|
||||
onKeyDown={keyDown}
|
||||
ref={ref}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<IconButton
|
||||
active={open || active}
|
||||
className='value'
|
||||
disabled={disabled}
|
||||
icon={icon}
|
||||
onClick={toggle}
|
||||
onClick={handleToggle}
|
||||
size={18}
|
||||
style={{
|
||||
height: null,
|
||||
@ -178,49 +187,17 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
|
||||
title={title}
|
||||
/>
|
||||
<Overlay
|
||||
containerPadding={20}
|
||||
placement='bottom'
|
||||
show={open}
|
||||
target={this}
|
||||
>
|
||||
<Motion
|
||||
defaultStyle={{
|
||||
opacity: 0,
|
||||
scaleX: 0.85,
|
||||
scaleY: 0.75,
|
||||
}}
|
||||
style={{
|
||||
opacity: springMotion,
|
||||
scaleX: springMotion,
|
||||
scaleY: springMotion,
|
||||
}}
|
||||
>
|
||||
{({ opacity, scaleX, scaleY }) => (
|
||||
<div
|
||||
className='composer--options--dropdown__dropdown'
|
||||
ref={this.setRef}
|
||||
style={{
|
||||
opacity: opacity,
|
||||
transform: `scale(${scaleX}, ${scaleY})`,
|
||||
}}
|
||||
>
|
||||
{items.map(
|
||||
({
|
||||
name,
|
||||
...rest
|
||||
}) => (
|
||||
<ComposerOptionsDropdownItem
|
||||
active={name === value}
|
||||
key={name}
|
||||
name={name}
|
||||
<ComposerOptionsDropdownContent
|
||||
items={items}
|
||||
onChange={onChange}
|
||||
onClose={close}
|
||||
options={rest}
|
||||
onClose={handleClose}
|
||||
value={value}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Motion>
|
||||
</Overlay>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -95,7 +95,7 @@ const messages = defineMessages({
|
||||
const handlers = {
|
||||
|
||||
// Handles file selection.
|
||||
changeFiles ({ target: { files } }) {
|
||||
handleChangeFiles ({ target: { files } }) {
|
||||
const { onUpload } = this.props;
|
||||
if (files.length && onUpload) {
|
||||
onUpload(files);
|
||||
@ -103,7 +103,7 @@ const handlers = {
|
||||
},
|
||||
|
||||
// Handles attachment clicks.
|
||||
clickAttach (name) {
|
||||
handleClickAttach (name) {
|
||||
const { fileElement } = this;
|
||||
const { onDoodleOpen } = this.props;
|
||||
|
||||
@ -123,7 +123,7 @@ const handlers = {
|
||||
},
|
||||
|
||||
// Handles a ref to the file input.
|
||||
refFileElement (fileElement) {
|
||||
handleRefFileElement (fileElement) {
|
||||
this.fileElement = fileElement;
|
||||
},
|
||||
};
|
||||
@ -143,9 +143,9 @@ export default class ComposerOptions extends React.PureComponent {
|
||||
// Rendering.
|
||||
render () {
|
||||
const {
|
||||
changeFiles,
|
||||
clickAttach,
|
||||
refFileElement,
|
||||
handleChangeFiles,
|
||||
handleClickAttach,
|
||||
handleRefFileElement,
|
||||
} = this.handlers;
|
||||
const {
|
||||
acceptContentTypes,
|
||||
@ -159,6 +159,7 @@ export default class ComposerOptions extends React.PureComponent {
|
||||
onModalClose,
|
||||
onModalOpen,
|
||||
onToggleAdvancedOption,
|
||||
onToggleSpoiler,
|
||||
privacy,
|
||||
resetFileKey,
|
||||
sensitive,
|
||||
@ -201,8 +202,8 @@ export default class ComposerOptions extends React.PureComponent {
|
||||
accept={acceptContentTypes}
|
||||
disabled={disabled || full}
|
||||
key={resetFileKey}
|
||||
onChange={changeFiles}
|
||||
ref={refFileElement}
|
||||
onChange={handleChangeFiles}
|
||||
ref={handleRefFileElement}
|
||||
type='file'
|
||||
{...hiddenComponent}
|
||||
/>
|
||||
@ -221,10 +222,10 @@ export default class ComposerOptions extends React.PureComponent {
|
||||
text: <FormattedMessage {...messages.doodle} />,
|
||||
},
|
||||
]}
|
||||
onChange={clickAttach}
|
||||
onChange={handleClickAttach}
|
||||
onModalClose={onModalClose}
|
||||
onModalOpen={onModalOpen}
|
||||
title={messages.attach}
|
||||
title={intl.formatMessage(messages.attach)}
|
||||
/>
|
||||
<Motion
|
||||
defaultStyle={{ scale: 0.87 }}
|
||||
@ -279,6 +280,7 @@ export default class ComposerOptions extends React.PureComponent {
|
||||
active={spoiler}
|
||||
ariaControls='glitch.composer.spoiler.input'
|
||||
label='CW'
|
||||
onClick={onToggleSpoiler}
|
||||
title={intl.formatMessage(messages.spoiler)}
|
||||
/>
|
||||
<Dropdown
|
||||
@ -318,9 +320,10 @@ ComposerOptions.propTypes = {
|
||||
onModalClose: PropTypes.func,
|
||||
onModalOpen: PropTypes.func,
|
||||
onToggleAdvancedOption: PropTypes.func,
|
||||
onToggleSpoiler: PropTypes.func,
|
||||
onUpload: PropTypes.func,
|
||||
privacy: PropTypes.string,
|
||||
resetFileKey: PropTypes.string,
|
||||
resetFileKey: PropTypes.number,
|
||||
sensitive: PropTypes.bool,
|
||||
spoiler: PropTypes.bool,
|
||||
};
|
||||
|
||||
@ -46,10 +46,13 @@ export default function ComposerPublisher ({
|
||||
// The result.
|
||||
return (
|
||||
<div className={computedClass}>
|
||||
<span class='count'>{diff}</span>
|
||||
<span className='count'>{diff}</span>
|
||||
{sideArm && sideArm !== 'none' ? (
|
||||
<Button
|
||||
className='side_arm'
|
||||
disabled={disabled || diff < 0}
|
||||
onClick={onSecondarySubmit}
|
||||
style={{ padding: null }}
|
||||
text={
|
||||
<span>
|
||||
<Icon
|
||||
@ -63,8 +66,6 @@ export default function ComposerPublisher ({
|
||||
</span>
|
||||
}
|
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArm}.short` })}`}
|
||||
onClick={onSecondarySubmit}
|
||||
disabled={disabled || diff < 0}
|
||||
/>
|
||||
) : null}
|
||||
<Button
|
||||
|
||||
@ -25,7 +25,7 @@ const messages = defineMessages({
|
||||
const handlers = {
|
||||
|
||||
// Handles a click on the "close" button.
|
||||
click () {
|
||||
handleClick () {
|
||||
const { onCancel } = this.props;
|
||||
if (onCancel) {
|
||||
onCancel();
|
||||
@ -33,7 +33,7 @@ const handlers = {
|
||||
},
|
||||
|
||||
// Handles a click on the status's account.
|
||||
clickAccount () {
|
||||
handleClickAccount () {
|
||||
const {
|
||||
account,
|
||||
history,
|
||||
@ -56,8 +56,8 @@ export default class ComposerReply extends React.PureComponent {
|
||||
// Rendering.
|
||||
render () {
|
||||
const {
|
||||
click,
|
||||
clickAccount,
|
||||
handleClick,
|
||||
handleClickAccount,
|
||||
} = this.handlers;
|
||||
const {
|
||||
account,
|
||||
@ -72,14 +72,14 @@ export default class ComposerReply extends React.PureComponent {
|
||||
<IconButton
|
||||
className='cancel'
|
||||
icon='times'
|
||||
onClick={click}
|
||||
onClick={handleClick}
|
||||
title={intl.formatMessage(messages.cancel)}
|
||||
/>
|
||||
{account ? (
|
||||
<a
|
||||
className='account'
|
||||
href={account.get('url')}
|
||||
onClick={clickAccount}
|
||||
onClick={handleClickAccount}
|
||||
>
|
||||
<Avatar
|
||||
account={account}
|
||||
|
||||
@ -24,7 +24,7 @@ const messages = defineMessages({
|
||||
const handlers = {
|
||||
|
||||
// Handles a keypress.
|
||||
keyDown ({
|
||||
handleKeyDown ({
|
||||
ctrlKey,
|
||||
keyCode,
|
||||
metaKey,
|
||||
@ -49,7 +49,7 @@ export default class ComposerSpoiler extends React.PureComponent {
|
||||
|
||||
// Rendering.
|
||||
render () {
|
||||
const { keyDown } = this.handlers;
|
||||
const { handleKeyDown } = this.handlers;
|
||||
const {
|
||||
hidden,
|
||||
intl,
|
||||
@ -70,7 +70,7 @@ export default class ComposerSpoiler extends React.PureComponent {
|
||||
<input
|
||||
id='glitch.composer.spoiler.input'
|
||||
onChange={onChange}
|
||||
onKeyDown={keyDown}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
type='text'
|
||||
value={text}
|
||||
|
||||
@ -31,14 +31,14 @@ const messages = defineMessages({
|
||||
const handlers = {
|
||||
|
||||
// When blurring the textarea, suggestions are hidden.
|
||||
blur () {
|
||||
handleBlur () {
|
||||
this.setState({ suggestionsHidden: true });
|
||||
},
|
||||
|
||||
// When the contents of the textarea change, we have to pull up new
|
||||
// autosuggest suggestions if applicable, and also change the value
|
||||
// of the textarea in our store.
|
||||
change ({
|
||||
handleChange ({
|
||||
target: {
|
||||
selectionStart,
|
||||
value,
|
||||
@ -91,7 +91,7 @@ const handlers = {
|
||||
},
|
||||
|
||||
// Handles a click on an autosuggestion.
|
||||
clickSuggestion (index) {
|
||||
handleClickSuggestion (index) {
|
||||
const { textarea } = this;
|
||||
const {
|
||||
onSuggestionSelected,
|
||||
@ -107,7 +107,7 @@ const handlers = {
|
||||
|
||||
// Handles a keypress. If the autosuggestions are visible, we need
|
||||
// to allow keypresses to navigate and sleect them.
|
||||
keyDown (e) {
|
||||
handleKeyDown (e) {
|
||||
const {
|
||||
disabled,
|
||||
onSubmit,
|
||||
@ -165,7 +165,7 @@ const handlers = {
|
||||
|
||||
// When the escape key is released, we either close the suggestions
|
||||
// window or focus the UI.
|
||||
keyUp ({ key }) {
|
||||
handleKeyUp ({ key }) {
|
||||
const { suggestionsHidden } = this.state;
|
||||
if (key === 'Escape') {
|
||||
if (!suggestionsHidden) {
|
||||
@ -177,7 +177,7 @@ const handlers = {
|
||||
},
|
||||
|
||||
// Handles the pasting of images into the composer.
|
||||
paste (e) {
|
||||
handlePaste (e) {
|
||||
const { onPaste } = this.props;
|
||||
let d;
|
||||
if (onPaste && (d = e.clipboardData) && (d = d.files).length === 1) {
|
||||
@ -187,7 +187,7 @@ const handlers = {
|
||||
},
|
||||
|
||||
// Saves a reference to the textarea.
|
||||
refTextarea (textarea) {
|
||||
handleRefTextarea (textarea) {
|
||||
this.textarea = textarea;
|
||||
},
|
||||
};
|
||||
@ -223,13 +223,13 @@ export default class ComposerTextarea extends React.Component {
|
||||
// Rendering.
|
||||
render () {
|
||||
const {
|
||||
blur,
|
||||
change,
|
||||
clickSuggestion,
|
||||
keyDown,
|
||||
keyUp,
|
||||
paste,
|
||||
refTextarea,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
handleClickSuggestion,
|
||||
handleKeyDown,
|
||||
handleKeyUp,
|
||||
handlePaste,
|
||||
handleRefTextarea,
|
||||
} = this.handlers;
|
||||
const {
|
||||
autoFocus,
|
||||
@ -254,12 +254,12 @@ export default class ComposerTextarea extends React.Component {
|
||||
autoFocus={autoFocus}
|
||||
className='textarea'
|
||||
disabled={disabled}
|
||||
inputRef={refTextarea}
|
||||
onBlur={blur}
|
||||
onChange={change}
|
||||
onKeyDown={keyDown}
|
||||
onKeyUp={keyUp}
|
||||
onPaste={paste}
|
||||
inputRef={handleRefTextarea}
|
||||
onBlur={handleBlur}
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
onPaste={handlePaste}
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={value}
|
||||
style={{ direction: isRtl(value) ? 'rtl' : 'ltr' }}
|
||||
@ -268,7 +268,7 @@ export default class ComposerTextarea extends React.Component {
|
||||
<EmojiPicker onPickEmoji={onPickEmoji} />
|
||||
<ComposerTextareaSuggestions
|
||||
hidden={suggestionsHidden}
|
||||
onSuggestionClick={clickSuggestion}
|
||||
onSuggestionClick={handleClickSuggestion}
|
||||
suggestions={suggestions}
|
||||
value={selectedSuggestion}
|
||||
/>
|
||||
|
||||
@ -18,9 +18,9 @@ export default function ComposerTextareaSuggestions ({
|
||||
return (
|
||||
<div
|
||||
className='composer--textarea--suggestions'
|
||||
hidden={hidden || suggestions.isEmpty()}
|
||||
hidden={hidden || !suggestions || suggestions.isEmpty()}
|
||||
>
|
||||
{!hidden ? suggestions.map(
|
||||
{!hidden && suggestions ? suggestions.map(
|
||||
(suggestion, index) => (
|
||||
<ComposerTextareaSuggestionsItem
|
||||
index={index}
|
||||
@ -39,5 +39,5 @@ ComposerTextareaSuggestions.propTypes = {
|
||||
hidden: PropTypes.bool,
|
||||
onSuggestionClick: PropTypes.func,
|
||||
suggestions: ImmutablePropTypes.list,
|
||||
value: PropTypes.string,
|
||||
value: PropTypes.number,
|
||||
};
|
||||
|
||||
@ -17,7 +17,7 @@ const assetHost = ((process || {}).env || {}).CDN_HOST || '';
|
||||
const handlers = {
|
||||
|
||||
// Handles a click on a suggestion.
|
||||
click (e) {
|
||||
handleClick (e) {
|
||||
const {
|
||||
index,
|
||||
onClick,
|
||||
@ -40,7 +40,7 @@ export default class ComposerTextareaSuggestionsItem extends React.Component {
|
||||
|
||||
// Rendering.
|
||||
render () {
|
||||
const { click } = this.handlers;
|
||||
const { handleClick } = this.handlers;
|
||||
const {
|
||||
selected,
|
||||
suggestion,
|
||||
@ -51,7 +51,7 @@ export default class ComposerTextareaSuggestionsItem extends React.Component {
|
||||
return (
|
||||
<div
|
||||
className={computedClass}
|
||||
onMouseDown={click}
|
||||
onMouseDown={handleClick}
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
>
|
||||
|
||||
@ -10,24 +10,21 @@ import ComposerUploadFormProgress from './progress';
|
||||
|
||||
// The component.
|
||||
export default function ComposerUploadForm ({
|
||||
active,
|
||||
intl,
|
||||
media,
|
||||
onChangeDescription,
|
||||
onRemove,
|
||||
progress,
|
||||
uploading,
|
||||
}) {
|
||||
const computedClass = classNames('composer--upload_form', { uploading: active });
|
||||
|
||||
// We need `media` in order to be able to render.
|
||||
if (!media) {
|
||||
return null;
|
||||
}
|
||||
const computedClass = classNames('composer--upload_form', { uploading });
|
||||
|
||||
// The result.
|
||||
return (
|
||||
<div className={computedClass}>
|
||||
{active ? <ComposerUploadFormProgress progress={progress} /> : null}
|
||||
{uploading ? <ComposerUploadFormProgress progress={progress} /> : null}
|
||||
{media ? (
|
||||
<div className='content'>
|
||||
{media.map(item => (
|
||||
<ComposerUploadFormItem
|
||||
description={item.get('description')}
|
||||
@ -40,15 +37,17 @@ export default function ComposerUploadForm ({
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Props.
|
||||
ComposerUploadForm.propTypes = {
|
||||
active: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
media: ImmutablePropTypes.list,
|
||||
onChangeDescription: PropTypes.func,
|
||||
onRemove: PropTypes.func,
|
||||
progress: PropTypes.number,
|
||||
uploading: PropTypes.bool,
|
||||
};
|
||||
|
||||
@ -31,7 +31,7 @@ const messages = defineMessages({
|
||||
const handlers = {
|
||||
|
||||
// On blur, we save the description for the media item.
|
||||
blur () {
|
||||
handleBlur () {
|
||||
const {
|
||||
id,
|
||||
onChangeDescription,
|
||||
@ -48,27 +48,27 @@ const handlers = {
|
||||
|
||||
// When the value of our description changes, we store it in the
|
||||
// temp value `dirtyDescription` in our state.
|
||||
change ({ target: { value } }) {
|
||||
handleChange ({ target: { value } }) {
|
||||
this.setState({ dirtyDescription: value });
|
||||
},
|
||||
|
||||
// Records focus on the media item.
|
||||
focus () {
|
||||
handleFocus () {
|
||||
this.setState({ focused: true });
|
||||
},
|
||||
|
||||
// Records the start of a hover over the media item.
|
||||
mouseEnter () {
|
||||
handleMouseEnter () {
|
||||
this.setState({ hovered: true });
|
||||
},
|
||||
|
||||
// Records the end of a hover over the media item.
|
||||
mouseLeave () {
|
||||
handleMouseLeave () {
|
||||
this.setState({ hovered: false });
|
||||
},
|
||||
|
||||
// Removes the media item.
|
||||
remove () {
|
||||
handleRemove () {
|
||||
const {
|
||||
id,
|
||||
onRemove,
|
||||
@ -85,7 +85,7 @@ export default class ComposerUploadFormItem extends React.PureComponent {
|
||||
// Constructor.
|
||||
constructor (props) {
|
||||
super(props);
|
||||
assignHandlers(handlers);
|
||||
assignHandlers(this, handlers);
|
||||
this.state = {
|
||||
hovered: false,
|
||||
focused: false,
|
||||
@ -96,12 +96,12 @@ export default class ComposerUploadFormItem extends React.PureComponent {
|
||||
// Rendering.
|
||||
render () {
|
||||
const {
|
||||
blur,
|
||||
change,
|
||||
focus,
|
||||
mouseEnter,
|
||||
mouseLeave,
|
||||
remove,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
handleFocus,
|
||||
handleMouseEnter,
|
||||
handleMouseLeave,
|
||||
handleRemove,
|
||||
} = this.handlers;
|
||||
const {
|
||||
description,
|
||||
@ -119,8 +119,8 @@ export default class ComposerUploadFormItem extends React.PureComponent {
|
||||
return (
|
||||
<div
|
||||
className={computedClass}
|
||||
onMouseEnter={mouseEnter}
|
||||
onMouseLeave={mouseLeave}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<Motion
|
||||
defaultStyle={{ scale: 0.8 }}
|
||||
@ -141,7 +141,7 @@ export default class ComposerUploadFormItem extends React.PureComponent {
|
||||
<IconButton
|
||||
className='close'
|
||||
icon='times'
|
||||
onClick={remove}
|
||||
onClick={handleRemove}
|
||||
size={36}
|
||||
title={intl.formatMessage(messages.undo)}
|
||||
/>
|
||||
@ -149,9 +149,9 @@ export default class ComposerUploadFormItem extends React.PureComponent {
|
||||
<span style={{ display: 'none' }}><FormattedMessage {...messages.description} /></span>
|
||||
<input
|
||||
maxLength={420}
|
||||
onBlur={blur}
|
||||
onChange={change}
|
||||
onFocus={focus}
|
||||
onBlur={handleBlur}
|
||||
onChange={handleChange}
|
||||
onFocus={handleFocus}
|
||||
placeholder={intl.formatMessage(messages.description)}
|
||||
type='text'
|
||||
value={dirtyDescription || description || ''}
|
||||
@ -169,7 +169,7 @@ export default class ComposerUploadFormItem extends React.PureComponent {
|
||||
// Props.
|
||||
ComposerUploadFormItem.propTypes = {
|
||||
description: PropTypes.string,
|
||||
id: PropTypes.number,
|
||||
id: PropTypes.string,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onChangeDescription: PropTypes.func,
|
||||
onRemove: PropTypes.func,
|
||||
|
||||
@ -27,7 +27,7 @@ export default function DrawerAccount ({ account }) {
|
||||
// We need an account to render.
|
||||
if (!account) {
|
||||
return (
|
||||
<div className='drawer--pager--account'>
|
||||
<div className='drawer--account'>
|
||||
<a
|
||||
className='edit'
|
||||
href='/settings/profile'
|
||||
@ -40,7 +40,7 @@ export default function DrawerAccount ({ account }) {
|
||||
|
||||
// The result.
|
||||
return (
|
||||
<div className='drawer--pager--account'>
|
||||
<div className='drawer--account'>
|
||||
<Permalink
|
||||
className='avatar'
|
||||
href={account.get('url')}
|
||||
@ -67,4 +67,5 @@ export default function DrawerAccount ({ account }) {
|
||||
);
|
||||
}
|
||||
|
||||
// Props.
|
||||
DrawerAccount.propTypes = { account: ImmutablePropTypes.map };
|
||||
|
||||
@ -51,7 +51,7 @@ export default function DrawerHeader ({
|
||||
}) {
|
||||
|
||||
// Only renders the component if the column isn't being shown.
|
||||
const renderForColumn = conditionalRender.bind(
|
||||
const renderForColumn = conditionalRender.bind(null,
|
||||
columnId => !columns || !columns.some(
|
||||
column => column.get('id') === columnId
|
||||
)
|
||||
@ -110,6 +110,7 @@ export default function DrawerHeader ({
|
||||
);
|
||||
}
|
||||
|
||||
// Props.
|
||||
DrawerHeader.propTypes = {
|
||||
columns: ImmutablePropTypes.list,
|
||||
intl: PropTypes.object,
|
||||
|
||||
@ -34,23 +34,13 @@ const mapStateToProps = state => ({
|
||||
});
|
||||
|
||||
// Dispatch mapping.
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
change (value) {
|
||||
dispatch(changeSearch(value));
|
||||
},
|
||||
clear () {
|
||||
dispatch(clearSearch());
|
||||
},
|
||||
show () {
|
||||
dispatch(showSearch());
|
||||
},
|
||||
submit () {
|
||||
dispatch(submitSearch());
|
||||
},
|
||||
openSettings () {
|
||||
dispatch(openModal('SETTINGS', {}));
|
||||
},
|
||||
});
|
||||
const mapDispatchToProps = {
|
||||
onChange: changeSearch,
|
||||
onClear: clearSearch,
|
||||
onShow: showSearch,
|
||||
onSubmit: submitSearch,
|
||||
onOpenSettings: openModal.bind(null, 'SETTINGS', {}),
|
||||
};
|
||||
|
||||
// The component.
|
||||
class Drawer extends React.Component {
|
||||
@ -63,23 +53,19 @@ class Drawer extends React.Component {
|
||||
// Rendering.
|
||||
render () {
|
||||
const {
|
||||
dispatch: {
|
||||
change,
|
||||
clear,
|
||||
openSettings,
|
||||
show,
|
||||
submit,
|
||||
},
|
||||
intl,
|
||||
multiColumn,
|
||||
state: {
|
||||
account,
|
||||
columns,
|
||||
intl,
|
||||
multiColumn,
|
||||
onChange,
|
||||
onClear,
|
||||
onOpenSettings,
|
||||
onShow,
|
||||
onSubmit,
|
||||
results,
|
||||
searchHidden,
|
||||
searchValue,
|
||||
submitted,
|
||||
},
|
||||
} = this.props;
|
||||
|
||||
// The result.
|
||||
@ -89,15 +75,15 @@ class Drawer extends React.Component {
|
||||
<DrawerHeader
|
||||
columns={columns}
|
||||
intl={intl}
|
||||
onSettingsClick={openSettings}
|
||||
onSettingsClick={onOpenSettings}
|
||||
/>
|
||||
) : null}
|
||||
<DrawerSearch
|
||||
intl={intl}
|
||||
onChange={change}
|
||||
onClear={clear}
|
||||
onShow={show}
|
||||
onSubmit={submit}
|
||||
onChange={onChange}
|
||||
onClear={onClear}
|
||||
onShow={onShow}
|
||||
onSubmit={onSubmit}
|
||||
submitted={submitted}
|
||||
value={searchValue}
|
||||
/>
|
||||
@ -117,23 +103,23 @@ class Drawer extends React.Component {
|
||||
|
||||
// Props.
|
||||
Drawer.propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
multiColumn: PropTypes.bool,
|
||||
state: PropTypes.shape({
|
||||
|
||||
// State props.
|
||||
account: ImmutablePropTypes.map,
|
||||
columns: ImmutablePropTypes.list,
|
||||
results: ImmutablePropTypes.map,
|
||||
searchHidden: PropTypes.bool,
|
||||
searchValue: PropTypes.string,
|
||||
submitted: PropTypes.bool,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
// Default props.
|
||||
Drawer.defaultProps = {
|
||||
dispatch: {},
|
||||
state: {},
|
||||
// Dispatch props.
|
||||
onChange: PropTypes.func,
|
||||
onClear: PropTypes.func,
|
||||
onShow: PropTypes.func,
|
||||
onSubmit: PropTypes.func,
|
||||
onOpenSettings: PropTypes.func,
|
||||
};
|
||||
|
||||
// Connecting and export.
|
||||
|
||||
@ -25,7 +25,7 @@ const messages = defineMessages({
|
||||
});
|
||||
|
||||
// The component.
|
||||
export default function DrawerPager ({
|
||||
export default function DrawerResults ({
|
||||
results,
|
||||
visible,
|
||||
}) {
|
||||
@ -33,6 +33,7 @@ export default function DrawerPager ({
|
||||
const statuses = results ? results.get('statuses') : null;
|
||||
const hashtags = results ? results.get('hashtags') : null;
|
||||
|
||||
// This gets the total number of items.
|
||||
const count = [accounts, statuses, hashtags].reduce(function (size, item) {
|
||||
if (item && item.size) {
|
||||
return size + item.size;
|
||||
@ -108,7 +109,8 @@ export default function DrawerPager ({
|
||||
);
|
||||
}
|
||||
|
||||
DrawerPager.propTypes = {
|
||||
// Props.
|
||||
DrawerResults.propTypes = {
|
||||
results: ImmutablePropTypes.map,
|
||||
visible: PropTypes.bool,
|
||||
};
|
||||
|
||||
@ -30,18 +30,18 @@ const messages = defineMessages({
|
||||
// Handlers.
|
||||
const handlers = {
|
||||
|
||||
blur () {
|
||||
handleBlur () {
|
||||
this.setState({ expanded: false });
|
||||
},
|
||||
|
||||
change ({ target: { value } }) {
|
||||
handleChange ({ target: { value } }) {
|
||||
const { onChange } = this.props;
|
||||
if (onChange) {
|
||||
onChange(value);
|
||||
}
|
||||
},
|
||||
|
||||
clear (e) {
|
||||
handleClear (e) {
|
||||
const {
|
||||
onClear,
|
||||
submitted,
|
||||
@ -53,7 +53,7 @@ const handlers = {
|
||||
}
|
||||
},
|
||||
|
||||
focus () {
|
||||
handleFocus () {
|
||||
const { onShow } = this.props;
|
||||
this.setState({ expanded: true });
|
||||
if (onShow) {
|
||||
@ -61,7 +61,7 @@ const handlers = {
|
||||
}
|
||||
},
|
||||
|
||||
keyUp (e) {
|
||||
handleKeyUp (e) {
|
||||
const { onSubmit } = this.props;
|
||||
switch (e.key) {
|
||||
case 'Enter':
|
||||
@ -78,19 +78,21 @@ const handlers = {
|
||||
// The component.
|
||||
export default class DrawerSearch extends React.PureComponent {
|
||||
|
||||
// Constructor.
|
||||
constructor (props) {
|
||||
super(props);
|
||||
assignHandlers(this, handlers);
|
||||
this.state = { expanded: false };
|
||||
}
|
||||
|
||||
// Rendering.
|
||||
render () {
|
||||
const {
|
||||
blur,
|
||||
change,
|
||||
clear,
|
||||
focus,
|
||||
keyUp,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
handleClear,
|
||||
handleFocus,
|
||||
handleKeyUp,
|
||||
} = this.handlers;
|
||||
const {
|
||||
intl,
|
||||
@ -110,23 +112,22 @@ export default class DrawerSearch extends React.PureComponent {
|
||||
type='text'
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={value || ''}
|
||||
onChange={change}
|
||||
onKeyUp={keyUp}
|
||||
onFocus={focus}
|
||||
onBlur={blur}
|
||||
onChange={handleChange}
|
||||
onKeyUp={handleKeyUp}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
</label>
|
||||
<div
|
||||
aria-label={intl.formatMessage(messages.placeholder)}
|
||||
className='icon'
|
||||
onClick={clear}
|
||||
onClick={handleClear}
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
>
|
||||
<Icon icon='search' />
|
||||
<Icon icon='fa-times-circle' />
|
||||
</div>
|
||||
|
||||
<Overlay
|
||||
placement='bottom'
|
||||
show={expanded && !(value || '').length && !submitted}
|
||||
@ -138,6 +139,7 @@ export default class DrawerSearch extends React.PureComponent {
|
||||
|
||||
}
|
||||
|
||||
// Props.
|
||||
DrawerSearch.propTypes = {
|
||||
value: PropTypes.string,
|
||||
submitted: PropTypes.bool,
|
||||
|
||||
@ -34,9 +34,13 @@ const messages = defineMessages({
|
||||
},
|
||||
});
|
||||
|
||||
// The spring used by our motion.
|
||||
const motionSpring = spring(1, { damping: 35, stiffness: 400 });
|
||||
|
||||
// The component.
|
||||
export default function DrawerSearchPopout ({ style }) {
|
||||
|
||||
// The result.
|
||||
return (
|
||||
<Motion
|
||||
defaultStyle={{
|
||||
|
||||
@ -50,7 +50,7 @@ export default class ActionsModal extends ImmutablePureComponent {
|
||||
<Link
|
||||
className={classNames('link', { active })}
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
onClick={on !== null && typeof on !== 'undefined' && onPassiveClick || onClick}
|
||||
role={onClick ? 'button' : null}
|
||||
>
|
||||
{function () {
|
||||
|
||||
@ -11,13 +11,13 @@ import BundleContainer from '../containers/bundle_container';
|
||||
import ColumnLoading from './column_loading';
|
||||
import DrawerLoading from './drawer_loading';
|
||||
import BundleColumnError from './bundle_column_error';
|
||||
import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, ListTimeline } from 'flavours/glitch/util/async-components';
|
||||
import { Drawer, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, ListTimeline } from 'flavours/glitch/util/async-components';
|
||||
|
||||
import detectPassiveEvents from 'detect-passive-events';
|
||||
import { scrollRight } from 'flavours/glitch/util/scroll';
|
||||
|
||||
const componentMap = {
|
||||
'COMPOSE': Compose,
|
||||
'COMPOSE': Drawer,
|
||||
'HOME': HomeTimeline,
|
||||
'NOTIFICATIONS': Notifications,
|
||||
'PUBLIC': PublicTimeline,
|
||||
|
||||
@ -17,7 +17,7 @@ import UploadArea from './components/upload_area';
|
||||
import ColumnsAreaContainer from './containers/columns_area_container';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
Compose,
|
||||
Drawer,
|
||||
Status,
|
||||
GettingStarted,
|
||||
KeyboardShortcuts,
|
||||
@ -56,7 +56,6 @@ const messages = defineMessages({
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
isComposing: state.getIn(['compose', 'is_composing']),
|
||||
hasComposingText: state.getIn(['compose', 'text']) !== '',
|
||||
layout: state.getIn(['local_settings', 'layout']),
|
||||
isWide: state.getIn(['local_settings', 'stretch']),
|
||||
@ -120,9 +119,9 @@ export default class UI extends React.Component {
|
||||
};
|
||||
|
||||
handleBeforeUnload = (e) => {
|
||||
const { intl, isComposing, hasComposingText } = this.props;
|
||||
const { intl, hasComposingText } = this.props;
|
||||
|
||||
if (isComposing && hasComposingText) {
|
||||
if (hasComposingText) {
|
||||
// Setting returnValue to any string causes confirmation dialog.
|
||||
// Many browsers no longer display this text to users,
|
||||
// but we set user-friendly message for other browsers, e.g. Edge.
|
||||
@ -227,9 +226,8 @@ export default class UI extends React.Component {
|
||||
}
|
||||
|
||||
shouldComponentUpdate (nextProps) {
|
||||
if (nextProps.isComposing !== this.props.isComposing) {
|
||||
if (nextProps.navbarUnder !== this.props.navbarUnder) {
|
||||
// Avoid expensive update just to toggle a class
|
||||
this.node.classList.toggle('is-composing', nextProps.isComposing);
|
||||
this.node.classList.toggle('navbar-under', nextProps.navbarUnder);
|
||||
|
||||
return false;
|
||||
@ -427,7 +425,7 @@ export default class UI extends React.Component {
|
||||
<WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} />
|
||||
<WrappedRoute path='/pinned' component={PinnedStatuses} content={children} />
|
||||
|
||||
<WrappedRoute path='/statuses/new' component={Compose} content={children} />
|
||||
<WrappedRoute path='/statuses/new' component={Drawer} content={children} />
|
||||
<WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} />
|
||||
<WrappedRoute path='/statuses/:statusId/reblogs' component={Reblogs} content={children} />
|
||||
<WrappedRoute path='/statuses/:statusId/favourites' component={Favourites} content={children} />
|
||||
|
||||
@ -47,7 +47,6 @@ const initialState = ImmutableMap({
|
||||
focusDate: null,
|
||||
preselectDate: null,
|
||||
in_reply_to: null,
|
||||
is_composing: false,
|
||||
is_submitting: false,
|
||||
is_uploading: false,
|
||||
progress: 0,
|
||||
@ -180,9 +179,7 @@ export default function compose(state = initialState, action) {
|
||||
case COMPOSE_MOUNT:
|
||||
return state.set('mounted', true);
|
||||
case COMPOSE_UNMOUNT:
|
||||
return state
|
||||
.set('mounted', false)
|
||||
.set('is_composing', false);
|
||||
return state.set('mounted', false)
|
||||
case COMPOSE_ADVANCED_OPTIONS_CHANGE:
|
||||
return state
|
||||
.set('advanced_options',
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
.composer { padding: 10px }
|
||||
|
||||
.composer--spoiler {
|
||||
input {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -18,6 +19,7 @@
|
||||
&:focus { outline: 0 }
|
||||
@include single-column('screen and (max-width: 630px)') { font-size: 16px }
|
||||
}
|
||||
}
|
||||
|
||||
.composer--warning {
|
||||
color: darken($ui-secondary-color, 65%);
|
||||
@ -116,12 +118,10 @@
|
||||
}
|
||||
|
||||
.composer--textarea {
|
||||
background: $simple-background-color;
|
||||
position: relative;
|
||||
|
||||
&:disabled { background: $ui-secondary-color }
|
||||
|
||||
& > .textarea {
|
||||
& > label {
|
||||
.textarea {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -137,6 +137,7 @@
|
||||
font-family: inherit;
|
||||
resize: none;
|
||||
|
||||
&:disabled { background: $ui-secondary-color }
|
||||
&:focus { outline: 0 }
|
||||
@include single-column('screen and (max-width: 630px)') { font-size: 16px }
|
||||
|
||||
@ -146,6 +147,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.composer--textarea--suggestions {
|
||||
display: block;
|
||||
@ -192,16 +194,19 @@
|
||||
}
|
||||
|
||||
.composer--upload_form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 5px;
|
||||
color: $ui-base-color;
|
||||
background: $simple-background-color;
|
||||
font-size: 14px;
|
||||
|
||||
& > .content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
font-family: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.composer--upload_form--item {
|
||||
flex: 1 1 0;
|
||||
@ -254,17 +259,61 @@
|
||||
}
|
||||
}
|
||||
|
||||
.composer--upload_form--progress {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
color: $ui-base-lighter-color;
|
||||
overflow: hidden;
|
||||
|
||||
& > .fa {
|
||||
font-size: 34px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
& > .message {
|
||||
flex: 1 1 auto;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& > .backdrop {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: $ui-base-lighter-color;
|
||||
|
||||
& > .tracker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
background: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.composer--options {
|
||||
padding: 10px;
|
||||
background: darken($simple-background-color, 8%);
|
||||
box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
|
||||
border-radius: 0 0 4px 4px;
|
||||
height: 27px;
|
||||
|
||||
& > * {
|
||||
display: inline-block;
|
||||
box-sizing: content-box;
|
||||
padding: 0 3px;
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
& > hr {
|
||||
@ -274,26 +323,26 @@
|
||||
border-style: none none none solid;
|
||||
border-color: transparent transparent transparent darken($simple-background-color, 24%);
|
||||
padding: 0;
|
||||
width: 0;
|
||||
height: 27px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.composer--options--dropdown {
|
||||
& > .value { transition: none }
|
||||
|
||||
&.active {
|
||||
&.open {
|
||||
& > .value {
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
|
||||
color: $primary-text-color;
|
||||
background: $ui-highlight-color;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.composer--options--dropdown__dropdown {
|
||||
.composer--options--dropdown--content {
|
||||
position: absolute;
|
||||
margin-left: 40px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
|
||||
background: $simple-background-color;
|
||||
@ -301,11 +350,12 @@
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
|
||||
.composer--options--dropdown--item {
|
||||
color: $ui-base-color;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
.composer--options--dropdown--content--item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
color: $ui-base-color;
|
||||
cursor: pointer;
|
||||
|
||||
& > .content {
|
||||
flex: 1 1 auto;
|
||||
@ -344,7 +394,6 @@
|
||||
& > .count {
|
||||
display: inline-block;
|
||||
margin: 0 16px 0 8px;
|
||||
padding-top: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
box-sizing: border-box;
|
||||
padding: 10px 5px;
|
||||
width: 300px;
|
||||
flex: 1 1 100%;
|
||||
flex: none;
|
||||
contain: strict;
|
||||
|
||||
&:first-child {
|
||||
@ -15,10 +15,10 @@
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@include multi-columns('screen and (max-width: 630px)') {
|
||||
&, &:first-child, &:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
@include single-column('screen and (max-width: 630px)') { flex: auto }
|
||||
|
||||
@include limited-single-column('screen and (max-width: 630px)') {
|
||||
&, &:first-child, &:last-child { padding: 0 }
|
||||
}
|
||||
|
||||
.wide & {
|
||||
@ -27,8 +27,28 @@
|
||||
flex: 1 1 200px;
|
||||
}
|
||||
|
||||
.react-swipeable-view-container & {
|
||||
@include single-column('screen and (max-width: 630px)') {
|
||||
:root & { // Overrides `.wide` for single-column view
|
||||
flex: auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.react-swipeable-view-container & { height: 100% }
|
||||
|
||||
& > .contents {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: lighten($ui-base-color, 13%);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
contain: strict;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer--header {
|
||||
@ -69,9 +89,8 @@
|
||||
margin-bottom: 10px;
|
||||
flex: none;
|
||||
|
||||
@include limited-single-column('screen and (max-width: 360px)') {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@include limited-single-column('screen and (max-width: 360px)') { margin-bottom: 0 }
|
||||
@include single-column('screen and (max-width: 630px)') { font-size: 16px }
|
||||
|
||||
input {
|
||||
display: block;
|
||||
@ -121,9 +140,7 @@
|
||||
transform: rotate(-90deg);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
&:hover { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -141,16 +158,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
& > .contents {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: lighten($ui-base-color, 13%);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
contain: strict;
|
||||
|
||||
.drawer--account {
|
||||
padding: 10px;
|
||||
color: $ui-primary-color;
|
||||
@ -214,21 +221,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root { // Overrides .wide stylings for mobile view
|
||||
@include single-column('screen and (max-width: 630px)', $parent: null) {
|
||||
.drawer {
|
||||
flex: auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
|
||||
.drawer--search input {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2704,47 +2704,6 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
padding: 10px;
|
||||
color: $ui-base-lighter-color;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
.fa {
|
||||
font-size: 34px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-progess__message {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.upload-progress__backdrop {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
background: $ui-base-lighter-color;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.upload-progress__tracker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 6px;
|
||||
background: $ui-highlight-color;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.emoji-button {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
@ -3339,6 +3298,7 @@
|
||||
max-width: 80vw;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -3368,6 +3328,7 @@
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
& > .react-toggle,
|
||||
& > .icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@ -11,8 +11,8 @@ pack:
|
||||
home:
|
||||
filename: packs/home.js
|
||||
preload:
|
||||
- flavours/glitch/async/drawer
|
||||
- flavours/glitch/async/getting_started
|
||||
- flavours/glitch/async/compose
|
||||
- flavours/glitch/async/home_timeline
|
||||
- flavours/glitch/async/notifications
|
||||
modal:
|
||||
|
||||
@ -2,8 +2,8 @@ export function EmojiPicker () {
|
||||
return import(/* webpackChunkName: "flavours/glitch/async/emoji_picker" */'flavours/glitch/util/emoji/emoji_picker');
|
||||
}
|
||||
|
||||
export function Compose () {
|
||||
return import(/* webpackChunkName: "flavours/glitch/async/compose" */'flavours/glitch/features/compose');
|
||||
export function Drawer () {
|
||||
return import(/* webpackChunkName: "flavours/glitch/async/drawer" */'flavours/glitch/features/drawer');
|
||||
}
|
||||
|
||||
export function Notifications () {
|
||||
|
||||
@ -6,8 +6,8 @@ export function assignHandlers (target, handlers) {
|
||||
|
||||
// We just bind each handler to the `target`.
|
||||
const handle = target.handlers = {};
|
||||
handlers.keys().forEach(
|
||||
key => handle.key = key.bind(target)
|
||||
Object.keys(handlers).forEach(
|
||||
key => handle[key] = handlers[key].bind(target)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +1,8 @@
|
||||
import { injectIntl } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Merges react-redux props.
|
||||
export function mergeProps (stateProps, dispatchProps, ownProps) {
|
||||
Object.assign({}, ownProps, {
|
||||
dispatch: Object.assign({}, dispatchProps, ownProps.dispatch || {}),
|
||||
state: Object.assign({}, stateProps, ownProps.state || {}),
|
||||
});
|
||||
}
|
||||
|
||||
// Connects a component.
|
||||
export function wrap (Component, mapStateToProps, mapDispatchToProps, options) {
|
||||
const withIntl = typeof options === 'object' ? options.withIntl : !!options;
|
||||
return (withIntl ? injectIntl : i => i)(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component));
|
||||
return (withIntl ? injectIntl : i => i)(connect(mapStateToProps, mapDispatchToProps)(Component));
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user