diff options
-rw-r--r-- | webapp/components/channel_switch_modal.jsx | 14 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_body_additional_content.jsx | 22 | ||||
-rw-r--r-- | webapp/components/rhs_comment.jsx | 14 | ||||
-rw-r--r-- | webapp/components/rhs_root_post.jsx | 13 | ||||
-rw-r--r-- | webapp/components/rhs_thread.jsx | 16 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 15 | ||||
-rw-r--r-- | webapp/sass/layout/_post-right.scss | 2 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 21 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 2 | ||||
-rw-r--r-- | webapp/sass/layout/_webhooks.scss | 170 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 9 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 138 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 2 |
13 files changed, 256 insertions, 182 deletions
diff --git a/webapp/components/channel_switch_modal.jsx b/webapp/components/channel_switch_modal.jsx index 761da1395..3b8fbc7af 100644 --- a/webapp/components/channel_switch_modal.jsx +++ b/webapp/components/channel_switch_modal.jsx @@ -98,10 +98,12 @@ export default class SwitchChannelModal extends React.Component { </Modal.Header> <Modal.Body> - <FormattedMessage - id='channel_switch_modal.help' - defaultMessage='↑↓ to browse, TAB to select, ↵ to confirm, ESC to dismiss' - /> + <div className='modal__hint'> + <FormattedMessage + id='channel_switch_modal.help' + defaultMessage='↑↓ to browse, TAB to select, ↵ to confirm, ESC to dismiss' + /> + </div> <SuggestionBox ref='search' className='form-control focused' @@ -118,9 +120,9 @@ export default class SwitchChannelModal extends React.Component { /> </Modal.Body> <Modal.Footer> - <label className='control-label'> + <div className='modal__error'> {message} - </label> + </div> <button type='button' className='btn btn-default' diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx index ea6e1cb49..bd29da962 100644 --- a/webapp/components/post_view/components/post_body_additional_content.jsx +++ b/webapp/components/post_view/components/post_body_additional_content.jsx @@ -97,18 +97,16 @@ export default class PostBodyAdditionalContent extends React.Component { ); } - if (!this.props.compactDisplay) { - for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) { - const imageType = Constants.IMAGE_TYPES[i]; - const suffix = link.substring(link.length - (imageType.length + 1)); - if (suffix === '.' + imageType || suffix === '=' + imageType) { - return ( - <PostImage - channelId={this.props.post.channel_id} - link={link} - /> - ); - } + for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) { + const imageType = Constants.IMAGE_TYPES[i]; + const suffix = link.substring(link.length - (imageType.length + 1)); + if (suffix === '.' + imageType || suffix === '=' + imageType) { + return ( + <PostImage + channelId={this.props.post.channel_id} + link={link} + /> + ); } } diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index a49a84b88..0ef2348d0 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -35,6 +35,9 @@ export default class RhsComment extends React.Component { GlobalActions.showGetPostLinkModal(this.props.post); } shouldComponentUpdate(nextProps) { + if (nextProps.compactDisplay !== this.props.compactDisplay) { + return true; + } if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; } @@ -186,6 +189,11 @@ export default class RhsComment extends React.Component { ); } + let compactClass = ''; + if (this.props.compactDisplay) { + compactClass = 'post--compact'; + } + var dropdown = this.createDropdown(); var fileAttachment; @@ -195,12 +203,13 @@ export default class RhsComment extends React.Component { filenames={post.filenames} channelId={post.channel_id} userId={post.user_id} + compactDisplay={this.props.compactDisplay} /> ); } return ( - <div className={'post ' + currentUserCss}> + <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}> <div className='post__content'> <div className='post__img'> <img @@ -249,5 +258,6 @@ export default class RhsComment extends React.Component { RhsComment.propTypes = { post: React.PropTypes.object, user: React.PropTypes.object.isRequired, - currentUser: React.PropTypes.object.isRequired + currentUser: React.PropTypes.object.isRequired, + compactDisplay: React.PropTypes.bool }; diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index f7c9c9141..8996381ba 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -32,6 +32,9 @@ export default class RhsRootPost extends React.Component { GlobalActions.showGetPostLinkModal(this.props.post); } shouldComponentUpdate(nextProps) { + if (nextProps.compactDisplay !== this.props.compactDisplay) { + return true; + } if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; } @@ -220,6 +223,11 @@ export default class RhsRootPost extends React.Component { ); } + let compactClass = ''; + if (this.props.compactDisplay) { + compactClass = 'post--compact'; + } + const messageWrapper = ( <div ref='message_holder' @@ -229,7 +237,7 @@ export default class RhsRootPost extends React.Component { ); return ( - <div className={'post post--root ' + userCss + ' ' + systemMessageClass}> + <div className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}> <div className='post-right-channel__name'>{channelName}</div> <div className='post__content'> <div className='post__img'> @@ -279,5 +287,6 @@ RhsRootPost.propTypes = { post: React.PropTypes.object.isRequired, user: React.PropTypes.object.isRequired, currentUser: React.PropTypes.object.isRequired, - commentCount: React.PropTypes.number + commentCount: React.PropTypes.number, + compactDisplay: React.PropTypes.bool }; diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx index ca5ed2dc8..b001da80a 100644 --- a/webapp/components/rhs_thread.jsx +++ b/webapp/components/rhs_thread.jsx @@ -12,6 +12,7 @@ import RhsHeaderPost from './rhs_header_post.jsx'; import RootPost from './rhs_root_post.jsx'; import Comment from './rhs_comment.jsx'; import Constants from 'utils/constants.jsx'; +const Preferences = Constants.Preferences; import FileUploadOverlay from './file_upload_overlay.jsx'; import Scrollbars from 'react-custom-scrollbars'; @@ -50,12 +51,14 @@ export default class RhsThread extends React.Component { this.onPostChange = this.onPostChange.bind(this); this.onUserChange = this.onUserChange.bind(this); this.forceUpdateInfo = this.forceUpdateInfo.bind(this); + this.onPreferenceChange = this.onPreferenceChange.bind(this); this.handleResize = this.handleResize.bind(this); const state = this.getPosts(); state.windowWidth = Utils.windowWidth(); state.windowHeight = Utils.windowHeight(); state.profiles = JSON.parse(JSON.stringify(UserStore.getProfiles())); + state.compactDisplay = PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT; this.state = state; } @@ -63,6 +66,7 @@ export default class RhsThread extends React.Component { PostStore.addSelectedPostChangeListener(this.onPostChange); PostStore.addChangeListener(this.onPostChange); PreferenceStore.addChangeListener(this.forceUpdateInfo); + PreferenceStore.addChangeListener(this.onPreferenceChange); UserStore.addChangeListener(this.onUserChange); this.scrollToBottom(); @@ -74,6 +78,7 @@ export default class RhsThread extends React.Component { PostStore.removeSelectedPostChangeListener(this.onPostChange); PostStore.removeChangeListener(this.onPostChange); PreferenceStore.removeChangeListener(this.forceUpdateInfo); + PreferenceStore.removeChangeListener(this.onPreferenceChange); UserStore.removeChangeListener(this.onUserChange); window.removeEventListener('resize', this.handleResize); @@ -103,6 +108,10 @@ export default class RhsThread extends React.Component { return true; } + if (nextState.compactDisplay !== this.state.compactDisplay) { + return true; + } + if (!Utils.areObjectsEqual(nextState.profiles, this.state.profiles)) { return true; } @@ -124,6 +133,11 @@ export default class RhsThread extends React.Component { windowHeight: Utils.windowHeight() }); } + onPreferenceChange() { + this.setState({ + compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT + }); + } onPostChange() { if (this.mounted) { this.setState(this.getPosts()); @@ -228,6 +242,7 @@ export default class RhsThread extends React.Component { commentCount={postsArray.length} user={profile} currentUser={this.props.currentUser} + compactDisplay={this.state.compactDisplay} /> <div className='post-right-comments-container'> {postsArray.map((comPost) => { @@ -244,6 +259,7 @@ export default class RhsThread extends React.Component { post={comPost} user={p} currentUser={this.props.currentUser} + compactDisplay={this.state.compactDisplay} /> ); })} diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 3d3a11de0..30b5d29cd 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -29,6 +29,21 @@ } } + .modal__hint { + @include opacity(.8); + display: block; + font-size: .9em; + margin: 0 0 10px; + } + + .modal__error { + color: $red; + float: left; + font-size: .95em; + font-weight: normal; + margin-top: 6px; + } + .more-table { margin: 0; table-layout: fixed; diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 93ad7af54..1040a324e 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -28,7 +28,7 @@ .post { &.post--root { border-bottom: 1px solid #ddd; - padding-bottom: 1.2em; + padding-bottom: 1em; .post__body { background: transparent !important; diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 08074c59a..938f4bde6 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -488,6 +488,13 @@ body.ios { } &.post--compact { + &.post--thread { + .post__header { + height: 22px; + padding-top: 3px; + } + } + blockquote { display: inline-block; font-size: 1em; @@ -509,10 +516,19 @@ body.ios { .post__body { background: transparent !important; - line-height: 1.2; + line-height: 1.6; margin-top: -1px; padding: 3px 0; + .img-div { + max-height: 150px; + max-width: 150px; + } + + p { + line-height: inherit; + } + p + p { margin-top: 1em; } @@ -520,6 +536,7 @@ body.ios { ol, ul { display: inline-block; + margin-top: 1px; padding-left: 30px; } } @@ -758,7 +775,7 @@ body.ios { .col__reply { position: absolute; - right: 10px; + right: 0; top: 30px; white-space: nowrap; width: 65px; diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index 923e53d12..00e183254 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -17,7 +17,7 @@ .post { .post__content { - padding: 0; + padding: 0 10px 0 0; } .post__header { diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss index 976b8361b..99a82f00e 100644 --- a/webapp/sass/layout/_webhooks.scss +++ b/webapp/sass/layout/_webhooks.scss @@ -36,113 +36,111 @@ } } +.post { + .attachment { + .attachment__content { + border-radius: 4px; + border-style: solid; + border-width: 1px; + margin: 0 0 5px 0; + padding: 2px 5px; + } -.attachment { - .attachment__content { - border-radius: 4px; - border-style: solid; - border-width: 1px; - margin: 0 0 5px 0; - padding: 2px 5px; - } - - .attachment__thumb-pretext { - background: transparent; - border: none; - margin-left: 5px; - } + .attachment__thumb-pretext { + background: transparent; + border: none; + margin-left: 5px; + } - .attachment__container { - border-left-style: solid; - border-left-width: 4px; - padding: 10px; + .attachment__container { + border-left-style: solid; + border-left-width: 4px; + padding: 10px; - &.attachment__container--good { - border-left-color: #00c100; - } + &.attachment__container--good { + border-left-color: #00c100; + } - &.attachment__container--warning { - border-left-color: #dede01; - } + &.attachment__container--warning { + border-left-color: #dede01; + } - &.attachment__container--danger { - border-left-color: #e40303; + &.attachment__container--danger { + border-left-color: #e40303; + } } - } - .attachment__body { - float: left; - overflow-x: auto; - overflow-y: hidden; - padding-right: 5px; - width: 80%; + .attachment__body { + float: left; + overflow-x: auto; + overflow-y: hidden; + padding-right: 5px; + width: 80%; - &.attachment__body--no_thumb { - width: 100%; + &.attachment__body--no_thumb { + width: 100%; + } } - } - .attachment__text p:last-of-type { - display: inline-block; - } - - .attachment__image { - max-height: 300px; - } + .attachment__text p:last-of-type { + display: inline-block; + } - .attachment__author-name { - @include opacity(.6); - } + .attachment__image { + margin-bottom: 1em; + max-height: 300px; + max-width: 500px; + } - .attachment__title { - font-size: 14px; - font-weight: 600; - height: 22px; - line-height: 18px; - margin: 5px 0; - padding: 0; - } + .attachment__author-name { + @include opacity(.6); + } - .attachment-link-more { - display: inline-block; - font-size: .9em; - margin: 5px 0; - } + .attachment__title { + font-size: 14px; + font-weight: 600; + height: 22px; + line-height: 18px; + margin: 5px 0; + padding: 0; + } - .attachment__author-icon { - @include border-radius(50px); - height: 14px; - margin-right: 5px; - width: 14px; - } + .attachment-link-more { + display: inline-block; + font-size: .9em; + margin: 5px 0; + } - .attachment__image { - margin-bottom: 1em; - max-width: 100%; - } + .attachment__author-icon { + @include border-radius(50px); + height: 14px; + margin-right: 5px; + width: 14px; + } - .attachment__thumb-container { - float: right; - text-align: right; - width: 80px; + .attachment__thumb-container { + float: right; + text-align: right; + width: 80px; - img { - max-height: 75px; - max-width: 100%; + img { + max-height: 75px; + max-width: 100%; + } } - } - .attachment-fields { - width: 100%; + .attachment-fields { + width: 100%; - .attachment-field__caption { - font-weight: 600; - padding-top: .7em; - } + .attachment-field__caption { + font-weight: 600; + padding-top: .7em; + } - .attachment-field { - p { - margin: 0; + .attachment-field { + p { + margin: 0; + } } } } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 049e12055..d4c7242b4 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -26,6 +26,10 @@ } } + .member-select__container { + margin-top: 10px; + } + .user-popover { pointer-events: none; } @@ -51,11 +55,6 @@ } .post { - &.post--compact { - - - } - .post__dropdown { display: inline-block; height: 20px; diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 0a62c0f79..9e09c3f42 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -85,85 +85,103 @@ .post { &.post--compact { - padding: 5px .5em 0 80px; + &:not(.post--thread) { + padding: 5px .5em 0 70px; - .post__link { - margin: 4px 0 7px; - } + .post__link { + margin: 4px 0 7px; + } - .post__time { - font-size: .85em; - left: -70px; - position: absolute; - top: 2px; - } + .post__time { + font-size: .85em; + left: -70px; + position: absolute; + text-align: right; + top: 4px; + width: 60px; + } - span { - p { - &:last-child { - margin-bottom: .3em; + span { + p { + &:last-child { + margin-bottom: .3em; + } } } - } - .post__header { - float: left; - height: 18px; - padding-top: 3px; - - .col__name { - font-weight: bold; - margin-right: 2px; - padding-right: 10px; - position: relative; - z-index: 1; - - &:after { - content: ':'; - display: inline-block; - font-family: FontAwesome; - font-size: 19px; - position: absolute; - right: 3px; - text-rendering: auto; - top: -5px; + .post__header { + float: left; + height: 21px; + padding-top: 3px; + + .col__name { + font-weight: bold; + margin-right: 2px; + padding-right: 10px; + position: relative; + z-index: 1; + + &:after { + content: ':'; + display: inline-block; + font-family: FontAwesome; + font-size: 19px; + position: absolute; + right: 3px; + text-rendering: auto; + top: -5px; + } } - } - .col__reply { - top: 2px; + .col__reply { + top: 2px; + } } - } - &.other--root { - .post__body { - > div { - &:first-child { - min-height: 21px; + &.other--root { + .post__body { + > div { + &:first-child { + min-height: 21px; + } + } + } + + .post__link + .post__body { + clear: both; + } + + &.post--comment { + .post__header { + .col__reply { + top: 0; + } } } } - .post__link + .post__body { + .post-code { clear: both; } - &.post--comment { - .post__header { - .col__reply { - top: 0; - } - } + .post__body { + width: 100%; } - } - .post-code { - clear: both; + .post__content { + padding-right: 85px; + } } &.same--root { &.same--user { - padding-left: 80px; + padding-left: 70px; + + .post__header { + .col__reply { + top: 4px; + } + } .post__img { img { @@ -194,14 +212,6 @@ } } } - - .post__body { - width: 100%; - } - - .post__content { - padding-right: 85px; - } } &.same--root { diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 9e01594cf..e4e3370db 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -654,7 +654,7 @@ export function applyTheme(theme) { changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay', 'color:' + theme.centerChannelColor, 1); - changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1); + changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1); changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('.app__body #post-create', 'color:' + theme.centerChannelColor, 2); changeCss('.app__body .mentions--top, .app__body .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); |