From d8ee60e19e42298cbbdc137586b39be750d0169e Mon Sep 17 00:00:00 2001 From: Ross Keenan Date: Sat, 5 Feb 2022 07:55:26 +0200 Subject: [PATCH] style(List/Matrix View): :lipstick: Option to wrap Matrix View items, or trim (Fix #305) --- src/Components/Lists.svelte | 9 +++- src/Components/Matrix.svelte | 17 ++++++- src/Settings/MatrixViewSettings.ts | 76 +++++++++++++++++------------- src/constants.ts | 1 + src/interfaces.ts | 1 + 5 files changed, 66 insertions(+), 38 deletions(-) diff --git a/src/Components/Lists.svelte b/src/Components/Lists.svelte index 01f0c14d..4157d525 100644 --- a/src/Components/Lists.svelte +++ b/src/Components/Lists.svelte @@ -16,6 +16,7 @@ rlLeaf, treatCurrNodeAsImpliedSibling, showRelationType, + overflowMLView, } = settings; @@ -43,7 +44,9 @@ {#each realItems as { alt, cls, implied, to }}
  • await openOrSwitch(app, to, e)} on:mouseover={(e) => hoverPreview(e, matrixView, to)} > @@ -68,7 +71,9 @@ : ''}" >
    await openOrSwitch(app, to, e)} on:mouseover={(e) => hoverPreview(e, matrixView, to)} aria-label={parent ?? ""} diff --git a/src/Components/Matrix.svelte b/src/Components/Matrix.svelte index 560a14b4..6daff38e 100644 --- a/src/Components/Matrix.svelte +++ b/src/Components/Matrix.svelte @@ -17,6 +17,7 @@ rlLeaf, treatCurrNodeAsImpliedSibling, showRelationType, + overflowMLView, } = settings; @@ -44,7 +45,9 @@ {#each realItems as { alt, cls, implied, to }}
  • await openOrSwitch(app, to, e)} on:mouseover={(event) => hoverPreview(event, matrixView, to)} @@ -74,7 +77,9 @@ : ''}" >
    await openOrSwitch(app, to, e)} on:mouseover={(e) => hoverPreview(e, matrixView, to)} aria-label={parent ? "↑ " + parent : ""} @@ -137,4 +142,12 @@ .BC-Matrix li { margin: 0.1em; } + + .BC-Matrix .BC-Link.overflow { + width: 100%; + padding-right: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } diff --git a/src/Settings/MatrixViewSettings.ts b/src/Settings/MatrixViewSettings.ts index 80d3c3f8..5eb48bfc 100644 --- a/src/Settings/MatrixViewSettings.ts +++ b/src/Settings/MatrixViewSettings.ts @@ -24,19 +24,18 @@ export function addMatrixViewSettings( }) ); - // TODO I don't think this setting works anymore. I removed it's functionality when adding multiple hierarchies - // new Setting(MLViewDetails) - // .setName("Show all field names or just relation types") - // .setDesc( - // "This changes the headers in matrix/list view. You can have the headers be the list of metadata fields for each relation type (e.g. `parent, broader, upper`). Or you can have them just be the name of the relation type, i.e. 'Parent', 'Sibling', 'Child'. ✅ = show the full list of names." - // ) - // .addToggle((toggle) => - // toggle.setValue(settings.showNameOrType).onChange(async (value) => { - // settings.showNameOrType = value; - // await plugin.saveSettings(); - // await plugin.getActiveTYPEView(MATRIX_VIEW).draw(); - // }) - // ); + new Setting(MLViewDetails) + .setName("Show all field names or just relation types") + .setDesc( + "This changes the headers in matrix/list view. You can have the headers be the list of metadata fields for each relation type (e.g. `parent, broader, upper`). Or you can have them just be the name of the relation type, i.e. 'Parent', 'Sibling', 'Child'. ✅ = show the full list of names." + ) + .addToggle((toggle) => + toggle.setValue(settings.showNameOrType).onChange(async (value) => { + settings.showNameOrType = value; + await plugin.saveSettings(); + await plugin.getActiveTYPEView(MATRIX_VIEW).draw(); + }) + ); new Setting(MLViewDetails) .setName("Show Relationship Type") @@ -141,27 +140,28 @@ export function addMatrixViewSettings( }) ); - new Setting(MLViewDetails) - .setName("Filter Implied Siblings") - .setDesc( - fragWithHTML( - `Implied siblings are: -
      -
    1. notes with the same parent, or
      2. -
    2. notes that are real siblings.
      3. -
    - This setting only applies to type 1 implied siblings. If enabled, Breadcrumbs will filter type 1 implied siblings so that they not only share the same parent, but the parent relation has the exact same type. For example, the two real relations B -parent-> A, and C -parent-> A create an implied sibling between B and C (they have the same parent, A). The two real relations B -parent-> A, and C -up-> A create an implied sibling between B and C (they also have the same parent, A). But if this setting is turned on, the second implied sibling would not show, because the parent types are differnet (parent versus up).` - ) - ) - .addToggle((toggle) => - toggle - .setValue(settings.filterImpliedSiblingsOfDifferentTypes) - .onChange(async (value) => { - settings.filterImpliedSiblingsOfDifferentTypes = value; - await plugin.saveSettings(); - await plugin.getActiveTYPEView(MATRIX_VIEW).draw(); - }) - ); + // TODO I don't think this setting works anymore. I removed it's functionality when adding multiple hierarchies + // new Setting(MLViewDetails) + // .setName("Filter Implied Siblings") + // .setDesc( + // fragWithHTML( + // `Implied siblings are: + //
      + //
    1. notes with the same parent, or
      2. + //
    2. notes that are real siblings.
      3. + //
    + // This setting only applies to type 1 implied siblings. If enabled, Breadcrumbs will filter type 1 implied siblings so that they not only share the same parent, but the parent relation has the exact same type. For example, the two real relations B -parent-> A, and C -parent-> A create an implied sibling between B and C (they have the same parent, A). The two real relations B -parent-> A, and C -up-> A create an implied sibling between B and C (they also have the same parent, A). But if this setting is turned on, the second implied sibling would not show, because the parent types are differnet (parent versus up).` + // ) + // ) + // .addToggle((toggle) => + // toggle + // .setValue(settings.filterImpliedSiblingsOfDifferentTypes) + // .onChange(async (value) => { + // settings.filterImpliedSiblingsOfDifferentTypes = value; + // await plugin.saveSettings(); + // await plugin.getActiveTYPEView(MATRIX_VIEW).draw(); + // }) + // ); new Setting(MLViewDetails) .setName("Open View in Right or Left side") @@ -181,4 +181,12 @@ export function addMatrixViewSettings( ); }) ); + + new Setting(MLViewDetails).setName('Overflow').setDesc('When the Matrix View is too small to show a note name, should it wrap the name to the next line, or trim it to stay on one line? ✅ = Wrap, ❌ = Trim').addToggle((toggle) => { + toggle.setValue(settings.overflowMLView).onChange(async (value) => { + settings.overflowMLView = value; + await plugin.saveSettings(); + await plugin.getActiveTYPEView(MATRIX_VIEW).draw(); + }) + } } diff --git a/src/constants.ts b/src/constants.ts index 7cb72506..5d8ffa56 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -337,6 +337,7 @@ export const DEFAULT_SETTINGS: BCSettings = { openStatsOnLoad: true, openDuckOnLoad: false, openDownOnLoad: true, + overflowMLView: true, parseJugglLinksWithoutJuggl: false, showNameOrType: true, showRelationType: true, diff --git a/src/interfaces.ts b/src/interfaces.ts index aa1c134a..56ee9c95 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -76,6 +76,7 @@ export interface BCSettings { openStatsOnLoad: boolean; openDuckOnLoad: boolean; openDownOnLoad: boolean; + overflowMLView: boolean; parseJugglLinksWithoutJuggl: boolean; refreshOnNoteChange: boolean; respectReadableLineLength: boolean;