From 9d55c5ee53fe241f6e30051f45621c2b7f1271cb Mon Sep 17 00:00:00 2001 From: Erik Michelson Date: Mon, 25 Mar 2024 13:39:17 +0100 Subject: [PATCH] fix(sidebar): remove double borders from sidebar menus Signed-off-by: Erik Michelson --- .../sidebar/sidebar-button/sidebar-button.module.scss | 11 ++++++++--- .../sidebar-menu-info-entry.module.css | 4 ++-- .../export-menu-sidebar-menu.tsx | 6 ++++-- .../import-menu-sidebar-menu.tsx | 6 ++++-- .../note-info-sidebar-menu/note-info-sidebar-menu.tsx | 6 ++++-- .../users-online-sidebar-menu.tsx | 5 +++-- 6 files changed, 25 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss b/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss index ed4b159bd..610caea5e 100644 --- a/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss +++ b/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss @@ -1,5 +1,5 @@ /*! - * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ @@ -10,8 +10,8 @@ width: 100%; display: flex; align-items: center; - border: solid 1px var(--sidebar-separator-color); - border-left: none; + border: none; + border-bottom: solid 1px var(--sidebar-separator-color); user-select: none; cursor: pointer; background: transparent; @@ -20,6 +20,11 @@ overflow: hidden; color: var(--bs-emphasis-color); + &.main { + border-top: solid 1px var(--sidebar-separator-color); + border-bottom-width: 2px; + } + &.hide { flex-basis: 0; height: 0; diff --git a/frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.module.css b/frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.module.css index df81e4e8d..1067dba04 100644 --- a/frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.module.css +++ b/frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.module.css @@ -1,10 +1,10 @@ /* - * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ .entry { - border: solid 1px var(--sidebar-separator-color); + border-bottom: solid 1px var(--sidebar-separator-color); } .title { diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx index 167eeb5aa..db5f6ae69 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ @@ -18,6 +18,8 @@ import { Github as IconGithub } from 'react-bootstrap-icons' import { Trans, useTranslation } from 'react-i18next' +import { concatCssClasses } from '../../../../utils/concat-css-classes' +import styles from '../sidebar-button/sidebar-button.module.scss' /** * Renders the export menu for the sidebar. @@ -46,7 +48,7 @@ export const ExportMenuSidebarMenu: React.FC = ({ {...cypressId('menu-export')} hide={hide} icon={expand ? IconArrowLeft : IconCloudDownload} - className={className} + className={concatCssClasses(className, { [styles.main]: expand })} onClick={onClickHandler}> diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx index fed9de218..f25de29b3 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ @@ -18,6 +18,8 @@ import { Github as IconGithub } from 'react-bootstrap-icons' import { Trans, useTranslation } from 'react-i18next' +import styles from '../sidebar-button/sidebar-button.module.scss' +import { concatCssClasses } from '../../../../utils/concat-css-classes' /** * Renders the import menu for the sidebar. @@ -46,7 +48,7 @@ export const ImportMenuSidebarMenu: React.FC = ({ {...cypressId('menu-import')} hide={hide} icon={expand ? IconArrowLeft : IconCloudUpload} - className={className} + className={concatCssClasses(className, { [styles.main]: expand })} onClick={onClickHandler}> diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-sidebar-menu.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-sidebar-menu.tsx index 964019653..803ad82b8 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-sidebar-menu.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-sidebar-menu.tsx @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ @@ -16,6 +16,8 @@ import { NoteInfoLineWordCount } from './note-info-line/note-info-line-word-coun import React, { Fragment, useCallback } from 'react' import { ArrowLeft as IconArrowLeft, GraphUp as IconGraphUp } from 'react-bootstrap-icons' import { Trans, useTranslation } from 'react-i18next' +import styles from '../../sidebar-button/sidebar-button.module.scss' +import { concatCssClasses } from '../../../../../utils/concat-css-classes' /** * Renders the note info menu for the sidebar. @@ -44,7 +46,7 @@ export const NoteInfoSidebarMenu: React.FC = ({ {...cypressId('sidebar-menu-info')} hide={hide} icon={expand ? IconArrowLeft : IconGraphUp} - className={className} + className={concatCssClasses(className, { [styles.main]: expand })} onClick={onClickHandler}> diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/users-online-sidebar-menu.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/users-online-sidebar-menu.tsx index 209e242db..ee2b1a792 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/users-online-sidebar-menu.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/users-online-sidebar-menu.tsx @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ @@ -15,6 +15,7 @@ import { UserLine } from './user-line/user-line' import React, { Fragment, useCallback, useEffect, useMemo, useRef } from 'react' import { ArrowLeft as IconArrowLeft, People as IconPeople } from 'react-bootstrap-icons' import { Trans, useTranslation } from 'react-i18next' +import buttonStyles from '../../sidebar-button/sidebar-button.module.scss' /** * Sidebar menu that contains the list of currently online users in the current note session. @@ -69,7 +70,7 @@ export const UsersOnlineSidebarMenu: React.FC = ({ buttonRef={buttonRef} onClick={onClickHandler} icon={expand ? IconArrowLeft : IconPeople} - className={concatCssClasses(styles.entry, className)}> + className={concatCssClasses(styles.entry, buttonStyles.main, className)}>