From 3a91d4e5e419a43ff19a0736ce697f8d611d36e3 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Thu, 2 Mar 2017 17:48:56 -0500 Subject: PLT-3077 Add group messaging (#5489) * Implement server changes for group messaging * Majority of client-side implementation * Some server updates * Added new React multiselect component * Fix style issues * Add custom renderer for options * Fix model test * Update ENTER functionality for multiselect control * Remove buttons from multiselect UI control * Updating group messaging UI (#5524) * Move filter controls up a component level * Scroll with arrow keys * Updating mobile layout for multiselect (#5534) * Fix race condition when backspacing quickly * Hidden or new GMs show up for regular messages * Add overriding of number remaining text * Add UI filtering for team if config setting set * Add icon to channel switcher and class prop to status icon * Minor updates per feedback * Improving group messaging UI (#5563) * UX changes per feedback * Update email for group messages * UI fixes for group messaging (#5587) * Fix missing localization string * Add maximum users message when adding members to GM * Fix input clearing on Android * Updating group messaging UI (#5603) * Updating UI for group messaging (#5604) --- webapp/sass/components/_modal.scss | 27 ++++++++++++++ webapp/sass/components/_module.scss | 1 + webapp/sass/components/_multi-select.scss | 59 +++++++++++++++++++++++++++++++ webapp/sass/components/_status-icon.scss | 22 ++++++++++++ webapp/sass/layout/_headers.scss | 12 +++---- webapp/sass/responsive/_mobile.scss | 17 +++++++++ 6 files changed, 131 insertions(+), 7 deletions(-) create mode 100644 webapp/sass/components/_multi-select.scss (limited to 'webapp/sass') diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 0078ddec4..03a8ad1e8 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -170,6 +170,10 @@ float: left; font-size: 17px; line-height: 27px; + max-width: calc(100% - 80px); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; .name { color: $white; @@ -479,6 +483,10 @@ .filter-row { margin: 5px 0 10px; width: 300px; + + &.filter-row--full { + width: 100%; + } } .member-count { @@ -582,6 +590,24 @@ border-bottom: 1px solid $light-gray; display: flex; padding: 10px 15px; + + &.clickable { + cursor: pointer; + } + + &:hover { + .more-modal__actions--round { + opacity: .5; + } + } + } + + .more-modal__actions--round { + height: 32px; + line-height: 32px; + opacity: 0; + text-align: center; + width: 32px; } p { @@ -611,6 +637,7 @@ .more-modal__list { flex-grow: 500; + height: 1px; } .filter-button { diff --git a/webapp/sass/components/_module.scss b/webapp/sass/components/_module.scss index 3e587707d..c1114bbcb 100644 --- a/webapp/sass/components/_module.scss +++ b/webapp/sass/components/_module.scss @@ -9,6 +9,7 @@ @import 'links'; @import 'mentions'; @import 'modal'; +@import 'multi-select'; @import 'oauth'; @import 'popover'; @import 'save-button'; diff --git a/webapp/sass/components/_multi-select.scss b/webapp/sass/components/_multi-select.scss new file mode 100644 index 000000000..a33116aa4 --- /dev/null +++ b/webapp/sass/components/_multi-select.scss @@ -0,0 +1,59 @@ +@charset 'UTF-8'; + +.multi-select__container { + display: table; + padding: 0 15px; + width: 100%; + + .Select { + display: table-cell; + padding-right: 15px; + vertical-align: top; + width: 100%; + } + + .btn { + display: table-cell; + height: 36px; + min-width: 60px; + vertical-align: top; + } + + .Select-control { + border-radius: 1px; + } + + .Select-value { + white-space: nowrap; + } + + .Select-value-label { + overflow: hidden; + text-overflow: ellipsis; + } +} + +.multi-select__help { + padding: 10px 15px 0; + + > div:not(.multi-select__note), + > span { + @include opacity(.6); + } +} + +.multi-select__note { + @include border-radius(3px); + display: table; + margin-top: 5px; + padding: 8px 13px; + width: 100%; + + > div { + display: table-cell; + + &.note__icon { + width: 15px; + } + } +} diff --git a/webapp/sass/components/_status-icon.scss b/webapp/sass/components/_status-icon.scss index 5bd68f362..c2f8bca5b 100644 --- a/webapp/sass/components/_status-icon.scss +++ b/webapp/sass/components/_status-icon.scss @@ -36,6 +36,28 @@ top: 1px; width: 12px; + &.status--group { + border-radius: 2px; + font-size: 11px; + font-weight: 600; + height: 16px; + left: 1px; + line-height: 15px; + margin-left: -3px; + text-align: center; + top: -1px; + width: 16px; + + .mentions__name & { + height: 20px; + left: 0; + line-height: 20px; + margin-left: 0; + text-align: center; + width: 20px; + } + } + svg { max-height: 14px; } diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index e6dc6bb68..8ee6e8fdc 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -121,7 +121,7 @@ &.dropdown { float: left; - max-width: 100%; + max-width: 90%; padding-right: 1em; .header-dropdown__icon { @@ -182,7 +182,6 @@ } .channel-intro-profile { - margin-left: 63px; margin-top: 5px; .user-popover { @@ -193,7 +192,10 @@ } .channel-intro-img { - float: left; + .status-wrapper { + height: 50px; + margin: 0 10px 10px 0; + } img { @include border-radius(100px); @@ -211,10 +213,6 @@ background: $bg--gray; padding: 10px 15px; } - - .channel-intro-text { - margin-top: 35px; - } } // Team Header in Sidebar diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 3170fb0d4..ee26045ac 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,23 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .multi-select__container { + .btn { + display: block; + min-width: 50px; + } + + .Select-value-label { + max-width: 190px; + } + } + + .more-modal__list { + .more-modal__actions--round { + @include opacity(.5); + } + } + .post-create__container { padding-bottom: 10px; -- cgit v1.2.3-1-g7c22