Added wizard, added new project, changed compile layout

gafert · Jan 23, 2021 · d164227 · d164227
1 parent cb75aeb
commit d164227
Show file tree

Hide file tree

Showing 35 changed files with 972 additions and 577 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -24,7 +24,7 @@
         "project": [
           "./main_renderer/tsconfig.app.json",
           "./main_renderer/tsconfig.spec.json",
-          "tsconfig-serve.json"
+          "tsconfig.electron.json"
         ],
         "sourceType": "module",
         "ecmaFeatures": {

diff --git a/main.ts b/main.ts
@@ -1,22 +1,35 @@
-import { app, BrowserWindow, screen } from 'electron';
+import { app, BrowserWindow, ipcMain, screen } from 'electron';
 import * as path from 'path';
 import * as url from 'url';
 
 let mainWindow: BrowserWindow = null;
-const args = process.argv.slice(1),
-  serve = args.some((val) => val === '--serve');
+const args = process.argv.slice(1);
+const serve = args.some((val) => val === '--serve');
+let wizardSettings;
 
 function createWindow(): BrowserWindow {
   const size = screen.getPrimaryDisplay().workAreaSize;
 
+  wizardSettings = {
+    x: Math.floor(size.width / 2 - 700 / 2),
+    y: Math.floor(size.height / 2 - 500 / 2),
+    width: 700,
+    height: 500,
+    resizable: false,
+    maximizable: false,
+    fullscreenable: false
+  }
+
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    x: 0,
-    y: 0,
-    width: size.width,
-    height: size.height,
-    minWidth: 800,
-    minHeight: 600,
+    x: wizardSettings.x,
+    y: wizardSettings.y,
+    width: wizardSettings.width,
+    height: wizardSettings.height,
+    maximizable: wizardSettings.maximizable,
+    resizable: wizardSettings.resizable,
+    fullscreenable: wizardSettings.fullscreenable,
+    backgroundColor: '#1a1b1c',
     autoHideMenuBar: true,
     webPreferences: {
       enableRemoteModule: true,
@@ -66,6 +79,24 @@ function createWindow(): BrowserWindow {
   return mainWindow;
 }
 
+ipcMain.on('main-window-home', (event, arg) => {
+  const display = screen.getPrimaryDisplay();
+  const maxSize = display.workAreaSize;
+  mainWindow.setPosition(0,0);
+  mainWindow.setSize(maxSize.width, maxSize.height);
+  mainWindow.setResizable(true);
+  mainWindow.setMaximizable(true);
+  mainWindow.setFullScreenable(true);
+})
+
+ipcMain.on('main-window-wizard', (event, arg) => {
+  console.log(wizardSettings);
+  mainWindow.setPosition(wizardSettings.x,wizardSettings.y);
+  mainWindow.setSize(wizardSettings.width, wizardSettings.height);
+  mainWindow.setResizable(wizardSettings.resizable);
+  mainWindow.setMaximizable(wizardSettings.maximizable);
+  mainWindow.setFullScreenable(wizardSettings.fullscreenable);
+})
 
 try {
   // This method will be called when Electron has finished

diff --git a/main_renderer/app/app.module.ts b/main_renderer/app/app.module.ts
@@ -1,16 +1,16 @@
 import 'reflect-metadata';
 import '../polyfills';
 
-import {BrowserModule} from '@angular/platform-browser';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {NgModule} from '@angular/core';
-import {HttpClientModule} from '@angular/common/http';
-import {AppComponent} from './app.component';
-import {CommonModule} from "@angular/common";
-import {popperVariation, TippyModule, withContextMenuVariation} from "@ngneat/helipopper";
-import {Props} from "tippy.js";
-import {FormsModule} from "@angular/forms";
-import {RouterModule, Routes} from "@angular/router";
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { AppComponent } from './app.component';
+import { CommonModule } from '@angular/common';
+import { popperVariation, TippyModule, withContextMenuVariation } from '@ngneat/helipopper';
+import { Props } from 'tippy.js';
+import { FormsModule } from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
 
 const tooltipVariation1: Partial<Props> = {
   theme: 'light',
@@ -23,11 +23,12 @@ const tooltipVariation1: Partial<Props> = {
 const routes: Routes = [
   {
     path: '',
-    redirectTo: 'home',
+    redirectTo: 'wizard',
     pathMatch: 'full',
   },
   {path: 'home', loadChildren: () => import('./home/home.module').then((m) => m.HomeModule)},
   {path: 'settings', loadChildren: () => import('./settings/settings.module').then((m) => m.SettingsModule)},
+  {path: 'wizard', loadChildren: () => import('./wizard/wizard.module').then((m) => m.WizardModule)},
 ];
 
 @NgModule({

diff --git a/main_renderer/app/components/setting/setting.component.scss b/main_renderer/app/components/setting/setting.component.scss
@@ -10,7 +10,7 @@
   overflow: scroll;
   font-size: inherit;
   height: 2em;
-  border-radius: 0.7em;
+  border-radius: 0.4em;
 
   &:focus {
     outline: none;

diff --git a/main_renderer/app/home/compile/compile.component.html b/main_renderer/app/home/compile/compile.component.html
@@ -1,47 +1,41 @@
-<div class="compile-tab-header">
-  <button mat-flat-button color="accent" [disabled]="compiling" (click)="compile()" style="margin-left: 0.5em;">Compile<i class="fas fa-play" style="margin-left: 0.5em; vertical-align: unset"></i></button>
-</div>
-
-<div class="compile-container">
-  <div class="box-container" style="width: 20em;margin-bottom: -1px">
-    <div class="box" style="height: calc(50% - 1px)">
-      <div class="box--header">
-        Sources
-      </div>
-      <div class="text-box">
-        <div *ngFor="let file of filesInFolder" class="file" (click)="clickFile($event, file)">{{file}}</div>
-      </div>
+<div class="sidebar">
+  <div class="box">
+    <div class="header">
+      Sources
     </div>
-    <div style="text-align: center;">
-    </div>
-    <div class="box" style="height: calc(50% - 2px)">
-      <div class="box--header">
-        Terminal Output
-      </div>
-      <div #terminalOutputElement class="text-box"
-           style="white-space: pre-wrap; font-family: 'Roboto Mono'">{{terminalOutput}}</div>
+    <div class="text-box">
+      <div *ngFor="let file of filesInFolder" class="file" (click)="clickFile($event, file)">{{file}}</div>
     </div>
   </div>
 
-  <div style="height: 100%; flex-grow: 2; flex-basis: 0; min-width: 30em">
-    <div class="file-bar">
-      <div class="file-bar-bottomer">
-        <div class="tabs">
-          <button *ngIf="activeFile" selected=true>{{activeFile}}
-            <i *ngIf="fileIsSavable" style="margin-left: 0.5em; font-size: 0.9em;"
-               class="fas fa-pen"></i></button>
-        </div>
-      </div>
+  <div class="box">
+    <div class="header">
+      Terminal Output
     </div>
-    <div #fileAreaContainer class="file-area-container">
-      <ngx-codemirror style="width: 100%; height: 100%"
-                      [(ngModel)]="fileContent"
-                      (ngModelChange)="fileContentChanged($event)"
-                      [options]="editorOptions"
-                      #codemirrorComponent
-      ></ngx-codemirror>
+    <div #terminalOutputElement class="text-box"
+         style="white-space: pre-wrap; font-family: 'Roboto Mono'">{{terminalOutput}}</div>
+  </div>
+</div>
+
+<div class="editor">
+  <div class="control">
+    <div class="title"><span>Compile</span></div>
+    <div class="actions"><button mat-flat-button color="accent">Compile</button></div>
+    <div class="tabs">
+      <button *ngIf="activeFile" selected=true>{{activeFile}}
+        <i *ngIf="fileIsSavable" style="margin-left: 0.5em; font-size: 0.9em;"
+           class="fas fa-pen"></i></button>
     </div>
   </div>
+
+  <div class="content" #fileAreaContainer>
+    <ngx-codemirror style="width: 100%; height: 100%"
+                    [(ngModel)]="fileContent"
+                    (ngModelChange)="fileContentChanged($event)"
+                    [options]="editorOptions"
+                    #codemirrorComponent
+    ></ngx-codemirror>
+  </div>
 </div>
 
 

diff --git a/main_renderer/app/home/compile/compile.component.scss b/main_renderer/app/home/compile/compile.component.scss
@@ -1,32 +1,30 @@
 @import "../../../import";
 
-.compile-tab-header {
-  background-color: $grey3;
-  border: $border;
-  height: 3em;
-  width: 100%;
+:host {
   display: flex;
-  align-items: center;
+  height: 100%;
 }
 
-.compile-container {
-  height: calc(100% - 3em);
+.sidebar {
+  flex: 0 0 $gridWidth * 2;
   display: flex;
-}
-
-.box-container {
-  overflow-y: scroll;
+  flex-direction: column;
 
   .box {
     outline: $border;
     //margin-top: 1px;
     margin-left: 1px;
-    margin-right: 2px;
+    margin-right: 1px;
     margin-bottom: 1px;
     background-color: $grey3;
-    &--header {
+    flex: 1 1 auto;
+
+    .header {
       border-bottom: $border;
       padding: 0.5em;
+      height: 2em;
+      font-size: large;
+      font-weight: bold;
       align-items: center;
       display: flex;
       justify-content: space-between;
@@ -49,27 +47,24 @@
   }
 }
 
-.file-bar {
-  height: 3em;
-  background: $grey2;
+.editor {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  background: $grey3;
+  border-right: $border;
+  border-top: $border;
+  margin-top: -1px;
   position: relative;
 
-  .file-bar-bottomer {
-    position: absolute;
-    bottom: 0;
-    left: 4em;
+  .content {
+    flex: 1 1 auto;
+    display: flex;
+    background: $grey3;
+    border-right: $border;
   }
 }
 
-.file-area-container {
-  height: calc(100% - 3em);
-  background: $grey3;
-  display: flex;
-  border-top: $border;
-  border-right: $border;
-  border-bottom: $border;
-}
-
 .option-menu {
   position: absolute;
   font-size: 0.9em;