IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

UI changes (#6876)

Browse Source 
* PLT-7011 - Long channel name truncation

* PLT-7013 - Fixing channel header mobile

* PLT-7012 - Updating quick switch modal on mobile

* PLT-7008 - Channel preferences mobile fix

* PLT-7014 - Increasing tap area for channel desc
This commit is contained in:
Asaad Mahmood
2017-07-08 04:27:38 +05:00
committed by Saturnino Abril
parent e8c02c7c1d
commit 06814885a0
7 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/navbar.jsx
View File

@@ -698,7 +698,7 @@ export default class Navbar extends React.Component {
/>
</span>
<span
className='icon icon__menu'
className='icon icon__menu icon--sidebarHeaderTextColor'
dangerouslySetInnerHTML={{__html: menuIcon}}
aria-hidden='true'
/>

2
webapp/components/quick_switch_modal/quick_switch_modal.jsx
View File

@@ -305,7 +305,7 @@ export default class QuickSwitchModal extends React.PureComponent {
<Modal.Header closeButton={true}/>
<Modal.Body>
{header}
<div className='modal__hint hidden-xs'>
<div className='modal__hint'>
{help}
</div>
<SuggestionBox

17
webapp/sass/layout/_headers.scss
View File

@@ -195,11 +195,14 @@
.channel-header__description {
display: inline-block;
height: 22px;
margin-top: 3px;
max-width: calc(100vw - 730px);
height: 35px;
margin-top: -10px;
max-width: calc(100vw - 720px);
overflow: hidden;
padding: 3px 0 0;
position: relative;
text-overflow: ellipsis;
top: 10px;
white-space: nowrap;
word-break: break-word;
@@ -209,7 +212,7 @@
}
.multi-teams & {
max-width: calc(100vw - 780px);
max-width: calc(100vw - 790px);
}
&.light {
@@ -223,7 +226,11 @@
}
.move--left & {
max-width: calc(100vw - 780px);
max-width: calc(100vw - 790px);
.multi-teams & {
max-width: calc(100vw - 840px);
}
}
.markdown-inline-img {

2
webapp/sass/layout/_navigation.scss
View File

@@ -104,13 +104,13 @@
padding: 0 .5em;
.heading {
color: $white;
display: inline-block;
font-weight: 600;
line-height: 50px;
margin-right: 5px;
max-width: calc(100% - 200px);
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}

5
webapp/sass/layout/_sidebar-right.scss
View File

@@ -207,6 +207,10 @@
}
}
.sidebar--right__title {
@include clearfix;
}
.sidebar--right__header {
@include flex(0 0 44px);
border-bottom: 1px solid;
@@ -214,6 +218,7 @@
font-size: 1em;
height: 44px;
line-height: 44px;
overflow: hidden;
padding: 0 5px 0 15px;
text-transform: uppercase;
}

5
webapp/sass/responsive/_mobile.scss
View File

@@ -781,10 +781,7 @@
.settings-content {
.section-edit {
padding-right: 0;
position: absolute;
right: 15px;
top: 14px;
text-align: left;
.fa {
display: inline-block;

4
webapp/utils/utils.jsx
View File

@@ -540,11 +540,11 @@ export function applyTheme(theme) {
if (theme.sidebarHeaderTextColor) {
changeCss('.app__body .status-wrapper .status_dropdown__toggle .status-edit, .multi-teams .team-sidebar .team-wrapper .team-container .team-btn, .sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor);
changeCss('.app__body .sidebar--left .status-wrapper .status_dropdown__toggle .offline--icon, .app__body .sidebar-header-dropdown__icon svg', 'fill:' + theme.sidebarHeaderTextColor);
changeCss('.app__body .icon--sidebarHeaderTextColor svg, .app__body .sidebar--left .status-wrapper .status_dropdown__toggle .offline--icon, .app__body .sidebar-header-dropdown__icon svg', 'fill:' + theme.sidebarHeaderTextColor);
changeCss('.sidebar--left .team__header .user__name, .app__body .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8));
changeCss('.sidebar--left .team__header:hover .user__name, .app__body .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor);
changeCss('.app__body .modal .modal-header .modal-title, .app__body .modal .modal-header .modal-title .name, .app__body .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor);
changeCss('.app__body #navbar .navbar-default .navbar-brand .heading', 'color:' + theme.sidebarHeaderTextColor);
changeCss('.app__body #navbar .navbar-default .navbar-brand .dropdown-toggle', 'color:' + theme.sidebarHeaderTextColor);
changeCss('.app__body #navbar .navbar-default .navbar-toggle .icon-bar', 'background:' + theme.sidebarHeaderTextColor);
changeCss('.app__body .post-list__timestamp > div', 'border-color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.5));
changeCss('@media(max-width: 768px){.app__body .search-bar__container', 'color:' + theme.sidebarHeaderTextColor);