IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Multiple UI improvements

Browse Source
This commit is contained in:
Asaad Mahmood
2016-03-23 04:06:08 +05:00
parent 18b8ae5298
commit e60f6f3b13
19 changed files with 66 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/components/access_history_modal.jsx
View File

@@ -2,7 +2,6 @@
// See License.txt for license information.
import $ from 'jquery';
import ReactDOM from 'react-dom';
import {Modal} from 'react-bootstrap';
import LoadingScreen from './loading_screen.jsx';
import AuditTable from './audit_table.jsx';
@@ -36,11 +35,8 @@ class AccessHistoryModal extends React.Component {
}
onShow() {
AsyncClient.getAudits();
if ($(window).width() > 768) {
$(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
} else {
$(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
if (!Utils.isMobile()) {
$('.modal-body').perfectScrollbar();
}
}
onHide() {

8
webapp/components/activity_log_modal.jsx
View File

@@ -2,7 +2,6 @@
// See License.txt for license information.
import $ from 'jquery';
import ReactDOM from 'react-dom';
import UserStore from 'stores/user_store.jsx';
import * as Client from 'utils/client.jsx';
import * as AsyncClient from 'utils/async_client.jsx';
@@ -56,11 +55,8 @@ export default class ActivityLogModal extends React.Component {
}
onShow() {
AsyncClient.getSessions();
if ($(window).width() > 768) {
$(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
} else {
$(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
if (!Utils.isMobile()) {
$('.modal-body').perfectScrollbar();
}
}
onHide() {

1
webapp/components/channel_header.jsx
View File

@@ -80,6 +80,7 @@ export default class ChannelHeader extends React.Component {
SearchStore.addSearchChangeListener(this.onListenerChange);
PreferenceStore.addChangeListener(this.onListenerChange);
UserStore.addChangeListener(this.onListenerChange);
$('.sidebar--left .dropdown-menu').perfectScrollbar();
}
componentWillUnmount() {
ChannelStore.removeChangeListener(this.onListenerChange);

7
webapp/components/invite_member_modal.jsx
View File

@@ -1,7 +1,6 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import $ from 'jquery';
import ReactDOM from 'react-dom';
import * as utils from 'utils/utils.jsx';
import Constants from 'utils/constants.jsx';
@@ -176,12 +175,6 @@ class InviteMemberModal extends React.Component {
});
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.show && this.state.show) {
$(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
}
}
addInviteFields() {
var count = this.state.idCount + 1;
var inviteIds = this.state.inviteIds;

6
webapp/components/popover_list_members.jsx
View File

@@ -1,6 +1,8 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import $ from 'jquery';
import UserStore from 'stores/user_store.jsx';
import {Popover, Overlay} from 'react-bootstrap';
import * as Utils from 'utils/utils.jsx';
@@ -20,6 +22,10 @@ export default class PopoverListMembers extends React.Component {
this.closePopover = this.closePopover.bind(this);
}
componentDidUpdate() {
$('.member-list__popover .popover-content').perfectScrollbar();
}
componentWillMount() {
this.setState({showPopover: false});
}

3
webapp/components/rhs_thread.jsx
View File

@@ -46,6 +46,9 @@ export default class RhsThread extends React.Component {
window.addEventListener('resize', this.handleResize);
this.mounted = true;
if (!Utils.isMobile()) {
$('.sidebar--right .post-right__scroll').perfectScrollbar();
}
}
componentDidUpdate() {
if ($('.post-right__scroll')[0]) {

3
webapp/components/search_results.jsx
View File

@@ -61,6 +61,9 @@ export default class SearchResults extends React.Component {
UserStore.addChangeListener(this.onUserChange);
this.resize();
window.addEventListener('resize', this.handleResize);
if (!Utils.isMobile()) {
$('.sidebar--right .search-items-container').perfectScrollbar();
}
}
shouldComponentUpdate(nextProps, nextState) {

3
webapp/components/sidebar.jsx
View File

@@ -163,6 +163,9 @@ export default class Sidebar extends React.Component {
componentDidUpdate() {
this.updateTitle();
this.updateUnreadIndicators();
if (!Utils.isMobile()) {
$('.sidebar--left .nav-pills__container').perfectScrollbar();
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);

8
webapp/components/team_settings_modal.jsx
View File

@@ -5,6 +5,7 @@ import $ from 'jquery';
import ReactDOM from 'react-dom';
import SettingsSidebar from './settings_sidebar.jsx';
import TeamSettings from './team_settings.jsx';
import * as Utils from 'utils/utils.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
@@ -49,9 +50,16 @@ class TeamSettingsModal extends React.Component {
$('.modal-dialog.display--content').removeClass('display--content');
}, 500);
});
if (!Utils.isMobile()) {
$('.settings-modal .settings-content').perfectScrollbar();
}
}
updateTab(tab) {
this.setState({activeTab: tab, activeSection: ''});
if (!Utils.isMobile()) {
$('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
}
}
updateSection(section) {
this.setState({activeSection: section});

15
webapp/components/user_list.jsx
View File

@@ -24,11 +24,16 @@ export default class UserList extends React.Component {
});
} else {
content = (
<div key='no-users-found'>
<FormattedMessage
id='user_list.notFound'
defaultMessage='No users found :('
/>
<div
key='no-users-found'
className='no-channel-message'
>
<p className='primary-message'>
<FormattedMessage
id='user_list.notFound'
defaultMessage='No users found :('
/>
</p>
</div>
);
}

22
webapp/components/user_settings/user_settings_modal.jsx
View File

@@ -64,7 +64,6 @@ class UserSettingsModal extends React.Component {
constructor(props) {
super(props);
this.handleShow = this.handleShow.bind(this);
this.handleHide = this.handleHide.bind(this);
this.handleHidden = this.handleHidden.bind(this);
this.handleCollapse = this.handleCollapse.bind(this);
@@ -95,24 +94,13 @@ class UserSettingsModal extends React.Component {
}
componentDidMount() {
if (this.props.show) {
this.handleShow();
}
UserStore.addChangeListener(this.onUserChanged);
}
componentDidUpdate(prevProps) {
if (this.props.show && !prevProps.show) {
this.handleShow();
}
componentDidUpdate() {
UserStore.removeChangeListener(this.onUserChanged);
}
handleShow() {
if ($(window).width() > 768) {
$(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
} else {
$(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
if (!Utils.isMobile()) {
$('.settings-modal .modal-body').perfectScrollbar();
}
}
@@ -222,6 +210,10 @@ class UserSettingsModal extends React.Component {
active_section: ''
});
}
if (!Utils.isMobile()) {
$('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
}
}
updateSection(section, skipConfirm) {

6
webapp/package.json
View File

@@ -53,8 +53,8 @@
"webpack": "webpack/webpack#master"
},
"scripts": {
"check": "eslint --ext \".jsx\" --ignore-pattern node_modules --quiet .",
"build": "webpack",
"run": "webpack --progress --watch"
"check": "eslint --ext \".jsx\" --ignore-pattern node_modules --quiet .",
"build": "webpack",
"run": "webpack --progress --watch"
}
}

1
webapp/root.jsx
View File

@@ -2,6 +2,7 @@
// See License.txt for license information.
import $ from 'jquery';
require('perfect-scrollbar/jquery')($);
import 'bootstrap/dist/css/bootstrap.css';
import 'jasny-bootstrap/dist/css/jasny-bootstrap.css';

1
webapp/sass/components/_modal.scss
View File

@@ -9,6 +9,7 @@
}
.modal-body {
max-height: calc(90vh - 62px);
overflow: auto;
padding: 20px 15px;

4
webapp/sass/layout/_headers.scss
View File

@@ -134,6 +134,10 @@
@include alpha-property(background, $black, .1);
}
a {
text-decoration: none;
}
.user__name {
color: $white;
}

2
webapp/sass/layout/_navigation.scss
View File

@@ -89,7 +89,7 @@
&.info-popover {
@include background-size(100% 100%);
background: url('../images/info__icon.png');
background-image: url('../images/info__icon.png');
cursor: pointer;
height: 19px;
position: relative;

1
webapp/sass/layout/_sidebar-left.scss
View File

@@ -1,7 +1,6 @@
@charset 'UTF-8';
.sidebar--left {
background: #fafafa;
border-right: $border-gray;
height: 100%;
left: 0;

17
webapp/sass/routes/_admin-console.scss
View File

@@ -10,12 +10,8 @@
width: 100%;
}
.row {
margin: 0;
}
h3 {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid alpha-color($black, .1);
font-weight: 600;
margin: 1em 0;
padding-bottom: .5em;
@@ -75,11 +71,18 @@
width: 17px;
}
&.divider {
@include alpha-property(background, $black, .1);
}
> a {
&:hover,
&.active,
&:focus {
background-color: #eaeaea;
@include alpha-property(background, $black, .1);
}
&.active {
background-color: transparent;
}
}

2
webapp/utils/utils.jsx
View File

@@ -681,7 +681,7 @@ export function applyTheme(theme) {
}
if (theme.centerChannelBg) {
changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-list__content, .modal .modal-content, .modal .modal-back', 'background:' + theme.centerChannelBg, 1);
changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-list__content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1);
changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1);
changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);