diff --git a/docs/features/README.md b/docs/features/README.md index 6b21d35..80dc02a 100644 --- a/docs/features/README.md +++ b/docs/features/README.md @@ -7,6 +7,7 @@ DataCards offers a wide range of features to display your Dataview query results - **Presets**: Choose from multiple card layouts optimized for different content types - **Image Support**: Display images from frontmatter properties - **Property Customization**: Control which properties appear and how they're displayed +- **Visual Enhancements**: Automatic theme integration and text truncation options - **Mobile Optimization**: Responsive design with mobile-specific settings - **Flexible Styling**: Customize appearance with various settings - **Dynamic Updates**: Automatically update cards when properties change diff --git a/docs/features/advanced-options.md b/docs/features/advanced-options.md index a66f7b3..5490bc3 100644 --- a/docs/features/advanced-options.md +++ b/docs/features/advanced-options.md @@ -77,6 +77,16 @@ Enable or disable subtle shadows: enableShadows: false ``` +### Text Truncation + +Truncate long property values with ellipsis for cleaner layouts: + +``` +truncateText: true +``` + +This prevents long text from wrapping to multiple lines and instead shows "..." when text exceeds the available width. Useful for maintaining consistent card heights and clean layouts. + ## Mobile Optimization Customize how cards appear on mobile devices: @@ -140,6 +150,7 @@ Here's a complete list of all supported settings: | `propertiesAlign` | Text alignment for properties and their labels (`left`, `center`, `right`) | `left` | | `titleAlign` | Text alignment for the title/filename (`left`, `center`, `right`) | `left` | | `fontSize` | Text size for all card elements (`larger`, `large`, `default`, `small`, `smaller`) | `default` | +| `truncateText` | Truncate long property values with ellipsis | `false` | | `booleanDisplayMode` | How to display boolean values (`both`, `checkbox`, `text`) | `both` | | `showBooleanLabels` | Whether to show text labels for boolean values | `true` | | `booleanTrueText` | Custom text for true values | `true` | @@ -207,3 +218,15 @@ contentHeight: 250px titleAlign: center propertiesAlign: left ``` + +### Text Truncation Example + +```datacards +TABLE file.link, description, tags FROM #articles +SORT file.mtime DESC + +// Settings +preset: compact +truncateText: true +fontSize: small +``` diff --git a/docs/settings-reference.md b/docs/settings-reference.md index 9f4b0df..ff772fa 100644 --- a/docs/settings-reference.md +++ b/docs/settings-reference.md @@ -53,6 +53,7 @@ imageProperty: cover | `propertiesAlign` | Text alignment for properties | `left` | `left`, `center`, `right` | | `titleAlign` | Text alignment for title | `left` | `left`, `center`, `right` | | `fontSize` | Text size for all elements | `default` | `larger`, `large`, `default`, `small`, `smaller` | +| `truncateText` | Truncate long text with ellipsis | `false` | `true`, `false` | | **Layout Settings** | | | | | `dynamicColumns` | Auto-adjust columns based on width | `false` | `true`, `false` | | `minCardWidth` | Minimum card width for dynamic layout | `250px` | CSS value (e.g., `300px`) | @@ -134,4 +135,16 @@ preset: grid imageProperty: cover dynamicColumns: true minCardWidth: 280px +``` + +### Text Truncation Example + +```datacards +TABLE file.link, author, description, tags FROM #articles +SORT file.mtime DESC + +// Settings +preset: compact +truncateText: true +fontSize: small ``` \ No newline at end of file diff --git a/src/models/settings.ts b/src/models/settings.ts index 07e53cf..8ba16c6 100644 --- a/src/models/settings.ts +++ b/src/models/settings.ts @@ -60,6 +60,7 @@ export interface DataCardsSettings { propertiesAlign: 'left' | 'center' | 'right'; // Alignment for properties and labels titleAlign: 'left' | 'center' | 'right'; // Alignment for the title (filename) fontSize: FontSize; // Font size for all text elements + truncateText: boolean; // Enable text truncation with ellipsis for long property values // Boolean display settings booleanDisplayMode: BooleanDisplayMode; // How to display boolean values @@ -130,6 +131,7 @@ export const DEFAULT_SETTINGS: DataCardsSettings = { propertiesAlign: 'left', // Default to left alignment titleAlign: 'left', // Default to left alignment fontSize: 'default', // Default font size + truncateText: false, // Default to showing full text // Boolean display settings booleanDisplayMode: 'both', // Default to showing both checkbox and text diff --git a/src/services/renderer.ts b/src/services/renderer.ts index 77a8878..4581e1e 100644 --- a/src/services/renderer.ts +++ b/src/services/renderer.ts @@ -140,6 +140,11 @@ export class RendererService { cardsContainer.addClass('datacards-no-shadows'); } + // Add truncate text class if enabled + if (settings.truncateText) { + cardsContainer.addClass('datacards-truncate-text'); + } + // Apply font size class if specified if (settings.fontSize && settings.fontSize !== 'default') { cardsContainer.addClass(`datacards-font-${settings.fontSize}`); diff --git a/src/ui/settings-tab.ts b/src/ui/settings-tab.ts index 2ea893f..d50a783 100644 --- a/src/ui/settings-tab.ts +++ b/src/ui/settings-tab.ts @@ -180,6 +180,16 @@ export class DataCardsSettingTab extends PluginSettingTab { await this.plugin.saveSettings(); })); + new Setting(containerEl) + .setName('Truncate long text') + .setDesc('Add ellipsis (...) to property values that are too long to fit on one line') + .addToggle(toggle => toggle + .setValue(this.plugin.settings.truncateText) + .onChange(async (value) => { + this.plugin.settings.truncateText = value; + await this.plugin.saveSettings(); + })); + // Card Content Settings new Setting(containerEl).setName('Card content').setHeading(); diff --git a/styles.css b/styles.css index 13ce98f..e93180e 100644 --- a/styles.css +++ b/styles.css @@ -550,7 +550,7 @@ input[data-boolean-value="false"].datacards-checkbox { padding: 2px 8px; border-radius: 12px; background-color: var(--background-modifier-border); - color: var(--text-muted); + color: var(--interactive-accent); font-size: 0.8em; text-decoration: none; } @@ -564,7 +564,7 @@ a.datacards-tag:hover { /* Internal links */ .datacards-property-value .internal-link { - color: var(--text-accent); + color: var(--interactive-accent); text-decoration: none; } @@ -580,7 +580,7 @@ a.datacards-tag:hover { .datacards-file-property .internal-link { font-size: 1.2em; font-weight: 600; - color: var(--text-accent); + color: var(--interactive-accent); text-decoration: none; } @@ -641,6 +641,13 @@ a.datacards-tag:hover { text-decoration: underline; } +/* Text truncation */ +.datacards-truncate-text .datacards-property-value { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + /* Preset variations */ /* Grid preset - Balanced default layout for most use cases */