Merge pull request #30 from leaphy-robotics/theming

Theming
leaphy-robotics · Jan 12, 2021 · 7645894 · 7645894
2 parents c9b46ac + 78859d8
commit 7645894
Show file tree

Hide file tree

Showing 6 changed files with 232 additions and 113 deletions.
diff --git a/angular.json b/angular.json
@@ -102,17 +102,12 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.scss",
               "./node_modules/bootstrap/@fortawesome/fontawesome-free/css/all.css"
             ],
-            "scripts": [
-
-            ]
+            "scripts": []
           }
         },
         "lint": {
@@ -123,9 +118,7 @@
               "tsconfig.spec.json",
               "e2e/tsconfig.json"
             ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         },
         "e2e": {
@@ -144,4 +137,4 @@
     }
   },
   "defaultProject": "leaphy-client"
-}
+}
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -1,51 +1,101 @@
-<mat-toolbar class="shadow-sm" style="background-color:#003a96" id="header-container">
-  <span><h2 style="font-family: 'Maven Pro'; font-weight: bolder; color:white; font-size:2.1rem;">EASYBLOQS</h2></span>
-  <div>
-    <a class="header-text ml-1" [matMenuTriggerFor]="projectMenu" *ngIf="appState.selectedRobotType$ | async">{{ 'PROJECT' | translate }}</a>
-    <a class="header-text ml-3" [matMenuTriggerFor]="helpMenu" *ngIf="appState.selectedRobotType$ | async">{{ 'HELP' | translate }}</a>
-  </div>
+<mat-toolbar class="shadow-sm header-container" id="header-container">
+  <img src="./assets/leaphy-logo.svg" class="header-logo" />
+  <div class="flex-header">
+    <div class="flex-buttons">
+      <button
+        mat-stroked-button
+        [matMenuTriggerFor]="projectMenu"
+        *ngIf="appState.selectedRobotType$ | async"
+      >
+        {{ "PROJECT" | translate }}
+      </button>
+      <button
+        mat-stroked-button
+        [matMenuTriggerFor]="helpMenu"
+        *ngIf="appState.selectedRobotType$ | async"
+      >
+        {{ "HELP" | translate }}
+      </button>
+    </div>
 
+    <div class="flex-buttons" *ngIf="appState.selectedRobotType$ | async">
+      <button mat-stroked-button (click)="onSaveWorkspaceClicked()">
+        <mat-icon>save</mat-icon><span>opslaan</span>
+      </button>
 
-  <div class="centered-div" *ngIf="appState.selectedRobotType$ | async">
-    <button class="btn btn-outline-primary rounded-pill workspace-button" (click)="onSaveWorkspaceClicked()">
-      <mat-icon>save</mat-icon>
-    </button>
-    <button class="btn btn-outline-primary rounded-pill workspace-button" (click)="onUndoClicked()">
-      <mat-icon>undo</mat-icon>
-    </button>
-    <button class="btn btn-outline-primary rounded-pill workspace-button"  (click)="onRedoClicked()">
-      <mat-icon>redo</mat-icon>
-    </button>
-  </div>
+      <button mat-stroked-button class="icon-button" (click)="onUndoClicked()">
+        <mat-icon>undo</mat-icon>
+      </button>
 
-  <button class="btn btn-outline-primary rounded-pill upload-button float-right mr-1"  [class.spinner]="isBackEndBusy$ | async" *ngIf="appState.selectedRobotType$ | async"
-          (click)="onUploadClicked()" [disabled]="!(canUpload$ | async)">{{ 'UPLOAD' | translate }}</button>
+      <button mat-stroked-button class="icon-button" (click)="onRedoClicked()">
+        <mat-icon>redo</mat-icon>
+      </button>
+    </div>
+
+    <div>
+      <button
+        mat-flat-button
+        *ngIf="appState.selectedRobotType$ | async"
+        (click)="onUploadClicked()"
+        [disabled]="!(canUpload$ | async)"
+      >
+        {{ "UPLOAD" | translate }}
+      </button>
+    </div>
+  </div>
 </mat-toolbar>
 
 <mat-menu #projectMenu="matMenu" class="matmenus">
-  <button mat-menu-item [disabled]="!(appState.selectedRobotType$ | async)" (click)="onNewProjectClicked()">
+  <button
+    mat-menu-item
+    [disabled]="!(appState.selectedRobotType$ | async)"
+    (click)="onNewProjectClicked()"
+  >
     <mat-icon>insert_drive_file</mat-icon>
-    <span>{{ 'NEW' | translate }}</span>
+    <span>{{ "NEW" | translate }}</span>
   </button>
-  <button mat-menu-item [disabled]="!(appState.selectedRobotType$ | async)" (click)="onLoadWorkspaceClicked()">
+  <button
+    mat-menu-item
+    [disabled]="!(appState.selectedRobotType$ | async)"
+    (click)="onLoadWorkspaceClicked()"
+  >
     <mat-icon>folder</mat-icon>
-    <span>{{ 'OPEN' | translate }}</span>
+    <span>{{ "OPEN" | translate }}</span>
   </button>
-  <span mat-menu-item disabled *ngIf="blocklyState.projectName$ | async as projectName">{{projectName}}</span>
-  <button mat-menu-item [disabled]="!(appState.selectedRobotType$ | async) || !(blocklyState.projectFilePath$ | async)"
-    (click)="onSaveWorkspaceClicked()">
+  <span
+    mat-menu-item
+    disabled
+    *ngIf="blocklyState.projectName$ | async as projectName"
+    >{{ projectName }}</span
+  >
+  <button
+    mat-menu-item
+    [disabled]="
+      !(appState.selectedRobotType$ | async) ||
+      !(blocklyState.projectFilePath$ | async)
+    "
+    (click)="onSaveWorkspaceClicked()"
+  >
     <mat-icon>save</mat-icon>
-    <span>{{ 'SAVE' | translate }}</span>
+    <span>{{ "SAVE" | translate }}</span>
   </button>
-  <button mat-menu-item [disabled]="!(appState.selectedRobotType$ | async)" (click)="onSaveWorkspaceAsClicked()">
+  <button
+    mat-menu-item
+    [disabled]="!(appState.selectedRobotType$ | async)"
+    (click)="onSaveWorkspaceAsClicked()"
+  >
     <mat-icon>save</mat-icon>
-    <span>{{ 'SAVEAS' | translate }}</span>
+    <span>{{ "SAVEAS" | translate }}</span>
   </button>
 </mat-menu>
 
 <mat-menu #helpMenu="matMenu" class="matmenus">
-  <button mat-menu-item [disabled]="!(appState.selectedRobotType$ | async)" (click)="onHelpClicked()">
+  <button
+    mat-menu-item
+    [disabled]="!(appState.selectedRobotType$ | async)"
+    (click)="onHelpClicked()"
+  >
     <mat-icon>help_center</mat-icon>
-    <span>{{ 'HELP_FORUM' | translate }}</span>
+    <span>{{ "HELP_FORUM" | translate }}</span>
   </button>
 </mat-menu>
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
@@ -1,79 +1,82 @@
-#title {
-  font-size: 2.4rem;
-  margin-right: 10px;
+.header-container {
+  background-color: var(--leaphy-color-primary);
 }
-.spacer {
-  flex: 1 1 auto;
-}
-.button-icon-text {
-  font-size: x-large;
-}
-.header-button {
-  margin-right: 10px;
-}
-@keyframes spinner {
-  to {transform: rotate(360deg);}
+
+.header-logo {
+  height: 18px;
+  width: auto;
 }
 
-.spinner:before {
-  content: '';
-  box-sizing: border-box;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 20px;
-  height: 20px;
-  margin-top: -10px;
-  margin-left: -10px;
-  border-radius: 50%;
-  border: 2px solid #ffffff;
-  border-top-color: #000000;
-  animation: spinner .8s linear infinite;
+button {
+  outline: none;
 }
 
-.upload-button {
-  height:auto;
-  width:20%;
-  background-color: #007bff;
-  color: white;
+[mat-stroked-button],
+[mat-flat-button] {
+  color: var(--leaphy-color-light);
+  border-color: var(--leaphy-color-secundary);
+  font-size: 12px;
+  font-weight: normal;
+  border-radius: 20px;
 }
 
-.workspace-button {
-  height:auto;
-  width:10%;
-  background-color: white;
-  color: black;
+[mat-flat-button] {
+  background-color: var(--leaphy-color-secundary);
+  border-color: none;
 }
 
-.header-text {
-  font-size: 1rem;
-  font-weight: normal;
-  display: inline;
-  color: black;
-  text-align: center;
-  transition: ease-in 1s;
-  line-height: 1.5;
-  vertical-align: middle;
+.icon-button {
+  padding: 0;
+  width: 35px;
+  height: 35px;
+  min-width: auto;
 }
 
-.header-text:hover {
-  color: #3b3b3b;
+button mat-icon + span {
+  margin-left: 10px;
 }
 
-.helper-block {
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
+.upload-button {
+  color: white;
+  min-width: 200px;
 }
 
 .matmenus {
   margin-top: 10%;
 }
 
-.centered-div {
+.flex-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 40px;
   width: 100%;
-  text-align: center;
-  display: inline-block;
-  margin: 0 auto;
 }
 
+.flex-buttons {
+  button {
+    margin: 0 10px;
+  }
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner:before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+  border-top-color: #000000;
+  animation: spinner 0.8s linear infinite;
+}
diff --git a/src/app/modules/blockly-editor/blockly-editor.page.scss b/src/app/modules/blockly-editor/blockly-editor.page.scss
@@ -15,14 +15,16 @@
 }
 
 #code-view-button {
+  outline: none;
+  background-color: var(--leaphy-color-primary);
   position: absolute;
   top: 74px;
-  right: 0px;
+  right: 10px;
   z-index: 2;
   transition: right 0.5s;
   overflow: hidden;
 }
 
 #code-view-button:hover {
   right: 10px;
-}
+}
diff --git a/src/assets/leaphy-logo.svg b/src/assets/leaphy-logo.svg