Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(home-module): initial UI redesign (#30) #31

Merged
merged 1 commit into from
Jun 13, 2024
Merged

feat(home-module): initial UI redesign (#30) #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions pdf/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@ import { NewsletterComponent } from './shared/components/newsletter/newsletter.c
selector: 'pdf-root',
standalone: true,
template: `
<pdf-header />
<main class="m-8">
<router-outlet></router-outlet>
</main>
<pdf-newsletter class="block max-w-96 mx-auto mt-20" />
<pdf-footer />
<div class="flex flex-col min-h-screen">
<pdf-header />
<main class="m-8 container flex-1">
<router-outlet></router-outlet>
</main>
<pdf-newsletter class="block w-96 mx-auto mt-20" />
<pdf-footer />
</div>
`,
imports: [
RouterOutlet,
Expand Down
81 changes: 46 additions & 35 deletions pdf/src/app/pages/(home).page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,43 +25,54 @@ export const routeMeta: RouteMeta = {
template: `
<p-toast />

<h1 class="text-xl py-4">Resize your PDF file</h1>

<pdf-shout-out [type]="TaskType.RESIZE" />

<p-fileUpload
mode="advanced"
chooseLabel="Choose a PDF file"
accept="application/pdf"
name="myfile"
maxFileSize="10000000"
fileLimit="1"
uploadLabel="Upload & Resize"
(uploadHandler)="onUpload($event)"
[customUpload]="true"
/>

@if(loading()) {
<p>Your file is uploaded and processing. Please wait for a moment ;)</p>
} @if(errorMessage()) {
<p class="text-red-500">{{ errorMessage() }}</p>
} @if(downloadUrl$ | async; as downloadUrl) {

<!-- Compare file size -->
@if(this.newFileSize() > this.currentFileSize()) {
<p>
Congratulations! Your file is reduced by
{{ this.newFileSize() - this.currentFileSize() }} bytes!
</p>
}
<div class="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-md">
<h1 class="text-2xl font-semibold mb-4">Resize your PDF file</h1>

<pdf-shout-out [type]="TaskType.RESIZE" />

<p-fileUpload
mode="advanced"
chooseLabel="Choose a PDF file"
accept="application/pdf"
name="myfile"
maxFileSize="10000000"
fileLimit="1"
uploadLabel="Upload & Resize"
(uploadHandler)="onUpload($event)"
[customUpload]="true"
class="mb-4"
/>

@if(loading()) {
<div class="flex items-center mb-4">
<p>Your file is uploaded and processing. Please wait for a moment ;)</p>
</div>
} @if(errorMessage()) {
<p class="text-red-500 mb-4">{{ errorMessage() }}</p>
} @if(downloadUrl$ | async; as downloadUrl) {

<!-- Compare file size -->
@if(this.newFileSize() < this.currentFileSize()) {
<p class="mb-4">
Congratulations! Your file is reduced by
{{ this.currentFileSize() - this.newFileSize() }} bytes!
</p>
}

<a class="block my-4 underline" [href]="downloadUrl" target="_blank"
>Download PDF</a
>
<lib-buy-me-a-coffee />
}
<a
[href]="downloadUrl"
target="_blank"
class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 mb-4"
>
<i class="pi pi-download pr-2"></i>
Download PDF
</a>

<lib-buy-me-a-coffee />
}

<pdf-disclaimer class="block mt-8" />
<pdf-disclaimer class="mt-8" />
</div>
`,
imports: [
CommonModule,
Expand Down
74 changes: 46 additions & 28 deletions pdf/src/app/pages/pdf-to-images.page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,35 +34,53 @@ export const routeMeta: RouteMeta = {
template: `
<p-toast />

<h1 class="text-xl py-4">Convert your PDF file to Images</h1>

<pdf-shout-out [type]="TaskType.IMAGE_CONVERSION" />

<p-fileUpload
mode="advanced"
chooseLabel="Choose a PDF file"
accept="application/pdf"
name="myfile"
maxFileSize="10000000"
fileLimit="1"
uploadLabel="Upload & Convert"
(uploadHandler)="onUpload($event)"
[customUpload]="true"
/>

@if(loading()) {
<p>Your file is uploaded and processing. Please wait for a moment ;)</p>
} @if(errorMessage()) {
<p class="text-red-500">{{ errorMessage() }}</p>
} @if(downloadUrl$ | async; as downloadUrl) {

<a class="block my-4 underline" [href]="downloadUrl" target="_blank"
>Download Images</a
>
<lib-buy-me-a-coffee />
}
<div class="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-md">
<h1 class="text-2xl font-semibold mb-4">
Convert your PDF file to Images
</h1>

<pdf-shout-out [type]="TaskType.IMAGE_CONVERSION" />

<p-fileUpload
mode="advanced"
chooseLabel="Choose a PDF file"
accept="application/pdf"
name="myfile"
maxFileSize="10000000"
fileLimit="1"
uploadLabel="Upload & Convert"
(uploadHandler)="onUpload($event)"
[customUpload]="true"
class="mb-4"
/>

@if(loading()) {
<div class="flex items-center mb-4">
<div class="mr-2">
<i class="fa fa-spinner fa-spin text-blue-500"></i>
</div>
<span
>Your file is uploaded and processing. Please wait for a moment.</span
>
</div>
} @if(errorMessage()) {
<p class="text-red-500 mb-4">{{ errorMessage() }}</p>
} @if(downloadUrl$ | async; as downloadUrl) {

<a
[href]="downloadUrl"
target="_blank"
class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 mb-4"
>
<i class="pi pi-download pr-2"></i>
Download Images
</a>

<lib-buy-me-a-coffee />
}

<pdf-disclaimer class="block mt-8" />
<pdf-disclaimer class="mt-8" />
</div>
`,
})
export default class PdfToImagesComponent extends PdfHandlerBase {
Expand Down
23 changes: 16 additions & 7 deletions pdf/src/app/shared/components/footer/footer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
import { CommonModule } from '@angular/common'
import { Component } from '@angular/core'
import { RouterLink } from '@angular/router'

@Component({
selector: 'pdf-footer',
standalone: true,
imports: [CommonModule],
imports: [CommonModule, RouterLink],
template: `
<footer class="p-8 bg-gray-100">
<div class="flex justify-between items-center mx-16">
<p>PDFun © 2024</p>
<footer class="bg-gray-800 py-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<a routerLink="/" class="flex items-center mr-6 no-underline">
<img src="/assets/pdfun.png" alt="PDFun logo" class="h-8 mr-2" />
<span class="text-white font-semibold text-lg">PDFun</span>
</a>
<p class="text-gray-400">&copy; 2024</p>
</div>
<a
href="https://github.com/dalenguyen/pdfun"
class="underline"
class="text-gray-400 hover:text-white transition-colors duration-300"
target="_blank"
><i class="pi pi-github" style="font-size: 1.5rem"></i
></a>
aria-label="GitHub"
>
<i class="pi pi-github" style="font-size: 1.5rem"></i>
</a>
</div>
</footer>
`,
Expand Down
119 changes: 87 additions & 32 deletions pdf/src/app/shared/components/header/header.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,107 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { RouterLinkWithHref } from '@angular/router'
import {
ChangeDetectionStrategy,
Component,
inject,
signal,
} from '@angular/core'
import { RouterLinkActive, RouterLinkWithHref } from '@angular/router'
import { AuthService } from '@pdfun/angular/services'
import { LoginComponent, ProfileComponent } from '@pdfun/ui/auth'

@Component({
selector: 'pdf-header',
standalone: true,
imports: [CommonModule, LoginComponent, ProfileComponent, RouterLinkWithHref],
imports: [
CommonModule,
LoginComponent,
ProfileComponent,
RouterLinkWithHref,
RouterLinkActive,
],
template: `
<!-- REPLACE With PrimeNG Menubar -->
<header class="m-8 flex justify-between items-center flex-wrap">
<a class="flex items-center" routerLink="/">
<img src="/assets/pdfun.png" alt="PDFun logo" class="w-10" />
</a>
<header class="bg-gray-800 py-4 px-6">
<div
class="container mx-auto flex items-center justify-between flex-wrap"
>
<div class="flex items-center">
<a
class="md:hidden text-gray-400 hover:text-white focus:outline-none mr-2"
(click)="toggleMobileMenu()"
>
<i class="pi pi-bars pi-lg"></i>
</a>
<a routerLink="/" class="flex items-center mr-6">
<img src="/assets/pdfun.png" alt="PDFun logo" class="h-8 mr-2" />
<span class="text-white font-semibold text-lg">PDFun</span>
</a>
<nav class="hidden md:block">
<div class="flex gap-4">
<a
routerLink="/"
routerLinkActive="text-gray-200"
[routerLinkActiveOptions]="{ exact: true }"
class="text-gray-400 no-underline hover:text-white transition-colors duration-300"
>
Resize PDF
</a>

<div class="flex gap-2">
<ul class="flex gap-2 list-none">
<li>
<a
class="no-underline text-black hover:text-blue-800 hover:underline"
routerLink="/"
>Resize PDF</a
>
</li>
<li>
<a
class="no-underline text-black hover:text-blue-800 hover:underline"
routerLink="/pdf-to-images"
>PDF to Images</a
>
</li>
</ul>

@defer (on timer(200ms)) {
<div class="flex items-center gap-4">
@if(authService.isLoggedIn()) {
<lib-profile />
} @else {
<lib-login />
<a
routerLink="/pdf-to-images"
routerLinkActive="text-gray-200"
class="text-gray-400 no-underline hover:text-white transition-colors duration-300"
>
PDF to Images
</a>
</div>
</nav>
</div>
<div class="flex items-center">
@defer (on timer(200ms)) {
<div class="flex items-center gap-4">
@if(authService.isLoggedIn()) {
<lib-profile />
} @else {
<lib-login />
}
</div>
}
</div>
}
</div>
<div
class="md:hidden bg-gray-700 p-4 mt-4"
[ngClass]="{ hidden: !showMobileMenu() }"
>
<div class="flex flex-col gap-4">
<a
routerLink="/"
routerLinkActive="text-gray-100"
[routerLinkActiveOptions]="{ exact: true }"
class="text-gray-400 no-underline hover:text-white transition-colors duration-300"
(click)="toggleMobileMenu()"
>
Resize PDF
</a>

<a
routerLink="/pdf-to-images"
routerLinkActive="text-gray-100"
class="text-gray-400 no-underline hover:text-white transition-colors duration-300"
(click)="toggleMobileMenu()"
>PDF to Images
</a>
</div>
</div>
</header>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderComponent {
authService = inject(AuthService)
showMobileMenu = signal(false)

toggleMobileMenu() {
this.showMobileMenu.update((value) => !value)
}
}
4 changes: 2 additions & 2 deletions pdf/src/app/shared/components/newsletter/newsletter.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
standalone: true,
imports: [CommonModule],
template: `
<div id="mc_embed_shell max-w-52 margin-auto">
<div id="mc_embed_shell">
<link
href="//cdn-images.mailchimp.com/embedcode/classic-061523.css"
rel="stylesheet"
Expand Down Expand Up @@ -98,4 +98,4 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NewsletterComponent { }
export class NewsletterComponent {}
Loading
Loading