mirror of
https://github.com/adityachandelgit/BookLore.git
synced 2026-01-09 06:21:08 +08:00
Fixes to stepper
This commit is contained in:
aditya.chandel
parent
fb41ffdfe7
commit
38453d4beb
532
booklore-ui/package-lock.json
generated
532
booklore-ui/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -29,6 +29,7 @@
|
||||
"primeicons": "^7.0.0",
|
||||
"primeng": "19.0.2",
|
||||
"rxjs": "~7.8.0",
|
||||
"tailwindcss-primeui": "^0.3.4",
|
||||
"tslib": "^2.3.0",
|
||||
"ws": "^8.18.0",
|
||||
"zone.js": "~0.15.0"
|
||||
@ -38,12 +39,15 @@
|
||||
"@angular/cli": "^19.0.2",
|
||||
"@angular/compiler-cli": "^19.0.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"jasmine-core": "~5.4.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "~5.6.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div>
|
||||
<div class="book-browser-header">
|
||||
<div class="left-items">
|
||||
<h4 class="entity-name">{{ (entityType$ | async) }}: {{ (entity$ | async)?.name }}</h4>
|
||||
<p class="entity-name text-2xl">{{ (entityType$ | async) }}: {{ (entity$ | async)?.name }}</p>
|
||||
<p-button icon="pi pi-ellipsis-v" [rounded]="true" [text]="true" severity="info" (click)="entitymenu.toggle($event)"/>
|
||||
<p-menu #entitymenu [model]="entityOptions" [popup]="true" appendTo="body"></p-menu>
|
||||
</div>
|
||||
|
||||
@ -13,8 +13,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.entity-name {
|
||||
margin: 0;
|
||||
.p {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Button } from 'primeng/button';
|
||||
import { AsyncPipe, NgIf } from '@angular/common';
|
||||
import { LibraryCreatorComponent } from '../library-creator/library-creator.component';
|
||||
import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
|
||||
import { DashboardScrollerComponent } from '../dashboard-scroller/dashboard-scroller.component';
|
||||
import { LibraryService } from '../../service/library.service';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
import {Component} from '@angular/core';
|
||||
import {Button} from 'primeng/button';
|
||||
import {AsyncPipe, NgIf} from '@angular/common';
|
||||
import {LibraryCreatorComponent} from '../library-creator/library-creator.component';
|
||||
import {DialogService, DynamicDialogRef} from 'primeng/dynamicdialog';
|
||||
import {DashboardScrollerComponent} from '../dashboard-scroller/dashboard-scroller.component';
|
||||
import {LibraryService} from '../../service/library.service';
|
||||
import {Observable} from 'rxjs';
|
||||
import {map} from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home-page',
|
||||
@ -34,9 +34,14 @@ export class DashboardComponent {
|
||||
this.ref = this.dialogService.open(LibraryCreatorComponent, {
|
||||
header: 'Create New Library',
|
||||
modal: true,
|
||||
width: '50%',
|
||||
height: '50%',
|
||||
style: { bottom: '15%' }
|
||||
closable: true,
|
||||
width: '675px',
|
||||
height: '480px',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '15%',
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -70,9 +70,13 @@ export class AppTopBarComponent implements OnDestroy {
|
||||
this.ref = this.dialogService.open(LibraryCreatorComponent, {
|
||||
header: 'Create New Library',
|
||||
modal: true,
|
||||
width: '40%',
|
||||
height: '50%',
|
||||
style: {bottom: '15%'}
|
||||
closable: true,
|
||||
width: '675px',
|
||||
height: '480px',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '15%',
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -80,9 +84,13 @@ export class AppTopBarComponent implements OnDestroy {
|
||||
this.ref = this.dialogService.open(FileUploadComponent, {
|
||||
header: 'Upload Book',
|
||||
modal: true,
|
||||
width: '45%',
|
||||
height: '40%',
|
||||
style: {bottom: '20%'}
|
||||
closable: true,
|
||||
width: '600px',
|
||||
height: '330px',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '15%',
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -1,68 +1,73 @@
|
||||
<p-stepper>
|
||||
<p-stepper header="Library Name">
|
||||
<ng-template pTemplate="content" let-nextCallback="nextCallback" let-index="index">
|
||||
<div class="flex flex-col h-[21rem]">
|
||||
<div class="border-2 border-dashed border-surface rounded-border bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">
|
||||
<p-stepper [value]="1" class="basis-[50rem]">
|
||||
<p-step-list>
|
||||
<p-step [value]="1">Library Details</p-step>
|
||||
<p-step [value]="2">Select Directory</p-step>
|
||||
</p-step-list>
|
||||
<p-step-panels>
|
||||
<p-step-panel [value]="1">
|
||||
<ng-template #content let-activateCallback="activateCallback">
|
||||
<div class="flex flex-col h-48 stepper-content-custom">
|
||||
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">
|
||||
<div class="library-name-icon-parent">
|
||||
<div class="library-name-div">
|
||||
<p>Library Name: </p>
|
||||
<input type="text" pInputText [(ngModel)]="value" placeholder="Enter library name..."/>
|
||||
</div>
|
||||
<div class="library-icon-div">
|
||||
<p>Library Icon:</p>
|
||||
<div *ngIf="!selectedIcon">
|
||||
<p-button label="Select Icon" icon="pi pi-search" (onClick)="openIconPicker()"></p-button>
|
||||
</div>
|
||||
<div *ngIf="selectedIcon" class="selected-icon-container">
|
||||
<i [class]="selectedIcon" style="font-size: 1.25rem; margin-right: 0.75rem;"></i>
|
||||
<p-button icon="pi pi-times" (onClick)="clearSelectedIcon()" [rounded]="true" [text]="true" [outlined]="true" class="remove-icon-button" severity="danger"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<app-icon-picker (iconSelected)="onIconSelected($event)"></app-icon-picker>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
<p-button label="Next" icon="pi pi-arrow-right" iconPos="right" (onClick)="activateCallback(2)" />
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-step-panel>
|
||||
|
||||
<div class="library-name-icon-parent">
|
||||
<div class="library-name-div">
|
||||
<div>Library Name: </div>
|
||||
<input type="text" pInputText [(ngModel)]="value" placeholder="Enter library name..."/>
|
||||
</div>
|
||||
<div class="library-icon-div">
|
||||
<div>Library Icon:</div>
|
||||
<div *ngIf="!selectedIcon">
|
||||
<p-button label="Select Icon" icon="pi pi-search" (onClick)="openIconPicker()"></p-button>
|
||||
</div>
|
||||
<div *ngIf="selectedIcon" class="selected-icon-container">
|
||||
<i [class]="selectedIcon" style="font-size: 1.25rem; margin-right: 0.75rem;"></i>
|
||||
<p-button icon="pi pi-times" (onClick)="clearSelectedIcon()" [rounded]="true" [text]="true" [outlined]="true" class="remove-icon-button" severity="danger"></p-button>
|
||||
</div>
|
||||
<p-step-panel [value]="2">
|
||||
<ng-template #content let-activateCallback="activateCallback">
|
||||
<div class="flex flex-col h-48 stepper-content-custom">
|
||||
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">
|
||||
<div class="flex flex-col justify-center items-center w-100">
|
||||
<p-button
|
||||
severity="info"
|
||||
label="Add book folders"
|
||||
[outlined]="true"
|
||||
(onClick)="show()">
|
||||
</p-button>
|
||||
<p-table [value]="folders" styleClass="p-datatable-striped" class="p-table-custom mt-4">
|
||||
<ng-template pTemplate="body" let-folder let-i="rowIndex">
|
||||
<tr>
|
||||
<td class="tr-custom">{{ folder }}</td>
|
||||
<td class="tr-custom td-x-custom">
|
||||
<p-button
|
||||
icon="pi pi-times"
|
||||
[rounded]="true"
|
||||
[text]="true"
|
||||
severity="danger"
|
||||
(onClick)="removeFolder(i)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
<app-icon-picker (iconSelected)="onIconSelected($event)"></app-icon-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
<p-button label="Next" icon="pi pi-arrow-right" iconPos="right" (onClick)="nextCallback.emit()"/>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-stepper>
|
||||
<p-stepper header="Media Location">
|
||||
<ng-template pTemplate="content" let-prevCallback="prevCallback" let-index="index">
|
||||
<div class="flex flex-col xxx">
|
||||
<div
|
||||
class="border-2 border-dashed border-surface rounded-border bg-surface-50 dark:bg-surface-950 flex-auto flex items-start"
|
||||
style="padding-top: 3rem;">
|
||||
<div class="flex flex-col justify-center items-center w-100">
|
||||
<p-button
|
||||
severity="secondary"
|
||||
label="Browse for media folders"
|
||||
(onClick)="show()">
|
||||
</p-button>
|
||||
<p-table [value]="folders" styleClass="p-datatable-striped" class="p-table-custom mt-4">
|
||||
<ng-template pTemplate="body" let-folder let-i="rowIndex">
|
||||
<tr>
|
||||
<td class="tr-custom">{{ folder }}</td>
|
||||
<td class="tr-custom td-x-custom">
|
||||
<p-button
|
||||
icon="pi pi-times"
|
||||
[rounded]="true"
|
||||
[text]="true"
|
||||
severity="danger"
|
||||
(onClick)="removeFolder(i)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<div class="flex pt-6 justify-between">
|
||||
<p-button label="Back" icon="pi pi-arrow-left" iconPos="right" (onClick)="activateCallback(1)" />
|
||||
<p-button severity="success" label="Save" icon="pi pi-save" (onClick)="addLibrary()"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-between">
|
||||
<p-button label="Back" icon="pi pi-arrow-left" (onClick)="prevCallback.emit()"/>
|
||||
<p-button severity="success" label="Save" icon="pi pi-save" (onClick)="addLibrary()"></p-button>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-stepper>
|
||||
</ng-template>
|
||||
</p-step-panel>
|
||||
</p-step-panels>
|
||||
</p-stepper>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.library-name-div {
|
||||
@ -49,7 +49,6 @@
|
||||
}
|
||||
|
||||
.p-table-custom {
|
||||
margin: 1.5rem !important;
|
||||
min-width: 35rem !important;
|
||||
max-height: 11.25rem !important;
|
||||
overflow: scroll;
|
||||
@ -86,6 +85,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.xxx {
|
||||
min-height: 295px;
|
||||
.stepper-content-custom {
|
||||
height: 335px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.p {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
@import "../node_modules/primeicons/primeicons.css";
|
||||
@import "assets/layout/styles/global.scss";
|
||||
|
||||
@import "../node_modules/primeflex/primeflex.scss";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
|
||||
|
||||
11
booklore-ui/tailwind.config.js
Normal file
11
booklore-ui/tailwind.config.js
Normal file
@ -0,0 +1,11 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{html,ts}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require('tailwindcss-primeui')]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user