Minor bug fixes (#182)

* PLT-7838 - Increasing whitespace above embed * PLT-7841 - Switch channel button style issue * PLT-7948 - Post control menu background fix mobile * PLT-7835 - Updating position of reply icon * PLT-7282 - Updating user list styling
mattermost · Oct 25, 2017 · c8ae25a · c8ae25a
1 parent 2fdb712
commit c8ae25a
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 9 deletions.
diff --git a/sass/components/_modal.scss b/sass/components/_modal.scss
@@ -622,15 +622,14 @@
  }
 
  .more-modal__name {
- font-size: .95em;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }
 
  .more-modal__description {
- @include opacity(.7);
+ @include opacity(.6);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;

diff --git a/sass/layout/_post.scss b/sass/layout/_post.scss
@@ -1205,6 +1205,7 @@
  .post__embed-container {
  @include single-transition(max-height, .5, ease);
  display: block;
+ margin-top: 5px;
  max-height: 1000px;
  overflow: hidden;
 

diff --git a/sass/layout/_sidebar-left.scss b/sass/layout/_sidebar-left.scss
@@ -78,7 +78,7 @@
  width: 100%;
 
  button {
- @include single-transition(all, .15s, ease-in);
+ background: transparent;
  display: block;
  font-weight: 600;
  height: 45px;

diff --git a/sass/responsive/_mobile.scss b/sass/responsive/_mobile.scss
@@ -275,6 +275,14 @@
  }
  }
 
+ &.post--system {
+ .post__header {
+ .col__reply {
+ min-width: 70px;
+ }
+ }
+ }
+
  .reacticon__container {
  display: none;
  }
@@ -341,6 +349,26 @@
  padding: 0 10px 0 0;
  }
 
+ &.current--user {
+ .post__header {
+ margin-bottom: 7px;
+ }
+
+ &.same--root {
+ &.same--user {
+ .post__header {
+ margin-bottom: 7px;
+ }
+ }
+ }
+
+ &.post--comment {
+ .post__header {
+ margin-bottom: 3px;
+ }
+ }
+ }
+
  .post__header {
  margin-bottom: 0;
  padding-right: 70px;
@@ -410,7 +438,7 @@
  &.post--comment {
  .post__header {
  .col__reply {
- top: -3px;
+ top: -6px;
  }
  }
  }
@@ -1373,6 +1401,23 @@
 }
 
 @media screen and (max-width: 640px) {
+ .col__reply {
+ .dropdown-menu {
+ > li {
+ > button {
+ border-top: 1px solid;
+ padding: 15px 20px;
+ }
+
+ &:first-child {
+ button {
+ border: none;
+ }
+ }
+ }
+ }
+ }
+
  .filtered-user-list {
  height: calc(100vh - 80px);
  }

diff --git a/utils/utils.jsx b/utils/utils.jsx
@@ -513,7 +513,7 @@ export function applyTheme(theme) {
  changeCss('.app__body .sidebar--left .sidebar__switcher', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
  changeCss('@media(max-width: 768px){.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + changeOpacity(theme.sidebarText, 0.6));
  changeCss('@media(max-width: 768px){.app__body .search__icon svg', 'stroke:' + theme.sidebarText);
- changeCss('.app__body .sidebar--left .sidebar__switcher button', 'color:' + theme.sidebarText);
+ changeCss('.app__body .sidebar--left .sidebar__switcher span', 'color:' + theme.sidebarText);
  changeCss('.app__body .sidebar--left .sidebar__switcher button svg', 'fill:' + theme.sidebarText);
  changeCss('.app__body .sidebar__switcher button', 'background:' + changeOpacity(theme.sidebarText, 0.08));
  }
@@ -588,6 +588,7 @@ export function applyTheme(theme) {
  }
 
  if (theme.centerChannelBg) {
+ changeCss('@media(max-width: 640px){.app__body .post .dropdown .dropdown-menu button', 'background:' + theme.centerChannelBg);
  changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'background:' + theme.centerChannelBg);
  changeCss('@media(max-width: 320px){.tutorial-steps__container', 'background:' + theme.centerChannelBg);
  changeCss('.app__body .channel-header__info .channel-header__description:before, .app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .modal-footer, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span, .app__body .status-wrapper .status, .app__body .alert.alert-transparent', 'background:' + theme.centerChannelBg);
@@ -612,7 +613,7 @@ export function applyTheme(theme) {
 
  if (theme.centerChannelColor) {
  changeCss('.app__body .mentions__name .status.status--group, .app__body .multi-select__note', 'background:' + changeOpacity(theme.centerChannelColor, 0.12));
- changeCss('.app__body .member-list__popover .more-modal__body, .app__body .alert.alert-transparent, .app__body .channel-header .channel-header__icon, .app__body .search-bar__container .search__form, .app__body .table > thead > tr > th, .app__body .table > tbody > tr > td', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.12));
+ changeCss('.app__body .post .dropdown .dropdown-menu button, .app__body .member-list__popover .more-modal__body, .app__body .alert.alert-transparent, .app__body .channel-header .channel-header__icon, .app__body .search-bar__container .search__form, .app__body .table > thead > tr > th, .app__body .table > tbody > tr > td', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.12));
  changeCss('.app__body .post-list__arrows, .app__body .post .flag-icon__container', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3));
  changeCss('@media(min-width: 768px){.app__body .search__icon svg', 'stroke:' + changeOpacity(theme.centerChannelColor, 0.4));
  changeCss('.app__body .channel-header__icon svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.4));
@@ -1058,11 +1059,29 @@ export function displayEntireNameForUser(user) {
  const fullName = getFullName(user);
 
  if (fullName && user.nickname) {
- displayName += ` - ${fullName} (${user.nickname})`;
+ displayName = (
+ <span>
+ {'@' + user.username}
+ {' - '}
+ <span className='light'>{fullName + ' (' + user.nickname + ')'}</span>
+ </span>
+ );
  } else if (fullName) {
- displayName += ` - ${fullName}`;
+ displayName = (
+ <span>
+ {'@' + user.username}
+ {' - '}
+ <span className='light'>{fullName}</span>
+ </span>
+ );
  } else if (user.nickname) {
- displayName += ` - ${user.nickname}`;
+ displayName = (
+ <span>
+ {'@' + user.username}
+ {' - '}
+ <span className='light'>{'(' + user.nickname + ')'}</span>
+ </span>
+ );
  }
 
  return displayName;