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
2025-02-25 18:55:24 -06:00 · 2017-06-07 02:24:23 +05:00
parent 6e7b912ec6
commit 1eed253fc2
9 changed files with 67 additions and 66 deletions
--- 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
--- 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>
        );
--- 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>",
--- a/webapp/images/themes/mattermost.png
+++ b/webapp/images/themes/mattermost.png
--- 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;

--- 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 {
--- 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;
        }
    }

--- 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: {
--- 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) {