Moving logo and title to the global header (#947)

* Moving logo and title to the global header * Fixing problems with the new header * Fixing lint problems
mattermost-community · Aug 12, 2021 · e253430 · e253430
1 parent 1aff49f
commit e253430
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 48 deletions.
diff --git a/mattermost-plugin/webapp/src/index.tsx b/mattermost-plugin/webapp/src/index.tsx
@@ -106,7 +106,7 @@ export default class Plugin {
                 useEffect(() => {
                     const currentChannel = store.getState().entities.channels.currentChannelId
                     if (currentChannel) {
-                        history.push(`/boards/workspace/${currentChannel}`)
+                        history.replace(`/boards/workspace/${currentChannel}`)
                     } else {
                         history.goBack()
                     }

diff --git a/mattermost-plugin/webapp/src/plugin.scss b/mattermost-plugin/webapp/src/plugin.scss
@@ -1,10 +1,13 @@
 .channel-header__icon .LogoIcon {
     height: 24px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
 }
 
 .FocalboardGlobalHeaderIcon .LogoIcon {
-    height: 24px;
-    width: 24px;
+    height: 20px;
+    width: 20px;
     display: inline-block;
-    fill: rgb(var(--center-channel-color-rgb));
+    font-size: 14px;
 }
diff --git a/webapp/src/components/globalHeader/globalHeader.scss b/webapp/src/components/globalHeader/globalHeader.scss
@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: row;
     margin-right: 20px;
+    width: 100%;
     .spacer {
         flex-grow: 1;
     }

diff --git a/webapp/src/components/sidebar/sidebar.tsx b/webapp/src/components/sidebar/sidebar.tsx
@@ -62,17 +62,18 @@ const Sidebar = React.memo((props: Props) => {
 
     return (
         <div className='Sidebar octo-sidebar'>
-            <div className='octo-sidebar-header'>
-                <div className='heading'>
-                    <SidebarUserMenu/>
-                </div>
+            {!Utils.isFocalboardPlugin() &&
+                <div className='octo-sidebar-header'>
+                    <div className='heading'>
+                        <SidebarUserMenu/>
+                    </div>
 
-                <div className='octo-spacer'/>
-                <IconButton
-                    onClick={() => setHidden(true)}
-                    icon={<HideSidebarIcon/>}
-                />
-            </div>
+                    <div className='octo-spacer'/>
+                    <IconButton
+                        onClick={() => setHidden(true)}
+                        icon={<HideSidebarIcon/>}
+                    />
+                </div>}
             {workspace && workspace.id !== '0' &&
                 <div className='WorkspaceTitle'>
                     {workspace.title}

diff --git a/webapp/src/components/sidebar/sidebarUserMenu.scss b/webapp/src/components/sidebar/sidebarUserMenu.scss
@@ -11,11 +11,7 @@
             font-size: 16px;
             margin-right: 5px;
 
-            .logo__icon {
-                font-size: 24px;
-            }
-
-            .LogoIcon, .FocalboardLogoIcon {
+            .FocalboardLogoIcon {
                 fill: rgba(var(--sidebar-text-rgb), 1);
                 color: rgba(var(--sidebar-text-rgb), 1);
                 height: 24px;

diff --git a/webapp/src/components/sidebar/sidebarUserMenu.tsx b/webapp/src/components/sidebar/sidebarUserMenu.tsx
@@ -8,7 +8,6 @@ import {useHistory} from 'react-router-dom'
 import {Constants} from '../../constants'
 import octoClient from '../../octoClient'
 import {IUser} from '../../user'
-import LogoIcon from '../../widgets/icons/logo'
 import FocalboardLogoIcon from '../../widgets/icons/focalboard_logo'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
@@ -25,38 +24,29 @@ import './sidebarUserMenu.scss'
 const SidebarUserMenu = React.memo(() => {
     const history = useHistory()
     const [showRegistrationLinkDialog, setShowRegistrationLinkDialog] = useState(false)
-    const showVersionBadge = Utils.isFocalboardPlugin()
-    const focalboardTitle = !Utils.isFocalboardPlugin()
-    const showAccountActions = !Utils.isFocalboardPlugin()
     const user = useAppSelector<IUser|null>(getMe)
     const intl = useIntl()
+
+    if (Utils.isFocalboardPlugin()) {
+        return <></>
+    }
     return (
         <div className='SidebarUserMenu'>
             <ModalWrapper>
                 <MenuWrapper>
                     <div className='logo'>
                         <div className='logo-title'>
-                            {focalboardTitle &&
-                                <>
-                                    <FocalboardLogoIcon/>
-                                    <span>{'Focalboard'}</span>
-                                </>}
-                            {!focalboardTitle &&
-                                <>
-                                    <LogoIcon/>
-                                    <span>{'Boards'}</span>
-                                </>}
-                            {focalboardTitle &&
-                                <div className='versionFrame'>
-                                    <div className='version'>
-                                        {`v${Constants.versionString}`}
-                                    </div>
-                                    {showVersionBadge && <div className='versionBadge'>{'BETA'}</div>}
-                                </div>}
+                            <FocalboardLogoIcon/>
+                            <span>{'Focalboard'}</span>
+                            <div className='versionFrame'>
+                                <div className='version'>
+                                    {`v${Constants.versionString}`}
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <Menu>
-                        {showAccountActions && user && user.username !== 'single-user' && <>
+                        {user && user.username !== 'single-user' && <>
                             <Menu.Label><b>{user.username}</b></Menu.Label>
                             <Menu.Text
                                 id='logout'

diff --git a/webapp/src/pages/boardPage.tsx b/webapp/src/pages/boardPage.tsx
@@ -60,7 +60,7 @@ const BoardPage = (props: Props) => {
                 params.viewId = queryViewId
             }
             const newPath = generatePath(match.path, params)
-            history.push(newPath)
+            history.replace(newPath)
         }
     }, [])
 
@@ -71,7 +71,7 @@ const BoardPage = (props: Props) => {
             const viewId = localStorage.getItem('lastViewId') || undefined
             if (boardId) {
                 const newPath = generatePath(match.path, {...match.params, boardId, viewId})
-                history.push(newPath)
+                history.replace(newPath)
             }
         }
     }, [])
@@ -83,13 +83,13 @@ const BoardPage = (props: Props) => {
         Utils.log(`attachToBoard: ${boardId}`)
         if (boardId && !viewId && boardViews.length > 0) {
             const newPath = generatePath(match.path, {...match.params, boardId, viewId: boardViews[0].id})
-            history.push(newPath)
+            history.replace(newPath)
         }
 
         const view = boardViews.find((v) => v.id === viewId)
         if (!view && boardViews.length > 0) {
             const newPath = generatePath(match.path, {...match.params, boardId, viewId: boardViews[0].id})
-            history.push(newPath)
+            history.replace(newPath)
             return
         }
 

diff --git a/webapp/src/widgets/icons/logo.scss b/webapp/src/widgets/icons/logo.scss
@@ -1,5 +1,4 @@
 .focalboard-body .LogoIcon {
-    width: 32px;
-    height: 32px;
+    font-size: 16px;
     color: rgba(var(--main-fg), 0.7);
 }
diff --git a/webapp/src/widgets/icons/logo.tsx b/webapp/src/widgets/icons/logo.tsx
@@ -10,7 +10,7 @@ export default function LogoIcon(): JSX.Element {
     return (
         <CompassIcon
             icon='product-boards'
-            className='logo__icon'
+            className='LogoIcon'
         />
     )
 }