Dockers as dropdown menus

[kaichi1342]

A crude visualization;

the far left button will function similar to docker under palette one,
basically setting to define which docker is in there and unlike docker under palette which one of our concern is space.

I dont think docker on toolbar / dockerbar (lol) will have the same issue. So number of icons will be dependent on size.
Option maybe either icon or text.

Anyway Im also fine with the current design by Freyalupen. Since that already work on Docker Under Palette and just basically an extension of it.

@abhifx I think that button in @freyalupens design - can be place to far right beside the layout manager via toolbar settings, i think you just need to insert it after the expanded spacer and before layout manager.

[abhifx]

Alright, the mockup looks good.

Further, when i meant button on the left, i want the button in place of toolbox docker.

I am also thinking out loud, could this whole feature can become a docker? In that way we can place this like any another docker and its tool option would allow enabling and disabling any docker which would create icons just like the mockup

[kaichi1342]

I think I got it. Similar to Tool Options Docker.

Now that I think of it something like this will work for me as well;

instead of the button as what currently Freyalupen tested, just go straight to the combobox in the docker.

Thinking more about this request seems many different design can be used to implement it.

[abhifx]

I am actually hoping if something like this can be done. This project is actually very close to what i was thinking with dual hand navigation. right hand to draw, left to invoke dockers

[raghukamath]

Inkscape has this button in the sidebar when clicked it expands into panel

Similar thing is done in libreoffice too.

Adobe products too have such sidebars or buttons when clicked a flyout dialog is shown for the docker.

I think this will greatly improve space usage and workspace flexibility

[abhifx]

Agreed, this works well and this is similar to what i envisaged for krita

[AkiR]

More toying: tool bar of docker buttons feels nice and compact.

from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QToolBar


class DockerToolBar(QToolBar):
    docker_icons = {
        'ArrangeDocker': Application.icon('krita_tool_grid'),
        'ChannelDocker': Application.icon('view-choose'),
        'HistogramDocker': Application.icon('krita_tool_gradient'),
        'History': Application.icon('infinity'),
        'OnionSkinsDocker': Application.icon('onion_skin_options'),
        'PatternDocker': Application.icon('pattern'),
        'PresetDocker': Application.icon('krita_tool_multihand'),
        'sharedtooldocker': Application.icon('properties')}

    def __init__(self, window):
        super().__init__()
        qwindow = window.qwindow()
        qwindow.addToolBar(Qt.RightToolBarArea, self)
        for docker in Application.dockers():
            icon = self.docker_icons.get(docker.objectName())
            if icon:
                action = self.addAction(docker.toggleViewAction().text())
                action.setIcon(icon)
                action.setData(docker)
                action.triggered.connect(self._on_action_triggered)

    def _on_action_triggered(self, checked=None):
        action = self.sender()
        button = self.widgetForAction(action)

        docker = action.data()
        docker.setVisible(not docker.isVisible())
        docker.setFloating(True)
        docker.raise_()

        gpos = self.mapToGlobal(button.frameGeometry().topLeft())
        docker.window().move(gpos.x() - docker.window().width(), gpos.y())


docker_bar = DockerToolBar(Application.activeWindow())

/AkiR

[kaichi1342]

Indeed, and thank you for letting us have a look at this.
Im running this out of the built in scripter.

The Docker bar is looking pretty fine. I tried it in different position.

A few positioning tweak + option to set which docker will be there and this is pretty much what we are looking for.

Positioning tweak gonna bit of pain to nail I think.

For those who are not familiar with the scripter and want to try;
on Menu bar > Tools > Script > Scripter , Copy paster @AkiR code and save.

[abhifx]

Nice, this is nice. So dockers can be assigned icons and can be invoked.

Android krita doesnt support script, so yeah, still awaiting for native solutions

[Jannes_van_Baalen]

This works well, it definitely feels like you are on the right track.

[abhifx]

Dear @AkiR, Tried this on desktop and this works fantastically. How would i add layers to it?

@freyalupen, The script from Akir is kind of hits bullseye, Icons for each docker, dockers can be invoked with floating effect, can be placed anywhere in the UI. there are some querkiness which can be looked at but requesting if this can be looked into and baked in krita.

[freyalupen]

I haven’t meant to ignore this thread, just been having trouble gathering my thoughts on it. (And, I haven’t made any progress in my implementation.) But here are some thoughts.

Different icons for every docker:
It did come to mind, but it seems like a large design task given the number of them, and that’s without even considering plugins (though they can have a fallback). That doesn’t mean it’s impossible, though.

Implementing AkiR’s dockers toolbar script natively:
Porting it from Python to C++ should be mostly straightforward in this case, the hard part is the design. So I would first work on polishing it as a plugin, one that adds actions for Krita’s existing toolbars, as it’s more flexible to develop a plugin.

Adding dockers to the script:
You just need to add it to the “docker_icons” list. You have to know the docker’s internal name, which can be gotten for any docker like this:

from krita import *

dockerName = "Layers" # or whichever
qdock = next((w for w in Krita.instance().dockers() if w.windowTitle() == dockerName), None)
print(qdock.objectName())

For Layers it would be like
'KisLayerBox': Application.icon('merge-layer-below'),
(there is probably a better icon than that somewhere).

---

@Deif_Lou

for desktop I would rather prefer something like ps or csp, where the dockers can be collapsed into buttons and so on

I’m not familiar with PS or CSP, what does that look like?

[kaichi1342]

I dont know which direction the design will go. My vote is on DockerBar. Im fine which ever was chosen.

I went ahead and start designing icons for the docker that has no suitable icon yet.
I think [layer, histogram, onionskin? and a couple of other main dockers can use already existing icons]

Channel, GamutMask, Advance Color, Guides and Grids, Anim Timeline, Advance Color, Generic Python Plugin Docker, Anim Curve.

[Deif_Lou]

@freyalupen

I’m not familiar with PS or CSP, what does that look like?

First of all, that is something that would need a new docking system, but maybe it can give some ideas.

In ps you have “sidebars” that are attached to some edge of the main window. Each sidebar can have multiple “docker groups”. For example, on a left sidebar you have the groups distributed from top to bottom. Each docker group has 1 or more dockers in a tabbed view, so only 1 docker is visible at a time. You can detach a whole sidebar and making it floating by click and dragging an area on the top, above the tabs. Or you can detach a single docker and make it floating by click and dragging a tab (this actually creates a floating sidebar, with a docker group that has that docker). You can organize the dockers in the sidebars in the same way, regardles they are floating or attached to an edge. Not sure right now if you can also detach a whole docker group at once. All of this is similar to any docking system.

Where the novelty resides is in that the sidebars can be collapsed/expanded to/from a kind of toolbar. This toolbar shows icons for the dockers and those icons are grouped visually if they belong to the same docker group, so the docker grouping is preserved. It is like a collapsed version of the docker group. Then if you click one of those icons the docker appears as a floatting window and stays open until you press its icon again. Iirc those icon groups can also be detached to a floating toolbar.

Overall it allows easy access to dockers without having them take too much space. For example you can have the most used dockers on a expanded sidebar, and secondary dockers that you use less frequently, but frequently enough so that you want to have them at hand, on a collapsed sidebar, and show them temporarilly by clicking the icon.

[abhifx]

Thanks and great work @kaichi1342

[abhifx]

The layer worked. There are some querkyness, like the docker pops always on left side and visible dockers behave weirdly.

I am still stumped how this can be implemented with current design. But i hope we all can pitch in. Should the buttons will always be visible and retain existing design? Where will the configuration of buttons go?

I will be home this weekend, i might try a mockup

Edit : Looks like i got some idea instead of sleeping.

Dockers button should be listed on right. Where pressing a button would enable docker and highlight the same with pressed button representation. Thus by default, regular interface will be available with pressed buttons. This can now be enabled or disabled with press og a button.

More dockers icon can be enabled or disbaled just like existing system is there. Which instead of just enabling whole visible docker will just enable icon

[freyalupen]

I’ve made two things for testing.

I made an MR for putting the “borrowed dockers button” in the toolbar: Add docker box toolbar widget (!2104) · Merge requests · Graphics / Krita · GitLab

I added actions for “docker toolbar buttons” to my experimental “Summon Docker” plugin.

[abhifx]

I tried it and it definitely makes a better workflow in full screen mode (canvas only).

By just enabling toolbar in canvas mode, brush is already available, colour is already available, brush size and opacity is there, now with this docker i can get tool box or layer easily accessible.

This workflow is even better.

If just the toolbar could be moved to the left and rotated sigh! I can call this the tablet UI happily.

@freyalupen, i enabled it on secondary toolbar and enabled two buttons, and it didnt have icon. but the main toolbar shows the icon correctly. Not sure why this is. I will try to test the plugin later.

[abhifx]

Well this is even more crazy and good programming

Also tested the plugin and IMHO this is something what @raghukamath was implying in inkscape.

More people may chip in. i think we have much flexibility if all three options are here with docker in toolbar, in pop up and this plugin if it can be made native

[abhifx]

I have now tested the new build where of docker box is not enabled in toolbar, it can be assigned to a shortcut and it will invoke where the cursor is. very cool