Watermark module
This commit is contained in:
Adina Țeudan
parent
759e19f796
commit
7d818cb996
@ -7,7 +7,6 @@ import { DictionaryListingScreenComponent } from './screens/dictionary-listing/d
|
||||
import { DictionaryOverviewScreenComponent } from './screens/dictionary-overview/dictionary-overview-screen.component';
|
||||
import { PendingChangesGuard } from '@guards/can-deactivate.guard';
|
||||
import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
|
||||
import { WatermarkScreenComponent } from './screens/watermark/watermark-screen.component';
|
||||
import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
|
||||
import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
|
||||
import { LicenseInformationScreenComponent } from './screens/license-information/license-information-screen.component';
|
||||
@ -89,11 +88,12 @@ const routes: Routes = [
|
||||
},
|
||||
{
|
||||
path: 'watermark',
|
||||
component: WatermarkScreenComponent,
|
||||
component: BaseDossierTemplateScreenComponent,
|
||||
canActivate: [CompositeRouteGuard],
|
||||
data: {
|
||||
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
|
||||
},
|
||||
loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
|
||||
},
|
||||
{
|
||||
path: 'reports',
|
||||
|
||||
@ -10,7 +10,6 @@ import { DigitalSignatureScreenComponent } from './screens/digital-signature/dig
|
||||
import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
|
||||
import { LicenseInformationScreenComponent } from './screens/license-information/license-information-screen.component';
|
||||
import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
|
||||
import { WatermarkScreenComponent } from './screens/watermark/watermark-screen.component';
|
||||
import { DossierTemplateBreadcrumbsComponent } from './components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
|
||||
import { ColorPickerModule } from 'ngx-color-picker';
|
||||
import { AddEditFileAttributeDialogComponent } from './dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
|
||||
@ -73,7 +72,6 @@ const screens = [
|
||||
FileAttributesListingScreenComponent,
|
||||
LicenseInformationScreenComponent,
|
||||
UserListingScreenComponent,
|
||||
WatermarkScreenComponent,
|
||||
GeneralConfigScreenComponent,
|
||||
ReportsScreenComponent,
|
||||
DossierAttributesListingScreenComponent,
|
||||
|
||||
@ -1,127 +0,0 @@
|
||||
<section>
|
||||
<div class="page-header">
|
||||
<redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
|
||||
|
||||
<div class="actions flex-1">
|
||||
<redaction-dossier-template-actions></redaction-dossier-template-actions>
|
||||
|
||||
<iqser-circle-button
|
||||
[routerLink]="['../..']"
|
||||
[tooltip]="'common.close' | translate"
|
||||
icon="iqser:close"
|
||||
tooltipPosition="below"
|
||||
></iqser-circle-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-inner">
|
||||
<div class="overlay-shadow"></div>
|
||||
|
||||
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
|
||||
|
||||
<div class="content-container">
|
||||
<div #viewer class="viewer"></div>
|
||||
<div *ngIf="changed && permissionsService.isAdmin()" class="changes-box">
|
||||
<iqser-icon-button
|
||||
(action)="save()"
|
||||
[disabled]="form.invalid"
|
||||
[label]="'watermark-screen.action.save' | translate"
|
||||
[type]="iconButtonTypes.primary"
|
||||
icon="iqser:check"
|
||||
></iqser-icon-button>
|
||||
<div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-container" iqserHasScrollbar>
|
||||
<div class="heading-xl" translate="watermark-screen.title"></div>
|
||||
<form (keyup)="configChanged()" [formGroup]="form">
|
||||
<div class="iqser-input-group w-300">
|
||||
<textarea
|
||||
(mousemove)="triggerChanges()"
|
||||
[placeholder]="'watermark-screen.form.text-placeholder' | translate"
|
||||
class="w-full"
|
||||
formControlName="text"
|
||||
iqserHasScrollbar
|
||||
name="text"
|
||||
rows="4"
|
||||
type="text"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="iqser-input-group">
|
||||
<label class="all-caps-label mb-8" translate="watermark-screen.form.orientation"></label>
|
||||
<div class="square-options">
|
||||
<div
|
||||
(click)="setValue('orientation', option)"
|
||||
*ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
|
||||
[class.active]="form.get('orientation').value === option"
|
||||
[class.disabled]="form.get('orientation').disabled"
|
||||
[ngClass]="option"
|
||||
>
|
||||
<span>ABC</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="iqser-input-group">
|
||||
<label class="all-caps-label" translate="watermark-screen.form.font-size"></label>
|
||||
<mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
|
||||
</div>
|
||||
|
||||
<div class="iqser-input-group">
|
||||
<label class="all-caps-label" translate="watermark-screen.form.opacity"></label>
|
||||
<mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
|
||||
</div>
|
||||
|
||||
<div class="iqser-input-group w-150">
|
||||
<label class="all-caps-label mb-5" translate="watermark-screen.form.color"></label>
|
||||
<input
|
||||
[placeholder]="'add-edit-dictionary.form.color-placeholder' | translate"
|
||||
class="hex-color-input"
|
||||
formControlName="hexColor"
|
||||
name="hexColor"
|
||||
type="text"
|
||||
/>
|
||||
<div
|
||||
(colorPickerChange)="setValue('hexColor', $event)"
|
||||
[class.disabled]="form.get('hexColor').disabled"
|
||||
[colorPicker]="form.get('hexColor').value"
|
||||
[cpDisabled]="form.get('hexColor').disabled"
|
||||
[cpOutputFormat]="'hex'"
|
||||
[cpPosition]="'top-right'"
|
||||
[cpUseRootViewContainer]="true"
|
||||
[style.background]="form.get('hexColor').value"
|
||||
class="input-icon"
|
||||
>
|
||||
<mat-icon
|
||||
*ngIf="!form.get('hexColor')?.value || form.get('hexColor').value?.length === 0"
|
||||
svgIcon="red:color-picker"
|
||||
></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="iqser-input-group">
|
||||
<label class="all-caps-label mb-8" translate="watermark-screen.form.font-type"></label>
|
||||
<div class="square-options">
|
||||
<div
|
||||
(click)="setValue('fontType', option.value)"
|
||||
*ngFor="
|
||||
let option of [
|
||||
{ value: 'times-new-roman', display: 'Times' },
|
||||
{ value: 'helvetica', display: 'Helvetica' },
|
||||
{ value: 'courier', display: 'Courier' }
|
||||
]
|
||||
"
|
||||
[class.active]="form.get('fontType').value === option.value"
|
||||
[class.disabled]="form.get('fontType').disabled"
|
||||
[ngClass]="option.value"
|
||||
>
|
||||
{{ option.display }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,104 @@
|
||||
<div class="content-container">
|
||||
<div #viewer class="viewer"></div>
|
||||
<div *ngIf="changed && permissionsService.isAdmin()" class="changes-box">
|
||||
<iqser-icon-button
|
||||
(action)="save()"
|
||||
[disabled]="form.invalid"
|
||||
[label]="'watermark-screen.action.save' | translate"
|
||||
[type]="iconButtonTypes.primary"
|
||||
icon="iqser:check"
|
||||
></iqser-icon-button>
|
||||
<div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-container" iqserHasScrollbar>
|
||||
<div class="heading-xl" translate="watermark-screen.title"></div>
|
||||
<form (keyup)="configChanged()" [formGroup]="form">
|
||||
<div class="iqser-input-group w-300">
|
||||
<textarea
|
||||
(mousemove)="triggerChanges()"
|
||||
[placeholder]="'watermark-screen.form.text-placeholder' | translate"
|
||||
class="w-full"
|
||||
formControlName="text"
|
||||
iqserHasScrollbar
|
||||
name="text"
|
||||
rows="4"
|
||||
type="text"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="iqser-input-group">
|
||||
<label class="all-caps-label mb-8" translate="watermark-screen.form.orientation"></label>
|
||||
<div class="square-options">
|
||||
<div
|
||||
(click)="setValue('orientation', option)"
|
||||
*ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
|
||||
[class.active]="form.get('orientation').value === option"
|
||||
[class.disabled]="form.get('orientation').disabled"
|
||||
[ngClass]="option"
|
||||
>
|
||||
<span>ABC</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="iqser-input-group">
|
||||
<label class="all-caps-label" translate="watermark-screen.form.font-size"></label>
|
||||
<mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
|
||||
</div>
|
||||
|
||||
<div class="iqser-input-group">
|
||||
<label class="all-caps-label" translate="watermark-screen.form.opacity"></label>
|
||||
<mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
|
||||
</div>
|
||||
|
||||
<div class="iqser-input-group w-150">
|
||||
<label class="all-caps-label mb-5" translate="watermark-screen.form.color"></label>
|
||||
<input
|
||||
[placeholder]="'add-edit-dictionary.form.color-placeholder' | translate"
|
||||
class="hex-color-input"
|
||||
formControlName="hexColor"
|
||||
name="hexColor"
|
||||
type="text"
|
||||
/>
|
||||
<div
|
||||
(colorPickerChange)="setValue('hexColor', $event)"
|
||||
[class.disabled]="form.get('hexColor').disabled"
|
||||
[colorPicker]="form.get('hexColor').value"
|
||||
[cpDisabled]="form.get('hexColor').disabled"
|
||||
[cpOutputFormat]="'hex'"
|
||||
[cpPosition]="'top-right'"
|
||||
[cpUseRootViewContainer]="true"
|
||||
[style.background]="form.get('hexColor').value"
|
||||
class="input-icon"
|
||||
>
|
||||
<mat-icon
|
||||
*ngIf="!form.get('hexColor')?.value || form.get('hexColor').value?.length === 0"
|
||||
svgIcon="red:color-picker"
|
||||
></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="iqser-input-group">
|
||||
<label class="all-caps-label mb-8" translate="watermark-screen.form.font-type"></label>
|
||||
<div class="square-options">
|
||||
<div
|
||||
(click)="setValue('fontType', option.value)"
|
||||
*ngFor="
|
||||
let option of [
|
||||
{ value: 'times-new-roman', display: 'Times' },
|
||||
{ value: 'helvetica', display: 'Helvetica' },
|
||||
{ value: 'courier', display: 'Courier' }
|
||||
]
|
||||
"
|
||||
[class.active]="form.get('fontType').value === option.value"
|
||||
[class.disabled]="form.get('fontType').disabled"
|
||||
[ngClass]="option.value"
|
||||
>
|
||||
{{ option.display }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -1,4 +1,10 @@
|
||||
@use 'variables';
|
||||
@use 'apps/red-ui/src/assets/styles/variables';
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
order: 1;
|
||||
@ -6,7 +6,7 @@ import { HttpClient } from '@angular/common/http';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Debounce, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
|
||||
import { IWatermark, WatermarkOrientation, WatermarkOrientations } from '@red/domain';
|
||||
import { BASE_HREF } from '../../../../tokens';
|
||||
import { BASE_HREF } from '../../../../../tokens';
|
||||
import { stampPDFPage } from '@utils/page-stamper';
|
||||
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
|
||||
import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
|
||||
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { SharedModule } from '@shared/shared.module';
|
||||
import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component';
|
||||
import { ColorPickerModule } from 'ngx-color-picker';
|
||||
|
||||
const routes = [{ path: '', component: WatermarkScreenComponent }];
|
||||
|
||||
@NgModule({
|
||||
declarations: [WatermarkScreenComponent],
|
||||
imports: [RouterModule.forChild(routes), CommonModule, SharedModule, ColorPickerModule],
|
||||
})
|
||||
export class WatermarkModule {}
|
||||
Loading…
x
Reference in New Issue
Block a user