[SOLVED]how is the sidebar in Qt Creator created?

dhott

I'm not asking for code, just what was used. I'm wondering how the Welcome, Edit, Design, etc. sidebar was created. Was it default widgets, or was something subclassed to create that layout?

ambershark

Well I have used QTabWidget to make a selection bar type thing like is in Qt Creator. It doesn't look like the Qt Creator one but it could easily be changed to look like it.

I used a class derived from QTabWidget, and basically used style sheets for 99% of the looks.

Here is a pic of the bar:

!http://www.ambershark.com/snap.png(snapshot)!

You wouldn't even really need to subclass QTabWidget if you didn't want to. I found it was easier since I had view control stuff I had to deal with as well as icon rotation for the side bar look, etc.

The style sheets I used are:

@
#if (defined Q_OS_WIN32 || defined Q_OS_MAC)
setStyleSheet("QTabWidget#PackageWidgetBar::pane {"
"border: 1px solid #fbdf93;"
"}"

              "QTabWidget#PackageWidgetBar::tab-bar {"
              "alignment: center;"
              "}" 

              "QTabBar#PackageBar::tab {"
              "background: qlineargradient(x1: 1, y1: 0, x2: 0, y2: 0,"
              "stop: 0 #e2e2e2, stop: 0.4 #dbdbdb,"
              "stop: 0.5 #d1d1d1, stop: 1.0 #fefefe);"
              "padding-bottom: 8px;"
              "padding-top: -4px;"
              "min-width: 38px;"
              "}" 

              "QTabBar#PackageBar::tab::selected, QTabBar::tab::hover {"
              "background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,"
              "stop: 0 #fceabb, stop: 0.4 #fccd4d,"
              "stop: 0.5 #f8b500, stop: 1.0 #fbdf93);"
              "}" 
              );

#else
setStyleSheet("QTabWidget#PackageWidgetBar::pane {"
"border: 1px solid #fbdf93;"
"}"

              "QTabWidget#PackageWidgetBar::tab-bar {"
              "alignment: center;"
              "}" 

              "QTabBar#PackageBar::tab {"
              "background: qlineargradient(x1: 1, y1: 0, x2: 0, y2: 0,"
              "stop: 0 #e2e2e2, stop: 0.4 #dbdbdb,"
              "stop: 0.5 #d1d1d1, stop: 1.0 #fefefe);"
              "}" 

              "QTabBar#PackageBar::tab::selected, QTabBar::tab::hover {"
              "background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,"
              "stop: 0 #fceabb, stop: 0.4 #fccd4d,"
              "stop: 0.5 #f8b500, stop: 1.0 #fbdf93);"
              "}" 
              );

#endif
@

Due to rendering issues in different OSes (linux/osx/windows/etc) I had to do some different css for each. OSX and Windows played well together with this one (for a change), but linux needed some custom stuff.

Anyway, hope that gives you some ideas for your own stuff.

andreyc

It is not standard widget.
Take a look on QtCreator sources and search for FancyActionBar class if I'm not mistaken.

dhott

Wow, not sure how I missed TabWidget. Thank you very much for the quick response, that should take care of my needs perfectly.

ambershark

No problem. :) Make sure to mark the post as [SOLVED] for future people.

dhott

[quote author="andreyc" date="1405038351"]It is not standard widget.
Take a look on QtCreator sources and search for FancyActionBar class if I'm not mistaken.[/quote]

will do, thank you for the great response as well.