From bc10c5145f8f8223c8a702a0e3c54530e614ba8b Mon Sep 17 00:00:00 2001 From: Sander Dorigo Date: Tue, 9 Jun 2026 12:04:33 +0200 Subject: [PATCH] fix dark mode and charts --- .../Http/Controllers/GetConfigurationData.php | 2 +- package-lock.json | 20 +- public/v1/js/ff/charts.js | 36 ++-- resources/assets/v3/js/app.js | 2 +- resources/assets/v3/js/boot/bootstrap.js | 51 +++-- resources/assets/v3/js/pages/shared/dates.js | 2 +- resources/assets/v3/sass/app.scss | 197 ++++++++++-------- resources/views/index.blade.php | 5 - resources/views/layout/v3/session.blade.php | 60 +++--- 9 files changed, 213 insertions(+), 162 deletions(-) diff --git a/app/Support/Http/Controllers/GetConfigurationData.php b/app/Support/Http/Controllers/GetConfigurationData.php index eda2c9c2b0..186e44cebf 100644 --- a/app/Support/Http/Controllers/GetConfigurationData.php +++ b/app/Support/Http/Controllers/GetConfigurationData.php @@ -65,7 +65,7 @@ trait GetConfigurationData $currentStep = $options; // get the text: - $currentStep['intro'] = (string) trans('intro.'.$route.'_'.$key); + $currentStep['hint'] = (string) trans('intro.'.$route.'_'.$key); // save in array: $steps[] = $currentStep; diff --git a/package-lock.json b/package-lock.json index 9d50cdcb0c..37ee519e5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "firefly-iii", + "name": "release", "lockfileVersion": 3, "requires": true, "packages": { @@ -1933,6 +1933,7 @@ "hasInstallScript": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "detect-libc": "^2.0.3", "is-glob": "^4.0.3", @@ -1975,6 +1976,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1996,6 +1998,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2017,6 +2020,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2038,6 +2042,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2059,6 +2064,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2080,6 +2086,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2101,6 +2108,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2122,6 +2130,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2143,6 +2152,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2164,6 +2174,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2185,6 +2196,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2206,6 +2218,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2227,6 +2240,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2242,6 +2256,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "engines": { "node": ">=12" }, @@ -8278,7 +8293,8 @@ "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", "dev": true, "license": "MIT", - "optional": true + "optional": true, + "peer": true }, "node_modules/node-forge": { "version": "1.4.0", diff --git a/public/v1/js/ff/charts.js b/public/v1/js/ff/charts.js index 441ff18e39..7a1f32af62 100644 --- a/public/v1/js/ff/charts.js +++ b/public/v1/js/ff/charts.js @@ -292,6 +292,7 @@ function columnChartCustomColours(URL, container) { */ function stackedColumnChart(URL, container) { "use strict"; + console.log('stackedColumnChart('+URL+', '+container+')'); var colorData = true; var options = $.extend(true, {}, defaultChartOptions); @@ -346,14 +347,16 @@ function multiCurrencyPieChart(URL, container) { * @param today */ function drawAChart(URL, container, chartType, options, colorData) { - var containerObj = $('#' + container); + var containerObj = document.getElementById(container); if (containerObj.length === 0) { + console.log('Return because 0'); return; } - - $.getJSON(URL).done(function (data) { - containerObj.removeClass('general-chart-error'); - + console.log('drawAChart('+URL+', '+container+')'); + window.axios.get(URL).then(function (response) { + console.log('GET drawAChart('+URL+', '+container+')'); + containerObj.classList.remove('general-chart-error'); + var data = response.data; // if result is empty array, or the labels array is empty, show error. // console.log(URL); // console.log(data.length); @@ -367,18 +370,26 @@ function drawAChart(URL, container, chartType, options, colorData) { // isn't empty but contains no labels (typeof data === 'object' && typeof data.labels === 'object' && 0 === data.labels.length) ) { + console.log('NODATA drawAChart('+URL+', '+container+')'); + console.log(data); // remove the chart container + parent - var holder = $('#' + container).parent().parent(); - if (holder.hasClass('box') || holder.hasClass('box-body')) { + var holder = document.getElementById(container).parentNode.parentNode; + if (holder.classList.contains('card') || holder.classList.contains('card-body')) { + console.log('found holder'); // find box-body: var boxBody; - if (!holder.hasClass('box-body')) { - boxBody = holder.find('.box-body'); + if (!holder.classList.contains('card-body')) { + // console.log('Look for card body', holder.querySelector('.card-body').length); + boxBody = holder.querySelector('.card-body'); } else { boxBody = holder; } - boxBody.empty().append($('

').append($('').text(noDataForChart))); + console.log('found box body', boxBody); + // boxBody.innerHtml = '

'+noDataForChart+'

'; + boxBody.innerHTML = '

'+noDataForChart+'

'; + //boxBody.empty().append($('

').append($('').text(noDataForChart))); } + console.log('return'); return; } @@ -430,7 +441,8 @@ function drawAChart(URL, container, chartType, options, colorData) { allCharts[container] = new Chart(ctx, chartOpts); } - }).fail(function () { - $('#' + container).addClass('general-chart-error'); + }).catch(function (reason) { + console.error('Add error because error with chart.', reason); + document.getElementById(container).classList.add('general-chart-error'); }); } diff --git a/resources/assets/v3/js/app.js b/resources/assets/v3/js/app.js index b29ca6e814..f7d8eeb129 100644 --- a/resources/assets/v3/js/app.js +++ b/resources/assets/v3/js/app.js @@ -18,4 +18,4 @@ * along with this program. If not, see . */ -// unused, see the specific pages. +// unused, see bootstrap for app-wide stuff. diff --git a/resources/assets/v3/js/boot/bootstrap.js b/resources/assets/v3/js/boot/bootstrap.js index 021a771269..728cf502ed 100644 --- a/resources/assets/v3/js/boot/bootstrap.js +++ b/resources/assets/v3/js/boot/bootstrap.js @@ -17,6 +17,9 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ +// import css +import "admin-lte/dist/css/adminlte.min.css" +import "bootstrap-icons/font/bootstrap-icons.css" // JS import "bootstrap" @@ -32,8 +35,10 @@ import {getFreshVariable} from "v2/src/store/get-fresh-variable.js"; import {getVariable} from "v2/src/store/get-variable.js"; import {getViewRange} from "v2/src/support/get-viewrange.js"; import {loadTranslations} from "v2/src/support/load-translations.js"; + store.addPlugin(observePlugin); + window.bootstrapped = false; window.store = store; window.Alpine = Alpine @@ -76,32 +81,34 @@ getFreshVariable('lastActivity').then((serverValue) => { document.dispatchEvent(event); window.bootstrapped = true; console.log('Bootstrapped!'); - }); - // page may have an introduction necessary to be played. - const url = '/'; - let site = axios.create({baseURL: url, withCredentials: true}); - axios.defaults.withCredentials = true; - axios.defaults.baseURL = url; + // page may have an introduction necessary to be played. + const url = '/'; + let site = axios.create({baseURL: url, withCredentials: true}); + axios.defaults.withCredentials = true; + axios.defaults.baseURL = url; + + site.get(routeStepsUrl).then(function(data) { + console.log('Done with loading hints.'); + introJs.tour().setOptions({ + // // nextLabel: nextLabel, + // // prevLabel: prevLabel, + // // skipLabel: skipLabel, + // // doneLabel: doneLabel, + hints: data.data, + // // exitOnEsc: true, + // // exitOnOverlayClick: true, + // // keyboardNavigation: true + }); + // // introJs.tour().onComplete(reportIntroFinished); + // // introJs.tour().onExit(reportIntroFinished); + introJs.tour().start(); - // console.log('setupIntro().'); - site.get(routeStepsUrl).then(function(data) { - console.log('Done with axios'); - console.log(data.data); - introJs.tour().setOptions({ - nextLabel: nextLabel, - prevLabel: prevLabel, - skipLabel: skipLabel, - doneLabel: doneLabel, - steps: data.data, - exitOnEsc: true, - exitOnOverlayClick: true, - keyboardNavigation: true }); - introJs.tour().onComplete(reportIntroFinished); - introJs.tour().onExit(reportIntroFinished); + }); - // introJs.tour().start(); + + diff --git a/resources/assets/v3/js/pages/shared/dates.js b/resources/assets/v3/js/pages/shared/dates.js index b67e519b70..13076b6778 100644 --- a/resources/assets/v3/js/pages/shared/dates.js +++ b/resources/assets/v3/js/pages/shared/dates.js @@ -89,7 +89,7 @@ export default () => ({ // set the title: let element = document.getElementsByClassName('daterange-holder')[0]; - console.log('element', element); + //console.log('element', element); element.textContent = format(this.range.start) + ' - ' + format(this.range.end); element.setAttribute('data-start', format(this.range.start, 'yyyy-MM-dd')); element.setAttribute('data-end', format(this.range.end, 'yyyy-MM-dd')); diff --git a/resources/assets/v3/sass/app.scss b/resources/assets/v3/sass/app.scss index 08f6b690c3..b3d1a07731 100644 --- a/resources/assets/v3/sass/app.scss +++ b/resources/assets/v3/sass/app.scss @@ -18,96 +18,115 @@ * along with this program. If not, see . */ +// +//$color-mode-type: media-query; +//$link-decoration: none !default; +//$font-family-sans-serif: "Roboto", sans-serif; +// +//$danger: #CD5029 !default; +//$primary: #1E6581 !default; +//$success: #64B624 !default; +// +//// admin LTE +//@use "admin-lte/src/scss/adminlte" with ( +// $color-mode-type: $color-mode-type, +// $link-decoration: $link-decoration, +// $font-family-sans-serif: $font-family-sans-serif, +// $danger: $danger, +// $primary: $primary, +// $success: $success +//); -/*! - * AdminLTE v4.0.0 - * Author: Colorlib - * Website: AdminLTE.io - * License: Open source - MIT - */ - -// Bootstrap Configuration -// --------------------------------------------------- -@import "bootstrap/scss/functions"; -@import "bootstrap-icons/font/bootstrap-icons.css"; - -// AdminLTE Configuration -// --------------------------------------------------- -@import "admin-lte/src/scss/bootstrap-variables"; // little modified are here - - - -// Bootstrap Configuration -// --------------------------------------------------- -@import "bootstrap/scss/variables"; -@import "bootstrap/scss/variables-dark"; -@import "bootstrap/scss/maps"; -@import "bootstrap/scss/mixins"; -@import "bootstrap/scss/utilities"; - -// Bootstrap Layout & components -@import "bootstrap/scss/root"; -@import "bootstrap/scss/reboot"; -@import "bootstrap/scss/type"; -@import "bootstrap/scss/images"; -@import "bootstrap/scss/containers"; -@import "bootstrap/scss/grid"; -@import "bootstrap/scss/tables"; -@import "bootstrap/scss/forms"; -@import "bootstrap/scss/buttons"; -@import "bootstrap/scss/transitions"; -@import "bootstrap/scss/dropdown"; -@import "bootstrap/scss/button-group"; -@import "bootstrap/scss/nav"; -@import "bootstrap/scss/navbar"; -@import "bootstrap/scss/card"; -@import "bootstrap/scss/accordion"; -@import "bootstrap/scss/breadcrumb"; -@import "bootstrap/scss/pagination"; -@import "bootstrap/scss/badge"; -@import "bootstrap/scss/alert"; -@import "bootstrap/scss/progress"; -@import "bootstrap/scss/list-group"; -@import "bootstrap/scss/close"; -@import "bootstrap/scss/toasts"; -@import "bootstrap/scss/modal"; -@import "bootstrap/scss/tooltip"; -@import "bootstrap/scss/popover"; -@import "bootstrap/scss/carousel"; -@import "bootstrap/scss/spinners"; -@import "bootstrap/scss/offcanvas"; -@import "bootstrap/scss/placeholders"; - -// Bootstrap Helpers -@import "bootstrap/scss/helpers"; - -// Bootstrap Utilities -@import "bootstrap/scss/utilities/api"; - -// AdminLTE Configuration -// --------------------------------------------------- -@import "admin-lte/src/scss/variables"; -@import "admin-lte/src/scss/variables-dark"; -@import "admin-lte/src/scss/mixins"; - -// AdiminLTE Parts -// --------------------------------------------------- -@import "admin-lte/src/scss/parts/core"; -@import "admin-lte/src/scss/parts/components"; -@import "admin-lte/src/scss/parts/extra-components"; -@import "admin-lte/src/scss/parts/pages"; -@import "admin-lte/src/scss/parts/miscellaneous"; - -// AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance -@import "admin-lte/src/scss/accessibility"; - -// AdminLTE Documentation Styles (only applies to pages with body.docs-page) -// @import "docs"; - - - - - +// +///*! +// * AdminLTE v4.0.0 +// * Author: Colorlib +// * Website: AdminLTE.io +// * License: Open source - MIT +// */ +// +//// Bootstrap Configuration +//// --------------------------------------------------- +//@import "bootstrap/scss/functions"; +//@import "bootstrap-icons/font/bootstrap-icons.css"; +// +//// AdminLTE Configuration +//// --------------------------------------------------- +//@import "admin-lte/src/scss/bootstrap-variables"; // little modified are here +// +// +// +//// Bootstrap Configuration +//// --------------------------------------------------- +//@import "bootstrap/scss/variables"; +//@import "bootstrap/scss/variables-dark"; +//@import "bootstrap/scss/maps"; +//@import "bootstrap/scss/mixins"; +//@import "bootstrap/scss/utilities"; +// +//// Bootstrap Layout & components +//@import "bootstrap/scss/root"; +//@import "bootstrap/scss/reboot"; +//@import "bootstrap/scss/type"; +//@import "bootstrap/scss/images"; +//@import "bootstrap/scss/containers"; +//@import "bootstrap/scss/grid"; +//@import "bootstrap/scss/tables"; +//@import "bootstrap/scss/forms"; +//@import "bootstrap/scss/buttons"; +//@import "bootstrap/scss/transitions"; +//@import "bootstrap/scss/dropdown"; +//@import "bootstrap/scss/button-group"; +//@import "bootstrap/scss/nav"; +//@import "bootstrap/scss/navbar"; +//@import "bootstrap/scss/card"; +//@import "bootstrap/scss/accordion"; +//@import "bootstrap/scss/breadcrumb"; +//@import "bootstrap/scss/pagination"; +//@import "bootstrap/scss/badge"; +//@import "bootstrap/scss/alert"; +//@import "bootstrap/scss/progress"; +//@import "bootstrap/scss/list-group"; +//@import "bootstrap/scss/close"; +//@import "bootstrap/scss/toasts"; +//@import "bootstrap/scss/modal"; +//@import "bootstrap/scss/tooltip"; +//@import "bootstrap/scss/popover"; +//@import "bootstrap/scss/carousel"; +//@import "bootstrap/scss/spinners"; +//@import "bootstrap/scss/offcanvas"; +//@import "bootstrap/scss/placeholders"; +// +//// Bootstrap Helpers +//@import "bootstrap/scss/helpers"; +// +//// Bootstrap Utilities +//@import "bootstrap/scss/utilities/api"; +// +//// AdminLTE Configuration +//// --------------------------------------------------- +//@import "admin-lte/src/scss/variables"; +//@import "admin-lte/src/scss/variables-dark"; +//@import "admin-lte/src/scss/mixins"; +// +//// AdiminLTE Parts +//// --------------------------------------------------- +//@import "admin-lte/src/scss/parts/core"; +//@import "admin-lte/src/scss/parts/components"; +//@import "admin-lte/src/scss/parts/extra-components"; +//@import "admin-lte/src/scss/parts/pages"; +//@import "admin-lte/src/scss/parts/miscellaneous"; +// +//// AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance +//@import "admin-lte/src/scss/accessibility"; +// +//// AdminLTE Documentation Styles (only applies to pages with body.docs-page) +//// @import "docs"; +// +// +// +// +//// // // diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php index f1e33494bd..c0c59ce248 100644 --- a/resources/views/index.blade.php +++ b/resources/views/index.blade.php @@ -2,11 +2,6 @@ @section('content') - TODO intro js - XTODO dark mode ook onthouden en dat script in het template - @if('light' === $darkMode) - LIGHT - @endif

diff --git a/resources/views/layout/v3/session.blade.php b/resources/views/layout/v3/session.blade.php index 2ad8532421..8e7b67244a 100644 --- a/resources/views/layout/v3/session.blade.php +++ b/resources/views/layout/v3/session.blade.php @@ -30,15 +30,8 @@