github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-10-22 15:12:08 -04: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 /> <HeadMetaProperties />
<MotdModal /> <MotdModal />
<div className={'d-flex flex-column vh-100'}> <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'}> <div className={'flex-fill d-flex h-100 w-100 overflow-hidden flex-row'}>
<Sidebar />
<Splitter <Splitter
left={leftPane} left={leftPane}
right={rightPane} right={rightPane}
additionalContainerClassName={'overflow-hidden position-relative'} additionalContainerClassName={'overflow-hidden position-relative'}
/> />
<Sidebar />
</div> </div>
</div> </div>
</ExtensionEventEmitterProvider> </ExtensionEventEmitterProvider>

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

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

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

@ -3,6 +3,8 @@
* *
* SPDX-License-Identifier: AGPL-3.0-only * 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 { DeleteNoteSidebarEntry } from './delete-note-sidebar-entry/delete-note-sidebar-entry'
import { AliasesSidebarEntry } from './specific-sidebar-entries/aliases-sidebar-entry' import { AliasesSidebarEntry } from './specific-sidebar-entries/aliases-sidebar-entry'
import { ExportMenuSidebarMenu } from './specific-sidebar-entries/export-menu-sidebar-menu' import { ExportMenuSidebarMenu } from './specific-sidebar-entries/export-menu-sidebar-menu'
@ -41,6 +43,7 @@ export const Sidebar: React.FC = () => {
return ( return (
<div className={styles['slide-sidebar']}> <div className={styles['slide-sidebar']}>
<LogoColor height={'40px'} width={'40px'} className={'p-2'}></LogoColor>
<div ref={sideBarRef} className={`${styles['sidebar-inner']} ${selectionIsNotNone ? styles['show'] : ''}`}> <div ref={sideBarRef} className={`${styles['sidebar-inner']} ${selectionIsNotNone ? styles['show'] : ''}`}>
<UsersOnlineSidebarMenu <UsersOnlineSidebarMenu
menuId={DocumentSidebarMenuSelection.USERS_ONLINE} 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; flex: 0 0 $height;
position: relative; position: relative;
border-right: solid 1px white;
.sidebar-inner { .sidebar-inner {
height: 100%; border-right: solid 1px white;
height: calc(100% - 50px);
display: flex; display: flex;
overflow-y: auto; overflow-y: auto;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
width: $menu-width; width: $menu-width;
top: 0; top: $height;
left: 0; left: (-$menu-width + $height) + 1px;
transition: left 0.3s; transition: left 0.3s;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
&:hover, &.show { &:hover, &.show {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
left: (-$menu-width + $height); left: 0;
} }
background: var(--bs-light); background: var(--bs-light);