Fixes for RC1 (#6376)

* PLT-6505 - Fixing z-index for post control menu * PLT-6507 - Channel header icons not aligned * PLT-6508 - Options popover issue on android * PLT-6528 - Removing cross contamination on badge * PLT-6535 - Aligning content in SSO buttons * PLT-6509 - Aligning dropdown close icon
2017-05-10 18:48:22 +05:00
--- a/webapp/components/login/login_controller.jsx
+++ b/webapp/components/login/login_controller.jsx
@@ -493,12 +493,14 @@ export default class LoginController extends React.Component {
                    key='gitlab'
                    href={Client.getOAuthRoute() + '/gitlab/login' + this.props.location.search}
                >
-                    <span className='icon'/>
                    <span>
-                        <FormattedMessage
-                            id='login.gitlab'
-                            defaultMessage='GitLab'
-                        />
+                        <span className='icon'/>
+                        <span>
+                            <FormattedMessage
+                                id='login.gitlab'
+                                defaultMessage='GitLab'
+                            />
+                        </span>
                    </span>
                </a>
            );
@@ -511,12 +513,14 @@ export default class LoginController extends React.Component {
                    key='google'
                    href={Client.getOAuthRoute() + '/google/login' + this.props.location.search}
                >
-                    <span className='icon'/>
                    <span>
-                        <FormattedMessage
-                            id='login.google'
-                            defaultMessage='Google Apps'
-                        />
+                        <span className='icon'/>
+                        <span>
+                            <FormattedMessage
+                                id='login.google'
+                                defaultMessage='Google Apps'
+                            />
+                        </span>
                    </span>
                </a>
            );
@@ -529,12 +533,14 @@ export default class LoginController extends React.Component {
                    key='office365'
                    href={Client.getOAuthRoute() + '/office365/login' + this.props.location.search}
                >
-                    <span className='icon'/>
                    <span>
-                        <FormattedMessage
-                            id='login.office365'
-                            defaultMessage='Office 365'
-                        />
+                        <span className='icon'/>
+                        <span>
+                            <FormattedMessage
+                                id='login.office365'
+                                defaultMessage='Office 365'
+                            />
+                        </span>
                    </span>
                </a>
            );
@@ -547,9 +553,11 @@ export default class LoginController extends React.Component {
                    key='saml'
                    href={'/login/sso/saml' + this.props.location.search}
                >
-                    <span className='icon fa fa-lock fa--margin-top'/>
                    <span>
-                        {global.window.mm_config.SamlLoginButtonText}
+                        <span className='icon fa fa-lock fa--margin-top'/>
+                        <span>
+                            {global.window.mm_config.SamlLoginButtonText}
+                        </span>
                    </span>
                </a>
            );
--- a/webapp/components/signup/signup_controller.jsx
+++ b/webapp/components/signup/signup_controller.jsx
@@ -144,9 +144,8 @@ export default class SignupController extends React.Component {
                    key='email'
                    to={'/signup_email' + window.location.search}
                >
-
-                    <span className='icon fa fa-envelope'/>
                    <span>
+                        <span className='icon fa fa-envelope'/>
                        <FormattedMessage
                            id='signup.email'
                            defaultMessage='Email and Password'
@@ -163,12 +162,14 @@ export default class SignupController extends React.Component {
                    key='gitlab'
                    href={Client.getOAuthRoute() + '/gitlab/signup' + window.location.search}
                >
-                    <span className='icon'/>
                    <span>
-                        <FormattedMessage
-                            id='signup.gitlab'
-                            defaultMessage='GitLab Single-Sign-On'
-                        />
+                        <span className='icon'/>
+                        <span>
+                            <FormattedMessage
+                                id='signup.gitlab'
+                                defaultMessage='GitLab Single-Sign-On'
+                            />
+                        </span>
                    </span>
                </a>
            );
@@ -181,12 +182,14 @@ export default class SignupController extends React.Component {
                    key='google'
                    href={Client.getOAuthRoute() + '/google/signup' + window.location.search}
                >
-                    <span className='icon'/>
                    <span>
-                        <FormattedMessage
-                            id='signup.google'
-                            defaultMessage='Google Account'
-                        />
+                        <span className='icon'/>
+                        <span>
+                            <FormattedMessage
+                                id='signup.google'
+                                defaultMessage='Google Account'
+                            />
+                        </span>
                    </span>
                </a>
            );
@@ -199,12 +202,14 @@ export default class SignupController extends React.Component {
                    key='office365'
                    href={Client.getOAuthRoute() + '/office365/signup' + window.location.search}
                >
-                    <span className='icon'/>
                    <span>
-                        <FormattedMessage
-                            id='signup.office365'
-                            defaultMessage='Office 365'
-                        />
+                        <span className='icon'/>
+                        <span>
+                            <FormattedMessage
+                                id='signup.office365'
+                                defaultMessage='Office 365'
+                            />
+                        </span>
                    </span>
                </a>
           );
@@ -217,12 +222,14 @@ export default class SignupController extends React.Component {
                    key='ldap'
                    to={'/signup_ldap' + window.location.search}
                >
-                    <span className='icon fa fa-folder-open fa--margin-top'/>
                    <span>
-                        <FormattedMessage
-                            id='signup.ldap'
-                            defaultMessage='AD/LDAP Credentials'
-                        />
+                        <span className='icon fa fa-folder-open fa--margin-top'/>
+                        <span>
+                            <FormattedMessage
+                                id='signup.ldap'
+                                defaultMessage='AD/LDAP Credentials'
+                            />
+                        </span>
                    </span>
                </Link>
            );
@@ -242,9 +249,11 @@ export default class SignupController extends React.Component {
                    key='saml'
                    href={'/login/sso/saml' + window.location.search + query}
                >
-                    <span className='icon fa fa-lock fa--margin-top'/>
                    <span>
-                        {global.window.mm_config.SamlLoginButtonText}
+                        <span className='icon fa fa-lock fa--margin-top'/>
+                        <span>
+                            {global.window.mm_config.SamlLoginButtonText}
+                        </span>
                    </span>
                </a>
            );
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -41,6 +41,14 @@
            width: 43px;
            z-index: 5;

+            > span {
+                > svg {
+                    position: relative;
+                    top: 13px;
+                    vertical-align: top;
+                }
+            }
+
            .icon-bar {
                background: $white;
                width: 21px;
@@ -49,7 +57,8 @@
            .icon-search {
                font-size: 17px;
                position: relative;
-                top: -2px;
+                top: 11px;
+                vertical-align: top;
            }

            .icon--white {
@@ -93,7 +102,7 @@
            .description {
                color: $white;
                display: inline-block;
-                margin-right: .5em;
+                margin-right: 1em;

                &.info-popover {
                    @include background-size(100% 100%);
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -651,6 +651,12 @@
            visibility: visible;
        }

+        .post__header {
+            .col__reply {
+                z-index: 7;
+            }
+        }
+
        .post__body {
            background: transparent !important;
        }
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -8,7 +8,7 @@
    position: fixed;
    right: 0;
    width: 400px;
-    z-index: 6;
+    z-index: 8;

    &.webrtc {
        z-index: 5;
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,12 @@
@charset 'UTF-8';

@media screen and (max-width: 768px) {
+    .member-role .member-menu,
+    .member-drop .member-menu {
+        right: 0;
+        top: 30px;
+    }
+
    .post-code {
        word-wrap: normal;
    }
@@ -109,9 +115,10 @@
            font-weight: 200;
            height: 30px;
            left: 50%;
-            line-height: 27px;
+            line-height: 0;
            margin-left: -15px;
            opacity: 1;
+            padding-top: 13px;
            position: fixed;
            text-align: center;
            text-shadow: none;
@@ -856,6 +863,18 @@

            .navbar-brand {
                white-space: nowrap;
+
+                .heading {
+                    line-height: normal;
+                    position: relative;
+                    top: 11px;
+                    vertical-align: top;
+                }
+
+                .header-dropdown__icon {
+                    top: 18px;
+                    vertical-align: top;
+                }
            }

            .dropdown {
@@ -892,9 +911,10 @@
                    font-weight: 200;
                    height: 30px;
                    left: 50%;
-                    line-height: 27px;
+                    line-height: 0;
                    margin-left: -15px;
                    opacity: 1;
+                    padding-top: 13px;
                    position: fixed;
                    text-align: center;
                    text-shadow: none;
@@ -1734,7 +1754,7 @@
    }
 }

-@media screen and (max-width: 320px) and (max-height: 560px) {
+@media screen and (max-width: 380px) and (max-height: 580px) {
    #navbar {
        .navbar-default {
            .dropdown-menu {
@@ -1743,7 +1763,8 @@
                > li {
                    > a {
                        border: none;
-                        line-height: 28px;
+                        font-size: 13px;
+                        line-height: 27px;
                    }
                }
            }
@@ -1751,16 +1772,19 @@
    }
 }

+
+
 // on iOS, allow clicks within an input's label to actually propagate through to the input itself,
 // but still allow clicks to a elements to go trough
 // http://stackoverflow.com/a/34810294/6325807
 label {
-  span {
-    pointer-events: none;
-  }
-  span a {
-    pointer-events: all;
-  }
+    span {
+        pointer-events: none;
+    }
+
+    span a {
+        pointer-events: all;
+    }
 }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
--- a/webapp/sass/routes/_signup.scss
+++ b/webapp/sass/routes/_signup.scss
@@ -215,7 +215,9 @@
            display: inline-block;
            height: 18px;
            margin-right: 8px;
+            position: relative;
            text-align: center;
+            top: -1px;
            width: 18px;
        }

@@ -231,6 +233,18 @@
            text-align: left;
            width: 200px;

+            > span {
+                position: relative;
+                top: 11px;
+                vertical-align: top;
+
+                > span {
+                    display: inline-block;
+                    line-height: normal;
+                    vertical-align: top;
+                }
+            }
+
            &.gitlab {
                background: #554488;

@@ -238,10 +252,6 @@
                    background: darken(#554488, 10%);
                }

-                span {
-                    vertical-align: middle;
-                }
-
                .icon {
                    background-image: url('../images/gitlabLogo.png');
                }
@@ -254,10 +264,6 @@
                    background: darken(#dd4b39, 10%);
                }

-                span {
-                    vertical-align: middle;
-                }
-
                .icon {
                    background-image: url('../images/googleLogo.png');
                }
@@ -270,10 +276,6 @@
                    background: darken(#0079d6, 10%);
                }

-                span {
-                    vertical-align: middle;
-                }
-
                .icon {
                    background-image: url('../images/office365Logo.png');
                }
@@ -285,10 +287,6 @@
                &:hover {
                    background: darken(#3AA1CF, 10%);
                }
-
-                span {
-                    vertical-align: middle;
-                }
            }

            &.email {
@@ -297,10 +295,6 @@
                &:hover {
                    background: $primary-color--hover;
                }
-
-                span {
-                    vertical-align: middle;
-                }
            }

            &.saml {
@@ -309,10 +303,6 @@
                &:hover {
                    background: darken(#34a28b, 10%);
                }
-
-                span {
-                    vertical-align: middle;
-                }
            }

            &.btn--full {
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -558,13 +558,13 @@ export function applyTheme(theme) {

    if (theme.mentionBj) {
        changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'background:' + theme.mentionBj);
-        changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj + ' !important');
+        changeCss('.app__body .sidebar--left .badge', 'background:' + theme.mentionBj);
        changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'background:' + theme.mentionBj + ' !important');
    }

    if (theme.mentionColor) {
        changeCss('.app__body .sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + theme.mentionColor);
-        changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor + ' !important');
+        changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor);
        changeCss('.app__body .multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'color:' + theme.mentionColor + ' !important');
    }