MM-12996/MM-13229 - Updating modals on mobile and fixing plugin butto…

…n on mobile (#2086) * MM-12996 - Updating modals on mobile * Updating snapshots * Updating test * Updating test * Updating tests * Update unit tests for MobileChannelHeaderPlug
mattermost · Nov 29, 2018 · f057e0a · f057e0a
1 parent dbe7bbe
commit f057e0a
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 38 deletions.
diff --git a/plugins/mobile_channel_header_plug/__snapshots__/mobile_channel_header_plug.test.jsx.snap b/plugins/mobile_channel_header_plug/__snapshots__/mobile_channel_header_plug.test.jsx.snap
@@ -40,18 +40,22 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
  isDropdown={false}
  theme={Object {}}
 >
- <button
- className="navbar-toggle navbar-right__icon"
- onClick={[Function]}
+ <li
+ className="flex-parent--center"
  >
- <span
- className="icon navbar-plugin-button"
+ <button
+ className="navbar-toggle navbar-right__icon"
+ onClick={[Function]}
  >
- <i
- className="fa fa-anchor"
- />
- </span>
- </button>
+ <span
+ className="icon navbar-plugin-button"
+ >
+ <i
+ className="fa fa-anchor"
+ />
+ </span>
+ </button>
+ </li>
 </MobileChannelHeaderPlug>
 `;
 
@@ -75,18 +79,22 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
  isDropdown={true}
  theme={Object {}}
 >
- <button
- className="navbar-toggle navbar-right__icon"
- onClick={[Function]}
+ <li
+ className="flex-parent--center"
  >
- <span
- className="icon navbar-plugin-button"
+ <button
+ className="navbar-toggle navbar-right__icon"
+ onClick={[Function]}
  >
- <i
- className="fa fa-anchor"
- />
- </span>
- </button>
+ <span
+ className="icon navbar-plugin-button"
+ >
+ <i
+ className="fa fa-anchor"
+ />
+ </span>
+ </button>
+ </li>
 </MobileChannelHeaderPlug>
 `;
 

diff --git a/plugins/mobile_channel_header_plug/mobile_channel_header_plug.jsx b/plugins/mobile_channel_header_plug/mobile_channel_header_plug.jsx
@@ -28,14 +28,16 @@ export default class MobileChannelHeaderPlug extends React.PureComponent {
 
  createButton(plug) {
  return (
- <button
- className='navbar-toggle navbar-right__icon'
- onClick={() => this.fireAction(plug)}
- >
- <span className='icon navbar-plugin-button'>
- {plug.icon}
- </span>
- </button>
+ <li className='flex-parent--center'>
+ <button
+ className='navbar-toggle navbar-right__icon'
+ onClick={() => this.fireAction(plug)}
+ >
+ <span className='icon navbar-plugin-button'>
+ {plug.icon}
+ </span>
+ </button>
+ </li>
  );
  }
 

diff --git a/plugins/mobile_channel_header_plug/mobile_channel_header_plug.test.jsx b/plugins/mobile_channel_header_plug/mobile_channel_header_plug.test.jsx
@@ -26,6 +26,9 @@ describe('plugins/MobileChannelHeaderPlug', () => {
  />
  );
  expect(wrapper).toMatchSnapshot();
+
+ // Render nothing
+ expect(wrapper.find('li').exists()).toBe(false);
  });
 
  test('should match snapshot with one extended component', () => {
@@ -40,10 +43,11 @@ describe('plugins/MobileChannelHeaderPlug', () => {
  );
  expect(wrapper).toMatchSnapshot();
 
- wrapper.instance().fireAction = jest.fn();
- expect(wrapper.find('button').exists()).toEqual(true);
- expect(wrapper.find('li').exists()).toEqual(false);
+ // Render a single list item containing a button
+ expect(wrapper.find('li')).toHaveLength(1);
+ expect(wrapper.find('button')).toHaveLength(1);
 
+ wrapper.instance().fireAction = jest.fn();
  wrapper.find('button').first().simulate('click');
  expect(wrapper.instance().fireAction).toHaveBeenCalledTimes(1);
  expect(wrapper.instance().fireAction).toBeCalledWith(testPlug);
@@ -60,6 +64,9 @@ describe('plugins/MobileChannelHeaderPlug', () => {
  />
  );
  expect(wrapper).toMatchSnapshot();
+
+ // Render nothing
+ expect(wrapper.find('li').exists()).toBe(false);
  });
 
  test('should match snapshot with no extended component, in dropdown', () => {
@@ -73,6 +80,9 @@ describe('plugins/MobileChannelHeaderPlug', () => {
  />
  );
  expect(wrapper).toMatchSnapshot();
+
+ // Render nothing
+ expect(wrapper.find('li').exists()).toBe(false);
  });
 
  test('should match snapshot with one extended component, in dropdown', () => {
@@ -87,9 +97,9 @@ describe('plugins/MobileChannelHeaderPlug', () => {
  );
  expect(wrapper).toMatchSnapshot();
 
- wrapper.instance().fireAction = jest.fn();
- expect(wrapper.find('button').exists()).toEqual(true);
- expect(wrapper.find('li').exists()).toEqual(false);
+ // Render a single list item containing a button
+ expect(wrapper.find('li')).toHaveLength(1);
+ expect(wrapper.find('button')).toHaveLength(1);
  });
 
  test('should match snapshot with two extended components, in dropdown', () => {
@@ -104,9 +114,12 @@ describe('plugins/MobileChannelHeaderPlug', () => {
  );
  expect(wrapper).toMatchSnapshot();
 
+ // Render a two list items containing anchors
+ expect(wrapper.find('li')).toHaveLength(2);
+ expect(wrapper.find('button')).toHaveLength(0);
+ expect(wrapper.find('a')).toHaveLength(2);
+
  wrapper.instance().fireAction = jest.fn();
- expect(wrapper.find('button').exists()).toEqual(false);
- expect(wrapper.find('li').exists()).toEqual(true);
 
  wrapper.find('a').first().simulate('click');
  expect(wrapper.instance().fireAction).toHaveBeenCalledTimes(1);

diff --git a/sass/layout/_navigation.scss b/sass/layout/_navigation.scss
@@ -32,6 +32,11 @@
  display: flex;
  }
 
+ .flex-parent--center {
+ display: flex;
+ justify-content: center;
+ }
+
  .browser--ie & {
  .navbar-default {
  .navbar-brand {

diff --git a/sass/responsive/_mobile.scss b/sass/responsive/_mobile.scss
@@ -1558,9 +1558,24 @@
  }
 
  .more-modal {
+ .modal-content {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .modal-header {
+ flex: 0 0 56px;
+ }
+
  .modal-body {
- max-height: calc(100vh - 62px);
- padding-bottom: 5px;
+ flex: 1 1 auto;
+ max-height: 100%;
+ display: flex;
+ }
+
+ .filtered-user-list {
+ flex: 1 1 auto;
+ height: auto;
  }
  }
  }