diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-06-07 02:24:23 +0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-06-06 17:24:23 -0400 |
commit | 1eed253fc23bf164d18ea506cf3bc35ce0ce1fbb (patch) | |
tree | 7a82d501c2894f4956cad4e53b42ce5dda1482e3 | |
parent | 6e7b912ec61a6a791e0e8405ff6f6bd7e622a187 (diff) | |
download | chat-1eed253fc23bf164d18ea506cf3bc35ce0ce1fbb.tar.gz chat-1eed253fc23bf164d18ea506cf3bc35ce0ce1fbb.tar.bz2 chat-1eed253fc23bf164d18ea506cf3bc35ce0ce1fbb.zip |
Channel switcher UI improvements (#6564)
* Channel switcher UI improvements
* Reverting mattermost theme
* Fixing spacing above the button
* Updating switcher button
* PLT-6691 - Fixing tablet header
-rw-r--r-- | webapp/components/quick_switch_modal/quick_switch_modal.jsx | 2 | ||||
-rw-r--r-- | webapp/components/sidebar.jsx | 27 | ||||
-rwxr-xr-x | webapp/i18n/en.json | 10 | ||||
-rw-r--r-- | webapp/images/themes/mattermost.png | bin | 67199 -> 93862 bytes | |||
-rw-r--r-- | webapp/sass/components/_modal.scss | 1 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-left.scss | 47 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 2 | ||||
-rw-r--r-- | webapp/utils/constants.jsx | 36 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 8 |
9 files changed, 67 insertions, 66 deletions
diff --git a/webapp/components/quick_switch_modal/quick_switch_modal.jsx b/webapp/components/quick_switch_modal/quick_switch_modal.jsx index 779b8aa8b..5ee074c31 100644 --- a/webapp/components/quick_switch_modal/quick_switch_modal.jsx +++ b/webapp/components/quick_switch_modal/quick_switch_modal.jsx @@ -301,7 +301,7 @@ export default class QuickSwitchModal extends React.PureComponent { <Modal.Header closeButton={true}/> <Modal.Body> {header} - <div className='modal__hint'> + <div className='modal__hint hidden-xs'> {help} </div> <SuggestionBox diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index b998700d8..f87c3944c 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -806,11 +806,13 @@ export default class Sidebar extends React.Component { ); } - let quickSwitchText = 'sidebar.switch_channels'; - let quickSwitchDefault = 'Switch Channels (CTRL + K)'; + const quickSwitchText = 'channel_switch_modal.title'; + + let quickSwitchTextShortcut = 'quick_switch_modal.channelsShortcut.windows'; + let quickSwitchDefault = '- CTRL+K'; if (Utils.isMac()) { - quickSwitchText += '.mac'; - quickSwitchDefault = 'Switch Channels (CMD + K)'; + quickSwitchTextShortcut = 'quick_switch_modal.channelsShortcut.mac'; + quickSwitchDefault = '- ⌘K'; } return ( @@ -913,17 +915,22 @@ export default class Sidebar extends React.Component { {directMessageMore} </ul> </div> - <div style={{height: '20px', width: '100%'}}> - <a - href='#' - className='sidebar__switcher' + <div className='sidebar__switcher'> + <button + className='btn btn-link' onClick={this.openQuickSwitcher} > <FormattedMessage id={quickSwitchText} - defaultMessage={quickSwitchDefault} + defaultMessage='Switch Channels' /> - </a> + <span className='switch__shortcut'> + <FormattedMessage + id={quickSwitchTextShortcut} + defaultMessage={quickSwitchDefault} + /> + </span> + </button> </div> </div> ); diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index a250e5e6c..dedf97d68 100755 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1173,10 +1173,10 @@ "quick_switch_modal.help_no_team": "Type a channel name. Use ↑↓ to browse, ↵ to confirm, ESC to dismiss", "quick_switch_modal.channels": "Channels", "quick_switch_modal.teams": "Teams", - "quick_switch_modal.teamsShortcut.mac": "(CMD+ALT+K)", - "quick_switch_modal.teamsShortcut.windows": "(CTRL+ALT+K)", - "quick_switch_modal.channelsShortcut.mac": "(CMD+K)", - "quick_switch_modal.channelsShortcut.windows": "(CTRL+K)", + "quick_switch_modal.teamsShortcut.mac": "- ⌘⌥K", + "quick_switch_modal.teamsShortcut.windows": "- CTRL+ALT+K", + "quick_switch_modal.channelsShortcut.mac": "- ⌘K", + "quick_switch_modal.channelsShortcut.windows": "- CTRL+K", "channel_switch_modal.not_found": "No matches found.", "channel_switch_modal.submit": "Switch", "channel_switch_modal.title": "Switch Channels", @@ -1974,8 +1974,6 @@ "sidebar.moreElips": "More...", "sidebar.otherMembers": "Outside this team", "sidebar.pg": "Private Channels", - "sidebar.switch_channels": "Switch Channels (CTRL + K)", - "sidebar.switch_channels.mac": "Switch Channels (CMD + K)", "sidebar.removeList": "Remove from list", "sidebar.tutorialScreen1": "<h4>Channels</h4><p><strong>Channels</strong> organize conversations across different topics. They’re open to everyone on your team. To send private communications use <strong>Direct Messages</strong> for a single person or <strong>Private Channel</strong> for multiple people.</p>", "sidebar.tutorialScreen2": "<h4>\"{townsquare}\" and \"{offtopic}\" channels</h4><p>Here are two public channels to start:</p><p><strong>{townsquare}</strong> is a place for team-wide communication. Everyone in your team is a member of this channel.</p><p><strong>{offtopic}</strong> is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.</p>", diff --git a/webapp/images/themes/mattermost.png b/webapp/images/themes/mattermost.png Binary files differindex d11a8db29..8dea37ff6 100644 --- a/webapp/images/themes/mattermost.png +++ b/webapp/images/themes/mattermost.png diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index de7d9cdfb..f92ae042e 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -79,6 +79,7 @@ .channel-switch-modal { .modal-header { background: transparent; + border: none; min-height: 0; padding: 0; diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index abe49b9c6..9323253c7 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -44,42 +44,37 @@ } .sidebar__switcher { - border-top: 2px solid; + border-top: 1px solid; bottom: 0; display: block; - height: 45px; - line-height: 45px; position: absolute; - text-align: center; - text-decoration: none; width: 100%; - &:after { + button { @include single-transition(all, .15s, ease-in); - background: alpha-color($black, .1); - content: ''; - display: none; - height: 100%; - left: 0; - position: absolute; - top: 0; + display: block; + height: 42px; + text-align: center; + text-decoration: none; width: 100%; - } - - span { - @include single-transition(all, .15s, ease-in); - @include opacity(.8); - } - &:hover { - &:after { - display: block; + > span { + @include single-transition(all, .15s, ease-in); + @include opacity(.6); + position: relative; + z-index: 5; } - span { - @include opacity(1); + &:hover { + span { + @include opacity(1); + } } } + + .switch__shortcut { + margin-left: 4px; + } } .dropdown-menu { @@ -105,7 +100,7 @@ .nav-pills__container { -webkit-overflow-scrolling: touch; - height: calc(100% - 110px); + height: calc(100% - 99px); overflow: auto; position: relative; } @@ -127,7 +122,7 @@ } .nav-pills__unread-indicator-bottom { - bottom: 60px; + bottom: 50px; } .nav { diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index da99cc8e9..70b5e9b8f 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -10,7 +10,7 @@ .channel-header { .heading { - max-width: 100px; + max-width: 90px; } } diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index ea87f2cd4..dc0856888 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -481,28 +481,28 @@ export const Constants = { }, mattermost: { type: 'Mattermost', - sidebarBg: '#1a1d1f', - sidebarText: '#ffffff', - sidebarUnreadText: '#e8e8e8', - sidebarTextHoverBg: '#525252', - sidebarTextActiveBorder: '#27a1b2', - sidebarTextActiveColor: '#ffffff', - sidebarHeaderBg: '#1a1d1f', + sidebarBg: '#fafafa', + sidebarText: '#333333', + sidebarUnreadText: '#333333', + sidebarTextHoverBg: '#e6f2fa', + sidebarTextActiveBorder: '#378FD2', + sidebarTextActiveColor: '#111111', + sidebarHeaderBg: '#3481B9', sidebarHeaderTextColor: '#ffffff', - onlineIndicator: '#1fc1d9', - awayIndicator: '#c4c492', - mentionBj: '#ba3939', + onlineIndicator: '#7DBE00', + awayIndicator: '#DCBD4E', + mentionBj: '#2389d7', mentionColor: '#ffffff', centerChannelBg: '#ffffff', - centerChannelColor: '#2d3138', - newMessageSeparator: '#1c8c99', - linkColor: '#1c8c99', - buttonBg: '#27a1b2', + centerChannelColor: '#333333', + newMessageSeparator: '#FF8800', + linkColor: '#2389d7', + buttonBg: '#23A2FF', buttonColor: '#FFFFFF', - errorTextColor: '#cc2d2d', - mentionHighlightBg: '#1c8c99', - mentionHighlightLink: '#ffffff', - codeTheme: 'monokai', + errorTextColor: '#a94442', + mentionHighlightBg: '#f3e197', + mentionHighlightLink: '#2f81b7', + codeTheme: 'github', image: mattermostThemeImage }, mattermostDark: { diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 09875fe02..de0976c14 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -499,10 +499,10 @@ export function applyTheme(theme) { if (theme.sidebarText) { changeCss('.app__body .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y', 'background:' + theme.sidebarText); changeCss('.app__body .ps-container:hover .ps-scrollbar-y-rail:hover', 'background:' + changeOpacity(theme.sidebarText, 0.15)); - changeCss('.sidebar--left .nav-pills__container li>a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6)); + changeCss('.sidebar--left .nav-pills__container li > a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6)); changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.8)); - changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6)); - changeCss('.app__body .sidebar--left .sidebar__switcher, .sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText); + changeCss('.sidebar--left .nav-pills__container li > h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6)); + changeCss('.app__body .sidebar--left .sidebar__switcher button, .sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText); changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText); changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3)); changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2)); @@ -515,7 +515,7 @@ export function applyTheme(theme) { } if (theme.sidebarTextHoverBg) { - changeCss('.sidebar--left .nav-pills__container li>a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a', 'background:' + theme.sidebarTextHoverBg); + changeCss('.sidebar--left .nav-pills__container li > a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a, .app__body .sidebar__switcher button:hover', 'background:' + theme.sidebarTextHoverBg); } if (theme.sidebarTextActiveBorder) { |