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
mattermost · Jun 6, 2017 · 1a20c1f · 1a20c1f
1 parent 8e782cb
commit 1a20c1f
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 66 deletions.
diff --git a/components/quick_switch_modal/quick_switch_modal.jsx b/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/components/sidebar.jsx b/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/i18n/en.json b/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/images/themes/mattermost.png b/images/themes/mattermost.png
diff --git a/sass/components/_modal.scss b/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/sass/layout/_sidebar-left.scss b/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/sass/responsive/_tablet.scss b/sass/responsive/_tablet.scss
@@ -10,7 +10,7 @@
 
  .channel-header {
  .heading {
- max-width: 100px;
+ max-width: 90px;
  }
  }
 

diff --git a/utils/constants.jsx b/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/utils/utils.jsx b/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) {