Yeah, I guess I'm not used to scroll bars having to be managed.
I don't mean to be unappreciative. And to be clear, I don't understand what is really going on. I'm used to html on web pages where overflow is managed by the browser.
The scrollbar doesn't really have to be managed, but for scrolling and so on to work we need to know the total height of the content. Or we don't - if we just render everything, this is indeed managed automatically, but as mentioned in many cases it would be inefficient so that's why the height is precalculated.
Sure there are plenty of infinite scrolling on the web, but it works by loading a part of the content, then when you reach the bottom another part is loaded and so on. That would be pretty bad on a desktop app where it's expected you can quickly scroll up and down.
Oh, I wasn't thinking of infinite scrolling. I'm clearly not getting something because I can't understand why you would need to know the total height of the content. Isn't that the whole purpose of overflow?
I also would like a faster way to flip preview on and off. For 80% of what I use Joplin for (open all day all the time constantly in use), I don't want preview. But, I want it for some folders (20%). It would be nice as a right click, or shortcut key toggle. I spend most of my time in a few folders and I know what they have. Just those others that the preview is useful for.
Really great - getting closer and closer to my used evernote list view 
If there are >1 pictures in a note - which one the plugin is using for the thumbnail?
Sooo happy this finally exists!
Thanks for creating the API changes & the plugin!!
Having thumbnails in the note list is just awesome!
A few little things that would make it even better:
The note list previews look a bit weird with the MacOS theme plugin - can this somehow be fixed?
Would it be possible to add some light horizontal lines between the note list items?
Could the thumbnails also be cropped to square aspect ratio like in Evernote so the layout would be more consistent? (Also would be great if the thumbnails would be vertically centered)
I use custom CSS to change the shape and colour of the tags on the tag bar at the bottom of a note. The tag background is set to #2d6bdc (Joplin Light Theme blue)
I have been playing with your great plugin and tried using the Advanced Settings to make some visual changes so that the tags in the note-list looked similar to those under the note, and the date in the note-list was the same colour as the tag background.
In Replace CSS styles for the date I entered color: #2d6bdc;
In Replace CSS styles for the tags I entered border-radius: 3px; color: white; background: #2d6bdc; padding: 2px 5px 2px 5px;
This is what I got.
Shape and colour changes are made but even though the element inspector shows the date font and tag background colour as #2d6bdc it actually displays as the much lighter #5f87d3. I cannot find any obvious correlation between the two colours.
I did try again with an empty userchrome.css file so there does not appear to be a clash with other custom CSS. I cannot work out what is causing this change????
It is just something I noticed (it may still be something I have overlooked) and it is not going to cause me any problem. However I thought I'd mention it as, if it not just me missing something, those who really customise Joplin may start asking the same question.
1 Like
I was just working on some custom styles as well and found that there is opacity applied to the .firstLine class. I think you're also using last line (I'm not, so didn't test it) so I'm guessing last line also has that style. You can revert the style for the first line with this:
.note-list-item .content .firstLine {
opacity: unset !IMPORTANT;
}
(but you'll have to inspect the elements yourself to find which one has opacity that you don't want, since you might not be using the first line at all)
This plugin is great, thanks for making and publishing it @JackGruber! Is there any chance you could add a variable for the creation date (so I can add it to the first line)? I use that instead of modification date.
I modified my userchrome.css file to customize the style. I wanted a little extra whitespace around each note and the title and wanted the tags to stand out a bit more; especially on the selected note. I also only wanted a single line of text for the preview. It went from this:
to this:
via this css:
.note-list-item .content {
.title {
font-size: 1em !IMPORTANT;
padding: 4px 0;
letter-spacing: .03em;
}
.firstLine {
opacity: unset !IMPORTANT;
font-size: .925em;
}
.tags .tag {
border-radius: 1em !IMPORTANT;
background: var(--joplin-background-color) !IMPORTANT;
padding: 1px 5px !IMPORTANT;
color: var(--joplin-color4);
border: 1px solid #2d6bdc38; /* can't add opacity to theme color, so pulled the hex value from --joplin-color4, then applied opacity */
}
.body {
height: 1rem;
overflow: hidden;
word-break: break-all
}
}
and this config:
3 Likes
That was it. Thanks.
I was making my changes in the Advanced Settings for the plugin rather than userchrome.css. The inline date caused me problems as I could not change that and it had an opacity of 0.7 applied to it. I switched that off and used a first line {{date}} variable and I could change it and switch off the opacity. The last line was set to the variable {{tags}} and the last line css field did let me switch off the opacity. Then I used the tags css field to change the tags themselves.
This is what I ended up with however it does not currently display well if the note list is too narrow or too wide.
I was only playing with this when trying out the plugin, but I think your method using userchrome.css is probably the best way to customise this if needed.
However the plugin is only a few days old and only on version 0.2.0! I think I'll at least give @JackGruber a chance to work any further magic on this plugin before I seriously consider taking time to add any customisations 
2 Likes
That's an easy fix with userchrome.css, I just tested with that option enabled and this reset's it. The change to color is to keep the excerpt text lighter than other text, even without the 0.7 opacity.
.note-list-item .content .body {
opacity: unset !IMPORTANT;
color: var(--joplin-color3);
}
It seems like you want three lines of excerpt text, so this css can help with that, and make it looks good both when narrow and wide. You'll also have to increase the Note excerpt length in the plugin config, so that it produces a long enough excerpt. The number depends on how wide you ever have this list. Too high of a number just means the plugin will extract more text than necessary, but it won't change how it looks, if you use this css:
.note-list-item .content .body {
line-height: 1rem;
max-height: 3rem;
overflow: hidden;
}
1 Like
Actually, would you accept a pull request for this @JackGruber? I might be able to write this code myself.
If so, would you prefer a config option to change the only date this plugin uses, or another variable that can be used in the first and last line config options?
Thinking about this plugin a bit more; I'm wondering if the config should be simplified so there is a single textarea input to specify the format. So rather than having all these config options:
- Position inline date
- First line
- Last line
There could be a single Template option, which allows users to insert all these variables, wherever they want:
- {{tags}}
- {{date_created}}
- {{date_updated}}
- {{excerpt}}
As long as each of these variables are wrapped in a span with a class, they can all be styled however users want via userchrome.css.
A {{url}} variable for notes that were web-clipped might be nice.
The first one (But there was a bug an sometimes not the first was selected)
Currently not provided by the API
That is debatable ...what if several plugins are installed ... and currently not provided for in the API
Not from me, this would have to be made as a request in the MacOS theme
Yes with css styles
2 Likes
For problems and possible planed improvements please have a look at Git:
v0.3.0 (2024-01-02)
- Fix: #4 Incorrect excerpt on new lines
- Fix: Sometimes the first image was not used for the preview
- Add: Additional variables added,
{{url}},{{createdTime}}and{{updatedTime}}#6 - Improved: Some css changes
- Improved: Regenerate thumbnail on resource change #5
8 Likes
Thank you! Very helpful.
1 Like
v0.3.2 (2024-01-10)
- Optimize: Remove note title from logs
- Fix: #10 Previews are not loaded (white field) if the resource file has not been downloaded
v0.3.1 (2024-01-09)
- Fix: Path for Plugin discovery website
2 Likes
For info, if this is the fix you referred to the link from the card on the plugins screen to the GitHub README.md is still showing "Not Found". Seems that /blob/master/ is needed between the repo name and the file name.
No was a fix for the Joplin Plugins - Note list (Preview) side.
The mess up in the URL I haven't seen it yet, but it will be fixed in the next version.
1 Like