diff --git a/bun.lockb b/bun.lockb index 14aea36..5258e0e 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 834421f..ba08b55 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/app/app.config.ts b/src/app/app.config.ts index cb0fac6..68d3f75 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -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' }, + }, ], }; diff --git a/src/app/file-tree/file-tree.component.scss b/src/app/file-tree/file-tree.component.scss index 25abf41..06f3280 100644 --- a/src/app/file-tree/file-tree.component.scss +++ b/src/app/file-tree/file-tree.component.scss @@ -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 { diff --git a/src/app/proto-definition-selector/proto-definition-selector.component.scss b/src/app/proto-definition-selector/proto-definition-selector.component.scss index 6ee7606..81e0d6f 100644 --- a/src/app/proto-definition-selector/proto-definition-selector.component.scss +++ b/src/app/proto-definition-selector/proto-definition-selector.component.scss @@ -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; diff --git a/src/styles.scss b/src/styles.scss index 900b0b3..2e00bbd 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -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; } diff --git a/src/theme.scss b/src/theme.scss deleted file mode 100644 index a94eeb8..0000000 --- a/src/theme.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use "@angular/material" as mat; - -$rose-theme: mat.define-theme( - ( - color: ( - theme-type: dark, - primary: mat.$rose-palette, - ), - ) -);