Commit 1a20c1f0 authored by Asaad Mahmood's avatar Asaad Mahmood Committed by Joram Wilander

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
parent 8e782cb0
...@@ -301,7 +301,7 @@ export default class QuickSwitchModal extends React.PureComponent { ...@@ -301,7 +301,7 @@ export default class QuickSwitchModal extends React.PureComponent {
<Modal.Header closeButton={true}/> <Modal.Header closeButton={true}/>
<Modal.Body> <Modal.Body>
{header} {header}
<div className='modal__hint'> <div className='modal__hint hidden-xs'>
{help} {help}
</div> </div>
<SuggestionBox <SuggestionBox
......
...@@ -806,11 +806,13 @@ export default class Sidebar extends React.Component { ...@@ -806,11 +806,13 @@ export default class Sidebar extends React.Component {
); );
} }
let quickSwitchText = 'sidebar.switch_channels'; const quickSwitchText = 'channel_switch_modal.title';
let quickSwitchDefault = 'Switch Channels (CTRL + K)';
let quickSwitchTextShortcut = 'quick_switch_modal.channelsShortcut.windows';
let quickSwitchDefault = '- CTRL+K';
if (Utils.isMac()) { if (Utils.isMac()) {
quickSwitchText += '.mac'; quickSwitchTextShortcut = 'quick_switch_modal.channelsShortcut.mac';
quickSwitchDefault = 'Switch Channels (CMD + K)'; quickSwitchDefault = '- ⌘K';
} }
return ( return (
...@@ -913,17 +915,22 @@ export default class Sidebar extends React.Component { ...@@ -913,17 +915,22 @@ export default class Sidebar extends React.Component {
{directMessageMore} {directMessageMore}
</ul> </ul>
</div> </div>
<div style={{height: '20px', width: '100%'}}> <div className='sidebar__switcher'>
<a <button
href='#' className='btn btn-link'
className='sidebar__switcher'
onClick={this.openQuickSwitcher} onClick={this.openQuickSwitcher}
> >
<FormattedMessage <FormattedMessage
id={quickSwitchText} id={quickSwitchText}
defaultMessage={quickSwitchDefault} defaultMessage='Switch Channels'
/> />
</a> <span className='switch__shortcut'>
<FormattedMessage
id={quickSwitchTextShortcut}
defaultMessage={quickSwitchDefault}
/>
</span>
</button>
</div> </div>
</div> </div>
); );
......
...@@ -1173,10 +1173,10 @@ ...@@ -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.help_no_team": "Type a channel name. Use ↑↓ to browse, ↵ to confirm, ESC to dismiss",
"quick_switch_modal.channels": "Channels", "quick_switch_modal.channels": "Channels",
"quick_switch_modal.teams": "Teams", "quick_switch_modal.teams": "Teams",
"quick_switch_modal.teamsShortcut.mac": "(CMD+ALT+K)", "quick_switch_modal.teamsShortcut.mac": "- ⌘⌥K",
"quick_switch_modal.teamsShortcut.windows": "(CTRL+ALT+K)", "quick_switch_modal.teamsShortcut.windows": "- CTRL+ALT+K",
"quick_switch_modal.channelsShortcut.mac": "(CMD+K)", "quick_switch_modal.channelsShortcut.mac": "- ⌘K",
"quick_switch_modal.channelsShortcut.windows": "(CTRL+K)", "quick_switch_modal.channelsShortcut.windows": "- CTRL+K",
"channel_switch_modal.not_found": "No matches found.", "channel_switch_modal.not_found": "No matches found.",
"channel_switch_modal.submit": "Switch", "channel_switch_modal.submit": "Switch",
"channel_switch_modal.title": "Switch Channels", "channel_switch_modal.title": "Switch Channels",
...@@ -1974,8 +1974,6 @@ ...@@ -1974,8 +1974,6 @@
"sidebar.moreElips": "More...", "sidebar.moreElips": "More...",
"sidebar.otherMembers": "Outside this team", "sidebar.otherMembers": "Outside this team",
"sidebar.pg": "Private Channels", "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.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.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>", "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>",
......
images/themes/mattermost.png

65.6 KB | W: | H:

images/themes/mattermost.png

91.7 KB | W: | H:

images/themes/mattermost.png
images/themes/mattermost.png
images/themes/mattermost.png
images/themes/mattermost.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -79,6 +79,7 @@ ...@@ -79,6 +79,7 @@
.channel-switch-modal { .channel-switch-modal {
.modal-header { .modal-header {
background: transparent; background: transparent;
border: none;
min-height: 0; min-height: 0;
padding: 0; padding: 0;
......
...@@ -44,42 +44,37 @@ ...@@ -44,42 +44,37 @@
} }
.sidebar__switcher { .sidebar__switcher {
border-top: 2px solid; border-top: 1px solid;
bottom: 0; bottom: 0;
display: block; display: block;
height: 45px;
line-height: 45px;
position: absolute; position: absolute;
text-align: center;
text-decoration: none;
width: 100%; width: 100%;
&:after { button {
@include single-transition(all, .15s, ease-in); @include single-transition(all, .15s, ease-in);
background: alpha-color($black, .1); display: block;
content: ''; height: 42px;
display: none; text-align: center;
height: 100%; text-decoration: none;
left: 0;
position: absolute;
top: 0;
width: 100%; width: 100%;
}
span {
@include single-transition(all, .15s, ease-in);
@include opacity(.8);
}
&:hover { > span {
&:after { @include single-transition(all, .15s, ease-in);
display: block; @include opacity(.6);
position: relative;
z-index: 5;
} }
span { &:hover {
@include opacity(1); span {
@include opacity(1);
}
} }
} }
.switch__shortcut {
margin-left: 4px;
}
} }
.dropdown-menu { .dropdown-menu {
...@@ -105,7 +100,7 @@ ...@@ -105,7 +100,7 @@
.nav-pills__container { .nav-pills__container {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
height: calc(100% - 110px); height: calc(100% - 99px);
overflow: auto; overflow: auto;
position: relative; position: relative;
} }
...@@ -127,7 +122,7 @@ ...@@ -127,7 +122,7 @@
} }
.nav-pills__unread-indicator-bottom { .nav-pills__unread-indicator-bottom {
bottom: 60px; bottom: 50px;
} }
.nav { .nav {
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
.channel-header { .channel-header {
.heading { .heading {
max-width: 100px; max-width: 90px;
} }
} }
......
...@@ -481,28 +481,28 @@ export const Constants = { ...@@ -481,28 +481,28 @@ export const Constants = {
}, },
mattermost: { mattermost: {
type: 'Mattermost', type: 'Mattermost',
sidebarBg: '#1a1d1f', sidebarBg: '#fafafa',
sidebarText: '#ffffff', sidebarText: '#333333',
sidebarUnreadText: '#e8e8e8', sidebarUnreadText: '#333333',
sidebarTextHoverBg: '#525252', sidebarTextHoverBg: '#e6f2fa',
sidebarTextActiveBorder: '#27a1b2', sidebarTextActiveBorder: '#378FD2',
sidebarTextActiveColor: '#ffffff', sidebarTextActiveColor: '#111111',
sidebarHeaderBg: '#1a1d1f', sidebarHeaderBg: '#3481B9',
sidebarHeaderTextColor: '#ffffff', sidebarHeaderTextColor: '#ffffff',
onlineIndicator: '#1fc1d9', onlineIndicator: '#7DBE00',
awayIndicator: '#c4c492', awayIndicator: '#DCBD4E',
mentionBj: '#ba3939', mentionBj: '#2389d7',
mentionColor: '#ffffff', mentionColor: '#ffffff',
centerChannelBg: '#ffffff', centerChannelBg: '#ffffff',
centerChannelColor: '#2d3138', centerChannelColor: '#333333',
newMessageSeparator: '#1c8c99', newMessageSeparator: '#FF8800',
linkColor: '#1c8c99', linkColor: '#2389d7',
buttonBg: '#27a1b2', buttonBg: '#23A2FF',
buttonColor: '#FFFFFF', buttonColor: '#FFFFFF',
errorTextColor: '#cc2d2d', errorTextColor: '#a94442',
mentionHighlightBg: '#1c8c99', mentionHighlightBg: '#f3e197',
mentionHighlightLink: '#ffffff', mentionHighlightLink: '#2f81b7',
codeTheme: 'monokai', codeTheme: 'github',
image: mattermostThemeImage image: mattermostThemeImage
}, },
mattermostDark: { mattermostDark: {
......
...@@ -499,10 +499,10 @@ export function applyTheme(theme) { ...@@ -499,10 +499,10 @@ export function applyTheme(theme) {
if (theme.sidebarText) { if (theme.sidebarText) {
changeCss('.app__body .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y', 'background:' + 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('.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('@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('.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('.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 .offline--icon', 'fill:' + theme.sidebarText);
changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3)); 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)); 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) { ...@@ -515,7 +515,7 @@ export function applyTheme(theme) {
} }
if (theme.sidebarTextHoverBg) { 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) { if (theme.sidebarTextActiveBorder) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment