mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Multiple UI improvements (#3317)

Просмотр исходного кода 
Removing break all

Replacing jquery selectors and some other UI improvements

Removing jquery selector
Этот коммит содержится в:
Asaad Mahmood
2016-06-14 22:53:47 +05:00
коммит произвёл Joram Wilander
родитель af4110b2ed
Коммит f6b4a611d0
14 изменённых файлов: 254 добавлений и 138 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
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

1
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})}
>

7
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

10
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 = '';

110
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 (
@@ -228,12 +302,24 @@ export default class SidebarRightMenu extends React.Component {
<div className='nav-pills__container'>
{tutorialTip}
<ul className='nav nav-pills nav-stacked'>
<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'

12
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;
}