Skip to content

Commit 46dc72e

Browse files
devklickdevklick
committed
Refactor BorderedApp to use styled components
1 parent ffb796a commit 46dc72e

27 files changed

Lines changed: 221 additions & 274 deletions

File tree

‎src/components/AppPopup/AppPopup.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Rect } from "../../hooks/useDragToResize";
33
import useDetectMouseDownOutside from "../../hooks/useDetectMouseDownOutside";
44
import useSystemSettings from "../../stores/systemSettingsStore";
55

6-
import { StyledContent, StyledPopup } from "./Styled.AppPopup";
6+
import { StyledContent, StyledPopup } from "./styles";
77

88
interface AppPopupProps<Element extends HTMLElement> {
99
appRef: React.RefObject<Element>;

src/components/AppPopup/Styled.AppPopup.ts renamed to src/components/AppPopup/styles.ts

File renamed without changes.

‎src/components/AppSideBar/AppSideBar.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import {
2-
StyledItem,
3-
StyledItemContainer,
4-
StyledSideBar,
5-
} from "./Styled.AppSideBar";
1+
import { StyledItem, StyledItemContainer, StyledSideBar } from "./styles";
62

73
interface SideBarItem {
84
title: string;

src/components/AppSideBar/Styled.AppSideBar.ts renamed to src/components/AppSideBar/styles.ts

File renamed without changes.

‎src/components/BorderedApp/BorderedApp.scss‎

Lines changed: 0 additions & 179 deletions
This file was deleted.

‎src/components/BorderedApp/BorderedApp.tsx‎

Lines changed: 51 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,19 @@ import usePositionableElement from "../../hooks/usePositionableElement";
88
import useSystemSettings from "../../stores/systemSettingsStore";
99
import { MenuItemProps } from "../MenuItems";
1010

11-
import "./BorderedApp.scss";
11+
import {
12+
StyledBorderedApp,
13+
StyledCorner,
14+
StyledContent,
15+
StyledEdge,
16+
StyledTitleBar,
17+
StyledTitleWrapper,
18+
StyledWindowButton,
19+
StyledWindowButtons,
20+
StyledWindowButtonsWrapper,
21+
StyledWindowMenus,
22+
StyledWindowMenusWrapper,
23+
} from "./styles";
1224

1325
interface BorderedAppProps extends BaseProps {
1426
title: string;
@@ -61,64 +73,60 @@ function BorderedApp({
6173
}
6274

6375
return (
64-
<div
65-
className="bordered-app"
76+
<StyledBorderedApp
6677
ref={appRef}
6778
onMouseDown={() => winMan.focusWindow(type, id)}
68-
style={{
69-
width: initialDimensions.width,
70-
height: initialDimensions.height,
71-
zIndex,
72-
backgroundColor: settings.mainColor,
73-
display: hidden === true ? "none" : "grid",
74-
}}
79+
initialDimensions={initialDimensions}
80+
zIndex={zIndex}
81+
backgroundColor={settings.mainColor}
82+
display={hidden === true ? "none" : "grid"}
7583
>
76-
<div className="bordered-app__corner-nw" ref={resizeHandleNW} />
77-
<div className="bordered-app__edge-n" ref={resizeHandleN} />
78-
<div className="bordered-app__corner-ne" ref={resizeHandleNE} />
79-
<div className="bordered-app__edge-e" ref={resizeHandleE} />
80-
<div
81-
className="bordered-app__title-bar drag-to-move"
84+
<StyledCorner location="nw" ref={resizeHandleNW} />
85+
<StyledEdge location="n" ref={resizeHandleN} />
86+
<StyledCorner location="ne" ref={resizeHandleNE} />
87+
<StyledEdge location="e" ref={resizeHandleE} />
88+
<StyledTitleBar
89+
className="drag-to-move"
8290
ref={moveHandle}
8391
onDoubleClick={maximize}
8492
>
85-
<div className="bordered-app__window-menus-wrapper drag-to-move">
86-
<div className="bordered-app__window-menus drag-to-move">
93+
<StyledWindowMenusWrapper className="drag-to-move">
94+
<StyledWindowMenus className="drag-to-move">
8795
{menus?.map((m) => (
8896
<BorderedAppMenu
8997
title={m.title}
9098
items={m.items ?? []}
9199
key={m.title}
92100
/>
93101
))}
94-
</div>
95-
</div>
96-
<div className="bordered-app__title-wrapper drag-to-move">
97-
<div className="bordered-app__title drag-to-move">{title}</div>
98-
</div>
99-
<div className="bordered-app__window-buttons-wrapper drag-to-move">
100-
<div className="bordered-app__window-buttons">
101-
<div
102-
className="bordered-app__window-button minimize"
102+
</StyledWindowMenus>
103+
</StyledWindowMenusWrapper>
104+
<StyledTitleWrapper className="drag-to-move">
105+
<span className="drag-to-move">{title}</span>
106+
</StyledTitleWrapper>
107+
<StyledWindowButtonsWrapper className="drag-to-move">
108+
<StyledWindowButtons>
109+
<StyledWindowButton
110+
buttonType="min"
103111
onClick={minimize}
104-
></div>
105-
<div
106-
className="bordered-app__window-button maximize"
112+
></StyledWindowButton>
113+
<StyledWindowButton
114+
buttonType="max"
107115
onClick={maximize}
108-
></div>
109-
<div
110-
className="bordered-app__window-button close"
116+
></StyledWindowButton>
117+
<StyledWindowButton
118+
buttonType="close"
111119
onClick={onClickClose}
112-
></div>
113-
</div>
114-
</div>
115-
</div>
116-
<div className="bordered-app__content">{children}</div>
117-
<div className="bordered-app__corner-sw" ref={resizeHandleSW} />
118-
<div className="bordered-app__edge-s" ref={resizeHandleS} />
119-
<div className="bordered-app__corner-se" ref={resizeHandleSE} />
120-
<div className="bordered-app__edge-w" ref={resizeHandleW} />
121-
</div>
120+
></StyledWindowButton>
121+
</StyledWindowButtons>
122+
</StyledWindowButtonsWrapper>
123+
</StyledTitleBar>
124+
<StyledContent>{children}</StyledContent>
125+
<StyledCorner location="sw" ref={resizeHandleSW} />
126+
<StyledEdge location="s" ref={resizeHandleS} />
127+
<StyledCorner location="se" ref={resizeHandleSE} />
128+
<StyledEdge location="w" ref={resizeHandleW} />
129+
</StyledBorderedApp>
122130
);
123131
}
124132

‎src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.scss‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
22
import useDetectMouseDownOutside from "../../../hooks/useDetectMouseDownOutside";
33
import MenuItems, { MenuItemProps } from "../../MenuItems";
44

5-
import "./BorderedAppMenu.scss";
5+
import { StyledAppMenu } from "./styles";
66

77
export interface BorderedAppMenuProps {
88
title: string;
@@ -16,8 +16,8 @@ function BorderedAppMenu({ title, items }: BorderedAppMenuProps) {
1616

1717
useEffect(() => {
1818
const rect = elementRef.current?.getBoundingClientRect();
19-
// TODO: Look into where this -12 comes from
20-
position.current = { x: (rect?.left ?? 0) - 12, y: rect?.height ?? 0 };
19+
// TODO: Look into where this -10 comes from
20+
position.current = { x: (rect?.left ?? 0) - 10, y: rect?.height ?? 0 };
2121
}, [elementRef]);
2222

2323
// Close the menu if an outside click occurs
@@ -28,20 +28,16 @@ function BorderedAppMenu({ title, items }: BorderedAppMenuProps) {
2828
});
2929

3030
return (
31-
<div
32-
ref={elementRef}
33-
className="bordered-app-menu"
34-
onClick={() => setOpen(!open)}
35-
>
36-
<span className="bordered-app-menu__title">{title}</span>
31+
<StyledAppMenu ref={elementRef} onClick={() => setOpen(!open)}>
32+
<span>{title}</span>
3733
{open && (
3834
<MenuItems
3935
items={items}
4036
position={{ ...position.current }}
4137
positionType="absolute"
4238
/>
4339
)}
44-
</div>
40+
</StyledAppMenu>
4541
);
4642
}
4743

‎src/components/BorderedApp/BorderedAppMenu/styles.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import styled from "@emotion/styled";
2+
3+
export const StyledAppMenu = styled.div`
4+
box-sizing: border-box;
5+
display: flex;
6+
align-items: center;
7+
`;

0 commit comments

Comments
 (0)