Merge pull request #4 from Myxelium/re-style

Re-style and re-organize

tools/src/app/app.component.html

@@ -1,5 +1,7 @@
+<div class="darkmode">
   <app-header></app-header>
   <div class="main-content">
     <router-outlet></router-outlet>
   </div>
   <app-footer></app-footer>
+</div>

tools/src/app/app.component.scss

@@ -2,3 +2,21 @@
     display: flex;
     justify-content: center;
 }
+
+::ng-deep {
+    .p-panel {
+      border-radius: unset !important;
+    }
+    
+    .p-panel-header {
+      background: unset !important;
+    }
+
+    .p-fileupload-header {
+      background: unset !important;
+    }
+
+    .p-fileupload {
+        background: unset !important;
+    }
+}

tools/src/app/app.component.ts

@@ -16,6 +16,9 @@ export class AppComponent {
   title = 'tools';
 
   constructor(private config: PrimeNGConfig) {
-    this.config.theme.set({ preset: Lara });
+    this.config.theme.set({ 
+      preset: Lara,
+      darkModeSelector: '.darkmode' 
+    });
   }
 }

tools/src/app/app.routes.ts

@@ -7,7 +7,7 @@ import { TextToCronComponent } from '../tools/client-side/text-to-cron/text-to-c
 import { DdsToPngComponent } from '../tools/client-side/dds-to-png/dds-to-png.component';
 import { ImageConverterComponent } from '../tools/server-side/image-converter/image-converter.component';
 import { WordCounterComponent } from '../tools/client-side/word-counter/word-counter.component';
-import { ColorPickerComponent } from '../tools/client-side/color-picker/color-picker/color-picker.component';
+import { ColorPickerComponent } from '../tools/client-side/color-picker/color-picker.component';
 
 export const routes: Routes = [
   {

tools/src/app/header/header.component.html

@@ -1,5 +1,5 @@
 <p-megamenu [model]="items">
     <ng-template pTemplate="start">
-        <img class="logotype" src="../../assets/logo-full-orange-beta.png" alt="logo" />
+        <img [ngClass]="{'logotype': true, 'darkMode': !isDarkMode}" src="../../assets/logo-full-orange-beta.png" alt="logo" />
     </ng-template>
 </p-megamenu>

tools/src/app/header/header.component.scss

@@ -1,3 +1,12 @@
 .logotype {
     width: 140px;
 }
+
+.darkMode {
+    filter: invert(1);
+}
+
+::ng-deep .p-megamenu-col-12 {
+    flex-direction: row !important;
+    display: flex !important;
+}

tools/src/app/header/header.component.ts

@@ -14,21 +14,20 @@ import { AvatarModule } from 'primeng/avatar';
 })
 export class HeaderComponent implements OnInit {
   items: MegaMenuItem[] | undefined;
+	isDarkMode: boolean = true;
 
   ngOnInit() {
+			this.isDarkMode = window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
+
       this.items = [
           {
-						label: 'Text Tools',
-						icon: 'pi pi-box',
+						label: 'Tools',
+						icon: 'pi pi-wrench',
 						items: [
 							[
 								{
+									label: 'Text Tools',
 									items: [
-											{
-													label: 'Ascii to text',
-													routerLink: 'ascii-to-text',
-													routerLinkActiveOptions: { exact: true }
-											},
 											{
 												label: 'Text counter',
 												routerLink: 'text-counter',
@@ -39,11 +38,6 @@ export class HeaderComponent implements OnInit {
 												routerLink: 'guid',
 												routerLinkActiveOptions: { exact: true }
 											},
-											{
-												label: 'Base64 Converter',
-												routerLink: 'base64-converter',
-												routerLinkActiveOptions: { exact: true }
-											},
 											{
 												label: 'Jwt decoder',
 												routerLink: 'jwt-decoder',
@@ -53,14 +47,18 @@ export class HeaderComponent implements OnInit {
 												label: 'Text to Cron Expression',
 												routerLink: 'text-to-cron',
 												routerLinkActiveOptions: { exact: true }
+											}
+									],
 								},
+								{
+									label: 'Media Tools',
+									items: [
 										{
 											label: 'Color picker',
 											routerLink: 'color-picker',
 											routerLinkActiveOptions: { exact: true }
 										}
-									],
-									
+									]
 								}
 							]
             ]
@@ -71,6 +69,7 @@ export class HeaderComponent implements OnInit {
 						items: [
 							[
 								{
+									label: 'Convert',
 									items: [
 										{
 											label: 'DDS to PNG',
@@ -81,6 +80,16 @@ export class HeaderComponent implements OnInit {
 											label: 'Image Converter',
 											routerLink: 'image-converter',
 											routerLinkActiveOptions: { exact: true }
+										},
+										{
+											label: 'Base64 Converter',
+											routerLink: 'base64-converter',
+											routerLinkActiveOptions: { exact: true }
+										},
+										{
+											label: 'Ascii to text',
+											routerLink: 'ascii-to-text',
+											routerLinkActiveOptions: { exact: true }
 										}
 									]
 								}

tools/src/app/shared/dual-textarea/dual-textarea.component.html

@@ -1,5 +1,4 @@
-<div class="card flex justify-center">
-    <p-panel [header]="title">
+<page [header]="title">
   <ng-template pTemplate="header">
     <p-tag *ngIf="isBeta" severity="warn" value="Beta"></p-tag>
   </ng-template>
@@ -20,5 +19,4 @@
     [value]="bottomValue"
     [placeholder]="bottomPlaceholder">
   </textarea>
-    </p-panel>
-</div>
+</page>

tools/src/app/shared/dual-textarea/dual-textarea.component.scss

@@ -1,8 +1,3 @@
-:host {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-    width: 96vw;
 
 .icon {
   display: flex;
@@ -15,13 +10,6 @@
     transform: rotate(90deg);
   }
 }
-
-    .card {
-        display: flex;
-        flex-direction: column;
-        width: 1140px;
-    }
-    
 .wrapper {
     display: flex;
     flex-direction: column;
@@ -59,4 +47,3 @@
   margin-right: 5px;
 }
 }
-}

tools/src/app/shared/dual-textarea/dual-textarea.component.ts

@@ -5,6 +5,7 @@ import { FloatLabelModule } from 'primeng/floatlabel';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { PanelModule } from 'primeng/panel';
 import { TagModule } from 'primeng/tag';
+import { PageComponent } from '../page/page.component';
 
 @Component({
   selector: 'app-dual-textarea',
@@ -17,7 +18,8 @@ import { TagModule } from 'primeng/tag';
     FormsModule, 
     PanelModule, 
     CommonModule,
-    TagModule
+    TagModule,
+    PageComponent
   ]
 
 })

tools/src/app/shared/page/page.component.html

@@ -0,0 +1,5 @@
+<div class="card">
+  <p-panel [header]="header">
+    <ng-content></ng-content>
+  </p-panel>
+</div>

tools/src/app/shared/page/page.component.scss

@@ -0,0 +1,20 @@
+:host {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    width: 96vw;
+    
+    .card {
+        display: flex;
+        flex-direction: column;
+        width: 1140px;
+    }
+
+    ::ng-deep .p-panel-header {
+        justify-content: unset !important;
+
+        * {
+            margin-right: 5px;
+        }
+    }
+}

tools/src/app/shared/page/page.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { PageComponent } from './page.component';
+
+describe('PageComponent', () => {
+  let component: PageComponent;
+  let fixture: ComponentFixture<PageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/app/shared/page/page.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { PanelModule } from 'primeng/panel';
+
+@Component({
+  selector: 'page',
+  templateUrl: './page.component.html',
+  styleUrls: ['./page.component.scss'],
+  standalone: true,
+  imports: [PanelModule]
+})
+export class PageComponent {
+  @Input() header: string = '';
+}

tools/src/app/shared/upload/file-converter.component.html

@@ -1,5 +1,4 @@
-<div class="card flex justify-center">
-  <p-panel [header]="title">
+<page [header]="title">
   <ng-template pTemplate="header">
     <p-tag *ngIf="isBeta" severity="warn" value="Beta"></p-tag>
   </ng-template>
@@ -72,5 +71,4 @@
       </tr>
     </ng-template>
   </p-table>
-  </p-panel>
-</div>
+</page>

tools/src/app/shared/upload/file-converter.component.scss

@@ -1,15 +1,3 @@
-:host {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-    width: 96vw;
-  
-    .card {
-      display: flex;
-      flex-direction: column;
-      width: 1140px;
-    }
-  
 .conversion {
   display: flex;
   justify-content: center;
@@ -23,4 +11,3 @@
     margin-right: 5px;
   }
 }
-}

tools/src/app/shared/upload/file-converter.component.ts

@@ -9,6 +9,7 @@ import { AutoCompleteCompleteEvent, AutoCompleteModule, AutoCompleteSelectEvent
 import { BadgeModule } from 'primeng/badge';
 import { HttpHeaders } from '@angular/common/http';
 import { TagModule } from 'primeng/tag';
+import { PageComponent } from '../page/page.component';
 
 interface ProcessedFile {
   name: string;
@@ -30,7 +31,8 @@ interface ProcessedFile {
     TableModule,
     AutoCompleteModule,
     BadgeModule,
-    TagModule
+    TagModule,
+    PageComponent
   ]
 })
 export class FileConverterComponent implements OnInit {

tools/src/styles.scss

@@ -9,3 +9,17 @@ body .p-component
   font-weight: 304;
   font-style: normal;
 }
+
+* {
+  border-radius: unset !important;
+}
+
+.p-megamenu {
+  background: unset !important;
+}
+
+.p-megamenu-overlay {
+  background: var(--p-surface-800) !important;
+  border: unset !important;
+  border-radius: unset !important;
+}

tools/src/tools/client-side/color-picker/color-picker.component.html

@@ -0,0 +1,7 @@
+<page header="Color Picker">
+    <div class="color-picker">
+        <label for="color-input">Choose Color:</label>
+        <input #colorPicker type="color" id="color-input" [formControl]="colorControl" (input)="onColorChange(colorPicker.value)" />
+        <input #colorText type="text" [formControl]="colorControl" (input)="onColorChange(colorText.value)" />
+    </div>
+</page>

tools/src/tools/client-side/color-picker/color-picker.component.scss

@@ -0,0 +1,19 @@
+.color-picker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+  
+.color-picker input[type="color"] {
+  width: 50px;
+  height: 50px;
+  border: none;
+  cursor: pointer;
+}
+
+.color-picker input[type="text"] {
+  padding: 5px;
+  font-size: 16px;
+  width: 100px;
+}

tools/src/tools/client-side/color-picker/color-picker.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
+import { PageComponent } from '../../../app/shared/page/page.component';
 
 @Component({
   selector: 'app-color-picker',
@@ -12,7 +13,8 @@ import { InputTextModule } from 'primeng/inputtext';
     FormsModule,
     InputTextModule,
     ButtonModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    PageComponent
   ],
   templateUrl: './color-picker.component.html',
   styleUrl: './color-picker.component.scss'

tools/src/tools/client-side/color-picker/color-picker/color-picker.component.html

@@ -1,5 +0,0 @@
-<div class="color-picker">
-    <label for="color-input">Choose Color:</label>
-    <input #colorPicker type="color" id="color-input" [formControl]="colorControl" (input)="onColorChange(colorPicker.value)" />
-    <input #colorText type="text" [formControl]="colorControl" (input)="onColorChange(colorText.value)" />
-</div>

tools/src/tools/client-side/color-picker/color-picker/color-picker.component.scss

@@ -1,18 +0,0 @@
-.color-picker {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  
-  .color-picker input[type="color"] {
-    width: 50px;
-    height: 50px;
-    border: none;
-    cursor: pointer;
-  }
-  
-  .color-picker input[type="text"] {
-    padding: 5px;
-    font-size: 16px;
-    width: 100px;
-  }

tools/src/tools/client-side/guid/guid.component.html

@@ -1,3 +1,4 @@
+<!-- Custom design, no page component -->
 <p-panel header="Guid Generator">
   <div>
     <div *ngFor="let setting of settings" class="guid-row">