Skip to content

Commit 3147f6f

Browse files
devklickdevklick
committed
overhall buttons
1 parent 15e9b6a commit 3147f6f

15 files changed

Lines changed: 318 additions & 108 deletions

File tree

‎package-lock.json‎

Lines changed: 4 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/AppSideBar/AppSideBar.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import useSystemSettings from "../../stores/systemSettingsStore";
2-
import { StyledItem, StyledItemContainer, StyledSideBar } from "./styles";
2+
import Button from "../Button";
3+
import { StyledItemContainer, StyledSideBar } from "./styles";
34

45
interface SideBarItem {
56
title: string;
@@ -12,19 +13,24 @@ interface AppSideBarProps {
1213
}
1314

1415
function AppSideBar({ items }: AppSideBarProps) {
15-
const settings = useSystemSettings();
16+
const [buttonFontColor, buttonColor] = useSystemSettings((s) => [
17+
s.fontColor,
18+
s.mainColor,
19+
]);
1620
return (
1721
<StyledSideBar>
1822
<StyledItemContainer>
1923
{items.map((item) => (
20-
<StyledItem
24+
<Button
25+
padding={"6px 10px"}
26+
group="vertical"
2127
onClick={item.onClick}
22-
key={item.title}
28+
color={buttonFontColor}
29+
backgroundColor={buttonColor}
2330
active={item.isActive ?? false}
24-
activeColor={settings.secondaryColor}
2531
>
2632
{item.title}
27-
</StyledItem>
33+
</Button>
2834
))}
2935
</StyledItemContainer>
3036
</StyledSideBar>

‎src/components/AppSideBar/styles.ts‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,6 @@ export const StyledSideBar = styled.div`
99
export const StyledItemContainer = styled.div`
1010
width: 100%;
1111
box-sizing: border-box;
12-
`;
13-
14-
export const StyledItem = styled.div<{ active: boolean; activeColor: string }>`
15-
border-radius: 10px;
16-
padding: 6px 10px;
17-
box-sizing: border-box;
18-
box-shadow: 2px 2px 4px rgb(0, 0, 0, 0);
19-
background-color: ${(props) =>
20-
props.active ? props.activeColor : undefined};
21-
&:hover {
22-
background-color: ${(props) => props.activeColor};
23-
transition: ease-in 0.2s;
24-
}
25-
&:active {
26-
box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5) inset;
27-
}
12+
display: flex;
13+
flex-direction: column;
2814
`;

‎src/components/Button/Button.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
1-
import { StyledButton } from "./styles";
1+
import { PropsWithChildren } from "react";
2+
import { StyledButton, StyledButtonProps } from "./styles";
23

3-
interface ButtonProps {
4-
name: string;
5-
onClick: () => void;
6-
width?: string | number;
4+
interface ButtonProps extends StyledButtonProps {
5+
onClick?: () => void;
76
disabled?: boolean;
87
}
98

109
function Button({
11-
name,
12-
width = "100%",
13-
disabled = false,
1410
onClick,
15-
}: ButtonProps) {
11+
children,
12+
...rest
13+
}: PropsWithChildren<ButtonProps>) {
1614
return (
17-
<StyledButton width={width} onClick={onClick} disabled={disabled}>
18-
{name}
15+
<StyledButton {...rest} onClick={onClick}>
16+
{children}
1917
</StyledButton>
2018
);
2119
}

‎src/components/Button/styles.ts‎

Lines changed: 107 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,109 @@
1-
import styled from "@emotion/styled";
1+
import styled, { CSSObject } from "@emotion/styled";
2+
import { isLight } from "../../common/utils/colorUtils";
3+
import { darken, lighten } from "polished";
24

3-
export const StyledButton = styled.button<{ width: string | number }>`
4-
width: ${(props) =>
5-
typeof props.width === "string" ? props.width : `${props.width}px`};
5+
export interface StyledButtonProps {
6+
width?: string | number;
7+
height?: string | number;
8+
backgroundColor?: string;
9+
backgroundColorHover?: string;
10+
backgroundColorActive?: string;
11+
color?: string;
12+
colorHover?: string;
13+
colorActive?: string;
14+
disabled?: boolean;
15+
active?: boolean;
16+
borderRadius?: number;
17+
group?: "horizontal" | "vertical";
18+
padding?: CSSObject["padding"];
19+
}
20+
21+
export const StyledButton = styled.button<StyledButtonProps>`
22+
${buildStyledButton}
623
`;
24+
25+
function buildStyledButton({
26+
width = "100%",
27+
borderRadius = 6,
28+
...props
29+
}: StyledButtonProps): CSSObject {
30+
return {
31+
...props,
32+
width: typeof width === "string" ? width : `${width}px`,
33+
height:
34+
typeof props.height === "string" ? props.height : `${props.height}px`,
35+
border: "none",
36+
transition: "background-color 0.2s, color 0.2s",
37+
":disabled": {
38+
opacity: 0.52,
39+
},
40+
backgroundColor: props.active
41+
? getBackgroundColorActive(props)
42+
: props.backgroundColor,
43+
":hover": {
44+
backgroundColor: getBackgroundColorHover(props),
45+
},
46+
":active": {
47+
backgroundColor: getBackgroundColorActive(props),
48+
},
49+
...radiusStyles({ borderRadius, group: props.group }), // this breaks the return type somehow. Something funky when spreading the emotion type
50+
} as CSSObject;
51+
}
52+
53+
function getBackgroundColorActive(props: StyledButtonProps) {
54+
if (props.disabled) return undefined;
55+
if (props.backgroundColorActive) return props.backgroundColorActive;
56+
if (props.backgroundColor) {
57+
return isLight(props.backgroundColor)
58+
? darken(0.2, props.backgroundColor)
59+
: lighten(0.2, props.backgroundColor);
60+
}
61+
return undefined;
62+
}
63+
function getBackgroundColorHover(props: StyledButtonProps) {
64+
if (props.disabled) return undefined;
65+
if (props.backgroundColorHover) return props.backgroundColorHover;
66+
if (props.backgroundColor) {
67+
return isLight(props.backgroundColor)
68+
? darken(0.1, props.backgroundColor)
69+
: lighten(0.1, props.backgroundColor);
70+
}
71+
return undefined;
72+
}
73+
74+
function radiusStyles({
75+
group,
76+
borderRadius,
77+
}: Pick<StyledButtonProps, "group" | "borderRadius">): CSSObject {
78+
const r = `${borderRadius}px`;
79+
80+
if (!group) {
81+
return {
82+
borderRadius: r,
83+
};
84+
}
85+
86+
const horizontal = group === "horizontal";
87+
88+
return {
89+
":first-of-type": horizontal
90+
? {
91+
borderTopLeftRadius: r,
92+
borderBottomLeftRadius: r,
93+
}
94+
: {
95+
borderTopLeftRadius: r,
96+
borderTopRightRadius: r,
97+
},
98+
99+
":last-of-type": horizontal
100+
? {
101+
borderTopRightRadius: r,
102+
borderBottomRightRadius: r,
103+
}
104+
: {
105+
borderBottomLeftRadius: r,
106+
borderBottomRightRadius: r,
107+
},
108+
};
109+
}

‎src/hooks/useLocalFSWithHistory.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function useLocalFSWithHistory(currentPath: string) {
1010
const position = useRef<number>(0);
1111
const fs = useLocalFS();
1212
const [currentDirectory, setCurrentDirectory] = useState<FSDirectory>(
13-
getDirOrDefault(currentPath)
13+
getDirOrDefault(currentPath),
1414
);
1515

1616
function getDirOrDefault(path: string, defaultValue = "/home/user") {
@@ -38,25 +38,33 @@ function useLocalFSWithHistory(currentPath: string) {
3838
}
3939

4040
function navForward() {
41-
if (history.current.length - 1 > position.current) {
41+
if (canNavForward()) {
4242
position.current++;
4343
const dir = fs.getDirectory(history.current[position.current]);
4444
if (dir) setCurrentDirectory(dir);
4545
}
4646
}
4747

4848
function navBack() {
49-
if (position.current && history.current.length) {
49+
if (canNavBack()) {
5050
position.current--;
5151
const newPath = history.current[position.current];
5252
const dir = fs.getDirectory(newPath);
5353
if (dir) setCurrentDirectory(dir);
5454
}
5555
}
56+
function canNavBack() {
57+
return !!position.current && !!history.current.length;
58+
}
59+
function canNavForward() {
60+
return history.current.length - 1 > position.current;
61+
}
5662

5763
return {
5864
currentDirectory,
5965
favorites: fs.favorites,
66+
canNavBack: canNavBack(),
67+
canNavForward: canNavForward(),
6068
navToPath,
6169
navToObject,
6270
getDirOrDefault,

‎src/programs/Calendar/CalendarDay/CalendarDay.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,12 @@ export default function CalendarDay({
1717
onClick,
1818
isSelected,
1919
}: CalendarDayProps) {
20-
const [mainColor, accentColor, fontColor, primaryColor] = useSystemSettings(
21-
(s) => [s.mainColor, s.secondaryColor, s.fontColor, s.primaryColor],
22-
);
20+
const [mainColor, fontColor, primaryColor] = useSystemSettings((s) => [
21+
s.mainColor,
22+
s.secondaryColor,
23+
s.fontColor,
24+
s.primaryColor,
25+
]);
2326
const dayOfWeek = getDayName(date.getDay());
2427
const dayOfMonth = date.getDate();
2528

@@ -36,7 +39,7 @@ export default function CalendarDay({
3639
<span>
3740
<StyledCalendarDayNo>{dayOfMonth}</StyledCalendarDayNo>
3841
</span>
39-
{/* {isToday && <span>TODAY</span>} */}
42+
{isToday && <span>TODAY</span>}
4043
</StyledCalendarDay>
4144
);
4245
}

‎src/programs/Calendar/CalendarNavigation/CalendarNavigation.tsx‎

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { getMonthName } from "../../../common/utils/dateUtils";
2+
import Button from "../../../components/Button";
3+
import useSystemSettings from "../../../stores/systemSettingsStore";
24
import {
35
StyledCalendarNavigation,
46
StyledCalendarNavigationSection,
5-
StyledNavigationButton,
67
} from "./styles";
78

89
interface StyledNavigationProps {
@@ -21,34 +22,54 @@ export default function CalendarNavigation({
2122
onClickPrevMonth,
2223
onClickPrevYear,
2324
}: StyledNavigationProps) {
25+
const [fontColor, buttonColor] = useSystemSettings((s) => [
26+
s.fontColor,
27+
s.mainColor,
28+
]);
2429
return (
2530
<StyledCalendarNavigation className="calendar__nav">
2631
<StyledCalendarNavigationSection className="calendar__nav-section">
27-
<StyledNavigationButton
28-
className="calendar__nav-button"
32+
<Button
33+
backgroundColor={buttonColor}
34+
color={fontColor}
2935
onClick={onClickPrevMonth}
30-
>{`<`}</StyledNavigationButton>
31-
<StyledNavigationButton className="calendar__nav-button">
36+
group="horizontal"
37+
>{`<`}</Button>
38+
<Button
39+
backgroundColor={buttonColor}
40+
color={fontColor}
41+
group="horizontal"
42+
>
3243
{getMonthName(month)}
33-
</StyledNavigationButton>
34-
<StyledNavigationButton
35-
className="calendar__nav-button"
44+
</Button>
45+
<Button
46+
backgroundColor={buttonColor}
47+
color={fontColor}
3648
onClick={onClickNextMonth}
37-
>{`>`}</StyledNavigationButton>
49+
group="horizontal"
50+
>{`>`}</Button>
3851
</StyledCalendarNavigationSection>
3952

4053
<StyledCalendarNavigationSection className="calendar__nav-section">
41-
<StyledNavigationButton
42-
className="calendar__nav-button"
54+
<Button
55+
backgroundColor={buttonColor}
56+
color={fontColor}
4357
onClick={onClickPrevYear}
44-
>{`<`}</StyledNavigationButton>
45-
<StyledNavigationButton className="calendar__nav-button">
58+
group="horizontal"
59+
>{`<`}</Button>
60+
<Button
61+
backgroundColor={buttonColor}
62+
color={fontColor}
63+
group="horizontal"
64+
>
4665
{year}
47-
</StyledNavigationButton>
48-
<StyledNavigationButton
49-
className="calendar__nav-button"
66+
</Button>
67+
<Button
68+
backgroundColor={buttonColor}
69+
color={fontColor}
5070
onClick={onClickNextYear}
51-
>{`>`}</StyledNavigationButton>
71+
group="horizontal"
72+
>{`>`}</Button>
5273
</StyledCalendarNavigationSection>
5374
</StyledCalendarNavigation>
5475
);

‎src/programs/Calendar/CalendarNavigation/styles.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ interface StyledCalendarNavigationSectionProps {}
55
interface StyledCalendarNavigationProps {}
66
export const StyledCalendarNavigation = styled.div<StyledCalendarNavigationProps>`
77
width: 100%;
8-
display: flex;
8+
display: grid;
9+
grid-template-columns: 1fr 1fr;
10+
gap: 20px;
911
grid-area: nav;
12+
padding: 6px 0;
1013
`;
1114

12-
interface StyledNavigationButtonProps {}
13-
export const StyledNavigationButton = styled.button<StyledNavigationButtonProps>``;
14-
1515
export const StyledCalendarNavigationSection = styled.div<StyledCalendarNavigationSectionProps>`
16-
flex: 1;
17-
display: flex;
18-
justify-content: center;
16+
width: 100%;
17+
display: grid;
18+
grid-template-columns: 30px auto 30px;
1919
`;

0 commit comments

Comments
 (0)