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
|
||||
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
||||
node_modules
|
||||
.yarn
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="dist/frappe-gantt.css" />
|
||||
<script src="dist/frappe-gantt.js"></script>
|
||||
<link rel="stylesheet" href="dist/style.css" />
|
||||
<!-- <script type="module" src="dist/frappe-gantt.js"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2 class="heading">
|
||||
Interactive Gantt Chart entirely made in SVG!
|
||||
</h2>
|
||||
<div class="gantt-target"></div>
|
||||
<div class="gantt-target dark"></div>
|
||||
</div>
|
||||
<script>
|
||||
<script type="module">
|
||||
import Gantt from "/dist/frappe-gantt.js";
|
||||
let tasks = [
|
||||
{
|
||||
start: '2024-04-01',
|
||||
@ -123,9 +124,9 @@
|
||||
// },
|
||||
view_mode: 'Day',
|
||||
view_mode_padding: { DAY: '3d' },
|
||||
popup: false,
|
||||
// popup: false,
|
||||
// scroll_to: 'today',
|
||||
// view_mode_select: true,
|
||||
view_mode_select: true,
|
||||
// today_button: false,
|
||||
// readonly: true,
|
||||
// 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",
|
||||
"version": "0.6.1",
|
||||
"version": "0.7",
|
||||
"description": "A simple, modern, interactive gantt library for the web",
|
||||
"main": "src/index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "yarn run dev",
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"test": "jest",
|
||||
"lint": "eslint src/**/*.js",
|
||||
"test:watch": "jest --watch",
|
||||
"prettier": "prettier --write \"{src/*,tests/*,rollup.config}.js\"",
|
||||
"prettier-check": "prettier --check \"{src/*,tests/*,rollup.config}.js\""
|
||||
@ -21,6 +23,12 @@
|
||||
"dist",
|
||||
"README.md"
|
||||
],
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/frappe-gantt.es.js",
|
||||
"require": "./dist/frappe-gantt.umd.js"
|
||||
}
|
||||
},
|
||||
"keywords": [
|
||||
"gantt",
|
||||
"svg",
|
||||
@ -36,17 +44,16 @@
|
||||
},
|
||||
"homepage": "https://github.com/frappe/gantt",
|
||||
"devDependencies": {
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"eslint": "^4.17.0",
|
||||
"eslint-config-prettier": "^2.9.0",
|
||||
"eslint-plugin-prettier": "^2.6.0",
|
||||
"jest": "^22.2.1",
|
||||
"postcss-nesting": "^12.1.2",
|
||||
"prettier": "3.2.5",
|
||||
"rollup": "^2.70.2",
|
||||
"rollup-plugin-sass": "^1.2.12",
|
||||
"rollup-plugin-terser": "^7.0.2"
|
||||
"vite": "^5.2.10"
|
||||
},
|
||||
"eslintIgnore": [
|
||||
"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 {
|
||||
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;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@ -31,38 +71,38 @@ $dark-blue: #2c94ec !default;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lower-text,
|
||||
.upper-text {
|
||||
& .lower-text,
|
||||
& .upper-text {
|
||||
text-anchor: middle;
|
||||
color: $text-dark;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.upper-header {
|
||||
& .upper-header {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.lower-header {
|
||||
& .lower-header {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.lower-text {
|
||||
& .lower-text {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.upper-text {
|
||||
& .upper-text {
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.current-upper {
|
||||
& .current-upper {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.side-header {
|
||||
& .side-header {
|
||||
position: fixed;
|
||||
padding: 0 10px;
|
||||
margin-right: 10px;
|
||||
@ -71,169 +111,164 @@ $dark-blue: #2c94ec !default;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.today-button,
|
||||
.viewmode-select {
|
||||
& .today-button,
|
||||
& .viewmode-select {
|
||||
background: #f4f5f6;
|
||||
text-align: -webkit-center;
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $text-dark;
|
||||
color: var(--text-dark);
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.viewmode-select {
|
||||
& .viewmode-select {
|
||||
outline: none !important;
|
||||
padding: 4px 8px;
|
||||
margin-right: 4px;
|
||||
|
||||
// Hide select icon
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
/* -webkit-appearance: none; */
|
||||
/* -moz-appearance: none; */
|
||||
text-indent: 1px;
|
||||
text-overflow: '';
|
||||
}
|
||||
|
||||
.date-highlight {
|
||||
background-color: $progress;
|
||||
& .date-highlight {
|
||||
background-color: var(--progress);
|
||||
border-radius: 12px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.current-highlight {
|
||||
& .current-highlight {
|
||||
position: absolute;
|
||||
background: $dark-blue;
|
||||
background: var(--dark-blue);
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.current-date-highlight {
|
||||
background: $dark-blue;
|
||||
color: $text-light;
|
||||
& .current-date-highlight {
|
||||
background: var(--dark-blue);
|
||||
color: var(--text-light);
|
||||
padding: 4px 8px;
|
||||
border-radius: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gantt {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
position: absolute;
|
||||
|
||||
.grid-background {
|
||||
& .grid-background {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
& .grid-row {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
// .grid-row:nth-child(even) {
|
||||
// fill: $light-bg;
|
||||
// }
|
||||
|
||||
.row-line {
|
||||
stroke: $light-border-color;
|
||||
& .row-line {
|
||||
stroke: var(--light-border-color);
|
||||
}
|
||||
|
||||
.tick {
|
||||
stroke: $stroke-color;
|
||||
& .tick {
|
||||
stroke: var(--stroke-color);
|
||||
stroke-width: 0.4;
|
||||
|
||||
&.thick {
|
||||
stroke: $dark-stroke-color;
|
||||
stroke: var(--dark-stroke-color);
|
||||
stroke-width: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.holiday-highlight {
|
||||
fill: $holiday-color;
|
||||
& .holiday-highlight {
|
||||
fill: var(--holiday-color);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
& .arrow {
|
||||
fill: none;
|
||||
stroke: #9fa9b1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.bar-wrapper .bar {
|
||||
fill: $bar-color;
|
||||
stroke: $bar-stroke;
|
||||
& .bar-wrapper .bar {
|
||||
fill: var(--bar-color);
|
||||
stroke: var(--bar-stroke);
|
||||
stroke-width: 0;
|
||||
transition: stroke-width 0.3s ease;
|
||||
}
|
||||
|
||||
.bar-progress {
|
||||
fill: $progress;
|
||||
& .bar-progress {
|
||||
fill: var(--progress);
|
||||
}
|
||||
|
||||
.bar-expected-progress {
|
||||
fill: $light-blue;
|
||||
& .bar-expected-progress {
|
||||
fill: var(--light-blue);
|
||||
}
|
||||
|
||||
.bar-invalid {
|
||||
& .bar-invalid {
|
||||
fill: transparent;
|
||||
stroke: $bar-stroke;
|
||||
stroke: var(--bar-stroke);
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 5;
|
||||
|
||||
& ~ .bar-label {
|
||||
fill: $text-light;
|
||||
&~.bar-label {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
fill: $text-dark;
|
||||
& .bar-label {
|
||||
fill: var(--text-dark);
|
||||
dominant-baseline: central;
|
||||
// text-anchor: middle;
|
||||
font-family: Helvetica;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
|
||||
&.big {
|
||||
fill: $text-dark;
|
||||
fill: var(--text-dark);
|
||||
text-anchor: start;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-wrapper.important {
|
||||
.bar {
|
||||
fill: $bar-color-important;
|
||||
& .bar-wrapper.important {
|
||||
& .bar {
|
||||
fill: var(--bar-color-important);
|
||||
}
|
||||
|
||||
.bar-progress {
|
||||
fill: $dark-blue;
|
||||
& .bar-progress {
|
||||
fill: var(--dark-blue);
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
fill: $text-light;
|
||||
& .bar-label {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
|
||||
.handle {
|
||||
fill: $handle-color-important;
|
||||
& .handle {
|
||||
fill: var(--handle-color-important);
|
||||
}
|
||||
|
||||
.handle.progress {
|
||||
fill: $text-light;
|
||||
& .handle.progress {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
.handle {
|
||||
fill: $handle-color;
|
||||
& .handle {
|
||||
fill: var(--handle-color);
|
||||
cursor: ew-resize;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.handle.progress {
|
||||
fill: $text-muted;
|
||||
& .handle.progress {
|
||||
fill: var(--text-muted);
|
||||
}
|
||||
|
||||
.bar-wrapper {
|
||||
& .bar-wrapper {
|
||||
cursor: pointer;
|
||||
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));
|
||||
filter: drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));
|
||||
border-radius: 3px;
|
||||
@ -261,47 +296,7 @@ $dark-blue: #2c94ec !default;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
& .hide {
|
||||
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 Popup from './popup';
|
||||
|
||||
import './gantt.scss';
|
||||
import './gantt.css';
|
||||
|
||||
const VIEW_MODE = {
|
||||
HOUR: 'Hour',
|
||||
@ -77,7 +77,7 @@ export default class Gantt {
|
||||
} else {
|
||||
throw new TypeError(
|
||||
'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) {
|
||||
throw Error(
|
||||
"start of task can't be after end of task: in task #, " +
|
||||
(i + 1),
|
||||
(i + 1),
|
||||
);
|
||||
}
|
||||
// make task invalid if duration too large
|
||||
@ -389,7 +389,7 @@ export default class Gantt {
|
||||
this.options.header_height +
|
||||
this.options.padding +
|
||||
(this.options.bar_height + this.options.padding) *
|
||||
this.tasks.length;
|
||||
this.tasks.length;
|
||||
|
||||
createSVG('rect', {
|
||||
x: 0,
|
||||
@ -620,7 +620,7 @@ export default class Gantt {
|
||||
x +
|
||||
(date_utils.diff(today, this.gantt_start, 'hour') /
|
||||
this.options.step) *
|
||||
this.options.column_width,
|
||||
this.options.column_width,
|
||||
date: today,
|
||||
};
|
||||
}
|
||||
@ -775,10 +775,10 @@ export default class Gantt {
|
||||
date.getDate() !== last_date.getDate()
|
||||
? date.getMonth() !== last_date.getMonth()
|
||||
? date_utils.format(
|
||||
date,
|
||||
'D MMM',
|
||||
this.options.language,
|
||||
)
|
||||
date,
|
||||
'D MMM',
|
||||
this.options.language,
|
||||
)
|
||||
: date_utils.format(date, 'D', this.options.language)
|
||||
: '',
|
||||
Day_upper:
|
||||
@ -800,7 +800,7 @@ export default class Gantt {
|
||||
};
|
||||
let column_width = this.view_is(VIEW_MODE.MONTH)
|
||||
? (date_utils.get_days_in_month(date) * this.options.column_width) /
|
||||
30
|
||||
30
|
||||
: this.options.column_width;
|
||||
const base_pos = {
|
||||
x: last_date_info
|
||||
@ -832,17 +832,17 @@ export default class Gantt {
|
||||
base_pos_x: base_pos.x,
|
||||
upper_text: this.options.lower_text
|
||||
? this.options.upper_text(
|
||||
date,
|
||||
this.options.view_mode,
|
||||
date_text[`${this.options.view_mode}_upper`],
|
||||
)
|
||||
date,
|
||||
this.options.view_mode,
|
||||
date_text[`${this.options.view_mode}_upper`],
|
||||
)
|
||||
: date_text[`${this.options.view_mode}_upper`],
|
||||
lower_text: this.options.lower_text
|
||||
? this.options.lower_text(
|
||||
date,
|
||||
this.options.view_mode,
|
||||
date_text[`${this.options.view_mode}_lower`],
|
||||
)
|
||||
date,
|
||||
this.options.view_mode,
|
||||
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_y: base_pos.upper_y,
|
||||
@ -918,7 +918,7 @@ export default class Gantt {
|
||||
|
||||
const scroll_pos =
|
||||
(hours_before_first_task / this.options.step) *
|
||||
this.options.column_width -
|
||||
this.options.column_width -
|
||||
this.options.column_width;
|
||||
parent_element.scrollTo({ left: scroll_pos, behavior: 'smooth' });
|
||||
}
|
||||
@ -967,7 +967,7 @@ export default class Gantt {
|
||||
}
|
||||
|
||||
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;
|
||||
y_on_start = e.offsetY;
|
||||
@ -1217,7 +1217,7 @@ export default class Gantt {
|
||||
[...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
this.popup.parent.classList.remove('hidden');
|
||||
if (this.popup) this.popup.parent.classList.remove('hidden');
|
||||
}
|
||||
|
||||
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