[SOLVED] How to test theme's radio buttons and check boxes? [Cinnamon]

Style your desktop
Forum rules
Before you post please read how to get help
blueberrymint
Level 1
Level 1
Posts: 26
Joined: Tue May 04, 2021 5:10 am

[SOLVED] How to test theme's radio buttons and check boxes? [Cinnamon]

Post by blueberrymint »

Hello! I'm working on a cinnamon theme currently and can't find any applet to test the styling of radio buttons and check boxes. If anyone knows such an applet or any other way of testing, please share.

Many thanks to anyone who can help 🙏 🙂.
Last edited by blueberrymint on Fri Jun 24, 2022 10:22 am, edited 1 time in total.
User avatar
sebastjava
Level 4
Level 4
Posts: 382
Joined: Wed Jun 28, 2017 8:01 pm
Location: Montréal, Canada
Contact:

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by sebastjava »

Install gtk-3-examples to get this Widget Factory. Available from your Software manager and Synaptic. Widget Factory is a part of this gtk-3-examples package. Once installed, you may still have trouble finding it. You may need to add it to your menu by yourself. It's easy. All the details here: viewtopic.php?p=2163767#p2163767

Command to launch or add to your menu: gtk3-widget-factory

Widget Factory, a part of the gtk-3-examples package
Widget Factory, a part of the gtk-3-examples package
on LinuxMint Cinnamon on https://github.com/SebastJava
User avatar
sebastjava
Level 4
Level 4
Posts: 382
Joined: Wed Jun 28, 2017 8:01 pm
Location: Montréal, Canada
Contact:

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by sebastjava »

P.S.: I may be slow to respond. I am subscribed to this forum, but sometimes i don't get notifications about new posts on my email !? That's a new problem i found lately. Investigating...

EDIT: I looked at my notification options

I checked this: Someone creates a topic in a forum to which you are subscribed ✅

It should be okay from now on ? We'll see.
on LinuxMint Cinnamon on https://github.com/SebastJava
blueberrymint
Level 1
Level 1
Posts: 26
Joined: Tue May 04, 2021 5:10 am

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by blueberrymint »

sebastjava wrote:
Wed Jun 22, 2022 9:47 am
Install gtk-3-examples to get this Widget Factory.
Maybe I misunderstand something, but isn't it for testing gtk themes only? My theme is not a gtk one, it's for Cinnamon desktop itself (which is stored in cinnamon.css file): panels, applets, desklets and so on…

There are style classes for check boxes and radio buttons that can be found in /usr/share/cinnamon/js/ui/checkBox.js and /usr/share/cinnamon/js/ui/radioButton.js. Standard mint themes include their styling, so I was wondering where to actually see those elements in action. Or are they obsolete?
Last edited by blueberrymint on Wed Jun 22, 2022 11:47 am, edited 2 times in total.
User avatar
sebastjava
Level 4
Level 4
Posts: 382
Joined: Wed Jun 28, 2017 8:01 pm
Location: Montréal, Canada
Contact:

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by sebastjava »

blueberrymint wrote:
Wed Jun 22, 2022 11:41 am
There are style classes for check boxes and radio buttons that can be found in /usr/share/cinnamon/js/ui/checkBox.js and /usr/share/cinnamon/js/ui/radioButton.js. Standard mint themes include their styling, so I was wondering where to actually see those elements in action. Or are they obsolete?
Sorry, at first i didn't understand you were specifically talking about the "Cinnamon Desktop": panel, menu, calendar, etc. I never saw those radio buttons and checkboxes, and i have no idea where to see them... Maybe they are obsolete, i don't know...
on LinuxMint Cinnamon on https://github.com/SebastJava
blueberrymint
Level 1
Level 1
Posts: 26
Joined: Tue May 04, 2021 5:10 am

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by blueberrymint »

sebastjava wrote:
Wed Jun 22, 2022 11:59 am
Sorry, at first i didn't understand you were specifically talking about the "Cinnamon Desktop": panel, menu, calendar, etc. I never saw those radio buttons and checkboxes, and i have no idea where to see them... Maybe they are obsolete, i don't know...
No worries. Thanks for trying to help anyway.
User avatar
Drugwash
Level 4
Level 4
Posts: 439
Joined: Fri Jun 07, 2019 6:40 am
Location: Ploieşti, RO

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by Drugwash »

@blueberrymint: You can install my betterlockPlus applet and enable checkboxes and radio buttons in the settings window - there's a button there called 'Radio buttons'. Close and reopen Settings after that.
blueberrymint
Level 1
Level 1
Posts: 26
Joined: Tue May 04, 2021 5:10 am

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by blueberrymint »

Drugwash wrote:
Wed Jun 22, 2022 8:40 pm
@blueberrymint: You can install my betterlockPlus applet and enable checkboxes and radio buttons in the settings window - there's a button there called 'Radio buttons'. Close and reopen Settings after that.
Radiobuttons do not appear, unfortunately. I downloaded the 1.4.1 version. Maybe I'm not doing something right? I even restarted the Cinnamon.
Attachments
Selection_001.png
Menu_002.png
Menu_002.png (26.36 KiB) Viewed 351 times
User avatar
Drugwash
Level 4
Level 4
Posts: 439
Joined: Fri Jun 07, 2019 6:40 am
Location: Ploieşti, RO

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by Drugwash »

Maybe you are confusing the idea of radio buttons with something else. All those "circles" next to default and custom are radio buttons. :)
Are you somehow referring to bullets and checkmarks in a menu maybe?

There is no need to restart Cinnamon, changes are applied immediately when changing the Controls subtheme in Themes.

By the way, if you look closely you'll see the radio buttons are misaligned vertically - they should be centered but instead they are top-aligned. There are a few Windows Longhorn-inspirated themes that have them correctly aligned (Aero, Jade and Plex; Slate has them misaligned).
blueberrymint
Level 1
Level 1
Posts: 26
Joined: Tue May 04, 2021 5:10 am

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by blueberrymint »

Drugwash wrote:
Thu Jun 23, 2022 6:09 am
Maybe you are confusing the idea of radio buttons with something else.
I'm talking about:
1) /usr/share/cinnamon/js/ui/checkBox.js and /usr/share/cinnamon/js/ui/radioButton.js
2) In cinnamon.css they have their own styling under .radiobutton and .check-box classes.
3) Take a look at the standard cinnamon theme's svg images: checkbox.svg, radiobutton.svg.

You were talking about gtk theme. That context settings menu of your applet is a part of a gtk theme. I'm talking about Cinnamon theme exclusively. It's a pity that I don't know any applet or other element of Cinnamon dekstop that uses the aforementioned buttons. I think that they're probably deprecated, but I can't say for sure, that's why I created this topic in the first place.
Last edited by blueberrymint on Thu Jun 23, 2022 11:38 am, edited 1 time in total.
User avatar
antikythera
Level 13
Level 13
Posts: 4507
Joined: Thu Jul 02, 2020 12:52 pm
Location: Cymru

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by antikythera »

Cinnamon is a GTK desktop despite using a Java Script engine from Mozilla too.
LMDE5 | Gigabyte GA-AM1M-S2H: Click for full specs...
LMDE5 | MSI A320M-A PRO MAX: Click for full specs...
User avatar
Drugwash
Level 4
Level 4
Posts: 439
Joined: Fri Jun 07, 2019 6:40 am
Location: Ploieşti, RO

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by Drugwash »

blueberrymint wrote:
Thu Jun 23, 2022 11:35 am
I'm talking about:
1) /usr/share/cinnamon/js/ui/checkBox.js and /usr/share/cinnamon/js/ui/radioButton.js
Found you one example code using the checkBox import: Developer's Tools.

For me it looks like this:
devtools_checkboxes.png
devtools_checkboxes.png (15.07 KiB) Viewed 289 times
And it turns out I was about right thinking of the menu ornaments bullet and checkmark; apparently the popup menu (/usr/share/cinnamon/js/ui/popupMenu.js) uses both checkBox.js and radioButton.js for the menu item ornaments.
See PopupIndicatorMenuItem > setOrnament(ornamentType, state).

The Spices Update applet by claudiux uses bullet/radiobutton ornaments in its menu when updates are available but as far as I remember they are symbolic-like.

Couldn't find any more useful information on this on my 19.2 system.
blueberrymint
Level 1
Level 1
Posts: 26
Joined: Tue May 04, 2021 5:10 am

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by blueberrymint »

Drugwash wrote:
Thu Jun 23, 2022 9:40 pm
For me it looks like this:
It looks the same to me too. (Desklet settings also gave me a warning that this desklet might crash Cinnamon.)
Drugwash wrote:
Thu Jun 23, 2022 9:40 pm
And it turns out I was about right thinking of the menu ornaments bullet and checkmark;
I thought bullets were for emphasizing lists, not for radio buttons 🤔. And yes, of course, I meant popup menus as well, I just wasn't excluding any other element of Cinnamon desktop that might potentially use check boxes and radio buttons.

In any case I thank you very much for helping me 🙂.

For now I'll stick to my theory that the discussed topic is obsolete. I really don't want to waste my time and energy on styling something that is hardly in use anymore.
User avatar
Drugwash
Level 4
Level 4
Posts: 439
Joined: Fri Jun 07, 2019 6:40 am
Location: Ploieşti, RO

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by Drugwash »

blueberrymint wrote:
Fri Jun 24, 2022 5:02 am
Desklet settings also gave me a warning that this desklet might crash Cinnamon.
Never happened to me and I've had it enabled since forever. Those warnings are there just as a heads up because of certain functions that could maybe screw things up.
blueberrymint wrote:
Fri Jun 24, 2022 5:02 am
I thought bullets were for emphasizing lists, not for radio buttons
It's just the naming. I'm used to how they were/are called in Windows. Menus can use them as radio buttons to show the selection in a group of similar items, just as in a normal GUI.
blueberrymint wrote:
Fri Jun 24, 2022 5:02 am
For now I'll stick to my theory that the discussed topic is obsolete.
As you wish. Personally I can't say anything for certain, best would be to install all available x-lets (without necessarily enabling them) and perform a text search for the respective imports (imports.ui.checkBox and imports.ui.radioButton) to see precisely how many of them still use those elements.
Either way someone might still use them in their local x-lets and if you publish your theme and they use it there may appear problems.

And... you're welcome. :)
User avatar
sebastjava
Level 4
Level 4
Posts: 382
Joined: Wed Jun 28, 2017 8:01 pm
Location: Montréal, Canada
Contact:

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by sebastjava »

Drugwash wrote:
Fri Jun 24, 2022 6:39 am
Personally I can't say anything for certain, best would be to install all available x-lets (without necessarily enabling them) and perform a text search for the respective imports (imports.ui.checkBox and imports.ui.radioButton) to see precisely how many of them still use those elements.
Maybe there is a faster and safer way to do this ? All applets and desklets can be found in https://github.com/linuxmint/cinnamon-spices-applets and https://github.com/linuxmint/cinnamon-spices-desklets

I would try to download them all at once, without installing: click on GitHub's green Code button > Download ZIP

And then do this text search in there...
on LinuxMint Cinnamon on https://github.com/SebastJava
User avatar
Drugwash
Level 4
Level 4
Posts: 439
Joined: Fri Jun 07, 2019 6:40 am
Location: Ploieşti, RO

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by Drugwash »

Yeah, that's a more... compact way of doing it. Found three for checkbox in applets: bible@nodeengineer.com, qredshift@quintao, sticky@scollins, and also first two of them for radiobutton. Only same devTools@scollins in desklets for checkbox; no radiobutton in desklets.
blueberrymint
Level 1
Level 1
Posts: 26
Joined: Tue May 04, 2021 5:10 am

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by blueberrymint »

Drugwash wrote:
Fri Jun 24, 2022 6:39 am
Either way someone might still use them in their local x-lets and if you publish your theme and they use it there may appear problems.
Potentially yes, but technically I don't think so. As far as I understand it the default cinnamon.css is applied for any element that doesn't have custom styling. I realized this while I was still working on my theme: a lot of elements that didn't have custom images or css applied had the default styling. You can test it yourself (if you want), just comment out a section of css code for a certain element, reload the theme and see what happens 😀.
User avatar
Drugwash
Level 4
Level 4
Posts: 439
Joined: Fri Jun 07, 2019 6:40 am
Location: Ploieşti, RO

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by Drugwash »

blueberrymint wrote:
Fri Jun 24, 2022 10:04 am
You can test it yourself (if you want)
Nah, I'll just take your word for it. :D
blueberrymint
Level 1
Level 1
Posts: 26
Joined: Tue May 04, 2021 5:10 am

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by blueberrymint »

sebastjava wrote:
Fri Jun 24, 2022 7:23 am
Drugwash wrote:
Fri Jun 24, 2022 6:39 am
Personally I can't say anything for certain, best would be to install all available x-lets (without necessarily enabling them) and perform a text search for the respective imports (imports.ui.checkBox and imports.ui.radioButton) to see precisely how many of them still use those elements.
Maybe there is a faster and safer way to do this ? All applets and desklets can be found in https://github.com/linuxmint/cinnamon-spices-applets and https://github.com/linuxmint/cinnamon-spices-desklets

I would try to download them all at once, without installing: click on GitHub's green Code button > Download ZIP

And then do this text search in there...
Thank you very much 🙃. I used grep -r "checkBox" and grep -r "radioButton" for all those downloaded applets and desklets.

As a result some of them do indeed import radio buttons and checkboxes. However, none of them actually use radio buttons in their programs. devTools@scollins and sticky@scollins do use check boxes which in turn have their own styling defined by their respective developers; for devTools@scollins it has .devtools-checkBox css class and for sticky@scollins it has .sticky-checkBox css class.

Phew, now I really know that there's nothing to worry about 😅.

Thanks again.
blueberrymint
Level 1
Level 1
Posts: 26
Joined: Tue May 04, 2021 5:10 am

Re: How to test theme's radio buttons and check boxes? [Cinnamon]

Post by blueberrymint »

Thank you to everyone who helped me 💛.

I think it'd be best if I mark this topic as solved.
Post Reply

Return to “Themes, Icons & Wallpaper”