Cabbage Logo
Back to Cabbage Site

Updates on modern theme

#1

Hi Rory, I noticed there could be a very noticeable difference between the new Cabbage look and the native border and titlebar windows style of your os theme, so I thought it could be cool if we could have the Cabbage main window titlebar and border (and -, +, x buttons) style more consistent with its new modern look and independent from the os you are using.

I made some changes and now I think Cabbage is more professional-looking:

cabbage_new_look3.png1071×679 78.6 KB

As you can see in the above picture, I prefer a titlebar/border with the same colour of the menubar/toolbar background colour, but I made so that you can change the titlebar/border colours of the main window as you wish, independently of the other colours, by changing the “Main Background” colour id in the settings (that was not possible by using native titlebar/border).

Then I made the scrollbar of the console output window a little more visible and I made the menubar text smaller (to make it look more professional and to gain some vertical space for the editor).

If you like these mods, I can make a PR.

#2

Make the PR :wink: It’s starting to look really great now. The only little inconvenience is that users who update don’t get the full cinematic experience until they delete their current configuration. I guess we can just provide a little note to users who wish to update.

#3

Made PR.

For the problem of the configuration, it would be nice if the installer detects that there is already a settings file and, in this case, it asks if you want to clean previous cabbage settings and colours. Ideally, the user should choice if he want to clean only the colour settings or all the other settings (main window size, position, audio settings, etc.). To make this, I think we should have 2 settings file:

Cabbage2-general.settings <-- for general and miscellaneous options.
Cabbage2-colours.settings <-- only for colours settings

In this way, the installer can delete (if the user wants to) just the colours settings file, so that Cabbage recreates it (and preserves all the other not-colour-related settings).

#4

That’s probably handiest. That way the themes can be kept separate from the general settings. I just don’t like the idea of have several configuration files. But in this case it might be best. So it might also be a good idea to be able to import and export themes…

#5

Yes, maybe instead of a Cabbage2-colours.settings we can have a Cabbage2-theme.settings with colours and icons preferences included. Then Cabbage users could easily make customized themes and share them with other users.

#6

That’s probably best. I’m just trying to sort out a listbox issue at the moment. I think it would be best to create another folder in the icons dir for the older theme. And from hereon in all new themes with have their own folder. Does your latest theme use any of the older icons?

#7

My latest theme uses only the svg inside the “modern-darkBG” subfolder.

From what I remember, the older theme used some png embedded in the source code. Some of these were identical to the svg icons inside the Icons folder, but some others were different. And there are some svg icons missing from the old icons dir:

audio-muted.svg
audio-on.svg
filetab-editGUI-off.svg
filetab-editGUI-on.svg

If the user select the old theme dir, ideally the code should revert to the png version when there isn’t an svg for it, but actually it doesn’t do this, so you will just see a void space instead of a missing icon.

#8

You know what, let’s just scrap the old theme. I can’t imagine too many people will miss it! The new one is already so much better. I think we should also probably do something with the background image that is painted when the app first starts. I fixed the size of the Cabbage, but the background colour probably needs updating? We could give it the same colour as one of the other components?

#9

I like that cabbage drawing, but I think the colour of the background should be more like this:

cabbage-start.png1070×743 146 KB

Ideally it should be the same colour of the “File Tab Bar” setting (the above is just a screenshot edited with gimp).

#10

I’ll try that now. Btw, the way JUCE sets up settings files is pretty neat, but I don’t much like having a second settings file. I think it would be easier to have a simple import/export function that just updates the current settings file with the new theme. All their other settings would remain unchanged. The theme files could be kept in the Cabbage root dir so users can easily swap out themes.

#11

I just made that change. It looks much better now.

[edit] what controls the colour of an inactive file tab? I find it a little too dark at the moment. But just a fraction.

#12

It’s here:

void FileTab::paintButton (Graphics& g, bool isMouseOverButton, bool isButtonDown)
{
    if (isEnabled() == false)
        jassert (false);

    Colour baseColour (getToggleState() ? buttonColour : Colour (30, 30, 30));
    ...

I’m working on it. :wink:

#13

Great. I’m working on the custom import/export of themes.

[edit] I have custom import working. It requires user place a .xml file into their custom theme folder. When Cabbage imports the settings it sets the new custom icons location to that folder, and updates the current settings file. The only thin is is seems to involve a restart. I’m going to see if I can fix that. Would be much better to have everything dynamically update. I’ll push when I have the export method written.

#14

Nice, I updated the code for the filetab button disabled state. Now it should be much better. PR.

#15

Nice. Got it. Looks better now. I still haven’t managed t have the theme automatically update. I’m just missing a step but I’ll get it. I’m going to write the export method first though.

#16

I’ve now added a way of importing and exporting themes. Just make sure to place the xml file into the same directory as the theme icons. It should also have the same name as the directory so Cabbage can easily find it. The folder can be anywhere. But the structure should be something like:
../funkyTheme/funkyTheme.xml
We could support a theme of any name in any folder, but this simpler approach makes it very easy to share the entire theme as a self contained folder.

#17

Btw, a few users have expressed their desire to have a flat button to use in place of the current button design, which doesn’t look great in this day and age. Anyhow, your flat button l&f file would make a good template? In fact, I just swapped it out for the main look and feel and it works nicely out of the box. What do you think? We could use the style() or mode() identifiers which are already easily accessible. mode("flat") vs mode("normal"). We just need to add an outline colour and thickness, rounded corners, and button state colours for on and off.

#18

Nice one with the themes importing/exporting function! :wink: But then, if you import a new theme, I think Cabbage should change the custom icons path with that of the theme folder… Actually it changes only the colours. And if it could change the theme without restarting Cabbage it would be very nice!

I used that FlatButtonL&F class for the little X in the property panel (that now I think we don’t need anymore) and for the CabbageDocumentWindow lookAndFeel, to make the titlebar background of the main Cabbage window look… flat! So, actually it’s very basic, but with other little customizations I suppose it could be used for other things too.

The mode(“flat”) identifier for the button widget could be a good idea.

EDIT: the modern-darkBG.xml file has some colours wrong…

#19

It should update the custom icons folder. It does for me here whenever I import a new theme. You can check the Cabbage2.settings file. [quote=“mauro, post:18, topic:1262”]
EDIT: the modern-darkBG.xml file has some colours wrong…
[/quote]
I might have accidentely messed that up. But ae you Ok with the new folder structure? You can ensure the colours are correct again before this goes public.

#20

[quote=“rorywalsh, post:19, topic:1262”]
It should update the custom icons folder.
[/quote]Sorry, you are right, I don’t know why it didn’t work before, but now I retried and it works.[quote=“rorywalsh, post:19, topic:1262”]
But ae you Ok with the new folder structure?
[/quote]Yes, I see no problem with it. :wink:

[quote=“rorywalsh, post:19, topic:1262”]
You can ensure the colours are correct again before this goes public.
[/quote]I will PR the correct colours.