Skip to content

Commit c76d700

Browse files
marcus-wishesmarcus-wishes
committed
fixed time table header zindex, and default height and overflow handling
1 parent 8d66234 commit c76d700

File tree

9 files changed

+469
-384
lines changed

9 files changed

+469
-384
lines changed

‎library/src/components/Page.tsx‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,56 @@
1-
import styled from "styled-components";
1+
import styled from "@emotion/styled"
22

33
export const Page = styled.div`
4-
height: 100%;
5-
display: flex;
6-
flex-direction: column;
7-
8-
h5 {
9-
margin: 0 0 10px;
10-
}
4+
height: 100%;
5+
display: flex;
6+
flex-direction: column;
7+
8+
h5 {
9+
margin: 0 0 10px;
10+
}
1111
`
1212

1313
export const PageHeader = styled.div`
14-
margin: -20px;
15-
margin-bottom: 0;
16-
padding: 40px 40px 20px;
17-
background-color: var(--ds-background-subtleBorderedNeutral-resting, #FAFBFC);
18-
border-bottom: 1px solid #dfe1e6;
19-
box-shadow: 0 2px 15px #ddd;
20-
21-
input {
22-
background-color: white;
23-
}
14+
margin: -20px;
15+
margin-bottom: 0;
16+
padding: 40px 40px 20px;
17+
background-color: var(
18+
--ds-background-subtleBorderedNeutral-resting,
19+
#fafbfc
20+
);
21+
border-bottom: 1px solid #dfe1e6;
22+
box-shadow: 0 2px 15px #ddd;
23+
24+
input {
25+
background-color: white;
26+
}
2427
`
2528

2629
export const PageHeaderTitle = styled.div`
27-
display: flex;
28-
gap: 10px;
29-
align-items: center;
30+
display: flex;
31+
gap: 10px;
32+
align-items: center;
3033
`
3134

32-
export const PageHeaderSubTitle = styled.p`
33-
`
35+
export const PageHeaderSubTitle = styled.p``
3436

3537
export const PageBody = styled.div`
36-
display: flex;
37-
flex: 1;
38-
flex-direction: column;
39-
min-width: 0;
40-
min-height: 0;
41-
padding: 0 20px 0 6px;
42-
margin: 15px 15px 0 15px;
38+
display: flex;
39+
flex: 1;
40+
flex-direction: column;
41+
min-width: 0;
42+
min-height: 0;
43+
padding: 0 20px 0 6px;
44+
margin: 15px 15px 0 15px;
4345
`
4446

4547
export const PageHeaderLine = styled.div`
46-
margin-top: 15px;
47-
width: 65%;
48-
display: flex;
49-
align-items: center;
50-
51-
> * {
52-
margin-right: 5px;
53-
}
54-
`
48+
margin-top: 15px;
49+
width: 65%;
50+
display: flex;
51+
align-items: center;
52+
53+
> * {
54+
margin-right: 5px;
55+
}
56+
`

‎library/src/components/timetable/ItemWrapper.tsx‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,19 @@ import type { TimeSlotBooking, TimeTableGroup } from "./LPTimeTable"
55
import utilStyles from "../../utils.module.css"
66
import { useMultiSelectionMode } from "./SelectedTimeSlotsContext"
77

8-
9-
export type RenderItemProps<G extends TimeTableGroup, I extends TimeSlotBooking> = {
10-
group: G,
11-
item: I,
12-
selectedItem: I | undefined,
8+
export type RenderItemProps<
9+
G extends TimeTableGroup,
10+
I extends TimeSlotBooking,
11+
> = {
12+
group: G
13+
item: I
14+
selectedItem: I | undefined
1315
}
1416

15-
export default function ItemWrapper<G extends TimeTableGroup, I extends TimeSlotBooking> ( {
17+
export default function ItemWrapper<
18+
G extends TimeTableGroup,
19+
I extends TimeSlotBooking,
20+
>({
1621
group,
1722
item,
1823
selectedTimeSlotItem,
@@ -21,60 +26,74 @@ export default function ItemWrapper<G extends TimeTableGroup, I extends TimeSlot
2126
left,
2227
width,
2328
}: {
24-
group: G,
25-
item: I,
26-
selectedTimeSlotItem: I | undefined,
27-
onTimeSlotItemClick: ( ( group: G, item: I ) => void ) | undefined,
28-
renderTimeSlotItem: ( ( props: RenderItemProps<G, I> ) => JSX.Element ) | undefined,
29-
left: number,
30-
width: number,
31-
} ) {
29+
group: G
30+
item: I
31+
selectedTimeSlotItem: I | undefined
32+
onTimeSlotItemClick: ((group: G, item: I) => void) | undefined
33+
renderTimeSlotItem:
34+
| ((props: RenderItemProps<G, I>) => JSX.Element)
35+
| undefined
36+
left: number
37+
width: number
38+
}) {
3239
//#region fade out animation
33-
const ref = useRef<HTMLDivElement>( null )
34-
useEffect( () => {
40+
const ref = useRef<HTMLDivElement>(null)
41+
useEffect(() => {
3542
return () => {
36-
ref.current?.classList.add( utilStyles.fadeOut )
43+
ref.current?.classList.add(utilStyles.fadeOut)
3744
}
38-
}, [] )
45+
}, [])
3946
//#endregion
4047

4148
//#region this is required because we do not want that the table cells behind the items react to it
4249
const mouseHandler = {
43-
onMouseDown: ( e: React.MouseEvent<HTMLDivElement, MouseEvent> ) => {
50+
onMouseDown: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
4451
e.stopPropagation()
4552
},
46-
onMouseUp: ( e: React.MouseEvent<HTMLDivElement, MouseEvent> ) => {
53+
onMouseUp: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
4754
e.stopPropagation()
48-
}
55+
},
4956
}
5057
//#endregion
5158

5259
const { multiSelectionMode } = useMultiSelectionMode()
5360

5461
return (
5562
<div
56-
style={ {
63+
style={{
5764
position: "relative",
58-
left: `${ left * 100 }%`,
59-
width: `${ width * 100 }%`,
65+
left: `${left * 100}%`,
66+
width: `${width * 100}%`,
6067
top: 0,
6168
pointerEvents: multiSelectionMode ? "none" : "auto",
62-
} }
63-
{ ...mouseHandler }
69+
}}
70+
{...mouseHandler}
6471
>
6572
<div
66-
ref={ ref }
67-
className={ utilStyles.fadeIn }
68-
style={ {
73+
ref={ref}
74+
className={utilStyles.fadeIn}
75+
style={{
6976
position: "relative",
7077
zIndex: 1,
71-
} }
72-
onClick={ () => {
73-
if ( onTimeSlotItemClick ) onTimeSlotItemClick( group, item )
74-
} }
78+
}}
79+
onClick={() => {
80+
if (onTimeSlotItemClick) onTimeSlotItemClick(group, item)
81+
}}
7582
>
76-
{ renderTimeSlotItem ? renderTimeSlotItem( { group, item, selectedItem: selectedTimeSlotItem } ) : <Item group={ group } item={ item } selectedItem={ selectedTimeSlotItem } /> }
83+
{renderTimeSlotItem ? (
84+
renderTimeSlotItem({
85+
group,
86+
item,
87+
selectedItem: selectedTimeSlotItem,
88+
})
89+
) : (
90+
<Item
91+
group={group}
92+
item={item}
93+
selectedItem={selectedTimeSlotItem}
94+
/>
95+
)}
7796
</div>
7897
</div>
7998
)
80-
}
99+
}

‎library/src/components/timetable/LPTimeTable.module.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,6 @@
3838
height: 0;
3939
}
4040

41-
/* borders of the left sticky column */
42-
.lpTimeTable .groupHeader {
43-
position: sticky;
44-
left: 0;
45-
z-index: 3;
46-
border-width: 0;
47-
border-right-width: 2px;
48-
border-bottom-width: 1px;
49-
border-style: solid;
50-
border-color: var(--ds-border-bold);
51-
user-select: none !important;
52-
}
53-
5441
.lpTimeTable .headerTimeSlot {
5542
color: var(--ds-text);
5643
font-weight: 500;

‎library/src/components/timetable/LPTimeTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
178178
groupHeaderColumnWidth,
179179
columnWidth,
180180
rounding,
181-
height,
181+
height = "100%",
182182
placeHolderHeight = "1.5rem",
183183
disableWeekendInteractions = true,
184184
showTimeSlotHeader = true,
@@ -361,7 +361,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
361361
>
362362
<div
363363
style={{
364-
overflowX: "auto",
364+
overflow: "auto",
365365
//overflowY: "hidden",
366366
height,
367367
}}

‎library/src/components/timetable/TimeLineTableSimplified.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,17 @@ function GroupHeaderTableCell<G extends TimeTableGroup>({
118118
if (onGroupClick) onGroupClick(group)
119119
}}
120120
rowSpan={groupRowMax + 1}
121-
className={`${styles.groupHeader}`}
121+
className={`${styles.unselectable}`}
122122
style={{
123123
backgroundColor: groupNumber % 2 === 0 ? dayColor0 : dayColor1,
124+
position: "sticky",
125+
left: 0,
126+
zIndex: 2,
127+
borderWidth: 0,
128+
borderRightWidth: "2px",
129+
borderBottomWidth: "1px",
130+
borderStyle: "solid",
131+
borderColor: token("color.border.bold"),
124132
}}
125133
>
126134
{renderGroup ? renderGroup({ group }) : <Group group={group} />}

0 commit comments

Comments
 (0)