Skip to content

Commit a5cc7e0

Browse files
author
tkokhing
committed
fix expand / collapse all UI
1 parent e96084d commit a5cc7e0

5 files changed

Lines changed: 117 additions & 20 deletions

File tree

‎src/app/_components/main_frame/icons_svg.tsx‎

Lines changed: 60 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -741,7 +741,7 @@ export const SystemModeIcon: React.FC<IconProps> = ({ width = 2, fillColour = "#
741741
</rect>
742742
</svg>
743743
)
744-
}
744+
};
745745

746746
export const DarkModeIcon: React.FC<IconProps> = ({ width = 1, strokeColour = "white" }) => {
747747
const [hoverOn, setHovered] = React.useState(false);
@@ -783,8 +783,7 @@ export const DarkModeIcon: React.FC<IconProps> = ({ width = 1, strokeColour = "w
783783
</g>
784784
</svg>
785785
)
786-
}
787-
786+
};
788787

789788
export const LightModeIcon: React.FC<IconProps> = ({ width = 2, strokeColour = "#FFBE03" }) => {
790789

@@ -808,7 +807,7 @@ export const LightModeIcon: React.FC<IconProps> = ({ width = 2, strokeColour = "
808807
<circle cx="12" cy="12" r="0.5" fill="#FFF003" />
809808
</svg>
810809
)
811-
}
810+
};
812811

813812
export const ProfileLogoSVG = () => (
814813
<svg
@@ -836,7 +835,61 @@ export const ProfileLogoSVG = () => (
836835
<path d="M1000 1380 l0 -520 150 0 150 0 0 130 0 130 150 0 150 0 0 130 0 130 -150 0 -150 0 0 260 0 260 -150 0 -150 0 0 -520z" />
837836
</g>
838837
</svg>
839-
)
838+
);
839+
840+
export const ExpandAll: React.FC<IconProps> = ({ fillColour = "#D9F99D" }) => {
841+
const [hoverOn, setHovered] = useState(false);
842+
843+
return (
844+
<svg
845+
version="1.1"
846+
viewBox="0 0 512 512"
847+
xmlns="http://www.w3.org/2000/svg"
848+
onMouseEnter={() => setHovered(true)}
849+
onMouseLeave={() => setHovered(false)}
850+
height="20px"
851+
width="20px"
852+
>
853+
<title>Expand All</title>
854+
<title>Learning never stops</title>
855+
<g strokeLinecap="round" strokeLinejoin="round" fill={hoverOn ? fillColour : "#0071C1"} stroke={hoverOn ? fillColour : "#0071C1"}>
856+
<path d="M199.541,365.792c-4.237-4.093-10.99-3.976-15.083,0.262c-3.993,4.134-3.993,10.687,0,14.821l64,64 c4.157,4.174,10.911,4.187,15.085,0.03c0.01-0.01,0.02-0.02,0.03-0.03l64-64c4.093-4.237,3.976-10.99-0.261-15.083 c-4.134-3.993-10.688-3.993-14.821,0l-45.824,45.792V100.416l45.792,45.792c4.237,4.093,10.99,3.976,15.083-0.262 c3.993-4.134,3.993-10.687,0-14.821l-64-64c-4.157-4.174-10.911-4.187-15.085-0.03c-0.01,0.01-0.02,0.02-0.03,0.03l-64,64 c-4.093,4.237-3.975,10.99,0.262,15.083c4.134,3.992,10.687,3.992,14.82,0l45.824-45.792v311.168L199.541,365.792z"></path>
857+
<line strokeWidth="50" x1="0" y1="0" x2="512" y2="0" />
858+
<line strokeWidth="50" x1="0" y1="512" x2="512" y2="512" />
859+
860+
</g>
861+
</svg>
862+
)
863+
};
864+
865+
export const CollapseAll: React.FC<IconProps> = ({ fillColour = "#D9F99D" }) => {
866+
const [hoverOn, setHovered] = useState(false);
867+
868+
return (
869+
<svg
870+
version="1.1"
871+
viewBox="0 0 60 60"
872+
xmlns="http://www.w3.org/2000/svg"
873+
onMouseEnter={() => setHovered(true)}
874+
onMouseLeave={() => setHovered(false)}
875+
height="20px"
876+
width="20px"
877+
>
878+
<title>Collapse All</title>
879+
<title>Learning never stops</title>
880+
<g strokeMiterlimit="8"strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill={hoverOn ? fillColour : "#0071C1"} stroke={hoverOn ? fillColour : "#0071C1"}>
881+
<line x1="0" y1="26" x2="60" y2="26" />
882+
<line x1="0" y1="34" x2="60" y2="34" />
883+
<line x1="30" y1="0" x2="30" y2="20" />
884+
<line x1="23" y1="15" x2="30" y2="20" />
885+
<line x1="37" y1="15" x2="30" y2="20" />
886+
<line x1="30" y1="40" x2="30" y2="60" />
887+
<line x1="23" y1="45" x2="30" y2="40" />
888+
<line x1="37" y1="45" x2="30" y2="40" />
889+
</g>
890+
</svg>
891+
)
892+
};
840893

841894
export default {
842895
SquareBoxIcon,
@@ -857,4 +910,6 @@ export default {
857910
DarkModeIcon,
858911
LightModeIcon,
859912
ProfileLogoSVG,
913+
ExpandAll,
914+
CollapseAll,
860915
};

‎src/app/_components/preference/toggle-frame-button.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import { useState } from "react";
55
import { useToggleBroadcast } from "./toggle-frame-provider";
6-
6+
import { ExpandAll, CollapseAll } from "@/app/_components/main_frame/icons_svg";
77
export function ToggleAllButton() {
88
const ctx = useToggleBroadcast();
99
const [state, setState] = useState<"open" | "closed">("open");
@@ -12,35 +12,38 @@ export function ToggleAllButton() {
1212

1313
return (
1414
<div className="sticky top-[1.8rem] md:top-[1.5rem] z-20">
15-
<div className="text-adaptive_fs_xs flex gap-1 px-4 py-2 justify-end">
15+
<div className="flex gap-1 px-4 py-2 justify-end">
1616
<button
1717
disabled={state === "open"}
18+
aria-label="Expand All"
1819
onClick={() => {
1920
ctx.openAll();
2021
setState("open");
2122
}}
22-
className={`px-3 py-1 rounded transition ${
23+
className={`px-2 py-1 rounded transition ${
2324
state === "open"
2425
? "bg-gray-700 dark:bg-gray-600 text-tkokhing-blue cursor-default"
2526
: "bg-gray-200 hover:bg-gray-500 dark:text-tkokhing-blue hover:text-tkokhing-dark hover:dark:text-tkokhing-dark"
2627
}`}
2728
>
28-
Expand All
29+
<ExpandAll />
2930
</button>
3031

3132
<button
3233
disabled={state === "closed"}
34+
aria-label="Collapse All"
3335
onClick={() => {
3436
ctx.closeAll();
3537
setState("closed");
3638
}}
37-
className={`px-3 py-1 rounded transition ${
39+
// className = {styles['icon-container']}
40+
className={`px-2 py-1 rounded transition ${
3841
state === "closed"
39-
? "bg-gray-700 dark:bg-gray-600 text-tkokhing-blue cursor-default"
40-
: "bg-gray-200 hover:bg-gray-500 dark:text-tkokhing-blue hover:text-tkokhing-dark hover:dark:text-tkokhing-dark"
42+
? "bg-gray-700 dark:bg-gray-600 cursor-default"
43+
: "bg-gray-200 hover:bg-gray-500"
4144
}`}
4245
>
43-
Collapse All
46+
<CollapseAll />
4447
</button>
4548
</div>
4649
</div>

‎src/styles/blog.module.css‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,35 @@
2727
max-width: 100%;
2828
}
2929

30-
/* for < pre > < code > block codes render IP and timming suffix */
30+
.prose a {
31+
overflow-wrap: break-word;
32+
word-break: break-word;
33+
}
34+
35+
/* for < pre > < code > block codes render IP and file_timing suffix */
3136
.prose pre{
32-
@apply bg-[#24292E] rounded-lg p-4;
37+
@apply bg-[#24292E];
3338
}
3439

40+
.prose pre::-webkit-scrollbar-track {
41+
background: transparent;
42+
}
43+
.prose pre::-webkit-scrollbar-button {
44+
display: none;
45+
}
46+
.prose pre::-webkit-scrollbar-thumb {
47+
background: rgba(120,120,120,0.5);
48+
}
49+
.prose pre::-webkit-scrollbar-thumb:hover {
50+
background: rgba(23, 23, 23, 0.5);
51+
}
52+
.dark .prose pre::-webkit-scrollbar-thumb {
53+
background: rgb(245, 245, 245);
54+
border-radius: 9999px;
55+
}
56+
.dark .prose pre::-webkit-scrollbar-thumb:hover {
57+
background: rgb(120, 120, 120);
58+
}
3559
/* for future if need to split */
3660
/* .prose pre.language-bash code, */
3761
/* .prose pre.language-powershell code { */
@@ -45,7 +69,12 @@
4569
.prose code[data-kind] {
4670
@apply text-tkokhing-dark;
4771
padding: 0.15em 0.4em;
48-
border-radius: 0.375rem;
72+
border-radius: 0.125rem;
73+
}
74+
75+
.prose a code[data-kind] {
76+
overflow-wrap: break-word;
77+
word-break: break-word;
4978
}
5079

5180
/* Prevent tables from breaking container */
@@ -58,7 +87,7 @@
5887
overflow-x: auto;
5988
white-space: nowrap;
6089
background: rgba(0,0,0,0.13);
61-
border-radius: 0.375rem;
90+
border-radius: 0.125rem;
6291
padding: 0.5rem;
6392
}
6493

@@ -74,8 +103,17 @@
74103
.prose table::-webkit-scrollbar-track {
75104
background: transparent;
76105
}
77-
78106
.prose table::-webkit-scrollbar-thumb {
79107
background: rgba(120,120,120,0.5);
80108
border-radius: 9999px;
109+
}
110+
.prose table::-webkit-scrollbar-thumb:hover {
111+
background: rgba(23, 23, 23, 0.5);
112+
}
113+
.dark .prose table::-webkit-scrollbar-thumb {
114+
background: rgb(245, 245, 245);
115+
border-radius: 9999px;
116+
}
117+
.dark .prose table::-webkit-scrollbar-thumb:hover {
118+
background: rgb(120, 120, 120);
81119
}

‎src/styles/globals.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
@tailwind components;
33
@tailwind utilities;
44
@plugin "@tailwindcss/typography";
5-
@import 'blog.module.css';
5+
@import 'blog.module.css';
6+
@import 'icon_svg.module.css'

‎src/styles/icon_svg.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@
66
.icon-container {
77
display: flex;
88
align-items: center;
9-
justify-start: flex-start;
9+
justify-content: flex-start;
1010
}

0 commit comments

Comments
 (0)