feat(dees-tile): unify tile metadata into a consistent bottom info bar and add PDF file-size display
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user