mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

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 7dcb68a8e333a2c95444d417ed9a244c9c30aa99.
Этот коммит содержится в:
Asaad Mahmood
2017-08-04 20:45:59 +05:00
коммит произвёл Saturnino Abril
родитель fac865bf65
Коммит a5f1a77fa5
9 изменённых файлов: 123 добавлений и 223 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

192
webapp/components/channel_header.jsx
Просмотреть файл

@@ -841,107 +841,103 @@ export default class ChannelHeader extends React.Component {
id='channel-header' id='channel-header'
className='channel-header alt' className='channel-header alt'
> >
<table> <div className='flex-parent'>
<tbody> <div className='flex-child'>
<tr> <div className='channel-header__info'>
<th> {toggleFavorite}
<div className='channel-header__info'> <div className='channel-header__title dropdown'>
{toggleFavorite} <a
<div className='channel-header__title dropdown'> id='channelHeaderDropdown'
<a href='#'
id='channelHeaderDropdown' className='dropdown-toggle theme'
href='#' type='button'
className='dropdown-toggle theme' data-toggle='dropdown'
type='button' aria-expanded='true'
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 <strong className='heading'>{channelTitle} </strong>
className={pinnedIconClass} <span className='fa fa-angle-down header-dropdown__icon'/>
onClick={this.getPinnedPosts} </a>
> <ul
<span className='dropdown-menu'
className='icon icon__pin' role='menu'
dangerouslySetInnerHTML={{__html: pinIcon}} aria-labelledby='channel_header_dropdown'
aria-hidden='true' >
/> {dropdownContents}
</div> </ul>
</OverlayTrigger> </div>
</th> {headerTextContainer}
<th className='search-bar__container'> </div>
<NavbarSearchBox </div>
showMentionFlagBtns={false} <div className='flex-child'>
isFocus={Utils.isMobile()} {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> </div>
<th> </OverlayTrigger>
<OverlayTrigger </div>
trigger={['hover', 'focus']} <div className='flex-child search-bar__container'>
delayShow={Constants.OVERLAY_TIME_DELAY} <NavbarSearchBox
placement='bottom' showMentionFlagBtns={false}
overlay={recentMentionsTooltip} isFocus={Utils.isMobile()}
> />
<div </div>
className='channel-header__icon icon--hidden' <div className='flex-child'>
onClick={this.searchMentions} <OverlayTrigger
> trigger={['hover', 'focus']}
<span delayShow={Constants.OVERLAY_TIME_DELAY}
className='icon icon__mentions' placement='bottom'
dangerouslySetInnerHTML={{__html: mentionsIcon}} overlay={recentMentionsTooltip}
aria-hidden='true' >
/> <div
</div> className='channel-header__icon icon--hidden'
</OverlayTrigger> onClick={this.searchMentions}
</th> >
<th> <span
<OverlayTrigger className='icon icon__mentions'
trigger={['hover', 'focus']} dangerouslySetInnerHTML={{__html: mentionsIcon}}
delayShow={Constants.OVERLAY_TIME_DELAY} aria-hidden='true'
placement='bottom' />
overlay={flaggedTooltip} </div>
> </OverlayTrigger>
<div </div>
className='channel-header__icon icon--hidden' <div className='flex-child'>
onClick={this.getFlagged} <OverlayTrigger
trigger={['hover', 'focus']}
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='bottom'
overlay={flaggedTooltip}
>
<div
className='channel-header__icon icon--hidden'
onClick={this.getFlagged}
> >
<span <span
className='icon icon__flag' className='icon icon__flag'
dangerouslySetInnerHTML={{__html: flagIcon}} dangerouslySetInnerHTML={{__html: flagIcon}}
/> />
</div> </div>
</OverlayTrigger> </OverlayTrigger>
</th> </div>
</tr> </div>
</tbody>
</table>
{editHeaderModal} {editHeaderModal}
{editPurposeModal} {editPurposeModal}
{channelMembersModal} {channelMembersModal}

2
webapp/components/search_results_item.jsx
Просмотреть файл

@@ -126,7 +126,7 @@ export default class SearchResultsItem extends React.Component {
let className = 'post post--thread'; let className = 'post post--thread';
if (this.props.compactDisplay) { if (this.props.compactDisplay) {
className = ' post--compact'; className += ' post--compact';
} }
if (this.state.dropdownOpened) { if (this.state.dropdownOpened) {

4
webapp/sass/components/_search.scss
Просмотреть файл

@@ -118,6 +118,10 @@
border: none; border: none;
} }
.post__header {
padding-right: 70px;
}
.search-channel__name { .search-channel__name {
font-weight: 600; font-weight: 600;
margin: 0 0 10px; margin: 0 0 10px;

80
webapp/sass/layout/_headers.scss
Просмотреть файл

@@ -8,6 +8,24 @@
width: 100%; width: 100%;
z-index: 9; 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 { .channel-header__icon {
@include border-radius(50%); @include border-radius(50%);
border: 1px solid; 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 { .heading {
display: inline-block; display: inline-block;
font-size: 17px; font-size: 17px;
font-weight: 400; font-weight: 400;
margin: 0 4px 0 0; margin: 0 4px 0 0;
max-width: calc(100vw - 780px); max-width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: top; vertical-align: top;
white-space: nowrap; 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 { .caret {
@@ -177,6 +156,7 @@
.channel-header__info { .channel-header__info {
margin-top: 12px; margin-top: 12px;
white-space: nowrap;
.channel-header__title { .channel-header__title {
.header-dropdown__icon { .header-dropdown__icon {
@@ -186,6 +166,7 @@
> a { > a {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
width: calc(100% - 65px);
} }
.modal { .modal {
@@ -194,27 +175,18 @@
} }
.channel-header__description { .channel-header__description {
display: inline-block;
height: 35px; height: 35px;
margin-top: -10px;
max-width: calc(100vw - 740px);
overflow: hidden; overflow: hidden;
padding: 3px 0 0; padding: 3px 0 0;
position: relative; position: relative;
text-overflow: ellipsis; text-overflow: ellipsis;
top: 10px; width: calc(100% - 18px);
white-space: pre;
word-break: break-word;
.markdown__heading { .markdown__heading {
font-size: 1em; font-size: 1em;
margin: 0; margin: 0;
} }
.multi-teams & {
max-width: calc(100vw - 810px);
}
&.light { &.light {
@include opacity(.6); @include opacity(.6);
color: inherit; color: inherit;
@@ -225,14 +197,6 @@
} }
} }
.move--left & {
max-width: calc(100vw - 810px);
.multi-teams & {
max-width: calc(100vw - 860px);
}
}
.markdown-inline-img { .markdown-inline-img {
max-height: 45px; max-height: 45px;
} }

2
webapp/sass/layout/_post-right.scss
Просмотреть файл

@@ -35,7 +35,7 @@
border: none !important; border: none !important;
right: 5px; right: 5px;
text-align: right; text-align: right;
top: 0; top: -3px;
} }
} }

2
webapp/sass/layout/_sidebar-right.scss
Просмотреть файл

@@ -47,7 +47,7 @@
&:last-child { &:last-child {
.channel-header__icon { .channel-header__icon {
margin-right: 17px; margin-right: 10px;
} }
} }
} }

16
webapp/sass/responsive/_desktop.scss
Просмотреть файл

@@ -86,22 +86,6 @@
width: 150px; 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 { .integration-option {

4
webapp/sass/responsive/_mobile.scss
Просмотреть файл

@@ -1624,10 +1624,6 @@
height: auto; height: auto;
} }
} }
.post__header {
padding-right: 50px;
}
} }
} }

44
webapp/sass/responsive/_tablet.scss
Просмотреть файл

@@ -1,30 +1,6 @@
@charset 'UTF-8'; @charset 'UTF-8';
@media screen and (max-width: 960px) { @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 { .textarea-wrapper {
.textbox-preview-link, .textbox-preview-link,
.textbox-help-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-right__scroll {
.post-create__container { .post-create__container {
.post-create-body { .post-create-body {