@hellobetterdigitalnz/betterui 0.0.3-310 → 0.0.3-313
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Components/DataDisplay/GanttChart/GanttChart.d.ts +20 -3
- package/dist/Components/DataDisplay/index.d.ts +1 -0
- package/dist/betterui.css +1 -1
- package/dist/index.cjs.js +10 -10
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +3264 -2952
- package/dist/index.es.js.map +1 -1
- package/package.json +1 -1
- package/src/Components/DataDisplay/GanttChart/{GanttChart.scss → GanttChart.module.scss} +74 -55
- package/src/Components/DataDisplay/GanttChart/GanttChart.tsx +379 -179
- package/src/Components/DataDisplay/index.ts +2 -0
package/package.json
CHANGED
|
@@ -1,50 +1,52 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
border: 1px solid #dcdfe6;
|
|
4
|
-
background-color: #fff;
|
|
1
|
+
/* Month navigation */
|
|
2
|
+
.monthControls {
|
|
5
3
|
display: flex;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: space-between;
|
|
6
|
+
padding-bottom: 24px;
|
|
9
7
|
|
|
10
|
-
|
|
11
|
-
.month-controls {
|
|
8
|
+
.prevBtn,.nxtBtn{
|
|
12
9
|
display: flex;
|
|
13
|
-
|
|
14
|
-
justify-content: center;
|
|
15
|
-
padding: 8px;
|
|
16
|
-
background-color: #f9fafc;
|
|
17
|
-
border-bottom: 1px solid #e6e9f0;
|
|
18
|
-
|
|
19
|
-
button {
|
|
20
|
-
background: none;
|
|
21
|
-
border: 1px solid #dcdfe6;
|
|
22
|
-
padding: 4px 8px;
|
|
23
|
-
margin: 0 8px;
|
|
24
|
-
cursor: pointer;
|
|
25
|
-
font-size: 13px;
|
|
26
|
-
border-radius: 4px;
|
|
10
|
+
padding: calc(2 * var(--space-unit));
|
|
27
11
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
12
|
+
svg{
|
|
13
|
+
height: 24px;
|
|
14
|
+
width: 24px;
|
|
31
15
|
}
|
|
16
|
+
}
|
|
32
17
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
18
|
+
.monthControlLeft, .monthControlRight{
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.period{
|
|
24
|
+
font-size: var(--font-size-h2);
|
|
25
|
+
line-height: var(--line-height-h2);
|
|
26
|
+
font-weight: var(--font-weight-h2);
|
|
27
|
+
margin-left: 24px;
|
|
37
28
|
}
|
|
38
29
|
|
|
39
|
-
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
.ganttChart {
|
|
34
|
+
font-family: Arial, sans-serif;
|
|
35
|
+
background-color: #fff;
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
overflow: auto;
|
|
39
|
+
width: 100vw;
|
|
40
|
+
//height: 100vh;
|
|
41
|
+
|
|
42
|
+
.ganttHeader {
|
|
40
43
|
display: flex;
|
|
41
|
-
background-color: #f9fafc;
|
|
42
44
|
position: sticky;
|
|
43
45
|
top: 0;
|
|
44
46
|
z-index: 200;
|
|
45
47
|
min-width: max-content;
|
|
46
48
|
|
|
47
|
-
.
|
|
49
|
+
.taskCol {
|
|
48
50
|
position: sticky;
|
|
49
51
|
left: 0;
|
|
50
52
|
flex: 0 0 200px;
|
|
@@ -53,8 +55,8 @@
|
|
|
53
55
|
font-weight: 600;
|
|
54
56
|
border-right: 1px solid #e6e9f0;
|
|
55
57
|
font-size: 14px;
|
|
56
|
-
background
|
|
57
|
-
border-bottom: 1px solid
|
|
58
|
+
background: #FFFFFF;
|
|
59
|
+
border-bottom: 1px solid var(--color-gray-100);
|
|
58
60
|
}
|
|
59
61
|
|
|
60
62
|
.days {
|
|
@@ -62,19 +64,20 @@
|
|
|
62
64
|
flex: 1;
|
|
63
65
|
border-bottom: 1px solid #e6e9f0;
|
|
64
66
|
|
|
65
|
-
.
|
|
67
|
+
.dateDayView {
|
|
66
68
|
display: flex;
|
|
67
69
|
flex-direction: column;
|
|
68
70
|
width: 100%;
|
|
71
|
+
border-right: 1px solid var(--color-secondary-100);
|
|
69
72
|
|
|
70
|
-
.
|
|
73
|
+
.singleDate {
|
|
71
74
|
text-align: left;
|
|
72
|
-
padding: 4px;
|
|
75
|
+
padding: 10px 4px;
|
|
73
76
|
font-size: 12px;
|
|
74
|
-
font-weight:
|
|
75
|
-
|
|
76
|
-
color: #
|
|
77
|
-
|
|
77
|
+
font-weight: 600;
|
|
78
|
+
line-height: 1.33;
|
|
79
|
+
color: #212121;
|
|
80
|
+
font-family: var(--font);
|
|
78
81
|
}
|
|
79
82
|
|
|
80
83
|
.hours {
|
|
@@ -88,7 +91,6 @@
|
|
|
88
91
|
text-align: center;
|
|
89
92
|
font-size: 11px;
|
|
90
93
|
padding: 2px 0;
|
|
91
|
-
border-left: 1px solid #e6e9f0;
|
|
92
94
|
color: #666;
|
|
93
95
|
background-color: #fff;
|
|
94
96
|
|
|
@@ -99,39 +101,57 @@
|
|
|
99
101
|
}
|
|
100
102
|
}
|
|
101
103
|
|
|
102
|
-
.
|
|
104
|
+
.ganttBody {
|
|
103
105
|
min-width: max-content;
|
|
104
106
|
|
|
105
|
-
|
|
107
|
+
|
|
108
|
+
.ganttRow {
|
|
106
109
|
display: flex;
|
|
107
|
-
min-height:
|
|
110
|
+
min-height: 28px;
|
|
108
111
|
|
|
109
112
|
&:hover {
|
|
110
113
|
background-color: #fafafa;
|
|
111
114
|
}
|
|
112
115
|
|
|
113
|
-
.
|
|
116
|
+
.taskColLabel {
|
|
114
117
|
position: sticky;
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: center;
|
|
115
120
|
left: 0;
|
|
116
121
|
flex: 0 0 200px;
|
|
117
|
-
padding: 8px
|
|
122
|
+
padding: 0px 8px;
|
|
118
123
|
font-size: 13px;
|
|
119
124
|
border-right: 1px solid #f0f0f0;
|
|
120
125
|
background-color: #fff;
|
|
121
126
|
z-index: 100;
|
|
122
|
-
border-bottom: 1px solid
|
|
127
|
+
border-bottom: 1px solid var(--color-gray-100);
|
|
123
128
|
}
|
|
124
129
|
|
|
125
130
|
.days {
|
|
126
131
|
flex: 1;
|
|
127
132
|
display: flex;
|
|
128
133
|
position: relative;
|
|
129
|
-
|
|
134
|
+
|
|
135
|
+
.dayColumn{
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
border-left: 1px solid var(--color-secondary-100);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.dayHrs{
|
|
142
|
+
min-width: 60px;
|
|
143
|
+
height: 28px;
|
|
144
|
+
|
|
145
|
+
&.disabled {
|
|
146
|
+
background-color: #E6EAED;
|
|
147
|
+
pointer-events: none;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
}
|
|
130
151
|
|
|
131
152
|
> div {
|
|
132
153
|
flex: 1;
|
|
133
154
|
min-width:60px;
|
|
134
|
-
border-left: 1px solid #f5f5f5;
|
|
135
155
|
|
|
136
156
|
&:first-child {
|
|
137
157
|
border-left: none;
|
|
@@ -141,10 +161,9 @@
|
|
|
141
161
|
}
|
|
142
162
|
}
|
|
143
163
|
|
|
144
|
-
.
|
|
164
|
+
.taskBar {
|
|
145
165
|
position: absolute;
|
|
146
166
|
height: 24px;
|
|
147
|
-
top: 8px;
|
|
148
167
|
border-radius: 4px;
|
|
149
168
|
display: flex;
|
|
150
169
|
align-items: center;
|
|
@@ -174,7 +193,7 @@
|
|
|
174
193
|
display: flex;
|
|
175
194
|
align-items: center;
|
|
176
195
|
|
|
177
|
-
.
|
|
196
|
+
.barDrag{
|
|
178
197
|
display: flex;
|
|
179
198
|
align-items: center;
|
|
180
199
|
cursor: grab;
|
|
@@ -194,7 +213,7 @@
|
|
|
194
213
|
}
|
|
195
214
|
}
|
|
196
215
|
|
|
197
|
-
|
|
216
|
+
|
|
198
217
|
.task-bar[style*="background-color: blue"] {
|
|
199
218
|
background-color: #4a90e2 !important;
|
|
200
219
|
}
|