From c3d095b465ed87c086409992ef78b62a06c09909 Mon Sep 17 00:00:00 2001 From: bonespiked Date: Sat, 1 Apr 2017 17:00:30 -0400 Subject: Add reaction picker (#5904) --- webapp/actions/post_actions.jsx | 1 + webapp/components/create_comment.jsx | 2 +- webapp/components/create_post.jsx | 2 +- webapp/components/emoji_picker/emoji_picker.jsx | 18 +- .../components/post_view/components/post_info.jsx | 63 +++- webapp/components/rhs_comment.jsx | 92 ++++- webapp/components/rhs_root_post.jsx | 73 +++- webapp/components/rhs_thread.jsx | 5 +- webapp/sass/components/_emoticons.scss | 56 +++ webapp/sass/layout/_post-right.scss | 9 +- webapp/sass/layout/_post.scss | 408 ++++++++++++--------- webapp/sass/responsive/_mobile.scss | 4 + webapp/utils/utils.jsx | 5 + 13 files changed, 541 insertions(+), 197 deletions(-) (limited to 'webapp') diff --git a/webapp/actions/post_actions.jsx b/webapp/actions/post_actions.jsx index 494cbc454..63c4eb017 100644 --- a/webapp/actions/post_actions.jsx +++ b/webapp/actions/post_actions.jsx @@ -300,6 +300,7 @@ export function addReaction(channelId, postId, emojiName) { user_id: UserStore.getCurrentId(), emoji_name: emojiName }; + emitEmojiPosted(emojiName); AsyncClient.saveReaction(channelId, reaction); } diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index 899609ed0..8aa26882b 100644 --- a/webapp/components/create_comment.jsx +++ b/webapp/components/create_comment.jsx @@ -580,7 +580,7 @@ export default class CreateComment extends React.Component { emojiPicker = ( diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 93a299b89..b33e5ea01 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -618,7 +618,7 @@ export default class CreatePost extends React.Component { emojiPicker = ( diff --git a/webapp/components/emoji_picker/emoji_picker.jsx b/webapp/components/emoji_picker/emoji_picker.jsx index e12974054..0f45b7297 100644 --- a/webapp/components/emoji_picker/emoji_picker.jsx +++ b/webapp/components/emoji_picker/emoji_picker.jsx @@ -34,7 +34,7 @@ class EmojiPicker extends React.Component { static propTypes = { customEmojis: React.PropTypes.object, onEmojiClick: React.PropTypes.func.isRequired, - topOrBottom: React.PropTypes.string.isRequired, + pickerLocation: React.PropTypes.string.isRequired, emojiOffset: React.PropTypes.number, outsideClick: React.PropTypes.func } @@ -68,7 +68,9 @@ class EmojiPicker extends React.Component { onOutsideEvent = (event) => { // Handle the event. - this.props.outsideClick(event); + if (this.props.outsideClick) { + this.props.outsideClick(event); + } } handleCategoryClick(category) { @@ -287,7 +289,17 @@ class EmojiPicker extends React.Component { items.push(this.renderCategory(category, this.state.filter)); } } - const cssclass = this.props.topOrBottom === 'top' ? 'emoji-picker' : 'emoji-picker-bottom'; + let cssclass = 'emoji-picker '; + if (this.props.pickerLocation === 'top') { + cssclass += 'emoji-picker-top'; + } else if (this.props.pickerLocation === 'bottom') { + cssclass += 'emoji-picker-bottom'; + } else if (this.props.pickerLocation === 'react') { + cssclass = 'emoji-picker-react'; + } else if (this.props.pickerLocation === 'react-rhs-comment') { + cssclass = 'emoji-picker-react-rhs-comment'; + } + const pickerStyle = this.props.emojiOffset ? {top: this.props.emojiOffset} : {}; return (
- {commentCountText} + + {commentCountText} + ); } + let react; + if (post.state !== Constants.POST_FAILED && + post.state !== Constants.POST_LOADING && + !Utils.isPostEphemeral(post) && + Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { + react = ( + + this.setState({showEmojiPicker: false})} + target={() => ReactDOM.findDOMNode(this.refs['reactIcon_' + post.id])} + + > + + + + + + + ); + } + let options; if (Utils.isPostEphemeral(post)) { options = ( @@ -358,6 +415,7 @@ export default class PostInfo extends React.Component { > {dropdown}
+ {react} {comments} ); @@ -445,6 +503,7 @@ export default class PostInfo extends React.Component { postId={post.id} /> {pinnedBadge} + {this.state.showEmojiPicker} {flagTrigger} {options} diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index 278163bf7..fe0f139fa 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -10,7 +10,7 @@ import ReactionListContainer from 'components/post_view/components/reaction_list import RhsDropdown from 'components/rhs_dropdown.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; -import {flagPost, unflagPost, pinPost, unpinPost} from 'actions/post_actions.jsx'; +import {flagPost, unflagPost, pinPost, unpinPost, addReaction} from 'actions/post_actions.jsx'; import TeamStore from 'stores/team_store.jsx'; @@ -19,10 +19,13 @@ import * as PostUtils from 'utils/post_utils.jsx'; import Constants from 'utils/constants.jsx'; import DelayedAction from 'utils/delayed_action.jsx'; -import {Tooltip, OverlayTrigger} from 'react-bootstrap'; +import {Tooltip, OverlayTrigger, Overlay} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; +import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx'; +import ReactDOM from 'react-dom'; + import loadingGif from 'images/load.gif'; import React from 'react'; @@ -38,6 +41,8 @@ export default class RhsComment extends React.Component { this.unflagPost = this.unflagPost.bind(this); this.pinPost = this.pinPost.bind(this); this.unpinPost = this.unpinPost.bind(this); + this.reactEmojiClick = this.reactEmojiClick.bind(this); + this.emojiPickerClick = this.emojiPickerClick.bind(this); this.canEdit = false; this.canDelete = false; @@ -46,7 +51,9 @@ export default class RhsComment extends React.Component { this.state = { currentTeamDisplayName: TeamStore.getCurrent().name, width: '', - height: '' + height: '', + showReactEmojiPicker: false, + reactPickerOffset: 15 }; } @@ -88,7 +95,7 @@ export default class RhsComment extends React.Component { ); } - shouldComponentUpdate(nextProps) { + shouldComponentUpdate(nextProps, nextState) { if (nextProps.status !== this.props.status) { return true; } @@ -117,6 +124,10 @@ export default class RhsComment extends React.Component { return true; } + if (this.state.showReactEmojiPicker !== nextState.showReactEmojiPicker) { + return true; + } + return false; } @@ -327,11 +338,39 @@ export default class RhsComment extends React.Component { ); } + emojiPickerClick() { + // set default offset + let reactOffset = 15; + const reactSelectorHeight = 360; + const reactionIconY = ReactDOM.findDOMNode(this).getBoundingClientRect().top; + const rhsMinHeight = 700; + + const spaceAvail = rhsMinHeight - reactionIconY; + if (spaceAvail < reactSelectorHeight) { + reactOffset = (spaceAvail - reactSelectorHeight); + } + this.setState({showReactEmojiPicker: !this.state.showReactEmojiPicker, reactPickerOffset: reactOffset}); + } + + reactEmojiClick(emoji) { + this.setState({showReactEmojiPicker: false}); + const emojiName = emoji.name || emoji.aliases[0]; + addReaction(this.props.post.channel_id, this.props.post.id, emojiName); + } + render() { const post = this.props.post; const flagIcon = Constants.FLAG_ICON_SVG; const mattermostLogo = Constants.MATTERMOST_ICON_SVG; const isSystemMessage = PostUtils.isSystemMessage(post); + let canReact = false; + + if (post.state !== Constants.POST_FAILED && + post.state !== Constants.POST_LOADING && + !Utils.isPostEphemeral(post) && + Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { + canReact = true; + } var currentUserCss = ''; if (this.props.currentUser.id === post.user_id) { @@ -536,6 +575,42 @@ export default class RhsComment extends React.Component { ); } + let react; + let reactOverlay; + + if (canReact) { + react = ( + + + + + + ); + reactOverlay = ( + this.setState({showReactEmojiPicker: false})} + target={() => ReactDOM.findDOMNode(this.refs['rhs_reacticon_' + post.id])} + + > + + + ); + } + let options; if (Utils.isPostEphemeral(post)) { options = ( @@ -546,7 +621,9 @@ export default class RhsComment extends React.Component { } else if (!PostUtils.isSystemMessage(post)) { options = (
  • + {reactOverlay} {this.createDropdown()} + {react}
    • ); } @@ -570,7 +647,10 @@ export default class RhsComment extends React.Component { }; return ( -
    +
    {profilePicContainer}
    @@ -586,7 +666,7 @@ export default class RhsComment extends React.Component { {options} -
    +
    {loading} diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index f07826d63..b298853d8 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -14,14 +14,17 @@ import UserStore from 'stores/user_store.jsx'; import TeamStore from 'stores/team_store.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; -import {flagPost, unflagPost, pinPost, unpinPost} from 'actions/post_actions.jsx'; +import {flagPost, unflagPost, pinPost, unpinPost, addReaction} from 'actions/post_actions.jsx'; import * as Utils from 'utils/utils.jsx'; import * as PostUtils from 'utils/post_utils.jsx'; +import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx'; +import ReactDOM from 'react-dom'; + import Constants from 'utils/constants.jsx'; import DelayedAction from 'utils/delayed_action.jsx'; -import {Tooltip, OverlayTrigger} from 'react-bootstrap'; +import {Tooltip, OverlayTrigger, Overlay} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; @@ -37,6 +40,8 @@ export default class RhsRootPost extends React.Component { this.unflagPost = this.unflagPost.bind(this); this.pinPost = this.pinPost.bind(this); this.unpinPost = this.unpinPost.bind(this); + this.reactEmojiClick = this.reactEmojiClick.bind(this); + this.emojiPickerClick = this.emojiPickerClick.bind(this); this.canEdit = false; this.canDelete = false; @@ -45,7 +50,9 @@ export default class RhsRootPost extends React.Component { this.state = { currentTeamDisplayName: TeamStore.getCurrent().name, width: '', - height: '' + height: '', + showRHSEmojiPicker: false, + testStateObj: true }; } @@ -70,7 +77,7 @@ export default class RhsRootPost extends React.Component { this.canEdit = false; } - shouldComponentUpdate(nextProps) { + shouldComponentUpdate(nextProps, nextState) { if (nextProps.status !== this.props.status) { return true; } @@ -107,6 +114,10 @@ export default class RhsRootPost extends React.Component { return true; } + if (this.state.showRHSEmojiPicker !== nextState.showRHSEmojiPicker) { + return true; + } + return false; } @@ -155,13 +166,30 @@ export default class RhsRootPost extends React.Component { unpinPost(this.props.post.channel_id, this.props.post.id); } + emojiPickerClick() { + this.setState({showRHSEmojiPicker: !this.state.showRHSEmojiPicker}); + } + + reactEmojiClick(emoji) { + const emojiName = emoji.name || emoji.aliases[0]; + addReaction(this.props.post.channel_id, this.props.post.id, emojiName); + this.setState({showRHSEmojiPicker: false}); + } + render() { const post = this.props.post; const user = this.props.user; const mattermostLogo = Constants.MATTERMOST_ICON_SVG; var timestamp = user ? user.last_picture_update : 0; var channel = ChannelStore.get(post.channel_id); + let canReact = false; const flagIcon = Constants.FLAG_ICON_SVG; + if (post.state !== Constants.POST_FAILED && + post.state !== Constants.POST_LOADING && + !Utils.isPostEphemeral(post) && + Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { + canReact = true; + } this.canDelete = PostUtils.canDeletePost(post); this.canEdit = PostUtils.canEditPost(post, this.editDisableAction); @@ -195,6 +223,41 @@ export default class RhsRootPost extends React.Component { } } + let react; + let reactOverlay; + + if (canReact) { + react = ( + + + + + + ); + reactOverlay = ( + this.setState({showRHSEmojiPicker: false})} + target={() => ReactDOM.findDOMNode(this.refs.rhs_root_reacticon)} + + > + + + ); + } + var dropdownContents = []; if (Utils.isMobile()) { @@ -547,7 +610,9 @@ export default class RhsRootPost extends React.Component {
  • + {reactOverlay} {rootOptions} + {react}
    • diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx index 79879973b..4ac36717a 100644 --- a/webapp/components/rhs_thread.jsx +++ b/webapp/components/rhs_thread.jsx @@ -424,7 +424,10 @@ export default class RhsThread extends React.Component { renderView={renderView} onScroll={this.handleScroll} > -
    +
    diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index 7cf7034d2..cf8815a24 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -1,5 +1,16 @@ @charset "UTF-8"; +.reacticon { + display: inline-block; + fill: inherit; + opacity: .7; + position: relative; + top: 2px; + vertical-align: middle; + visibility: hidden; + +} + .emoticon { background-position: 50% 50%; background-repeat: no-repeat; @@ -45,6 +56,51 @@ } } +.emoji-picker-react-rhs-comment { + position: absolute; + width: 278px; + border: 1px solid; + min-height: 298px; + border-radius: 3px; + top: 21px; + right:59px; + z-index: 100; + .emoji-picker__search-container { + position: relative; + + .emoji-picker__search-icon { + padding-left: 6px; + padding-top: 6px; + position: absolute; + font-size: 13px; + } + + + } +} + +.emoji-picker-react { + position: absolute; + width: 278px; + border: 1px solid; + min-height: 298px; + border-radius: 3px; + top: 42px; + right:59px; + z-index: 100; + .emoji-picker__search-container { + position: relative; + + .emoji-picker__search-icon { + padding-left: 6px; + padding-top: 6px; + position: absolute; + font-size: 13px; + } + + + } +} .emoji-picker-bottom { diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index d4c1daa6e..5fd7df3f2 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -64,14 +64,15 @@ .btn { margin-bottom: 10px; - + &.disabled { background: grey !important; border-color: transparent !important; } } - .custom-textarea { + .custom-textarea, + .custom-textarea-emoji { min-height: 100px; } @@ -150,8 +151,8 @@ overflow: auto; position: relative; padding-top: 10px; - min-height: 429px; - + min-height: 700px; + .file-preview__container { margin-top: 5px; } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 85f5b2a5a..751980c43 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -360,233 +360,271 @@ .post-create__container { label { - font-weight: normal; - } - .custom-textarea { - overflow: hidden; - } + font-weight: normal; + } + .custom-textarea { + overflow: hidden; +} - form { - margin: 0 auto; - padding: .5em 15px 0; - width: 100%; - } - #reply_textbox.custom-textarea-emoji{ - bottom: 0; - max-height: 162px !important; - padding-right: 60px; - padding-top: 6px; - resize: none; +form { + margin: 0 auto; + padding: .5em 15px 0; + width: 100%; +} +#reply_textbox.custom-textarea-emoji{ + bottom: 0; + max-height: 162px !important; + padding-right: 60px; + padding-top: 6px; + resize: none; - } - .center { - max-width: 1028px; - } - .post-create { - &.scroll { - .btn-file { - right: 10px; - } +} +.center { + max-width: 1028px; +} - .custom-textarea { - -ms-overflow-style: auto; - overflow: auto; - padding-right: 43px; - resize: none; - } +.post-create { + &.scroll { + .btn-file { + right: 10px; + } - #post_textbox-reference.custom-textarea-emoji { - padding-right: 43px; - resize: none; - } + .custom-textarea { + -ms-overflow-style: auto; + overflow: auto; + padding-right: 43px; + resize: none; + } + #post_textbox-reference.custom-textarea-emoji { + padding-right: 43px; + resize: none; + } - #reply_textbox.custom-textarea-emoji { - padding-right: 60px; - resize: none; - } - #post_textbox.custom-textarea-emoji { - padding-right: 60px; - resize: none; + #post_textbox.custom-textarea-emoji { + padding-right: 60px; + resize: none; - } } } +} + +.post-create-body { + padding: 0 0 2px; + position: relative; - .post-create-body { - padding: 0 0 2px; + .post-body__cell { position: relative; + vertical-align: top; + } - .post-body__cell { - position: relative; - vertical-align: top; + .send-button { + @include single-transition(all, .15s); + cursor: pointer; + display: none; + font-size: 18px; + height: 37px; + line-height: 37px; + padding-right: 4px; + text-align: center; + vertical-align: bottom; + width: 45px; + + &:active { + @include opacity(.75); } - .send-button { - @include single-transition(all, .15s); - cursor: pointer; - display: none; - font-size: 18px; - height: 37px; - line-height: 37px; - padding-right: 4px; - text-align: center; - vertical-align: bottom; - width: 45px; + &.disabled { + color: grey; + } + } - &:active { - @include opacity(.75); - } + .custom-textarea { + bottom: 0; + max-height: 162px !important; + padding-right: 35px; + padding-top: 8px; + resize: none; - &.disabled { - color: grey; - } - } + } - .custom-textarea { - bottom: 0; - max-height: 162px !important; - padding-right: 35px; - padding-top: 8px; - resize: none; + #post_textbox-reference.custom-textarea-emoji { + bottom: 0; + max-height: 162px !important; + padding-right: 35px; + padding-top: 8px; + resize: none; - } + } - #post_textbox-reference.custom-textarea-emoji { - bottom: 0; - max-height: 162px !important; - padding-right: 35px; - padding-top: 8px; - resize: none; - } + #post_textbox.custom-textarea-emoji { + bottom: 0; + max-height: 162px !important; + padding-right: 60px; + padding-top: 8px; + resize: none; + } + .textarea-div { + line-height: 1.5; + max-height: 163px !important; + overflow: auto; + padding-right: 30px; + padding-top: 8px; + } - #post_textbox.custom-textarea-emoji { - bottom: 0; - max-height: 162px !important; - padding-right: 60px; - padding-top: 8px; - resize: none; + .btn-file { + @include single-transition(all, .15s); + font-size: 16px; + padding: 8px 9px 4px; + position: absolute; + right: 0; + top: 0; + z-index: 5; - } - .textarea-div { - line-height: 1.5; - max-height: 163px !important; - overflow: auto; - padding-right: 30px; - padding-top: 8px; + svg { + height: 18px; + width: 18px; } - .btn-file { - @include single-transition(all, .15s); - font-size: 16px; - padding: 8px 9px 4px; - position: absolute; - right: 0; - top: 0; - z-index: 5; + &:hover, + &:active { + box-shadow: none; + } - svg { - height: 18px; - width: 18px; - } + &.btn-file__disabled { + @include opacity(.1); &:hover, &:active { - box-shadow: none; - } - - &.btn-file__disabled { @include opacity(.1); - - &:hover, - &:active { - @include opacity(.1); - } } + } - .icon--attachment { - @include opacity(.5); - display: inline-block; - position: relative; - vertical-align: top; + .icon--attachment { + @include opacity(.5); + display: inline-block; + position: relative; + vertical-align: top; - input { - cursor: pointer; - direction: ltr; - filter: alpha(opacity=0); - font-size: 23px; - height: 100%; - margin: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - } + input { + cursor: pointer; + direction: ltr; + filter: alpha(opacity=0); + font-size: 23px; + height: 100%; + margin: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; + } - &:hover { - @include opacity(.9); - } + &:hover { + @include opacity(.9); } } + } + + + .icon--emoji-picker { + @include opacity(.5); + @include single-transition(all, .15s); + cursor: pointer; + font-size: 19px; + margin-left: 7px; + position: relative; + vertical-align: top; + &:hover, + &:active { + @include opacity(.9); + box-shadow: none; + } - .icon--emoji-picker { + .icon--attachment { @include opacity(.5); - @include single-transition(all, .15s); - cursor: pointer; - font-size: 19px; - margin-left: 7px; + display: inline-block; position: relative; vertical-align: top; - &:hover, - &:active { - @include opacity(.9); - box-shadow: none; + input { + cursor: pointer; + direction: ltr; + filter: alpha(opacity=0); + font-size: 23px; + height: 100%; + margin: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; } - } - textarea { - box-shadow: none; + &:hover { + @include opacity(.9); + } } } - .post-create-footer { - @include clearfix; - font-size: 13px; - padding: 3px 0 0; + + .icon--emoji-picker { + @include opacity(.5); + @include single-transition(all, .15s); + cursor: pointer; + font-size: 19px; + margin-left: 7px; position: relative; + vertical-align: top; - .post-error { - @include opacity(.55); - display: inline-block; - font-size: .85em; - font-weight: normal; - margin-bottom: 0; - position: absolute; - top: 4px; + &:hover, + &:active { + @include opacity(.9); + box-shadow: none; } } - .msg-typing { - @include opacity(.7); - display: block; - font-size: .95em; - height: 20px; - margin-bottom: 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + textarea { + box-shadow: none; + } +} + +.post-create-footer { + @include clearfix; + font-size: 13px; + padding: 3px 0 0; + position: relative; + + .post-error { + @include opacity(.55); + display: inline-block; + font-size: .85em; + font-weight: normal; + margin-bottom: 0; + position: absolute; + top: 4px; } } +.msg-typing { + @include opacity(.7); + display: block; + font-size: .95em; + height: 20px; + margin-bottom: 5px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +} + .post-list__table { display: table; height: 100%; @@ -619,16 +657,14 @@ .col__reply { min-width: 0; } - - .dropdown { - margin-right: 0; - } } } &:hover { .dropdown, .comment-icon__container, + .reacticon, + .reacticon__container, .flag-icon__container, .post__reply, .post__remove { @@ -1100,8 +1136,8 @@ .dropdown { display: inline-block; - margin-right: 5px; top: -1px; + vertical-align: middle; visibility: hidden; .dropdown-menu { @@ -1122,6 +1158,8 @@ } .post__dropdown { + vertical-align: middle; + &:after { content: '[...]'; position: relative; @@ -1249,6 +1287,10 @@ .post-reaction-list { min-height: 30px; + + &:empty { + display: none; + } } .post-reaction { @@ -1381,6 +1423,8 @@ .comment-icon__container { display: inline-block; fill: $primary-color; + position: relative; + top: 1px; visibility: hidden; &:focus { @@ -1396,12 +1440,17 @@ width: 17px; } + .comment-count { + margin-left: 2px; + } + .comment-icon { display: inline-block; fill: inherit; - margin-right: 3px; + margin: 0 1px 0 5px; position: relative; - top: 2px; + top: 1px; + vertical-align: top; } path { @@ -1409,6 +1458,15 @@ } } + .reacticon__container { + display: inline-block; + fill: $primary-color; + font-size: 16px; + margin-left: 5px; + vertical-align: top; + visibility: hidden; + } + .flag-icon__container { display: inline-block; font-size: 12px; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 518db1a94..88dcc17f5 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -236,6 +236,10 @@ } } + .reacticon__container { + display: none; + } + .post__dropdown { display: inline-block; height: 28px; diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 9e69fd6d6..d2cebafa7 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -584,6 +584,9 @@ export function applyTheme(theme) { changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg); changeCss('.app__body .post-list__new-messages-below', 'color:' + theme.centerChannelBg); changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg); + changeCss('.app__body .emoji-picker-react, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg); + changeCss('.app__body .emoji-picker-react-rhs-comment, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg); + changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg); } @@ -662,6 +665,7 @@ export function applyTheme(theme) { changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.25)); changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.7)); changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor); + changeCss('.app__body .emoji-picker-react', 'color:' + theme.centerChannelColor); changeCss('.app__body .emoji-picker-bottom', 'color:' + theme.centerChannelColor); changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); @@ -687,6 +691,7 @@ export function applyTheme(theme) { if (theme.linkColor) { changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover, .app__body .channel-header #member_popover:hover', 'color:' + theme.linkColor); changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5)); + changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .reacticon__container, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor); changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply, .app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + theme.linkColor); changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1)); changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4)); -- cgit v1.2.3-1-g7c22