Creating hierarchy

web/react/components/center_panel.jsx

@@ -0,0 +1,54 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var CreatePost = require('../components/create_post.jsx');
+var PostListContainer = require('../components/post_list_container.jsx');
+var ChannelHeader = require('../components/channel_header.jsx');
+var Navbar = require('../components/navbar.jsx');
+var FileUploadOverlay = require('../components/file_upload_overlay.jsx');
+
+export default class CenterPanel extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <div className='inner__wrap channel__wrap'>
+                <div className='row header'>
+                    <div id='navbar'>
+                        <Navbar/>
+                    </div>
+                </div>
+                <div className='row main'>
+                    <FileUploadOverlay
+                        id='file_upload_overlay'
+                        overlayType='center'
+                    />
+                    <div
+                        id='app-content'
+                        className='app__content'
+                    >
+                        <div id='channel-header'>
+                            <ChannelHeader />
+                        </div>
+                        <div id='post-list'>
+                            <PostListContainer />
+                        </div>
+                        <div
+                            className='post-create__container'
+                            id='post-create'
+                        >
+                            <CreatePost />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+CenterPanel.defaultProps = {
+};
+
+CenterPanel.propTypes = {
+};

web/react/components/channel_view.jsx

@@ -0,0 +1,43 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var CenterPanel = require('../components/center_panel.jsx');
+var Sidebar = require('../components/sidebar.jsx');
+var SidebarRight = require('../components/sidebar_right.jsx');
+var SidebarRightMenu = require('../components/sidebar_right_menu.jsx');
+
+export default class ChannelView extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <div className='container-fluid'>
+                <div
+                    className='sidebar--right'
+                    id='sidebar-right'
+                >
+                    <SidebarRight/>
+                </div>
+                <div
+                    className='sidebar--menu'
+                    id='sidebar-menu'
+                >
+                    <SidebarRightMenu/>
+                </div>
+                <div
+                    className='sidebar--left'
+                    id='sidebar-left'
+                >
+                    <Sidebar/>
+                </div>
+                <CenterPanel />
+            </div>
+        );
+    }
+}
+ChannelView.defaultProps = {
+};
+
+ChannelView.propTypes = {
+};

web/react/components/sidebar.jsx

@@ -178,10 +178,6 @@ export default class Sidebar extends React.Component {
         window.addEventListener('resize', this.handleResize);
     }
     shouldComponentUpdate(nextProps, nextState) {
-        if (!Utils.areStatesEqual(nextProps, this.props)) {
-            return true;
-        }
-
         if (!Utils.areStatesEqual(nextState, this.state)) {
             return true;
         }
@@ -235,7 +231,7 @@ export default class Sidebar extends React.Component {
             const unread = this.getUnreadCount();
             const mentionTitle = unread.mentions > 0 ? '(' + unread.mentions + ') ' : '';
             const unreadTitle = unread.msgs > 0 ? '* ' : '';
-            document.title = mentionTitle + unreadTitle + currentChannelName + ' - ' + this.props.teamDisplayName + ' ' + currentSiteName;
+            document.title = mentionTitle + unreadTitle + currentChannelName + ' - ' + TeamStore.getCurrent().display_name + ' ' + currentSiteName;
         }
     }
     onScroll() {
@@ -543,9 +539,9 @@ export default class Sidebar extends React.Component {
                 />
 
                 <SidebarHeader
-                    teamDisplayName={this.props.teamDisplayName}
+                    teamDisplayName={TeamStore.getCurrent().display_name}
-                    teamName={this.props.teamName}
+                    teamName={TeamStore.getCurrent().name}
-                    teamType={this.props.teamType}
+                    teamType={TeamStore.getCurrent().type}
                 />
                 <SearchBox />
 
@@ -631,11 +627,6 @@ export default class Sidebar extends React.Component {
 }
 
 Sidebar.defaultProps = {
-    teamType: '',
-    teamDisplayName: ''
 };
 Sidebar.propTypes = {
-    teamType: React.PropTypes.string,
-    teamDisplayName: React.PropTypes.string,
-    teamName: React.PropTypes.string
 };

web/react/components/sidebar_right.jsx

@@ -53,9 +53,13 @@ export default class SidebarRight extends React.Component {
     }
     render() {
         var postHolder = $('.post-list-holder-by-time').not('.inactive');
-        const position = postHolder.scrollTop() + postHolder.height() + 14;
+        if (postHolder[0]) {
-        const bottom = postHolder[0].scrollHeight;
+            const position = postHolder.scrollTop() + postHolder.height() + 14;
-        this.plScrolledToBottom = position >= bottom;
+            const bottom = postHolder[0].scrollHeight;
+            this.plScrolledToBottom = position >= bottom;
+        } else {
+            this.plScrolledToBottom = true;
+        }
 
         if (!(this.state.search_visible || this.state.post_right_visible)) {
             $('.inner__wrap').removeClass('move--left').removeClass('move--right');

web/react/pages/channel.jsx

@@ -2,13 +2,12 @@
 // See License.txt for license information.
 
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
-var Navbar = require('../components/navbar.jsx');
+var ChannelView = require('../components/channel_view.jsx');
-var Sidebar = require('../components/sidebar.jsx');
+var ChannelLoader = require('../components/channel_loader.jsx');
-var ChannelHeader = require('../components/channel_header.jsx');
+var ErrorBar = require('../components/error_bar.jsx');
-var PostListContainer = require('../components/post_list_container.jsx');
+var ErrorStore = require('../stores/error_store.jsx');
-var CreatePost = require('../components/create_post.jsx');
+
-var SidebarRight = require('../components/sidebar_right.jsx');
+var MentionList = require('../components/mention_list.jsx');
-var SidebarRightMenu = require('../components/sidebar_right_menu.jsx');
 var GetLinkModal = require('../components/get_link_modal.jsx');
 var MemberInviteModal = require('../components/invite_member_modal.jsx');
 var EditChannelModal = require('../components/edit_channel_modal.jsx');
@@ -24,15 +23,10 @@ var TeamSettingsModal = require('../components/team_settings_modal.jsx');
 var ChannelMembersModal = require('../components/channel_members.jsx');
 var ChannelInviteModal = require('../components/channel_invite_modal.jsx');
 var TeamMembersModal = require('../components/team_members.jsx');
-var ErrorBar = require('../components/error_bar.jsx');
-var ErrorStore = require('../stores/error_store.jsx');
-var ChannelLoader = require('../components/channel_loader.jsx');
-var MentionList = require('../components/mention_list.jsx');
 var ChannelInfoModal = require('../components/channel_info_modal.jsx');
 var AccessHistoryModal = require('../components/access_history_modal.jsx');
 var ActivityLogModal = require('../components/activity_log_modal.jsx');
 var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx');
-var FileUploadOverlay = require('../components/file_upload_overlay.jsx');
 var RegisterAppModal = require('../components/register_app_modal.jsx');
 var ImportThemeModal = require('../components/user_settings/import_theme_modal.jsx');
 
@@ -61,19 +55,30 @@ function setupChannelPage(props) {
     );
 
     ReactDOM.render(
-        <Navbar teamDisplayName={props.TeamDisplayName} />,
+        <ChannelView
-        document.getElementById('navbar')
+
+        />,
+        document.getElementById('channel_view')
     );
 
     ReactDOM.render(
-        <Sidebar
+        <MentionList id='post_textbox' />,
-            teamDisplayName={props.TeamDisplayName}
+        document.getElementById('post_mention_tab')
-            teamName={props.TeamName}
-            teamType={props.TeamType}
-        />,
-        document.getElementById('sidebar-left')
     );
 
+    ReactDOM.render(
+        <MentionList id='reply_textbox' />,
+        document.getElementById('reply_mention_tab')
+    );
+
+    ReactDOM.render(
+        <MentionList id='edit_textbox' />,
+        document.getElementById('edit_mention_tab')
+    );
+
+    //
+    // Modals
+    //
     ReactDOM.render(
         <GetLinkModal />,
         document.getElementById('get_link_modal')
@@ -104,11 +109,6 @@ function setupChannelPage(props) {
         document.getElementById('invite_member_modal')
     );
 
-    ReactDOM.render(
-        <ChannelHeader />,
-        document.getElementById('channel-header')
-    );
-
     ReactDOM.render(
         <EditChannelModal />,
         document.getElementById('edit_channel_modal')
@@ -149,11 +149,6 @@ function setupChannelPage(props) {
         document.getElementById('more_channels_modal')
     );
 
-    ReactDOM.render(
-        <PostListContainer />,
-        document.getElementById('post-list')
-    );
-
     ReactDOM.render(
         <EditPostModal />,
         document.getElementById('edit_post_modal')
@@ -169,39 +164,6 @@ function setupChannelPage(props) {
         document.getElementById('post_deleted_modal')
     );
 
-    ReactDOM.render(
-        <CreatePost />,
-        document.getElementById('post-create')
-    );
-
-    ReactDOM.render(
-        <SidebarRight />,
-        document.getElementById('sidebar-right')
-    );
-
-    ReactDOM.render(
-        <SidebarRightMenu
-            teamDisplayName={props.TeamDisplayName}
-            teamType={props.TeamType}
-        />,
-        document.getElementById('sidebar-menu')
-    );
-
-    ReactDOM.render(
-        <MentionList id='post_textbox' />,
-        document.getElementById('post_mention_tab')
-    );
-
-    ReactDOM.render(
-        <MentionList id='reply_textbox' />,
-        document.getElementById('reply_mention_tab')
-    );
-
-    ReactDOM.render(
-        <MentionList id='edit_textbox' />,
-        document.getElementById('edit_mention_tab')
-    );
-
     ReactDOM.render(
         <AccessHistoryModal />,
         document.getElementById('access_history_modal')
@@ -217,13 +179,6 @@ function setupChannelPage(props) {
         document.getElementById('removed_from_channel_modal')
     );
 
-    ReactDOM.render(
-        <FileUploadOverlay
-            overlayType='center'
-        />,
-        document.getElementById('file_upload_overlay')
-    );
-
     ReactDOM.render(
         <RegisterAppModal />,
         document.getElementById('register_app_modal')

web/sass-files/sass/partials/_base.scss

@@ -8,30 +8,26 @@ body {
   background: $body-bg;
   position: relative;
   height: 100%;
-  &.white {
+}
-    background: #fff;
+
-    > .container-fluid {
+.inner__wrap {
-      overflow: auto;
-    }
-    .inner__wrap {
-      > .row.content {
-        min-height: 100%;
-        margin-bottom: -89px;
-      }
-    }
-  }
-  .inner__wrap {
     height: 100%;
     > .row.main {
-      height: 100%;
+        height: 100%;
-      position: relative;
+        position: relative;
     }
-  }
+}
-  > .container-fluid {
+
+.container-fluid {
+    @include clearfix;
+    height: 100%;
+    position: relative;
+}
+
+.channel-view {
     @include clearfix;
     height: 100%;
     position: relative;
-  }
 }
 
 img {

web/templates/channel.html

@@ -5,24 +5,7 @@
 {{template "head" . }}
 <body>
   <div id="error_bar"></div>
-  <div class="container-fluid">
+  <div id="channel_view" class="channel-view"></div>
-    <div class="sidebar--right" id="sidebar-right"></div>
-    <div class="sidebar--menu" id="sidebar-menu"></div>
-    <div class="sidebar--left" id="sidebar-left"></div>
-    <div class="inner__wrap channel__wrap">
-        <div class="row header">
-            <div id="navbar"></div>
-        </div>
-        <div class="row main">
-          <div id="file_upload_overlay"></div>
-          <div id="app-content" class="app__content">
-            <div id="channel-header"></div>
-            <div id="post-list"></div>
-            <div class="post-create__container" id="post-create"></div>
-          </div>
-        </div>
-    </div>
-  </div>
   <div id="channel_loader"></div>
   <div id="post_mention_tab"></div>
   <div id="reply_mention_tab"></div>