From a5f1a77fa539763635a669162f81dfbb70ccee5b Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Fri, 4 Aug 2017 20:45:59 +0500
Subject: Ui improvements (#7092)

* PLT-7121 - Making channel header text dynamic

* PLT-7268 - Fixing search results in compact view

* PLT-7248 - Adjusting space between post controls

* PLT-7303 - Fixing manage members button

* Revert "PLT-7303 - Fixing manage members button"

This reverts commit 7dcb68a8e333a2c95444d417ed9a244c9c30aa99.
---
 webapp/components/channel_header.jsx | 194 +++++++++++++++++------------------
 1 file changed, 95 insertions(+), 99 deletions(-)

(limited to 'webapp/components/channel_header.jsx')

diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index bee06c700..42e66fd3a 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -841,107 +841,103 @@ export default class ChannelHeader extends React.Component {
                 id='channel-header'
                 className='channel-header alt'
             >
-                <table>
-                    <tbody>
-                        <tr>
-                            <th>
-                                <div className='channel-header__info'>
-                                    {toggleFavorite}
-                                    <div className='channel-header__title dropdown'>
-                                        <a
-                                            id='channelHeaderDropdown'
-                                            href='#'
-                                            className='dropdown-toggle theme'
-                                            type='button'
-                                            data-toggle='dropdown'
-                                            aria-expanded='true'
-                                        >
-                                            <strong className='heading'>{channelTitle} </strong>
-                                            <span className='fa fa-angle-down header-dropdown__icon'/>
-                                        </a>
-                                        <ul
-                                            className='dropdown-menu'
-                                            role='menu'
-                                            aria-labelledby='channel_header_dropdown'
-                                        >
-                                            {dropdownContents}
-                                        </ul>
-                                    </div>
-                                    {headerTextContainer}
-                                </div>
-                            </th>
-                            <th>
-                                {webrtc}
-                            </th>
-                            <th>
-                                {popoverListMembers}
-                            </th>
-                            <th>
-                                <OverlayTrigger
-                                    trigger={['hover', 'focus']}
-                                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                                    placement='bottom'
-                                    overlay={pinnedPostTooltip}
-                                >
-                                    <div
-                                        className={pinnedIconClass}
-                                        onClick={this.getPinnedPosts}
-                                    >
-                                        <span
-                                            className='icon icon__pin'
-                                            dangerouslySetInnerHTML={{__html: pinIcon}}
-                                            aria-hidden='true'
-                                        />
-                                    </div>
-                                </OverlayTrigger>
-                            </th>
-                            <th className='search-bar__container'>
-                                <NavbarSearchBox
-                                    showMentionFlagBtns={false}
-                                    isFocus={Utils.isMobile()}
-                                />
-                            </th>
-                            <th>
-                                <OverlayTrigger
-                                    trigger={['hover', 'focus']}
-                                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                                    placement='bottom'
-                                    overlay={recentMentionsTooltip}
+                <div className='flex-parent'>
+                    <div className='flex-child'>
+                        <div className='channel-header__info'>
+                            {toggleFavorite}
+                            <div className='channel-header__title dropdown'>
+                                <a
+                                    id='channelHeaderDropdown'
+                                    href='#'
+                                    className='dropdown-toggle theme'
+                                    type='button'
+                                    data-toggle='dropdown'
+                                    aria-expanded='true'
                                 >
-                                    <div
-                                        className='channel-header__icon icon--hidden'
-                                        onClick={this.searchMentions}
-                                    >
-                                        <span
-                                            className='icon icon__mentions'
-                                            dangerouslySetInnerHTML={{__html: mentionsIcon}}
-                                            aria-hidden='true'
-                                        />
-                                    </div>
-                                </OverlayTrigger>
-                            </th>
-                            <th>
-                                <OverlayTrigger
-                                    trigger={['hover', 'focus']}
-                                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                                    placement='bottom'
-                                    overlay={flaggedTooltip}
+                                    <strong className='heading'>{channelTitle} </strong>
+                                    <span className='fa fa-angle-down header-dropdown__icon'/>
+                                </a>
+                                <ul
+                                    className='dropdown-menu'
+                                    role='menu'
+                                    aria-labelledby='channel_header_dropdown'
                                 >
-                                    <div
-                                        className='channel-header__icon icon--hidden'
-                                        onClick={this.getFlagged}
-
-                                    >
-                                        <span
-                                            className='icon icon__flag'
-                                            dangerouslySetInnerHTML={{__html: flagIcon}}
-                                        />
-                                    </div>
-                                </OverlayTrigger>
-                            </th>
-                        </tr>
-                    </tbody>
-                </table>
+                                    {dropdownContents}
+                                </ul>
+                            </div>
+                            {headerTextContainer}
+                        </div>
+                    </div>
+                    <div className='flex-child'>
+                        {webrtc}
+                    </div>
+                    <div className='flex-child'>
+                        {popoverListMembers}
+                    </div>
+                    <div className='flex-child'>
+                        <OverlayTrigger
+                            trigger={['hover', 'focus']}
+                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                            placement='bottom'
+                            overlay={pinnedPostTooltip}
+                        >
+                            <div
+                                className={pinnedIconClass}
+                                onClick={this.getPinnedPosts}
+                            >
+                                <span
+                                    className='icon icon__pin'
+                                    dangerouslySetInnerHTML={{__html: pinIcon}}
+                                    aria-hidden='true'
+                                />
+                            </div>
+                        </OverlayTrigger>
+                    </div>
+                    <div className='flex-child search-bar__container'>
+                        <NavbarSearchBox
+                            showMentionFlagBtns={false}
+                            isFocus={Utils.isMobile()}
+                        />
+                    </div>
+                    <div className='flex-child'>
+                        <OverlayTrigger
+                            trigger={['hover', 'focus']}
+                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                            placement='bottom'
+                            overlay={recentMentionsTooltip}
+                        >
+                            <div
+                                className='channel-header__icon icon--hidden'
+                                onClick={this.searchMentions}
+                            >
+                                <span
+                                    className='icon icon__mentions'
+                                    dangerouslySetInnerHTML={{__html: mentionsIcon}}
+                                    aria-hidden='true'
+                                />
+                            </div>
+                        </OverlayTrigger>
+                    </div>
+                    <div className='flex-child'>
+                        <OverlayTrigger
+                            trigger={['hover', 'focus']}
+                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                            placement='bottom'
+                            overlay={flaggedTooltip}
+                        >
+                            <div
+                                className='channel-header__icon icon--hidden'
+                                onClick={this.getFlagged}
+
+                            >
+                                <span
+                                    className='icon icon__flag'
+                                    dangerouslySetInnerHTML={{__html: flagIcon}}
+                                />
+                            </div>
+                        </OverlayTrigger>
+                    </div>
+                </div>
                 {editHeaderModal}
                 {editPurposeModal}
                 {channelMembersModal}
-- 
cgit v1.2.3-1-g7c22