Overall Docker Redesign

Hi all!

In extension of the main UI Redesign topic, this topic has been created to consolidate ideas about how Krita’s Docker system can be upgraded in the future.

All ideas are welcome, this is an open discussion :slightly_smiling_face:.

To kick off, here are some existing ideas, collated by the amazing @slightlyangrydodo

  • Remove the outline around the undock and close docker options, before and after done by Rakurri;

  • More visual separation, especially between dockers, before and after;

  • Theme customization, as stated here;

  • Dockers can be “docked”, as done here, better for phones and tablets;

  • Slimmer tabs, before and after;

  • Modernizing the tabs, and increasing clarity, before and after;

  • Adding space around advanced color selector, before and after;

  • Removing redundancies, like so, with argument against by EyeOdin;

  • Using icons instead of text for dockers, with example;

Feel free to discuss!

6 Likes

I’m curious to try this out, actually. I think I’m gonna try and implement something, namely the modernizing tabs.

I have no idea if I’m going to actually complete this, this is just to see if I can do it :slight_smile:

2 Likes

I few of these I’ve been able to accomplish via CSS style sheets and the Python API :slight_smile:
Such as flat style tabs and the docker close/undock. Going the route of a Python script might not be what we want though, but I’m not sure how we best push these changes to the software.

Slimmer tabs over the canvas is possible to do with style sheets, but it’s finicky trying to locate the correct tab bar in the UI to style it (unless we want all tab bars to look the same, which I can’t recommend :stuck_out_tongue_winking_eye:). If it had/has a special C++ class like “KisDocumentTabBar” or something then there’d be no issue styling the correct tabs. But there is an issue where the canvas itself doesn’t reflect that the tab bar has changed in size without first manually adjust the window.

Spacing between dockers are also possible to customize with style sheets, but I had inconsistent results with it. Sometimes I saw the changes I wrote in the style sheets, sometimes it was back to Krita’s normal spacing.

But there is some logic between the UI spacing, the docker tab bars (it gets hidden when there’s only a single docker occupying that particular spot), and the docker title bars (the row with the close and undock button) that makes it practically impossible to get a consistently styled UI with just Python and CSS. If you calculate the spacing from the tab bar it’s gonna look nice when there are tabs, but not as nice when there isn’t. When you calculate the spacing from the title bar it looks nice when there are no tabs, but there’s an ugly extra gap when you do have tabs. Hopefully I’m making myself understood with this description :stuck_out_tongue: But this is something that’s gonna be have to be fixed up in code first.

There are also things like the custom slider spinboxes and buttons with menu arrows that doesn’t seem to work well with CSS, but it might also just be me not knowing fully what I’m doing :stuck_out_tongue:

Basically, there is a lot that can be done using CSS style sheets already, and it’s all handled internally by Qt. Creating a Python script that lets you load in style sheets is easy enough. So if we want to implement “Theme Customization” it might be worth doing it this way, but from what I can tell it’s gonna need some tweaks internally. It’d have to be an effort on the developers’ part to decide what UI elements can be styled with CSS and how, and then refactor (here is where I lost the interest of all programmers :stuck_out_tongue: ) certain classes to better adhere to the CSS.

Or there might be a entirely better way than CSS style sheets, and I’ve just not learned about yet as I stumble through PyQt5! :smiley:

2 Likes

I know this was an idea discussed in the original redesign thread, with most people saying they wouldn’t prefer it. But I think having the option to adjust transparency on the dockers would be nice, especially for when dockers are separated from the main view.

1 Like

Please report back with your progress if you have any :grinning:!

Basically what I’m gathering from this reply, is that there are a lot existing systems in Qt that allow a form of theme customisation, but to an extent. If this were to be explored further, we’d definitely need some advice from some interested programmer who knows Krita and Qt (:wink:) about the feasibility of theme customisation.

I for one am interested, but this would need a bit of guidance I think!

In fact, this was raised again as a ‘disabling option’, where clicking a button would make the Docker transparent and non-editable. Say you were drawing large strokes on the canvas, and needed a view of the Layer Docker, similar to @Takiro’s case.

1 Like

Basically what I’m gathering from this reply, is that there are a lot existing systems in Qt that allow a form of theme customisation, but to an extent.

This is basically as far as I’m able to customize Krita’s UI using nothing by style sheets. To be clear: this isn’t a mock-up. This is the actual software - fully working - with a “custom theme” applied using CSS. So some work can be done with it, but there are limitations for various reasons.

5 Likes

Hmmm. It’s looking good but I see what you mean. If the dockers were to be upgraded in a sense, there would need to be serious coding involved (which I think was inherent to this proposal anyway :wink:).

It might be ambitious at the moment, but there’s a lot of optimisation for Dockers needed I think.

2 Likes

Just a question, when you talk about style sheets can you give me a hint (coding-wise) to where that is? It would save me quite a bit of time :smiley:

2 Likes

Style sheets are part of the Qt framework that Krita’s built on :slight_smile: more info:

https://doc.qt.io/Qt-5/stylesheet.html

To apply them to Krita you will have to use the Python API to grab a Qt component and the apply the style sheet to it. What I’ve currently been doing is grabbing the whole window…

from krita import *

mainWin = Krita.instance().activeWindow().qwindow()

…and then setting its style sheet manually.

mainWin.setStyleSheet("""
        
    QDockWidget {
        titlebar-close-icon: url(:/16_dark_tab-close.svg);
        titlebar-normal-icon: url(:/light_duplicatelayer.svg);
    }

"""}

By grabbing the entire window I’m able to quickly style anything, since style sheets are applied to both the component in question and all its children, and everything is a child of the main window :stuck_out_tongue: So in my example all native Qt docker windows should now have new close and undock buttons. But if I was to grab, say, the Layer docker and apply the same CSS, only the Layer docker would have the changes.

4 Likes

That’s really helpful actually, I was wondering the same thing!

Looks pretty efficient from what I can see :slightly_smiling_face:.

Very cool! I was wondering whether going straight to the source and editing there would be the better alternative, but the more I think about it, a plugin is actually the best way to go about it now. It allows faster iteration, less worries, more experimentation and if a user wants to test it, all he has to do is install it, no weird Krita version to download.

I was wondering if you have a private repo on this? If you do, could you add me? I think collaborating on this reduces the amount of duplicated time for the same effects.

2 Likes

Managing custom themes with the Python API is definitely a viable route! But like I was saying before, there are some limitations that probably will require reworking the source to allow for better theming. I’m hoping someone with more knowledge about Qt would be able to chime in what they think would be the best way doing all of this :slight_smile: Maybe this is more workable directly via QStyles in Python?

I don’t have any repo for playing with CSS, aside from a really small plugin that removes the borders around the toolbars (a very small and easily achievable modification) as per request. I’m also really not looking to be the repo owner for such a project if I’m completely honest :sweat_smile: If you want to investigate further into theming and all via Python, feel free to open a repo yourself and I’ll happily push what I have to it!

3 Likes

@slightlyangrydodo - Yes. I thiink Kapiya is right. If people want full support for customizing the appearance, the CSS options can only do so much. Some of these widget appearance settings are only available to change in C++ now.

For example if you wanted to change some things with how the tabs appeared, there is a little you can do with CSS, but other things you would have to do in C++ currently with the widget it uses. Here is what we can do with tabs in C++…
https://doc.qt.io/qt-5/qmdiarea.html

This QMdiAarea gives a lot of options, but most of the stuff doesn’t relate to styling. For example you can change the style of the tabs to rounded or triangular in C++ with setTabShape. Right now I don’t believe there is any way to make that change in Python. I am sure there will be other limitations with Python in this regard.

I would try to first do all you can do through the Python API. PyQt is pretty powerful so you can actually do quite a bit. You will eventually hit a roadblock with certain things. At that point we will have to figure out if there is a way to expose some setters and getters to the Python API. The Python API is still relatively new, so I am sure there is more things we can do to extend that.

3 Likes


I want dockers to be floatable without being a distraction. Currently on Windows the Title Bar looks like it’s not inside Krita.

My Mockup of How it could looks. Just rough sketch. I bet someone have better idea.

4 Likes

Not gonna lie, this solution is beautiful in my eyes. Go as far as PyQt allows, and if something that we need isn’t there, extend the API. Sounds clean, elegant, optional, and as fast as it possibly could. I love it.

I’m not gonna let this thing die, so I’ll start with organizing two repos, one containing a fork of Krita on which we we’ll iterate the API if need be, and the other containing the actual plugin that will do the styling. It will obviously be open-source, so if anyone wants to help contribute, please do!

I’ll post the links and instruction set for someone to get things up and running. Thanks for your suggestion, and I’ll post here if I have any doubts about anything that I can’t find online!

2 Likes

Okay, so I have most things set up!

Krita fork I mentioned, plugin repo (empty for now), and a script to help install and compile from source. The step to install packages is for Arch-based distros and it only works on Linux. To see how to compile from source, follow these steps.

For now I’ll just learn how to create a basic plugin to understand more of the required workflow.

Hope to see you there! :smiley:

3 Likes

On Arch the script assumes that you have yay installed, so you might want to make it pacman.

2 Likes

Fair point, I’ll tweak that, but right now I’m struggling against SIP. I have SIP installed, and the cmake sees no problem, but when I try to make, it fails at 93% with the error sip: Unable to find file "QtCore/QtCoremod.sip". Any idea what this might be?

I’m reinstalling the whole thing, as clearing the CMakeCache.txt didn’t help, but I’m not very confident it will work to be honest.

1 Like

On arch due to some issue the way system python packages install, this happens. There is a patch for this. Which i got from the source files of official arch build here. Download the raw patch file put it in the krita directory (which you have cloned from invent) and then apply the patch by git apply patch-file-name

2 Likes

Looks nice! Perhaps the Layer Docker could be resized in drag mode, to fit the layer count? That would help to save screen space I think!

@slightlyangrydodo you are once again amazing me with the effort you dedicate to this topic! Thanks again for the input!

@scottyp You have the right idea for how this should proceed I think!

Cheers

2 Likes