From 924ffe81d477a8cf890c8117efb94b908760bccc Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 23 Dec 2017 22:16:45 -0800 Subject: WIPgit status Refactor; ed. --- .../composer/textarea/suggestions/item/index.js | 101 +++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js (limited to 'app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js') diff --git a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js new file mode 100644 index 000000000..08c99ed0e --- /dev/null +++ b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js @@ -0,0 +1,101 @@ +// Package imports. +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; + +// Components. +import AccountContainer from 'flavours/glitch/containers/account_container'; + +// Utils. +import { unicodeMapping } from 'flavours/glitch/util/emoji/emoji_unicode_mapping_light'; +import { assignHandlers } from 'flavours/glitch/util/react_helpers'; + +// Gets our asset host from the environment, if available. +const assetHost = ((process || {}).env || {}).CDN_HOST || ''; + +// Handlers. +const handlers = { + + // Handles a click on a suggestion. + click (e) { + const { + index, + onClick, + } = this.props; + if (onClick) { + e.preventDefault(); + onClick(index); + } + }, +}; + +// The component. +export default class ComposerTextareaSuggestionsItem extends React.Component { + + // Constructor. + constructor (props) { + super(props); + assignHandlers(this, handlers); + } + + // Rendering. + render () { + const { click } = this.handlers; + const { + selected, + suggestion, + } = this.props; + const computedClass = classNames('composer--textarea--suggestions--item', { selected }); + + // The result. + return ( +
+ { // If the suggestion is an object, then we render an emoji. + // Otherwise, we render an account. + typeof suggestion === 'object' ? function () { + const url = function () { + if (suggestion.custom) { + return suggestion.imageUrl; + } else { + const mapping = unicodeMapping[suggestion.native] || unicodeMapping[suggestion.native.replace(/\uFE0F$/, '')]; + if (!mapping) { + return null; + } + return `${assetHost}/emoji/${mapping.filename}.svg`; + } + }(); + return url ? ( +
+ {suggestion.native + {suggestion.colons} +
+ ) : null; + }() : ( + + ) + } +
+ ); + } + +} + +// Props. +ComposerTextareaSuggestionsItem.propTypes = { + index: PropTypes.number, + onClick: PropTypes.func, + selected: PropTypes.bool, + suggestion: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), +}; -- cgit From 083170bec755920b80c64f9cca2cc419831f66c8 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Fri, 29 Dec 2017 14:55:06 -0800 Subject: WIP Refactor; SCSS ed. --- app/javascript/flavours/glitch/actions/compose.js | 8 - .../flavours/glitch/components/avatar.js | 18 +- .../flavours/glitch/components/display_name.js | 12 +- .../glitch/features/composer/options/index.js | 7 +- .../glitch/features/composer/publisher/index.js | 3 +- .../glitch/features/composer/reply/index.js | 9 +- .../glitch/features/composer/textarea/index.js | 3 +- .../composer/textarea/suggestions/index.js | 8 +- .../composer/textarea/suggestions/item/index.js | 4 +- .../features/composer/upload_form/item/index.js | 1 + .../glitch/features/drawer/account/index.js | 70 +++ .../flavours/glitch/features/drawer/index.js | 33 +- .../glitch/features/drawer/pager/account/index.js | 70 --- .../flavours/glitch/features/drawer/pager/index.js | 43 -- .../features/ui/components/onboarding_modal.js | 8 +- app/javascript/flavours/glitch/reducers/compose.js | 3 - .../flavours/glitch/styles/components/compose.scss | 0 .../glitch/styles/components/composer.scss | 315 ++++++++++ .../flavours/glitch/styles/components/drawer.scss | 234 +++++++ .../flavours/glitch/styles/components/index.scss | 695 +-------------------- 20 files changed, 694 insertions(+), 850 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/drawer/account/index.js delete mode 100644 app/javascript/flavours/glitch/features/drawer/pager/account/index.js delete mode 100644 app/javascript/flavours/glitch/features/drawer/pager/index.js delete mode 100644 app/javascript/flavours/glitch/styles/components/compose.scss create mode 100644 app/javascript/flavours/glitch/styles/components/composer.scss (limited to 'app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js') diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js index d87786008..31866d223 100644 --- a/app/javascript/flavours/glitch/actions/compose.js +++ b/app/javascript/flavours/glitch/actions/compose.js @@ -38,7 +38,6 @@ export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE'; export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE'; export const COMPOSE_VISIBILITY_CHANGE = 'COMPOSE_VISIBILITY_CHANGE'; export const COMPOSE_LISTABILITY_CHANGE = 'COMPOSE_LISTABILITY_CHANGE'; -export const COMPOSE_COMPOSING_CHANGE = 'COMPOSE_COMPOSING_CHANGE'; export const COMPOSE_EMOJI_INSERT = 'COMPOSE_EMOJI_INSERT'; @@ -382,10 +381,3 @@ export function insertEmojiCompose(position, emoji) { emoji, }; }; - -export function changeComposing(value) { - return { - type: COMPOSE_COMPOSING_CHANGE, - value, - }; -} diff --git a/app/javascript/flavours/glitch/components/avatar.js b/app/javascript/flavours/glitch/components/avatar.js index 82ab0f45a..c5e9072c4 100644 --- a/app/javascript/flavours/glitch/components/avatar.js +++ b/app/javascript/flavours/glitch/components/avatar.js @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; @@ -7,6 +8,7 @@ export default class Avatar extends React.PureComponent { static propTypes = { account: ImmutablePropTypes.map.isRequired, + className: PropTypes.string, size: PropTypes.number.isRequired, style: PropTypes.object, inline: PropTypes.bool, @@ -34,17 +36,19 @@ export default class Avatar extends React.PureComponent { } render () { - const { account, size, animate, inline } = this.props; + const { + account, + animate, + className, + inline, + size, + } = this.props; const { hovering } = this.state; const src = account.get('avatar'); const staticSrc = account.get('avatar_static'); - let className = 'account__avatar'; - - if (inline) { - className = className + ' account__avatar-inline'; - } + const computedClass = classNames('account__avatar', { 'account__avatar-inline': inline }, className); const style = { ...this.props.style, @@ -61,7 +65,7 @@ export default class Avatar extends React.PureComponent { return (
+ @{this.props.account.get('acct')} ); diff --git a/app/javascript/flavours/glitch/features/composer/options/index.js b/app/javascript/flavours/glitch/features/composer/options/index.js index ee633e865..ea998a421 100644 --- a/app/javascript/flavours/glitch/features/composer/options/index.js +++ b/app/javascript/flavours/glitch/features/composer/options/index.js @@ -236,7 +236,12 @@ export default class ComposerOptions extends React.PureComponent { }} > {({ scale }) => ( -
+
{diff} {sideArm && sideArm !== 'none' ? (