diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/channel_header.jsx | 38 | ||||
-rw-r--r-- | web/react/components/create_post.jsx | 4 | ||||
-rw-r--r-- | web/react/components/file_preview.jsx | 21 | ||||
-rw-r--r-- | web/react/components/navbar.jsx | 17 | ||||
-rw-r--r-- | web/react/components/post.jsx | 61 | ||||
-rw-r--r-- | web/react/components/post_body.jsx | 44 | ||||
-rw-r--r-- | web/react/components/post_header.jsx | 8 | ||||
-rw-r--r-- | web/react/components/post_info.jsx | 28 | ||||
-rw-r--r-- | web/react/components/rhs_comment.jsx | 63 | ||||
-rw-r--r-- | web/react/components/rhs_root_post.jsx | 74 | ||||
-rw-r--r-- | web/react/components/search_results.jsx | 19 | ||||
-rw-r--r-- | web/react/components/search_results_item.jsx | 41 | ||||
-rw-r--r-- | web/react/components/sidebar_right.jsx | 27 | ||||
-rw-r--r-- | web/react/components/time_since.jsx | 2 | ||||
-rw-r--r-- | web/react/components/user_settings/custom_theme_chooser.jsx | 5 |
15 files changed, 246 insertions, 206 deletions
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index ffe7cbb5d..e46b2ccd7 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -27,6 +27,7 @@ const ActionTypes = Constants.ActionTypes; const Popover = ReactBootstrap.Popover; const OverlayTrigger = ReactBootstrap.OverlayTrigger; +const Tooltip = ReactBootstrap.Tooltip; export default class ChannelHeader extends React.Component { constructor(props) { @@ -121,6 +122,7 @@ export default class ChannelHeader extends React.Component { } const channel = this.state.channel; + const recentMentionsTooltip = <Tooltip id='recentMentionsTooltip'>{'Recent Mentions'}</Tooltip>; const popoverContent = ( <Popover id='hader-popover' @@ -382,31 +384,19 @@ export default class ChannelHeader extends React.Component { <th className='search-bar__container'><NavbarSearchBox /></th> <th> <div className='dropdown channel-header__links'> - <a - href='#' - className='dropdown-toggle theme' - type='button' - id='channel_header_right_dropdown' - data-toggle='dropdown' - aria-expanded='true' - > - <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} /> - </a> - <ul - className='dropdown-menu dropdown-menu-right' - role='menu' - aria-labelledby='channel_header_right_dropdown' + <OverlayTrigger + delayShow={400} + placement='bottom' + overlay={recentMentionsTooltip} > - <li role='presentation'> - <a - role='menuitem' - href='#' - onClick={this.searchMentions} - > - {'Recent Mentions'} - </a> - </li> - </ul> + <a + href='#' + type='button' + onClick={this.searchMentions} + > + {'@'} + </a> + </OverlayTrigger> </div> </th> </tr> diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 6f25ef608..d823a54f1 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -383,8 +383,8 @@ export default class CreatePost extends React.Component { screens.push( <div> <h4>{'Sending Messages'}</h4> - <p>{'Type here to write a message.'}</p> - <p>{'Click the attachment button to upload an image or a file.'}</p> + <p>{'Type here to write a message and press '}<strong>{'Enter'}</strong>{' to post it.'}</p> + <p>{'Click the '}<strong>{'Attachment'}</strong>{' button to upload an image or a file.'}</p> </div> ); diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx index df5deb8bc..b8c86ed67 100644 --- a/web/react/components/file_preview.jsx +++ b/web/react/components/file_preview.jsx @@ -8,9 +8,14 @@ export default class FilePreview extends React.Component { super(props); this.handleRemove = this.handleRemove.bind(this); + } - this.state = {}; + componentDidUpdate() { + if (this.props.uploadsInProgress.length > 0) { + ReactDOM.findDOMNode(this.refs[this.props.uploadsInProgress[0]]).scrollIntoView(); + } } + handleRemove(e) { var previewDiv = e.target.parentNode.parentNode; @@ -20,9 +25,10 @@ export default class FilePreview extends React.Component { this.props.onRemove(previewDiv.getAttribute('data-client-id')); } } + render() { var previews = []; - this.props.files.forEach(function setupPreview(fullFilename) { + this.props.files.forEach((fullFilename) => { var filename = fullFilename; var originalFilename = filename; var filenameSplit = filename.split('.'); @@ -72,11 +78,12 @@ export default class FilePreview extends React.Component { </div> ); } - }.bind(this)); + }); - this.props.uploadsInProgress.forEach(function addUploadsInProgress(clientId) { + this.props.uploadsInProgress.forEach((clientId) => { previews.push( <div + ref={clientId} key={clientId} className='preview-div' data-client-id={clientId} @@ -93,7 +100,7 @@ export default class FilePreview extends React.Component { </a> </div> ); - }.bind(this)); + }); return ( <div className='preview-container'> @@ -104,8 +111,8 @@ export default class FilePreview extends React.Component { } FilePreview.defaultProps = { - files: null, - uploadsInProgress: null + files: [], + uploadsInProgress: [] }; FilePreview.propTypes = { onRemove: React.PropTypes.func.isRequired, diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 1fcfabccd..845c33f3b 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -32,6 +32,7 @@ export default class Navbar extends React.Component { this.onChange = this.onChange.bind(this); this.handleLeave = this.handleLeave.bind(this); + this.showSearch = this.showSearch.bind(this); this.createCollapseButtons = this.createCollapseButtons.bind(this); this.createDropdown = this.createDropdown.bind(this); @@ -100,6 +101,11 @@ export default class Navbar extends React.Component { $('.inner__wrap').toggleClass('move--left-small'); $('.sidebar--menu').toggleClass('move--left'); } + showSearch() { + AppDispatcher.handleServerAction({ + type: ActionTypes.SHOW_SEARCH + }); + } onChange() { this.setState(this.getStateFromStores()); $('#navbar .navbar-brand .description').popover({placement: 'bottom', trigger: 'click', html: true}); @@ -411,6 +417,16 @@ export default class Navbar extends React.Component { var collapseButtons = this.createCollapseButtons(currentId); + const searchButton = ( + <button + type='button' + className='navbar-toggle pull-right' + onClick={this.showSearch} + > + <span className='glyphicon glyphicon-search icon--white' /> + </button> + ); + var channelMenuDropdown = this.createDropdown(channel, channelTitle, isAdmin, isDirect, popoverContent); return ( @@ -422,6 +438,7 @@ export default class Navbar extends React.Component { <div className='container-fluid theme'> <div className='navbar-header'> {collapseButtons} + {searchButton} {channelMenuDropdown} </div> </div> diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx index 2b9586345..7e4af07c4 100644 --- a/web/react/components/post.jsx +++ b/web/react/components/post.jsx @@ -13,8 +13,6 @@ var AsyncClient = require('../utils/async_client.jsx'); var ActionTypes = Constants.ActionTypes; var utils = require('../utils/utils.jsx'); -var PostInfo = require('./post_info.jsx'); - export default class Post extends React.Component { constructor(props) { super(props); @@ -141,6 +139,8 @@ export default class Post extends React.Component { var postType = ''; if (type !== 'Post') { postType = 'post--comment'; + } else if (commentCount > 0) { + postType = 'post--root'; } var currentUserCss = ''; @@ -170,14 +170,11 @@ export default class Post extends React.Component { } profilePic = ( - <div className='post-profile-img__container'> - <img - className='post-profile-img' - src={src} - height='36' - width='36' - /> - </div> + <img + src={src} + height='36' + width='36' + /> ); } @@ -187,32 +184,26 @@ export default class Post extends React.Component { id={'post_' + post.id} className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss} > - {profilePic} <div className='post__content'> - <PostHeader - ref='header' - post={post} - sameRoot={this.props.sameRoot} - commentCount={commentCount} - handleCommentClick={this.handleCommentClick} - isLastComment={this.props.isLastComment} - /> - <PostBody - post={post} - sameRoot={this.props.sameRoot} - parentPost={parentPost} - posts={posts} - handleCommentClick={this.handleCommentClick} - retryPost={this.retryPost} - /> - <PostInfo - ref='info' - post={post} - sameRoot={this.props.sameRoot} - commentCount={commentCount} - handleCommentClick={this.handleCommentClick} - allowReply='true' - /> + <div className='post__img'>{profilePic}</div> + <div> + <PostHeader + ref='header' + post={post} + sameRoot={this.props.sameRoot} + commentCount={commentCount} + handleCommentClick={this.handleCommentClick} + isLastComment={this.props.isLastComment} + /> + <PostBody + post={post} + sameRoot={this.props.sameRoot} + parentPost={parentPost} + posts={posts} + handleCommentClick={this.handleCommentClick} + retryPost={this.retryPost} + /> + </div> </div> </div> </div> diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index 975ac64dc..e1c057775 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -257,7 +257,7 @@ export default class PostBody extends React.Component { } return ( - <div className='post-comment'> + <div> <h4> <span className='video-type'>{header}</span> <span className='video-title'><a href={link}>{this.state.youtubeTitle}</a></span> @@ -329,7 +329,7 @@ export default class PostBody extends React.Component { } comment = ( - <p className='post-link'> + <div className='post__link'> <span> {'Commented on '}{name}{apostrophe}{' message: '} <a @@ -339,15 +339,13 @@ export default class PostBody extends React.Component { {message} </a> </span> - </p> + </div> ); - - postClass += ' post-comment'; } let loading; if (post.state === Constants.POST_FAILED) { - postClass += ' post-fail'; + postClass += ' post--fail'; loading = ( <a className='theme post-retry pull-right' @@ -379,25 +377,27 @@ export default class PostBody extends React.Component { } return ( - <div className='post-body'> + <div> {comment} - <div - key={`${post.id}_message`} - id={`${post.id}_message`} - className={postClass} - > - {loading} - <span - ref='message_span' - onClick={TextFormatting.handleClick} - dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.message)}} + <div className='post__body'> + <div + key={`${post.id}_message`} + id={`${post.id}_message`} + className={postClass} + > + {loading} + <span + ref='message_span' + onClick={TextFormatting.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.message)}} + /> + </div> + <PostBodyAdditionalContent + post={this.state.post} /> + {fileAttachmentHolder} + {this.embed} </div> - <PostBodyAdditionalContent - post={this.state.post} - /> - {fileAttachmentHolder} - {this.embed} </div> ); } diff --git a/web/react/components/post_header.jsx b/web/react/components/post_header.jsx index 45e60c767..e8b162fc2 100644 --- a/web/react/components/post_header.jsx +++ b/web/react/components/post_header.jsx @@ -26,14 +26,14 @@ export default class PostHeader extends React.Component { ); } - botIndicator = <li className='post-header-col post-header__name bot-indicator'>{'BOT'}</li>; + botIndicator = <li className='col col__name bot-indicator'>{'BOT'}</li>; } return ( - <ul className='post-header post-header-post'> - <li className='post-header-col post-header__name'><strong>{userProfile}</strong></li> + <ul className='post__header'> + <li className='col col__name'>{userProfile}</li> {botIndicator} - <li className='post-info--hidden'> + <li className='col'> <PostInfo post={post} commentCount={this.props.commentCount} diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index fffa5b19a..322834f07 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -81,7 +81,7 @@ export default class PostInfo extends React.Component { role='presentation' > <a - className='reply-link theme' + className='reply-link visible-xs theme' href='#' onClick={this.props.handleCommentClick} > @@ -99,7 +99,7 @@ export default class PostInfo extends React.Component { <div> <a href='#' - className='dropdown-toggle theme' + className='dropdown-toggle post__dropdown theme' type='button' data-toggle='dropdown' aria-expanded='false' @@ -116,23 +116,27 @@ export default class PostInfo extends React.Component { render() { var post = this.props.post; var comments = ''; - var lastCommentClass = ' comment-icon__container__hide'; - if (this.props.isLastComment) { - lastCommentClass = ' comment-icon__container__show'; + var showCommentClass = ''; + var commentCountText = this.props.commentCount; + + if (this.props.commentCount >= 1) { + showCommentClass = ' icon--show'; + } else { + commentCountText = ''; } - if (this.props.commentCount >= 1 && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING && post.state !== Constants.POST_DELETED) { + if (post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING && post.state !== Constants.POST_DELETED) { comments = ( <a href='#' - className={'comment-icon__container theme' + lastCommentClass} + className={'comment-icon__container' + showCommentClass} onClick={this.props.handleCommentClick} > <span className='comment-icon' dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON}} /> - {this.props.commentCount} + {commentCountText} </a> ); } @@ -140,17 +144,17 @@ export default class PostInfo extends React.Component { var dropdown = this.createDropdown(); return ( - <ul className='post-header post-info'> - <li className='post-header-col'> + <ul className='post__header post__header--info'> + <li className='col'> <TimeSince eventTime={post.create_at} /> </li> - <li className='post-header-col post-header__reply'> + <li className='col col__reply'> + {comments} <div className='dropdown'> {dropdown} </div> - {comments} </li> </ul> ); diff --git a/web/react/components/rhs_comment.jsx b/web/react/components/rhs_comment.jsx index c16f9ff0e..a55bf0039 100644 --- a/web/react/components/rhs_comment.jsx +++ b/web/react/components/rhs_comment.jsx @@ -131,7 +131,7 @@ export default class RhsComment extends React.Component { <div className='dropdown'> <a href='#' - className='dropdown-toggle theme' + className='post__dropdown dropdown-toggle' type='button' data-toggle='dropdown' aria-expanded='false' @@ -193,38 +193,39 @@ export default class RhsComment extends React.Component { return ( <div className={'post ' + currentUserCss}> - <div className='post-profile-img__container'> - <img - className='post-profile-img' - src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()} - height='36' - width='36' - /> - </div> <div className='post__content'> - <ul className='post-header'> - <li className='post-header-col'> - <strong><UserProfile userId={post.user_id} /></strong> - </li> - <li className='post-header-col'> - <time className='post-profile-time'> - {Utils.displayCommentDateTime(post.create_at)} - </time> - </li> - <li className='post-header-col post-header__reply'> - {dropdown} - </li> - </ul> - <div className='post-body'> - <div className={postClass}> - {loading} - <div - ref='message_holder' - onClick={TextFormatting.handleClick} - dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} - /> + <div className='post__img'> + <img + src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()} + height='36' + width='36' + /> + </div> + <div> + <ul className='post__header'> + <li className='col__name'> + <strong><UserProfile userId={post.user_id} /></strong> + </li> + <li className='col'> + <time className='post__time'> + {Utils.displayCommentDateTime(post.create_at)} + </time> + </li> + <li className='col col__reply'> + {dropdown} + </li> + </ul> + <div className='post__body'> + <div className={postClass}> + {loading} + <div + ref='message_holder' + onClick={TextFormatting.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} + /> + </div> + {fileAttachment} </div> - {fileAttachment} </div> </div> </div> diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx index 84fdc014a..358bf8440 100644 --- a/web/react/components/rhs_root_post.jsx +++ b/web/react/components/rhs_root_post.jsx @@ -66,7 +66,7 @@ export default class RhsRootPost extends React.Component { ownerOptions = ( <div> <a href='#' - className='dropdown-toggle theme' + className='post__dropdown dropdown-toggle' type='button' data-toggle='dropdown' aria-expanded='false' @@ -129,7 +129,7 @@ export default class RhsRootPost extends React.Component { ); } - botIndicator = <li className='post-header-col post-header__name bot-indicator'>{'BOT'}</li>; + botIndicator = <li className='col col__name bot-indicator'>{'BOT'}</li>; } let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex(); @@ -140,47 +140,47 @@ export default class RhsRootPost extends React.Component { } const profilePic = ( - <div className='post-profile-img__container'> - <img - className='post-profile-img' - src={src} - height='36' - width='36' - /> - </div> + <img + className='post-profile-img' + src={src} + height='36' + width='36' + /> ); return ( <div className={'post post--root ' + currentUserCss}> <div className='post-right-channel__name'>{channelName}</div> - <div className='post-profile-img__container'> - {profilePic} - </div> <div className='post__content'> - <ul className='post-header'> - <li className='post-header-col'><strong>{userProfile}</strong></li> - {botIndicator} - <li className='post-header-col'> - <time className='post-profile-time'> - {utils.displayCommentDateTime(post.create_at)} - </time> - </li> - <li className='post-header-col post-header__reply'> - <div className='dropdown'> - {ownerOptions} - </div> - </li> - </ul> - <div className='post-body'> - <div - ref='message_holder' - onClick={TextFormatting.handleClick} - dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} - /> - <PostBodyAdditionalContent - post={post} - /> - {fileAttachment} + <div className='post__img'> + {profilePic} + </div> + <div> + <ul className='post__header'> + <li className='col__name'>{userProfile}</li> + {botIndicator} + <li className='col'> + <time className='post__time'> + {utils.displayCommentDateTime(post.create_at)} + </time> + </li> + <li className='col col__reply'> + <div className='dropdown'> + {ownerOptions} + </div> + </li> + </ul> + <div className='post__body'> + <div + ref='message_holder' + onClick={TextFormatting.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} + /> + <PostBodyAdditionalContent + post={post} + /> + {fileAttachment} + </div> </div> </div> <hr /> diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx index f4d8647db..491995087 100644 --- a/web/react/components/search_results.jsx +++ b/web/react/components/search_results.jsx @@ -80,14 +80,27 @@ export default class SearchResults extends React.Component { var ctls = null; - if (noResults) { + if (!searchTerm && noResults) { + ctls = ( + <div className='sidebar--right__subheader'> + <ul> + <li> + {'Use '}<b>{'"quotation marks"'}</b>{' to search for phrases'} + </li> + <li> + {'Use '}<b>{'from:'}</b>{' to find posts from specific users and '}<b>{'in:'}</b>{' to find posts in specific channels'} + </li> + </ul> + </div> + ); + } else if (noResults) { ctls = ( <div className='sidebar--right__subheader'> <h4>{'NO RESULTS'}</h4> <ul> - <li>If you're searching a partial phrase (ex. searching "rea", looking for "reach" or "reaction"), append a * to your search term</li> - <li>Due to the volume of results, two letter searches and common words like "this", "a" and "is" won't appear in search results</li> + <li>{'If you\'re searching a partial phrase (ex. searching "rea", looking for "reach" or "reaction"), append a * to your search term'}</li> + <li>{'Due to the volume of results, two letter searches and common words like "this", "a" and "is" won\'t appear in search results'}</li> </ul> </div> ); diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx index a8bd4db2c..52766a8a0 100644 --- a/web/react/components/search_results_item.jsx +++ b/web/react/components/search_results_item.jsx @@ -74,29 +74,30 @@ export default class SearchResultsItem extends React.Component { onClick={this.handleClick} > <div className='search-channel__name'>{channelName}</div> - <div className='post-profile-img__container'> - <img - className='post-profile-img' - src={'/api/v1/users/' + this.props.post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex()} - height='36' - width='36' - /> - </div> <div className='post__content'> - <ul className='post-header'> - <li className='post-header-col'><strong><UserProfile userId={this.props.post.user_id} /></strong></li> - <li className='post-header-col'> - <time className='search-item-time'> - {utils.displayDate(this.props.post.create_at) + ' ' + utils.displayTime(this.props.post.create_at)} - </time> - </li> - </ul> - <div className='search-item-snippet'> - <span - onClick={this.handleClick} - dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, formattingOptions)}} + <div className='post__img'> + <img + src={'/api/v1/users/' + this.props.post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex()} + height='36' + width='36' /> </div> + <div> + <ul className='post__header'> + <li className='col__name'><strong><UserProfile userId={this.props.post.user_id} /></strong></li> + <li className='col'> + <time className='search-item-time'> + {utils.displayDate(this.props.post.create_at) + ' ' + utils.displayTime(this.props.post.create_at)} + </time> + </li> + </ul> + <div className='search-item-snippet'> + <span + onClick={this.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, formattingOptions)}} + /> + </div> + </div> </div> </div> ); diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index ab558ad0f..8d16057fc 100644 --- a/web/react/components/sidebar_right.jsx +++ b/web/react/components/sidebar_right.jsx @@ -7,10 +7,6 @@ var SearchStore = require('../stores/search_store.jsx'); var PostStore = require('../stores/post_store.jsx'); var Utils = require('../utils/utils.jsx'); -function getStateFromStores() { - return {search_visible: SearchStore.getSearchResults() != null, post_right_visible: PostStore.getSelectedPost() != null, is_mention_search: SearchStore.getIsMentionSearch()}; -} - export default class SidebarRight extends React.Component { constructor(props) { super(props); @@ -19,19 +15,29 @@ export default class SidebarRight extends React.Component { this.onSelectedChange = this.onSelectedChange.bind(this); this.onSearchChange = this.onSearchChange.bind(this); + this.onShowSearch = this.onShowSearch.bind(this); this.doStrangeThings = this.doStrangeThings.bind(this); - this.state = getStateFromStores(); + this.state = this.getStateFromStores(); + } + getStateFromStores() { + return { + search_visible: SearchStore.getSearchResults() != null, + post_right_visible: PostStore.getSelectedPost() != null, + is_mention_search: SearchStore.getIsMentionSearch() + }; } componentDidMount() { SearchStore.addSearchChangeListener(this.onSearchChange); PostStore.addSelectedPostChangeListener(this.onSelectedChange); + SearchStore.addShowSearchListener(this.onShowSearch); this.doStrangeThings(); } componentWillUnmount() { SearchStore.removeSearchChangeListener(this.onSearchChange); PostStore.removeSelectedPostChangeListener(this.onSelectedChange); + SearchStore.removeShowSearchListener(this.onShowSearch); } componentWillUpdate() { PostStore.jumpPostsViewSidebarOpen(); @@ -64,18 +70,25 @@ export default class SidebarRight extends React.Component { this.doStrangeThings(); } onSelectedChange(fromSearch) { - var newState = getStateFromStores(fromSearch); + var newState = this.getStateFromStores(fromSearch); newState.from_search = fromSearch; if (!Utils.areObjectsEqual(newState, this.state)) { this.setState(newState); } } onSearchChange() { - var newState = getStateFromStores(); + var newState = this.getStateFromStores(); if (!Utils.areObjectsEqual(newState, this.state)) { this.setState(newState); } } + onShowSearch() { + if (!this.state.search_visible) { + this.setState({ + search_visible: true + }); + } + } render() { var content = ''; diff --git a/web/react/components/time_since.jsx b/web/react/components/time_since.jsx index c37739b9c..212beb080 100644 --- a/web/react/components/time_since.jsx +++ b/web/react/components/time_since.jsx @@ -34,7 +34,7 @@ export default class TimeSince extends React.Component { placement='top' overlay={tooltip} > - <time className='post-profile-time'> + <time className='post__time'> {Utils.displayDateTime(this.props.eventTime)} </time> </OverlayTrigger> diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx index 3dbed72c3..3d0a2b548 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -14,7 +14,10 @@ export default class CustomThemeChooser extends React.Component { this.state = {}; } componentDidMount() { - $('.color-picker').colorpicker().on('changeColor', this.onPickerChange); + $('.color-picker').colorpicker({ + format: 'hex' + }); + $('.color-picker').on('changeColor', this.onPickerChange); } onPickerChange(e) { const theme = this.props.theme; |