diff options
author | Joram Wilander <jwawilander@gmail.com> | 2017-03-02 17:48:56 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-03-02 17:48:56 -0500 |
commit | 3a91d4e5e419a43ff19a0736ce697f8d611d36e3 (patch) | |
tree | e57ad85d49f8768a575f27c89d338a4ccaeda521 /webapp/sass/components | |
parent | 8c5cee9521656bcffb371aad9dae4bea8fc70e29 (diff) | |
download | chat-3a91d4e5e419a43ff19a0736ce697f8d611d36e3.tar.gz chat-3a91d4e5e419a43ff19a0736ce697f8d611d36e3.tar.bz2 chat-3a91d4e5e419a43ff19a0736ce697f8d611d36e3.zip |
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)
Diffstat (limited to 'webapp/sass/components')
-rw-r--r-- | webapp/sass/components/_modal.scss | 27 | ||||
-rw-r--r-- | webapp/sass/components/_module.scss | 1 | ||||
-rw-r--r-- | webapp/sass/components/_multi-select.scss | 59 | ||||
-rw-r--r-- | webapp/sass/components/_status-icon.scss | 22 |
4 files changed, 109 insertions, 0 deletions
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; } |