fix: color scheme

This commit is contained in:
DasWizardTales 2024-07-23 12:22:44 +05:30
parent 6990d73a68
commit d403dd453a
4 changed files with 42 additions and 70 deletions

7
package-lock.json generated
View file

@ -79,9 +79,7 @@
"tar": "~6.2.1", "tar": "~6.2.1",
"tcp-ping": "~0.1.1", "tcp-ping": "~0.1.1",
"thirty-two": "~1.0.2", "thirty-two": "~1.0.2",
"tippy.js": "^6.3.7",
"tough-cookie": "~4.1.3", "tough-cookie": "~4.1.3",
"vue3-calendar-heatmap": "^2.0.5",
"ws": "^8.13.0" "ws": "^8.13.0"
}, },
"devDependencies": { "devDependencies": {
@ -128,6 +126,7 @@
"stylelint-config-standard": "~25.0.0", "stylelint-config-standard": "~25.0.0",
"terser": "~5.15.0", "terser": "~5.15.0",
"test": "~3.3.0", "test": "~3.3.0",
"tippy.js": "^6.3.7",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"v-pagination-3": "~0.1.7", "v-pagination-3": "~0.1.7",
"vite": "~5.2.8", "vite": "~5.2.8",
@ -144,6 +143,7 @@
"vue-qrcode": "~1.0.0", "vue-qrcode": "~1.0.0",
"vue-router": "~4.2.5", "vue-router": "~4.2.5",
"vue-toastification": "~2.0.0-rc.5", "vue-toastification": "~2.0.0-rc.5",
"vue3-calendar-heatmap": "^2.0.5",
"vuedraggable": "~4.1.0", "vuedraggable": "~4.1.0",
"wait-on": "^7.2.0", "wait-on": "^7.2.0",
"whatwg-url": "~12.0.1" "whatwg-url": "~12.0.1"
@ -3294,6 +3294,7 @@
"version": "2.10.2", "version": "2.10.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
"integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==", "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
@ -14819,6 +14820,7 @@
"version": "6.3.7", "version": "6.3.7",
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
"integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@popperjs/core": "^2.9.0" "@popperjs/core": "^2.9.0"
@ -15768,6 +15770,7 @@
"version": "2.0.5", "version": "2.0.5",
"resolved": "https://registry.npmjs.org/vue3-calendar-heatmap/-/vue3-calendar-heatmap-2.0.5.tgz", "resolved": "https://registry.npmjs.org/vue3-calendar-heatmap/-/vue3-calendar-heatmap-2.0.5.tgz",
"integrity": "sha512-qvveNQlTS5Aw7AvRLs0zOyu3uP5iGJlXJAnkrkG2ElDdyQ8H1TJhQ8rL702CROjAg16ezIveUY10nCO7lqZ25w==", "integrity": "sha512-qvveNQlTS5Aw7AvRLs0zOyu3uP5iGJlXJAnkrkG2ElDdyQ8H1TJhQ8rL702CROjAg16ezIveUY10nCO7lqZ25w==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=16" "node": ">=16"

View file

@ -144,9 +144,7 @@
"tar": "~6.2.1", "tar": "~6.2.1",
"tcp-ping": "~0.1.1", "tcp-ping": "~0.1.1",
"thirty-two": "~1.0.2", "thirty-two": "~1.0.2",
"tippy.js": "^6.3.7",
"tough-cookie": "~4.1.3", "tough-cookie": "~4.1.3",
"vue3-calendar-heatmap": "^2.0.5",
"ws": "^8.13.0" "ws": "^8.13.0"
}, },
"devDependencies": { "devDependencies": {
@ -193,6 +191,7 @@
"stylelint-config-standard": "~25.0.0", "stylelint-config-standard": "~25.0.0",
"terser": "~5.15.0", "terser": "~5.15.0",
"test": "~3.3.0", "test": "~3.3.0",
"tippy.js": "^6.3.7",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"v-pagination-3": "~0.1.7", "v-pagination-3": "~0.1.7",
"vite": "~5.2.8", "vite": "~5.2.8",
@ -209,6 +208,7 @@
"vue-qrcode": "~1.0.0", "vue-qrcode": "~1.0.0",
"vue-router": "~4.2.5", "vue-router": "~4.2.5",
"vue-toastification": "~2.0.0-rc.5", "vue-toastification": "~2.0.0-rc.5",
"vue3-calendar-heatmap": "^2.0.5",
"vuedraggable": "~4.1.0", "vuedraggable": "~4.1.0",
"wait-on": "^7.2.0", "wait-on": "^7.2.0",
"whatwg-url": "~12.0.1" "whatwg-url": "~12.0.1"

View file

@ -311,60 +311,6 @@ export default {
font-size: 12px; font-size: 12px;
} }
.connecting-line {
flex-grow: 1;
height: 1px;
background-color: #ededed;
margin-left: 10px;
margin-right: 10px;
margin-top: 2px;
.dark & {
background-color: #333;
}
}
.hp-bar-big {
.beat {
display: inline-block;
background-color: $primary;
border-radius: $border-radius;
&.empty {
background-color: aliceblue;
}
&.down {
background-color: $danger;
}
&.pending {
background-color: $warning;
}
&.maintenance {
background-color: $maintenance;
}
&:not(.empty):hover {
transition: all ease-in-out 0.15s;
opacity: 0.8;
transform: scale(var(--hover-scale));
}
}
}
.dark {
.hp-bar-big .beat.empty {
background-color: #848484;
}
}
.word {
color: #aaa;
font-size: 12px;
}
.connecting-line { .connecting-line {
flex-grow: 1; flex-grow: 1;
height: 1px; height: 1px;

View file

@ -2,9 +2,12 @@
<div ref="wrap"> <div ref="wrap">
<div class="hp-bar-big"> <div class="hp-bar-big">
<CalendarHeatmap <CalendarHeatmap
:style="{ fill: '#fff', fontSize: 'x-small' }" :style="{ fill: 'var(--dark-font-color2)', fontSize: 'xx-small' }"
class="heatmap" :values="values" :end-date="endDate" no-data-text="Unknown" tooltip-unit="%" class="heatmap" :values="values" :end-date="endDate" no-data-text="Unknown" tooltip-unit="%"
:range-color="['#ebedf0', '#C3D4CB', '#9ABAA7', '#72A182', '#49875E', '#216E39']" :max="100" :range-color="['aliceblue', 'var(--danger)', 'var(--warning)', 'var(--warning)', 'var(--highlight)', 'var(--primary)']"
:display-legend="false"
round="3"
:max="100"
/> />
</div> </div>
</div> </div>
@ -52,16 +55,11 @@ export default {
this.resize(); this.resize();
}, },
methods: { methods: {
/**
* Resize the heartbeat bar
* @returns {void}
*/
resize() { resize() {
if (this.$refs.wrap) { if (this.$refs.wrap) {
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2)); this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
} }
}, },
}, },
}; };
</script> </script>
@ -69,13 +67,38 @@ export default {
<style lang="scss"> <style lang="scss">
@import "../assets/vars.scss"; @import "../assets/vars.scss";
// This naming is an internal name for the package vue3-calendar-heatmap and it cannot be modified to kebab-case :root {
--highlight-white: #{$highlight-white};
--danger: #{$danger};
--warning: #{$warning};
--warning2: #ffc100;
--highlight: #{$highlight};
--primary: #{$primary};
--dark-font-color2: #{$dark-font-color2};
}
/* stylelint-disable */ /* stylelint-disable */
// This naming is an internal name for the package vue3-calendar-heatmap and it cannot be modified to kebab-case
.vch__legend { .vch__legend {
display: inline-flex; display: none !important;
padding: 0.25rem 0.5rem; }
gap: 1ch;
align-items: center; .hp-bar-big {
padding: 10px;
overflow: visible;
background-color: white;
border-radius: 6px;
}
.heatmap {
rect.vch__day__square {
stroke: none !important;
stroke-width: 0 !important;
&:hover {
fill-opacity: 0.5;
}
}
} }
/* stylelint-enable */ /* stylelint-enable */
</style> </style>