From 3bcfe05902fe7c56131731e7b8bbdfdd902ceb25 Mon Sep 17 00:00:00 2001 From: Johannes Millan Date: Sun, 16 Jun 2024 13:22:04 +0200 Subject: [PATCH] material design fixes 1 --- package-lock.json | 26 ++++++++++++++------------ package.json | 2 +- src/_variables.scss | 32 +++++++++++++++++--------------- src/app/ui/ui.module.ts | 4 +++- src/styles.scss | 2 ++ src/styles/page.scss | 17 ++++++++++------- src/styles/themes.scss | 9 +++++---- 7 files changed, 52 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1ac19f8ef6..689f516163 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "electron-log": "^5.1.2", "electron-window-state": "^5.0.3", "fs-extra": "^11.1.1", - "marked": "^13.0.0", "node-fetch": "^2.7.0" }, "devDependencies": { @@ -69,7 +68,7 @@ "@types/object-path": "^0.11.4", "@typescript-eslint/eslint-plugin": "5.8.1", "@typescript-eslint/parser": "5.62.0", - "angular-material-css-vars": "^6.1.2", + "angular-material-css-vars": "^7.0.0", "axios": "^1.6.0", "chart.js": "^4.4.3", "chromedriver": "^125.0.2", @@ -108,6 +107,7 @@ "karma-jasmine": "~4.0.1", "karma-jasmine-html-reporter": "^1.6.0", "lz-string": "^1.5.0", + "marked": "^13.0.0", "moment": "2.29.4", "moment-duration-format": "^2.2.2", "nanoid": "^4.0.0", @@ -9215,18 +9215,18 @@ "dev": true }, "node_modules/angular-material-css-vars": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/angular-material-css-vars/-/angular-material-css-vars-6.1.2.tgz", - "integrity": "sha512-joBVVM6M1FL+jfpGfTiyYM9WlrgsSxsdsKnFRjkk1OBx/beuO32iVCTi5tcXhSanaIS1UzpTICfrndtEdZD7/Q==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/angular-material-css-vars/-/angular-material-css-vars-7.0.0.tgz", + "integrity": "sha512-nJTqiU8SWhc5EK4mISuTe0a5VkzGxyjpU99L94i0yWo3jZOPZK6L9w3C9WADbRbLUQjFRzC6+pFRdNFfySKCyA==", "dev": true, "dependencies": { "@ctrl/tinycolor": "^4.0.0", "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/common": ">=17", - "@angular/core": ">=17", - "@angular/material": ">=17" + "@angular/common": ">=18", + "@angular/core": ">=18", + "@angular/material": ">=18" } }, "node_modules/ansi-align": { @@ -19428,6 +19428,7 @@ "version": "13.0.0", "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.0.tgz", "integrity": "sha512-VTeDCd9txf4KLLljUZ0nljE/Incb9SrWuueE44QVuU0pkOdh4sfCeW1Z6lPcxyDRSVY6rm8db/0OPaN75RNUmw==", + "dev": true, "bin": { "marked": "bin/marked.js" }, @@ -34497,9 +34498,9 @@ "dev": true }, "angular-material-css-vars": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/angular-material-css-vars/-/angular-material-css-vars-6.1.2.tgz", - "integrity": "sha512-joBVVM6M1FL+jfpGfTiyYM9WlrgsSxsdsKnFRjkk1OBx/beuO32iVCTi5tcXhSanaIS1UzpTICfrndtEdZD7/Q==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/angular-material-css-vars/-/angular-material-css-vars-7.0.0.tgz", + "integrity": "sha512-nJTqiU8SWhc5EK4mISuTe0a5VkzGxyjpU99L94i0yWo3jZOPZK6L9w3C9WADbRbLUQjFRzC6+pFRdNFfySKCyA==", "dev": true, "requires": { "@ctrl/tinycolor": "^4.0.0", @@ -42298,7 +42299,8 @@ "marked": { "version": "13.0.0", "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.0.tgz", - "integrity": "sha512-VTeDCd9txf4KLLljUZ0nljE/Incb9SrWuueE44QVuU0pkOdh4sfCeW1Z6lPcxyDRSVY6rm8db/0OPaN75RNUmw==" + "integrity": "sha512-VTeDCd9txf4KLLljUZ0nljE/Incb9SrWuueE44QVuU0pkOdh4sfCeW1Z6lPcxyDRSVY6rm8db/0OPaN75RNUmw==", + "dev": true }, "matcher": { "version": "3.0.0", diff --git a/package.json b/package.json index 545d0b4a19..3de8e7840b 100644 --- a/package.json +++ b/package.json @@ -165,7 +165,7 @@ "@types/object-path": "^0.11.4", "@typescript-eslint/eslint-plugin": "5.8.1", "@typescript-eslint/parser": "5.62.0", - "angular-material-css-vars": "^6.1.2", + "angular-material-css-vars": "^7.0.0", "axios": "^1.6.0", "chart.js": "^4.4.3", "chromedriver": "^125.0.2", diff --git a/src/_variables.scss b/src/_variables.scss index 29346cbf3f..156c670fdb 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -1,3 +1,5 @@ +@use 'angular-material-css-vars' as mat-css-vars; + @import 'styles/config/shadows'; @import 'styles/functions/_ddivide'; @@ -64,7 +66,7 @@ $light-theme-text-color-less-intense: transparentize($light-theme-text-color, 0. $light-theme-text-color-muted: transparentize($light-theme-text-color, 0.4); $light-theme-text-color-most-intense: rgb(0, 0, 0); -$light-theme-selected-task-bg-color: mat-css-color-primary(100); +$light-theme-selected-task-bg-color: mat-css-vars.mat-css-color-primary(100); $light-theme-selected-task-bg-color: #fff; $light-theme-extra-border-color: #dddddd; $dark-theme-extra-border-color: rgba(255, 255, 255, 0.12); @@ -72,22 +74,22 @@ $dark-theme-extra-border-color: rgba(255, 255, 255, 0.12); $light-theme-separator-color: rgba(18, 18, 18, 0.3); $dark-theme-separator-color: rgba(255, 255, 255, 0.3); -$c-accent: mat-css-color-accent(); -$c-warn: mat-css-color-warn(); +$c-accent: mat-css-vars.mat-css-color-accent(); +$c-warn: mat-css-vars.mat-css-color-warn(); -$c-primary: mat-css-color-primary(); -$c-primary-50: mat-css-color-primary(50); -$c-primary-100: mat-css-color-primary(100); -$c-primary-200: mat-css-color-primary(200); -$c-primary-300: mat-css-color-primary(300); -$c-primary-400: mat-css-color-primary(400); -$c-primary-600: mat-css-color-primary(600); -$c-primary-700: mat-css-color-primary(700); -$c-primary-800: mat-css-color-primary(800); -$c-primary-900: mat-css-color-primary(900); +$c-primary: mat-css-vars.mat-css-color-primary(); +$c-primary-50: mat-css-vars.mat-css-color-primary(50); +$c-primary-100: mat-css-vars.mat-css-color-primary(100); +$c-primary-200: mat-css-vars.mat-css-color-primary(200); +$c-primary-300: mat-css-vars.mat-css-color-primary(300); +$c-primary-400: mat-css-vars.mat-css-color-primary(400); +$c-primary-600: mat-css-vars.mat-css-color-primary(600); +$c-primary-700: mat-css-vars.mat-css-color-primary(700); +$c-primary-800: mat-css-vars.mat-css-color-primary(800); +$c-primary-900: mat-css-vars.mat-css-color-primary(900); -$c-contrast: mat-css-contrast-color(); -$c-contrast-600: mat-css-contrast-color(600); +$c-contrast: mat-css-vars.mat-css-contrast-color(); +$c-contrast-600: mat-css-vars.mat-css-contrast-color(600); $c-focus-border: $c-primary-400; $c-backdrop-light-theme: rgba(0, 0, 0, 0.6); diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts index 7532b9c6bf..38bd2b1324 100644 --- a/src/app/ui/ui.module.ts +++ b/src/app/ui/ui.module.ts @@ -97,6 +97,7 @@ import { LongPressIOSDirective } from './longpress/longpress-ios.directive'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; import { ProgressCircleComponent } from './progress-circle/progress-circle.component'; import { FormlyLinkWidgetComponent } from './formly-link-widget/formly-link-widget.component'; +import { MaterialCssVarsModule } from 'angular-material-css-vars'; const DIALOG_COMPONENTS = [ DialogConfirmComponent, @@ -217,6 +218,7 @@ const markedOptionsFactory = (): MarkedOptions => { sanitize: SecurityContext.HTML, }), FormsModule, + MaterialCssVarsModule.forRoot(), ReactiveFormsModule, FormlyModule.forChild({ types: [ @@ -263,7 +265,7 @@ const markedOptionsFactory = (): MarkedOptions => { { provide: ErrorHandler, useClass: GlobalErrorHandler }, { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, - useValue: { appearance: 'standard' }, + useValue: { appearance: 'outline' }, }, { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }, { diff --git a/src/styles.scss b/src/styles.scss index 0edc723b3b..75965c65f1 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -6,6 +6,8 @@ @import '../node_modules/@fontsource/roboto/300.css'; @import 'styles/font/material-icons'; + + @import '_variables'; @import 'styles/themes'; @import 'styles/page'; diff --git a/src/styles/page.scss b/src/styles/page.scss index c6becd9e3e..a65064d870 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -78,21 +78,24 @@ body { } &:before { + content: ''; opacity: 1; filter: brightness(0.7) saturate(0.6); - background: linear-gradient( - 180deg, - $dark-theme-bg 0, - $c-primary-900 20%, - $c-primary-800 50%, - $c-primary-700 100% - ); + //background: linear-gradient( + // 180deg, + // $dark-theme-bg 0, + // $c-primary-900 20%, + // $c-primary-800 50%, + // $c-primary-700 100% + //); background: linear-gradient( 180deg, $dark-theme-bg 0, $c-primary-900 20%, $c-primary-800 100% ); + background: red !important; + //background: linear-gradient(180deg, $c-primary-700 0, $c-primary-800 20%, $c-primary-900 30%, $dark-theme-bg 100%); //background: linear-gradient(180deg, $c-primary-900 0, $c-primary-800 80%, $c-primary-700 90%, $c-primary-600 100%); } diff --git a/src/styles/themes.scss b/src/styles/themes.scss index 61317db49c..b742795420 100644 --- a/src/styles/themes.scss +++ b/src/styles/themes.scss @@ -1,11 +1,12 @@ @use '@angular/material' as mat; @use 'angular-material-css-vars' as mat-css-vars; -$custom-typography: mat.m2-define-typography-config( - $font-family: null, -); -//@include init-material-css-vars($typography-config: $custom-typography); + +//$custom-typography: mat.m2-define-typography-config( +// $font-family: null, +//); //@include mat-css-vars.init-material-css-vars($typography-config: $custom-typography); +@include mat-css-vars.init-material-css-vars(); .bg-card { background: #fff;