Creating hierarchy

2015-10-27 15:48:51 -04:00
--- a/web/react/components/center_panel.jsx
+++ b/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 = {
+};
--- a/web/react/components/channel_view.jsx
+++ b/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 = {
+};
--- a/web/react/components/sidebar.jsx
+++ b/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}
-                    teamName={this.props.teamName}
-                    teamType={this.props.teamType}
+                    teamDisplayName={TeamStore.getCurrent().display_name}
+                    teamName={TeamStore.getCurrent().name}
+                    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
 };
--- a/web/react/components/sidebar_right.jsx
+++ b/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;
-        const bottom = postHolder[0].scrollHeight;
-        this.plScrolledToBottom = position >= bottom;
+        if (postHolder[0]) {
+            const position = postHolder.scrollTop() + postHolder.height() + 14;
+            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');
--- a/web/react/pages/channel.jsx
+++ b/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 Sidebar = require('../components/sidebar.jsx');
-var ChannelHeader = require('../components/channel_header.jsx');
-var PostListContainer = require('../components/post_list_container.jsx');
-var CreatePost = require('../components/create_post.jsx');
-var SidebarRight = require('../components/sidebar_right.jsx');
-var SidebarRightMenu = require('../components/sidebar_right_menu.jsx');
+var ChannelView = require('../components/channel_view.jsx');
+var ChannelLoader = require('../components/channel_loader.jsx');
+var ErrorBar = require('../components/error_bar.jsx');
+var ErrorStore = require('../stores/error_store.jsx');
+
+var MentionList = require('../components/mention_list.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} />,
-        document.getElementById('navbar')
+        <ChannelView
+
+        />,
+        document.getElementById('channel_view')
    );

    ReactDOM.render(
-        <Sidebar
-            teamDisplayName={props.TeamDisplayName}
-            teamName={props.TeamName}
-            teamType={props.TeamType}
-        />,
-        document.getElementById('sidebar-left')
+        <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')
+    );
+
+    //
+    // 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')
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -8,30 +8,26 @@ body {
  background: $body-bg;
  position: relative;
  height: 100%;
-  &.white {
-    background: #fff;
-    > .container-fluid {
-      overflow: auto;
-    }
-    .inner__wrap {
-      > .row.content {
-        min-height: 100%;
-        margin-bottom: -89px;
-      }
-    }
-  }
-  .inner__wrap {
+}
+
+.inner__wrap {
    height: 100%;
    > .row.main {
-      height: 100%;
-      position: relative;
+        height: 100%;
+        position: relative;
    }
-  }
-  > .container-fluid {
+}
+
+.container-fluid {
+    @include clearfix;
+    height: 100%;
+    position: relative;
+}
+
+.channel-view {
    @include clearfix;
    height: 100%;
    position: relative;
-  }
 }

 img {
--- a/web/templates/channel.html
+++ b/web/templates/channel.html
@@ -5,24 +5,7 @@
 {{template "head" . }}
 <body>
  <div id="error_bar"></div>
-  <div class="container-fluid">
-    <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_view" class="channel-view"></div>
  <div id="channel_loader"></div>
  <div id="post_mention_tab"></div>
  <div id="reply_mention_tab"></div>