Krita UI Redesign

Develop Artists Feedback & Testing
142

Awesome! Are you suggesting a mode where docker transparency can be varied? Could you say how this would help with your creative process, as opposed to having the dockers opaque?

It would be interesting to see, definitely, or maybe having toggled icons for layer dockers in canvas mode…

But this brings us to @raghukamath’s point, where the existing capabilities of the program (and developers) should be considered. I wonder how that could be implemented :thinking:

An importance of these ideas is that we can show developers the support of users for these features, in the understanding that these features will make creating in Krita more accessible.

I don’t have a lot pf experience with Qt, I know there are other users in this topic like @EyeOdin and @Lynx3d who definitely have more experience, it’s an important idea to address Qt within the mockups as well. It’s good to set some range on how Qt treats dockers (and UI) in this sense, before our mockups reach impossibility :laughing:.

While I’m trying to experiment with Qt aside from this topic, it might be sensible define the limits with how far Qt can be customised (I know @Lynx3d was talking about this before), or maybe there’s an explanatory video or document somewhere?

Cheers

1 Like
143

Minor addition to this thread:
I decided to play around with Qt stylesheets in the Python API. Basically just grabbing Krita’s QMainWindow and feeding some CSS into its setStyleSheet() function :stuck_out_tongue:

I’m not about to bring us any cool new tabbed workspaces or floating-on-canvas toolbar, but with some minor tweaks I was able to bring about some new looks to the UI. I tried my best re-styling everything I could find how to re-style, but some things (like Krita’s custom slider spinboxes) doesn’t like being poked at :frowning:

krita_2020-05-23_21-36-00
krita_2020-05-23_21-36-001920×1017 134 KB

If someone wants to try the script and see if they can figure something more out, copy and paste the following into Krita’s scripter (and maybe save the script just in case). It’s specifically made for the “Krita darker” theme, so switch over to that for things to look correct.

Stylesheet Script 
from krita import Krita

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

    /* TOOLBAR */

    QToolBar {
        border: none;      
    }

    /* SPINBOX */

    QSpinBox {
        border: none;
        border-radius: 3px;
    }

    QSpinBox::up-button {
        background-color: #323232;
        border: none;
     }
     
    QSpinBox::up-arrow {
        image:  url(:16_light_draw-arrow-up.svg);
        width: 8px;
     }
     
    QSpinBox::down-button {
        background-color: #323232;
        border: none;
     }
     
     QSpinBox::down-arrow {
        image:  url(:16_light_draw-arrow-down.svg);
        width: 8px;                  
     }
     
     
     /* DOUBLE SPINBOX */

    QDoubleSpinBox {
        border: none;
        border-radius: 3px;
    }

    QDoubleSpinBox::up-button {
        background-color: #323232;
        border: none;
     }
     
    QDoubleSpinBox::up-arrow {
        image:  url(:16_light_draw-arrow-up.svg);
        width: 8px;
     }
     
    QDoubleSpinBox::down-button {
        background-color: #323232;
        border: none;                       
     }
     
     QDoubleSpinBox::down-arrow {
        image:  url(:16_light_draw-arrow-down.svg);
        width: 8px;                  
     }


    /* TAB BAR */

    QTabBar {
        background-color: #1c1c1c;
        border: none;
        border-radius: 3px;
    }

    QTabBar::tab {
        border: none;
        background-color: #323232;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        margin-top: 2px;
        margin-left: 2px;
        margin-right: 2px;
        padding: 4px;
    }

     QTabBar::tab:!first {
        margin-left: 0px;
    }

     QTabBar::tab:only-one {
        margin-left: 2px;
        margin: 0px;
        padding: 5px;
    }

    QTabBar::tab:!selected {
        color: grey;
        background-color: rgb(38, 38, 38);
    }

    QTabBar::tab:hover {
        border: none;
        background-color:#53728e;
    }


    /* ABSTRACT BUTTON */

    QAbstractButton {
        border: none;
        border-radius: 3px;    
    }

    QAbstractButton:hover {
        background-color: rgb(80, 80, 80);
    }

    QAbstractButton:pressed, QAbstractButton:checked {
        background-color: #53728e;    
    }

    /* SLIDER */

    QSlider::groove {
         border: none;
         border-radius: 3 px;
         height: 10px;
         background-color: rgb(40, 40, 40);
    }

    QSlider::handle{
         background-color: rgb(80, 80, 80);
         height: 10px;
         width: 10px;
         border-radius: 3 px;
         border: none;
    }


    /* COMBO BOX */

    QComboBox {
        background-color: rgb(40, 40, 40);
        border-radius: 3px;
        border: none;
    }

    QComboBox::drop-down {
        border: none;
        border-radius: 3px;
    }

    QComboBox::down-arrow {
        image:  url(:16_light_draw-arrow-down.svg);
        width: 8px;
       }
        
    QAbstractItemView {
        border: none;
        border-radius: 3px;
    }
        
    """)
4 Likes
144

Yes, it removes this one line in top bar. For me it could easily be the only feature of the new realise, and it would be enough :wink:
Thanks for the script!

4 Likes
145

White lines remover:
https://github.com/Kapyia/rmWhiteBorder/raw/master/rmWhiteBorder.zip

  • Download .zip
  • Import with Import Python Plugin… in Krita
  • Restart Krita
  • Active the plugin in Settings > Configure Krita… > Python Plugins
  • Restart Krita again
  • Hopefully your version of Krita loads the main window before loading Actions, and the eye-catching line will be gone!
    :heart:

I think @Rakurri was interested in this as well?

EDIT: The line removing script has been updated to work with 4.3 and later!

7 Likes
146

OMG that looks unbelievable @Kapyia! :heart_eyes:
My smile is wider than the cat’s smile from Alice in Wonderland!
That made my day, I am so excited! I can’t express my gratitude enough! Thank you thank you!

Though, it did not work on the 4.3.0-beta1, I can send you the script error I got on a direct message!
But it worked wonders on 4.2.9! :blush:
This is enough for me to want to downgrade to 4.2.9 again for the time being!
Will the plugin be updated for 4.3 once it is officially released?

Again, thank you! :grin:

3 Likes
147

I have a sneaking suspicion what might’ve happened during 4.3 development, but I’ll happily see what it’s crying about on your end! :smiley:

I’ll try and figure something out to make it compatible with 4.3 tomorrow!

EDIT: The line removing script has been updated to work with 4.3 and later!

5 Likes
148

I’m sure you don’t mean any harm, but I work on Breeze (icons, desktop theme and widget style), so I’d appreciate if you didn’t spread misinformation about it.

3 Likes
149

By the way, we (KDE) have been working on an overhaul to the look of Breeze and if Krita could get a visual upgrade just by switching to Breeze, I’m sure that would save a lot of time an effort for Krita developers. IIRC, Krita switched to Fusion because of a bug they were facing with the Breeze theme which has been fixed for a while now.

5 Likes
150

I believe it is breeze I mentioned here in that quote.

Breeze looks beautiful and I would love to have it on the Windows version. Before I read your reply to this post I thought that Breeze would not be an option on the Windows version. So hearing that it might be possible is great! :grin: As you say, I think that will do a lot to improve the UI, with less work!

2 Likes
151

@Kapyia awesome work! This looks so good in Krita already :smile:. And I didn’t know Krita had an inbuilt scripter, so thanks for pointing that out for me too!

@noahdvs that would be a great development for this topic too I think!

3 Likes
152

I haven’t paid much attention to the white line until I used your plug in and wow! Removing it really gives a different look on Krita. Thanks!

3 Likes
153

More adventures in the land of style sheets!

2020-05-24_10-58-22

9 Likes
154

This is awesome! I can see this being useful in a tablet interface perhaps, the icons might need to be grouped more but that’s for future improvements I think.

Makes me want to experiment more with style sheets, if I had the time aha.

2 Likes
155

WOW <3
it looks so much different.

5 Likes
156

Alright, I’m starting to lose interest in style sheets for now. Fun was had, but I have other business to tend to. :man_shrugging:

404×284 25.9 KB

  • Transparent Toolbox
  • Slimmer document tabs
  • No white edges around the toolbars

Just copy-paste the following script into the Scripter and hit run!

UI Tweaks script 
from krita import *

WINDOW = Application.activeWindow()

def toolbarBorderToggled(toggled):
    styleSheet = """"""

    if toggled:
        styleSheet = """
            QToolBar {
                border: none;
            }            
        """

    WINDOW.qwindow().setStyleSheet(styleSheet)


def tabHeightToggled(toggled):
    styleSheet = """"""

    if toggled:
        
        styleSheet = """
            QTabBar::tab {
                height: 23px;
            }
        """
    barList = WINDOW.qwindow().findChildren(QTabBar)
    tabBar = barList[0]
    tabBar.setStyleSheet(styleSheet)


def nuToolboxToggled(toggled):
    styleSheet = """"""

    if toggled:
        styleSheet = """

        KoToolBoxDocker { 
            background-color: rgba(128, 128, 128, .01);
            margin: 2px; 
        }
        
        .KoToolBoxScrollArea { 
            background-color: rgba(0,0,0,0);
        }
        
        KoToolBoxScrollArea * { 
            background-color: rgba(0,0,0,0);
        }
        
        KoToolBoxDocker QLabel {
            border: none;
            border-radius: 3px; 
            background-color: #66000000;
        }
        
        KoToolBoxScrollArea QToolTip {
            background-color: #ffffff;                           
        }
        
        KoToolBoxButton {
            background-color: #66000000;
            border: none;
            border-radius: 3px;
            margin-right: 1px;
            margin-top: 1px;
        }
        
        KoToolBoxButton:checked {
            background-color: #aa306fa8;
        }
        
        KoToolBoxButton:hover {
            background-color: inherit;
        }
        
        KoToolBoxButton:pressed {
            background-color: #53728e;
        }
        
    """

    toolbox = WINDOW.qwindow().findChild(QWidget, 'ToolBox')
    handle = toolbox.findChild(QLabel)
    toolbox.setFixedWidth(58)
    toolbox.setFixedHeight(549)
    toolbox.setStyleSheet(styleSheet)

actions = []
actions.append(WINDOW.createAction("toolbarBorder", "Remove toolbar borders", "window"))
actions.append(WINDOW.createAction("tabHeight", "Thin document tabs (requires window resize)", "window"))
actions.append(WINDOW.createAction("nuToolbox", "Redesigned toolbox", "window"))
menu = WINDOW.qwindow().menuBar().addMenu("UI Tweaks")

actions[0].toggled.connect(toolbarBorderToggled)
actions[1].toggled.connect(tabHeightToggled)
actions[2].toggled.connect(nuToolboxToggled)

for a in actions:
    a.setCheckable(True)
    a.toggle()
    menu.addAction(a)
7 Likes
157

Looks nice @Kapyia! Thanks for the effort :pray:

Hey @EyeOdin, in regards to your sketch, would this idea work in Qt? With the icon moving into the header while in unpinned mode.

icons horizontal 3
icons horizontal 3767×632 84.5 KB

Cheers

2 Likes
158

@fullerhill_art
I think that could probably work.
I not to certain if he would not insist in placing the icon on both stages of the docker though. It would certainly need a exception made for it to happen if it’s possible.

1 Like
159

On between the visibility icon and layer. I wouldn’t advocate removing the indicator of type of layer it is. I use clone layers extensively for painting/editing, and it would be ideal for me to know what type of layer it is.

3 Likes
160

Oh yes, sorry, that was just an accidental omission, because I don’t know where the icons for the Layer Docker are held; at the moment I’m substituting Blender icons if you couldn’t tell :wink:.

I think I was waiting for @tiar to link the .svg mockup icons from David Revoy, but I could be mistaken on that front!

That will by no means stay omitted anyway!

161

Also, I think I prefer the current symbol for alpha inheritance. That symbol is used in a lot of papers associated with image processing, and that’s why I prefer it like that.

2 Likes