mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
MM-56324 Channel Header UI Update (#26383)
This commit is contained in:
Matthew Birtch
GitHub
parent
54d7011aba
commit
4ba736f018
@ -24,7 +24,7 @@ $app-bar-width: 48px;
|
||||
width: $app-bar-width;
|
||||
flex: 1;
|
||||
flex-flow: column;
|
||||
padding-top: 19px;
|
||||
padding-top: 15px;
|
||||
background-color: rgba(var(--center-channel-color-rgb), 0.04);
|
||||
-ms-overflow-style: none;
|
||||
overflow-x: hidden;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -21,8 +21,6 @@ import Markdown from 'components/markdown';
|
||||
import OverlayTrigger from 'components/overlay_trigger';
|
||||
import type {BaseOverlayTrigger} from 'components/overlay_trigger';
|
||||
import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
|
||||
import {statusDropdownMessages} from 'components/status_dropdown/status_dropdown';
|
||||
import StatusIcon from 'components/status_icon';
|
||||
import Timestamp from 'components/timestamp';
|
||||
import Tooltip from 'components/tooltip';
|
||||
import Popover from 'components/widgets/popover';
|
||||
@ -241,6 +239,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
|
||||
/>
|
||||
<CustomStatusText
|
||||
text={customStatus?.text}
|
||||
className='custom-emoji__text'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@ -270,7 +269,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
|
||||
<span tabIndex={0}>
|
||||
<FormattedMessage
|
||||
id='channel_header.channelHasGuests'
|
||||
defaultMessage='This channel has guests'
|
||||
defaultMessage='Channel has guests'
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
@ -308,14 +307,10 @@ class ChannelHeader extends React.PureComponent<Props, State> {
|
||||
}
|
||||
}
|
||||
|
||||
let dmHeaderIconStatus: ReactNode;
|
||||
let dmHeaderTextStatus: ReactNode;
|
||||
if (isDirect && !dmUser?.delete_at && !dmUser?.is_bot) {
|
||||
dmHeaderIconStatus = (<StatusIcon status={channel.status}/>);
|
||||
|
||||
dmHeaderTextStatus = (
|
||||
<span className='header-status__text'>
|
||||
<FormattedMessage {...statusDropdownMessages[channel.status!].name}/>
|
||||
{this.renderCustomStatus()}
|
||||
</span>
|
||||
);
|
||||
@ -345,11 +340,11 @@ class ChannelHeader extends React.PureComponent<Props, State> {
|
||||
}
|
||||
}
|
||||
|
||||
const channelFilesIconClass = classNames('channel-header__icon channel-header__icon--wide channel-header__icon--left', {
|
||||
const channelFilesIconClass = classNames('channel-header__icon channel-header__icon--left btn btn-icon btn-xs ', {
|
||||
'channel-header__icon--active': rhsState === RHSStates.CHANNEL_FILES,
|
||||
});
|
||||
const channelFilesIcon = <i className='icon icon-file-text-outline'/>;
|
||||
const pinnedIconClass = classNames('channel-header__icon channel-header__icon--wide channel-header__icon--left', {
|
||||
const pinnedIconClass = classNames('channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs', {
|
||||
'channel-header__icon--active': rhsState === RHSStates.PIN,
|
||||
});
|
||||
const pinnedIcon = this.props.pinnedPostsCount ? (
|
||||
@ -374,7 +369,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
|
||||
|
||||
let memberListButton = null;
|
||||
if (!isDirect) {
|
||||
const membersIconClass = classNames('member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide', {
|
||||
const membersIconClass = classNames('member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs', {
|
||||
'channel-header__icon--active': rhsState === RHSStates.CHANNEL_MEMBERS,
|
||||
});
|
||||
const membersIcon = this.props.memberCount ? (
|
||||
@ -428,7 +423,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
|
||||
id='header-popover'
|
||||
popoverStyle='info'
|
||||
popoverSize='lg'
|
||||
style={{transform: `translate(${this.state.leftOffset}px, ${this.state.topOffset}px)`, maxWidth: this.state.channelHeaderPoverWidth}}
|
||||
style={{transform: `translate(${this.state.leftOffset}px, ${this.state.topOffset}px)`, maxWidth: this.state.channelHeaderPoverWidth + 16}}
|
||||
placement='bottom'
|
||||
className={classNames('channel-header__popover', {'chanel-header__popover--lhs_offset': this.props.hasMoreThanOneTeam})}
|
||||
>
|
||||
@ -450,28 +445,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
|
||||
className='channel-header__description'
|
||||
dir='auto'
|
||||
>
|
||||
{dmHeaderIconStatus}
|
||||
{dmHeaderTextStatus}
|
||||
{memberListButton}
|
||||
|
||||
<HeaderIconWrapper
|
||||
iconComponent={pinnedIcon}
|
||||
ariaLabel={true}
|
||||
buttonClass={pinnedIconClass}
|
||||
buttonId={'channelHeaderPinButton'}
|
||||
onClick={this.showPinnedPosts}
|
||||
tooltipKey={'pinnedPosts'}
|
||||
/>
|
||||
{this.props.isFileAttachmentsEnabled &&
|
||||
<HeaderIconWrapper
|
||||
iconComponent={channelFilesIcon}
|
||||
ariaLabel={true}
|
||||
buttonClass={channelFilesIconClass}
|
||||
buttonId={'channelHeaderFilesButton'}
|
||||
onClick={this.showChannelFiles}
|
||||
tooltipKey={'channelFiles'}
|
||||
/>
|
||||
}
|
||||
{hasGuestsText}
|
||||
<div
|
||||
className='header-popover-text-measurer'
|
||||
@ -557,30 +531,9 @@ class ChannelHeader extends React.PureComponent<Props, State> {
|
||||
headerTextContainer = (
|
||||
<div
|
||||
id='channelHeaderDescription'
|
||||
className='channel-header__description light'
|
||||
className='channel-header__description'
|
||||
>
|
||||
{dmHeaderIconStatus}
|
||||
{dmHeaderTextStatus}
|
||||
{memberListButton}
|
||||
|
||||
<HeaderIconWrapper
|
||||
iconComponent={pinnedIcon}
|
||||
ariaLabel={true}
|
||||
buttonClass={pinnedIconClass}
|
||||
buttonId={'channelHeaderPinButton'}
|
||||
onClick={this.showPinnedPosts}
|
||||
tooltipKey={'pinnedPosts'}
|
||||
/>
|
||||
{this.props.isFileAttachmentsEnabled &&
|
||||
<HeaderIconWrapper
|
||||
iconComponent={channelFilesIcon}
|
||||
ariaLabel={true}
|
||||
buttonClass={channelFilesIconClass}
|
||||
buttonId={'channelHeaderFilesButton'}
|
||||
onClick={this.showChannelFiles}
|
||||
tooltipKey={'channelFiles'}
|
||||
/>
|
||||
}
|
||||
{hasGuestsText}
|
||||
{editMessage}
|
||||
</div>
|
||||
@ -607,7 +560,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
|
||||
<button
|
||||
id='toggleMute'
|
||||
onClick={this.unmute}
|
||||
className={'style--none color--link channel-header__mute inactive'}
|
||||
className={'channel-header__mute inactive btn btn-icon btn-xs'}
|
||||
aria-label={formatMessage({id: 'generic_icons.muted', defaultMessage: 'Muted Icon'})}
|
||||
>
|
||||
<i className={'icon icon-bell-off-outline'}/>
|
||||
@ -635,17 +588,38 @@ class ChannelHeader extends React.PureComponent<Props, State> {
|
||||
<div
|
||||
className='channel-header__title dropdown'
|
||||
>
|
||||
<div>
|
||||
<ChannelHeaderTitle
|
||||
dmUser={dmUser}
|
||||
gmMembers={gmMembers}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className='channel-header__icons'
|
||||
>
|
||||
{muteTrigger}
|
||||
{memberListButton}
|
||||
<HeaderIconWrapper
|
||||
iconComponent={pinnedIcon}
|
||||
ariaLabel={true}
|
||||
buttonClass={pinnedIconClass}
|
||||
buttonId={'channelHeaderPinButton'}
|
||||
onClick={this.showPinnedPosts}
|
||||
tooltipKey={'pinnedPosts'}
|
||||
/>
|
||||
{this.props.isFileAttachmentsEnabled &&
|
||||
<HeaderIconWrapper
|
||||
iconComponent={channelFilesIcon}
|
||||
ariaLabel={true}
|
||||
buttonClass={channelFilesIconClass}
|
||||
buttonId={'channelHeaderFilesButton'}
|
||||
onClick={this.showChannelFiles}
|
||||
tooltipKey={'channelFiles'}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
{headerTextContainer}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChannelHeaderPlug
|
||||
channel={channel}
|
||||
channelMember={channelMember}
|
||||
|
||||
@ -3,19 +3,24 @@
|
||||
|
||||
import classNames from 'classnames';
|
||||
import type {ReactNode} from 'react';
|
||||
import React, {memo, useState} from 'react';
|
||||
import React, {memo, useState, useRef, useEffect} from 'react';
|
||||
import {useIntl} from 'react-intl';
|
||||
import {useSelector} from 'react-redux';
|
||||
|
||||
import type {UserProfile} from '@mattermost/types/users';
|
||||
|
||||
import {Client4} from 'mattermost-redux/client';
|
||||
import {getCurrentChannel} from 'mattermost-redux/selectors/entities/channels';
|
||||
|
||||
import {getIsRhsOpen} from 'selectors/rhs';
|
||||
|
||||
import {ChannelHeaderDropdown} from 'components/channel_header_dropdown';
|
||||
import ProfilePicture from 'components/profile_picture';
|
||||
import SharedChannelIndicator from 'components/shared_channel_indicator';
|
||||
import ArchiveIcon from 'components/widgets/icons/archive_icon';
|
||||
import MenuWrapper from 'components/widgets/menu/menu_wrapper';
|
||||
import BotTag from 'components/widgets/tag/bot_tag';
|
||||
import WithTooltip from 'components/with_tooltip';
|
||||
|
||||
import {Constants} from 'utils/constants';
|
||||
|
||||
@ -33,13 +38,33 @@ const ChannelHeaderTitle = ({
|
||||
gmMembers,
|
||||
}: Props) => {
|
||||
const [titleMenuOpen, setTitleMenuOpen] = useState(false);
|
||||
const [showTooltip, setShowTooltip] = useState(false);
|
||||
const intl = useIntl();
|
||||
const channel = useSelector(getCurrentChannel);
|
||||
|
||||
const headerItemRef = useRef<HTMLElement | null>(null);
|
||||
const isRHSOpen = useSelector(getIsRhsOpen);
|
||||
|
||||
useEffect(() => {
|
||||
enableToolTipIfNeeded();
|
||||
|
||||
// Re-check on window resize
|
||||
const handleResize = () => enableToolTipIfNeeded();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [channel, gmMembers, dmUser, isRHSOpen]);
|
||||
|
||||
if (!channel) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const enableToolTipIfNeeded = () => {
|
||||
const element = headerItemRef.current;
|
||||
const isTooltip = element && element.offsetWidth < element.scrollWidth;
|
||||
setShowTooltip(isTooltip as boolean);
|
||||
};
|
||||
|
||||
const isDirect = (channel.type === Constants.DM_CHANNEL);
|
||||
const isGroup = (channel.type === Constants.GM_CHANNEL);
|
||||
const channelIsArchived = channel.delete_at !== 0;
|
||||
@ -71,8 +96,13 @@ const ChannelHeaderTitle = ({
|
||||
return (
|
||||
<div
|
||||
id='channelHeaderDropdownButton'
|
||||
className='channel-header__top channel-header__bot'
|
||||
className='channel-header__bot'
|
||||
>
|
||||
<ChannelHeaderTitleFavorite/>
|
||||
<ProfilePicture
|
||||
src={Client4.getProfilePictureUrl(dmUser.id, dmUser.last_picture_update)}
|
||||
size='sm'
|
||||
/>
|
||||
<strong
|
||||
role='heading'
|
||||
aria-level={2}
|
||||
@ -85,26 +115,40 @@ const ChannelHeaderTitle = ({
|
||||
</span>
|
||||
</strong>
|
||||
<BotTag/>
|
||||
<ChannelHeaderTitleFavorite/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className='channel-header__top'>
|
||||
<ChannelHeaderTitleFavorite/>
|
||||
{isDirect && dmUser && ( // Check if it's a DM and dmUser is provided
|
||||
<ProfilePicture
|
||||
src={Client4.getProfilePictureUrl(dmUser.id, dmUser.last_picture_update)}
|
||||
size='sm'
|
||||
status={channel.status}
|
||||
/>
|
||||
)}
|
||||
<MenuWrapper onToggle={setTitleMenuOpen}>
|
||||
<div
|
||||
id='channelHeaderDropdownButton'
|
||||
className='channel-header__top'
|
||||
>
|
||||
<button
|
||||
className={classNames('channel-header__trigger style--none', {active: titleMenuOpen})}
|
||||
aria-label={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'}).toLowerCase()}
|
||||
>
|
||||
{showTooltip ? (
|
||||
<WithTooltip
|
||||
id='channelHeaderTooltip'
|
||||
placement='bottom'
|
||||
title={channelTitle as string}
|
||||
>
|
||||
<strong
|
||||
role='heading'
|
||||
aria-level={2}
|
||||
id='channelHeaderTitle'
|
||||
className='heading'
|
||||
ref={headerItemRef}
|
||||
>
|
||||
<span>
|
||||
{archivedIcon}
|
||||
@ -112,6 +156,22 @@ const ChannelHeaderTitle = ({
|
||||
{sharedIcon}
|
||||
</span>
|
||||
</strong>
|
||||
</WithTooltip>
|
||||
) : (
|
||||
<strong
|
||||
role='heading'
|
||||
aria-level={2}
|
||||
id='channelHeaderTitle'
|
||||
className='heading'
|
||||
ref={headerItemRef}
|
||||
>
|
||||
<span>
|
||||
{archivedIcon}
|
||||
{channelTitle}
|
||||
{sharedIcon}
|
||||
</span>
|
||||
</strong>
|
||||
)}
|
||||
<span
|
||||
id='channelHeaderDropdownIcon'
|
||||
className='icon icon-chevron-down header-dropdown-chevron-icon'
|
||||
@ -120,8 +180,7 @@ const ChannelHeaderTitle = ({
|
||||
</div>
|
||||
<ChannelHeaderDropdown/>
|
||||
</MenuWrapper>
|
||||
<ChannelHeaderTitleFavorite/>
|
||||
</React.Fragment>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -73,7 +73,7 @@ const ChannelHeaderTitleFavorite = () => {
|
||||
id='toggleFavorite'
|
||||
ref={toggleFavoriteRef}
|
||||
onClick={toggleFavoriteCallback}
|
||||
className={classNames('style--none color--link channel-header__favorites', {active: isFavorite, inactive: !isFavorite})}
|
||||
className={classNames('channel-header__favorites btn btn-icon btn-xs', {active: isFavorite, inactive: !isFavorite})}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<i className={classNames('icon', {'icon-star': isFavorite, 'icon-star-outline': !isFavorite})}/>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
|
||||
// 2-column
|
||||
grid-template-columns: var(--list);
|
||||
grid-template-rows: 63px 1fr;
|
||||
grid-template-rows: 56px 1fr;
|
||||
|
||||
.no-results__wrapper > svg {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@ -342,7 +342,9 @@ const SearchResults: React.FC<Props> = (props: Props): JSX.Element => {
|
||||
className='SearchResults sidebar-right__body'
|
||||
>
|
||||
<SearchResultsHeader>
|
||||
<span>
|
||||
{formattedTitle}
|
||||
</span>
|
||||
{props.channelDisplayName && <div className='sidebar--right__title__channel'>{props.channelDisplayName}</div>}
|
||||
</SearchResultsHeader>
|
||||
{isMessagesSearch &&
|
||||
|
||||
@ -40,7 +40,7 @@ const SidebarHeaderContainer = styled(Flex).attrs(() => ({
|
||||
justify: 'space-between',
|
||||
alignment: 'center',
|
||||
}))<SidebarHeaderContainerProps>`
|
||||
height: 52px;
|
||||
height: 55px;
|
||||
padding: 0 16px;
|
||||
gap: 8px;
|
||||
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
|
||||
// 2-column
|
||||
grid-template-columns: var(--list) var(--pane);
|
||||
grid-template-rows: 63px 1fr;
|
||||
grid-template-rows: 56px 1fr;
|
||||
|
||||
// single column
|
||||
@media screen and (max-width: 1020px) {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
.Header {
|
||||
padding-right: 12px;
|
||||
padding-left: 14px;
|
||||
padding-left: 12px;
|
||||
border-bottom: var(--border);
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
grid-area: header;
|
||||
@ -18,7 +18,7 @@
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
padding: 13px 0;
|
||||
padding: 12px 0;
|
||||
|
||||
+ .tab-button-wrapper {
|
||||
margin-left: 4px;
|
||||
|
||||
@ -3,9 +3,11 @@
|
||||
|
||||
.Header {
|
||||
display: flex;
|
||||
height: 56px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
background-color: var(--center-channel-bg);
|
||||
|
||||
h1,
|
||||
h2,
|
||||
@ -23,13 +25,17 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> div p {
|
||||
margin: 6px 0 0;
|
||||
> div {
|
||||
display: flex;
|
||||
|
||||
p {
|
||||
margin: 0 0 0 8px;
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> .spacer {
|
||||
flex: 1;
|
||||
|
||||
@ -3035,7 +3035,7 @@
|
||||
"channel_groups": "{channel} Groups",
|
||||
"channel_header.addChannelHeader": "Add a channel header",
|
||||
"channel_header.channelFiles": "Channel files",
|
||||
"channel_header.channelHasGuests": "This channel has guests",
|
||||
"channel_header.channelHasGuests": "Channel has guests",
|
||||
"channel_header.channelMembers": "Members",
|
||||
"channel_header.closeChannelInfo": "Close Info",
|
||||
"channel_header.convert": "Convert to Private Channel",
|
||||
|
||||
@ -49,6 +49,7 @@ button {
|
||||
|
||||
&.btn-icon {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
|
||||
@ -58,7 +59,6 @@ button {
|
||||
color: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: rgba(var(--button-bg-rgb), 0.08);
|
||||
color: rgba(var(--button-bg-rgb), 1);
|
||||
@ -70,8 +70,11 @@ button {
|
||||
|
||||
&.btn-xs {
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
gap: 4px;
|
||||
|
||||
&.btn-compact {
|
||||
width: 20px;
|
||||
@ -85,8 +88,11 @@ button {
|
||||
|
||||
&.btn-sm {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
gap: 4px;
|
||||
|
||||
&.btn-compact {
|
||||
width: 28px;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
margin: 16px 0 0 4px;
|
||||
margin: 0 0 0 4px;
|
||||
background: transparent;
|
||||
color: rgba(var(--center-channel-color-rgb), 0.64);
|
||||
cursor: pointer;
|
||||
@ -40,6 +40,7 @@
|
||||
|
||||
&:active,
|
||||
&--active,
|
||||
&--active.btn.btn-icon,
|
||||
&--active:hover {
|
||||
background: rgba(var(--button-bg-rgb), 0.08);
|
||||
color: v(button-bg);
|
||||
@ -62,7 +63,6 @@
|
||||
}
|
||||
|
||||
.icon__text {
|
||||
margin: 0 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__icon--wide {
|
||||
.channel-header__info .channel-header__icons .channel-header__icon--wide {
|
||||
width: auto;
|
||||
min-width: unset;
|
||||
padding: 0 6px;
|
||||
@ -80,7 +80,7 @@
|
||||
.channel-header__icon--left {
|
||||
height: unset;
|
||||
padding: 4px;
|
||||
margin: 0 4px 0 0;
|
||||
margin: 0;
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
@charset "utf-8";
|
||||
|
||||
.app__body .popover.channel-header__popover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.header-popover-text-measurer {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
@ -73,15 +69,17 @@
|
||||
|
||||
&.channel-header__popover {
|
||||
z-index: 999;
|
||||
margin-left: 8px;
|
||||
min-width: 200px;
|
||||
margin-left: 3px;
|
||||
box-shadow: var(--elevation-4);
|
||||
font-size: 12px;
|
||||
|
||||
&.chanel-header__popover--lhs_offset {
|
||||
margin-left: 73px;
|
||||
margin-left: 68px;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
padding: 2px 3px;
|
||||
padding: 5px 8px 8px 8px;
|
||||
|
||||
.markdown__list {
|
||||
margin: 0;
|
||||
@ -95,10 +93,25 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.file-preview__button {
|
||||
display: inline-block;
|
||||
|
||||
.markdown-inline-img {
|
||||
margin: 0 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.emoticon {
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
min-height: 18px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
margin-top: -10px;
|
||||
margin-top: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,20 +4,25 @@
|
||||
position: relative;
|
||||
z-index: 15;
|
||||
width: 100%;
|
||||
max-height: 63px;
|
||||
flex: 0 0 63px;
|
||||
max-height: 56px;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
|
||||
background: v(center-channel-bg);
|
||||
font-size: 14px;
|
||||
|
||||
#channelHeaderDropdownButton {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.channel-header__trigger {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
height: 24px;
|
||||
flex: 1 1 0;
|
||||
align-items: center;
|
||||
padding: 4px 4px;
|
||||
padding: 4px 2px 4px 4px;
|
||||
border-radius: 4px;
|
||||
margin-right: 2px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(v(center-channel-color-rgb), 0.08);
|
||||
@ -33,9 +38,7 @@
|
||||
}
|
||||
|
||||
.heading > span {
|
||||
overflow: hidden;
|
||||
line-height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +47,7 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.channel-header__favorites {
|
||||
.btn.channel-header__favorites {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 24px;
|
||||
@ -56,7 +59,7 @@
|
||||
i {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
font-size: 18px;
|
||||
font-size: 18px !important;
|
||||
opacity: 0.64;
|
||||
}
|
||||
|
||||
@ -76,6 +79,7 @@
|
||||
|
||||
&.active {
|
||||
i {
|
||||
color: var(--button-bg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -84,63 +88,26 @@
|
||||
.channel-header__mute {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 24px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
margin-left: 4px;
|
||||
color: v(center-channel-color);
|
||||
float: left;
|
||||
|
||||
&:hover {
|
||||
background: rgba(v(center-channel-color-rgb), 0.08);
|
||||
|
||||
i {
|
||||
opacity: 0.73;
|
||||
}
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
.icon {
|
||||
color: v(center-channel-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
i {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
font-size: 16px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__icon {
|
||||
line-height: 16px;
|
||||
|
||||
.channel-header__members {
|
||||
font-size: 14.4px;
|
||||
}
|
||||
|
||||
.channel-header__pin {
|
||||
font-size: 14.4px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-parent {
|
||||
display: flex;
|
||||
padding: 0 16px 0 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flex-child {
|
||||
margin: 0 !important; //to override inline margin added by calls button
|
||||
|
||||
&:first-child {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding: 0 28px 0 0;
|
||||
padding: 0 24px 0 2px;
|
||||
}
|
||||
|
||||
.markdown__paragraph-inline {
|
||||
@ -214,8 +181,39 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.channel-header__info {
|
||||
.channel-header__description {
|
||||
.header-placeholder {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
//show divider between guests label and placeholder on hover
|
||||
&:has(.header-placeholder) .has-guest-header {
|
||||
&::after {
|
||||
height: 20px;
|
||||
border-left: solid 1px rgba(var(--center-channel-color-rgb), 0.12);
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.header-placeholder) .header-status__text {
|
||||
&::after {
|
||||
height: 20px;
|
||||
border-left: solid 1px rgba(var(--center-channel-color-rgb), 0.12);
|
||||
margin-left: 8px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
overflow: hidden;
|
||||
align-self: center;
|
||||
margin: 0 0 0 2px;
|
||||
color: var(--center-channel-color);
|
||||
font-family: Metropolis, sans-serif;
|
||||
@ -223,6 +221,7 @@
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.caret {
|
||||
@ -273,21 +272,57 @@
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.channel-header__top {
|
||||
.channel-header__top,
|
||||
.channel-header__bot {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
max-width: 60%;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
gap: 2px;
|
||||
|
||||
.channel-header__bot {
|
||||
margin-left: 4px;
|
||||
.status-wrapper {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.BotTag {
|
||||
margin: 0 8px 0 4px;
|
||||
}
|
||||
|
||||
.GuestTag {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.MenuWrapper {
|
||||
min-width: 0;
|
||||
flex: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__info {
|
||||
margin-top: 8px;
|
||||
padding: 4px 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.status-wrapper {
|
||||
.status {
|
||||
right: -5px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
@ -301,6 +336,7 @@
|
||||
|
||||
.channel-header__title {
|
||||
display: flex;
|
||||
height: 24px;
|
||||
|
||||
.channel-header__favorites {
|
||||
flex: 0 0 auto;
|
||||
@ -310,36 +346,33 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: inline-block;
|
||||
width: calc(100% - 65px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.MenuWrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__icons {
|
||||
display: flex;
|
||||
margin-right: 8px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.channel-header__description {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
height: 24px;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
span[data-emoticon] {
|
||||
@ -364,10 +397,10 @@
|
||||
}
|
||||
|
||||
.header-placeholder {
|
||||
display: flex;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
margin-left: 4px;
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
line-height: 16px;
|
||||
|
||||
span {
|
||||
@ -380,14 +413,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
//show guests divider if description is set
|
||||
&:has(.header-description__text){
|
||||
.has-guest-header {
|
||||
&::after {
|
||||
height: 20px;
|
||||
border-left: solid 1px rgba(var(--center-channel-color-rgb), 0.12);
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.header-status__text {
|
||||
&::after {
|
||||
height: 20px;
|
||||
border-left: solid 1px rgba(var(--center-channel-color-rgb), 0.12);
|
||||
margin-left: 8px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-description__text {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
align-self: start;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
line-height: 19px;
|
||||
height: 24px;
|
||||
line-height: inherit;
|
||||
|
||||
ul {
|
||||
&:first-child {
|
||||
@ -424,42 +475,11 @@
|
||||
margin: 1px 0 0;
|
||||
}
|
||||
|
||||
&.light {
|
||||
overflow: visible;
|
||||
color: inherit;
|
||||
opacity: 1;
|
||||
|
||||
button {
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
|
||||
i {
|
||||
color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: rgba(var(--center-channel-color-rgb), 0.88);
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
color: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.edit-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-inline-img {
|
||||
max-height: 45px;
|
||||
display: inline-block;
|
||||
max-height: 18px;
|
||||
margin: 0 2px !important;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
@ -467,18 +487,15 @@
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-left: 6px;
|
||||
margin-left: 0;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.has-guest-header {
|
||||
&::after {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin: 0 2px 0 5px;
|
||||
content: "\2022";
|
||||
}
|
||||
height: 16px;
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.header-status__text {
|
||||
@ -486,15 +503,44 @@
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
margin-right: 7px;
|
||||
margin-right: 8px;
|
||||
line-height: 16px;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.last-active__text {
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
|
||||
~ .custom-emoji__wrapper {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px){
|
||||
display: none;
|
||||
|
||||
~ .custom-emoji__wrapper {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.custom-emoji__wrapper {
|
||||
padding-left: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> span {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px){
|
||||
.custom-emoji__text {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
@ -136,12 +136,14 @@
|
||||
|
||||
.sidebar--right__title {
|
||||
display: flex;
|
||||
height: 2.4rem;
|
||||
height: auto;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
padding: 0 1.6rem;
|
||||
font-family: Metropolis, sans-serif;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
|
||||
@include clearfix;
|
||||
}
|
||||
@ -215,6 +217,7 @@
|
||||
|
||||
.sidebar--right__back {
|
||||
margin-right: 4px !important;
|
||||
margin-left: -8px !important;
|
||||
}
|
||||
|
||||
.controls {
|
||||
@ -307,13 +310,7 @@
|
||||
}
|
||||
|
||||
.sidebar--right__header {
|
||||
flex-basis: 63px;
|
||||
}
|
||||
|
||||
.sidebar--right__title {
|
||||
height: auto;
|
||||
align-items: center;
|
||||
line-height: 63px;
|
||||
flex-basis: 56px;
|
||||
}
|
||||
|
||||
// search bar container is now only for mobile
|
||||
|
||||
Loading…
Reference in New Issue
Block a user