From fd4bfee6ea393b6b707919b5da805a6a46e72d1a Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Mon, 12 Oct 2015 19:22:05 +0500
Subject: Multiple UI Improvements

---
 web/react/components/channel_loader.jsx       | 6 ------
 web/react/components/settings_sidebar.jsx     | 2 +-
 web/react/components/view_image.jsx           | 3 ++-
 web/react/utils/constants.jsx                 | 2 +-
 web/react/utils/utils.jsx                     | 7 +++++--
 web/sass-files/sass/partials/_base.scss       | 5 +++++
 web/sass-files/sass/partials/_markdown.scss   | 9 ++-------
 web/sass-files/sass/partials/_responsive.scss | 2 +-
 web/templates/channel.html                    | 2 +-
 9 files changed, 18 insertions(+), 20 deletions(-)

(limited to 'web')

diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx
index d16069725..d0d6ab5e2 100644
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -104,12 +104,6 @@ export default class ChannelLoader extends React.Component {
             }
         });
 
-        /* Setup modal events */
-        $('.modal').on('show.bs.modal', function onShow() {
-            $('.modal-body').css('overflow-y', 'auto');
-            $('.modal-body').css('max-height', $(window).height() * 0.7);
-        });
-
         /* Prevent backspace from navigating back a page */
         $(window).on('keydown.preventBackspace', (e) => {
             if (e.which === 8 && !$(e.target).is('input, textarea')) {
diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx
index b5d2132d7..66568e1c8 100644
--- a/web/react/components/settings_sidebar.jsx
+++ b/web/react/components/settings_sidebar.jsx
@@ -10,7 +10,7 @@ export default class SettingsSidebar extends React.Component {
     handleClick(tab, e) {
         e.preventDefault();
         this.props.updateTab(tab.name);
-        $('.settings-modal').addClass('display--content');
+        $(e.target).closest('.settings-modal').addClass('display--content');
     }
     render() {
         let tabList = this.props.tabs.map(function makeTab(tab) {
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index 8ef68dd0a..c5f0abc12 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -195,6 +195,7 @@ export default class ViewImageModal extends React.Component {
                         target='_blank'
                     >
                         <img
+                            style={{maxHeight: this.state.imgHeight}}
                             ref='image'
                             src={this.getPreviewImagePath(filename)}
                         />
@@ -210,6 +211,7 @@ export default class ViewImageModal extends React.Component {
 
                 content = (
                     <video
+                        style={{maxHeight: this.state.imgHeight}}
                         ref='video'
                         data-setup='{}'
                         controls='controls'
@@ -334,7 +336,6 @@ export default class ViewImageModal extends React.Component {
                 >
                     <div
                         className={'image-wrapper ' + bgClass}
-                        style={{maxHeight: this.state.imgHeight}}
                         onMouseEnter={this.onMouseEnterImage}
                         onMouseLeave={this.onMouseLeaveImage}
                         onClick={(e) => e.stopPropagation()}
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index affc49196..e3cbfccde 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -201,7 +201,7 @@ module.exports = {
             centerChannelBg: '#1F1F1F',
             centerChannelColor: '#DDDDDD',
             newMessageSeparator: '#CC992D',
-            linkColor: '#0177e7',
+            linkColor: '#0D93FF',
             buttonBg: '#0177e7',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#784098',
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index f9166063e..6a5188974 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -423,7 +423,10 @@ export function applyTheme(theme) {
 
     if (theme.sidebarTextActiveColor) {
         changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2);
-        changeCss('.sidebar--left .nav-pills__container li.active a .status .online--icon', 'fill:' + theme.sidebarTextActiveColor, 2);
+    }
+
+    if (theme.sidebarTextActiveBg === theme.onlineIndicator) {
+        changeCss('.sidebar--left .nav-pills__container li.active a .status .online--icon', 'fill:' + theme.sidebarTextActiveColor, 1);
     }
 
     if (theme.sidebarHeaderBg) {
@@ -497,7 +500,7 @@ export function applyTheme(theme) {
         changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea, .post-right__container .post.post--root hr, .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
-        changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
+        changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, pre', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-channel-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
         changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 18462d92a..470db16dc 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -34,6 +34,11 @@ body {
   }
 }
 
+img {
+  max-width: 100%;
+  height: auto;
+}
+
 .input-group-addon {
   background: transparent;
 }
diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss
index 122586354..1aa942ad0 100644
--- a/web/sass-files/sass/partials/_markdown.scss
+++ b/web/sass-files/sass/partials/_markdown.scss
@@ -53,15 +53,10 @@ blockquote {
 }
 pre {
 	border: none;
-	background-color: #f7f7f7;
 	margin: 5px 0;
-	.current--user & {
-		background: #fff;
-	}
-	code {
-		color: #c7254e;
-	}
+	color: inherit;
 }
 code {
 	background: #fff;
+	color: inherit;
 }
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 82ec1811a..d9a99d4a4 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -667,7 +667,7 @@
         .modal-image {
             .image-wrapper {
                 font-size: 12px;
-                max-width: 280px;
+                min-width: 280px;
                 .modal-close {
                     @include opacity(1);
                 }
diff --git a/web/templates/channel.html b/web/templates/channel.html
index 2af94e415..13fd80d75 100644
--- a/web/templates/channel.html
+++ b/web/templates/channel.html
@@ -54,7 +54,7 @@
 <script>
   window.setup_channel_page({{ .Props }});
   $('body').tooltip( {selector: '[data-toggle=tooltip]'} );
-  $('.modal-body').css('max-height', $(window).height() * 0.7);
+  $('.modal-body').css('max-height', $(window).height() - 150);
   $('.modal-body').perfectScrollbar();
 </script>
 </body>
-- 
cgit v1.2.3-1-g7c22