Skip to content

Commit

Permalink
style(List/Matrix View): 💄 Option to wrap Matrix View items, or trim (F…
Browse files Browse the repository at this point in the history 
…ix #305)
  • Loading branch information
@SkepticMystic
SkepticMystic committed Feb 5, 2022
1 parent 33d7174 commit d8ee60e
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 38 deletions.
9 changes: 7 additions & 2 deletions src/Components/Lists.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
rlLeaf,
treatCurrNodeAsImpliedSibling,
showRelationType,
overflowMLView,
} = settings;
</script>

Expand Down Expand Up @@ -43,7 +44,9 @@
{#each realItems as { alt, cls, implied, to }}
<li>
<div
class="{cls} {implied ?? ''}"
class="{cls} {implied ?? ''} {!overflowMLView
? 'overflow'
: ''}"
on:click={async (e) => await openOrSwitch(app, to, e)}
on:mouseover={(e) => hoverPreview(e, matrixView, to)}
>
Expand All @@ -68,7 +71,9 @@
: ''}"
>
<div
class="{cls} {implied ?? ''}"
class="{cls} {implied ?? ''} {!overflowMLView
? 'overflow'
: ''}"
on:click={async (e) => await openOrSwitch(app, to, e)}
on:mouseover={(e) => hoverPreview(e, matrixView, to)}
aria-label={parent ?? ""}
Expand Down
17 changes: 15 additions & 2 deletions src/Components/Matrix.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
rlLeaf,
treatCurrNodeAsImpliedSibling,
showRelationType,
overflowMLView,
} = settings;
</script>

Expand Down Expand Up @@ -44,7 +45,9 @@
{#each realItems as { alt, cls, implied, to }}
<li>
<div
class="{cls} {implied ?? ''}"
class="{cls} {implied ?? ''} {!overflowMLView
? 'overflow'
: ''}"
on:click={async (e) => await openOrSwitch(app, to, e)}
on:mouseover={(event) =>
hoverPreview(event, matrixView, to)}
Expand Down Expand Up @@ -74,7 +77,9 @@
: ''}"
>
<div
class="{cls} {implied ?? ''}"
class="{cls} {implied ?? ''} {!overflowMLView
? 'overflow'
: ''}"
on:click={async (e) => await openOrSwitch(app, to, e)}
on:mouseover={(e) => hoverPreview(e, matrixView, to)}
aria-label={parent ? "↑ " + parent : ""}
Expand Down Expand Up @@ -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;
}
</style>
76 changes: 42 additions & 34 deletions src/Settings/MatrixViewSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down Expand Up @@ -141,27 +140,28 @@ export function addMatrixViewSettings(
})
);

new Setting(MLViewDetails)
.setName("Filter Implied Siblings")
.setDesc(
fragWithHTML(
`Implied siblings are:
<ol>
<li>notes with the same parent, or</li>
<li>notes that are real siblings.</li>
</ol>
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 <code>B -parent-> A</code>, and <code>C -parent-> A</code> create an implied sibling between B and C (they have the same parent, A). The two real relations <code>B -parent-> A</code>, and <code>C -up-> A</code> 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:
// <ol>
// <li>notes with the same parent, or</li>
// <li>notes that are real siblings.</li>
// </ol>
// 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 <code>B -parent-> A</code>, and <code>C -parent-> A</code> create an implied sibling between B and C (they have the same parent, A). The two real relations <code>B -parent-> A</code>, and <code>C -up-> A</code> 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")
Expand All @@ -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();
})
}
}
1 change: 1 addition & 0 deletions src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,7 @@ export const DEFAULT_SETTINGS: BCSettings = {
openStatsOnLoad: true,
openDuckOnLoad: false,
openDownOnLoad: true,
overflowMLView: true,
parseJugglLinksWithoutJuggl: false,
showNameOrType: true,
showRelationType: true,
Expand Down
1 change: 1 addition & 0 deletions src/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export interface BCSettings {
openStatsOnLoad: boolean;
openDuckOnLoad: boolean;
openDownOnLoad: boolean;
overflowMLView: boolean;
parseJugglLinksWithoutJuggl: boolean;
refreshOnNoteChange: boolean;
respectReadableLineLength: boolean;
Expand Down

0 comments on commit d8ee60e

Please sign in to comment.