github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-24 18:56:32 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(sidebar): remove double borders from sidebar menus

Browse source 
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2024-03-25 13:39:17 +01:00
parent 1e8590da6c
commit 9d55c5ee53
6 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss
View file

@ -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;

4
frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.module.css
View file

@ -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 {

6
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx
View file

@ -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<SpecificSidebarMenuProps> = ({
{...cypressId('menu-export')}
hide={hide}
icon={expand ? IconArrowLeft : IconCloudDownload}
className={className}
className={concatCssClasses(className, { [styles.main]: expand })}
onClick={onClickHandler}>
<Trans i18nKey={'editor.documentBar.export'} />
</SidebarButton>

6
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx
View file

@ -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<SpecificSidebarMenuProps> = ({
{...cypressId('menu-import')}
hide={hide}
icon={expand ? IconArrowLeft : IconCloudUpload}
className={className}
className={concatCssClasses(className, { [styles.main]: expand })}
onClick={onClickHandler}>
<Trans i18nKey={'editor.documentBar.import'} />
</SidebarButton>

6
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-sidebar-menu.tsx
View file

@ -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<SpecificSidebarMenuProps> = ({
{...cypressId('sidebar-menu-info')}
hide={hide}
icon={expand ? IconArrowLeft : IconGraphUp}
className={className}
className={concatCssClasses(className, { [styles.main]: expand })}
onClick={onClickHandler}>
<Trans i18nKey={'editor.noteInfo.title'} />
</SidebarButton>

5
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/users-online-sidebar-menu.tsx
View file

@ -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<SpecificSidebarMenuProps> = ({
buttonRef={buttonRef}
onClick={onClickHandler}
icon={expand ? IconArrowLeft : IconPeople}
className={concatCssClasses(styles.entry, className)}>
className={concatCssClasses(styles.entry, buttonStyles.main, className)}>
<Trans i18nKey={'editor.onlineStatus.online'} />
</SidebarButton>
<SidebarMenu expand={expand}>