From d64d1f4029505f48bb86035a557e2f4229e55443 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 6 Jul 2017 18:07:43 +0500 Subject: 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 --- webapp/components/analytics/table_chart.jsx | 1 + webapp/components/change_url_modal.jsx | 1 + webapp/components/channel_header.jsx | 208 ++++++++++++++------- webapp/components/channel_info_modal.jsx | 16 +- .../components/create_team/components/team_url.jsx | 1 + webapp/components/file_attachment.jsx | 2 + webapp/components/navbar.jsx | 30 ++- .../popover_list_members/popover_list_members.jsx | 105 ++++++----- webapp/components/post_view/post_flag_icon.jsx | 13 +- webapp/components/post_view/reaction/reaction.jsx | 1 + webapp/components/rename_channel_modal.jsx | 1 + webapp/components/rhs_header_post.jsx | 4 + webapp/components/search_bar.jsx | 154 ++++++++------- webapp/components/search_results_header.jsx | 3 + webapp/components/sidebar.jsx | 43 +++-- webapp/components/sidebar_header.jsx | 2 +- webapp/components/sidebar_right/sidebar_right.jsx | 6 +- .../suggestion/switch_channel_provider.jsx | 16 +- .../team_sidebar/components/team_button.jsx | 1 + .../user_settings/custom_theme_chooser.jsx | 1 + .../components/webrtc/components/webrtc_header.jsx | 2 + 21 files changed, 395 insertions(+), 216 deletions(-) (limited to 'webapp/components') diff --git a/webapp/components/analytics/table_chart.jsx b/webapp/components/analytics/table_chart.jsx index 408871cb7..5836e09a7 100644 --- a/webapp/components/analytics/table_chart.jsx +++ b/webapp/components/analytics/table_chart.jsx @@ -31,6 +31,7 @@ export default function TableChart(props) {
); + const pinnedPostTooltip = ( + + + + ); + const flaggedTooltip = ( +
this.initWebrtc(otherUserId, !isOffline)} disabled={isOffline} > + ); + } else { + headerTextElement = ( +
+ {channel.header} +
+ ); + } + + headerTextContainer = ( + + {headerTextElement} + + ); } else { - headerText = channel.header; + headerTextContainer = ( + this.setState({showEditChannelHeaderModal: true})} + > + + + ); + } + + let editHeaderModal; + if (this.state.showEditChannelHeaderModal) { + editHeaderModal = ( + this.setState({showEditChannelHeaderModal: false})} + channel={channel} + /> + ); } let toggleFavoriteTooltip; @@ -784,6 +848,7 @@ export default class ChannelHeader extends React.Component { const toggleFavorite = ( @@ -822,19 +887,23 @@ export default class ChannelHeader extends React.Component { const leaveChannelModal = this.createLeaveChannelModal(); + let pinnedIconClass = 'channel-header__icon'; + if (this.state.pinsOpen) { + pinnedIconClass += ' active'; + } + return (
- +
- +
- {webrtc} {toggleFavorite} -
+ - -
- + {headerTextContainer}
+ + {webrtc} + {popoverListMembers} - + + - -
- - - {'@'} - - -
+ +
+
+ 		-
- +
- - - - -
+ +
+
+ {editHeaderModal} {editPurposeModal} {channelMembersModal} {leaveChannelModal} diff --git a/webapp/components/channel_info_modal.jsx b/webapp/components/channel_info_modal.jsx index 25824e28c..186dfc5cf 100644 --- a/webapp/components/channel_info_modal.jsx +++ b/webapp/components/channel_info_modal.jsx @@ -29,6 +29,8 @@ export default class ChannelInfoModal extends React.Component { render() { let channel = this.props.channel; let channelIcon; + const globeIcon = Constants.GLOBE_ICON_SVG; + const lockIcon = Constants.LOCK_ICON_SVG; if (!channel) { const notFound = Utils.localizeMessage('channel_info.notFound', 'No Channel Found'); @@ -43,9 +45,19 @@ export default class ChannelInfoModal extends React.Component { } if (channel.type === 'O') { - channelIcon = (); + channelIcon = ( + + ); } else if (channel.type === 'P') { - channelIcon = (); + channelIcon = ( + + ); } const channelURL = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; diff --git a/webapp/components/create_team/components/team_url.jsx b/webapp/components/create_team/components/team_url.jsx index baae0e09d..f42dc6e0b 100644 --- a/webapp/components/create_team/components/team_url.jsx +++ b/webapp/components/create_team/components/team_url.jsx @@ -178,6 +178,7 @@ export default class TeamUrl extends React.Component {
{fileName}} @@ -126,6 +127,7 @@ export default class FileAttachment extends React.Component { } else { filenameOverlay = ( {Utils.localizeMessage('file_attachment.download', 'Download') + ' "' + fileName + '"'}} 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} > -
+
+
- - - + this.handleShowDirectChannel(m, e)} - > - - - ); + messageIcon = Constants.MESSAGE_ICON_SVG; } let name = ''; @@ -129,12 +119,13 @@ export default class PopoverListMembers extends React.Component { popoverHtml.push(
this.handleShowDirectChannel(m, e)} key={'popover-member-' + i} >
- {button} +
); @@ -175,21 +170,15 @@ export default class PopoverListMembers extends React.Component { popoverHtml.push(
- +
); } @@ -239,23 +228,40 @@ export default class PopoverListMembers extends React.Component { ); } + const channelMembersTooltip = ( + + + + ); + return ( -
-
{ - this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover}); - this.props.actions.getProfilesInChannel(this.props.channel.id, 0); - }} +
+ - {countText} -
+
{ + this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover}); + this.props.actions.getProfilesInChannel(this.props.channel.id, 0); + }} + > + {countText} +
+ +
+
{popoverHtml}
 diff --git a/webapp/components/post_view/post_flag_icon.jsx b/webapp/components/post_view/post_flag_icon.jsx index 295bdd116..02f8feb53 100644 --- a/webapp/components/post_view/post_flag_icon.jsx +++ b/webapp/components/post_view/post_flag_icon.jsx @@ -21,11 +21,17 @@ function flagToolTip(isFlagged) { ); } -function flagIcon() { +function flagIcon(isFlagged) { + let flagIconSvg = Constants.FLAG_ICON_SVG; + + if (isFlagged) { + flagIconSvg = Constants.FLAG_FILLED_ICON_SVG; + } + return ( ); } @@ -52,6 +58,7 @@ export default function PostFlagIcon(props) { if (!props.isEphemeral) { return ( - {flagIcon()} + {flagIcon(props.isFlagged)} ); diff --git a/webapp/components/post_view/reaction/reaction.jsx b/webapp/components/post_view/reaction/reaction.jsx index 7fad56d62..f256a1fb5 100644 --- a/webapp/components/post_view/reaction/reaction.jsx +++ b/webapp/components/post_view/reaction/reaction.jsx @@ -219,6 +219,7 @@ export default class Reaction extends React.PureComponent { return ( ; @@ -253,50 +256,49 @@ export default class SearchBar extends React.Component { var mentionBtnClass = SearchStore.isMentionSearch ? 'active' : ''; mentionBtn = ( -
- - - {'@'} - - -
+
+ ); var flagBtnClass = SearchStore.isFlaggedPosts ? 'active' : ''; flagBtn = ( -
- - -
+
+ ); } @@ -305,55 +307,71 @@ export default class SearchBar extends React.Component { clearClass += ' visible'; } + let searchFormClass = 'search__form'; + if (this.state.focused) { + searchFormClass += ' focused'; + } + return ( -
-
- -
-
- - { - this.search = search; - }} - className='form-control search-bar' - placeholder={Utils.localizeMessage('search_bar.search', 'Search')} - value={this.state.searchTerm} - onFocus={this.handleUserFocus} - onBlur={this.handleUserBlur} - onChange={this.handleChange} - onKeyDown={this.handleKeyDown} - listComponent={SearchSuggestionList} - providers={this.suggestionProviders} - type='search' - autoFocus={this.props.isFocus && this.state.searchTerm === ''} - /> +
+
+ +
+
+
+
+ {isSearching} + {this.renderHintPopover(helpClass)} + +
+
+ {mentionBtn} +
+
+ {flagBtn} +
); } diff --git a/webapp/components/search_results_header.jsx b/webapp/components/search_results_header.jsx index fd2628013..467b77e27 100644 --- a/webapp/components/search_results_header.jsx +++ b/webapp/components/search_results_header.jsx @@ -104,6 +104,7 @@ export default class SearchResultsHeader extends React.Component { onClick={this.toggleSize} > {unreadCount.mentions}; + badge = {unreadCount.mentions}; this.badgesActive = true; } } else if (this.state.loadingDMChannel === index && channel.type === Constants.DM_CHANNEL) { @@ -554,17 +554,29 @@ export default class Sidebar extends React.Component { ); } - if (msgCount > 0) { + if (unreadCount.mentions > 0) { rowClass += ' has-badge'; } let displayName = channel.display_name; var icon = null; + const globeIcon = Constants.GLOBE_ICON_SVG; + const lockIcon = Constants.LOCK_ICON_SVG; if (channel.type === Constants.OPEN_CHANNEL) { - icon =
; + icon = ( + + ); } else if (channel.type === Constants.PRIVATE_CHANNEL) { - icon =
; + icon = ( + + ); } else if (channel.type === Constants.GM_CHANNEL) { displayName = ChannelUtils.buildGroupChannelName(channel.id); icon =
{UserStore.getProfileListInChannel(channel.id, true).length}
; @@ -589,6 +601,7 @@ export default class Sidebar extends React.Component { if (handleClose && !badge) { closeButton = ( {icon} - {displayName} + {displayName} {badge} {closeButton} @@ -644,6 +657,8 @@ export default class Sidebar extends React.Component { } render() { + const switchChannelIcon = Constants.SWITCH_CHANNEL_ICON_SVG; + // Check if we have all info needed to render if (this.state.currentTeam == null || this.state.currentUser == null) { return (
); @@ -749,8 +764,8 @@ export default class Sidebar extends React.Component { let createPublicChannelIcon = ( @@ -767,9 +782,9 @@ export default class Sidebar extends React.Component { let createPrivateChannelIcon = ( @@ -877,7 +892,7 @@ export default class Sidebar extends React.Component {

{createPublicChannelIcon}

@@ -903,7 +918,7 @@ export default class Sidebar extends React.Component {

{createPrivateChannelIcon}

@@ -915,7 +930,7 @@ export default class Sidebar extends React.Component {

@@ -928,6 +943,10 @@ export default class Sidebar extends React.Component { className='btn btn-link' onClick={this.openQuickSwitcher} > + {tutorialTip}
-
{'@' + this.props.currentUser.username}
{teamNameWithToolTip} +
{'@' + this.props.currentUser.username}
postListScrollChange(), 0); } } @@ -210,7 +210,7 @@ export default class SidebarRight extends React.Component { if (this.state.searchVisible) { content = (
-
{searchForm}
+
{searchForm}
-
{searchForm}
+
{searchForm}
; + icon = ( + + ); } else if (channel.type === Constants.PRIVATE_CHANNEL) { - icon =
; + icon = ( + + ); } else if (channel.type === Constants.GM_CHANNEL) { displayName = getChannelDisplayName(channel); icon =
{'G'}
; diff --git a/webapp/components/team_sidebar/components/team_button.jsx b/webapp/components/team_sidebar/components/team_button.jsx index e0670d6da..57f436eb2 100644 --- a/webapp/components/team_sidebar/components/team_button.jsx +++ b/webapp/components/team_sidebar/components/team_button.jsx @@ -69,6 +69,7 @@ export default class TeamButton extends React.Component { } else { btn = (