Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-28 18:20:42 +00:00
Code Issues Projects Releases Wiki Activity

material design fixes 1

Browse source
This commit is contained in:
Johannes Millan 2024-06-16 13:22:04 +02:00
parent 0711a6018a
commit 3bcfe05902
7 changed files with 52 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

26
package-lock.json generated
View file

@ -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",

2
package.json
View file

@ -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",

32
src/_variables.scss
View file

@ -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);

4
src/app/ui/ui.module.ts
View file

@ -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 },
{

2
src/styles.scss
View file

@ -6,6 +6,8 @@
@import '../node_modules/@fontsource/roboto/300.css';
@import 'styles/font/material-icons';
@import '_variables';
@import 'styles/themes';
@import 'styles/page';

17
src/styles/page.scss
View file

@ -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%);
}

9
src/styles/themes.scss
View file

@ -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;