search

benji300 / joplin-favorites

Save any notebook, note, to-do, tag, or search as favorite in an extra panel view for quick access.
MIT License
94 stars 7 forks source link

Individual favorites are displayed more broadly than expected #8

Open benji300 opened 3 years ago

benji300 commented 3 years ago

Regardless of the setting of the minimum and maximum favorite width options, individual favorites are displayed too wide.

From the forum post: https://discourse.joplinapp.org/t/notebook-note-to-do-tag-search-favorites-plugin/14049/48

benji300 commented 3 years ago

Short analysis showed that it is caused by the added input fields for the favorite titles. These tags have a "size" attribute which has a default value of "20" (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#size). Which should correspond approximately to a width of 100px.

GlassGruber commented 3 years ago

Hey @benji300 I've tried to poke the CSS and you are right the main problem is the input element.

May I ask why not replace input with a simple span element? With a very rapid test via devtools I see that tabs width extend only to cover the length of the text inside the <span>. Full disclosure I'm not very much into electron and Joplin plugin developing, so I hope this is not a RTFM question 😝

Anyway thank you for your extension! 🎩

benji300 commented 3 years ago

Hi @GlassGruber, I've added the input to allow inline renaming of the favorites. So opening the edit dialog is no longer necessary. And a input element was the easiest way to enable this functionality. Unfortunately I've overseen this behavior with "minimum" size/width of input elements.

Now I know there's also another way to add this functionality. It is possible to allow also editing of span elements (https://stackoverflow.com/questions/21432238/make-a-span-item-editable). I will try this solution once I have time to fix this issue.

GlassGruber commented 3 years ago

Very nice! And thank you I didn't know contenteditable, you can learn something cool every day!