diff options
-rw-r--r-- | webapp/components/filtered_user_list.jsx | 29 | ||||
-rw-r--r-- | webapp/components/sidebar.jsx | 10 | ||||
-rw-r--r-- | webapp/components/view_image.jsx | 5 | ||||
-rw-r--r-- | webapp/i18n/en.json | 1 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 27 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-left.scss | 26 | ||||
-rw-r--r-- | webapp/utils/constants.jsx | 2 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 4 |
8 files changed, 69 insertions, 35 deletions
diff --git a/webapp/components/filtered_user_list.jsx b/webapp/components/filtered_user_list.jsx index 83747c03d..cffafd663 100644 --- a/webapp/components/filtered_user_list.jsx +++ b/webapp/components/filtered_user_list.jsx @@ -104,26 +104,9 @@ class FilteredUserList extends React.Component { let count; if (users.length === this.state.users.length) { - count = ( - <FormattedMessage - id='filtered_user_list.count' - defaultMessage='{count} {count, plural, =0 {0 members} one {member} other {members}}' - values={{ - count: users.length - }} - /> - ); + count = '(' + users.length + ')'; } else { - count = ( - <FormattedMessage - id='filtered_user_list.countTotal' - defaultMessage='{count} {count, plural, =0 {0 members} one {member} other {members}} of {total} Total' - values={{ - count: users.length, - total: this.state.users.length - }} - /> - ); + count = '(' + this.state.users.length + ')'; } let teamToggle; @@ -133,9 +116,10 @@ class FilteredUserList extends React.Component { teamMembers = []; teamToggle = ( - <div className='col-sm-6'> + <div className='member-select__container'> + <span className='member-count'>{count}</span> <select - className='form-control member-select' + className='form-control' id='restrictList' ref='restrictList' defaultValue='team' @@ -171,9 +155,8 @@ class FilteredUserList extends React.Component { /> </div> <div className='col-sm-6'> - <span className='member-count'>{count}</span> + {teamToggle} </div> - {teamToggle} </div> <div ref='userList' diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index 29ad60acc..3bfe47393 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -509,7 +509,15 @@ export default class Sidebar extends React.Component { let directDivider; if (directMessageNonTeamItems.length !== 0) { - directDivider = <hr/>; + directDivider = + (<div className='sidebar__divider'> + <div className='sidebar__divider__text'> + <FormattedMessage + id='sidebar.otherMembers' + defaultMessage='Other teams' + /> + </div> + </div>); } // update the favicon to show if there are any notifications diff --git a/webapp/components/view_image.jsx b/webapp/components/view_image.jsx index ccde54c78..c4d7cb4aa 100644 --- a/webapp/components/view_image.jsx +++ b/webapp/components/view_image.jsx @@ -319,7 +319,6 @@ class ViewImageModal extends React.Component { onClick={this.props.onModalDismissed} > <div - className='modal-back' onMouseEnter={this.onMouseEnterImage} onMouseLeave={this.onMouseLeaveImage} onClick={(e) => e.stopPropagation()} @@ -328,7 +327,9 @@ class ViewImageModal extends React.Component { className={closeButtonClass} onClick={this.props.onModalDismissed} /> - {content} + <div className='modal-image__content'> + {content} + </div> <ViewImagePopoverBar show={this.state.showFooter} fileId={this.state.imgId} diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 7e060564a..4fb57f1e4 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1129,6 +1129,7 @@ "sidebar.createGroup": "Create new group", "sidebar.direct": "Direct Messages", "sidebar.more": "More", + "sidebar.otherMembers": "Other teams", "sidebar.moreElips": "More...", "sidebar.pg": "Private Groups", "sidebar.removeList": "Remove from list", diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 90afe1b11..d53be29dc 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -217,6 +217,13 @@ width: 100%; } + .modal-image__content { + max-height: 85vh; + max-width: 90vw; + overflow-x: hidden; + overflow-y: visible; + } + .modal-image__wrapper { @include border-radius(3px); display: table-cell; @@ -365,6 +372,7 @@ bottom: -40px; left: 0; line-height: 40px; + max-width: 90vw; padding: 0 10px; position: absolute; right: 0; @@ -439,16 +447,21 @@ .member-show { @include opacity(.8); float: right; - margin-top: 12px; margin-right: 3px; + margin-top: 12px; } - .member-select { - @include opacity(.8); - float: right; - width: auto; - margin-top: 5px; - margin-right: 5px; + .member-select__container { + .member-count { + margin: 12px 0 0 3px; + } + + select { + @include opacity(.8); + float: right; + margin: 5px 5px 0 2px; + width: auto; + } } .more-purpose { diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index 3a5e74570..ad23df6ca 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -12,6 +12,32 @@ padding-top: 44px; } + .sidebar__divider { + color: $white; + font-size: .9em; + height: 20px; + margin: 5px 0 6px; + line-height: 20px; + position: relative; + + &:before { + background: $light-gray; + content: ''; + height: 1px; + position: absolute; + top: 10px; + width: 100%; + } + + .sidebar__divider__text { + background: $primary-color; + float: right; + padding: 0 10px; + position: relative; + z-index: 1; + } + } + .dropdown-menu { max-height: 400px; max-width: 200px; diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 7a900dca5..109291d1f 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -327,7 +327,7 @@ export default { sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#4A5664', - sidebarTextActiveBorder: '#39769C', + sidebarTextActiveBorder: '#66B9A7', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1B2C3E', sidebarHeaderTextColor: '#FFFFFF', diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 9d4ddee53..2f728226c 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -590,7 +590,7 @@ export function toTitleCase(str) { export function applyTheme(theme) { if (theme.sidebarBg) { - changeCss('.app__body .sidebar--left, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .sidebar--menu', 'background:' + theme.sidebarBg, 1); + changeCss('.app__body .sidebar--left, .app__body .sidebar--left .sidebar__divider .sidebar__divider__text, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .sidebar--menu', 'background:' + theme.sidebarBg, 1); changeCss('body.app__body', 'scrollbar-face-color:' + theme.sidebarBg, 3); } @@ -614,6 +614,8 @@ export function applyTheme(theme) { if (theme.sidebarTextActiveBorder) { changeCss('.app__body .sidebar--left .nav li.active a:before, .app__body .modal .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder, 1); + changeCss('.app__body .sidebar--left .sidebar__divider:before', 'background:' + changeOpacity(theme.sidebarTextActiveBorder, 0.5), 1); + changeCss('.app__body .sidebar--left .sidebar__divider', 'color:' + theme.sidebarTextActiveBorder, 1); } if (theme.sidebarTextActiveColor) { |