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

Update theming, rebuild app from existing angular project

Browse Source
This commit is contained in:
Michael Pivato
2024-06-07 22:06:02 +09:30
parent 922d74e007
commit 2172b81443
26 changed files with 468 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.component.html
View File

@@ -1,6 +1,6 @@
<mat-toolbar><span>BufPiv</span></mat-toolbar>
<mat-sidenav-container>
<mat-sidenav>
<mat-sidenav-container autosize>
<mat-sidenav mode="side" opened>
<app-file-tree [files]="files()"></app-file-tree>
</mat-sidenav>
<mat-sidenav-content>

9
src/app/app.component.scss Normal file
View File

@@ -0,0 +1,9 @@
:host {
display: flex;
flex-direction: column;
height: 100%;
}
mat-sidenav-container {
width: 100%;
height: 100%;
}

32
src/app/app.component.ts
View File

@@ -1,22 +1,23 @@
import { CommonModule } from "@angular/common";
import { Component, signal } from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { MatSidenavModule } from "@angular/material/sidenav";
import { RouterOutlet } from "@angular/router";
import { message, open } from "@tauri-apps/api/dialog";
import { FileEntry, readDir } from "@tauri-apps/api/fs";
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatTreeModule } from "@angular/material/tree";
import { CommonModule } from '@angular/common';
import { Component, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { RouterOutlet } from '@angular/router';
import { message, open } from '@tauri-apps/api/dialog';
import { FileEntry, readDir } from '@tauri-apps/api/fs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTreeModule } from '@angular/material/tree';
import {
FileOrFolder,
FileTreeComponent,
} from "./file-tree/file-tree.component";
} from './file-tree/file-tree.component';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: "app-root",
selector: 'app-root',
standalone: true,
templateUrl: "./app.component.html",
styleUrl: "./app.component.css",
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
imports: [
CommonModule,
RouterOutlet,
@@ -25,6 +26,7 @@ import {
MatToolbarModule,
MatTreeModule,
FileTreeComponent,
MatIconModule,
],
})
export class AppComponent {
@@ -37,7 +39,7 @@ export class AppComponent {
multiple: false,
});
if (Array.isArray(selectedDirectory)) {
message("Only a single folder can be selected at a time");
message('Only a single folder can be selected at a time');
} else {
this.selectedDirectory = selectedDirectory;
}
@@ -52,7 +54,7 @@ export class AppComponent {
private mapEntry(entry: FileEntry): FileOrFolder {
return {
isDirectory: entry.children != null,
name: entry.name || "",
name: entry.name || '',
children: entry.children?.map((entry) => this.mapEntry(entry)),
};
}

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

@@ -1,8 +1,16 @@
import { ApplicationConfig } from "@angular/core";
import { provideRouter } from "@angular/router";
import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
import { routes } from "./app.routes";
import {
ApplicationConfig,
provideExperimentalZonelessChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideAnimationsAsync()],
providers: [
provideExperimentalZonelessChangeDetection(),
provideRouter(routes),
provideAnimationsAsync(),
],
};

3
src/app/editor/editor.component.scss Normal file
View File

@@ -0,0 +1,3 @@
:host {
display: block;
}

17
src/app/editor/editor.component.ts
View File

@@ -1,16 +1,15 @@
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, input } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { readTextFile } from "@tauri-apps/api/fs";
import { load, parse } from "protobufjs";
import { CommonModule } from '@angular/common';
import { Component, input } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { readTextFile } from '@tauri-apps/api/fs';
import { parse } from 'protobufjs';
@Component({
selector: "app-editor",
selector: 'app-editor',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: "./editor.component.html",
styleUrl: "./editor.component.css",
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './editor.component.html',
styleUrl: './editor.component.scss',
})
export class EditorComponent {
fileContents = input<string>();

3
src/app/file-tree/file-tree.component.scss Normal file
View File

@@ -0,0 +1,3 @@
:host {
display: block;
}

20
src/app/file-tree/file-tree.component.ts
View File

@@ -1,20 +1,19 @@
import { DataSource } from "@angular/cdk/collections";
import { FlatTreeControl } from "@angular/cdk/tree";
import { CommonModule } from "@angular/common";
import { FlatTreeControl } from '@angular/cdk/tree';
import { CommonModule } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
Signal,
computed,
input,
output,
} from "@angular/core";
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import {
MatTreeFlatDataSource,
MatTreeFlattener,
MatTreeModule,
} from "@angular/material/tree";
import { MatIconModule } from "@angular/material/icon";
} from '@angular/material/tree';
export interface FileOrFolder {
isDirectory: boolean;
@@ -29,9 +28,9 @@ interface FileNode {
}
@Component({
selector: "app-file-tree",
selector: 'app-file-tree',
standalone: true,
imports: [CommonModule, MatTreeModule, MatIconModule],
imports: [CommonModule, MatTreeModule, MatIconModule, MatButtonModule],
template: `<mat-tree [dataSource]="dataSource()" [treeControl]="treeControl">
<mat-tree-node
*matTreeNodeDef="let node"
@@ -55,8 +54,7 @@ interface FileNode {
{{ node.name }}
</mat-tree-node>
</mat-tree>`,
styleUrl: "./file-tree.component.css",
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrl: './file-tree.component.scss',
})
export class FileTreeComponent {
files = input<FileOrFolder[]>([]);

26
src/index.html
View File

@@ -1,17 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tauri + Angular</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<app-root></app-root>
</body>
<head>
<meta charset="utf-8">
<title>Test</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>

141
src/m3-theme.scss Normal file
View File

@@ -0,0 +1,141 @@
// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.
@use 'sass:map';
@use '@angular/material' as mat;
// Note: Color palettes are generated from primary: #DF6B85, secondary: #AE868D, tertiary: #B48858, neutral: #988E8F
$_palettes: (
primary: (
0: #000000,
10: #3f0015,
20: #630828,
25: #721633,
30: #82233e,
35: #912f49,
40: #a13a54,
50: #c0536c,
60: #e06c86,
70: #ff86a0,
80: #ffb2bf,
90: #ffd9de,
95: #ffecee,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #3f0017,
20: #5f112b,
25: #6d1d35,
30: #7c2940,
35: #8b344c,
40: #9a4058,
50: #b95870,
60: #d87189,
70: #f78aa3,
80: #ffb1c0,
90: #ffd9df,
95: #ffecee,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #2b1700,
20: #482900,
25: #573300,
30: #673d00,
35: #774700,
40: #885200,
50: #aa6800,
60: #c98121,
70: #e89b3a,
80: #ffb868,
90: #ffddbb,
95: #ffeedf,
98: #fff8f4,
99: #fffbff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #3f0018,
20: #5f112c,
25: #6d1d37,
30: #7c2942,
35: #8b344e,
40: #9a4059,
50: #b85872,
60: #d7718b,
70: #f78aa5,
80: #ffb1c2,
90: #ffd9e0,
95: #ffecee,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
neutral-variant: (
0: #000000,
10: #24191a,
20: #3a2d2f,
25: #46383a,
30: #524345,
35: #5e4f51,
40: #6a5a5c,
50: #847375,
60: #9f8c8e,
70: #baa6a9,
80: #d6c2c4,
90: #f3dddf,
95: #ffecee,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);
$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
),
));
$dark-theme: mat.define-theme((
color: (
theme-type: dark,
primary: $_primary,
tertiary: $_tertiary,
),
));

8
src/main.ts
View File

@@ -1,7 +1,7 @@
import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component";
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err),
console.error(err)
);

18
src/styles.scss Normal file
View File

@@ -0,0 +1,18 @@
@use '@angular/material' as mat;
@use './m3-theme.scss';
@include mat.core();
html {
@include mat.all-component-themes(m3-theme.$dark-theme);
}
html,
body {
height: 100%;
}
body {
margin: 0;
--mat-tree-node-min-height: 24px;
--mat-tree-node-text-size: 14px;
}