Ui improvements (#5755)

* PLT-5816 - Flagged posts tooltip fix

* PLT-5766 - Link previews appearing outside the box

* PLT-5795 - Fixing alignment user list in channel

* PLT-5818 - Reset password error not aligned

* PLT-5837 - Adjusting image preview max height

* PLT-5778 - Updating word break for paragraphs

* PLT-5848 - Updating label for file error

* PLT-5846 - Markdown tables extra border on mobile

* PLT-5662 - Pinned post UI improvement

* Fixing eslint error

* Updating tooltip eslint issue

* PLT-5832 - Removing error styling on labels

webapp/components/admin_console/reset_password_modal.jsx

@@ -61,7 +61,7 @@ class ResetPasswordModal extends React.Component {
 
         if (this.state.serverError) {
             urlClass += ' has-error';
-            serverError = <div className='form-group has-error'><p className='input__help error'>{this.state.serverError}</p></div>;
+            serverError = <div className='has-error'><p className='input__help error'>{this.state.serverError}</p></div>;
         }
 
         let title;

webapp/components/audio_video_preview.jsx

@@ -94,7 +94,6 @@ export default class AudioVideoPreview extends React.Component {
             <video
                 key={this.props.fileInfo.id}
                 ref='video'
-                style={{maxHeight: this.props.maxHeight}}
                 data-setup='{}'
                 controls='controls'
                 width={width}
@@ -111,6 +110,5 @@ export default class AudioVideoPreview extends React.Component {
 
 AudioVideoPreview.propTypes = {
     fileInfo: React.PropTypes.object.isRequired,
-    fileUrl: React.PropTypes.string.isRequired,
-    maxHeight: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]).isRequired
+    fileUrl: React.PropTypes.string.isRequired
 };

webapp/components/channel_header.jsx

@@ -241,7 +241,10 @@ export default class ChannelHeader extends React.Component {
         );
 
         const flaggedTooltip = (
-            <Tooltip id='flaggedTooltip'>
+            <Tooltip
+                id='flaggedTooltip'
+                className='text-nowrap'
+            >
                 <FormattedMessage
                     id='channel_header.flagged'
                     defaultMessage='Flagged Posts'
@@ -676,19 +679,27 @@ export default class ChannelHeader extends React.Component {
             headerText = channel.header;
         }
 
-        const toggleFavoriteTooltip = (
-            <Tooltip id='favoriteTooltip'>
-                {this.state.isFavorite ?
+        let toggleFavoriteTooltip;
+        if (this.state.isFavorite) {
+            toggleFavoriteTooltip = (
+                <Tooltip id='favoriteTooltip'>
                     <FormattedMessage
                         id='channelHeader.removeFromFavorites'
                         defaultMessage='Remove from Favorites'
-                    /> :
+                    />
+                </Tooltip>
+            );
+        } else {
+            toggleFavoriteTooltip = (
+                <Tooltip id='favoriteTooltip'>
                     <FormattedMessage
                         id='channelHeader.addToFavorites'
                         defaultMessage='Add to Favorites'
-                    />}
-            </Tooltip>
-        );
+                    />
+                </Tooltip>
+            );
+        }
+
         const toggleFavorite = (
             <OverlayTrigger
                 delayShow={Constants.OVERLAY_TIME_DELAY}

webapp/components/post_view/components/post_attachment_opengraph.jsx

@@ -32,7 +32,6 @@ export default class PostAttachmentOpenGraph extends React.Component {
         this.onImageLoad = this.onImageLoad.bind(this);
         this.onImageError = this.onImageError.bind(this);
         this.truncateText = this.truncateText.bind(this);
-        this.setImageWidth = this.setImageWidth.bind(this);
     }
 
     IMAGE_LOADED = {
@@ -75,20 +74,16 @@ export default class PostAttachmentOpenGraph extends React.Component {
 
     componentDidMount() {
         OpenGraphStore.addUrlDataChangeListener(this.onOpenGraphMetadataChange);
-        this.setImageWidth();
-        window.addEventListener('resize', this.setImageWidth);
     }
 
     componentDidUpdate() {
         if (this.props.childComponentDidUpdateFunction) {
             this.props.childComponentDidUpdateFunction();
         }
-        this.setImageWidth();
     }
 
     componentWillUnmount() {
         OpenGraphStore.removeUrlDataChangeListener(this.onOpenGraphMetadataChange);
-        window.removeEventListener('resize', this.setImageWidth);
     }
 
     onOpenGraphMetadataChange(url) {
@@ -163,9 +158,6 @@ export default class PostAttachmentOpenGraph extends React.Component {
         return (
             <div
                 className='attachment__image__container--openraph'
-                style={{
-                    width: (this.imageDimentions.height * this.imageRatio) + this.smallImageContainerLeftPadding
-                }} // Initially set the width accordinly to max image heigh, ie 80px. Later on it would be modified according to actul height of image.
                 ref={(div) => {
                     this.smallImageContainer = div;
                 }}
@@ -216,20 +208,6 @@ export default class PostAttachmentOpenGraph extends React.Component {
         return element;
     }
 
-    setImageWidth() {
-        if (
-            this.state.imageLoaded === this.IMAGE_LOADED.YES &&
-            this.smallImageContainer &&
-            this.smallImageElement
-        ) {
-            this.smallImageContainer.style.width = (
-                (this.smallImageElement.offsetHeight * this.imageRatio) +
-                this.smallImageContainerLeftPadding +
-                'px'
-            );
-        }
-    }
-
     truncateText(text, maxLength = this.textMaxLenght, ellipsis = this.textEllipsis) {
         if (text.length > maxLength) {
             return text.substring(0, maxLength - ellipsis.length) + ellipsis;

webapp/components/search_bar.jsx

@@ -216,7 +216,10 @@ export default class SearchBar extends React.Component {
         );
 
         const flaggedTooltip = (
-            <Tooltip id='flaggedTooltip'>
+            <Tooltip
+                id='flaggedTooltip'
+                className='text-nowrap'
+            >
                 <FormattedMessage
                     id='channel_header.flagged'
                     defaultMessage='Flagged Posts'

webapp/components/view_image.jsx

@@ -185,7 +185,6 @@ export default class ViewImageModal extends React.Component {
                     <ImagePreview
                         fileInfo={fileInfo}
                         fileUrl={fileUrl}
-                        maxHeight={this.state.imgHeight}
                     />
                 );
             } else if (fileType === 'video' || fileType === 'audio') {
@@ -193,7 +192,6 @@ export default class ViewImageModal extends React.Component {
                     <AudioVideoPreview
                         fileInfo={fileInfo}
                         fileUrl={fileUrl}
-                        maxHeight={this.state.imgHeight}
                     />
                 );
             } else if (PDFPreview.supports(fileInfo)) {
@@ -344,7 +342,7 @@ LoadingImagePreview.propTypes = {
     loading: React.PropTypes.string
 };
 
-function ImagePreview({fileInfo, fileUrl, maxHeight}) {
+function ImagePreview({fileInfo, fileUrl}) {
     let previewUrl;
     if (fileInfo.has_preview_image) {
         previewUrl = FileStore.getFilePreviewUrl(fileInfo.id);
@@ -359,16 +357,12 @@ function ImagePreview({fileInfo, fileUrl, maxHeight}) {
             rel='noopener noreferrer'
             download={true}
         >
-            <img
-                style={{maxHeight}}
-                src={previewUrl}
-            />
+            <img src={previewUrl}/>
         </a>
     );
 }
 
 ImagePreview.propTypes = {
     fileInfo: React.PropTypes.object.isRequired,
-    fileUrl: React.PropTypes.string.isRequired,
-    maxHeight: React.PropTypes.number.isRequired
+    fileUrl: React.PropTypes.string.isRequired
 };

webapp/sass/components/_modal.scss

@@ -345,7 +345,7 @@
                 }
 
                 img {
-                    max-height: 100%;
+                    max-height: calc(100vh - 200px);
                     max-width: 100%;
                 }
 

webapp/sass/components/_popover.scss

@@ -209,6 +209,15 @@
         .more-modal__row {
             min-height: inherit;
         }
+
+        .more-modal__details {
+            line-height: 32px;
+        }
+
+        .more-modal__actions {
+            line-height: 31px;
+            margin: 0;
+        }
     }
 
     .popover-content {

webapp/sass/components/_tooltip.scss

@@ -7,6 +7,12 @@
         padding: 3px 10px 4px;
         word-break: break-word;
     }
+
+    &.text-nowrap {
+        .tooltip-inner {
+            white-space: nowrap;
+        }
+    }
 }
 
 #webrtcTooltip {

webapp/sass/layout/_forms.scss

@@ -62,7 +62,6 @@
 
 .has-error {
     .help-block,
-    .control-label,
     .radio,
     .checkbox,
     .radio-inline,
@@ -70,6 +69,10 @@
         color: $red;
     }
 
+    .control-label {
+        color: inherit;
+    }
+
     &.radio,
     &.checkbox,
     &.radio-inline,

webapp/sass/layout/_headers.scss

@@ -9,10 +9,10 @@
 
     .member-popover__trigger,
     .pinned-posts-button {
-        display: inline-block;
-        min-width: 30px;
         cursor: pointer;
-        margin-left: 10px;
+        display: inline-block;
+        margin-left: 7px;
+        min-width: 30px;
         text-align: center;
         white-space: nowrap;
 
@@ -65,7 +65,7 @@
         }
 
         &:last-child {
-            padding-right: 8px;
+            padding-right: 6px;
             width: 8.9%;
         }
     }

webapp/sass/layout/_post.scss

@@ -359,6 +359,10 @@
 }
 
 .post-create__container {
+    label {
+        font-weight: normal;
+    }
+
     form {
         margin: 0 auto;
         padding: .5em 15px 0;
@@ -523,6 +527,7 @@
             .col__reply {
                 min-width: 0;
             }
+
             .dropdown {
                 margin-right: 0;
             }
@@ -749,6 +754,7 @@
         line-height: 1.6em;
         margin: 0;
         white-space: pre-wrap;
+        word-break: break-word;
     }
 
     .post__header--info {
@@ -786,7 +792,7 @@
 
             .flag-icon__container {
                 left: 36px;
-                margin-left: 5px;
+                margin-left: 7px;
                 position: absolute;
                 top: 8px;
             }
@@ -1358,6 +1364,8 @@
 
 .post__pinned-badge {
     margin-left: 7px;
+    position: relative;
+    top: -1px;
 }
 
 .permalink-text {

webapp/sass/layout/_webhooks.scss

@@ -41,6 +41,7 @@
         &.attachment--opengraph {
             max-width: 800px;
         }
+
         .attachment__content {
             border-radius: 4px;
             border-style: solid;
@@ -71,16 +72,18 @@
             &.attachment__container--danger {
                 border-left-color: #e40303;
             }
+
             &.attachment__container--opengraph {
                 display: table;
-                table-layout: fixed;
-                width: 100%;
                 margin: 0;
                 padding-bottom: 13px;
+                width: 100%;
+
                 div {
                     margin: 0;
                 }
             }
+
             .sitename {
                 color: #A3A3A3;
             }
@@ -89,8 +92,8 @@
         .attachment__body__wrap {
             &.attachment__body__wrap--opengraph {
                 display: table-cell;
-                width: 100%;
                 vertical-align: top;
+                width: 100%;
             }
         }
 
@@ -104,6 +107,7 @@
             &.attachment__body--no_thumb {
                 width: 100%;
             }
+
             &.attachment__body--opengraph {
                 float: none;
                 padding-right: 0;
@@ -142,6 +146,7 @@
                     margin-top: 10px;
                     max-height: 200px;
                     max-width: 400px;
+                    width: 100%;
 
                     &.loading {
                         height: 150px;
@@ -164,16 +169,17 @@
 
             &.has-link {
                 color: #2f81b7;
-                text-overflow: ellipsis;
                 overflow: hidden;
+                text-overflow: ellipsis;
                 white-space: nowrap;
             }
 
             &.attachment__title--opengraph {
                 height: auto;
                 word-wrap: break-word;
+
                 &.is-url {
-                    word-break: break-all
+                    word-break: break-all;
                 }
             }
         }

webapp/sass/responsive/_mobile.scss

@@ -1,6 +1,10 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .table-responsive {
+        border: none;
+    }
+
     .multi-select__container {
         .btn {
             display: block;
@@ -1336,7 +1340,7 @@
 
                 a {
                     border-bottom: 1px solid;
-                    line-height: 50px;
+                    line-height: 45px;
                     position: relative;
                     text-align: center;
                 }