Greyed checkboxes

laurent · 2019-05-28T16:41:46.653Z

CalebJohn:

I actually think this is the best option. Joplin already handles duplicate names pretty gracefully so we don’t need to worry about that case. I think it makes sense to put it into a config notebook, that way we can support mobile only css and desktop only css.

Additionally I’ve been thinking about how we can support new note templates in Joplin and this would be a nice way to handle that as well.

I like this solution at a technical level because it allows customising things easily, it's cross-platform, and we get free sync for it by re-using the existing architecture (and without having to make that architecture more complicated).

Then we can indeed add more config in there, including the templates you mentioned.

On the other hand, it's not very user-friendly. People will have to read the doc, manually create that config notebook with the right name (I agree with tessus that we shouldn't do it automatically), and the notes inside with the right name too.

I'm not concerned about duplicate names though - let's say for now the result of having two notes named userstyle.css will be undefined - the algorithm will pick the first one. Later maybe that algorithm could emit a warning, but it's not a big issue for now.

tessus · 2019-05-28T17:39:45.862Z

Don't forget that with this solution you have one file that will determine the css for all your devices and all installations. This might not be wanted. I might want to have one css for my ipad, another one for my Android, and another one for desktop.

laurent:

it’s cross-platform, and we get free sync for it by re-using the existing architecture (and without having to make that architecture more complicated).

This was also the argument for the welcome notes...

I'm just saying, if you add it to settings, it will be bound to the instance of joplin, which is something I would prefer over syncing. And as I said, people can still put the css in a note for copy and paste purposes or for reference. Maybe other see it differently. I will tell you that using a notebook and note will be a mess. You will get all sorts of problems. IMO this is opening the proverbial can of worms.

laurent:

config notebook with the right name (I agree with tessus that we shouldn’t do it automatically), and the notes inside with the right name too.

This also means that people can't already have a folder that is called whatever you will pick for that name.

Another thing - I don't want a notebook called whatever that is visible to me. The notebooks are for my notes, not to configure the application. So, if I wanted to use a different css, I'd have to have a new folder which I don't want and which is in my way all the time?

Using notebooks and notes for configuration sounds nice and it could be an awesome feature, but it would require a lot more than what was discussed here. e.g. hiding notebooks and notes, a unique id per device that is appended to the config note name, merging of notes, .... this is highly complex when you want to do it right.

CalebJohn · 2019-05-28T18:42:59.312Z

My thought had been that we would take a different approach to creating the config notebook because it is so special, and as you noted, you would need to be able to hide it. What would have been possible is to manually specify the ID and only refer to it by such (the users would then be free to rename it however they want). For example the config notebook could use the ID 00000000000000000000000000000000 because the probability that any specific ID is in use is extremely low. If this did cause problems (only possible during rollout) we would have to help the 1 or 2 users and then it’s done.

That said, typing this out makes sort of proves your point that it would be adding a lot of needless complexity and we’re sure to get complaints about the additional notes…

How about a compromise? We allow the user to select a userstyle.css in settings by having them point to a note with css in it. This way they can have separate css for each device and get the benefit of syncing infrastructure. We would also probably want to allow users to copy and paste css into settings for the users that don’t want configuration notes.

tessus · 2019-05-28T20:05:53.115Z

CalebJohn:

How about a compromise? We allow the user to select a userstyle.css in settings by having them point to a note with css in it.

Yes, this would certainly makes sense. However, I would rather use the link from Copy Markdown link to specify the file than entering the filename manually.

CalebJohn · 2019-05-28T20:12:56.226Z

tessus:

However, I would rather use the link from Copy Markdown link to specify the file than entering the filename manually.

I was thinking we would use some kind of dropdown. But copy markdown link is certainly easier. Maybe we could have a right click menu item "Set Style"

tessus · 2019-05-28T20:24:53.641Z

CalebJohn:

Maybe we could have a right click menu item “Set Style”

Also not a bad idea. As long as I don't have to enter anything manually and the hash is used internally I am good. But I am not the one who has the authority to decide.

sciurius · 2019-05-29T07:24:44.991Z

laurent:

graying out the checkbox is consistent with the rest of the UI.

This may be so, but Joplin seems to be the only tool that uses greyed out checkboxes like this in its UI. And not even then:
scrot20190529092400
All other tools I know use greying out when an item cannot be selected or changed.

zblesk · 2019-05-30T19:20:19.080Z

tessus:

Another thing - I don’t want a notebook called whatever that is visible to me. The notebooks are for my notes, not to configure the application. So, if I wanted to use a different css, I’d have to have a new folder which I don’t want and which is in my way all the time?

exactly this. Those two things are logically different: I should not see configuration in places that are meant for my notes.

I do think think there is a way around this, while still getting to keep all of the advantages: make the notebook a special case, hardcode its name and hide it.

More precisely: imagine you set the name (and I do mean the name, I don't care about the ID) of the notebook to ce8e849c-b6a2-4f19-b2b1-9a4f9b4f57ee, or some other random guid. (Please don't use all zeroes, that's just asking for trouble.)
No need to implement notebook or note hiding - just hardcode that notebook to be hidden.
Also no need for special notes with specific names - Add a menu item saying "Customize CSS" (or maybe "Customize CSS for this particular instance" that will open (or create) a note, with a hardcoded name, in that notebook, and display its contents in a 'edit settings' window/dialog.

That way, it could internally be a notebook for syncing purposes, there would be no issue of it being displayed among your other notes (because the notebook would be hidden) and no issue with specific names (because that'd be hidden as well, and handled when a user clicks on the 'Customize CSS' menu item.)

CalebJohn:

Maybe we could have a right click menu item “Set Style”

I think this is a bad idea from the UX point of view. Having to see an option on every single note, while that option will be used by a fraction of users, for a single note among potentially thousands you create in Joplin, would just be confusing and superfluous.

CalebJohn · 2019-05-31T04:55:16.567Z

zblesk:

That way, it could internally be a notebook for syncing purposes, there would be no issue of it being displayed among your other notes (because the notebook would be hidden) and no issue with specific names (because that’d be hidden as well, and handled when a user clicks on the ‘Customize CSS’ menu item.)

In this case how would we access the css notes from other devices? And what if we want 2 devices to use the same css?

zblesk:

I think this is a bad idea from the UX point of view. Having to see an option on every single note, while that option will be used by a fraction of users, for a single note among potentially thousands you create in Joplin, would just be confusing and superfluous.

I disagree here, this is already the standard on mobile and desktop OS's for setting the wallpaper. I would argue that users are already familiar with these kinds of options and won't negatively effect anyones workflows.

tessus · 2019-06-09T06:06:40.658Z

I think we should create a new topic, e.g. userstyle.css on desktop and mobile or rename this one.

Either way, the sooner we agree on a solution, the sooner we can start implementing it…

nettlebay · 2019-06-10T18:12:02.708Z

Hello! I do not know where userstyle.css file is located. Sorry. I am on Linux Manjaro.

foxmask · 2019-06-10T18:33:34.040Z

should be there https://joplinapp.org/#custom-css

nettlebay · 2019-06-11T14:35:23.571Z

Les notes et paramètres se trouve(nt)* dans (notes & settings are in) : /home/username/.config/joplin-desktop. But no css file in sight! Do I have to create it myself? What is its full content? Thanks you for your help

*il y a une faute de conjugaison. Il manque “nt” à la fin de “trouve”: “Les notes et paramètres se trouvent dans…” (there is a fault of conjugation. Missing “nt” at the end of “trouve”: “Notes and settings are in…”)

CalebJohn · 2019-06-11T16:03:09.664Z

You need to create it yourself. You can put basically any css in there to customize your rendered notes. Checkout this forum topic for examples and inspiration.

nettlebay · 2019-06-11T18:29:53.039Z

Thanks you. But, it doesn't work with the CSS file, only with

 <style>
    .checkbox-label-checked {
    opacity: 1;
    }
    </style>

(directly in a note).

How can I inverse the effect? That is, bold character when the box is checked and normal when not checked.

nettlebay · 2019-06-11T18:54:08.868Z

Relatively interesting for a shopping-list: Using

opacity: 0 ; (zero)

the text becomes invisible when the box is checked.

CalebJohn · 2019-06-11T19:06:13.663Z

@nettlebay after creating a userstyle.css and putting your styling tweaks in it, you need to restart joplin, please check the README for reference.

Here is the effect you asked for

.md-checkbox {
	font-weight: normal;
}
.checkbox-label-checked {
    font-weight: bold;
    opacity: 1;
}

nettlebay · 2019-06-11T19:13:42.331Z

Thanks you

sciurius · 2019-06-12T06:30:48.376Z

As you can see from Joplin’s own UI, it is higly uncommon to grey out checked checkboxes.
Please revert this change, or make it optional.

scrot20190612082638.png496×503 52.2 KB

chentao · 2023-07-28T09:13:26.892Z

Reviving this old topic. I stumbled on it when I was looking if custom CSS is supported on the mobile app (Android in my case). It seems that still isn't the case, am I right ? Any chance to see it happen in the future ?