diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-07-06 18:07:43 +0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-07-06 09:07:43 -0400 |
commit | d64d1f4029505f48bb86035a557e2f4229e55443 (patch) | |
tree | eb71e96007d21f96ecc4957f802cb2302748ad4f /webapp/components/navbar.jsx | |
parent | 97cfe62309d7f94a2ea041bc04a7ff25cb1c91fd (diff) | |
download | chat-d64d1f4029505f48bb86035a557e2f4229e55443.tar.gz chat-d64d1f4029505f48bb86035a557e2f4229e55443.tar.bz2 chat-d64d1f4029505f48bb86035a557e2f4229e55443.zip |
PLT-6905 - Updating channel header design (#6789)
* PLT-6905 - Updating channel header design
* Updating border-radius
* Updating radius for wide icons
* Updating trigger for overlay
* Updating UI for channel header
* Updating channel header sizing
* Updating channel header css
* Updating sidebar css
* Updating status icons
* Adjusting border
* Updating comment
* Removing type from status icon
* Fixing UI issues for the channel header/sidebar
* make "Add a channel description" open the channel header modal
* Updating status and opacity
* Updating stauts icon positioning
* Updating description and heading size
* Updating UI changes
* Updating UI changes
* add a focused class to the parent div .search__form and then remove when hover away
* Fix active state for pinned posts icon
* Updating UI changes
* Update channel header text
Diffstat (limited to 'webapp/components/navbar.jsx')
-rw-r--r-- | webapp/components/navbar.jsx | 30 |
1 files changed, 23 insertions, 7 deletions
diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx index fa759cae7..f61f58a8d 100644 --- a/webapp/components/navbar.jsx +++ b/webapp/components/navbar.jsx @@ -279,6 +279,7 @@ export default class Navbar extends React.Component { createDropdown(channel, channelTitle, isSystemAdmin, isTeamAdmin, isChannelAdmin, isDirect, isGroup, popoverContent) { const isAdmin = isSystemAdmin || isTeamAdmin; + const infoIcon = Constants.INFO_ICON_SVG; if (channel) { let viewInfoOption; @@ -599,7 +600,13 @@ export default class Navbar extends React.Component { className='description' rootClose={true} > - <div className='pull-right description info-popover'/> + <div className='pull-right description navbar-right__icon info-popover'> + <span + className='icon icon__info' + dangerouslySetInnerHTML={{__html: infoIcon}} + aria-hidden='true' + /> + </div> </OverlayTrigger> <a href='#' @@ -652,6 +659,8 @@ export default class Navbar extends React.Component { createCollapseButtons(currentId) { var buttons = []; + const menuIcon = Constants.MENU_ICON_SVG; + if (currentId == null) { buttons.push( <button @@ -688,9 +697,11 @@ export default class Navbar extends React.Component { defaultMessage='Toggle sidebar' /> </span> - <span className='icon-bar'/> - <span className='icon-bar'/> - <span className='icon-bar'/> + <span + className='icon icon__menu' + dangerouslySetInnerHTML={{__html: menuIcon}} + aria-hidden='true' + /> <NotifyCounts/> </button> ); @@ -699,7 +710,7 @@ export default class Navbar extends React.Component { <button key='navbar-toggle-menu' type='button' - className='navbar-toggle menu-toggle pull-right' + className='navbar-toggle navbar-right__icon menu-toggle pull-right' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleRightSidebar} @@ -917,13 +928,18 @@ export default class Navbar extends React.Component { var collapseButtons = this.createCollapseButtons(currentId); + const searchIcon = Constants.SEARCH_ICON_SVG; const searchButton = ( <button type='button' - className='navbar-toggle navbar-search pull-right' + className='navbar-toggle navbar-right__icon navbar-search pull-right' onClick={this.showSearch} > - <span className='fa fa-search icon-search icon--white'/> + <span + className='icon icon__search' + dangerouslySetInnerHTML={{__html: searchIcon}} + aria-hidden='true' + /> </button> ); |