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
Этот коммит содержится в:
Asaad Mahmood
коммит произвёл
Joram Wilander
Joram Wilander
родитель
97cfe62309
Коммит
d64d1f4029
@@ -64,6 +64,7 @@ export default class ChannelHeader extends React.Component {
|
||||
this.hideLeaveChannelModal = this.hideLeaveChannelModal.bind(this);
|
||||
|
||||
const state = this.getStateFromStores();
|
||||
state.showEditChannelHeaderModal = false;
|
||||
state.showEditChannelPurposeModal = false;
|
||||
state.showMembersModal = false;
|
||||
state.showRenameChannelModal = false;
|
||||
@@ -90,7 +91,8 @@ export default class ChannelHeader extends React.Component {
|
||||
enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true),
|
||||
isBusy: WebrtcStore.isBusy(),
|
||||
isFavorite: channel && ChannelUtils.isFavoriteChannel(channel),
|
||||
showLeaveChannelModal: false
|
||||
showLeaveChannelModal: false,
|
||||
pinsOpen: SearchStore.getIsPinnedPosts()
|
||||
};
|
||||
}
|
||||
|
||||
@@ -281,7 +283,8 @@ export default class ChannelHeader extends React.Component {
|
||||
|
||||
render() {
|
||||
const flagIcon = Constants.FLAG_ICON_SVG;
|
||||
const pinIcon = Constants.PIN_ICON;
|
||||
const pinIcon = Constants.PIN_ICON_SVG;
|
||||
const mentionsIcon = Constants.MENTIONS_ICON_SVG;
|
||||
|
||||
if (!this.validState()) {
|
||||
// Use an empty div to make sure the header's height stays constant
|
||||
@@ -300,6 +303,15 @@ export default class ChannelHeader extends React.Component {
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
const pinnedPostTooltip = (
|
||||
<Tooltip id='pinnedPostTooltip'>
|
||||
<FormattedMessage
|
||||
id='channel_header.pinnedPosts'
|
||||
defaultMessage='Pinned Posts'
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
const flaggedTooltip = (
|
||||
<Tooltip
|
||||
id='flaggedTooltip'
|
||||
@@ -382,13 +394,14 @@ export default class ChannelHeader extends React.Component {
|
||||
);
|
||||
|
||||
webrtc = (
|
||||
<div className='webrtc__header'>
|
||||
<div className='webrtc__header channel-header__icon'>
|
||||
<a
|
||||
href='#'
|
||||
onClick={() => this.initWebrtc(otherUserId, !isOffline)}
|
||||
disabled={isOffline}
|
||||
>
|
||||
<OverlayTrigger
|
||||
trigger={['hover', 'focus']}
|
||||
delayShow={Constants.WEBRTC_TIME_DELAY}
|
||||
placement='bottom'
|
||||
overlay={webrtcTooltip}
|
||||
@@ -754,11 +767,62 @@ export default class ChannelHeader extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
let headerText;
|
||||
if (this.state.enableFormatting) {
|
||||
headerText = TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false, siteURL: getSiteURL()});
|
||||
let headerTextContainer;
|
||||
if (channel.header) {
|
||||
let headerTextElement;
|
||||
if (this.state.enableFormatting) {
|
||||
headerTextElement = (
|
||||
<div
|
||||
onClick={Utils.handleFormattedTextClick}
|
||||
className='channel-header__description'
|
||||
dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false, siteURL: getSiteURL()})}}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
headerTextElement = (
|
||||
<div
|
||||
onClick={Utils.handleFormattedTextClick}
|
||||
className='channel-header__description'
|
||||
>
|
||||
{channel.header}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
headerTextContainer = (
|
||||
<OverlayTrigger
|
||||
trigger={'click'}
|
||||
placement='bottom'
|
||||
rootClose={true}
|
||||
overlay={popoverContent}
|
||||
ref='headerOverlay'
|
||||
>
|
||||
{headerTextElement}
|
||||
</OverlayTrigger>
|
||||
);
|
||||
} else {
|
||||
headerText = channel.header;
|
||||
headerTextContainer = (
|
||||
<a
|
||||
href='#'
|
||||
className='channel-header__description light'
|
||||
onClick={() => this.setState({showEditChannelHeaderModal: true})}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='channel_header.addChannelHeader'
|
||||
defaultMessage='Add a channel description'
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
let editHeaderModal;
|
||||
if (this.state.showEditChannelHeaderModal) {
|
||||
editHeaderModal = (
|
||||
<EditChannelHeaderModal
|
||||
onHide={() => this.setState({showEditChannelHeaderModal: false})}
|
||||
channel={channel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let toggleFavoriteTooltip;
|
||||
@@ -784,6 +848,7 @@ export default class ChannelHeader extends React.Component {
|
||||
|
||||
const toggleFavorite = (
|
||||
<OverlayTrigger
|
||||
trigger={['hover', 'focus']}
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
placement='bottom'
|
||||
overlay={toggleFavoriteTooltip}
|
||||
@@ -792,7 +857,7 @@ export default class ChannelHeader extends React.Component {
|
||||
id='toggleFavorite'
|
||||
href='#'
|
||||
onClick={this.toggleFavorite}
|
||||
className='channel-header__favorites'
|
||||
className={'channel-header__favorites ' + (this.state.isFavorite ? 'active' : 'inactive')}
|
||||
>
|
||||
<i className={'icon fa ' + (this.state.isFavorite ? 'fa-star' : 'fa-star-o')}/>
|
||||
</a>
|
||||
@@ -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 (
|
||||
<div
|
||||
id='channel-header'
|
||||
className='channel-header'
|
||||
className='channel-header alt'
|
||||
>
|
||||
<table className='channel-header alt'>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
<div className='channel-header__info'>
|
||||
{webrtc}
|
||||
{toggleFavorite}
|
||||
<div className='dropdown'>
|
||||
<div className='channel-header__title dropdown'>
|
||||
<a
|
||||
id='channelHeaderDropdown'
|
||||
href='#'
|
||||
@@ -844,7 +913,7 @@ export default class ChannelHeader extends React.Component {
|
||||
aria-expanded='true'
|
||||
>
|
||||
<strong className='heading'>{channelTitle} </strong>
|
||||
<span className='fa fa-chevron-down header-dropdown__icon'/>
|
||||
<span className='fa fa-angle-down header-dropdown__icon'/>
|
||||
</a>
|
||||
<ul
|
||||
className='dropdown-menu'
|
||||
@@ -854,35 +923,33 @@ export default class ChannelHeader extends React.Component {
|
||||
{dropdownContents}
|
||||
</ul>
|
||||
</div>
|
||||
<OverlayTrigger
|
||||
trigger={'click'}
|
||||
placement='bottom'
|
||||
rootClose={true}
|
||||
overlay={popoverContent}
|
||||
ref='headerOverlay'
|
||||
>
|
||||
<div
|
||||
onClick={Utils.handleFormattedTextClick}
|
||||
className='description'
|
||||
dangerouslySetInnerHTML={{__html: headerText}}
|
||||
/>
|
||||
</OverlayTrigger>
|
||||
{headerTextContainer}
|
||||
</div>
|
||||
</th>
|
||||
<th className='header-list__right'>
|
||||
<th>
|
||||
{webrtc}
|
||||
</th>
|
||||
<th>
|
||||
{popoverListMembers}
|
||||
<a
|
||||
href='#'
|
||||
type='button'
|
||||
id='pinnedPostsButton'
|
||||
className='pinned-posts-button'
|
||||
onClick={this.getPinnedPosts}
|
||||
</th>
|
||||
<th>
|
||||
<OverlayTrigger
|
||||
trigger={['hover', 'focus']}
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
placement='bottom'
|
||||
overlay={pinnedPostTooltip}
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={{__html: pinIcon}}
|
||||
aria-hidden='true'
|
||||
/>
|
||||
</a>
|
||||
<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
|
||||
@@ -891,47 +958,44 @@ export default class ChannelHeader extends React.Component {
|
||||
/>
|
||||
</th>
|
||||
<th>
|
||||
<div className='dropdown channel-header__links search-btns'>
|
||||
<OverlayTrigger
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
placement='bottom'
|
||||
overlay={recentMentionsTooltip}
|
||||
>
|
||||
<a
|
||||
id='searchMentions'
|
||||
href='#'
|
||||
type='button'
|
||||
onClick={this.searchMentions}
|
||||
>
|
||||
{'@'}
|
||||
</a>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
<OverlayTrigger
|
||||
trigger={['hover', 'focus']}
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
placement='bottom'
|
||||
overlay={recentMentionsTooltip}
|
||||
>
|
||||
<div className='channel-header__icon icon--hidden'>
|
||||
<span
|
||||
className='icon icon__mentions'
|
||||
dangerouslySetInnerHTML={{__html: mentionsIcon}}
|
||||
aria-hidden='true'
|
||||
/>
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
</th>
|
||||
<th>
|
||||
<div className='dropdown channel-header__links search-btns'>
|
||||
<OverlayTrigger
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
placement='bottom'
|
||||
overlay={flaggedTooltip}
|
||||
<OverlayTrigger
|
||||
trigger={['hover', 'focus']}
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
placement='bottom'
|
||||
overlay={flaggedTooltip}
|
||||
>
|
||||
<div
|
||||
className='channel-header__icon icon--hidden'
|
||||
onClick={this.getFlagged}
|
||||
|
||||
>
|
||||
<a
|
||||
id='flaggedPostsButton'
|
||||
href='#'
|
||||
type='button'
|
||||
onClick={this.getFlagged}
|
||||
>
|
||||
<span
|
||||
className='icon icon__flag'
|
||||
dangerouslySetInnerHTML={{__html: flagIcon}}
|
||||
/>
|
||||
</a>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
<span
|
||||
className='icon icon__flag'
|
||||
dangerouslySetInnerHTML={{__html: flagIcon}}
|
||||
/>
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{editHeaderModal}
|
||||
{editPurposeModal}
|
||||
{channelMembersModal}
|
||||
{leaveChannelModal}
|
||||
|
||||
Ссылка в новой задаче
Block a user