diff options
author | Christopher Speller <crspeller@gmail.com> | 2015-10-27 15:48:51 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2015-11-02 08:16:27 -0500 |
commit | 55f137c19cf45f4fd17249b5a23650c84b0d4f23 (patch) | |
tree | 0600885dab18a45c0b39f9a382ab5d776bedbce8 | |
parent | 65acb1b201147ee20d3a07f97073ab7cd8c0efc2 (diff) | |
download | chat-55f137c19cf45f4fd17249b5a23650c84b0d4f23.tar.gz chat-55f137c19cf45f4fd17249b5a23650c84b0d4f23.tar.bz2 chat-55f137c19cf45f4fd17249b5a23650c84b0d4f23.zip |
Creating hierarchy
-rw-r--r-- | web/react/components/center_panel.jsx | 54 | ||||
-rw-r--r-- | web/react/components/channel_view.jsx | 43 | ||||
-rw-r--r-- | web/react/components/sidebar.jsx | 17 | ||||
-rw-r--r-- | web/react/components/sidebar_right.jsx | 10 | ||||
-rw-r--r-- | web/react/pages/channel.jsx | 95 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_base.scss | 32 | ||||
-rw-r--r-- | web/templates/channel.html | 19 |
7 files changed, 148 insertions, 122 deletions
diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx new file mode 100644 index 000000000..7cb55898f --- /dev/null +++ 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 = { +}; diff --git a/web/react/components/channel_view.jsx b/web/react/components/channel_view.jsx new file mode 100644 index 000000000..beafa7d63 --- /dev/null +++ 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 = { +}; diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 5cb6d168b..88753556c 100644 --- 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 }; diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index 51225cbbe..2ec2b5bbf 100644 --- 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'); diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 7a04c5979..464561742 100644 --- 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,20 +55,31 @@ 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') ); @@ -105,11 +110,6 @@ function setupChannelPage(props) { ); ReactDOM.render( - <ChannelHeader />, - document.getElementById('channel-header') - ); - - ReactDOM.render( <EditChannelModal />, document.getElementById('edit_channel_modal') ); @@ -150,11 +150,6 @@ function setupChannelPage(props) { ); ReactDOM.render( - <PostListContainer />, - document.getElementById('post-list') - ); - - ReactDOM.render( <EditPostModal />, document.getElementById('edit_post_modal') ); @@ -170,39 +165,6 @@ function setupChannelPage(props) { ); 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') ); @@ -218,13 +180,6 @@ function setupChannelPage(props) { ); ReactDOM.render( - <FileUploadOverlay - overlayType='center' - />, - document.getElementById('file_upload_overlay') - ); - - ReactDOM.render( <RegisterAppModal />, document.getElementById('register_app_modal') ); diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 635928fe3..a9f46a815 100644 --- 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 { diff --git a/web/templates/channel.html b/web/templates/channel.html index 4b8318d43..63fe38587 100644 --- 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> |