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 {
<Modal.Header closeButton={true}/>
<Modal.Body>
{header}
<div className='modal__hint'>
<div className='modal__hint hidden-xs'>
{help}
</div>
<SuggestionBox
......
......@@ -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>
);
......
......@@ -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>",
......
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 @@
.channel-switch-modal {
.modal-header {
background: transparent;
border: none;
min-height: 0;
padding: 0;
......
......@@ -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 {
......
......@@ -10,7 +10,7 @@
.channel-header {
.heading {
max-width: 100px;
max-width: 90px;
}
}
......
......@@ -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: {
......
......@@ -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) {
......
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