github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-21 09:16:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-03-08 19:26:56 +01:00
parent 2a07e968a3
commit 0acf2e9067
No known key found for this signature in database
GPG key ID: 42498463316F048B
4 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/components/editor-page/editor-page-content.tsx
View file

@ -130,14 +130,13 @@ export const EditorPageContent: React.FC = () => {
<HeadMetaProperties />
<MotdModal />
<div className={'d-flex flex-column vh-100'}>
<AppBar mode={AppBarMode.EDITOR} />
<div className={'flex-fill d-flex h-100 w-100 overflow-hidden flex-row'}>
<Sidebar />
<Splitter
left={leftPane}
right={rightPane}
additionalContainerClassName={'overflow-hidden position-relative'}
/>
<Sidebar />
</div>
</div>
</ExtensionEventEmitterProvider>

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

@ -11,6 +11,7 @@
flex: 0 0 $height;
width: 100%;
display: flex;
flex-wrap: revert;
align-items: center;
border: solid 1px rgba(0, 0, 0, 0.15);
user-select: none;
@ -19,6 +20,7 @@
padding: 0;
transition: height 0.2s, flex-basis 0.2s;
overflow: hidden;
flex-direction: row-reverse;
&.hide {
flex-basis: 0;
@ -55,6 +57,7 @@
text-align: left;
flex: 1 1 0;
width: 0;
padding-left: 0.375rem;
}
@mixin colors {

3
frontend/src/components/editor-page/sidebar/sidebar.tsx
View file

@ -3,6 +3,8 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import LogoColor from '../../common/hedge-doc-logo/logo_color.svg'
import LogoColorVertical from '../../common/hedge-doc-logo/logo_text_color_vertical.svg'
import { DeleteNoteSidebarEntry } from './delete-note-sidebar-entry/delete-note-sidebar-entry'
import { AliasesSidebarEntry } from './specific-sidebar-entries/aliases-sidebar-entry'
import { ExportMenuSidebarMenu } from './specific-sidebar-entries/export-menu-sidebar-menu'
@ -41,6 +43,7 @@ export const Sidebar: React.FC = () => {
return (
<div className={styles['slide-sidebar']}>
<LogoColor height={'40px'} width={'40px'} className={'p-2'}></LogoColor>
<div ref={sideBarRef} className={`${styles['sidebar-inner']} ${selectionIsNotNone ? styles['show'] : ''}`}>
<UsersOnlineSidebarMenu
menuId={DocumentSidebarMenuSelection.USERS_ONLINE}

10
frontend/src/components/editor-page/sidebar/style/sidebar.module.scss
View file

@ -9,23 +9,25 @@
flex: 0 0 $height;
position: relative;
border-right: solid 1px white;
.sidebar-inner {
height: 100%;
border-right: solid 1px white;
height: calc(100% - 50px);
display: flex;
overflow-y: auto;
flex-direction: column;
position: absolute;
z-index: 999;
width: $menu-width;
top: 0;
left: 0;
top: $height;
left: (-$menu-width + $height) + 1px;
transition: left 0.3s;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
&:hover, &.show {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
left: (-$menu-width + $height);
left: 0;
}
background: var(--bs-light);