From 32eab0e7045889af5d567e9db1a847eb65f517d1 Mon Sep 17 00:00:00 2001 From: nickago Date: Thu, 3 Sep 2015 08:20:40 -0700 Subject: Added help text to channel notifications --- web/react/components/channel_notifications.jsx | 8 ++++++++ web/react/components/setting_item_max.jsx | 2 +- web/react/components/user_settings_notifications.jsx | 14 +------------- 3 files changed, 10 insertions(+), 14 deletions(-) (limited to 'web/react') diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index 173646597..83067240d 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications.jsx @@ -162,6 +162,13 @@ export default class ChannelNotifications extends React.Component { e.preventDefault(); }.bind(this); + let curChannel = ChannelStore.get(this.state.channelId); + let extraInfo = (These settings will override the global notification settings); + + if (curChannel && curChannel.display_name) { + extraInfo = (These settings will override the global notification settings for the {curChannel.display_name} channel); + } + return ( ); } diff --git a/web/react/components/setting_item_max.jsx b/web/react/components/setting_item_max.jsx index e67e458af..996b63873 100644 --- a/web/react/components/setting_item_max.jsx +++ b/web/react/components/setting_item_max.jsx @@ -15,7 +15,7 @@ export default class SettingItemMax extends React.Component { var extraInfo = null; if (this.props.extraInfo) { - extraInfo = this.props.extraInfo; + extraInfo = (
{this.props.extraInfo}
); } var submit = ''; diff --git a/web/react/components/user_settings_notifications.jsx b/web/react/components/user_settings_notifications.jsx index 5fe6bbb4e..33db1a332 100644 --- a/web/react/components/user_settings_notifications.jsx +++ b/web/react/components/user_settings_notifications.jsx @@ -1,7 +1,6 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var ChannelStore = require('../stores/channel_store.jsx'); var UserStore = require('../stores/user_store.jsx'); var SettingItemMin = require('./setting_item_min.jsx'); var SettingItemMax = require('./setting_item_max.jsx'); @@ -69,11 +68,9 @@ function getNotificationsStateFromStores() { } } - var curChannel = ChannelStore.getCurrent().display_name; - return {notifyLevel: desktop, enableEmail: email, soundNeeded: soundNeeded, enableSound: sound, usernameKey: usernameKey, mentionKey: mentionKey, customKeys: customKeys, customKeysChecked: customKeys.length > 0, - firstNameKey: firstNameKey, allKey: allKey, channelKey: channelKey, curChannel: curChannel}; + firstNameKey: firstNameKey, allKey: allKey, channelKey: channelKey}; } export default class NotificationsTab extends React.Component { @@ -147,12 +144,10 @@ export default class NotificationsTab extends React.Component { } componentDidMount() { UserStore.addChangeListener(this.onListenerChange); - ChannelStore.addChangeListener(this.onListenerChange); $('#user_settings').on('hidden.bs.modal', this.handleClose); } componentWillUnmount() { UserStore.removeChangeListener(this.onListenerChange); - ChannelStore.removeChangeListener(this.onListenerChange); $('#user_settings').off('hidden.bs.modal', this.handleClose); this.props.updateSection(''); } @@ -271,12 +266,6 @@ export default class NotificationsTab extends React.Component { e.preventDefault(); }.bind(this); - let extraInfo = ( -
- These settings will override the global notification settings for the {this.state.curChannel} channel -
- ); - desktopSection = ( ); } else { -- cgit v1.2.3-1-g7c22 From e4336bbc84d00b3665b5f55e0220a67af030e33d Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Thu, 3 Sep 2015 12:28:19 -0400 Subject: Fix poor typing performance on iOS devices. --- web/react/components/create_post.jsx | 8 ++------ web/react/components/textbox.jsx | 9 +++++++-- 2 files changed, 9 insertions(+), 8 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index ce4ebac9e..8af9c36b3 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -117,7 +117,6 @@ export default class CreatePost extends React.Component { Client.createPost(post, channel, function handlePostSuccess(data) { - this.resizePostHolder(); AsyncClient.getPosts(); let member = ChannelStore.getMember(channel.id); @@ -129,7 +128,7 @@ export default class CreatePost extends React.Component { type: ActionTypes.RECIEVED_POST, post: data }); - }.bind(this), + }, function handlePostError(err) { let state = {}; @@ -149,9 +148,6 @@ export default class CreatePost extends React.Component { ); } } - componentDidUpdate() { - this.resizePostHolder(); - } postMsgKeyPress(e) { if (e.which === 13 && !e.shiftKey && !e.altKey) { e.preventDefault(); @@ -166,7 +162,6 @@ export default class CreatePost extends React.Component { } } handleUserInput(messageText) { - this.resizePostHolder(); this.setState({messageText: messageText}); let draft = PostStore.getCurrentDraft(); @@ -317,6 +312,7 @@ export default class CreatePost extends React.Component { Date: Fri, 28 Aug 2015 08:50:52 -0700 Subject: Added emoji wrapper with cross platform available gliffs --- web/react/components/post_body.jsx | 12 ++++++++++++ web/react/components/rhs_comment.jsx | 11 +++++++++++ web/react/components/rhs_root_post.jsx | 14 ++++++++++++++ web/react/components/rhs_thread.jsx | 11 ----------- web/react/package.json | 3 ++- web/react/utils/constants.jsx | 1 + 6 files changed, 40 insertions(+), 12 deletions(-) (limited to 'web/react') diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index 88fb9aec8..d9b8f20ce 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -5,14 +5,26 @@ const FileAttachmentList = require('./file_attachment_list.jsx'); const UserStore = require('../stores/user_store.jsx'); const Utils = require('../utils/utils.jsx'); const Constants = require('../utils/constants.jsx'); +const twemoji = require('twemoji'); export default class PostBody extends React.Component { constructor(props) { super(props); + this.parseEmojis = this.parseEmojis.bind(this); + const linkData = Utils.extractLinks(this.props.post.message); this.state = {links: linkData.links, message: linkData.text}; } + parseEmojis() { + twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE}); + } + componentDidMount() { + this.parseEmojis(); + } + componentDidUpdate() { + this.parseEmojis(); + } componentWillReceiveProps(nextProps) { const linkData = Utils.extractLinks(nextProps.post.message); this.setState({links: linkData.links, message: linkData.text}); diff --git a/web/react/components/rhs_comment.jsx b/web/react/components/rhs_comment.jsx index e74ab7f13..997a2b082 100644 --- a/web/react/components/rhs_comment.jsx +++ b/web/react/components/rhs_comment.jsx @@ -12,12 +12,14 @@ var FileAttachmentList = require('./file_attachment_list.jsx'); var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var ActionTypes = Constants.ActionTypes; +var twemoji = require('twemoji'); export default class RhsComment extends React.Component { constructor(props) { super(props); this.retryComment = this.retryComment.bind(this); + this.parseEmojis = this.parseEmojis.bind(this); this.state = {}; } @@ -51,6 +53,12 @@ export default class RhsComment extends React.Component { PostStore.updatePendingPost(post); this.forceUpdate(); } + parseEmojis() { + twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE}); + } + componentDidMount() { + this.parseEmojis(); + } shouldComponentUpdate(nextProps) { if (!Utils.areStatesEqual(nextProps.post, this.props.post)) { return true; @@ -58,6 +66,9 @@ export default class RhsComment extends React.Component { return false; } + componentDidUpdate() { + this.parseEmojis(); + } render() { var post = this.props.post; diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx index a407e6470..7c176cedf 100644 --- a/web/react/components/rhs_root_post.jsx +++ b/web/react/components/rhs_root_post.jsx @@ -6,12 +6,23 @@ var UserProfile = require('./user_profile.jsx'); var UserStore = require('../stores/user_store.jsx'); var utils = require('../utils/utils.jsx'); var FileAttachmentList = require('./file_attachment_list.jsx'); +var twemoji = require('twemoji'); +var Constants = require('../utils/constants.jsx'); export default class RhsRootPost extends React.Component { constructor(props) { super(props); + + this.parseEmojis = this.parseEmojis.bind(this); + this.state = {}; } + parseEmojis() { + twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE}); + } + componentDidMount() { + this.parseEmojis(); + } shouldComponentUpdate(nextProps) { if (!utils.areStatesEqual(nextProps.post, this.props.post)) { return true; @@ -19,6 +30,9 @@ export default class RhsRootPost extends React.Component { return false; } + componentDidUpdate() { + this.parseEmojis(); + } render() { var post = this.props.post; var message = utils.textToJsx(post.message); diff --git a/web/react/components/rhs_thread.jsx b/web/react/components/rhs_thread.jsx index d99177bda..a28785372 100644 --- a/web/react/components/rhs_thread.jsx +++ b/web/react/components/rhs_thread.jsx @@ -18,7 +18,6 @@ export default class RhsThread extends React.Component { this.onChange = this.onChange.bind(this); this.onChangeAll = this.onChangeAll.bind(this); - this.onTimeChange = this.onTimeChange.bind(this); this.state = this.getStateFromStores(); } @@ -44,7 +43,6 @@ export default class RhsThread extends React.Component { componentDidMount() { PostStore.addSelectedPostChangeListener(this.onChange); PostStore.addChangeListener(this.onChangeAll); - UserStore.addStatusesChangeListener(this.onTimeChange); this.resize(); $(window).resize(function resize() { this.resize(); @@ -58,7 +56,6 @@ export default class RhsThread extends React.Component { componentWillUnmount() { PostStore.removeSelectedPostChangeListener(this.onChange); PostStore.removeChangeListener(this.onChangeAll); - UserStore.removeStatusesChangeListener(this.onTimeChange); } onChange() { var newState = this.getStateFromStores(); @@ -96,14 +93,6 @@ export default class RhsThread extends React.Component { this.setState(newState); } } - onTimeChange() { - for (var id in this.state.postList.posts) { - if (!this.refs[id]) { - continue; - } - this.refs[id].forceUpdate(); - } - } resize() { var height = $(window).height() - $('#error_bar').outerHeight() - 100; $('.post-right__scroll').css('height', height + 'px'); diff --git a/web/react/package.json b/web/react/package.json index c930c4db6..7593cfd1b 100644 --- a/web/react/package.json +++ b/web/react/package.json @@ -8,7 +8,8 @@ "keymirror": "^0.1.1", "object-assign": "^3.0.0", "react": "^0.13.3", - "react-zeroclipboard-mixin": "^0.1.0" + "react-zeroclipboard-mixin": "^0.1.0", + "twemoji": "^1.4.1" }, "devDependencies": { "browserify": "^11.0.1", diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 3a6ca1b89..18b7ff59c 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -103,6 +103,7 @@ module.exports = { MONTHS: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], MAX_DMS: 20, MAX_POST_LEN: 4000, + EMOJI_SIZE: 16, ONLINE_ICON_SVG: "", OFFLINE_ICON_SVG: "", MENU_ICON: " ", -- cgit v1.2.3-1-g7c22 From 4b22c1f99cb05be5ca187f2fd70ee2664c34de57 Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Thu, 3 Sep 2015 10:49:36 -0400 Subject: Upgrading ESLint and adding some more rules. Refactoring to meet these new rules --- web/react/.eslintrc | 35 +++++++++-- web/react/components/channel_info_modal.jsx | 30 +++++----- web/react/components/channel_invite_modal.jsx | 4 +- web/react/components/create_post.jsx | 9 ++- web/react/components/edit_post_modal.jsx | 14 +++-- web/react/components/email_verify.jsx | 14 +++-- web/react/components/error_bar.jsx | 3 +- web/react/components/file_attachment.jsx | 20 ++++--- web/react/components/file_attachment_list.jsx | 6 +- web/react/components/find_team.jsx | 5 +- web/react/components/member_list.jsx | 18 +++--- web/react/components/member_list_item.jsx | 23 ++++--- web/react/components/mention.jsx | 13 ++-- web/react/components/mention_list.jsx | 9 ++- web/react/components/more_channels.jsx | 26 +++++--- web/react/components/navbar_dropdown.jsx | 52 +++++++++------- web/react/components/new_channel.jsx | 21 ++++--- web/react/components/post.jsx | 15 +++-- web/react/components/post_list.jsx | 2 +- web/react/components/rhs_comment.jsx | 3 +- web/react/components/rhs_root_post.jsx | 3 +- web/react/components/rhs_thread.jsx | 3 +- web/react/components/search_bar.jsx | 14 +++-- web/react/components/setting_item_max.jsx | 17 ++++-- web/react/components/setting_picture.jsx | 13 ++-- web/react/components/setting_upload.jsx | 18 +++--- web/react/components/sidebar_header.jsx | 10 ++-- web/react/components/sidebar_right.jsx | 10 ++-- web/react/components/sidebar_right_menu.jsx | 3 +- web/react/components/signup_team_complete.jsx | 70 +++++++++++++--------- web/react/components/team_import_tab.jsx | 29 +++++++-- web/react/components/team_signup_choose_auth.jsx | 4 +- .../components/team_signup_display_name_page.jsx | 17 ++++-- web/react/components/view_image.jsx | 8 ++- web/react/package.json | 4 +- web/react/pages/channel.jsx | 9 ++- web/react/pages/login.jsx | 3 +- web/react/pages/signup_team_complete.jsx | 3 +- web/react/pages/signup_user_complete.jsx | 3 +- web/react/pages/verify.jsx | 3 +- 40 files changed, 359 insertions(+), 207 deletions(-) (limited to 'web/react') diff --git a/web/react/.eslintrc b/web/react/.eslintrc index ab000e941..41558aacd 100644 --- a/web/react/.eslintrc +++ b/web/react/.eslintrc @@ -4,7 +4,9 @@ "jsx": true, "blockBindings": true, "modules": true, - "classes": true + "classes": true, + "arrowFunctions": true, + "defaultParams": true, }, "plugins": [ "react" @@ -34,16 +36,16 @@ "no-inner-declarations": 0, "no-invalid-regexp": 2, "no-irregular-whitespace": 2, + "no-unexpected-multiline": 2, "no-unreachable": 2, "valid-typeof": 2, - "no-unexpected-multiline": 2, "block-scoped-var": 1, "complexity": [0, 8], "consistent-return": 2, "curly": [2, "all"], - "dot-notation": 2, "dot-location": [2, "object"], + "dot-notation": 2, "eqeqeq": [2, "smart"], "guard-for-in": 1, "no-alert": 1, @@ -78,8 +80,9 @@ "no-self-compare": 2, "no-sequences": 2, "no-throw-literal": 2, - "no-unused-expressions": 2, "no-undef-init": 2, + "no-unused-expressions": 2, + "no-useless-concat": 0, "no-void": 2, "no-warning-comments": 0, "no-with": 2, @@ -135,12 +138,31 @@ "space-unary-ops": [2, { "words": true, "nonwords": false }], "wrap-regex": 2, + // ES6 stuff + "arrow-parens": [2, "always"], + "arrow-spacing": [2, { "before": true, "after": true }], + "constructor-super": 2, + "generator-star-spacing": [2, {"before": false, "after": true}], + "no-class-assign": 2, + "no-const-assign": 2, + "no-dupe-class-members": 2, + "no-this-before-super": 2, + "no-var": 0, + "object-shorthand": [0, "always"], + "prefer-arrow-callback": 0, + "prefer-const": 0, + "prefer-spread": 2, + "prefer-reflect": 0, + "prefer-template": 0, + "require-yield": 0, + // React Specific "react/display-name": [2, { "acceptTranspilerName": true }], "react/jsx-boolean-value": [2, "always"], + "react/jsx-closing-bracket-location": [2, { "location": "tag-aligned" }], "react/jsx-curly-spacing": [2, "never"], + "react/jsx-indent-props": [2, 4], "react/jsx-max-props-per-line": [2, { "maximum": 1 }], - // SOON "react/jsx-indent-props": [2, 4], "react/jsx-no-duplicate-props": [2, { "ignoreCase": false }], "react/jsx-no-literals": 0, "react/jsx-no-undef": 2, @@ -151,10 +173,11 @@ "react/no-did-mount-set-state": 2, "react/no-did-update-set-state": 2, "react/no-multi-comp": 2, + "react/no-set-state": 0, "react/no-unknown-property": 2, "react/prop-types": 2, - "react/sort-comp": 0, "react/self-closing-comp": 2, + "react/sort-comp": 0, "react/wrap-multilines": 2 } } diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx index fae86b4b9..fdd9a5c17 100644 --- a/web/react/components/channel_info_modal.jsx +++ b/web/react/components/channel_info_modal.jsx @@ -34,27 +34,27 @@ export default class CommandList extends React.Component { return (