diff options
Diffstat (limited to 'web/react/components')
21 files changed, 101 insertions, 107 deletions
diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx index 4c4f21f08..6dca391d0 100644 --- a/web/react/components/admin_console/admin_controller.jsx +++ b/web/react/components/admin_console/admin_controller.jsx @@ -172,7 +172,10 @@ export default class AdminController extends React.Component { } return ( - <div id='admin_controller'> + <div + id='admin_controller' + className='admin-controller' + > <div className='sidebar--menu' id='sidebar-menu' @@ -186,7 +189,7 @@ export default class AdminController extends React.Component { removeSelectedTeam={this.removeSelectedTeam} addSelectedTeam={this.addSelectedTeam} /> - <div className='inner__wrap channel__wrap'> + <div className='inner-wrap channel__wrap'> <div className='row header'> </div> <div className='row main'> diff --git a/web/react/components/admin_console/team_users.jsx b/web/react/components/admin_console/team_users.jsx index 256576f9b..708907ddb 100644 --- a/web/react/components/admin_console/team_users.jsx +++ b/web/react/components/admin_console/team_users.jsx @@ -163,7 +163,7 @@ export default class UserList extends React.Component { className='form-horizontal' role='form' > - <table className='table more-table member-list-holder'> + <table className='more-modal__list member-list-holder'> <tbody> {memberList} </tbody> diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx index 7d6cfb5c3..722da922a 100644 --- a/web/react/components/admin_console/user_item.jsx +++ b/web/react/components/admin_console/user_item.jsx @@ -363,15 +363,15 @@ export default class UserItem extends React.Component { return ( <tr> - <td className='row member-div padding--equal'> + <td className='more-modal__row'> <img - className='post-profile-img pull-left' + className='more-modal__image pull-left' src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} height='36' width='36' /> - <span className='more-name'>{Utils.getDisplayName(user)}</span> - <span className='more-description'>{email}</span> + <span className='more-modal__name'>{Utils.getDisplayName(user)}</span> + <span className='more-modal__description'>{email}</span> <div className='dropdown member-drop'> <a href='#' diff --git a/web/react/components/authorize.jsx b/web/react/components/authorize.jsx index 35ad7ac10..4b1cebcf4 100644 --- a/web/react/components/authorize.jsx +++ b/web/react/components/authorize.jsx @@ -38,7 +38,7 @@ export default class Authorize extends React.Component { render() { return ( <div className='container-fluid'> - <div className='oauth-prompt'> + <div className='prompt'> <div className='prompt__heading'> <div className='prompt__app-icon'> <img diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx index 2ea840c1e..9a5f7a5d1 100644 --- a/web/react/components/center_panel.jsx +++ b/web/react/components/center_panel.jsx @@ -103,7 +103,7 @@ export default class CenterPanel extends React.Component { } return ( - <div className='inner__wrap channel__wrap'> + <div className='inner-wrap channel__wrap'> <div className='row header'> <div id='navbar'> <Navbar/> diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx index 8abcac8c3..383529212 100644 --- a/web/react/components/file_attachment.jsx +++ b/web/react/components/file_attachment.jsx @@ -49,8 +49,8 @@ class FileAttachment extends React.Component { if (name in self.refs) { var imgDiv = ReactDOM.findDOMNode(self.refs[name]); - $(imgDiv).removeClass('post__load'); - $(imgDiv).addClass('post__image'); + $(imgDiv).removeClass('post-image__load'); + $(imgDiv).addClass('post-image'); var width = this.width || $(this).width(); var height = this.height || $(this).height(); @@ -134,7 +134,7 @@ class FileAttachment extends React.Component { thumbnail = ( <div ref={filename} - className='post__load' + className='post-image__load' style={{backgroundImage: 'url(/static/images/load.gif)'}} /> ); diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx index 265d3f367..97949ca3d 100644 --- a/web/react/components/file_preview.jsx +++ b/web/react/components/file_preview.jsx @@ -41,15 +41,15 @@ export default class FilePreview extends React.Component { previews.push( <div key={filename} - className='preview-div' + className='file-preview' data-filename={originalFilename} > <img - className='preview-img' + className='file-preview__image' src={filename} /> <a - className='remove-preview' + className='file-preview__remove' onClick={this.handleRemove} > <i className='glyphicon glyphicon-remove'/> @@ -60,12 +60,12 @@ export default class FilePreview extends React.Component { previews.push( <div key={filename} - className='preview-div custom-file' + className='file-preview custom-file' data-filename={originalFilename} > <div className={'file-icon ' + Utils.getIconClassName(type)}/> <a - className='remove-preview' + className='file-preview__remove' onClick={this.handleRemove} > <i className='glyphicon glyphicon-remove'/> @@ -80,7 +80,7 @@ export default class FilePreview extends React.Component { <div ref={clientId} key={clientId} - className='preview-div' + className='file-preview' data-client-id={clientId} > <img @@ -88,7 +88,7 @@ export default class FilePreview extends React.Component { src='/static/images/load.gif' /> <a - className='remove-preview' + className='file-preview__remove' onClick={this.handleRemove} > <i className='glyphicon glyphicon-remove'/> @@ -98,7 +98,7 @@ export default class FilePreview extends React.Component { }); return ( - <div className='preview-container'> + <div className='file-preview__container'> {previews} </div> ); diff --git a/web/react/components/filtered_user_list.jsx b/web/react/components/filtered_user_list.jsx index ffd6ebf53..77a8c8810 100644 --- a/web/react/components/filtered_user_list.jsx +++ b/web/react/components/filtered_user_list.jsx @@ -27,10 +27,6 @@ class FilteredUserList extends React.Component { }; } - componentDidMount() { - $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar(); - } - componentDidUpdate(prevProps, prevState) { if (prevState.filter !== this.state.filter) { $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0); @@ -109,7 +105,7 @@ class FilteredUserList extends React.Component { </div> <div ref='userList' - className='user-list' + className='more-modal__list' > <UserList users={users} diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx index 3309d690c..dd21f21e0 100644 --- a/web/react/components/get_link_modal.jsx +++ b/web/react/components/get_link_modal.jsx @@ -81,7 +81,7 @@ export default class GetLinkModal extends React.Component { var copyLinkConfirm = null; if (this.state.copiedLink) { copyLinkConfirm = ( - <p className='alert alert-success copy-link-confirm'> + <p className='alert alert-success alert--confirm'> <i className='fa fa-check'></i> <FormattedMessage id='get_link.clipboard' diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index 3309ef52e..2ba435449 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -95,17 +95,18 @@ export default class MoreChannels extends React.Component { } return ( - <tr key={channel.id}> - <td className='more-row'> - <div className='more-details'> - <p className='more-name'>{channel.display_name}</p> - <p className='more-description'>{channel.purpose}</p> - </div> - <div className='more-actions'> - {joinButton} - </div> - </td> - </tr> + <div + className='more-modal__row' + key={channel.id} + > + <div className='more-modal__details'> + <p className='more-modal__name'>{channel.display_name}</p> + <p className='more-modal__description'>{channel.purpose}</p> + </div> + <div className='more-modal__actions'> + {joinButton} + </div> + </div> ); } render() { @@ -127,11 +128,9 @@ export default class MoreChannels extends React.Component { moreChannels = <LoadingScreen/>; } else if (channels.length) { moreChannels = ( - <table className='more-table table'> - <tbody> - {channels.map(this.createChannelRow)} - </tbody> - </table> + <div className='more-modal__list'> + {channels.map(this.createChannelRow)} + </div> ); } else { moreChannels = ( diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 974f026d0..8382cb47a 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -66,7 +66,7 @@ export default class Navbar extends React.Component { componentDidMount() { ChannelStore.addChangeListener(this.onChange); ChannelStore.addExtraInfoChangeListener(this.onChange); - $('.inner__wrap').click(this.hideSidebars); + $('.inner-wrap').click(this.hideSidebars); attachFastClick(document.body); } componentWillUnmount() { @@ -101,7 +101,7 @@ export default class Navbar extends React.Component { }); if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') { - $('.inner__wrap').removeClass('move--right move--left move--left-small'); + $('.inner-wrap').removeClass('move--right move--left move--left-small'); $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); $('.sidebar--menu').removeClass('move--left'); @@ -109,11 +109,11 @@ export default class Navbar extends React.Component { } } toggleLeftSidebar() { - $('.inner__wrap').toggleClass('move--right'); + $('.inner-wrap').toggleClass('move--right'); $('.sidebar--left').toggleClass('move--right'); } toggleRightSidebar() { - $('.inner__wrap').toggleClass('move--left-small'); + $('.inner-wrap').toggleClass('move--left-small'); $('.sidebar--menu').toggleClass('move--left'); } showSearch() { diff --git a/web/react/components/not_logged_in.jsx b/web/react/components/not_logged_in.jsx index 7af293e77..cf3effcd5 100644 --- a/web/react/components/not_logged_in.jsx +++ b/web/react/components/not_logged_in.jsx @@ -5,7 +5,7 @@ import {FormattedMessage} from 'mm-intl'; export default class NotLoggedIn extends React.Component { componentDidMount() { - $('body').attr('class', 'white'); + $('body').attr('class', 'sticky'); $('#root').attr('class', 'container-fluid'); } componentWillUnmount() { @@ -14,7 +14,7 @@ export default class NotLoggedIn extends React.Component { } render() { return ( - <div className='inner__wrap'> + <div className='inner-wrap'> <div className='row content'> {this.props.children} <div className='footer-push'></div> diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index 1943fb409..8f6948ee4 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -110,25 +110,25 @@ export default class PopoverListMembers extends React.Component { if (name) { popoverHtml.push( <div - className='text-nowrap' + className='more-modal__row' key={'popover-member-' + i} > <img - className='profile-img rounded pull-left' + className='more-modal__image' width='26px' height='26px' src={`/api/v1/users/${m.id}/image?time=${m.update_at}`} /> - <div className='pull-left'> + <div className='more-modal__details'> <div - className='more-name' + className='more-modal__name' > {name} </div> </div> <div - className='pull-right' + className='more-modal__actions' > {button} </div> @@ -185,7 +185,7 @@ export default class PopoverListMembers extends React.Component { title={title} id='member-list-popover' > - {popoverHtml} + <div className='more-modal__list'>{popoverHtml}</div> </Popover> </Overlay> </div> diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index eaf8b5069..3afd0e840 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -164,7 +164,7 @@ class SearchBar extends React.Component { </span> <form role='form' - className='search__form relative-div' + className='search__form' onSubmit={this.handleSubmit} style={{overflow: 'visible'}} autoComplete='off' diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx index 3a091bdd1..9c3b0336b 100644 --- a/web/react/components/search_results_item.jsx +++ b/web/react/components/search_results_item.jsx @@ -25,7 +25,7 @@ export default class SearchResultsItem extends React.Component { if ($(window).width() < 768) { $('.sidebar--right').removeClass('move--left'); - $('.inner__wrap').removeClass('move--left'); + $('.inner-wrap').removeClass('move--left'); } } diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index 14853d3a3..fc9888626 100644 --- a/web/react/components/sidebar_right.jsx +++ b/web/react/components/sidebar_right.jsx @@ -55,27 +55,27 @@ export default class SidebarRight extends React.Component { var windowWidth = $(window).outerWidth(); var sidebarRightWidth = $('.sidebar--right').outerWidth(); - $('.inner__wrap').removeClass('.move--right'); - $('.inner__wrap').addClass('move--left'); + $('.inner-wrap').removeClass('.move--right'); + $('.inner-wrap').addClass('move--left'); $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').addClass('move--left'); //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>'); if (this.state.search_visible || this.state.post_right_visible) { if (windowWidth > 960) { - $('.inner__wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); + $('.inner-wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); $('.sidebar--right').velocity({translateX: 0}, {duration: 500, easing: 'easeOutSine'}); } else { - $('.inner__wrap, .sidebar--right').attr('style', ''); + $('.inner-wrap, .sidebar--right').attr('style', ''); } } else { if (windowWidth > 960) { - $('.inner__wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'}); + $('.inner-wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'}); $('.sidebar--right').velocity({translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); } else { - $('.inner__wrap, .sidebar--right').attr('style', ''); + $('.inner-wrap, .sidebar--right').attr('style', ''); } - $('.inner__wrap').removeClass('move--left').removeClass('move--right'); + $('.inner-wrap').removeClass('move--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); return ( <div></div> diff --git a/web/react/components/suggestion/at_mention_provider.jsx b/web/react/components/suggestion/at_mention_provider.jsx index c5bd13c26..b53b351d9 100644 --- a/web/react/components/suggestion/at_mention_provider.jsx +++ b/web/react/components/suggestion/at_mention_provider.jsx @@ -24,7 +24,7 @@ class AtMentionSuggestion extends React.Component { defaultMessage='Notifies everyone in the team' /> ); - icon = <i className='mention-img fa fa-users fa-2x'/>; + icon = <i className='mention__image fa fa-users fa-2x'/>; } else if (item.username === 'channel') { username = 'channel'; description = ( @@ -33,19 +33,19 @@ class AtMentionSuggestion extends React.Component { defaultMessage='Notifies everyone in the channel' /> ); - icon = <i className='mention-img fa fa-users fa-2x'/>; + icon = <i className='mention__image fa fa-users fa-2x'/>; } else { username = item.username; description = Utils.getFullName(item); icon = ( <img - className='mention-img' + className='mention__image' src={'/api/v1/users/' + item.id + '/image?time=' + item.update_at} /> ); } - let className = 'mentions-name'; + let className = 'mentions__name'; if (isSelection) { className += ' suggestion--selected'; } @@ -58,11 +58,11 @@ class AtMentionSuggestion extends React.Component { <div className='pull-left'> {icon} </div> - <div className='pull-left mention-align'> + <div className='pull-left mention--align'> <span> {'@' + username} </span> - <span className='mention-fullname'> + <span className='mention__fullname'> {description} </span> </div> diff --git a/web/react/components/suggestion/command_provider.jsx b/web/react/components/suggestion/command_provider.jsx index 21d6d0e0e..fffb2df07 100644 --- a/web/react/components/suggestion/command_provider.jsx +++ b/web/react/components/suggestion/command_provider.jsx @@ -7,7 +7,7 @@ class CommandSuggestion extends React.Component { render() { const {item, isSelection, onClick} = this.props; - let className = 'command-name'; + let className = 'command'; if (isSelection) { className += ' suggestion--selected'; } diff --git a/web/react/components/suggestion/suggestion_list.jsx b/web/react/components/suggestion/suggestion_list.jsx index ccebeb990..0f5907179 100644 --- a/web/react/components/suggestion/suggestion_list.jsx +++ b/web/react/components/suggestion/suggestion_list.jsx @@ -111,7 +111,7 @@ export default class SuggestionList extends React.Component { <div className='suggestion-list suggestion-list--top'> <div ref='content' - className='suggestion-content suggestion-content--top' + className='suggestion-list__content suggestion-list__content--top' > {items} </div> diff --git a/web/react/components/user_list.jsx b/web/react/components/user_list.jsx index 39453a827..783d552dc 100644 --- a/web/react/components/user_list.jsx +++ b/web/react/components/user_list.jsx @@ -21,23 +21,19 @@ export default class UserList extends React.Component { }); } else { content = ( - <tr key='no-users-found'> - <td> - <FormattedMessage - id='user_list.notFound' - defaultMessage='No users found :(' - /> - </td> - </tr> + <div key='no-users-found'> + <FormattedMessage + id='user_list.notFound' + defaultMessage='No users found :(' + /> + </div> ); } return ( - <table className='more-table table'> - <tbody> - {content} - </tbody> - </table> + <div> + {content} + </div> ); } } diff --git a/web/react/components/user_list_row.jsx b/web/react/components/user_list_row.jsx index 1ca40687f..8c664ba82 100644 --- a/web/react/components/user_list_row.jsx +++ b/web/react/components/user_list_row.jsx @@ -25,32 +25,32 @@ export default function UserListRow({user, actions}) { }); return ( - <tr> - <td - key={user.id} - style={{display: 'flex'}} + <div + key={user.id} + className='more-modal__row' + > + <img + className='more-modal__image' + width='38' + height='38' + src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} + /> + <div + className='more-modal__details' > - <img - className='profile-img' - src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} - /> - <div - className='user-list-item__details' - > - <div className='more-name'> - {name} - </div> - <div className='more-description'> - {user.email} - </div> + <div className='more-modal__name'> + {name} </div> - <div - className='user-list-item__actions' - > - {buttons} + <div className='more-modal__description'> + {user.email} </div> - </td> - </tr> + </div> + <div + className='more-modal__actions' + > + {buttons} + </div> + </div> ); } |