Merge pull request #33 from pinnepalliayyappa/UI-Version2

UI version2
pinnepalliayyappa · Sep 11, 2024 · 72f1a6a · 72f1a6a
2 parents 408cbc2 + e6811f5
commit 72f1a6a
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 8 deletions.
diff --git a/Frontend/src/app/UIVersion-1/main-screen/main-screen.component.css b/Frontend/src/app/UIVersion-1/main-screen/main-screen.component.css
@@ -72,3 +72,10 @@
 .active-class{
     background-color: lightgrey;
 }
+.buttonstyle{
+    background-color: lightskyblue;
+    width: 108px;
+    height: 38px;
+    border-radius: 9px;
+    font-size: 20px;
+}
diff --git a/Frontend/src/app/UIVersion-1/main-screen/main-screen.component.html b/Frontend/src/app/UIVersion-1/main-screen/main-screen.component.html
@@ -1,4 +1,4 @@
-<div class="complete">
+<div class="complete" [ngClass]="{'darktheme' : darktheme}">
     <div style="flex-basis: 5%;border-right: 1px solid #dce8e8; ">
 
     </div>
@@ -125,13 +125,30 @@ <h3 class="head" >Project Metadata:</h3>
                 </div>
             </div>
         </form>
+        <div style="height: 7%; background-color: aliceblue; display: flex; align-items: center; justify-content: center; gap: 2rem;">
+            <div>
+                <button class="buttonstyle" (click)="generateProject()">
+                   Generate
+                </button>
+            </div>
+            <div>
+                <button class="buttonstyle"  (click)="exploreProject()">
+                    Explore
+                </button>
+            </div>
+            <div>
+                <button class="buttonstyle"  (click)="shareProject()">
+                    Share
+                </button>
+            </div>
+        </div>
     </div>
     <div class="theme">
       <div [ngClass]="{'dark' : darktheme}">
-        <svg class ="imageicon" aria-hidden="true" focusable="false" data-icon="sun" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon-sun"><path fill="currentColor" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>
+        <svg class ="imageicon" style="background-color: transparent;" (click)="toggle('dark')" aria-hidden="true" focusable="false" data-icon="sun" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon-sun"><path [attr.fill]=currentColornight d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>
       </div>
-      <div [ngClass]="{'dark' : darktheme}">
-        <svg class ="imageicon" aria-hidden="true" focusable="false" data-icon="moon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon-moon"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
+      <div [ngClass]="{'dark' : !darktheme}">
+        <svg class ="imageicon" style="background-color: transparent;" (click)="toggle('light')" aria-hidden="true" focusable="false" data-icon="moon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon-moon"><path  [attr.fill]=currentColorday d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
       </div>
     </div>
 </div>  
diff --git a/Frontend/src/app/UIVersion-1/main-screen/main-screen.component.ts b/Frontend/src/app/UIVersion-1/main-screen/main-screen.component.ts
@@ -18,16 +18,18 @@ export class MainScreenComponent {
   dependencyselected: String[] = [];
   selectedprojecttype=[];
   metadataForm:FormGroup;
+  currentColorday = 'white'
+  currentColornight = 'black'
   constructor(
     private mainserviceService : MainserviceService,
     private fb: FormBuilder)
   {
     this.getformdetails();
     this.metadataForm = this.fb.group({
-        projecttype : ['',Validators.required],
-        javaversion : ['',Validators.required],
-        language : ['',Validators.required],
-        springbootversion : ['',Validators.required],
+        projecttype : [,Validators.required],
+        javaversion : [,Validators.required],
+        language : [,Validators.required],
+        springbootversion : [,Validators.required],
         groupname : ['',Validators.required],
         artifactname : ['',Validators.required],
         name : ['',Validators.required],
@@ -89,6 +91,27 @@ export class MainScreenComponent {
     });
     this.metadataForm.patchValue({dependencies: this.dependencyselected});
   }
+  generateProject(){
+
+  }
+  exploreProject(){
+
+  }
+  shareProject(){
+
+  }
+  toggle(theme:any){
+       if(theme == 'dark'){
+         this.darktheme = true;
+         this.currentColorday = 'black'
+         this.currentColornight = 'white'
+       }
+       else{
+        this.darktheme = false;
+        this.currentColorday = 'white'
+        this.currentColornight = 'black'
+       }
+  }
 }
 interface SubCategory {
   selected?:boolean