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/_multi-select.scss | 59 +++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 webapp/sass/components/_multi-select.scss (limited to 'webapp/sass/components/_multi-select.scss') 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; + } + } +} -- cgit v1.2.3-1-g7c22