Merge 53318a4 into 89dd0ee

mattermost · Feb 28, 2017 · 207159a · 207159a
2 parents 89dd0ee + 53318a4
commit 207159a
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 16 deletions.
diff --git a/webapp/components/multiselect/multiselect.jsx b/webapp/components/multiselect/multiselect.jsx
@@ -198,11 +198,12 @@ export default class MultiSelect extends React.Component {
                         </button>
                     </div>
                     <div className='multi-select__help'>
-                        <FormattedMessage
-                            id='multiselect.instructions'
-                            defaultMessage='Use up/down arrows to navigate and enter to select'
-                        />
-                        <br/>
+                        <div className='hidden-xs'>
+                            <FormattedMessage
+                                id='multiselect.instructions'
+                                defaultMessage='Use up/down arrows to navigate and enter to select'
+                            />
+                        </div>
                         {numRemainingText}
                         {this.props.noteText}
                     </div>

diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
@@ -546,7 +546,7 @@ export default class Sidebar extends React.Component {
             icon = <div className='status'><i className='fa fa-lock'/></div>;
         } else if (channel.type === Constants.GM_CHANNEL) {
             displayName = ChannelUtils.buildGroupChannelName(channel.id);
-            icon = <div className='status'>{UserStore.getProfileListInChannel(channel.id, true).length}</div>;
+            icon = <div className='status status--group'>{UserStore.getProfileListInChannel(channel.id, true).length}</div>;
         } else {
             // set up status icon for direct message channels (status is null for other channel types)
             icon = (

diff --git a/webapp/components/suggestion/switch_channel_provider.jsx b/webapp/components/suggestion/switch_channel_provider.jsx
@@ -33,7 +33,7 @@ class SwitchChannelSuggestion extends Suggestion {
             icon = <div className='status'><i className='fa fa-lock'/></div>;
         } else if (item.type === Constants.GM_CHANNEL) {
             displayName = buildGroupChannelName(item.id);
-            icon = <div className='status'>{UserStore.getProfileListInChannel(item.id, true).length}</div>;
+            icon = <div className='status status--group'>{UserStore.getProfileListInChannel(item.id, true).length}</div>;
         } else {
             icon = (
                 <div className='pull-left'>

diff --git a/webapp/sass/components/_multi-select.scss b/webapp/sass/components/_multi-select.scss
@@ -25,5 +25,6 @@
 }
 
 .multi-select__help {
+    @include opacity(.6);
     padding: 10px 15px 0;
-}
+}
diff --git a/webapp/sass/components/_status-icon.scss b/webapp/sass/components/_status-icon.scss
@@ -36,6 +36,28 @@
     top: 1px;
     width: 12px;
 
+    &.status--group {
+        border-radius: 50px;
+        font-size: 11px;
+        font-weight: 600;
+        height: 16px;
+        left: 1px;
+        line-height: 15px;
+        margin-left: -3px;
+        text-align: center;
+        top: -1px;
+        width: 16px;
+
+        .mentions__name & {
+            height: 20px;
+            left: 0;
+            line-height: 20px;
+            margin-left: 0;
+            text-align: center;
+            width: 20px;
+        }
+    }
+
     svg {
         max-height: 14px;
     }

diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
@@ -121,7 +121,7 @@
 
         &.dropdown {
             float: left;
-            max-width: 100%;
+            max-width: 90%;
             padding-right: 1em;
 
             .header-dropdown__icon {
@@ -182,7 +182,6 @@
     }
 
     .channel-intro-profile {
-        margin-left: 63px;
         margin-top: 5px;
 
         .user-popover {
@@ -195,6 +194,11 @@
     .channel-intro-img {
         float: left;
 
+        .status-wrapper {
+            height: 50px;
+            margin: 0 10px 10px 0;
+        }
+
         img {
             @include border-radius(100px);
         }

diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
@@ -2,14 +2,9 @@
 
 @media screen and (max-width: 768px) {
     .multi-select__container {
-        .Select {
-            display: block;
-            margin-bottom: 1em;
-            padding: 0;
-        }
-
         .btn {
             display: block;
+            min-width: 50px;
         }
     }
 

diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
@@ -477,6 +477,7 @@ export function applyTheme(theme) {
         changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6));
         changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
         changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText);
+        changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3));
         changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
         changeCss('@media(max-width: 768px){.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + changeOpacity(theme.sidebarText, 0.6));
     }
@@ -568,6 +569,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.centerChannelColor) {
+        changeCss('.app__body .mentions__name .status.status--group', 'background:' + changeOpacity(theme.centerChannelColor, 0.12));
         changeCss('.app__body .post-list__arrows, .app__body .post .flag-icon__container', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3));
         changeCss('.app__body .modal .status .offline--icon, .app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon', 'fill:' + theme.centerChannelColor);
         changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));