From f6b4a611d0ef28d5f08959a51c31ad480df1883a Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 14 Jun 2016 22:53:47 +0500 Subject: Multiple UI improvements (#3317) Removing break all Replacing jquery selectors and some other UI improvements Removing jquery selector --- webapp/components/invite_member_modal.jsx | 2 +- webapp/components/popover_list_members.jsx | 1 + .../post_view/components/post_header.jsx | 7 +- webapp/components/sidebar.jsx | 10 ++ webapp/components/sidebar_right_menu.jsx | 110 ++++++++++++++++++--- webapp/components/tutorial/tutorial_tip.jsx | 12 ++- 6 files changed, 127 insertions(+), 15 deletions(-) (limited to 'webapp/components') diff --git a/webapp/components/invite_member_modal.jsx b/webapp/components/invite_member_modal.jsx index 96a9eb75d..265a421b6 100644 --- a/webapp/components/invite_member_modal.jsx +++ b/webapp/components/invite_member_modal.jsx @@ -286,7 +286,7 @@ class InviteMemberModal extends React.Component { lastNameClass += ' has-error'; } nameFields = ( -
+
this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover})} > diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx index 6e54e57e7..cc6bab852 100644 --- a/webapp/components/post_view/components/post_header.jsx +++ b/webapp/components/post_view/components/post_header.jsx @@ -26,6 +26,7 @@ export default class PostHeader extends React.Component { /> ); let botIndicator; + let colon; if (post.props && post.props.from_webhook) { if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') { @@ -50,9 +51,13 @@ export default class PostHeader extends React.Component { ); } + if (this.props.compactDisplay) { + colon = ({':'}); + } + return (
    -
  • {userProfile}
    • +
  • {userProfile}{colon}
    • {botIndicator}
  • { + document.querySelector('.app__body .inner-wrap').classList.add('move--right'); + document.querySelector('.app__body .sidebar--left').classList.add('move--right'); + }); + } + } + createTutorialTip() { const screens = []; @@ -535,6 +544,7 @@ export default class Sidebar extends React.Component { let tutorialTip = null; if (this.state.showTutorialTip && channel.name === Constants.DEFAULT_CHANNEL) { tutorialTip = this.createTutorialTip(); + this.openLeftSidebar(); } let link = ''; diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx index b24b8e4fb..e3a7bee7c 100644 --- a/webapp/components/sidebar_right_menu.jsx +++ b/webapp/components/sidebar_right_menu.jsx @@ -1,6 +1,7 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import TeamMembersModal from './team_members_modal.jsx'; import ToggleModalButton from './toggle_modal_button.jsx'; import UserSettingsModal from './user_settings/user_settings_modal.jsx'; @@ -14,6 +15,7 @@ import * as GlobalActions from 'actions/global_actions.jsx'; import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; +const ActionTypes = Constants.ActionTypes; const Preferences = Constants.Preferences; const TutorialSteps = Constants.TutorialSteps; @@ -30,6 +32,7 @@ export default class SidebarRightMenu extends React.Component { this.onPreferenceChange = this.onPreferenceChange.bind(this); this.handleAboutModal = this.handleAboutModal.bind(this); + this.searchMentions = this.searchMentions.bind(this); this.aboutModalDismissed = this.aboutModalDismissed.bind(this); const state = this.getStateFromStores(); @@ -60,13 +63,82 @@ export default class SidebarRightMenu extends React.Component { getStateFromStores() { const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); - return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && Utils.isMobile()}; + return { + currentUser: UserStore.getCurrentUser(), + showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && Utils.isMobile() + }; } onPreferenceChange() { this.setState(this.getStateFromStores()); } + searchMentions(e) { + e.preventDefault(); + + const user = this.state.currentUser; + + let terms = ''; + if (user.notify_props && user.notify_props.mention_keys) { + const termKeys = UserStore.getMentionKeys(user.id); + + if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) { + termKeys.splice(termKeys.indexOf('@all'), 1); + } + + if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) { + termKeys.splice(termKeys.indexOf('@channel'), 1); + } + terms = termKeys.join(' '); + } + + this.hideSidebars(); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_SEARCH_TERM, + term: terms, + do_search: true, + is_mention_search: true + }); + } + + closeLeftSidebar() { + if (Utils.isMobile()) { + setTimeout(() => { + document.querySelector('.app__body .inner-wrap').classList.remove('move--right'); + document.querySelector('.app__body .sidebar--left').classList.remove('move--right'); + }); + } + } + + openRightSidebar() { + if (Utils.isMobile()) { + setTimeout(() => { + document.querySelector('.app__body .inner-wrap').classList.add('move--left-small'); + document.querySelector('.app__body .sidebar--menu').classList.add('move--left'); + }); + } + } + + hideSidebars() { + if (Utils.isMobile()) { + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_SEARCH, + results: null + }); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_POST_SELECTED, + postId: null + }); + + document.querySelector('.app__body .inner-wrap').classList.remove('move--right', 'move--left', 'move--left-small'); + document.querySelector('.app__body .sidebar--left').classList.remove('move--right'); + document.querySelector('.app__body .sidebar--right').classList.remove('move--left'); + document.querySelector('.app__body .sidebar--menu').classList.remove('move--left'); + } + } + render() { var teamLink = ''; var inviteLink = ''; @@ -87,7 +159,7 @@ export default class SidebarRightMenu extends React.Component { href='#' onClick={GlobalActions.showInviteMemberModal} > - + - + - + - + - + - + - + e.preventDefault(), true); + this.closeLeftSidebar(); + this.openRightSidebar(); } return ( @@ -228,12 +302,24 @@ export default class SidebarRightMenu extends React.Component {