Skip to content

Commit a452174

Browse files
author
James
committed
add sidebar, alignment and style updates
1 parent 3a3bdb9 commit a452174

File tree

12 files changed

+161
-40
lines changed

12 files changed

+161
-40
lines changed

‎frontend/src/cse-ui-kit/small_buttons/CenterAlignButton.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { MouseEventHandler } from 'react';
2+
import { StyledButton, buttonProps, scaleRate } from './small_buttons-Styled';
3+
import AlignHorizontalCenterIcon from '@mui/icons-material/AlignHorizontalCenter';
4+
5+
type Props = {
6+
onClick?: MouseEventHandler<HTMLDivElement>;
7+
onMouseDown?: MouseEventHandler<HTMLDivElement>;
8+
} & buttonProps;
9+
10+
export default function CenterAlignButton({
11+
onClick,
12+
onMouseDown,
13+
...styleProps
14+
}: Props) {
15+
return (
16+
<StyledButton onClick={onClick} onMouseDown={onMouseDown} {...styleProps}>
17+
<AlignHorizontalCenterIcon
18+
height={styleProps.size * scaleRate.smallButtonRate}
19+
width={styleProps.size * scaleRate.smallButtonRate}
20+
/>
21+
</StyledButton>
22+
);
23+
}

‎frontend/src/cse-ui-kit/small_buttons/LeftAlignButton.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { MouseEventHandler } from 'react';
2+
import { StyledButton, buttonProps, scaleRate } from './small_buttons-Styled';
3+
import AlignHorizontalLeftIcon from '@mui/icons-material/AlignHorizontalLeft';
4+
5+
type Props = {
6+
onClick?: MouseEventHandler<HTMLDivElement>;
7+
onMouseDown?: MouseEventHandler<HTMLDivElement>;
8+
} & buttonProps;
9+
10+
export default function LeftAlignButton({
11+
onClick,
12+
onMouseDown,
13+
...styleProps
14+
}: Props) {
15+
return (
16+
<StyledButton onClick={onClick} onMouseDown={onMouseDown} {...styleProps}>
17+
<AlignHorizontalLeftIcon
18+
height={styleProps.size * scaleRate.smallButtonRate}
19+
width={styleProps.size * scaleRate.smallButtonRate}
20+
/>
21+
</StyledButton>
22+
);
23+
}

‎frontend/src/cse-ui-kit/small_buttons/RightAlignButton.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { MouseEventHandler } from 'react';
2+
import { StyledButton, buttonProps, scaleRate } from './small_buttons-Styled';
3+
import AlignHorizontalRightIcon from '@mui/icons-material/AlignHorizontalRight';
4+
5+
type Props = {
6+
onClick?: MouseEventHandler<HTMLDivElement>;
7+
onMouseDown?: MouseEventHandler<HTMLDivElement>;
8+
} & buttonProps;
9+
10+
export default function RightAlignButton({
11+
onClick,
12+
onMouseDown,
13+
...styleProps
14+
}: Props) {
15+
return (
16+
<StyledButton onClick={onClick} onMouseDown={onMouseDown} {...styleProps}>
17+
<AlignHorizontalRightIcon
18+
height={styleProps.size * scaleRate.smallButtonRate}
19+
width={styleProps.size * scaleRate.smallButtonRate}
20+
/>
21+
</StyledButton>
22+
);
23+
}

‎frontend/src/packages/dashboard/Dashboard.tsx

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,16 @@ const Container = styled.div`
1515
flex-direction: row;
1616
`;
1717

18+
const FlexWrapper = styled.div`
19+
position: relative;
20+
display: flex;
21+
flex-direction: column;
22+
transition: left 0.3s ease-in-out;
23+
`
24+
1825
export default function Dashboard() {
26+
const [isOpen, setOpen] = useState(true)
27+
1928
const [modalState, setModalState] = useState<{ open: boolean, type: string }>({
2029
open: false,
2130
type: "",
@@ -32,12 +41,14 @@ export default function Dashboard() {
3241

3342
return (
3443
<Container>
35-
<SideBar setModalState={setModalState} selectedFile={selectedFile}/>
36-
<Directory />
37-
<Renderer
38-
selectedFile={selectedFile}
39-
setSelectedFile={setSelectedFile}
40-
/>
44+
<SideBar setModalState={setModalState} selectedFile={selectedFile} isOpen={isOpen} setOpen={setOpen}/>
45+
<FlexWrapper style={{ left: isOpen ? '0px' : '-250px' }}>
46+
<Directory />
47+
<Renderer
48+
selectedFile={selectedFile}
49+
setSelectedFile={setSelectedFile}
50+
/>
51+
</FlexWrapper>
4152
<ConfirmationWindow
4253
open={modalState.open}
4354
modalState={modalState}

‎frontend/src/packages/dashboard/components/SideBar/SideBar.test.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,22 @@ import { render } from "src/cse-testing-lib"
22
import { queryByDataAnchor } from "src/cse-testing-lib/custom-queries";
33
import SideBar from "./SideBar"
44
import { BrowserRouter as Router} from "react-router-dom";
5+
import { useState } from 'react'
56

67

78
describe("Side bar tests", () => {
89
it("Side bar is rendered with proper buttons", () => {
10+
const [isOpen, setOpen] = useState(true)
11+
912
const mockSetModalState = jest.fn();
1013
const mockSelectedFileID = 5;
1114
const { queryByDataAnchor } = render(
1215
<Router>
1316
<SideBar
1417
setModalState={mockSetModalState}
1518
selectedFile={mockSelectedFileID}
19+
isOpen={isOpen}
20+
setOpen={setOpen}
1621
/>
1722
</Router>
1823
)

‎frontend/src/packages/dashboard/components/SideBar/SideBar.tsx

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,26 @@ import React from 'react';
22
import styled from 'styled-components';
33
import Button from '@mui/material/Button';
44
import {useNavigate} from 'react-router-dom';
5+
import {useState} from 'react';
6+
import CloseIcon from '@mui/icons-material/Close';
7+
import MenuIcon from '@mui/icons-material/Menu';
58

69
const Container = styled.div`
10+
position: relative;
711
width: 250px;
8-
background: lightgrey;
12+
background: #a695ea;
913
height: 100vh;
14+
transition: left 0.3s ease-in-out;
15+
margin-right: 25px;
16+
`
17+
18+
const ToggleButton = styled.div`
19+
position: absolute;
20+
margin-top: 2rem;
21+
right: -30px;
22+
width: 30px;
23+
height: 30px;
24+
cursor: pointer;
1025
`
1126

1227
const SidebarTitle = styled.div`
@@ -40,16 +55,19 @@ const SidebarButton = styled(Button) <SideBarButtonProps>`
4055
background-color: ${props => props.bgcolor};
4156
border-radius: 20px;
4257
text-transform: none;
58+
color: black;
4359
}
4460
`
4561

4662
type Props = {
4763
setModalState: (state: {open: boolean, type: string}) => void;
4864
selectedFile: number | null;
65+
isOpen: boolean;
66+
setOpen: (state: boolean) => void;
4967
}
5068

5169
// Wrapper component ${props => props.color}
52-
export default function SideBar ({ setModalState, selectedFile}: Props) {
70+
export default function SideBar ({ setModalState, selectedFile, isOpen, setOpen}: Props) {
5371

5472
const handleNewFile = () => {
5573
setModalState({
@@ -78,45 +96,52 @@ export default function SideBar ({ setModalState, selectedFile}: Props) {
7896
}
7997

8098
return (
81-
<Container>
99+
<Container style={{ left: isOpen ? '0px' : '-250px' }}>
100+
<ToggleButton onClick={() => setOpen(!isOpen)}>
101+
{isOpen ?
102+
<CloseIcon />
103+
:
104+
<MenuIcon />
105+
}
106+
</ToggleButton>
82107
<SidebarTitle>
83108
Welcome \name\
84109
</SidebarTitle>
85110
<ButtonFlex>
86-
<ButtonGroup>
111+
{/* <ButtonGroup>
87112
<SidebarButton bgcolor="#F88282">
88113
Blog
89114
</SidebarButton>
90115
<SidebarButton bgcolor="#F88282">
91116
Core pages
92117
</SidebarButton>
93-
</ButtonGroup>
118+
</ButtonGroup> */}
94119
<ButtonGroup>
95120
<SidebarButton
96-
bgcolor="#82A3F8"
121+
bgcolor="#b4c6ff"
97122
onClick={handleNewFile}
98123
data-anchor="NewPageButton"
99124
>
100125
New page
101126
</SidebarButton>
102127
<SidebarButton
103-
bgcolor="#82A3F8"
128+
bgcolor="#b4c6ff"
104129
onClick={handleNewFolder}
105130
data-anchor="NewFolderButton"
106131
>
107132
New folder
108133
</SidebarButton>
109134
</ButtonGroup>
110135
<ButtonGroup>
111-
<SidebarButton bgcolor="#B8E8E8" onClick={handleEdit}>
136+
<SidebarButton bgcolor="white" onClick={handleEdit}>
112137
Edit
113138
</SidebarButton>
114-
<SidebarButton bgcolor="#B8E8E8">
139+
{/* <SidebarButton bgcolor="#B8E8E8">
115140
Feature
116141
</SidebarButton>
117142
<SidebarButton bgcolor="#B8E8E8" onClick={handleRecycle}>
118143
Recycle
119-
</SidebarButton>
144+
</SidebarButton> */}
120145
</ButtonGroup>
121146
</ButtonFlex>
122147
</Container>

‎frontend/src/packages/editor/components/HeadingBlock.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const ToolbarContainer = styled.div`
1919
display: flex;
2020
flex-direction: row;
2121
width: 100%;
22-
max-width: 440px;
22+
max-width: 660px;
2323
margin: 5px;
2424
`;
2525

‎frontend/src/packages/editor/components/buttons/EditorCenterAlignButton.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import React, { FC } from "react";
22
import { useSlate } from "slate-react";
33
import { toggleMark } from "./buttonHelpers";
44
import { Editor } from "slate";
5+
import CenterAlignButton from "src/cse-ui-kit/small_buttons/CenterAlignButton";
56

67
const EditorCenterAlignButton: FC = () => {
78
const editor = useSlate();
89
return (
9-
<button
10+
<CenterAlignButton
11+
size={30}
1012
onMouseDown={(event) => {
1113
event.preventDefault();
1214
Editor.addMark(editor, "align", "center")

‎frontend/src/packages/editor/components/buttons/EditorLeftAlignButton.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import React, { FC } from "react";
22
import { useSlate } from "slate-react";
33
import { toggleMark } from "./buttonHelpers";
44
import { Editor } from "slate";
5+
import LeftAlignButton from "src/cse-ui-kit/small_buttons/LeftAlignButton";
56

67
const EditorLeftAlignButton: FC = () => {
78
const editor = useSlate();
89
return (
9-
<button
10+
<LeftAlignButton
11+
size={30}
1012
onMouseDown={(event) => {
1113
event.preventDefault();
1214
Editor.addMark(editor, "align", "left")

‎frontend/src/packages/editor/components/buttons/EditorRightAlignButton.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import React, { FC } from "react";
22
import { useSlate } from "slate-react";
33
import { toggleMark } from "./buttonHelpers";
44
import { Editor } from "slate";
5+
import RightAlignButton from "src/cse-ui-kit/small_buttons/RightAlignButton";
56

67
const EditorRightAlignButton: FC = () => {
78
const editor = useSlate();
89
return (
9-
<button
10+
<RightAlignButton
11+
size={30}
1012
onMouseDown={(event) => {
1113
event.preventDefault();
1214
Editor.addMark(editor, "align", "right")

‎frontend/src/packages/editor/components/buttons/EditorSelectFont.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ const selectFont = () => {
1010
name="fonts"
1111
id="fontDropdown"
1212
onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
13-
const val = event.currentTarget?.value == null;
14-
if (!val) return;
13+
const val = event.currentTarget?.value;
14+
if (val == null) return;
1515
Editor.addMark(editor, "textSize", val);
1616
}}
1717
>

‎frontend/src/packages/editor/index.tsx

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -57,25 +57,30 @@ const EditorPage: FC = () => {
5757
<div style={{ height: "100%" }}>
5858
<EditorHeader />
5959
<Container>
60-
{blocks.map((block, idx) =>
61-
block[0].type === "paragraph" ? (
62-
<EditorBlock
63-
id={idx}
64-
key={idx}
65-
initialValue={block}
66-
update={updateValues}
67-
showToolBar={focusedId === idx}
68-
onEditorClick={() => setFocusedId(idx)}
69-
/>
70-
) : (
71-
<HeadingBlock
72-
id={idx}
73-
key={idx}
74-
update={updateValues}
75-
showToolBar={focusedId === idx}
76-
onEditorClick={() => setFocusedId(idx)}
77-
/>
60+
{blocks.map((block, idx) => {
61+
console.log(block[0].type)
62+
return (
63+
block[0].type === "paragraph" ? (
64+
<EditorBlock
65+
id={idx}
66+
key={idx}
67+
initialValue={block}
68+
update={updateValues}
69+
showToolBar={focusedId === idx}
70+
onEditorClick={() => setFocusedId(idx)}
71+
/>
72+
) : (
73+
<HeadingBlock
74+
id={idx}
75+
key={idx}
76+
update={updateValues}
77+
showToolBar={focusedId === idx}
78+
onEditorClick={() => setFocusedId(idx)}
79+
/>
80+
)
7881
)
82+
}
83+
7984
)}
8085

8186
<InsertContentWrapper>

0 commit comments

Comments
 (0)