feat(dees-tile): unify tile metadata into a consistent bottom info bar and add PDF file-size display
This commit is contained in:
10
changelog.md
10
changelog.md
@@ -1,5 +1,15 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-03-10 - 3.46.0 - feat(dees-tile)
|
||||
unify tile metadata into a consistent bottom info bar and add PDF file-size display
|
||||
|
||||
- Introduce renderBottomBar() hook in DeesTileBase and remove per-component bottom badges/labels in favor of a unified info bar.
|
||||
- Implement renderBottomBar in audio, video, image, folder, note and pdf tiles to show label, counts, dimensions, duration, language/line info and page counts.
|
||||
- PDF tile: add fileSize state, attempt to read download info and display formatted file size in the info bar; show currentPreviewPage/pageCount when hovering.
|
||||
- Styling changes: replace legacy badges/labels with .tile-info-bar (.info-label, .info-detail, .info-spacer); adjust padding, font sizing, z-index, and remove hover translate for clickable tiles.
|
||||
- PDF demo and styles: use cssManager theming for demo colors and adjust preview padding.
|
||||
- Bump devDependencies: @git.zone/tswatch -> ^3.3.0 and @types/node -> ^25.4.0
|
||||
|
||||
## 2026-03-10 - 3.45.1 - fix(dees-appui)
|
||||
substitute route params into URL hash when navigating
|
||||
|
||||
|
||||
@@ -47,9 +47,9 @@
|
||||
"@git.zone/tsbuild": "^4.3.0",
|
||||
"@git.zone/tsbundle": "^2.9.1",
|
||||
"@git.zone/tstest": "^3.3.2",
|
||||
"@git.zone/tswatch": "^3.2.5",
|
||||
"@git.zone/tswatch": "^3.3.0",
|
||||
"@push.rocks/projectinfo": "^5.0.2",
|
||||
"@types/node": "^25.3.5"
|
||||
"@types/node": "^25.4.0"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
|
||||
109
pnpm-lock.yaml
generated
109
pnpm-lock.yaml
generated
@@ -97,14 +97,14 @@ importers:
|
||||
specifier: ^3.3.2
|
||||
version: 3.3.2(socks@2.8.7)(typescript@5.9.3)
|
||||
'@git.zone/tswatch':
|
||||
specifier: ^3.2.5
|
||||
version: 3.2.5(@tiptap/pm@2.27.2)
|
||||
specifier: ^3.3.0
|
||||
version: 3.3.0(@tiptap/pm@2.27.2)
|
||||
'@push.rocks/projectinfo':
|
||||
specifier: ^5.0.2
|
||||
version: 5.0.2
|
||||
'@types/node':
|
||||
specifier: ^25.3.5
|
||||
version: 25.3.5
|
||||
specifier: ^25.4.0
|
||||
version: 25.4.0
|
||||
|
||||
packages:
|
||||
|
||||
@@ -302,14 +302,14 @@ packages:
|
||||
'@cfworker/json-schema@4.1.1':
|
||||
resolution: {integrity: sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og==}
|
||||
|
||||
'@cloudflare/workers-types@4.20260307.1':
|
||||
resolution: {integrity: sha512-0PvWLVVD6Q64V/XhollYtc8H35Vxm2rZi8bkZbEr3lK+mNgd2FBBVhlZ6A3saAUq3giRF4US/UfU/3a8i1PEcg==}
|
||||
'@cloudflare/workers-types@4.20260310.1':
|
||||
resolution: {integrity: sha512-Cg4gyGDtfimNMgBr2h06aGR5Bt8puUbblyzPNZN55mBfVYCTWwQiUd9PrbkcoddKrWHlsy0ACH/16dAeGf5BQg==}
|
||||
|
||||
'@configvault.io/interfaces@1.0.17':
|
||||
resolution: {integrity: sha512-bEcCUR2VBDJsTin8HQh8Uw/mlYl2v8A3jMIaQ+MTB9Hrqd6CZL2dL7iJdWyFl/3EIX+LDxWFR+Oq7liIq7w+1Q==}
|
||||
|
||||
'@design.estate/dees-catalog@3.43.3':
|
||||
resolution: {integrity: sha512-GjTePdwqNBL4isMOx4Ibei6pgK55H+DccbtgyNqjHRBz3LL14mo809ebjY2IZOVobswyzuTcNFvhfiqFP4/HLg==}
|
||||
'@design.estate/dees-catalog@3.45.1':
|
||||
resolution: {integrity: sha512-XVRof0OrjG74Xo4q+RRiZq2TMwBzvxZGY8TAN8+ozPUU2QJiHyo7sZ8E2sSh0V1L3sEWDWAMr1i08RlHy3eQfw==}
|
||||
|
||||
'@design.estate/dees-comms@1.0.30':
|
||||
resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
|
||||
@@ -528,8 +528,8 @@ packages:
|
||||
resolution: {integrity: sha512-1R3VMEg+VMeMlSTIzIYTAsRIHuZMlpWmG1j4Q1cPSSw3jOp79OD7sJxfHkqy4bO/nTTcKMGXs5DD1nhT7Xno8w==}
|
||||
hasBin: true
|
||||
|
||||
'@git.zone/tswatch@3.2.5':
|
||||
resolution: {integrity: sha512-0T+B4ufh4TYG2LG90W0PIUUE2K5bsjVbo0jgHfMyYsfUl1E4kvR+kfeCbZ0fwSzG/1sgVKzSrr1SO5LXcOERlQ==}
|
||||
'@git.zone/tswatch@3.3.0':
|
||||
resolution: {integrity: sha512-2d5G4L6RpEGW7d16xz6Gg6P/JnrMncNRDy74WaFrNjdn2fe5yIPtqoiQ/9LTbxqk67snj0gN2xtlQTXiN+Xa/w==}
|
||||
hasBin: true
|
||||
|
||||
'@happy-dom/global-registrator@15.11.7':
|
||||
@@ -1278,9 +1278,6 @@ packages:
|
||||
'@push.rocks/taskbuffer@3.5.0':
|
||||
resolution: {integrity: sha512-Y9WwIEIyp6oVFdj06j84tfrZIvjhbMb3DF52rYxlTeYLk3W7RPhSg1bGPCbtkXWeKdBrSe37V90BkOG7Qq8Pqg==}
|
||||
|
||||
'@push.rocks/taskbuffer@4.2.1':
|
||||
resolution: {integrity: sha512-F3aizWLGWdAz7wSJqOzjwVgo1VQJcxTbHUjDN/Pqxw0WMQUwODRGbhgy4zLag7bOyE4tc8Jv7yid7Bjmn5hKdg==}
|
||||
|
||||
'@push.rocks/webrequest@4.0.5':
|
||||
resolution: {integrity: sha512-wVSCaXqJ9Vh+rbwVz0wDl46dYz4rnwwSrm5vbVXKbuH6oKTPF0YRoujeJPqRltIn64RVGdLeY9/6ix+ZCrzhsg==}
|
||||
|
||||
@@ -1945,8 +1942,8 @@ packages:
|
||||
'@types/node@22.19.15':
|
||||
resolution: {integrity: sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==}
|
||||
|
||||
'@types/node@25.3.5':
|
||||
resolution: {integrity: sha512-oX8xrhvpiyRCQkG1MFchB09f+cXftgIXb3a7UUa4Y3wpmZPw5tyZGTLWhlESOLq1Rq6oDlc8npVU2/9xiCuXMA==}
|
||||
'@types/node@25.4.0':
|
||||
resolution: {integrity: sha512-9wLpoeWuBlcbBpOY3XmzSTG3oscB6xjBEEtn+pYXTfhyXhIxC5FsBer2KTopBlvKEiW9l13po9fq+SJY/5lkhw==}
|
||||
|
||||
'@types/ping@0.4.4':
|
||||
resolution: {integrity: sha512-ifvo6w2f5eJYlXm+HiVx67iJe8WZp87sfa683nlqED5Vnt9Z93onkokNoWqOG21EaE8fMxyKPobE+mkPEyxsdw==}
|
||||
@@ -2502,6 +2499,9 @@ packages:
|
||||
fast-xml-builder@1.0.0:
|
||||
resolution: {integrity: sha512-fpZuDogrAgnyt9oDDz+5DBz0zgPdPZz6D4IR7iESxRXElrlGTRkHJ9eEt+SACRJwT0FNFrt71DFQIUFBJfX/uQ==}
|
||||
|
||||
fast-xml-builder@1.1.0:
|
||||
resolution: {integrity: sha512-7mtITW/we2/wTUZqMyBOR2F8xP4CRxMiSEcQxPIqdRWdO2L/HZSOlzoNyghmyDwNB8BDxePooV1ZTJpkOUhdRg==}
|
||||
|
||||
fast-xml-parser@4.5.4:
|
||||
resolution: {integrity: sha512-jE8ugADnYOBsu1uaoayVl1tVKAMNOXyjwvv2U6udEA2ORBhDooJDWoGxTkhd4Qn4yh59JVVt/pKXtjPwx9OguQ==}
|
||||
hasBin: true
|
||||
@@ -2510,8 +2510,8 @@ packages:
|
||||
resolution: {integrity: sha512-BQ30U1mKkvXQXXkAGcuyUA/GA26oEB7NzOtsxCDtyu62sjGw5QraKFhx2Em3WQNjPw9PG6MQ9yuIIgkSDfGu5A==}
|
||||
hasBin: true
|
||||
|
||||
fast-xml-parser@5.4.2:
|
||||
resolution: {integrity: sha512-pw/6pIl4k0CSpElPEJhDppLzaixDEuWui2CUQQBH/ECDf7+y6YwA4Gf7Tyb0Rfe4DIMuZipYj4AEL0nACKglvQ==}
|
||||
fast-xml-parser@5.5.1:
|
||||
resolution: {integrity: sha512-JTpMz8P5mDoNYzXTmTT/xzWjFiCWi0U+UQTJtrFH9muXsr2RqtXZPbnCW5h2mKsOd4u3XcPWCvDSrnaBPlUcMQ==}
|
||||
hasBin: true
|
||||
|
||||
fault@2.0.1:
|
||||
@@ -2897,9 +2897,6 @@ packages:
|
||||
resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
lucide@0.564.0:
|
||||
resolution: {integrity: sha512-FasyXKHWon773WIl3HeCQpd5xS6E0aLjqxiQStlHNKktni+HDncc1sqY+6vRUbCfmDsIaKQz43EEQLAUDLZO0g==}
|
||||
|
||||
lucide@0.577.0:
|
||||
resolution: {integrity: sha512-PpC/m5eOItp/WU/GlQPFBXDOhq6HibL73KzYP37OX3LM7VmzWQF8voEj8QRWUFvy9FIKfeDQkWYoyS1D/MdWFA==}
|
||||
|
||||
@@ -3300,6 +3297,10 @@ packages:
|
||||
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
path-expression-matcher@1.1.2:
|
||||
resolution: {integrity: sha512-LXWqJmcpp2BKOEmgt4CyuESFmBfPuhJlAHKJsFzuJU6CxErWk75BrO+Ni77M9OxHN6dCYKM4vj+21Z6cOL96YQ==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
|
||||
path-is-absolute@1.0.1:
|
||||
resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -4044,8 +4045,8 @@ snapshots:
|
||||
'@api.global/typedrequest': 3.3.0
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@api.global/typedsocket': 4.1.2(@push.rocks/smartserve@2.0.1)
|
||||
'@cloudflare/workers-types': 4.20260307.1
|
||||
'@design.estate/dees-catalog': 3.43.3(@tiptap/pm@2.27.2)
|
||||
'@cloudflare/workers-types': 4.20260310.1
|
||||
'@design.estate/dees-catalog': 3.45.1(@tiptap/pm@2.27.2)
|
||||
'@design.estate/dees-comms': 1.0.30
|
||||
'@push.rocks/lik': 6.3.1
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
@@ -4555,13 +4556,13 @@ snapshots:
|
||||
|
||||
'@cfworker/json-schema@4.1.1': {}
|
||||
|
||||
'@cloudflare/workers-types@4.20260307.1': {}
|
||||
'@cloudflare/workers-types@4.20260310.1': {}
|
||||
|
||||
'@configvault.io/interfaces@1.0.17':
|
||||
dependencies:
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
|
||||
'@design.estate/dees-catalog@3.43.3(@tiptap/pm@2.27.2)':
|
||||
'@design.estate/dees-catalog@3.45.1(@tiptap/pm@2.27.2)':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.9
|
||||
'@design.estate/dees-element': 2.1.6
|
||||
@@ -4584,7 +4585,7 @@ snapshots:
|
||||
apexcharts: 5.10.3
|
||||
highlight.js: 11.11.1
|
||||
ibantools: 4.5.1
|
||||
lucide: 0.564.0
|
||||
lucide: 0.577.0
|
||||
monaco-editor: 0.55.1
|
||||
pdfjs-dist: 4.10.38
|
||||
xterm: 5.3.0
|
||||
@@ -4891,7 +4892,7 @@ snapshots:
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@git.zone/tswatch@3.2.5(@tiptap/pm@2.27.2)':
|
||||
'@git.zone/tswatch@3.3.0(@tiptap/pm@2.27.2)':
|
||||
dependencies:
|
||||
'@api.global/typedserver': 8.4.2(@tiptap/pm@2.27.2)
|
||||
'@git.zone/tsbundle': 2.9.1
|
||||
@@ -4908,7 +4909,6 @@ snapshots:
|
||||
'@push.rocks/smartlog-destination-local': 9.0.2
|
||||
'@push.rocks/smartshell': 3.3.7
|
||||
'@push.rocks/smartwatch': 6.3.0
|
||||
'@push.rocks/taskbuffer': 4.2.1
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- '@swc/helpers'
|
||||
@@ -6298,7 +6298,7 @@ snapshots:
|
||||
|
||||
'@push.rocks/smartxml@2.0.0':
|
||||
dependencies:
|
||||
fast-xml-parser: 5.4.2
|
||||
fast-xml-parser: 5.5.1
|
||||
|
||||
'@push.rocks/smartyaml@2.0.5':
|
||||
dependencies:
|
||||
@@ -6325,22 +6325,6 @@ snapshots:
|
||||
- supports-color
|
||||
- vue
|
||||
|
||||
'@push.rocks/taskbuffer@4.2.1':
|
||||
dependencies:
|
||||
'@design.estate/dees-element': 2.1.6
|
||||
'@push.rocks/lik': 6.3.1
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
'@push.rocks/smartlog': 3.2.1
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/smartrx': 3.0.10
|
||||
'@push.rocks/smarttime': 4.2.3
|
||||
'@push.rocks/smartunique': 3.0.9
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- react
|
||||
- supports-color
|
||||
- vue
|
||||
|
||||
'@push.rocks/webrequest@4.0.5':
|
||||
dependencies:
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
@@ -7041,7 +7025,7 @@ snapshots:
|
||||
|
||||
'@types/clean-css@4.2.11':
|
||||
dependencies:
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
source-map: 0.6.1
|
||||
|
||||
'@types/debug@4.1.12':
|
||||
@@ -7050,17 +7034,17 @@ snapshots:
|
||||
|
||||
'@types/from2@2.3.6':
|
||||
dependencies:
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
|
||||
'@types/fs-extra@11.0.4':
|
||||
dependencies:
|
||||
'@types/jsonfile': 6.1.4
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
|
||||
'@types/glob@8.1.0':
|
||||
dependencies:
|
||||
'@types/minimatch': 5.1.2
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
|
||||
'@types/hast@3.0.4':
|
||||
dependencies:
|
||||
@@ -7080,7 +7064,7 @@ snapshots:
|
||||
|
||||
'@types/jsonfile@6.1.4':
|
||||
dependencies:
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
|
||||
'@types/linkify-it@5.0.0': {}
|
||||
|
||||
@@ -7103,11 +7087,11 @@ snapshots:
|
||||
|
||||
'@types/mute-stream@0.0.4':
|
||||
dependencies:
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
|
||||
'@types/node-forge@1.3.14':
|
||||
dependencies:
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
|
||||
'@types/node@16.9.1': {}
|
||||
|
||||
@@ -7115,7 +7099,7 @@ snapshots:
|
||||
dependencies:
|
||||
undici-types: 6.21.0
|
||||
|
||||
'@types/node@25.3.5':
|
||||
'@types/node@25.4.0':
|
||||
dependencies:
|
||||
undici-types: 7.18.2
|
||||
|
||||
@@ -7131,11 +7115,11 @@ snapshots:
|
||||
|
||||
'@types/tar-stream@3.1.4':
|
||||
dependencies:
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
|
||||
'@types/through2@2.0.41':
|
||||
dependencies:
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
|
||||
'@types/trusted-types@2.0.7': {}
|
||||
|
||||
@@ -7161,11 +7145,11 @@ snapshots:
|
||||
|
||||
'@types/ws@8.18.1':
|
||||
dependencies:
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
|
||||
'@types/yauzl@2.10.3':
|
||||
dependencies:
|
||||
'@types/node': 25.3.5
|
||||
'@types/node': 25.4.0
|
||||
optional: true
|
||||
|
||||
'@ungap/structured-clone@1.3.0': {}
|
||||
@@ -7638,6 +7622,10 @@ snapshots:
|
||||
|
||||
fast-xml-builder@1.0.0: {}
|
||||
|
||||
fast-xml-builder@1.1.0:
|
||||
dependencies:
|
||||
path-expression-matcher: 1.1.2
|
||||
|
||||
fast-xml-parser@4.5.4:
|
||||
dependencies:
|
||||
strnum: 1.1.2
|
||||
@@ -7647,9 +7635,10 @@ snapshots:
|
||||
fast-xml-builder: 1.0.0
|
||||
strnum: 2.2.0
|
||||
|
||||
fast-xml-parser@5.4.2:
|
||||
fast-xml-parser@5.5.1:
|
||||
dependencies:
|
||||
fast-xml-builder: 1.0.0
|
||||
fast-xml-builder: 1.1.0
|
||||
path-expression-matcher: 1.1.2
|
||||
strnum: 2.2.0
|
||||
|
||||
fault@2.0.1:
|
||||
@@ -8110,8 +8099,6 @@ snapshots:
|
||||
|
||||
lru-cache@7.18.3: {}
|
||||
|
||||
lucide@0.564.0: {}
|
||||
|
||||
lucide@0.577.0: {}
|
||||
|
||||
make-dir@3.1.0:
|
||||
@@ -8698,6 +8685,8 @@ snapshots:
|
||||
|
||||
path-exists@4.0.0: {}
|
||||
|
||||
path-expression-matcher@1.1.2: {}
|
||||
|
||||
path-is-absolute@1.0.1: {}
|
||||
|
||||
path-key@3.1.1: {}
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '3.45.1',
|
||||
version: '3.46.0',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
@@ -162,10 +162,6 @@ export class DeesTileAudio extends DeesTileBase {
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
${this.duration > 0 ? html`
|
||||
<div class="tile-badge-corner">${this.formatTime(this.duration)}</div>
|
||||
` : ''}
|
||||
|
||||
<div class="play-overlay">
|
||||
<div class="play-circle">
|
||||
<dees-icon icon="lucide:Play"></dees-icon>
|
||||
@@ -181,6 +177,17 @@ export class DeesTileAudio extends DeesTileBase {
|
||||
`;
|
||||
}
|
||||
|
||||
protected renderBottomBar(): TemplateResult | string {
|
||||
if (!this.label && !this.duration) return '';
|
||||
return html`
|
||||
<div class="tile-info-bar">
|
||||
${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
|
||||
<span class="info-spacer"></span>
|
||||
${this.duration > 0 ? html`<span class="info-detail">${this.formatTime(this.duration)}</span>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected getTileClickDetail(): Record<string, unknown> {
|
||||
return {
|
||||
src: this.src,
|
||||
|
||||
@@ -145,10 +145,6 @@ export class DeesTileFolder extends DeesTileBase {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile-badge-corner">
|
||||
${this.items.length} item${this.items.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
|
||||
${this.clickable ? html`
|
||||
<div class="tile-overlay">
|
||||
<dees-icon icon="lucide:FolderOpen"></dees-icon>
|
||||
@@ -158,6 +154,17 @@ export class DeesTileFolder extends DeesTileBase {
|
||||
`;
|
||||
}
|
||||
|
||||
protected renderBottomBar(): TemplateResult | string {
|
||||
if (!this.label && !this.items.length) return '';
|
||||
return html`
|
||||
<div class="tile-info-bar">
|
||||
${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
|
||||
<span class="info-spacer"></span>
|
||||
<span class="info-detail">${this.items.length} item${this.items.length !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected getTileClickDetail(): Record<string, unknown> {
|
||||
return {
|
||||
name: this.name,
|
||||
|
||||
@@ -55,14 +55,6 @@ export class DeesTileImage extends DeesTileBase {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tile-badge-topright.dimension-badge {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.tile-container.clickable:hover .tile-badge-topright.dimension-badge {
|
||||
opacity: 1;
|
||||
}
|
||||
`,
|
||||
] as any;
|
||||
|
||||
@@ -97,19 +89,6 @@ export class DeesTileImage extends DeesTileBase {
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
${this.imageWidth > 0 && this.imageHeight > 0 ? html`
|
||||
<div class="tile-badge-topright dimension-badge">
|
||||
${this.imageWidth} × ${this.imageHeight}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${this.imageLoaded ? html`
|
||||
<div class="tile-info">
|
||||
<dees-icon icon="lucide:Image"></dees-icon>
|
||||
<span class="tile-info-text">${this.imageWidth} × ${this.imageHeight}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${this.clickable ? html`
|
||||
<div class="tile-overlay">
|
||||
<dees-icon icon="lucide:Eye"></dees-icon>
|
||||
@@ -119,6 +98,19 @@ export class DeesTileImage extends DeesTileBase {
|
||||
`;
|
||||
}
|
||||
|
||||
protected renderBottomBar(): TemplateResult | string {
|
||||
if (!this.label && !(this.imageWidth > 0)) return '';
|
||||
return html`
|
||||
<div class="tile-info-bar">
|
||||
${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
|
||||
<span class="info-spacer"></span>
|
||||
${this.imageWidth > 0 && this.imageHeight > 0
|
||||
? html`<span class="info-detail">${this.imageWidth} × ${this.imageHeight}</span>`
|
||||
: ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected getTileClickDetail(): Record<string, unknown> {
|
||||
return {
|
||||
src: this.src,
|
||||
|
||||
@@ -81,14 +81,6 @@ export class DeesTileNote extends DeesTileBase {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tile-badge-topright.note-language {
|
||||
background: ${cssManager.bdTheme('hsl(215 20% 92%)', 'hsl(215 20% 88%)')};
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 50%)', 'hsl(215 16% 40%)')};
|
||||
font-size: 9px;
|
||||
text-transform: uppercase;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.note-lines {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -132,10 +124,6 @@ export class DeesTileNote extends DeesTileBase {
|
||||
|
||||
return html`
|
||||
<div class="note-content">
|
||||
${this.language ? html`
|
||||
<div class="tile-badge-topright note-language">${this.language}</div>
|
||||
` : ''}
|
||||
|
||||
${this.title ? html`
|
||||
<div class="note-header">
|
||||
<div class="note-title">${this.title}</div>
|
||||
@@ -147,11 +135,6 @@ export class DeesTileNote extends DeesTileBase {
|
||||
${!this.isHovering ? html`<div class="note-fade"></div>` : ''}
|
||||
</div>
|
||||
|
||||
${this.isHovering && lines.length > 12 ? html`
|
||||
<div class="tile-badge-corner">
|
||||
Line ${this.getVisibleLineRange(lines.length)}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
${this.clickable ? html`
|
||||
@@ -163,6 +146,21 @@ export class DeesTileNote extends DeesTileBase {
|
||||
`;
|
||||
}
|
||||
|
||||
protected renderBottomBar(): TemplateResult | string {
|
||||
const lines = this.content.split('\n');
|
||||
if (!this.label && !this.language && !lines.length) return '';
|
||||
return html`
|
||||
<div class="tile-info-bar">
|
||||
${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
|
||||
<span class="info-spacer"></span>
|
||||
${this.language ? html`<span class="info-detail">${this.language.toUpperCase()}</span>` : ''}
|
||||
${this.isHovering && lines.length > 12
|
||||
? html`<span class="info-detail">Line ${this.getVisibleLineRange(lines.length)}</span>`
|
||||
: html`<span class="info-detail">${lines.length} lines</span>`}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected getTileClickDetail(): Record<string, unknown> {
|
||||
return {
|
||||
title: this.title,
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { property, html, customElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
|
||||
import { property, state, html, customElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
|
||||
import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
|
||||
import { tileBaseStyles } from '../dees-tile-shared/styles.js';
|
||||
import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
|
||||
import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js';
|
||||
import { PerformanceMonitor, throttle } from '../dees-pdf-shared/utils.js';
|
||||
import { PerformanceMonitor, throttle, formatFileSize } from '../dees-pdf-shared/utils.js';
|
||||
import { tilePdfStyles } from './styles.js';
|
||||
import { demo as demoFunc } from './demo.js';
|
||||
|
||||
@@ -37,6 +37,9 @@ export class DeesTilePdf extends DeesTileBase {
|
||||
@property({ type: Boolean })
|
||||
accessor isA4Format: boolean = true;
|
||||
|
||||
@state()
|
||||
accessor fileSize: number = 0;
|
||||
|
||||
private renderPagesTask: Promise<void> | null = null;
|
||||
private renderPagesQueued: boolean = false;
|
||||
private pdfDocument: any;
|
||||
@@ -54,18 +57,6 @@ export class DeesTilePdf extends DeesTileBase {
|
||||
></canvas>
|
||||
</div>
|
||||
|
||||
${this.pageCount > 1 && this.isHovering ? html`
|
||||
<div class="tile-badge">
|
||||
Page ${this.currentPreviewPage} of ${this.pageCount}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${this.pageCount > 0 && !this.isHovering ? html`
|
||||
<div class="tile-badge-corner">
|
||||
${this.pageCount} page${this.pageCount > 1 ? 's' : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${this.clickable ? html`
|
||||
<div class="tile-overlay">
|
||||
<dees-icon icon="lucide:Eye"></dees-icon>
|
||||
@@ -75,6 +66,22 @@ export class DeesTilePdf extends DeesTileBase {
|
||||
`;
|
||||
}
|
||||
|
||||
protected renderBottomBar(): TemplateResult | string {
|
||||
if (!this.pageCount && !this.label) return '';
|
||||
return html`
|
||||
<div class="tile-info-bar">
|
||||
${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
|
||||
<span class="info-spacer"></span>
|
||||
${this.pageCount > 1 && this.isHovering
|
||||
? html`<span class="info-detail">${this.currentPreviewPage}/${this.pageCount}</span>`
|
||||
: this.pageCount > 0
|
||||
? html`<span class="info-detail">${this.pageCount} pg</span>`
|
||||
: ''}
|
||||
${this.fileSize > 0 ? html`<span class="info-detail">${formatFileSize(this.fileSize)}</span>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected getTileClickDetail(): Record<string, unknown> {
|
||||
return {
|
||||
pdfUrl: this.pdfUrl,
|
||||
@@ -141,6 +148,13 @@ export class DeesTilePdf extends DeesTileBase {
|
||||
this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
|
||||
this.pageCount = this.pdfDocument.numPages;
|
||||
this.currentPreviewPage = 1;
|
||||
|
||||
try {
|
||||
const downloadInfo = await this.pdfDocument.getDownloadInfo();
|
||||
this.fileSize = downloadInfo.length;
|
||||
} catch {
|
||||
// File size unavailable — not critical
|
||||
}
|
||||
this.loadedPdfUrl = this.pdfUrl;
|
||||
|
||||
this.loading = false;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import { html, cssManager } from '@design.estate/dees-element';
|
||||
|
||||
export const demo = () => {
|
||||
const samplePdfs = [
|
||||
@@ -29,7 +29,7 @@ export const demo = () => {
|
||||
<style>
|
||||
.demo-container {
|
||||
padding: 40px;
|
||||
background: #f5f5f5;
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
@@ -40,6 +40,7 @@ export const demo = () => {
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
}
|
||||
|
||||
.preview-grid {
|
||||
@@ -59,6 +60,7 @@ export const demo = () => {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
min-width: 100px;
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -10,10 +10,11 @@ export const tilePdfStyles = css`
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding: 8px 8px 28px 8px;
|
||||
}
|
||||
|
||||
.preview-stack.non-a4 {
|
||||
padding: 12px;
|
||||
padding: 12px 12px 28px 12px;
|
||||
}
|
||||
|
||||
.preview-canvas {
|
||||
|
||||
@@ -59,9 +59,7 @@ export abstract class DeesTileBase extends DeesElement {
|
||||
|
||||
${!this.loading && !this.error ? this.renderTileContent() : ''}
|
||||
|
||||
${this.label ? html`
|
||||
<div class="tile-label">${this.label}</div>
|
||||
` : ''}
|
||||
${this.renderBottomBar()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -69,6 +67,11 @@ export abstract class DeesTileBase extends DeesElement {
|
||||
/** Subclasses implement this to render their specific content */
|
||||
protected abstract renderTileContent(): TemplateResult;
|
||||
|
||||
/** Subclasses override this to render a bottom info bar with metadata */
|
||||
protected renderBottomBar(): TemplateResult | string {
|
||||
return '';
|
||||
}
|
||||
|
||||
public async connectedCallback(): Promise<void> {
|
||||
await super.connectedCallback();
|
||||
this.setupIntersectionObserver();
|
||||
|
||||
@@ -15,8 +15,9 @@ export const tileBaseStyles = [
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(215 20% 14%)')};
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
transition: box-shadow 0.2s ease;
|
||||
box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.24)')};
|
||||
|
||||
}
|
||||
|
||||
.tile-container.clickable {
|
||||
@@ -24,7 +25,6 @@ export const tileBaseStyles = [
|
||||
}
|
||||
|
||||
.tile-container.clickable:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.3)')};
|
||||
}
|
||||
|
||||
@@ -71,90 +71,39 @@ export const tileBaseStyles = [
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tile-info {
|
||||
.tile-info-bar {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
padding: 6px 10px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.92)', 'hsl(215 20% 12% / 0.92)')};
|
||||
border-radius: 6px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 4px 8px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.95)', 'hsl(215 20% 12% / 0.95)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tile-info dees-icon {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
|
||||
}
|
||||
|
||||
.tile-info-text {
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.tile-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
padding: 5px 8px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.7)', 'hsl(0 0% 100% / 0.9)')};
|
||||
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(12px);
|
||||
z-index: 15;
|
||||
pointer-events: none;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.tile-badge-corner {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
padding: 3px 8px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.6)', 'hsl(0 0% 100% / 0.85)')};
|
||||
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
z-index: 25;
|
||||
font-variant-numeric: tabular-nums;
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tile-badge-topright {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: 3px 8px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.6)', 'hsl(0 0% 100% / 0.85)')};
|
||||
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 15;
|
||||
pointer-events: none;
|
||||
.info-label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Shift bottom badges up when label is present */
|
||||
.tile-container:has(.tile-label) .tile-badge-corner {
|
||||
bottom: 33px;
|
||||
.info-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tile-container:has(.tile-label) .tile-info {
|
||||
bottom: 33px;
|
||||
.info-detail {
|
||||
white-space: nowrap;
|
||||
opacity: 0.7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tile-loading,
|
||||
@@ -200,40 +149,12 @@ export const tileBaseStyles = [
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tile-label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 6px 10px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.95)', 'hsl(215 20% 12% / 0.95)')};
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 35%)', 'hsl(215 16% 75%)')};
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Size variants */
|
||||
:host([size="small"]) .tile-container {
|
||||
width: 150px;
|
||||
|
||||
@@ -140,10 +140,6 @@ export class DeesTileVideo extends DeesTileBase {
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
${this.duration > 0 ? html`
|
||||
<div class="tile-badge-corner">${this.formatTime(this.duration)}</div>
|
||||
` : ''}
|
||||
|
||||
${!this.isHovering ? html`
|
||||
<div class="play-overlay">
|
||||
<dees-icon icon="lucide:Play"></dees-icon>
|
||||
@@ -159,6 +155,17 @@ export class DeesTileVideo extends DeesTileBase {
|
||||
`;
|
||||
}
|
||||
|
||||
protected renderBottomBar(): TemplateResult | string {
|
||||
if (!this.label && !this.duration) return '';
|
||||
return html`
|
||||
<div class="tile-info-bar">
|
||||
${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
|
||||
<span class="info-spacer"></span>
|
||||
${this.duration > 0 ? html`<span class="info-detail">${this.formatTime(this.duration)}</span>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected getTileClickDetail(): Record<string, unknown> {
|
||||
return {
|
||||
src: this.src,
|
||||
|
||||
Reference in New Issue
Block a user