feat: enhance translation and invoice layout
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
import * as tsclass from "@tsclass/tsclass";
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
@@ -6,24 +6,24 @@ import {
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
css,
|
||||
cssManager,
|
||||
unsafeCSS,
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
} from "@design.estate/dees-element";
|
||||
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as plugins from "../plugins.js";
|
||||
|
||||
import { defaultDocumentSettings } from './document.js';
|
||||
import { defaultDocumentSettings } from "./document.js";
|
||||
import { dedocumentSharedStyle } from "../style.js";
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dedocument-page': DePage;
|
||||
"dedocument-page": DePage;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dedocument-page')
|
||||
@customElement("dedocument-page")
|
||||
export class DePage extends DeesElement {
|
||||
public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
|
||||
public static demo = () =>
|
||||
html` <dedocument-page .format="${"a4"}"></dedocument-page> `;
|
||||
|
||||
@property({
|
||||
type: Number,
|
||||
@@ -38,7 +38,7 @@ export class DePage extends DeesElement {
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public format: 'a4' = 'a4';
|
||||
public format: "a4" = "a4";
|
||||
|
||||
@property({
|
||||
type: Number,
|
||||
@@ -65,7 +65,8 @@ export class DePage extends DeesElement {
|
||||
type: Object,
|
||||
reflect: true,
|
||||
})
|
||||
public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
|
||||
public documentSettings: plugins.shared.interfaces.IDocumentSettings =
|
||||
defaultDocumentSettings;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -74,6 +75,7 @@ export class DePage extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
dedocumentSharedStyle,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
@@ -100,26 +102,75 @@ export class DePage extends DeesElement {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topInfo {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 40px;
|
||||
color: red;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
.bigDraftText {
|
||||
transform: rotate(-45deg);
|
||||
font-size: 200px;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
.foldMark__wrapper {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.foldMark {
|
||||
position: absolute;
|
||||
border-top: 1px solid #d3d3d3;
|
||||
width: 10px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.foldMark--start {
|
||||
top: calc(var(--DPI-FACTOR) * 8.7);
|
||||
}
|
||||
|
||||
.foldMark--center {
|
||||
top: calc(var(--DPI-FACTOR) * 14.85);
|
||||
}
|
||||
|
||||
.foldMark--end {
|
||||
top: calc(var(--DPI-FACTOR) * 19.2);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
--theme-color-primary-fg: ${this.documentSettings.theme
|
||||
?.colorPrimaryForeground};
|
||||
--theme-color-primary-bg: ${this.documentSettings.theme
|
||||
?.colorPrimaryBackground};
|
||||
--theme-color-accent-fg: ${this.documentSettings.theme
|
||||
?.colorAccentForeground};
|
||||
--theme-color-accent-bg: ${this.documentSettings.theme
|
||||
?.colorAccentBackground};
|
||||
}
|
||||
|
||||
.page {
|
||||
background-size: contain;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page:not(.page--first) {
|
||||
background-image: ${this.documentSettings.theme?.pageBackground ??
|
||||
"none"};
|
||||
}
|
||||
|
||||
.page.page--first {
|
||||
background-image: ${this.documentSettings.theme
|
||||
?.coverPageBackground ??
|
||||
this.documentSettings.theme?.pageBackground ??
|
||||
"none"};
|
||||
}
|
||||
</style>
|
||||
<div id="scaleWrapper">
|
||||
<dedocument-pagecontainer .printMode=${this.printMode}>
|
||||
<div
|
||||
class="page page__background ${this.pageNumber === 1
|
||||
? "page--first"
|
||||
: ""}"
|
||||
></div>
|
||||
${this.letterData
|
||||
? html`
|
||||
${this.documentSettings.enableDefaultHeader
|
||||
@@ -131,7 +182,18 @@ export class DePage extends DeesElement {
|
||||
.pageTotalNumber="${this.pageTotalNumber}"
|
||||
></dedocument-pageheader>
|
||||
`
|
||||
: ``}
|
||||
: null}
|
||||
|
||||
<!-- FOLD MARKS -->
|
||||
${this.documentSettings.enableFoldMarks === true
|
||||
? html` <div class="foldMark__wrapper">
|
||||
<span class="foldMark foldMark--start"></span>
|
||||
<span class="foldMark foldMark--center"></span>
|
||||
<span class="foldMark foldMark--end"></span>
|
||||
</div>`
|
||||
: null}
|
||||
|
||||
<!-- LETTER HEADER -->
|
||||
${this.pageNumber === 1
|
||||
? html`
|
||||
<dedocument-letterheader
|
||||
@@ -141,7 +203,9 @@ export class DePage extends DeesElement {
|
||||
.pageTotalNumber="${this.pageTotalNumber}"
|
||||
></dedocument-letterheader>
|
||||
`
|
||||
: html``}
|
||||
: null}
|
||||
|
||||
<!-- PAGE CONTENT -->
|
||||
<dedocument-pagecontent
|
||||
.letterData=${this.letterData}
|
||||
.documentSettings=${this.documentSettings}
|
||||
@@ -149,7 +213,9 @@ export class DePage extends DeesElement {
|
||||
.pageTotalNumber="${this.pageTotalNumber}"
|
||||
><slot></slot
|
||||
></dedocument-pagecontent>
|
||||
${this.documentSettings.enableDefaultFooter
|
||||
|
||||
<!-- DEFAULT FOOTER -->
|
||||
${this.documentSettings.enableDefaultFooter === true
|
||||
? html`
|
||||
<dedocument-pagefooter
|
||||
.letterData=${this.letterData}
|
||||
@@ -158,22 +224,19 @@ export class DePage extends DeesElement {
|
||||
.pageTotalNumber="${this.pageTotalNumber}"
|
||||
></dedocument-pagefooter>
|
||||
`
|
||||
: ``}
|
||||
: null}
|
||||
|
||||
<div class="versionOverlay">
|
||||
${this.letterData.versionInfo.type === 'draft'
|
||||
${this.letterData.versionInfo.type === "draft"
|
||||
? html`
|
||||
${this.documentSettings.enableTopDraftText
|
||||
? html`
|
||||
<div class="topInfo">
|
||||
Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM
|
||||
THIS.<br />
|
||||
-> Revision/Document version: ${this.letterData.versionInfo.version}
|
||||
</div>
|
||||
`
|
||||
: ``}
|
||||
<div class="bigDraftText">DRAFT</div>
|
||||
<div class="bigDraftText">
|
||||
${plugins.shared.translation.translate(
|
||||
this.documentSettings.languageCode,
|
||||
"overlay@@draft"
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: html``}
|
||||
: null}
|
||||
</div>
|
||||
`
|
||||
: html` <slot></slot> `}
|
||||
@@ -184,33 +247,37 @@ export class DePage extends DeesElement {
|
||||
|
||||
public async checkOverflow() {
|
||||
await this.elementDomReady;
|
||||
const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
|
||||
const pageContent = this.shadowRoot.querySelector("dedocument-pagecontent");
|
||||
return pageContent.checkOverflow();
|
||||
}
|
||||
|
||||
updated(changedProperties: Map<string | number | symbol, unknown>): void {
|
||||
super.updated(changedProperties);
|
||||
if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
|
||||
if (
|
||||
changedProperties.has("viewHeight") ||
|
||||
changedProperties.has("viewWidth")
|
||||
) {
|
||||
this.adjustScaling();
|
||||
}
|
||||
}
|
||||
|
||||
private adjustScaling() {
|
||||
const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
|
||||
const scaleWrapper: HTMLDivElement =
|
||||
this.shadowRoot.querySelector("#scaleWrapper");
|
||||
|
||||
if (!scaleWrapper) return;
|
||||
|
||||
let scale = 1;
|
||||
if (this.viewHeight) {
|
||||
scale = this.viewHeight / plugins.shared.a4Height;
|
||||
scale = this.viewHeight / plugins.shared.A4_HEIGHT;
|
||||
} else if (this.viewWidth) {
|
||||
scale = this.viewWidth / plugins.shared.a4Width;
|
||||
scale = this.viewWidth / plugins.shared.A4_WIDTH;
|
||||
}
|
||||
scaleWrapper.style.transform = `scale(${scale})`;
|
||||
|
||||
// Adjust the outer dimensions so they match the scaled content
|
||||
|
||||
this.style.width = `${plugins.shared.a4Width * scale}px`;
|
||||
this.style.height = `${plugins.shared.a4Height * scale}px`;
|
||||
this.style.width = `${plugins.shared.A4_WIDTH * scale}px`;
|
||||
this.style.height = `${plugins.shared.A4_HEIGHT * scale}px`;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user