diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-06-15 20:07:00 +0500 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2017-06-15 08:07:00 -0700 |
commit | 94fdba9a31c02b817afc5832a488194ecde23132 (patch) | |
tree | fb40b326bb9055a511a0737e48ebdd3898ab3f69 | |
parent | 528f2dc6c3b7c7a100d9022f4f50dfe337e92f0c (diff) | |
download | chat-94fdba9a31c02b817afc5832a488194ecde23132.tar.gz chat-94fdba9a31c02b817afc5832a488194ecde23132.tar.bz2 chat-94fdba9a31c02b817afc5832a488194ecde23132.zip |
Ui improvements (#6651)
* PLT-6691 - Centering emoji in post view
* PLT-6737 - FIxing on hover style for heade icons
* PLT-6768 - Fixing error on profile picture
* PLT-6792 - Fixing link preview image not resizing
* PLT-6793 - User popover position on mobile
-rw-r--r-- | webapp/components/form_error.jsx | 10 | ||||
-rw-r--r-- | webapp/components/setting_picture.jsx | 10 | ||||
-rw-r--r-- | webapp/components/user_profile.jsx | 7 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 4 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 6 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 6 |
6 files changed, 37 insertions, 6 deletions
diff --git a/webapp/components/form_error.jsx b/webapp/components/form_error.jsx index b3ac3fef0..e8c3d1e98 100644 --- a/webapp/components/form_error.jsx +++ b/webapp/components/form_error.jsx @@ -43,6 +43,16 @@ export default class FormError extends React.Component { return null; } + if (this.props.type === 'modal') { + return ( + <div className='form-group'> + <label className='col-sm-12 has-error'> + {message} + </label> + </div> + ); + } + if (this.props.type === 'backstage') { return ( <div className='pull-left has-error'> diff --git a/webapp/components/setting_picture.jsx b/webapp/components/setting_picture.jsx index 93d41a312..2d389a902 100644 --- a/webapp/components/setting_picture.jsx +++ b/webapp/components/setting_picture.jsx @@ -102,14 +102,14 @@ export default class SettingPicture extends Component { } return ( - <ul className='section-max'> + <ul className='section-max form-horizontal'> <li className='col-xs-12 section-title'>{this.props.title}</li> <li className='col-xs-offset-3 col-xs-8'> <ul className='setting-list'> <li className='setting-list-item'> {img} </li> - <li className='setting-list-item'> + <li className='setting-list-item padding-top x2'> <FormattedMessage id='setting_picture.help' defaultMessage='Upload a profile picture in BMP, JPG, JPEG or PNG format, at least {width}px in width and {height}px height.' @@ -120,7 +120,11 @@ export default class SettingPicture extends Component { /> </li> <li className='setting-list-item'> - <FormError errors={[this.props.clientError, this.props.serverError]}/> + <hr/> + <FormError + errors={[this.props.clientError, this.props.serverError]} + type={'modal'} + /> <span className='btn btn-sm btn-primary btn-file sel-btn'> <FormattedMessage id='setting_picture.select' diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx index 5fb01b725..b3290d1de 100644 --- a/webapp/components/user_profile.jsx +++ b/webapp/components/user_profile.jsx @@ -56,6 +56,11 @@ export default class UserProfile extends React.Component { render() { let name = '...'; let profileImg = ''; + let popoverPosition = 'right'; + if (Utils.isMobile()) { + popoverPosition = 'bottom'; + } + if (this.props.user) { name = Utils.displayUsername(this.props.user.id); profileImg = Client.getUsersRoute() + '/' + this.props.user.id + '/image?time=' + this.props.user.last_picture_update; @@ -73,7 +78,7 @@ export default class UserProfile extends React.Component { <OverlayTrigger ref='overlay' trigger='click' - placement='right' + placement={popoverPosition} rootClose={true} overlay={ <ProfilePopover diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 73253f4be..5dc524caa 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -884,6 +884,10 @@ } } + .emoticon { + vertical-align: top; + } + p { font-size: 13.5px; line-height: 1.6em; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index ee1532933..24db3821f 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1549,6 +1549,12 @@ } @media screen and (max-width: 480px) { + .post { + .img-div { + max-width: 100%; + } + } + .nav-tabs { margin-top: 1em; diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 015084e7b..e7f13c4a0 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -694,10 +694,12 @@ export function applyTheme(theme) { } if (theme.linkColor) { - changeCss('.app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover, .app__body .channel-header #member_popover:hover', 'color:' + theme.linkColor); + changeCss('.app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor); changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5)); changeCss('.app__body .channel-header__links .icon:hover, .app__body .channel-header__links > a.active .icon, .app__body .post .flag-icon__container.visible, .app__body .post .reacticon__container, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor); - changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply, .app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + theme.linkColor); + changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor); + changeCss('.app__body .channel-header #member_popover:hover', 'color:' + changeOpacity(theme.linkColor, 0.6)); + changeCss('.app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + changeOpacity(theme.linkColor, 0.6)); changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1)); changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4)); changeCss('.app__body .post-reaction.post-reaction--current-user', 'color:' + theme.linkColor); |