mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
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 7dcb68a8e3.
This commit is contained in:
Asaad Mahmood
committed by
Saturnino Abril
Saturnino Abril
parent
fac865bf65
commit
a5f1a77fa5
@@ -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='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={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()}
|
||||
<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>
|
||||
</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'
|
||||
/>
|
||||
</th>
|
||||
<th>
|
||||
<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>
|
||||
</th>
|
||||
<th>
|
||||
<OverlayTrigger
|
||||
trigger={['hover', 'focus']}
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
placement='bottom'
|
||||
overlay={flaggedTooltip}
|
||||
>
|
||||
<div
|
||||
className='channel-header__icon icon--hidden'
|
||||
onClick={this.getFlagged}
|
||||
</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>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
>
|
||||
<span
|
||||
className='icon icon__flag'
|
||||
dangerouslySetInnerHTML={{__html: flagIcon}}
|
||||
/>
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
</div>
|
||||
{editHeaderModal}
|
||||
{editPurposeModal}
|
||||
{channelMembersModal}
|
||||
|
||||
@@ -126,7 +126,7 @@ export default class SearchResultsItem extends React.Component {
|
||||
let className = 'post post--thread';
|
||||
|
||||
if (this.props.compactDisplay) {
|
||||
className = ' post--compact';
|
||||
className += ' post--compact';
|
||||
}
|
||||
|
||||
if (this.state.dropdownOpened) {
|
||||
|
||||
@@ -118,6 +118,10 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.post__header {
|
||||
padding-right: 70px;
|
||||
}
|
||||
|
||||
.search-channel__name {
|
||||
font-weight: 600;
|
||||
margin: 0 0 10px;
|
||||
|
||||
@@ -8,6 +8,24 @@
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
|
||||
.flex-parent {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-child {
|
||||
&:first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.markdown__paragraph-inline {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__icon {
|
||||
@include border-radius(50%);
|
||||
border: 1px solid;
|
||||
@@ -89,55 +107,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: center;
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
padding: 0 0 0 20px;
|
||||
text-align: left !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.channel-header__icon {
|
||||
margin-right: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 13px;
|
||||
padding: 5px 25px 5px !important;
|
||||
text-align: center !important;
|
||||
|
||||
&:first-child {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: inline-block;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
margin: 0 4px 0 0;
|
||||
max-width: calc(100vw - 780px);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
|
||||
.move--left & {
|
||||
max-width: calc(100vw - 850px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 905px);
|
||||
}
|
||||
}
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 850px);
|
||||
}
|
||||
}
|
||||
|
||||
.caret {
|
||||
@@ -177,6 +156,7 @@
|
||||
|
||||
.channel-header__info {
|
||||
margin-top: 12px;
|
||||
white-space: nowrap;
|
||||
|
||||
.channel-header__title {
|
||||
.header-dropdown__icon {
|
||||
@@ -186,6 +166,7 @@
|
||||
> a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
width: calc(100% - 65px);
|
||||
}
|
||||
|
||||
.modal {
|
||||
@@ -194,27 +175,18 @@
|
||||
}
|
||||
|
||||
.channel-header__description {
|
||||
display: inline-block;
|
||||
height: 35px;
|
||||
margin-top: -10px;
|
||||
max-width: calc(100vw - 740px);
|
||||
overflow: hidden;
|
||||
padding: 3px 0 0;
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
top: 10px;
|
||||
white-space: pre;
|
||||
word-break: break-word;
|
||||
width: calc(100% - 18px);
|
||||
|
||||
.markdown__heading {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 810px);
|
||||
}
|
||||
|
||||
&.light {
|
||||
@include opacity(.6);
|
||||
color: inherit;
|
||||
@@ -225,14 +197,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.move--left & {
|
||||
max-width: calc(100vw - 810px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 860px);
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-inline-img {
|
||||
max-height: 45px;
|
||||
}
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
border: none !important;
|
||||
right: 5px;
|
||||
text-align: right;
|
||||
top: 0;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
&:last-child {
|
||||
.channel-header__icon {
|
||||
margin-right: 17px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,22 +86,6 @@
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
max-width: calc(100vw - 800px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 775px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__info {
|
||||
.channel-header__description {
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 730px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.integration-option {
|
||||
|
||||
@@ -1624,10 +1624,6 @@
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.post__header {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,30 +1,6 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.inner-wrap {
|
||||
&.move--left {
|
||||
.channel-header {
|
||||
.heading {
|
||||
max-width: calc(100vw - 620px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 670px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__info {
|
||||
.channel-header__description {
|
||||
max-width: calc(100vw - 620px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 670px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-wrapper {
|
||||
.textbox-preview-link,
|
||||
.textbox-help-link {
|
||||
@@ -32,26 +8,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__info {
|
||||
.channel-header__description {
|
||||
max-width: calc(100vw - 680px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 730px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header {
|
||||
.heading {
|
||||
max-width: calc(100vw - 720px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 770px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-right__scroll {
|
||||
.post-create__container {
|
||||
.post-create-body {
|
||||
|
||||
Reference in New Issue
Block a user