javascriptgantt 1.0.0 → 1.2.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,100 +1,100 @@
1
- :root {
2
- /* -------- Background Colors Start ----------- */
3
- --body-background: #333332;
4
- --header-background: #333332;
5
- --header-cell-background: #333332;
6
- --timeline-cell-background: #333332;
7
- --timeline-scale-background: #333332;
8
- --resizer-background: #ffffff4d;
9
- --grid-resize-area-background: #c0bebe4f;
10
- --row-item-background: #333332;
11
- --row-item-hover-background: rgba(19, 147, 190, 0.379);
12
- --weekend-cell-background: #4d4d4d;
13
- --selected-background: rgba(19, 147, 190, 0.379);
14
- --marker-background: #1396bea7;
15
- --marker-hover-background: #1395be;
16
- --toastr-background: #aaaaaa;
17
- --scroll-background: #333332;
18
-
19
- /* lightbox backgrounds */
20
- --lightbox-background: #333332;
21
- --textarea-background: #333332;
22
-
23
- /* tooltip background */
24
- --tooltip-background: #333332;
25
-
26
- /* taskbar background */
27
- --taskbar-background: #1395be;
28
- --taskbar-child-background: #1395be;
29
- --task-area-background: rgba(19, 149, 190, 0.302);
30
- --task-progress-background: #0e7595;
31
- --child-task-progress-background: #0e7595;
32
-
33
- /* milestone content */
34
- --milestone-content-background: #ff3737;
35
-
36
- /* backdrop background */
37
- --backdrop-background: #0000004d;
38
- --loder-backdrop-background: #000000cc;
39
-
40
- /* btn background */
41
- --btn-primary-background: #1395be;
42
- --btn-normal-background: rgb(255, 255, 255, 0.85);
43
- --btn-danger-background: #ff3737;
44
-
45
- /* link backgrounds */
46
- --link-background: rgba(255, 140, 0, 0.85);
47
- --link-control-background: #f0f0f0;
48
- --link-control-hover-background: #fff;
49
- --selected-link-control-background: rgba(255, 140, 0, 0.85);
50
- /* -------- Background Colors End ----------- */
51
-
52
- /* -------- Text Colors Start ----------- */
53
- --primary-color: rgb(255, 255, 255, 0.85);
54
- --marker-color: rgb(255, 255, 255, 0.85);
55
- --tooltip-color: rgb(255, 255, 255, 0.85);
56
- --task-content-color: rgb(255, 255, 255, 0.85);
57
- --milestone-content-color: rgb(255, 255, 255, 0.85);
58
-
59
- /* btn colors */
60
- --btn-primary-color: rgb(255, 255, 255, 0.85);
61
- --btn-normal-color: #000;
62
- --btn-danger-color: #ff3737;
63
-
64
- /* loader color */
65
- --loader-color: #d1ebfa;
66
- --loader-after-color: #0093ff;
67
-
68
- /* toastr color */
69
- --toastr-color: rgb(255, 255, 255, 0.85);
70
- --toastr-p-color: rgb(255, 255, 255, 0.85);
71
- /* -------- Text Colors End ----------- */
72
-
73
- /* -------- Border Colors Start ----------- */
74
- --primary-border: #ffffff4d;
75
-
76
- /* taskbar border */
77
- --taskbar-border: #0e7595;
78
- --task-area-border: #1395be;
79
- --milestone-content-border: #ff3737;
80
-
81
- /* link border */
82
- --link-border: rgba(255, 140, 0, 0.85);
83
- --link-control-border: #929292;
84
- }
85
-
86
- .js-gantt-layout {
87
- color-scheme: dark;
88
- }
89
-
90
- .js-gantt-folder-icon > div {
91
- background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="16px" height="10px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.a{fill:none;stroke:%23fff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><path class="a" d="M41.6783,13.0436H24.77c-1.9628-.1072-5.9311-4.2372-8.1881-4.2372H6.6806V8.8046A2.1762,2.1762,0,0,0,4.5,10.9763v7.3063h39V14.8652A1.8217,1.8217,0,0,0,41.6783,13.0436Z" /><path class="a" d="M43.5,18.2826H4.5V37.0165a2.1762,2.1762,0,0,0,2.1735,2.1789H41.3194A2.1762,2.1762,0,0,0,43.5,37.0237V18.2826Z" /></svg>');
92
- }
93
-
94
- .head-cell .js-gantt-sort.js-gantt-desc {
95
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAARUlEQVR4nGNgQAKGxib/GbABkIS7b8B/DAUwCRiGK0CXwFBAb1DfP/U/LszwHwi2X7qFgUEArBtdAVwCBmAKMCSQFSDzAWXXaOHsXeqkAAAAAElFTkSuQmCC);
96
- }
97
-
98
- .head-cell .js-gantt-sort.js-gantt-asc {
99
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAARUlEQVR42mNgQAL1/VP/M2ADIIntF2/9x1AAlrh0C47hCmA60DFYwX88gIFGwNDY5D8uDFbg7hvwHx2jmIBTAlkB0e4BAEjlaNtBWJPnAAAAAElFTkSuQmCC);
100
- }
1
+ :root {
2
+ /* -------- Background Colors Start ----------- */
3
+ --body-background: #333332;
4
+ --header-background: #333332;
5
+ --header-cell-background: #333332;
6
+ --timeline-cell-background: #333332;
7
+ --timeline-scale-background: #333332;
8
+ --resizer-background: #ffffff4d;
9
+ --grid-resize-area-background: #c0bebe4f;
10
+ --row-item-background: #333332;
11
+ --row-item-hover-background: rgba(19, 147, 190, 0.379);
12
+ --weekend-cell-background: #4d4d4d;
13
+ --selected-background: rgba(19, 147, 190, 0.379);
14
+ --marker-background: #1396bea7;
15
+ --marker-hover-background: #1395be;
16
+ --toastr-background: #aaaaaa;
17
+ --scroll-background: #333332;
18
+
19
+ /* lightbox backgrounds */
20
+ --lightbox-background: #333332;
21
+ --textarea-background: #333332;
22
+
23
+ /* tooltip background */
24
+ --tooltip-background: #333332;
25
+
26
+ /* taskbar background */
27
+ --taskbar-background: #1395be;
28
+ --taskbar-child-background: #1395be;
29
+ --task-area-background: rgba(19, 149, 190, 0.302);
30
+ --task-progress-background: #0e7595;
31
+ --child-task-progress-background: #0e7595;
32
+
33
+ /* milestone content */
34
+ --milestone-content-background: #ff3737;
35
+
36
+ /* backdrop background */
37
+ --backdrop-background: #0000004d;
38
+ --loder-backdrop-background: #000000cc;
39
+
40
+ /* btn background */
41
+ --btn-primary-background: #1395be;
42
+ --btn-normal-background: rgb(255, 255, 255, 0.85);
43
+ --btn-danger-background: #ff3737;
44
+
45
+ /* link backgrounds */
46
+ --link-background: rgba(255, 140, 0, 0.85);
47
+ --link-control-background: #f0f0f0;
48
+ --link-control-hover-background: #fff;
49
+ --selected-link-control-background: rgba(255, 140, 0, 0.85);
50
+ /* -------- Background Colors End ----------- */
51
+
52
+ /* -------- Text Colors Start ----------- */
53
+ --primary-color: rgb(255, 255, 255, 0.85);
54
+ --marker-color: rgb(255, 255, 255, 0.85);
55
+ --tooltip-color: rgb(255, 255, 255, 0.85);
56
+ --task-content-color: rgb(255, 255, 255, 0.85);
57
+ --milestone-content-color: rgb(255, 255, 255, 0.85);
58
+
59
+ /* btn colors */
60
+ --btn-primary-color: rgb(255, 255, 255, 0.85);
61
+ --btn-normal-color: #000;
62
+ --btn-danger-color: #ff3737;
63
+
64
+ /* loader color */
65
+ --loader-color: #d1ebfa;
66
+ --loader-after-color: #0093ff;
67
+
68
+ /* toastr color */
69
+ --toastr-color: rgb(255, 255, 255, 0.85);
70
+ --toastr-p-color: rgb(255, 255, 255, 0.85);
71
+ /* -------- Text Colors End ----------- */
72
+
73
+ /* -------- Border Colors Start ----------- */
74
+ --primary-border: #ffffff4d;
75
+
76
+ /* taskbar border */
77
+ --taskbar-border: #0e7595;
78
+ --task-area-border: #1395be;
79
+ --milestone-content-border: #ff3737;
80
+
81
+ /* link border */
82
+ --link-border: rgba(255, 140, 0, 0.85);
83
+ --link-control-border: #929292;
84
+ }
85
+
86
+ .js-gantt-layout {
87
+ color-scheme: dark;
88
+ }
89
+
90
+ .js-gantt-folder-icon > div {
91
+ background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="16px" height="10px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs><style>.a{fill:none;stroke:%23fff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><path class="a" d="M41.6783,13.0436H24.77c-1.9628-.1072-5.9311-4.2372-8.1881-4.2372H6.6806V8.8046A2.1762,2.1762,0,0,0,4.5,10.9763v7.3063h39V14.8652A1.8217,1.8217,0,0,0,41.6783,13.0436Z" /><path class="a" d="M43.5,18.2826H4.5V37.0165a2.1762,2.1762,0,0,0,2.1735,2.1789H41.3194A2.1762,2.1762,0,0,0,43.5,37.0237V18.2826Z" /></svg>');
92
+ }
93
+
94
+ .head-cell .js-gantt-sort.js-gantt-desc {
95
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAARUlEQVR4nGNgQAKGxib/GbABkIS7b8B/DAUwCRiGK0CXwFBAb1DfP/U/LszwHwi2X7qFgUEArBtdAVwCBmAKMCSQFSDzAWXXaOHsXeqkAAAAAElFTkSuQmCC);
96
+ }
97
+
98
+ .head-cell .js-gantt-sort.js-gantt-asc {
99
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAARUlEQVR42mNgQAL1/VP/M2ADIIntF2/9x1AAlrh0C47hCmA60DFYwX88gIFGwNDY5D8uDFbg7hvwHx2jmIBTAlkB0e4BAEjlaNtBWJPnAAAAAElFTkSuQmCC);
100
+ }
package/style.css CHANGED
@@ -1,216 +1,216 @@
1
- :root {
2
- --bg-color: #fff;
3
- --text-color: #000;
4
- --text-secondary-color: #fff;
5
- --index-primary-color: #4ca0fff2;
6
- --index-primary-hover-color: #3585e0f2;
7
- }
8
-
9
- * {
10
- font-family: sans-serif;
11
- font-style: normal;
12
- font-weight: 400;
13
- font-size: 13px;
14
- color: var(--text-color);
15
- margin: 0;
16
- padding: 0;
17
- box-sizing: border-box;
18
- }
19
-
20
- body {
21
- background-color: var(--bg-color);
22
- }
23
-
24
- .btn {
25
- padding: 10px 20px;
26
- background-color: var(--index-primary-color);
27
- color: var(--text-secondary-color);
28
- font-weight: 500;
29
- border-radius: 3px;
30
- border: transparent;
31
- margin: 5px 0;
32
- cursor: pointer;
33
- transition: all 0.3s ease-in-out;
34
- }
35
- .btn:hover {
36
- background-color: var(--index-primary-hover-color);
37
- }
38
-
39
- .hint-icon path {
40
- cursor: pointer;
41
- fill: var(--index-primary-color);
42
- transition: all 0.3s ease-in-out;
43
- }
44
-
45
- .hint-icon path:hover {
46
- fill: var(--index-primary-hover-color);
47
- }
48
-
49
- .scale-zoom,
50
- .lang,
51
- .export {
52
- padding: 8px;
53
- height: 35px;
54
- border: 1px solid var(--index-primary-color);
55
- background-color: var(--bg-color);
56
- color: var(--text-color);
57
- outline: transparent;
58
- font-family: sans-serif;
59
- color: #000;
60
- font-weight: 600;
61
- cursor: pointer;
62
- }
63
-
64
- .js-gantt-folder-icon > div {
65
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="10px" viewBox="0 0 48 48"><defs><style>.a{fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;}</style></defs><path class="a" d="M41.6783,13.0436H24.77c-1.9628-.1072-5.9311-4.2372-8.1881-4.2372H6.6806V8.8046A2.1762,2.1762,0,0,0,4.5,10.9763v7.3063h39V14.8652A1.8217,1.8217,0,0,0,41.6783,13.0436Z"/><path class="a" d="M43.5,18.2826H4.5V37.0165a2.1762,2.1762,0,0,0,2.1735,2.1789H41.3194A2.1762,2.1762,0,0,0,43.5,37.0237V18.2826Z"/></svg>');
66
- }
67
-
68
- .js-gantt-folder-icon > div {
69
- background-size: 24px;
70
- height: 100%;
71
- background-repeat: no-repeat;
72
- width: 24px;
73
- margin-top: 2px;
74
- margin-right: 2px;
75
- }
76
-
77
- .link-issue {
78
- margin-right: 8px;
79
- }
80
- input[type="search"] {
81
- height: 35px;
82
- width: 280px;
83
- color: var(--text-color);
84
- border: 1px solid #cecece;
85
- margin-bottom: 0px;
86
- display: inline-block;
87
- text-align: left;
88
- font-size: 14px;
89
- font-weight: 500;
90
- padding: 0px 10px 0px 10px;
91
- background: var(--bg-color);
92
- border-radius: 6px;
93
- }
94
- input[type="search"]:focus {
95
- outline: none;
96
- }
97
- #js-gantt {
98
- width: 100vw;
99
- height: calc(100vh - 100px);
100
- }
101
-
102
- input[type="checkbox"] {
103
- height: 0;
104
- width: 0;
105
- visibility: hidden;
106
- }
107
-
108
- .action-container label {
109
- cursor: pointer;
110
- text-indent: -9999px;
111
- width: 44px;
112
- height: 24px;
113
- background: #cccccc;
114
- display: inline-block;
115
- border-radius: 30px;
116
- position: relative;
117
- }
118
-
119
- .action-container label:after {
120
- content: "";
121
- position: absolute;
122
- top: 2px;
123
- left: 2px;
124
- width: 20px;
125
- height: 20px;
126
- background: var(--bg-color);
127
- border-radius: 20px;
128
- transition: 0.3s;
129
- }
130
-
131
- .action-container input:checked + label {
132
- background: var(--index-primary-color);
133
- }
134
-
135
- .action-container input:checked + label:after {
136
- left: 22px;
137
- }
138
-
139
- /* .my-scale-class-2{
140
- background-color: #fafafa;
141
- } */
142
-
143
- .collapse-container {
144
- display: flex;
145
- align-items: center;
146
- }
147
-
148
- .action-container * {
149
- font-weight: 500;
150
- font-size: 13px;
151
- }
152
- .action-container {
153
- margin: 0 10px;
154
- height: 80px;
155
- align-items: center;
156
- }
157
-
158
- .action-container div {
159
- margin-right: 15px;
160
- }
161
-
162
- .collapse-container span {
163
- margin-right: 5px;
164
- }
165
-
166
- .gantt-search {
167
- position: absolute;
168
- right: 10px;
169
- float: right;
170
- }
171
-
172
- .coming-soon {
173
- color: #fff;
174
- font-size: 5px;
175
- padding: 2px;
176
- border-radius: 5px;
177
- background-color: #21cfff;
178
- position: absolute;
179
- right: 7px;
180
- top: 7px;
181
- }
182
-
183
- .auto-scheduling {
184
- position: relative;
185
- }
186
-
187
- .toggle-theme {
188
- margin-left: 2px;
189
- }
190
-
191
- .export,
192
- .scale-zoom,
193
- .lang {
194
- background-color: var(--bg-color);
195
- color: var(--text-color);
196
- }
197
-
198
- .finish p:not(:first-child) {
199
- opacity: 0.5;
200
- }
201
-
202
- .dark-mode {
203
- display: flex;
204
- align-items: center;
205
- }
206
-
207
- .zt-tour-hint {
208
- background-color: var(--bg-color) !important;
209
- box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px !important;
210
- }
211
-
212
- .party .js-gantt-marker-content {
213
- width: max-content;
214
- font-size: 16px;
215
- padding: 8px;
1
+ :root {
2
+ --bg-color: #fff;
3
+ --text-color: #000;
4
+ --text-secondary-color: #fff;
5
+ --index-primary-color: #4ca0fff2;
6
+ --index-primary-hover-color: #3585e0f2;
7
+ }
8
+
9
+ * {
10
+ font-family: sans-serif;
11
+ font-style: normal;
12
+ font-weight: 400;
13
+ font-size: 13px;
14
+ color: var(--text-color);
15
+ margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ body {
21
+ background-color: var(--bg-color);
22
+ }
23
+
24
+ .btn {
25
+ padding: 10px 20px;
26
+ background-color: var(--index-primary-color);
27
+ color: var(--text-secondary-color);
28
+ font-weight: 500;
29
+ border-radius: 3px;
30
+ border: transparent;
31
+ margin: 5px 0;
32
+ cursor: pointer;
33
+ transition: all 0.3s ease-in-out;
34
+ }
35
+ .btn:hover {
36
+ background-color: var(--index-primary-hover-color);
37
+ }
38
+
39
+ .hint-icon path {
40
+ cursor: pointer;
41
+ fill: var(--index-primary-color);
42
+ transition: all 0.3s ease-in-out;
43
+ }
44
+
45
+ .hint-icon path:hover {
46
+ fill: var(--index-primary-hover-color);
47
+ }
48
+
49
+ .scale-zoom,
50
+ .lang,
51
+ .export {
52
+ padding: 8px;
53
+ height: 35px;
54
+ border: 1px solid var(--index-primary-color);
55
+ background-color: var(--bg-color);
56
+ color: var(--text-color);
57
+ outline: transparent;
58
+ font-family: sans-serif;
59
+ color: #000;
60
+ font-weight: 600;
61
+ cursor: pointer;
62
+ }
63
+
64
+ .js-gantt-folder-icon > div {
65
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="10px" viewBox="0 0 48 48"><defs><style>.a{fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;}</style></defs><path class="a" d="M41.6783,13.0436H24.77c-1.9628-.1072-5.9311-4.2372-8.1881-4.2372H6.6806V8.8046A2.1762,2.1762,0,0,0,4.5,10.9763v7.3063h39V14.8652A1.8217,1.8217,0,0,0,41.6783,13.0436Z"/><path class="a" d="M43.5,18.2826H4.5V37.0165a2.1762,2.1762,0,0,0,2.1735,2.1789H41.3194A2.1762,2.1762,0,0,0,43.5,37.0237V18.2826Z"/></svg>');
66
+ }
67
+
68
+ .js-gantt-folder-icon > div {
69
+ background-size: 24px;
70
+ height: 100%;
71
+ background-repeat: no-repeat;
72
+ width: 24px;
73
+ margin-top: 2px;
74
+ margin-right: 2px;
75
+ }
76
+
77
+ .link-issue {
78
+ margin-right: 8px;
79
+ }
80
+ input[type="search"] {
81
+ height: 35px;
82
+ width: 280px;
83
+ color: var(--text-color);
84
+ border: 1px solid #cecece;
85
+ margin-bottom: 0px;
86
+ display: inline-block;
87
+ text-align: left;
88
+ font-size: 14px;
89
+ font-weight: 500;
90
+ padding: 0px 10px 0px 10px;
91
+ background: var(--bg-color);
92
+ border-radius: 6px;
93
+ }
94
+ input[type="search"]:focus {
95
+ outline: none;
96
+ }
97
+ #js-gantt {
98
+ width: 100vw;
99
+ height: calc(100vh - 100px);
100
+ }
101
+
102
+ input[type="checkbox"] {
103
+ height: 0;
104
+ width: 0;
105
+ visibility: hidden;
106
+ }
107
+
108
+ .action-container label {
109
+ cursor: pointer;
110
+ text-indent: -9999px;
111
+ width: 44px;
112
+ height: 24px;
113
+ background: #cccccc;
114
+ display: inline-block;
115
+ border-radius: 30px;
116
+ position: relative;
117
+ }
118
+
119
+ .action-container label:after {
120
+ content: "";
121
+ position: absolute;
122
+ top: 2px;
123
+ left: 2px;
124
+ width: 20px;
125
+ height: 20px;
126
+ background: var(--bg-color);
127
+ border-radius: 20px;
128
+ transition: 0.3s;
129
+ }
130
+
131
+ .action-container input:checked + label {
132
+ background: var(--index-primary-color);
133
+ }
134
+
135
+ .action-container input:checked + label:after {
136
+ left: 22px;
137
+ }
138
+
139
+ /* .my-scale-class-2{
140
+ background-color: #fafafa;
141
+ } */
142
+
143
+ .collapse-container {
144
+ display: flex;
145
+ align-items: center;
146
+ }
147
+
148
+ .action-container * {
149
+ font-weight: 500;
150
+ font-size: 13px;
151
+ }
152
+ .action-container {
153
+ margin: 0 10px;
154
+ height: 80px;
155
+ align-items: center;
156
+ }
157
+
158
+ .action-container div {
159
+ margin-right: 15px;
160
+ }
161
+
162
+ .collapse-container span {
163
+ margin-right: 5px;
164
+ }
165
+
166
+ .gantt-search {
167
+ position: absolute;
168
+ right: 10px;
169
+ float: right;
170
+ }
171
+
172
+ .coming-soon {
173
+ color: #fff;
174
+ font-size: 5px;
175
+ padding: 2px;
176
+ border-radius: 5px;
177
+ background-color: #21cfff;
178
+ position: absolute;
179
+ right: 7px;
180
+ top: 7px;
181
+ }
182
+
183
+ .auto-scheduling {
184
+ position: relative;
185
+ }
186
+
187
+ .toggle-theme {
188
+ margin-left: 2px;
189
+ }
190
+
191
+ .export,
192
+ .scale-zoom,
193
+ .lang {
194
+ background-color: var(--bg-color);
195
+ color: var(--text-color);
196
+ }
197
+
198
+ .finish p:not(:first-child) {
199
+ opacity: 0.5;
200
+ }
201
+
202
+ .dark-mode {
203
+ display: flex;
204
+ align-items: center;
205
+ }
206
+
207
+ .zt-tour-hint {
208
+ background-color: var(--bg-color) !important;
209
+ box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px !important;
210
+ }
211
+
212
+ .party .js-gantt-marker-content {
213
+ width: max-content;
214
+ font-size: 16px;
215
+ padding: 8px;
216
216
  }