Feature/4.2.0 (#126)

* refactor(app): #110 * fix(theme-service): secondary color transparency * feat(app): update commands * feat(app): #120 * fix(app): colors * feat(app): prepare windows dark theme * refactor(app): font for windows * fix(windows-theme.service): auto select * refactor(app): config paths * fix(welcome-page): #124 * chore(app): extend release notes * feat(app): #121 * fix(app): theme styles * refactor(app): themes * refactor(app): #122 * chore(dashboard): update translation * feat(app): update links base on selected lang * feat(app): update styles
mkinitcpio · Jul 4, 2023 · 59dd953 · 59dd953
1 parent 0deeda5
commit 59dd953
Show file tree

Hide file tree

Showing 92 changed files with 1,148 additions and 1,033 deletions.
diff --git a/main.ts b/main.ts
@@ -2,7 +2,9 @@ import { app, BrowserWindow } from 'electron';
 import * as path from 'path';
 import * as url from 'url';
 import { initialize, enable as enableRemote } from "@electron/remote/main";
+import * as Store from 'electron-store';
 initialize();
+Store.initRenderer();
 
 let win: BrowserWindow = null;
 const args = process.argv.slice(1),

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "car-maintenance",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "App for log your car parts maintenance such as engine, oil and any what you want! Manage cost, date and mileage.",
   "homepage": "https://github.com/mkinitcpio/car-maintenance",
   "author": {
@@ -33,7 +33,9 @@
     "electron:serve-tsc": "tsc -p tsconfig.serve.json",
     "electron:serve": "wait-on tcp:4200 && npm run electron:serve-tsc && npx electron . --serve",
     "electron:local": "npm run build:prod && npx electron .",
-    "electron:build": "npm run build:prod && electron-builder -l",
+    "electron:build-linux": "npm run build:prod && electron-builder --linux",
+    "electron:build-mac": "npm run build:prod && electron-builder --mac",
+    "electron:build-windows": "npm run build:prod && electron-builder --windows",
     "test": "ng test --watch=false",
     "test:watch": "ng test",
     "e2e": "npm run build:prod && cross-env TS_NODE_PROJECT='e2e/tsconfig.e2e.json' mocha --timeout 300000 --require ts-node/register e2e/**/*.e2e.ts",
@@ -50,6 +52,7 @@
     "@ngrx/store-devtools": "12.5.0",
     "app-builder": "7.0.4",
     "app-builder-bin": "4.1.2",
+    "electron-store": "8.1.0",
     "material-icons": "1.10.6",
     "uuid": "8.3.1"
   },

diff --git a/src/_colors.scss b/src/_colors.scss
@@ -1,21 +1,24 @@
 $color-primary: var(--primary-color);
 $color-secondary: var(--secondary-color);
-$color-dangerous: #c7162b;
-$color-border: #dce1e6;
+$color-dangerous: var(--color-dangerous);
+$color-border: var(--color-border);
+$color-button-icon: var(--color-button-icon);
 
-$font-primary: #222;
-$font-secondary: #3c3a3a;
-$font-white: white;
+$background-primary: var(--background-primary);
+$background-secondary: var(--background-secondary);
+$background-button-hover: var(--background-button-hover);
+$background-loader: var(--background-loader);
 
+$font-color-primary: var(--platform-color-primary);
+$font-color-secondary: var(--platform-color-secondary);
 
-$background-primary: white;
-$background-secondary: #f7f7f7;
-$background-header-primary: #323030;
+$select-expand-icon-color: var(--select-expand-icon-color);
 
-$button-color-primary: #0d7f1e;
-$button-color-secondary: #4b4848;
-$button-color-dangerous: $color-dangerous;
-$button-color-neutral: #fcfcfc;
-$button-color-active: $color-primary;
+$toggle-active-color: var(--toggle-active-color);
 
-$separator-color: #efefef;
+$menu-border: var(--menu-border);
+
+$tooltip-background: var(--tooltip-background);
+$tooltip-color: var(--tooltip-color);
+
+$widget-icon-background: var(--widget-icon-background);
diff --git a/src/_fonts.scss b/src/_fonts.scss
@@ -26,4 +26,12 @@
   'opsz' 24
 }
 
-$font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+:root {
+  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+html[data-platform='windows'] {
+  --font-system: sans-serif;
+}
+
+$font-system: var(--font-system);
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -3,12 +3,15 @@ import { DataBaseService } from "./core/database";
 import { AutoCloseable } from "./core/auto-closeable";
 import { SettingsService } from "./shared/components/settings/settings.service";
 import { DOCUMENT } from "@angular/common";
-import { ThemeService } from "@core/services/theme.service";
 import { MatIconRegistry } from "@angular/material/icon";
 import { DomSanitizer } from "@angular/platform-browser";
 import { iconsNames } from "./icon-names";
 import { groupIllustrationNames } from './group-illustration-names';
 import { currencyNames } from './currencies-names';
+import { filter } from "rxjs/operators";
+import { SettingsTypeEnum } from "@shared/components/settings/settings-type.enum";
+import { ThemeService } from "@core/services/theme";
+import { AppearanceType } from "@shared/components/settings/interface";
 
 @Component({
   selector: "app-root",
@@ -49,9 +52,19 @@ export class AppComponent extends AutoCloseable {
       }
     });
 
-    this.settingsService.init();
-    this.themeService.init();
+    this.settingsService.settingsChanged$
+      .pipe(filter((node) => node.type === SettingsTypeEnum.Color))
+      .subscribe(({ value }) => {
+        this.themeService.setAppColors(value as string);
+      });
+
+    this.settingsService.settingsChanged$
+      .pipe(filter((node) => node.type === SettingsTypeEnum.Scheme))
+      .subscribe(({ value }) => {
+        this.themeService.setColorScheme(value as AppearanceType);
+      });
 
+    this.settingsService.init();
     this.dataBaseService.initDataBase();
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -6,6 +6,8 @@ import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
 
+import { registerLocaleData } from '@angular/common';
+import localeRu from '@angular/common/locales/ru';
 // NG Translate
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@@ -21,19 +23,52 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 import { EffectsModule } from '@ngrx/effects';
 import { DataBaseService } from './core/database';
+import { ThemeService, DarwinThemeService, LinuxThemeService, WindowsThemeService } from './core/services/theme';
 import {DatabaseSelectModule} from "./database-select/database-select.module";
 import { WelcomePageModule } from "./welcome-page/welcome-page.module";
 import { MaintenanceModule } from "./maintenance/maintenance.module";
 import { AppRoutingModule } from './app-routing.module';
 import { AppGuard } from './app.guard';
 import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
+import { ElectronService } from '@core/services';
+import { SettingsService } from '@shared/components/settings/settings.service';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }
 
+enum SupportedPlatrofmsEnum {
+  Windows = "Windows_NT",
+  Linux = "Linux",
+  Darwin = "Darwin",
+}
+
+export function ThemeFactory(electronService: ElectronService): ThemeService {
+  const systemType = electronService.os.type();
+  let themeServiceInstance: ThemeService = null;
+
+  switch(systemType) {
+    case SupportedPlatrofmsEnum.Darwin: {
+      themeServiceInstance = new DarwinThemeService(electronService);
+      break;
+    }
+    case SupportedPlatrofmsEnum.Windows: {
+      themeServiceInstance = new WindowsThemeService(electronService);
+      break;
+    }
+    case SupportedPlatrofmsEnum.Linux: {
+      themeServiceInstance = new LinuxThemeService();
+      break;
+    }
+  }
+
+  return themeServiceInstance;
+}
+
+registerLocaleData(localeRu, 'ru');
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
@@ -65,7 +100,13 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   ],
   providers: [
     DataBaseService,
-    AppGuard,
+    AppGuard, {
+      provide: ThemeService,
+      useFactory: ThemeFactory,
+      deps: [
+        ElectronService,
+      ]
+    },
   ],
   bootstrap: [AppComponent]
 })

diff --git a/src/app/category-details/category-details.component.scss b/src/app/category-details/category-details.component.scss
@@ -22,23 +22,25 @@
     height: 98px;
     width: 192px;
 
-    border: 2px solid #f2f2f2;
+    background: $background-secondary;
+    border: 2px solid $color-border;
     border-radius: 12px;
     resize: none;
 
+    color: $font-color-primary;
     font-family: $font-system;
 
     &:focus {
       outline: none !important;
-      border: 2px solid var(--primary-color) !important;
+      border: 2px solid $color-primary !important;
     }
   }
 
   &__table-container {
     display: flex;
     flex-direction: column;
 
-    background: white;
+    background: $background-primary;
 
     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
     transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1),
@@ -106,7 +108,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: white;
+    background: $background-primary;
     font-family: $font-system;
   }
 
@@ -147,13 +149,13 @@
     padding: 12px 8px 12px 12px;
     height: 38px;
 
-    color: #313131;
+    color: $font-color-primary;
 
     border-radius: 12px;
     cursor: pointer;
 
     &:hover {
-      background: rgba(0,0,0,0.05);
+      background: $background-button-hover;
 
       .category-details__table-title-icon {
         opacity: 1;
@@ -187,14 +189,15 @@
   }
 
   &__tables-title {
-    font-family: $font-system;
-    font-weight: bold;
     margin-bottom: 12px;
     padding: 0 8px 0 16px;
-
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    color: $font-color-primary;
+    font-family: $font-system;
+    font-weight: bold;
   }
 
   &__tables-title-buttons {
@@ -230,6 +233,7 @@
     &__raw-label {
       width: 112px;
       font-weight: bold;
+      color: $font-color-secondary;
     }
 
     &__status {
@@ -245,6 +249,7 @@
     }
 
     &__content {
+      color: $font-color-primary;
       font-family: $font-system;
       font-size: 14px;
     }

diff --git a/src/app/core/services/electron/electron.service.ts b/src/app/core/services/electron/electron.service.ts
@@ -6,11 +6,14 @@ import * as childProcess from 'child_process';
 import * as fs from 'fs';
 import * as os from 'os';
 import * as path from 'path';
+import * as Store from 'electron-store';
+import { Settings } from '@shared/components/settings/interface';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ElectronService {
+  private Store: Store;
   ipcRenderer: typeof ipcRenderer;
   webFrame: typeof webFrame;
   remote: typeof remote;
@@ -21,6 +24,11 @@ export class ElectronService {
   shell: typeof shell;
   path: typeof path;
   systemPreferences: typeof remote.systemPreferences;
+  appSettings: Store<Settings>;
+  private _changelog: Store<{
+    version: string,
+    isShown: boolean,
+  }>;
 
   get isElectron(): boolean {
     return !!(window && window.process && window.process.type);
@@ -38,6 +46,45 @@ export class ElectronService {
       this.shell = window.require('electron').shell;
       this.remote = window.require('@electron/remote');
       this.systemPreferences= window.require('@electron/remote').systemPreferences;
+      this.Store = window.require('electron-store');
+
+      const Store = window.require('electron-store');
+      this.appSettings = new Store({
+        name: 'appSettings',
+      });
+
+      this._changelog = new Store({
+        name: 'changelog',
+        defaults: {
+          version: '',
+          isShown: false,
+        },
+      });
     }
   }
+
+  public combineAppConfigsPath(...path: Array<string>): string {
+    return this.path.join(...path);
+  }
+
+  public getAppConfigFolderPath(): string {
+    const osAppDataFolder = '.config';
+    return this.path.join(this.os.homedir(), osAppDataFolder, 'Учет');
+  }
+
+  public isFileExist(filePath: string): boolean {
+    return this.fs.existsSync(filePath);
+  }
+
+  public setAppSettingsData(data: Settings): void {
+    this.appSettings.store = data;
+  }
+
+  public setChangelogData(data): void {
+    this._changelog.store = data;
+  }
+
+  public get changelog() {
+    return this._changelog.store;
+  }
 }