Need help with .qss stylesheet.

[OficineRobotica]

Allot of you might know that Realthunder has introduced in his development branch the native overlay interface and it's packed full with features that I'vd been waiting for a lifetime to land in FC. Now I would like to tailor a style sheet where I can experiment with some UX/UI guidelines taken from the video linked below.

phpBB [video]

As I am a simple user converted to wannabe programmer I need help from the qt gurus to target some specific elements of the ui. I'vd done allot of trial and error but some elements just elude me.

Some background:

/* The OverlayTabWidget is named as OverlayLeft, OverlayRight, OverlayTop, OverlayBottom.
To customize for each overlay docking site, use the following selector

Gui--OverlayTabWidget#OverlayLeft {}
*/

Also about the outline of the text in a overlay widget.

The stylesheets enable outline effect for all four docking site, which is probably not desirable for everyone. You can copy the built-in stylesheet, and modify it to customize each docking site. The configuration section is here. 'effectWidth' and 'effectHeight' controls the outline thickness. If you want shadow, then set them to 0, and add 'effectOffsetX/Y'.

Also, be aware that the effect is applied to everything inside the overlay widgets, not just the text, and it really only works with a complete transparent background.

Elements that I need help with:

1- we now have the option to set text and icon size for the tree view but when doing that we loose the vertical padding between the elements. How can I set the vertical padding between the text rows? Also I would like to experiment with text background for individual "text boxes" in the tree. I'vd tried QTreeView::item{background-color: gray} but that didn't help.

2- In the comboview how can I choose the text color for the individual rows? Also the rows are alternate colors. How can I style the individual row color and transparency?

3- I would like to style the highlighted elements in the screenshot below. What are the selectors for the individual elements?

UI_Elements.jpeg (212.42 KiB) Viewed 1912 times

4- at the moment the overlayed task panel styling is a mess. I hope to gain enough knowledge with the first 3 points to start to tackle next the task panel. If I get stuck I'll ask for help again.

UI_Elements1.jpeg (305.27 KiB) Viewed 1912 times

This is my overlay stylesheet atm:

Code: Select all

Gui--OverlayTabWidget#OverlayRight {
  qproperty-effectColor: rgba(50, 50, 50, 250);
  qproperty-effectBlurRadius: 0.0;
  qproperty-effectOffsetX: 0.0;
  qproperty-effectOffsetY: 0.0;
  qproperty-effectWidth: 1.0;
  qproperty-effectHeight: 1.0;
  qproperty-enableEffect: 1;
}
Gui--OverlayTabWidget#OverlayRight {
    color: black;
}


Gui--OverlayTabWidget::pane#OverlayRight {
    color: black;
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(109, 109, 109, 150), stop:1 rgba(151, 151, 170, 50) )
}


QHeaderView {
    color: black;
/*    color: rgba(200,200,200,0.5);*/
}

QHeaderView::section {
    background-color: transparent;
    width: 0px;
    margin: 0px;
    background-color: rgba(0,0,0,0.1);
}

/*==================================================================================================
Tree and list views
==================================================================================================*/
QTreeView {
    color: white;
    background-color: transparent;
}


QScrollBar:vertical {
    background-color: transparent;
    width: 0px;
    margin: 0px;
}

/* The OverlayTabWidget is named as OverlayLeft, OverlayRight, OverlayTop, OverlayBottom.
To customize for each overlay docking site, use the following selector

Gui--OverlayTabWidget#OverlayLeft {}
*/

Gui--OverlayTabWidget#OverlayLeft {
  qproperty-effectColor: rgba(50, 50, 50, 250);
  qproperty-effectBlurRadius: 0.0;
  qproperty-effectOffsetX: 0.0;
  qproperty-effectOffsetY: 0.0;
  qproperty-effectWidth: 1.0;
  qproperty-effectHeight: 1.0;
  qproperty-enableEffect: 1;
}


QTabBar {
    color: black;
  border : none;
}

To anyone that helps please be patient as my knowledge of qt syling is really limited. Cheers to everyone.

[realthunder]

1- we now have the option to set text and icon size for the tree view but when doing that we loose the vertical padding between the elements. How can I set the vertical padding between the text rows? Also I would like to experiment with text background for individual "text boxes" in the tree. I'vd tried QTreeView::item{background-color: gray} but that didn't help.

By vertical padding, do you mean the space between individual items of the tree view? How about increase the icon size? Currently tree view row height is hard coded to be 2 + icon size. I can make that customizable if you want. Setting item text background of tree view is a lot harder though. I'll probably try in the future.

2- In the comboview how can I choose the text color for the individual rows? Also the rows are alternate colors. How can I style the individual row color and transparency?

Not really combo view, but the alternative background color of a tree view. Yes, the property view (stylesheet selector Gui--PropertyEditor--PropertyEditor) is derived from QTreeView. The alternative background color is set in the third line of Dark-Outline.qss. This line applies to all list/tree view alternative background color, if it is enabled. It seems, only property view enables alternative color. Also, look PropertyEditor in the Dark-Outline.qss for settings of the item, group text and background color. Note that those background colors apply to the whole column, which is a lot easier to do, while for object tree view, I presume you only want to color the background of the text, which is harder. You can try set Gui--TreeWidget::item {background-color:} and see what I mean.

3- I would like to style the highlighted elements in the screenshot below. What are the selectors for the individual elements?

There are two places. One is QTreeView::item:selected { background-color: }, the other QTreeView { selection-background-color: }. You can try to change the selection-background-color in Dark-Outline.qss to transparent and see what it does.

[pablogil]

There are some things that can't be done because how the UI has been coded under C++, I mean, the whole FreeCAD UI hasn't been coded from the very first time thinking in stylesheets and the ability to fully customize it with this external files. This might change in the future... but IMHO it will need an experienced coder that takes a looot of time modifying the actual UI.

Being that said, I think your point nº1 can't be done with just stylesheets... I have tried it just in case but I couldn't. I tried other tricks than the padding one without luck.

Anyway, you may find some interesting styling tips in the overlay stylesheet I'm using right now (I like it better than the one that @realthunder is providing as default). There you will also find answer for some other points

If you have any other question just let me know, I'll try to help you.
BTW, 99% of what you need is in the original .qss stylesheets, it's just a matter to know where to touch and tweak

Cheers

[OficineRobotica]

Thank you so much to both of you.