feat: first round of tooling upgrades
This commit is contained in:
Safwan Samsudeen
parent
3194f883ad
commit
a65bcff5c1
1
.gitignore
vendored
1
.gitignore
vendored
@ -25,6 +25,7 @@ build/Release
|
|||||||
# Dependency directory
|
# Dependency directory
|
||||||
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
||||||
node_modules
|
node_modules
|
||||||
|
.yarn
|
||||||
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
|
|||||||
1
.yarnrc.yml
Normal file
1
.yarnrc.yml
Normal file
@ -0,0 +1 @@
|
|||||||
|
nodeLinker: node-modules
|
||||||
295
dist/frappe-gantt.css
vendored
295
dist/frappe-gantt.css
vendored
@ -1,295 +0,0 @@
|
|||||||
.dark > .gantt-container .gantt .grid-header {
|
|
||||||
fill: #252525;
|
|
||||||
stroke: #616161;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .grid-row {
|
|
||||||
fill: #252525;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .grid-row:nth-child(even) {
|
|
||||||
fill: #3e3e3e;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .row-line {
|
|
||||||
stroke: #3e3e3e;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .tick {
|
|
||||||
stroke: #616161;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .today-highlight {
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .arrow {
|
|
||||||
stroke: #eee;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .bar {
|
|
||||||
fill: #616161;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .bar-progress {
|
|
||||||
fill: #8a8aff;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .bar-invalid {
|
|
||||||
fill: transparent;
|
|
||||||
stroke: #c6ccd2;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .bar-invalid ~ .bar-label {
|
|
||||||
fill: #ececec;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .bar-label.big {
|
|
||||||
fill: #ececec;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .bar-wrapper:hover .bar {
|
|
||||||
fill: #6e6e6e;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .bar-wrapper:hover .bar-progress {
|
|
||||||
fill: #a4a4ff;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .bar-wrapper.active .bar {
|
|
||||||
fill: #6e6e6e;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .bar-wrapper.active .bar-progress {
|
|
||||||
fill: #a4a4ff;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .upper-text {
|
|
||||||
fill: #a2a2a2;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .gantt .lower-text {
|
|
||||||
fill: #f7f7f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark > .gantt-container .popup-wrapper {
|
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .popup-wrapper .title {
|
|
||||||
border-color: #a4a4ff;
|
|
||||||
}
|
|
||||||
.dark > .gantt-container .popup-wrapper .pointer {
|
|
||||||
border-top-color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt-container {
|
|
||||||
line-height: 14.5px;
|
|
||||||
}
|
|
||||||
.gantt-container .grid-header {
|
|
||||||
background-color: #ffffff;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.gantt-container .lower-text,
|
|
||||||
.gantt-container .upper-text {
|
|
||||||
text-anchor: middle;
|
|
||||||
color: #111;
|
|
||||||
}
|
|
||||||
.gantt-container .upper-header {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
.gantt-container .lower-header {
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
.gantt-container .lower-text {
|
|
||||||
font-size: 14px;
|
|
||||||
position: absolute;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
.gantt-container .upper-text {
|
|
||||||
position: absolute;
|
|
||||||
width: fit-content;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.gantt-container .current-upper {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
.gantt-container .side-header {
|
|
||||||
position: fixed;
|
|
||||||
padding: 0 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
background: white;
|
|
||||||
line-height: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.gantt-container .today-button,
|
|
||||||
.gantt-container .viewmode-select {
|
|
||||||
background: #f4f5f6;
|
|
||||||
text-align: -webkit-center;
|
|
||||||
text-align: center;
|
|
||||||
height: 25px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
color: #111;
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
height: 25px;
|
|
||||||
}
|
|
||||||
.gantt-container .viewmode-select {
|
|
||||||
outline: none !important;
|
|
||||||
padding: 4px 8px;
|
|
||||||
margin-right: 4px;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
text-indent: 1px;
|
|
||||||
text-overflow: "";
|
|
||||||
}
|
|
||||||
.gantt-container .date-highlight {
|
|
||||||
background-color: #ebeef0;
|
|
||||||
border-radius: 12px;
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.gantt-container .current-highlight {
|
|
||||||
position: absolute;
|
|
||||||
background: #2c94ec;
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
.gantt-container .current-date-highlight {
|
|
||||||
background: #2c94ec;
|
|
||||||
color: #fff;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt {
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.gantt .grid-background {
|
|
||||||
fill: none;
|
|
||||||
}
|
|
||||||
.gantt .grid-row {
|
|
||||||
fill: #ffffff;
|
|
||||||
}
|
|
||||||
.gantt .row-line {
|
|
||||||
stroke: #ebeff2;
|
|
||||||
}
|
|
||||||
.gantt .tick {
|
|
||||||
stroke: #ebeef0;
|
|
||||||
stroke-width: 0.4;
|
|
||||||
}
|
|
||||||
.gantt .tick.thick {
|
|
||||||
stroke: #e0e0e0;
|
|
||||||
stroke-width: 0.7;
|
|
||||||
}
|
|
||||||
.gantt .holiday-highlight {
|
|
||||||
fill: #f9fafa;
|
|
||||||
}
|
|
||||||
.gantt .arrow {
|
|
||||||
fill: none;
|
|
||||||
stroke: #9fa9b1;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper .bar {
|
|
||||||
fill: #fff;
|
|
||||||
stroke: #fff;
|
|
||||||
stroke-width: 0;
|
|
||||||
transition: stroke-width 0.3s ease;
|
|
||||||
}
|
|
||||||
.gantt .bar-progress {
|
|
||||||
fill: #ebeef0;
|
|
||||||
}
|
|
||||||
.gantt .bar-expected-progress {
|
|
||||||
fill: #c4c4e9;
|
|
||||||
}
|
|
||||||
.gantt .bar-invalid {
|
|
||||||
fill: transparent;
|
|
||||||
stroke: #fff;
|
|
||||||
stroke-width: 1;
|
|
||||||
stroke-dasharray: 5;
|
|
||||||
}
|
|
||||||
.gantt .bar-invalid ~ .bar-label {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
.gantt .bar-label {
|
|
||||||
fill: #111;
|
|
||||||
dominant-baseline: central;
|
|
||||||
font-family: Helvetica;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.gantt .bar-label.big {
|
|
||||||
fill: #111;
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper.important .bar {
|
|
||||||
fill: #94c4f4;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper.important .bar-progress {
|
|
||||||
fill: #2c94ec;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper.important .bar-label {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper.important .handle {
|
|
||||||
fill: #94c4f4;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper.important .handle.progress {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
.gantt .handle {
|
|
||||||
fill: #dcdce4;
|
|
||||||
cursor: ew-resize;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
.gantt .handle.progress {
|
|
||||||
fill: #666;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper {
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper.active .handle {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper .bar {
|
|
||||||
-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
|
|
||||||
filter: drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper:hover .bar {
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
.gantt .bar-wrapper:hover .date-highlight {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.gantt .hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt-container {
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
font-size: 12px;
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
.gantt-container .popup-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: #171b1f;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: max-content;
|
|
||||||
}
|
|
||||||
.gantt-container .popup-wrapper.hidden {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
.gantt-container .popup-wrapper .title {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
text-align: -webkit-center;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.gantt-container .popup-wrapper .subtitle {
|
|
||||||
color: #98a1a9;
|
|
||||||
}
|
|
||||||
.gantt-container .popup-wrapper .pointer {
|
|
||||||
position: absolute;
|
|
||||||
height: 5px;
|
|
||||||
margin: 0 0 0 -5px;
|
|
||||||
border: 5px solid transparent;
|
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
3735
dist/frappe-gantt.js
vendored
3735
dist/frappe-gantt.js
vendored
File diff suppressed because it is too large
Load Diff
1
dist/frappe-gantt.js.map
vendored
1
dist/frappe-gantt.js.map
vendored
File diff suppressed because one or more lines are too long
1
dist/frappe-gantt.min.css
vendored
1
dist/frappe-gantt.min.css
vendored
@ -1 +0,0 @@
|
|||||||
.dark>.gantt-container .gantt .grid-header{fill:#252525;stroke:#616161}.dark>.gantt-container .gantt .grid-row{fill:#252525}.dark>.gantt-container .gantt .grid-row:nth-child(even){fill:#3e3e3e}.dark>.gantt-container .gantt .row-line{stroke:#3e3e3e}.dark>.gantt-container .gantt .tick{stroke:#616161}.dark>.gantt-container .gantt .today-highlight{opacity:.2}.dark>.gantt-container .gantt .arrow{stroke:#eee}.dark>.gantt-container .gantt .bar{fill:#616161;stroke:none}.dark>.gantt-container .gantt .bar-progress{fill:#8a8aff}.dark>.gantt-container .gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#c6ccd2}.dark>.gantt-container .gantt .bar-invalid~.bar-label{fill:#ececec}.dark>.gantt-container .gantt .bar-label.big{fill:#ececec}.dark>.gantt-container .gantt .bar-wrapper:hover .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper:hover .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .bar-wrapper.active .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper.active .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .upper-text{fill:#a2a2a2}.dark>.gantt-container .gantt .lower-text{fill:#f7f7f7}.dark>.gantt-container .popup-wrapper{background-color:#333}.dark>.gantt-container .popup-wrapper .title{border-color:#a4a4ff}.dark>.gantt-container .popup-wrapper .pointer{border-top-color:#333}.gantt-container{line-height:14.5px}.gantt-container .grid-header{background-color:#fff;position:sticky;top:0;left:0;z-index:10}.gantt-container .lower-text,.gantt-container .upper-text{text-anchor:middle;color:#111}.gantt-container .upper-header{height:40px}.gantt-container .lower-header{height:30px}.gantt-container .lower-text{font-size:14px;position:absolute;width:fit-content}.gantt-container .upper-text{position:absolute;width:fit-content;font-weight:500;font-size:16px}.gantt-container .current-upper{position:fixed}.gantt-container .side-header{position:fixed;padding:0 10px;margin-right:10px;background:#fff;line-height:20px;font-weight:400}.gantt-container .today-button,.gantt-container .viewmode-select{background:#f4f5f6;text-align:-webkit-center;text-align:center;height:25px;border-radius:8px;border:none;color:#111;padding:4px 10px;border-radius:8px;height:25px}.gantt-container .viewmode-select{outline:none !important;padding:4px 8px;margin-right:4px;-webkit-appearance:none;-moz-appearance:none;text-indent:1px;text-overflow:""}.gantt-container .date-highlight{background-color:#ebeef0;border-radius:12px;position:absolute;display:none}.gantt-container .current-highlight{position:absolute;background:#2c94ec;width:1px}.gantt-container .current-date-highlight{background:#2c94ec;color:#fff;padding:4px 8px;border-radius:200px}.gantt{user-select:none;-webkit-user-select:none;position:absolute}.gantt .grid-background{fill:none}.gantt .grid-row{fill:#fff}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#ebeef0;stroke-width:.4}.gantt .tick.thick{stroke:#e0e0e0;stroke-width:.7}.gantt .holiday-highlight{fill:#f9fafa}.gantt .arrow{fill:none;stroke:#9fa9b1;stroke-width:1}.gantt .bar-wrapper .bar{fill:#fff;stroke:#fff;stroke-width:0;transition:stroke-width .3s ease}.gantt .bar-progress{fill:#ebeef0}.gantt .bar-expected-progress{fill:#c4c4e9}.gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#fff;stroke-width:1;stroke-dasharray:5}.gantt .bar-invalid~.bar-label{fill:#fff}.gantt .bar-label{fill:#111;dominant-baseline:central;font-family:Helvetica;font-size:13px;font-weight:400}.gantt .bar-label.big{fill:#111;text-anchor:start}.gantt .bar-wrapper.important .bar{fill:#94c4f4}.gantt .bar-wrapper.important .bar-progress{fill:#2c94ec}.gantt .bar-wrapper.important .bar-label{fill:#fff}.gantt .bar-wrapper.important .handle{fill:#94c4f4}.gantt .bar-wrapper.important .handle.progress{fill:#fff}.gantt .handle{fill:#dcdce4;cursor:ew-resize;opacity:0;visibility:hidden;transition:opacity .3s ease}.gantt .handle.progress{fill:#666}.gantt .bar-wrapper{cursor:pointer;outline:none}.gantt .bar-wrapper.active .handle{visibility:visible;opacity:1}.gantt .bar-wrapper .bar{-webkit-filter:drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));filter:drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));border-radius:3px}.gantt .bar-wrapper:hover .bar{transition:transform .3s ease}.gantt .bar-wrapper:hover .date-highlight{display:block}.gantt .hide{display:none}.gantt-container{position:relative;overflow:auto;font-size:12px;height:500px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:#171b1f;padding:10px;border-radius:5px;width:max-content}.gantt-container .popup-wrapper.hidden{opacity:0 !important}.gantt-container .popup-wrapper .title{margin-bottom:5px;text-align:-webkit-center;text-align:center;color:#fff}.gantt-container .popup-wrapper .subtitle{color:#98a1a9}.gantt-container .popup-wrapper .pointer{position:absolute;height:5px;margin:0 0 0 -5px;border:5px solid rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,.8)}
|
|
||||||
2
dist/frappe-gantt.min.js
vendored
2
dist/frappe-gantt.min.js
vendored
File diff suppressed because one or more lines are too long
1
dist/frappe-gantt.min.js.map
vendored
1
dist/frappe-gantt.min.js.map
vendored
File diff suppressed because one or more lines are too long
23
dist/frappe-gantt.umd.cjs
vendored
Normal file
23
dist/frappe-gantt.umd.cjs
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/style.css
vendored
Normal file
1
dist/style.css
vendored
Normal file
File diff suppressed because one or more lines are too long
13
index.html
13
index.html
@ -23,17 +23,18 @@
|
|||||||
background-color: #252525;
|
background-color: #252525;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="dist/frappe-gantt.css" />
|
<link rel="stylesheet" href="dist/style.css" />
|
||||||
<script src="dist/frappe-gantt.js"></script>
|
<!-- <script type="module" src="dist/frappe-gantt.js"></script> -->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="heading">
|
<h2 class="heading">
|
||||||
Interactive Gantt Chart entirely made in SVG!
|
Interactive Gantt Chart entirely made in SVG!
|
||||||
</h2>
|
</h2>
|
||||||
<div class="gantt-target"></div>
|
<div class="gantt-target dark"></div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script type="module">
|
||||||
|
import Gantt from "/dist/frappe-gantt.js";
|
||||||
let tasks = [
|
let tasks = [
|
||||||
{
|
{
|
||||||
start: '2024-04-01',
|
start: '2024-04-01',
|
||||||
@ -123,9 +124,9 @@
|
|||||||
// },
|
// },
|
||||||
view_mode: 'Day',
|
view_mode: 'Day',
|
||||||
view_mode_padding: { DAY: '3d' },
|
view_mode_padding: { DAY: '3d' },
|
||||||
popup: false,
|
// popup: false,
|
||||||
// scroll_to: 'today',
|
// scroll_to: 'today',
|
||||||
// view_mode_select: true,
|
view_mode_select: true,
|
||||||
// today_button: false,
|
// today_button: false,
|
||||||
// readonly: true,
|
// readonly: true,
|
||||||
// lines: 'vertical',
|
// lines: 'vertical',
|
||||||
|
|||||||
6265
package-lock.json
generated
Normal file
6265
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
@ -1,13 +1,15 @@
|
|||||||
{
|
{
|
||||||
"name": "frappe-gantt",
|
"name": "frappe-gantt",
|
||||||
"version": "0.6.1",
|
"version": "0.7",
|
||||||
"description": "A simple, modern, interactive gantt library for the web",
|
"description": "A simple, modern, interactive gantt library for the web",
|
||||||
"main": "src/index.js",
|
"main": "src/index.js",
|
||||||
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "yarn run dev",
|
"start": "yarn run dev",
|
||||||
"build": "rollup -c",
|
"dev": "vite",
|
||||||
"dev": "rollup -c -w",
|
"build": "vite build",
|
||||||
"test": "jest",
|
"test": "jest",
|
||||||
|
"lint": "eslint src/**/*.js",
|
||||||
"test:watch": "jest --watch",
|
"test:watch": "jest --watch",
|
||||||
"prettier": "prettier --write \"{src/*,tests/*,rollup.config}.js\"",
|
"prettier": "prettier --write \"{src/*,tests/*,rollup.config}.js\"",
|
||||||
"prettier-check": "prettier --check \"{src/*,tests/*,rollup.config}.js\""
|
"prettier-check": "prettier --check \"{src/*,tests/*,rollup.config}.js\""
|
||||||
@ -21,6 +23,12 @@
|
|||||||
"dist",
|
"dist",
|
||||||
"README.md"
|
"README.md"
|
||||||
],
|
],
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"import": "./dist/frappe-gantt.es.js",
|
||||||
|
"require": "./dist/frappe-gantt.umd.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"gantt",
|
"gantt",
|
||||||
"svg",
|
"svg",
|
||||||
@ -36,17 +44,16 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/frappe/gantt",
|
"homepage": "https://github.com/frappe/gantt",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-preset-env": "^1.6.1",
|
|
||||||
"eslint": "^4.17.0",
|
"eslint": "^4.17.0",
|
||||||
"eslint-config-prettier": "^2.9.0",
|
"eslint-config-prettier": "^2.9.0",
|
||||||
"eslint-plugin-prettier": "^2.6.0",
|
"eslint-plugin-prettier": "^2.6.0",
|
||||||
"jest": "^22.2.1",
|
"jest": "^22.2.1",
|
||||||
|
"postcss-nesting": "^12.1.2",
|
||||||
"prettier": "3.2.5",
|
"prettier": "3.2.5",
|
||||||
"rollup": "^2.70.2",
|
"vite": "^5.2.10"
|
||||||
"rollup-plugin-sass": "^1.2.12",
|
|
||||||
"rollup-plugin-terser": "^7.0.2"
|
|
||||||
},
|
},
|
||||||
"eslintIgnore": [
|
"eslintIgnore": [
|
||||||
"dist"
|
"dist"
|
||||||
]
|
],
|
||||||
}
|
"packageManager": "yarn@3.2.3"
|
||||||
|
}
|
||||||
4
postcss.config.cjs
Normal file
4
postcss.config.cjs
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
module.exports = {
|
||||||
|
plugins: [require('postcss-nesting')],
|
||||||
|
};
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import sass from 'rollup-plugin-sass';
|
|
||||||
import { terser } from 'rollup-plugin-terser';
|
|
||||||
|
|
||||||
const dev = {
|
|
||||||
input: 'src/index.js',
|
|
||||||
output: {
|
|
||||||
name: 'Gantt',
|
|
||||||
file: 'dist/frappe-gantt.js',
|
|
||||||
sourcemap: true,
|
|
||||||
format: 'iife',
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
sass({
|
|
||||||
output: true,
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const prod = {
|
|
||||||
input: 'src/index.js',
|
|
||||||
output: {
|
|
||||||
name: 'Gantt',
|
|
||||||
file: 'dist/frappe-gantt.min.js',
|
|
||||||
sourcemap: true,
|
|
||||||
format: 'iife',
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
sass({
|
|
||||||
output: true,
|
|
||||||
options: {
|
|
||||||
outputStyle: 'compressed',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
terser(),
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
export default [dev, prod];
|
|
||||||
99
src/dark.css
Normal file
99
src/dark.css
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
:root {
|
||||||
|
--bar-color-dark: #616161;
|
||||||
|
--bar-stroke-dark: #c6ccd2;
|
||||||
|
--border-color-dark: #616161;
|
||||||
|
--light-bg-dark: #3e3e3e;
|
||||||
|
--light-border-color-dark: #3e3e3e;
|
||||||
|
--text-muted-dark: #eee;
|
||||||
|
--text-light-dark: #ececec;
|
||||||
|
--text-color-dark: #f7f7f7;
|
||||||
|
--blue-dark: #8a8aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark>.gantt-container .gantt {
|
||||||
|
& .grid-row {
|
||||||
|
fill: #252525;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* & .grid-row:nth-child(even) {
|
||||||
|
fill: var(--light-bg-dark);
|
||||||
|
} */
|
||||||
|
|
||||||
|
& .row-line {
|
||||||
|
stroke: var(--light-border-color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .tick {
|
||||||
|
stroke: var(--border-color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .holiday-highlight {
|
||||||
|
fill: var(--light-bg-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .arrow {
|
||||||
|
stroke: var(--text-muted-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .bar {
|
||||||
|
fill: var(--bar-color-dark);
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .bar-progress {
|
||||||
|
fill: var(--blue-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .bar-invalid {
|
||||||
|
fill: transparent;
|
||||||
|
stroke: var(--bar-stroke-dark);
|
||||||
|
|
||||||
|
&~.bar-label {
|
||||||
|
fill: var(--text-light-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .bar-label.big {
|
||||||
|
fill: var(--text-light-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .bar-wrapper {
|
||||||
|
&:hover {
|
||||||
|
.bar {
|
||||||
|
fill: lighten(var(--bar-color-dark, 5));
|
||||||
|
}
|
||||||
|
|
||||||
|
& .bar-progress {
|
||||||
|
fill: lighten(var(--blue-dark, 5));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.bar {
|
||||||
|
fill: lighten(var(--bar-color-dark, 5));
|
||||||
|
}
|
||||||
|
|
||||||
|
& .bar-progress {
|
||||||
|
fill: lighten(var(--blue-dark, 5));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark>.gantt-container {
|
||||||
|
& .grid-header {
|
||||||
|
background-color: #252525;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .popup-wrapper {
|
||||||
|
background-color: #333;
|
||||||
|
|
||||||
|
& .title {
|
||||||
|
border-color: lighten(var(--blue-dark, 5));
|
||||||
|
}
|
||||||
|
|
||||||
|
& .pointer {
|
||||||
|
border-top-color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,97 +0,0 @@
|
|||||||
$bar-color-dark: #616161;
|
|
||||||
$bar-stroke-dark: #c6ccd2;
|
|
||||||
$border-color-dark: #616161;
|
|
||||||
$light-bg-dark: #3e3e3e;
|
|
||||||
$light-border-color-dark: #3e3e3e;
|
|
||||||
$text-muted-dark: #eee;
|
|
||||||
$text-light-dark: #ececec;
|
|
||||||
$text-color-dark: #f7f7f7;
|
|
||||||
$blue-dark: #8a8aff;
|
|
||||||
|
|
||||||
.dark > .gantt-container .gantt {
|
|
||||||
.grid-header {
|
|
||||||
fill: #252525;
|
|
||||||
stroke: $border-color-dark;
|
|
||||||
}
|
|
||||||
.grid-row {
|
|
||||||
fill: #252525;
|
|
||||||
}
|
|
||||||
.grid-row:nth-child(even) {
|
|
||||||
fill: $light-bg-dark;
|
|
||||||
}
|
|
||||||
.row-line {
|
|
||||||
stroke: $light-border-color-dark;
|
|
||||||
}
|
|
||||||
.tick {
|
|
||||||
stroke: $border-color-dark;
|
|
||||||
}
|
|
||||||
.today-highlight {
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
stroke: $text-muted-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar {
|
|
||||||
fill: $bar-color-dark;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.bar-progress {
|
|
||||||
fill: $blue-dark;
|
|
||||||
}
|
|
||||||
.bar-invalid {
|
|
||||||
fill: transparent;
|
|
||||||
stroke: $bar-stroke-dark;
|
|
||||||
|
|
||||||
& ~ .bar-label {
|
|
||||||
fill: $text-light-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-label.big {
|
|
||||||
fill: $text-light-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-wrapper {
|
|
||||||
&:hover {
|
|
||||||
.bar {
|
|
||||||
fill: lighten($bar-color-dark, 5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-progress {
|
|
||||||
fill: lighten($blue-dark, 5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
.bar {
|
|
||||||
fill: lighten($bar-color-dark, 5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-progress {
|
|
||||||
fill: lighten($blue-dark, 5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.upper-text {
|
|
||||||
fill: #a2a2a2;
|
|
||||||
}
|
|
||||||
.lower-text {
|
|
||||||
fill: $text-color-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark > .gantt-container {
|
|
||||||
.popup-wrapper {
|
|
||||||
background-color: #333;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
border-color: lighten($blue-dark, 5);
|
|
||||||
}
|
|
||||||
.pointer {
|
|
||||||
border-top-color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,29 +1,69 @@
|
|||||||
@import './dark.scss';
|
@import './dark.css';
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bar-color: #fff;
|
||||||
|
--bar-color-important: #94c4f4;
|
||||||
|
--bar-stroke: #fff;
|
||||||
|
--dark-stroke-color: #e0e0e0;
|
||||||
|
--stroke-color: #ebeef0;
|
||||||
|
--light-bg: #f5f5f5;
|
||||||
|
--light-border-color: #ebeff2;
|
||||||
|
--light-yellow: #f6e796;
|
||||||
|
--holiday-color: #f9fafa;
|
||||||
|
--text-muted: #666;
|
||||||
|
--text-grey: #98a1a9;
|
||||||
|
--text-light: #fff;
|
||||||
|
--text-dark: #111;
|
||||||
|
--progress: #ebeef0;
|
||||||
|
--handle-color: #dcdce4;
|
||||||
|
--handle-color-important: #94c4f4;
|
||||||
|
--light-blue: #c4c4e9;
|
||||||
|
--middle-blue: #62b2f9;
|
||||||
|
--dark-blue: #2c94ec;
|
||||||
|
}
|
||||||
|
|
||||||
$bar-color: #fff !default;
|
|
||||||
$bar-color-important: #94c4f4 !default;
|
|
||||||
$bar-stroke: #fff !default;
|
|
||||||
$dark-stroke-color: #e0e0e0 !default;
|
|
||||||
$stroke-color: #ebeef0 !default;
|
|
||||||
$light-bg: #f5f5f5 !default;
|
|
||||||
$light-border-color: #ebeff2 !default;
|
|
||||||
$light-yellow: #f6e796 !default;
|
|
||||||
$holiday-color: #f9fafa !default;
|
|
||||||
$text-muted: #666 !default;
|
|
||||||
$text-grey: #98a1a9;
|
|
||||||
$text-light: #fff !default;
|
|
||||||
$text-dark: #111 !default;
|
|
||||||
$progress: #ebeef0 !default;
|
|
||||||
$handle-color: #dcdce4 !default;
|
|
||||||
$handle-color-important: #94c4f4 !default;
|
|
||||||
$light-blue: #c4c4e9 !default;
|
|
||||||
$middle-blue: #62b2f9 !default;
|
|
||||||
$dark-blue: #2c94ec !default;
|
|
||||||
|
|
||||||
.gantt-container {
|
.gantt-container {
|
||||||
line-height: 14.5px;
|
line-height: 14.5px;
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
height: 500px;
|
||||||
|
|
||||||
.grid-header {
|
& .popup-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: #171b1f;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: max-content;
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .title {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: -webkit-center;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .subtitle {
|
||||||
|
color: var(--text-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .pointer {
|
||||||
|
position: absolute;
|
||||||
|
height: 5px;
|
||||||
|
margin: 0 0 0 -5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .grid-header {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -31,38 +71,38 @@ $dark-blue: #2c94ec !default;
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lower-text,
|
& .lower-text,
|
||||||
.upper-text {
|
& .upper-text {
|
||||||
text-anchor: middle;
|
text-anchor: middle;
|
||||||
color: $text-dark;
|
color: var(--text-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upper-header {
|
& .upper-header {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lower-header {
|
& .lower-header {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lower-text {
|
& .lower-text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upper-text {
|
& .upper-text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-upper {
|
& .current-upper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-header {
|
& .side-header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
@ -71,169 +111,164 @@ $dark-blue: #2c94ec !default;
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.today-button,
|
& .today-button,
|
||||||
.viewmode-select {
|
& .viewmode-select {
|
||||||
background: #f4f5f6;
|
background: #f4f5f6;
|
||||||
text-align: -webkit-center;
|
text-align: -webkit-center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: none;
|
border: none;
|
||||||
color: $text-dark;
|
color: var(--text-dark);
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewmode-select {
|
& .viewmode-select {
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
|
||||||
// Hide select icon
|
/* -webkit-appearance: none; */
|
||||||
-webkit-appearance: none;
|
/* -moz-appearance: none; */
|
||||||
-moz-appearance: none;
|
|
||||||
text-indent: 1px;
|
text-indent: 1px;
|
||||||
text-overflow: '';
|
text-overflow: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-highlight {
|
& .date-highlight {
|
||||||
background-color: $progress;
|
background-color: var(--progress);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-highlight {
|
& .current-highlight {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: $dark-blue;
|
background: var(--dark-blue);
|
||||||
width: 1px;
|
width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-date-highlight {
|
& .current-date-highlight {
|
||||||
background: $dark-blue;
|
background: var(--dark-blue);
|
||||||
color: $text-light;
|
color: var(--text-light);
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.gantt {
|
.gantt {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
.grid-background {
|
& .grid-background {
|
||||||
fill: none;
|
fill: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-row {
|
& .grid-row {
|
||||||
fill: #ffffff;
|
fill: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .grid-row:nth-child(even) {
|
& .row-line {
|
||||||
// fill: $light-bg;
|
stroke: var(--light-border-color);
|
||||||
// }
|
|
||||||
|
|
||||||
.row-line {
|
|
||||||
stroke: $light-border-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tick {
|
& .tick {
|
||||||
stroke: $stroke-color;
|
stroke: var(--stroke-color);
|
||||||
stroke-width: 0.4;
|
stroke-width: 0.4;
|
||||||
|
|
||||||
&.thick {
|
&.thick {
|
||||||
stroke: $dark-stroke-color;
|
stroke: var(--dark-stroke-color);
|
||||||
stroke-width: 0.7;
|
stroke-width: 0.7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.holiday-highlight {
|
& .holiday-highlight {
|
||||||
fill: $holiday-color;
|
fill: var(--holiday-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
& .arrow {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: #9fa9b1;
|
stroke: #9fa9b1;
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-wrapper .bar {
|
& .bar-wrapper .bar {
|
||||||
fill: $bar-color;
|
fill: var(--bar-color);
|
||||||
stroke: $bar-stroke;
|
stroke: var(--bar-stroke);
|
||||||
stroke-width: 0;
|
stroke-width: 0;
|
||||||
transition: stroke-width 0.3s ease;
|
transition: stroke-width 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-progress {
|
& .bar-progress {
|
||||||
fill: $progress;
|
fill: var(--progress);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-expected-progress {
|
& .bar-expected-progress {
|
||||||
fill: $light-blue;
|
fill: var(--light-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-invalid {
|
& .bar-invalid {
|
||||||
fill: transparent;
|
fill: transparent;
|
||||||
stroke: $bar-stroke;
|
stroke: var(--bar-stroke);
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
stroke-dasharray: 5;
|
stroke-dasharray: 5;
|
||||||
|
|
||||||
& ~ .bar-label {
|
&~.bar-label {
|
||||||
fill: $text-light;
|
fill: var(--text-light);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-label {
|
& .bar-label {
|
||||||
fill: $text-dark;
|
fill: var(--text-dark);
|
||||||
dominant-baseline: central;
|
dominant-baseline: central;
|
||||||
// text-anchor: middle;
|
|
||||||
font-family: Helvetica;
|
font-family: Helvetica;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
&.big {
|
&.big {
|
||||||
fill: $text-dark;
|
fill: var(--text-dark);
|
||||||
text-anchor: start;
|
text-anchor: start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-wrapper.important {
|
& .bar-wrapper.important {
|
||||||
.bar {
|
& .bar {
|
||||||
fill: $bar-color-important;
|
fill: var(--bar-color-important);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-progress {
|
& .bar-progress {
|
||||||
fill: $dark-blue;
|
fill: var(--dark-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-label {
|
& .bar-label {
|
||||||
fill: $text-light;
|
fill: var(--text-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.handle {
|
& .handle {
|
||||||
fill: $handle-color-important;
|
fill: var(--handle-color-important);
|
||||||
}
|
}
|
||||||
|
|
||||||
.handle.progress {
|
& .handle.progress {
|
||||||
fill: $text-light;
|
fill: var(--text-light);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.handle {
|
& .handle {
|
||||||
fill: $handle-color;
|
fill: var(--handle-color);
|
||||||
cursor: ew-resize;
|
cursor: ew-resize;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.handle.progress {
|
& .handle.progress {
|
||||||
fill: $text-muted;
|
fill: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-wrapper {
|
& .bar-wrapper {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
@ -244,7 +279,7 @@ $dark-blue: #2c94ec !default;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar {
|
& .bar {
|
||||||
-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
|
-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
|
||||||
filter: drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));
|
filter: drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
@ -261,47 +296,7 @@ $dark-blue: #2c94ec !default;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide {
|
& .hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gantt-container {
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
font-size: 12px;
|
|
||||||
height: 500px;
|
|
||||||
|
|
||||||
.popup-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: #171b1f;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: max-content;
|
|
||||||
|
|
||||||
&.hidden {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
text-align: -webkit-center;
|
|
||||||
text-align: center;
|
|
||||||
color: $text-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: $text-grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pointer {
|
|
||||||
position: absolute;
|
|
||||||
height: 5px;
|
|
||||||
margin: 0 0 0 -5px;
|
|
||||||
border: 5px solid transparent;
|
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
42
src/index.js
42
src/index.js
@ -4,7 +4,7 @@ import Bar from './bar';
|
|||||||
import Arrow from './arrow';
|
import Arrow from './arrow';
|
||||||
import Popup from './popup';
|
import Popup from './popup';
|
||||||
|
|
||||||
import './gantt.scss';
|
import './gantt.css';
|
||||||
|
|
||||||
const VIEW_MODE = {
|
const VIEW_MODE = {
|
||||||
HOUR: 'Hour',
|
HOUR: 'Hour',
|
||||||
@ -77,7 +77,7 @@ export default class Gantt {
|
|||||||
} else {
|
} else {
|
||||||
throw new TypeError(
|
throw new TypeError(
|
||||||
'Frappé Gantt only supports usage of a string CSS selector,' +
|
'Frappé Gantt only supports usage of a string CSS selector,' +
|
||||||
" HTML DOM element or SVG DOM element for the 'element' parameter",
|
" HTML DOM element or SVG DOM element for the 'element' parameter",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -143,7 +143,7 @@ export default class Gantt {
|
|||||||
if (diff < 0) {
|
if (diff < 0) {
|
||||||
throw Error(
|
throw Error(
|
||||||
"start of task can't be after end of task: in task #, " +
|
"start of task can't be after end of task: in task #, " +
|
||||||
(i + 1),
|
(i + 1),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// make task invalid if duration too large
|
// make task invalid if duration too large
|
||||||
@ -389,7 +389,7 @@ export default class Gantt {
|
|||||||
this.options.header_height +
|
this.options.header_height +
|
||||||
this.options.padding +
|
this.options.padding +
|
||||||
(this.options.bar_height + this.options.padding) *
|
(this.options.bar_height + this.options.padding) *
|
||||||
this.tasks.length;
|
this.tasks.length;
|
||||||
|
|
||||||
createSVG('rect', {
|
createSVG('rect', {
|
||||||
x: 0,
|
x: 0,
|
||||||
@ -620,7 +620,7 @@ export default class Gantt {
|
|||||||
x +
|
x +
|
||||||
(date_utils.diff(today, this.gantt_start, 'hour') /
|
(date_utils.diff(today, this.gantt_start, 'hour') /
|
||||||
this.options.step) *
|
this.options.step) *
|
||||||
this.options.column_width,
|
this.options.column_width,
|
||||||
date: today,
|
date: today,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -775,10 +775,10 @@ export default class Gantt {
|
|||||||
date.getDate() !== last_date.getDate()
|
date.getDate() !== last_date.getDate()
|
||||||
? date.getMonth() !== last_date.getMonth()
|
? date.getMonth() !== last_date.getMonth()
|
||||||
? date_utils.format(
|
? date_utils.format(
|
||||||
date,
|
date,
|
||||||
'D MMM',
|
'D MMM',
|
||||||
this.options.language,
|
this.options.language,
|
||||||
)
|
)
|
||||||
: date_utils.format(date, 'D', this.options.language)
|
: date_utils.format(date, 'D', this.options.language)
|
||||||
: '',
|
: '',
|
||||||
Day_upper:
|
Day_upper:
|
||||||
@ -800,7 +800,7 @@ export default class Gantt {
|
|||||||
};
|
};
|
||||||
let column_width = this.view_is(VIEW_MODE.MONTH)
|
let column_width = this.view_is(VIEW_MODE.MONTH)
|
||||||
? (date_utils.get_days_in_month(date) * this.options.column_width) /
|
? (date_utils.get_days_in_month(date) * this.options.column_width) /
|
||||||
30
|
30
|
||||||
: this.options.column_width;
|
: this.options.column_width;
|
||||||
const base_pos = {
|
const base_pos = {
|
||||||
x: last_date_info
|
x: last_date_info
|
||||||
@ -832,17 +832,17 @@ export default class Gantt {
|
|||||||
base_pos_x: base_pos.x,
|
base_pos_x: base_pos.x,
|
||||||
upper_text: this.options.lower_text
|
upper_text: this.options.lower_text
|
||||||
? this.options.upper_text(
|
? this.options.upper_text(
|
||||||
date,
|
date,
|
||||||
this.options.view_mode,
|
this.options.view_mode,
|
||||||
date_text[`${this.options.view_mode}_upper`],
|
date_text[`${this.options.view_mode}_upper`],
|
||||||
)
|
)
|
||||||
: date_text[`${this.options.view_mode}_upper`],
|
: date_text[`${this.options.view_mode}_upper`],
|
||||||
lower_text: this.options.lower_text
|
lower_text: this.options.lower_text
|
||||||
? this.options.lower_text(
|
? this.options.lower_text(
|
||||||
date,
|
date,
|
||||||
this.options.view_mode,
|
this.options.view_mode,
|
||||||
date_text[`${this.options.view_mode}_lower`],
|
date_text[`${this.options.view_mode}_lower`],
|
||||||
)
|
)
|
||||||
: date_text[`${this.options.view_mode}_lower`],
|
: date_text[`${this.options.view_mode}_lower`],
|
||||||
upper_x: base_pos.x + x_pos[`${this.options.view_mode}_upper`],
|
upper_x: base_pos.x + x_pos[`${this.options.view_mode}_upper`],
|
||||||
upper_y: base_pos.upper_y,
|
upper_y: base_pos.upper_y,
|
||||||
@ -918,7 +918,7 @@ export default class Gantt {
|
|||||||
|
|
||||||
const scroll_pos =
|
const scroll_pos =
|
||||||
(hours_before_first_task / this.options.step) *
|
(hours_before_first_task / this.options.step) *
|
||||||
this.options.column_width -
|
this.options.column_width -
|
||||||
this.options.column_width;
|
this.options.column_width;
|
||||||
parent_element.scrollTo({ left: scroll_pos, behavior: 'smooth' });
|
parent_element.scrollTo({ left: scroll_pos, behavior: 'smooth' });
|
||||||
}
|
}
|
||||||
@ -967,7 +967,7 @@ export default class Gantt {
|
|||||||
}
|
}
|
||||||
|
|
||||||
bar_wrapper.classList.add('active');
|
bar_wrapper.classList.add('active');
|
||||||
this.popup.parent.classList.add('hidden');
|
if (this.popup) this.popup.parent.classList.add('hidden');
|
||||||
|
|
||||||
x_on_start = e.offsetX;
|
x_on_start = e.offsetX;
|
||||||
y_on_start = e.offsetY;
|
y_on_start = e.offsetY;
|
||||||
@ -1217,7 +1217,7 @@ export default class Gantt {
|
|||||||
[...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => {
|
[...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => {
|
||||||
el.classList.remove('active');
|
el.classList.remove('active');
|
||||||
});
|
});
|
||||||
this.popup.parent.classList.remove('hidden');
|
if (this.popup) this.popup.parent.classList.remove('hidden');
|
||||||
}
|
}
|
||||||
|
|
||||||
view_is(modes) {
|
view_is(modes) {
|
||||||
|
|||||||
27
vite.config.js
Normal file
27
vite.config.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { resolve } from 'path';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import pkg from './package.json';
|
||||||
|
import path from 'node:path';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
build: {
|
||||||
|
lib: {
|
||||||
|
entry: resolve(__dirname, 'src/index.js'),
|
||||||
|
name: pkg.name,
|
||||||
|
fileName: 'frappe-gantt',
|
||||||
|
},
|
||||||
|
rollupOptions: {
|
||||||
|
external: ['vue'],
|
||||||
|
output: {
|
||||||
|
// Provide global variables to use in the UMD build
|
||||||
|
// for externalized deps
|
||||||
|
globals: {
|
||||||
|
vue: 'Vue'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// input: [path.join(process.cwd(), 'index.html'), path.join(process.cwd(), 'src', 'index.js')],
|
||||||
|
// preserveEntrySignatures: "allow-extension"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
output: { interop: 'auto' }
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user