From e25343021e5db53378311bab764bdbffb1344182 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Thu, 12 Aug 2021 11:40:09 +0200 Subject: [PATCH] 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-plugin/webapp/src/index.tsx | 2 +- mattermost-plugin/webapp/src/plugin.scss | 9 +++-- .../components/globalHeader/globalHeader.scss | 1 + webapp/src/components/sidebar/sidebar.tsx | 21 ++++++------ .../components/sidebar/sidebarUserMenu.scss | 6 +--- .../components/sidebar/sidebarUserMenu.tsx | 34 +++++++------------ webapp/src/pages/boardPage.tsx | 8 ++--- webapp/src/widgets/icons/logo.scss | 3 +- webapp/src/widgets/icons/logo.tsx | 2 +- 9 files changed, 38 insertions(+), 48 deletions(-) diff --git a/mattermost-plugin/webapp/src/index.tsx b/mattermost-plugin/webapp/src/index.tsx index c0dfebea80c..46f3b318c31 100644 --- 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 index 1dcd09fabb0..55eb1ac3c71 100644 --- 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 index 071b2656fae..f3445befbd1 100644 --- 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 index 0c5af5a2a22..5b5697c891f 100644 --- 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 (
-
-
- -
+ {!Utils.isFocalboardPlugin() && +
+
+ +
-
- setHidden(true)} - icon={} - /> -
+
+ setHidden(true)} + icon={} + /> +
} {workspace && workspace.id !== '0' &&
{workspace.title} diff --git a/webapp/src/components/sidebar/sidebarUserMenu.scss b/webapp/src/components/sidebar/sidebarUserMenu.scss index 7ea26643399..afc9c6957bd 100644 --- 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 index 8545d7f4cc8..96ed1940c66 100644 --- 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(getMe) const intl = useIntl() + + if (Utils.isFocalboardPlugin()) { + return <> + } return (
- {focalboardTitle && - <> - - {'Focalboard'} - } - {!focalboardTitle && - <> - - {'Boards'} - } - {focalboardTitle && -
-
- {`v${Constants.versionString}`} -
- {showVersionBadge &&
{'BETA'}
} -
} + + {'Focalboard'} +
+
+ {`v${Constants.versionString}`} +
+
- {showAccountActions && user && user.username !== 'single-user' && <> + {user && user.username !== 'single-user' && <> {user.username} { 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 index c5b46ad4638..2a56bafeb7e 100644 --- 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 index 73c5c53d898..a7bcafd5dad 100644 --- 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 ( ) }