diff options
author | Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com> | 2016-06-14 22:53:47 +0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2016-06-14 13:53:47 -0400 |
commit | f6b4a611d0ef28d5f08959a51c31ad480df1883a (patch) | |
tree | 5adeac68d78fe59cb6f7731cc953faec4bbc77df | |
parent | af4110b2ed9654986c8ef150d7ca9e76f326191c (diff) | |
download | chat-f6b4a611d0ef28d5f08959a51c31ad480df1883a.tar.gz chat-f6b4a611d0ef28d5f08959a51c31ad480df1883a.tar.bz2 chat-f6b4a611d0ef28d5f08959a51c31ad480df1883a.zip |
Multiple UI improvements (#3317)
Removing break all
Replacing jquery selectors and some other UI improvements
Removing jquery selector
-rw-r--r-- | webapp/components/invite_member_modal.jsx | 2 | ||||
-rw-r--r-- | webapp/components/popover_list_members.jsx | 1 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_header.jsx | 7 | ||||
-rw-r--r-- | webapp/components/sidebar.jsx | 10 | ||||
-rw-r--r-- | webapp/components/sidebar_right_menu.jsx | 110 | ||||
-rw-r--r-- | webapp/components/tutorial/tutorial_tip.jsx | 12 | ||||
-rw-r--r-- | webapp/i18n/en.json | 1 | ||||
-rw-r--r-- | webapp/sass/components/_dropdown.scss | 1 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 30 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 165 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 17 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-menu.scss | 9 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 11 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 16 |
14 files changed, 254 insertions, 138 deletions
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 = ( - <div className='row--invite'> + <div className='row row--invite'> <div className='col-sm-6'> <div className={firstNameClass}> <input diff --git a/webapp/components/popover_list_members.jsx b/webapp/components/popover_list_members.jsx index 387c37ab5..d85b1114b 100644 --- a/webapp/components/popover_list_members.jsx +++ b/webapp/components/popover_list_members.jsx @@ -142,6 +142,7 @@ export default class PopoverListMembers extends React.Component { <div> <div id='member_popover' + className='member-popover__trigger' ref='member_popover_target' onClick={(e) => 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 = (<strong>{':'}</strong>); + } + return ( <ul className='post__header'> - <li className='col col__name'>{userProfile}</li> + <li className='col col__name'>{userProfile}{colon}</li> {botIndicator} <li className='col'> <PostInfo diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index f6958e721..f0e17d986 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -370,6 +370,15 @@ export default class Sidebar extends React.Component { this.setState({showDirectChannelsModal: false}); } + openLeftSidebar() { + if (Utils.isMobile()) { + setTimeout(() => { + 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} > - <i className='fa fa-user-plus'></i> + <i className='icon fa fa-user-plus'></i> <FormattedMessage id='sidebar_right_menu.inviteNew' defaultMessage='Invite New Member' @@ -103,7 +175,7 @@ export default class SidebarRightMenu extends React.Component { href='#' onClick={GlobalActions.showGetTeamInviteLinkModal} > - <i className='glyphicon glyphicon-link'></i> + <i className='icon glyphicon glyphicon-link'></i> <FormattedMessage id='sidebar_right_menu.teamLink' defaultMessage='Get Team Invite Link' @@ -122,7 +194,7 @@ export default class SidebarRightMenu extends React.Component { data-toggle='modal' data-target='#team_settings' > - <i className='fa fa-globe'></i> + <i className='icon fa fa-globe'></i> <FormattedMessage id='sidebar_right_menu.teamSettings' defaultMessage='Team Settings' @@ -133,7 +205,7 @@ export default class SidebarRightMenu extends React.Component { manageLink = ( <li> <ToggleModalButton dialogType={TeamMembersModal}> - <i className='fa fa-users'></i> + <i className='icon fa fa-users'></i> <FormattedMessage id='sidebar_right_menu.manageMembers' defaultMessage='Manage Members' @@ -149,7 +221,7 @@ export default class SidebarRightMenu extends React.Component { <Link to={'/admin_console'} > - <i className='fa fa-wrench'></i> + <i className='icon fa fa-wrench'></i> <FormattedMessage id='sidebar_right_menu.console' defaultMessage='System Console' @@ -177,7 +249,7 @@ export default class SidebarRightMenu extends React.Component { rel='noopener noreferrer' to={global.window.mm_config.HelpLink} > - <i className='fa fa-question'></i> + <i className='icon fa fa-question'></i> <FormattedMessage id='sidebar_right_menu.help' defaultMessage='Help' @@ -196,7 +268,7 @@ export default class SidebarRightMenu extends React.Component { rel='noopener noreferrer' to={global.window.mm_config.ReportAProblemLink} > - <i className='fa fa-phone'></i> + <i className='icon fa fa-phone'></i> <FormattedMessage id='sidebar_right_menu.report' defaultMessage='Report a Problem' @@ -209,6 +281,8 @@ export default class SidebarRightMenu extends React.Component { let tutorialTip = null; if (this.state.showTutorialTip) { tutorialTip = createMenuTip((e) => e.preventDefault(), true); + this.closeLeftSidebar(); + this.openRightSidebar(); } return ( @@ -231,9 +305,21 @@ export default class SidebarRightMenu extends React.Component { <li> <a href='#' + onClick={this.searchMentions} + > + <i className='icon mentions'>{'@'}</i> + <FormattedMessage + id='sidebar_right_menu.recentMentions' + defaultMessage='Recent Mentions' + /> + </a> + </li> + <li> + <a + href='#' onClick={() => this.setState({showUserSettingsModal: true})} > - <i className='fa fa-cog'></i> + <i className='icon fa fa-cog'></i> <FormattedMessage id='sidebar_right_menu.accountSettings' defaultMessage='Account Settings' @@ -247,7 +333,7 @@ export default class SidebarRightMenu extends React.Component { {consoleLink} <li> <Link to='/select_team'> - <i className='fa fa-exchange'></i> + <i className='icon fa fa-exchange'></i> <FormattedMessage id='sidebar_right_menu.switch_team' defaultMessage='Team Selection' @@ -260,7 +346,7 @@ export default class SidebarRightMenu extends React.Component { href='#' onClick={GlobalActions.emitUserLoggedOutEvent} > - <i className='fa fa-sign-out'></i> + <i className='icon fa fa-sign-out'></i> <FormattedMessage id='sidebar_right_menu.logout' defaultMessage='Logout' @@ -275,7 +361,7 @@ export default class SidebarRightMenu extends React.Component { href='#' onClick={this.handleAboutModal} > - <i className='fa fa-info'></i> + <i className='icon fa fa-info'></i> <FormattedMessage id='navbar_dropdown.about' defaultMessage='About Mattermost' diff --git a/webapp/components/tutorial/tutorial_tip.jsx b/webapp/components/tutorial/tutorial_tip.jsx index c9b7367d2..461d28386 100644 --- a/webapp/components/tutorial/tutorial_tip.jsx +++ b/webapp/components/tutorial/tutorial_tip.jsx @@ -10,6 +10,7 @@ import Constants from 'utils/constants.jsx'; import {FormattedMessage, FormattedHTMLMessage} from 'react-intl'; const Preferences = Constants.Preferences; +import * as Utils from 'utils/utils.jsx'; import {Overlay} from 'react-bootstrap'; @@ -47,8 +48,17 @@ export default class TutorialTip extends React.Component { return; } + this.closeRightSidebar(); this.toggle(); } + closeRightSidebar() { + if (Utils.isMobile()) { + setTimeout(() => { + document.querySelector('.app__body .inner-wrap').classList.remove('move--left-small'); + document.querySelector('.app__body .sidebar--menu').classList.remove('move--left'); + }); + } + } skipTutorial(e) { e.preventDefault(); @@ -94,7 +104,7 @@ export default class TutorialTip extends React.Component { } var tutorialGifImage = tutorialGif; - if (this.props.overlayClass === 'tip-overlay--header' || this.props.overlayClass === 'tip-overlay--sidebar') { + if (this.props.overlayClass === 'tip-overlay--header' || this.props.overlayClass === 'tip-overlay--sidebar' || this.props.overlayClass === 'tip-overlay--header--up') { tutorialGifImage = tutorialGifWhite; } diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 51e702361..736193c0c 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1158,6 +1158,7 @@ "sidebar.unreadAbove": "Unread post(s) above", "sidebar.unreadBelow": "Unread post(s) below", "sidebar_header.tutorial": "<h4>Main Menu</h4><p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p><p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>", + "sidebar_right_menu.recentMentions": "Recent Mentions", "sidebar_right_menu.accountSettings": "Account Settings", "sidebar_right_menu.console": "System Console", "sidebar_right_menu.help": "Help", diff --git a/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss index 5ed0bca61..eaa5c463f 100644 --- a/webapp/sass/components/_dropdown.scss +++ b/webapp/sass/components/_dropdown.scss @@ -1,6 +1,7 @@ @charset 'UTF-8'; .dropdown-menu { + border-radius: $border-rad; &.colorpicker { z-index: 2500; diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 30b5d29cd..8b078de86 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -29,6 +29,14 @@ } } + .row--invite { + .col-sm-6 { + &:first-child { + padding-right: 0; + } + } + } + .modal__hint { @include opacity(.8); display: block; @@ -194,8 +202,8 @@ } .modal-content { - border-radius: 0; - box-shadow: none; + @include box-shadow(0 0 10px rgba($black, .5)); + border-radius: $border-rad; } .modal-chevron-icon { @@ -417,24 +425,6 @@ } } - - .invite { - margin-right: 40px; - } - - .row--invite { - @include clearfix; - margin-right: 40px; - - .col-sm-6 { - padding: 0 0 0 15px; - - &:first-child { - padding-left: 0; - } - } - } - .more-modal { .user-list { margin-top: 10px; diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index db2ba48bd..d0ccfbe23 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -2,6 +2,87 @@ .channel-header { @include flex(0 0 56px); + border-left: none; + font-size: 14px; + line-height: 56px; + width: 100%; + + .member-popover__trigger { + cursor: pointer; + padding-right: 10px; + text-align: right; + width: 60px; + + .fa { + font-size: 16px; + margin-left: 4px; + } + } + + &.alt { + margin: 0; + + th { + font-weight: normal !important; + } + + td { + border: none; + } + } + + th { + text-align: center; + + &:first-child { + border-left: none; + padding-left: 15px; + padding-right: 1em; + text-align: left !important; + width: 100%; + } + + &:last-child { + width: 8.9%; + } + } + + td { + font-size: 13px; + padding: 5px 25px 5px !important; + text-align: center !important; + + &:first-child { + text-align: left !important; + } + } + + .heading { + display: inline-block; + font-size: 1.3em; + font-weight: 600; + margin: 0 4px 0 0; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + } + + .caret { + margin-top: 3px; + } + + .more { + color: #81848b; + display: inline-block; + font-size: 13px; + text-transform: capitalize; + vertical-align: top; + } + + .disabled { + color: #999999; + } } .row { @@ -256,90 +337,6 @@ } } -.channel-header { - border-left: none; - font-size: 14px; - line-height: 56px; - width: 100%; - - #member_popover { - color: #999999; - cursor: pointer; - width: 50px; - - .fa { - font-size: 16px; - margin-left: 4px; - } - } - - &.alt { - margin: 0; - - th { - font-weight: normal !important; - } - - td { - border: none; - } - } - - th { - text-align: center; - - &:first-child { - border-left: none; - padding-left: 15px; - padding-right: 1em; - text-align: left !important; - width: 100%; - } - - &:last-child { - width: 8.9%; - } - } - - td { - font-size: 13px; - padding: 5px 25px 5px !important; - text-align: center !important; - - &:first-child { - text-align: left !important; - } - } - - .heading { - color: #555555; - display: inline-block; - font-size: 1.3em; - font-weight: 600; - margin: 0 4px 0 0; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; - } - - .caret { - margin-top: 3px; - } - - .more { - color: #81848b; - display: inline-block; - font-size: 13px; - text-transform: capitalize; - vertical-align: top; - } - - .disabled { - color: #999999; - } -} - .channel-header__navbar { font-size: 16px; diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index db64d739e..228efe26f 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -486,7 +486,6 @@ body.ios { &.post--compact { &.post--thread { .post__header { - height: 22px; padding-top: 3px; } } @@ -510,6 +509,10 @@ body.ios { margin: 0 0 7px; } + .post__header { + height: 22px; + } + .post__body { background: transparent !important; line-height: 1.6; @@ -537,10 +540,6 @@ body.ios { } } - .post-image__columns { - clear: both; - } - .post-image__column { @include border-radius(2px); font-size: .9em; @@ -765,8 +764,15 @@ body.ios { @include clearfix; max-width: 200px; text-overflow: ellipsis; + vertical-align: top; white-space: nowrap; } + + strong { + display: none; + font-weight: 900; + margin-left: 2px; + } } .col__reply { @@ -1036,6 +1042,7 @@ body.ios { display: inline-block; margin-right: 6px; visibility: hidden; + svg { fill: inherit; position: relative; diff --git a/webapp/sass/layout/_sidebar-menu.scss b/webapp/sass/layout/_sidebar-menu.scss index 0cf60f328..97ab487c0 100644 --- a/webapp/sass/layout/_sidebar-menu.scss +++ b/webapp/sass/layout/_sidebar-menu.scss @@ -68,13 +68,18 @@ line-height: 40px; padding: 0 15px; - .fa, - .glyphicon { + .icon { + display: inline-block; left: -5px; position: relative; text-align: center; width: 25px; } + + .mentions { + font-size: 17px; + font-weight: bold; + } } } } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index eec08b1e5..cb1191fe3 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -136,6 +136,13 @@ } } + &.post--comment { + .post__body { + margin-top: 5px; + padding: 2px 0 0 7px; + } + } + &.other--root { &.post--comment { .post__header { @@ -309,7 +316,9 @@ .row--invite { .col-sm-6 { - padding: 0; + &:first-child { + padding-right: 15px; + } } } diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 9e09c3f42..a461dd35a 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -117,20 +117,13 @@ .col__name { font-weight: bold; margin-right: 2px; - padding-right: 10px; + padding-right: 5px; position: relative; z-index: 1; + } - &:after { - content: ':'; - display: inline-block; - font-family: FontAwesome; - font-size: 19px; - position: absolute; - right: 3px; - text-rendering: auto; - top: -5px; - } + strong { + display: inline; } .col__reply { @@ -176,6 +169,7 @@ &.same--root { &.same--user { padding-left: 70px; + padding-top: 0; .post__header { .col__reply { |