vato007/bufpiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to angular 19.2.x, switch to new angular material styling system, reduce density (#2)
All checks were successful
release-nightly / macos (push) Successful in 2m8s
Details
release-nightly / web-demo (push) Successful in 5m45s
Details

Browse Source 
Reviewed-on: #2
This commit was merged in pull request #2.
This commit is contained in:
vato007
2025-03-29 16:48:27 +10:30
parent 451877667a
commit dd8d1374ab
7 changed files with 60 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

51
package.json
View File

@@ -11,40 +11,41 @@
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^19.1.6",
"@angular/animations": "^19.1.5",
"@angular/cdk": "^19.1.3",
"@angular/common": "^19.1.5",
"@angular/compiler": "^19.1.5",
"@angular/core": "^19.1.5",
"@angular/forms": "^19.1.5",
"@angular/material": "^19.1.3",
"@angular/platform-browser": "^19.1.5",
"@angular/platform-browser-dynamic": "^19.1.5",
"@angular/router": "^19.1.5",
"@angular/service-worker": "^19.1.5",
"@angular-devkit/build-angular": "^19.2.5",
"@angular/animations": "^19.2.4",
"@angular/cdk": "^19.2.7",
"@angular/common": "^19.2.4",
"@angular/compiler": "^19.2.4",
"@angular/core": "^19.2.4",
"@angular/forms": "^19.2.4",
"@angular/material": "^19.2.7",
"@angular/platform-browser": "^19.2.4",
"@angular/platform-browser-dynamic": "^19.2.4",
"@angular/router": "^19.2.4",
"@angular/service-worker": "^19.2.4",
"@tauri-apps/api": "^1.6.0",
"highlight.js": "^11.10.0",
"@types/json-schema": "^7.0.15",
"highlight.js": "^11.11.1",
"monaco-editor": "^0.50.0",
"ngx-monaco-editor-v2": "^18.0.1",
"protobufjs": "^7.3.2",
"rxjs": "^7.8.1",
"tslib": "^2.6.3",
"ngx-monaco-editor-v2": "^19.0.2",
"protobufjs": "^7.4.0",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "^0.15.0"
},
"devDependencies": {
"@angular/build": "^19.1.6",
"@angular/cli": "^19.1.6",
"@angular/compiler-cli": "^19.1.5",
"@tauri-apps/cli": "^1.6.0",
"@types/jasmine": "^5.1.4",
"@angular/build": "^19.2.5",
"@angular/cli": "^19.2.5",
"@angular/compiler-cli": "^19.2.4",
"@tauri-apps/cli": "^1.6.3",
"@types/jasmine": "^5.1.7",
"@types/protobufjs": "^6.0.0",
"jasmine-core": "^5.1.2",
"karma": "^6.4.3",
"jasmine-core": "^5.6.0",
"karma": "^6.4.4",
"karma-chrome-launcher": "^3.2.0",
"karma-coverage": "^2.2.1",
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"typescript": "^5.5.3"
"typescript": "^5.8.2"
}
}

7
src/app/app.config.ts
View File

@@ -17,6 +17,7 @@ import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json';
import { provideMonacoEditor } from 'ngx-monaco-editor-v2';
import { routes } from './app.routes';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
export const appConfig: ApplicationConfig = {
providers: [
@@ -44,5 +45,11 @@ export const appConfig: ApplicationConfig = {
enabled: !isDevMode(),
registrationStrategy: 'registerWhenStable:30000',
}),
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
// Filled doesn't look great with low density, by default the label is lost, and adding
// it back makes it look cramped
useValue: { appearance: 'outline' },
},
],
};

5
src/app/file-tree/file-tree.component.scss
View File

@@ -1,16 +1,15 @@
:host {
display: block;
border-radius: var(--mat-sidenav-container-shape);
padding: var(--mat-sidenav-container-shape);
height: 100%;
box-sizing: border-box;
transition: background-color 100ms linear;
overflow-x: hidden;
overflow-x: auto;
overflow-y: auto;
}
.mat-tree {
background-color: transparent;
min-width: fit-content;
}
.mat-tree-node {

2
src/app/proto-definition-selector/proto-definition-selector.component.scss
View File

@@ -1,7 +1,5 @@
:host {
display: block;
border-radius: var(--mat-sidenav-container-shape);
padding: var(--mat-sidenav-container-shape);
height: 100%;
box-sizing: border-box;
transition: background-color 100ms linear;

68
src/styles.scss
View File

@@ -1,52 +1,34 @@
@use "@angular/material" as mat;
@use "./theme.scss";
@include mat.elevation-classes();
@include mat.app-background();
@mixin custom-colours($theme) {
.mat-toolbar {
background-color: mat.get-theme-color($theme, tertiary-container);
}
app-proto-definition-selector,
app-file-tree {
background-color: mat.get-theme-color($theme, secondary-container);
transition: background-color 100ms linear;
}
.droppable {
background-color: mat.get-theme-color($theme, secondary, 40);
}
}
html {
@include mat.elevation-classes();
@include mat.app-background();
@include mat.toolbar-theme(theme.$rose-theme);
@include mat.button-theme(theme.$rose-theme);
@include mat.tree-theme(theme.$rose-theme);
@include mat.sidenav-theme(theme.$rose-theme);
@include mat.icon-theme(theme.$rose-theme);
@include mat.form-field-theme(theme.$rose-theme);
@include mat.list-theme(theme.$rose-theme);
@include mat.select-theme(theme.$rose-theme);
@include mat.snack-bar-theme(theme.$rose-theme);
@include mat.button-toggle-theme(theme.$rose-theme);
@include mat.dialog-theme(theme.$rose-theme);
@include custom-colours(theme.$rose-theme);
color-scheme: dark light;
height: 100%;
@include mat.theme(
(
color: mat.$rose-palette,
typography: Roboto,
density: -5,
)
);
@include mat.toolbar-overrides(
(
container-background-color: var(--mat-sys-primary-container),
)
);
@include mat.sidenav-overrides(
(
container-shape: 1rem,
container-background-color: var(--mat-sys-secondary-container),
)
);
}
html,
body {
height: 100%;
}
body {
margin: 0;
font: mat.get-theme-typography(theme.$rose-theme, body-medium, font);
--mat-tree-node-min-height: 24px;
--mat-tree-node-text-size: 14px;
--mdc-icon-button-state-layer-size: 24px;
--mat-icon-button-touch-target-display: none;
--mdc-list-list-item-one-line-container-height: 24px;
background: var(--mat-sys-surface);
color: var(--mat-sys-on-surface);
font-family: Roboto, "Helvetica Neue", sans-serif;
}

10
src/theme.scss
View File

@@ -1,10 +0,0 @@
@use "@angular/material" as mat;
$rose-theme: mat.define-theme(
(
color: (
theme-type: dark,
primary: mat.$rose-palette,
),
)
);