MM-12150 - Updating x icon and plugins (#1841)

mattermost · Oct 5, 2018 · 2d36024 · 2d36024
1 parent 5cde6ac
commit 2d36024
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 157 deletions.
diff --git a/components/channel_header/channel_header.jsx b/components/channel_header/channel_header.jsx
@@ -447,7 +447,7 @@ export default class ChannelHeader extends React.Component {
  >
  <div
  id='webrtc-btn'
- className={'webrtc__button ' + circleClass}
+ className={'webrtc__button hidden-xs ' + circleClass}
  >
  {'WebRTC'}
  </div>

diff --git a/components/navbar/navbar.jsx b/components/navbar/navbar.jsx
@@ -306,7 +306,7 @@ export default class Navbar extends React.Component {
  return (
  <li
  role='presentation'
- className='webrtc__option'
+ className='webrtc__option visible-xs-block'
  >
  <button
  role='menuitem'
@@ -334,7 +334,7 @@ export default class Navbar extends React.Component {
  }
 
  return (
- <div className={'pull-right description navbar-right__icon webrtc__button ' + circleClass}>
+ <div className={'pull-right description navbar-right__icon webrtc__button hidden-xs ' + circleClass}>
  <a onClick={this.initWebrtc}>
  {'WebRTC'}
  </a>
@@ -732,10 +732,12 @@ export default class Navbar extends React.Component {
  {deleteChannelOption}
  {leaveChannelOption}
  {toggleFavoriteOption}
- <MobileChannelHeaderPlug
- channel={channel}
- isDropdown={true}
- />
+ <li className='dropdown-item__plugin'>
+ <MobileChannelHeaderPlug
+ channel={channel}
+ isDropdown={false}
+ />
+ </li>
  <div className='close visible-xs-block'>
  {'×'}
  </div>
@@ -973,10 +975,6 @@ export default class Navbar extends React.Component {
  isReadOnly={this.props.isReadOnly}
  />
  {searchButton}
- <MobileChannelHeaderPlug
- channel={channel}
- isDropdown={false}
- />
  {this.createRhsButton(currentId)}
  </div>
  </div>

diff --git a/plugins/mobile_channel_header_plug/mobile_channel_header_plug.jsx b/plugins/mobile_channel_header_plug/mobile_channel_header_plug.jsx
@@ -29,7 +29,7 @@ export default class MobileChannelHeaderPlug extends React.PureComponent {
  createButton(plug) {
  return (
  <button
- className='navbar-toggle navbar-right__icon pull-right'
+ className='navbar-toggle navbar-right__icon'
  onClick={() => this.fireAction(plug)}
  >
  <span className='icon navbar-plugin-button'>

diff --git a/sass/components/_dropdown.scss b/sass/components/_dropdown.scss
@@ -8,6 +8,15 @@
  z-index: 2500;
  }
 
+ .dropdown-item__plugin {
+ display: flex;
+ justify-content: center;
+
+ &:empty {
+ display: none;
+ }
+ }
+
  .fa {
  @include opacity(.6);
  margin-right: 5px;

diff --git a/sass/layout/_navigation.scss b/sass/layout/_navigation.scss
@@ -36,6 +36,19 @@
  display: flex;
  }
 
+ .browser--ie & {
+ .navbar-default {
+ .navbar-brand {
+ overflow: visible;
+ padding: 1px;
+
+ .heading {
+ max-width: 100px;
+ }
+ }
+ }
+ }
+
  .navbar-default {
  background: $primary-color;
  border: none;

diff --git a/sass/responsive/_mobile.scss b/sass/responsive/_mobile.scss
@@ -1,6 +1,13 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+ .webrtc__option {
+ .disable-links {
+ @include opacity(.5);
+ pointer-events: none;
+ }
+ }
+
  .textarea-wrapper {
  .help__text {
  display: none;
@@ -1694,19 +1701,6 @@
 }
 
 @media screen and (max-width: 480px) {
- .webrtc__button {
- display: none !important;
- }
-
- .webrtc__option {
- display: block;
-
- .disable-links {
- @include opacity(.5);
- pointer-events: none;
- }
- }
-
  #user-profile-popover {
  left: 50px !important;
  }