Commit 9efcc42d authored by Asaad Mahmood's avatar Asaad Mahmood Committed by Corey Hulen

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
parent 1ff3de5d
......@@ -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'>
......
......@@ -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'
......
......@@ -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
......
......@@ -884,6 +884,10 @@
}
}
.emoticon {
vertical-align: top;
}
p {
font-size: 13.5px;
line-height: 1.6em;
......
......@@ -1549,6 +1549,12 @@
}
@media screen and (max-width: 480px) {
.post {
.img-div {
max-width: 100%;
}
}
.nav-tabs {
margin-top: 1em;
......
......@@ -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);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment