style(lesy-pilot-ui): redesign pilot dashboard

lokesh-coder · lokesh-coder · commit 349d50960cde · 2020-09-27T20:40:21.000+05:30
diff --git a/packages/misc/pilot-ui/src/app/components/command/command.template.html b/packages/misc/pilot-ui/src/app/components/command/command.template.html
@@ -1,9 +1,9 @@
-<div class=" bg-white rounded-xl border border-gray-400 overflow-hidden">
+<div class="bg-white overflow-hidden">
   <div class="flex p-6 items-center">
-    <i class="ri-fire-fill text-4xl mr-4 text-vio-100"></i>
+    <i class="ri-terminal-box-fill text-4xl mr-4 text-violet"></i>
     <div class="flex-grow leading-tight">
       <h1
-        class="text-capitalize font-bold text-vio-700 text-3xl flex items-center font-display"
+        class="text-capitalize font-bold text-violet text-3xl flex items-center font-display"
       >
         {{ command.name }}
         <ng-container *ngIf="command.main">
@@ -21,7 +21,7 @@
     </div>
     <div class="flex">
       <i
-        class="ri-terminal-window-fill text-2xl mr-3 text-gray-700 cursor-pointer  hover:text-violet"
+        class="ri-terminal-window-fill text-2xl mr-3 text-gray-700 cursor-pointer hover:text-violet"
         (click)="toggleConsole()"
         [tooltip]="'Toggle console panel'"
       ></i>
diff --git a/packages/misc/pilot-ui/src/app/components/console/console.template.html b/packages/misc/pilot-ui/src/app/components/console/console.template.html
@@ -3,7 +3,7 @@
     class="w-full shadow-2xl subpixel-antialiased rounded h-full border-black mx-auto"
   >
     <div
-      class="flex items-center h-6 rounded-t bg-gray-100 border-b border-gray-500 text-center text-black fixed w-full"
+      class="flex items-center h-6 bg-gray-100 border-b border-gray-500 text-center text-black fixed w-full"
       id="headerTerminal"
     >
       <div
diff --git a/packages/misc/pilot-ui/src/app/components/footer/footer.component.ts b/packages/misc/pilot-ui/src/app/components/footer/footer.component.ts
@@ -27,8 +27,8 @@ export class FooterComponent {
 
   @Select((state) => {
     const position = state.common.consolePosition;
-    if (position === "vertical") return "ri-layout-bottom-line";
-    else return "ri-layout-right-line";
+    if (position === "vertical") return "ri-layout-right-line";
+    else return "ri-layout-bottom-line";
   })
   consolePositionClassName$: Observable<any>;
 
diff --git a/packages/misc/pilot-ui/src/app/components/header/header.component.ts b/packages/misc/pilot-ui/src/app/components/header/header.component.ts
@@ -14,7 +14,7 @@ export class HeaderComponent implements OnInit {
   ngOnInit() {
     this.menuItems = [
       { name: "Home", path: "/", icon: "ri-home-4-line" },
-      { name: "Projects", path: "/projects", icon: "ri-folder-line" },
+      { name: "Workspace", path: "/projects", icon: "ri-folder-line" },
       { name: "Run", path: "/run", icon: "ri-terminal-line" },
       { name: "Config", path: "/config", icon: "ri-settings-5-line" },
       { name: "Help", path: "/help", icon: "ri-questionnaire-line" },
diff --git a/packages/misc/pilot-ui/src/app/components/header/header.template.html b/packages/misc/pilot-ui/src/app/components/header/header.template.html
@@ -1,9 +1,9 @@
 <nav
-  class="bg-white flex border-bottom-2 border-b border-gray-300 mb-5"
+  class="bg-white flex border-bottom-2 border-b border-gray-300"
   *ngIf="webConfig$ | async as config"
 >
   <div class="container mx-auto" *ngIf="config.pilot">
-    <div class="flex flex-wrap items-center">
+    <div class="flex flex-wrap items-center px-6 py-4">
       <div class="w-full sm:w-1/3 flex items-center p-5 sm:p-0 justify-start">
         <i class="ri-dashboard-line mr-3 text-xl text-violet"></i>
         <a class="font-semibold text-gray-700" href="#"
@@ -22,14 +22,14 @@
             *ngFor="let menuItem of menuItems"
             routerLinkActive="active"
             [routerLinkActiveOptions]="{ exact: true }"
-            class="px-3 border-r border-gray-300 w-full sm:w-20 flex justify-center"
+            class="px-4"
           >
             <a
-              class="group block py-2 hover:no-underline hover:text-violet items-center text-xs text-gray-500 uppercase w-full sm:w-auto text-center"
+              class="group flex justify-center py-2 hover:no-underline hover:text-violet items-center text-gray-600 w-full sm:w-auto text-center"
               [routerLink]="menuItem.path"
             >
               <i
-                class="{{menuItem.icon+' mr-1 text-xl text-gray-900 group-hover:text-vio-500 block text-center'}}"
+                class="{{menuItem.icon+' leading-4 mr-1 text-lg text-gray-500 group-hover:text-vio-500  text-center'}}"
               ></i>
               {{menuItem.name}}</a
             >
diff --git a/packages/misc/pilot-ui/src/app/components/heading/heading.component.ts b/packages/misc/pilot-ui/src/app/components/heading/heading.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+@Component({
+  selector: "pilot-heading",
+  templateUrl: "./heading.template.html",
+})
+export class HeadingComponent {
+  @Input() h1: string;
+  @Input() p: string;
+}
diff --git a/packages/misc/pilot-ui/src/app/components/heading/heading.template.html b/packages/misc/pilot-ui/src/app/components/heading/heading.template.html
@@ -0,0 +1,4 @@
+<div class="my-10 text-center">
+  <h1 class="font-display text-violet text-3xl">{{h1}}</h1>
+  <p class="text-base text-gray-600">{{p}}</p>
+</div>
diff --git a/packages/misc/pilot-ui/src/app/components/sidemenu/sidemenu.template.html b/packages/misc/pilot-ui/src/app/components/sidemenu/sidemenu.template.html
@@ -1,4 +1,4 @@
-<div class="mb-4 mx-10" *ngFor="let group of commandGroups">
+<div class="my-4 mx-2" *ngFor="let group of commandGroups">
   <h6 class="uppercase text-gray-500 font-semibold mb-3 text-sm ml-10">
     {{ group[0] }}
   </h6>
@@ -15,9 +15,9 @@ <h6 class="uppercase text-gray-500 font-semibold mb-3 text-sm ml-10">
 
 <ng-template #nodeTemplateRef let-command>
   <div
-    class="group flex items-center px-3 py-3 border-b border-gray-300 cursor-pointer hover:bg-gray-300 rounded-lg outline-none"
+    class="group flex items-center px-3 py-3 cursor-pointer hover:bg-gray-300 rounded-lg outline-none"
     routerLink="/commands/{{ createPath(command) }}"
-    routerLinkActive="highlight bg-violet shadow-lg highlight-hover:bg-violet"
+    routerLinkActive="highlight bg-violet highlight-hover:bg-violet"
   >
     <i
       class="ri-play-fill mr-3 group-hover:text-gray-700 highlight:text-yellow-400 highlight-hover:text-yellow-400 text-gray-500"
diff --git a/packages/misc/pilot-ui/src/app/modules/query/components/form/form.template.html b/packages/misc/pilot-ui/src/app/modules/query/components/form/form.template.html
@@ -4,10 +4,7 @@
   class="d-flex flex-column"
   id="pilotForm"
 >
-  <div
-    class="bg-white rounded-xl border border-gray-400 mt-5 p-6 highlight:border-transparent highlight:mt-0"
-    *ngIf="questions.length > 0"
-  >
+  <div class="bg-white mt-5 p-6 highlight:mt-0" *ngIf="questions.length > 0">
     <h5 class="mb-6 text-lg text-gray-800 font-medium highlight:hidden">
       Arguments
     </h5>
@@ -25,7 +22,7 @@ <h5 class="mb-6 text-lg text-gray-800 font-medium highlight:hidden">
 
   <button
     type="submit"
-    class="flex mx-auto bg-green-500 py-4 px-6 mt-6 rounded text-white font-semibold shadow-lg focus:shadow-none disabled:opacity-50 focus:outline-none highlight:mt-0"
+    class="flex mx-auto bg-green-500 py-3 px-6 mt-6 rounded-lg text-white font-semibold shadow-lg focus:shadow-none disabled:opacity-50 focus:outline-none highlight:mt-0"
     [disabled]="!form.valid"
   >
     <i class="ri-send-plane-2-line mr-2"></i> Run command
diff --git a/packages/misc/pilot-ui/src/app/modules/query/components/input/input.template.html b/packages/misc/pilot-ui/src/app/modules/query/components/input/input.template.html
@@ -9,7 +9,7 @@
     >
     <div [ngSwitch]="question.controlType">
       <div
-        class="flex flex-wrap items-stretch w-full mb-4 relative focus-within:border-vio-500 border border-gray-500 bg-gray-100 rounded-md"
+        class="flex flex-wrap items-stretch w-full mb-4 relative focus-within:border-gray-600 border border-gray-400 bg-gray-100 rounded-md"
         *ngSwitchCase="'textbox'"
       >
         <div class="flex">
diff --git a/packages/misc/pilot-ui/src/app/pages/commands/commands.template.html b/packages/misc/pilot-ui/src/app/pages/commands/commands.template.html
@@ -1,31 +1,35 @@
-<div class="container mx-auto mt-12">
-  <div class="flex flex-wrap">
-    <div class="w-full lg:w-4/12 px-6" [class.parent]="showMobileMenu">
-      <div
-        class="bg-gray-200 rounded-lg border border-gray-400 shadow-inner text-gray-600 p-3 mb-10 text-center cursor-pointer select-none lg:hidden"
-        (click)="showMobileMenu=!showMobileMenu"
-      >
-        View command list
-      </div>
-      <pilot-sidemenu
-        [commands]="commands"
-        class="hidden lg:block parent:block"
-      ></pilot-sidemenu>
+<div class="flex flex-wrap flex-1">
+  <div
+    class="w-full lg:w-4/12 px-6 md:max-w-sm bg-gray-100"
+    [class.parent]="showMobileMenu"
+  >
+    <div
+      class="bg-gray-200 rounded-lg border border-gray-400 shadow-inner text-gray-600 p-3 mb-10 text-center cursor-pointer select-none lg:hidden"
+      (click)="showMobileMenu=!showMobileMenu"
+    >
+      View command list
     </div>
-    <div class="w-full lg:w-8/12 px-6">
+    <pilot-sidemenu
+      [commands]="commands"
+      class="hidden lg:block parent:block"
+    ></pilot-sidemenu>
+  </div>
+  <div class="flex-1 px-6 flex justify-center pt-6">
+    <div class="w-full md:w-3/6 md:min-w-42">
       <pilot-command
         *ngIf="selectedCommand"
         [config]="config"
         [command]="selectedCommand"
       ></pilot-command>
       <div
         *ngIf="!selectedCommand"
-        class="flex items-center  flex-col rounded-lg p-6 mt-10"
+        class="flex items-center flex-col rounded-lg p-6 mt-10"
       >
+        <pilot-heading
+          h1="Get started"
+          p="Select any command in the left sidebar to view or run"
+        ></pilot-heading>
         <img src="assets/svg/choose-cmd.svg" />
-        <h3 class="text-gray-600 text-base font-display">
-          Click on the command to run!
-        </h3>
       </div>
     </div>
   </div>
diff --git a/packages/misc/pilot-ui/src/app/pages/config/config.template.html b/packages/misc/pilot-ui/src/app/pages/config/config.template.html
@@ -1,32 +1,35 @@
 <div class="container mx-auto">
   <div *ngIf="config">
     <div class="w-full sm:w-2/3 mx-auto px-6 sm:px-0">
-      <h1 class="font-bold font-display text-2xl text-vio-900">
-        Configurations
-      </h1>
-      <div class="bg-white shadow-md rounded my-6">
-        <table class="text-left w-full border-collapse">
+      <pilot-heading
+        h1="Configurations"
+        p="View project level pilot settings"
+      ></pilot-heading>
+      <div class="bg-white rounded my-6 flex justify-center">
+        <table class="text-left w-3/6 border-collapse">
           <thead>
-            <tr class="bg-gray-200">
+            <tr>
               <th
-                class="py-4 px-6 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light"
+                class="py-4 px-6 font-semibold text-gray-700 border-b border-grey-light"
               >
                 Config name
               </th>
               <th
-                class="py-4 px-6 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light"
+                class="py-4 px-6 font-semibold text-gray-700 border-b border-grey-light text-right"
               >
                 Value
               </th>
             </tr>
           </thead>
           <tbody>
             <tr class="hover:bg-gray-100" *ngFor="let conf of config">
-              <td class="py-4 px-6 border-b border-grey-light text-gray-600">
+              <td
+                class="py-4 px-6 border-b border-grey-light text-gray-500 font-mono"
+              >
                 {{conf[0]}}
               </td>
               <td
-                class="py-4 px-6 border-b border-grey-light font-semibold text-yellow-800"
+                class="py-4 px-6 border-b border-grey-light text-violet text-right"
               >
                 {{conf[1]}}
               </td>
diff --git a/packages/misc/pilot-ui/src/app/pages/help/help.template.html b/packages/misc/pilot-ui/src/app/pages/help/help.template.html
@@ -1,3 +1,12 @@
-<p>
-  help works!
-</p>
+<div class="container mx-auto my-10 px-5 sm:px-0">
+  <pilot-heading
+    h1="Help"
+    p="Pilot setup, configs and workspace related help"
+  ></pilot-heading>
+  <div class="w-full sm:w-2/3 mx-auto px-6 sm:px-0">
+    <h3>Change config</h3>
+    <h3>Add projects to workspace</h3>
+    <h3>Hide commands in pilot</h3>
+    <h3>Group commands</h3>
+  </div>
+</div>
diff --git a/packages/misc/pilot-ui/src/app/pages/projects/projects.page.ts b/packages/misc/pilot-ui/src/app/pages/projects/projects.page.ts
@@ -1,40 +1,38 @@
 import { Component, OnInit } from "@angular/core";
-import { CommandsService } from "../../services/commands.service";
-import { map } from "rxjs/operators";
-import { Observable, combineLatest } from "rxjs";
-import { ActivatedRoute } from "@angular/router";
+import { Observable } from "rxjs";
+import { Router } from "@angular/router";
 import { Select, Store } from "@ngxs/store";
-import { ProjectsService } from "../../services/projects.service";
 import { LoadProjects } from "../../store/actions/projects.actions";
 import { SelectedProject } from "../../store/actions/project.actions";
 import { LoadConfig } from "../../store/actions/common.actions";
+import { PilotState, ProjectModel } from "../../pilot.models";
 
 @Component({
   selector: "pilot-projects-page",
   templateUrl: "./projects.template.html",
 })
 export class ProjectsPage implements OnInit {
-  config: object;
-  projects: any[];
-  selectedProject;
+  currentProjectName = "";
 
-  @Select((state) => state.projects)
-  projects$: Observable<string[]>;
+  @Select((state: PilotState) => state.projects)
+  projects$: Observable<ProjectModel[]>;
 
-  @Select((state) => state.common.config)
+  @Select((state: PilotState) => state.common.config)
   config$: Observable<object>;
 
-  constructor(
-    private store: Store,
-    private route: ActivatedRoute,
-    private ps: ProjectsService,
-  ) {
+  constructor(private store: Store, private router: Router) {
     this.store.dispatch(new LoadProjects());
   }
 
-  ngOnInit() {}
-  switchProject(name) {
-    this.store.dispatch(new SelectedProject(name));
+  ngOnInit() {
+    this.currentProjectName = this.store.selectSnapshot<string>(
+      (state: PilotState) => state.project.name,
+    );
+  }
+  switchProject(project: ProjectModel) {
+    this.store.dispatch(new SelectedProject(project));
     this.store.dispatch(new LoadConfig());
+
+    this.router.navigateByUrl("/");
   }
 }
diff --git a/packages/misc/pilot-ui/src/app/pages/projects/projects.template.html b/packages/misc/pilot-ui/src/app/pages/projects/projects.template.html
@@ -1,16 +1,22 @@
 <div class="container mx-auto">
   <div class="w-full sm:w-2/3 mx-auto px-6 sm:px-0">
-    <h1 class="font-bold font-display text-3xl text-vio-900 my-8">
-      Projects
-    </h1>
-    <div
-      *ngFor="let project of (projects$|async)"
-      class="m-3 cursor-pointer p-5 bg-gray-200 rounded-lg text-gray-900 inline-flex items-center hover:bg-gray-300 leading-none"
-      (click)="switchProject(project)"
-    >
-      <i class="ri-folder-5-line mr-3 text-xl font-medium"></i>
-      <span>{{project.name}}</span>
-      <span class="opacity-50 ml-3 text-sm">v{{project.version}}</span>
+    <pilot-heading
+      h1="Workspace"
+      p="List of all globally installed lesy projects"
+    ></pilot-heading>
+    <div class="text-center">
+      <div
+        *ngFor="let project of (projects$|async)"
+        class="m-3 cursor-pointer p-5 bg-gray-200 rounded-lg text-gray-900 inline-flex items-center hover:bg-gray-300 leading-none"
+        (click)="switchProject(project)"
+      >
+        <i class="ri-folder-5-line mr-3 text-xl font-medium"></i>
+        <span>{{project.name}}</span>
+        <span class="opacity-50 ml-3 text-sm">v{{project.version}}</span>
+        <ng-container *ngIf="currentProjectName === project.name"
+          ><i class="ri-checkbox-circle-fill text-violet text-xl ml-2"></i
+        ></ng-container>
+      </div>
     </div>
   </div>
 </div>
diff --git a/packages/misc/pilot-ui/src/app/pages/run/run.template.html b/packages/misc/pilot-ui/src/app/pages/run/run.template.html
@@ -1,20 +1,26 @@
 <div class="container mx-auto my-10 px-5 sm:px-0">
-  <div
-    class="flex flex-wrap items-stretch w-full mb-4 relative focus-within:border-gray-500 border border-gray-400 rounded-sm bg-white p-6 rounded-lg"
-  >
-    <div class="flex">
-      <span
-        class="flex items-center leading-normal bg-white rounded rounded-r-none  px-2 whitespace-no-wrap text-grey-dark text-sm"
-        ><i class="ri-terminal-box-fill text-3xl text-vio-500 mr-5"></i
-      ></span>
+  <pilot-heading
+    h1="Runner"
+    p="Run project level shell commands"
+  ></pilot-heading>
+  <div class="w-full sm:w-2/3 mx-auto px-6 sm:px-0">
+    <div
+      class="flex flex-wrap items-stretch w-full mb-4 relative border border-transparent focus-within:border-gray-300 bg-gray-100 p-6 rounded-lg"
+    >
+      <div class="flex">
+        <span
+          class="flex items-center leading-normal bg-transparent rounded rounded-r-none px-2 whitespace-no-wrap text-grey-dark text-sm"
+          ><i class="ri-terminal-box-fill text-3xl text-vio-500 mr-5"></i
+        ></span>
+      </div>
+      <input
+        type="text"
+        placeholder="run shell command..."
+        #val
+        (keydown.enter)="runCommand(val)"
+        class="flex-shrink flex-grow leading-normal w-px flex-1 border-0 h-10 rounded rounded-l-none pl-0 pr-2 relative outline-none bg-transparent font-semibold"
+      />
     </div>
-    <input
-      type="text"
-      placeholder="run shell command..."
-      #val
-      (keydown.enter)="runCommand(val)"
-      class="flex-shrink flex-grow flex-auto leading-normal w-px flex-1 border-0 h-10 rounded rounded-l-none pl-0 pr-2 relative outline-none bg-white font-semibold"
-    />
   </div>
 </div>
 <div class="runners-container row">
diff --git a/packages/misc/pilot-ui/src/app/pilot.models.ts b/packages/misc/pilot-ui/src/app/pilot.models.ts
diff --git a/packages/misc/pilot-ui/src/app/pilot.module.ts b/packages/misc/pilot-ui/src/app/pilot.module.ts
diff --git a/packages/misc/pilot-ui/src/assets/svg/choose-cmd.svg b/packages/misc/pilot-ui/src/assets/svg/choose-cmd.svg
diff --git a/packages/misc/pilot-ui/src/index.html b/packages/misc/pilot-ui/src/index.html
diff --git a/packages/misc/pilot-ui/src/styles.scss b/packages/misc/pilot-ui/src/styles.scss
diff --git a/packages/misc/pilot-ui/src/tailwind.scss b/packages/misc/pilot-ui/src/tailwind.scss
diff --git a/packages/misc/pilot-ui/tailwind.config.js b/packages/misc/pilot-ui/tailwind.config.js

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`class="w-full shadow-2xl subpixel-antialiased rounded h-full border-black mx-auto"`
`4`	`4`	`>`
`5`	`5`	`<div`
`6`		`- class="flex items-center h-6 rounded-t bg-gray-100 border-b border-gray-500 text-center text-black fixed w-full"`
	`6`	`+ class="flex items-center h-6 bg-gray-100 border-b border-gray-500 text-center text-black fixed w-full"`
`7`	`7`	`id="headerTerminal"`
`8`	`8`	`>`
`9`	`9`	`<div`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`>`
`10`	`10`	`<div [ngSwitch]="question.controlType">`
`11`	`11`	`<div`
`12`		`- class="flex flex-wrap items-stretch w-full mb-4 relative focus-within:border-vio-500 border border-gray-500 bg-gray-100 rounded-md"`
	`12`	`+ class="flex flex-wrap items-stretch w-full mb-4 relative focus-within:border-gray-600 border border-gray-400 bg-gray-100 rounded-md"`
`13`	`13`	`*ngSwitchCase="'textbox'"`
`14`	`14`	`>`
`15`	`15`	`<div class="flex">`