QML Observer: Made toolbar and crumble path look better

Now the style is something similar to Qt Creator's default coloring.

4 files changed, 41 insertions, 3 deletions

diff --git a/src/tools/qml/qmlobserver/qml.pri b/src/tools/qml/qmlobserver/qml.pri
index c351d58caf3..7d9a503fb69 100644
--- a/src/tools/qml/qmlobserver/qml.pri
+++ b/src/tools/qml/qmlobserver/qml.pri
@@ -21,6 +21,8 @@ SOURCES += $$PWD/qmlruntime.cpp \
 
 RESOURCES += $$PWD/qmlruntime.qrc
 
+OTHER_FILES += toolbarstyle.css
+
 maemo5 {
     QT += dbus
     HEADERS += $$PWD/texteditautoresizer_maemo5.h
diff --git a/src/tools/qml/qmlobserver/qmlruntime.cpp b/src/tools/qml/qmlobserver/qmlruntime.cpp
index 0109914f031..646f438869a 100644
--- a/src/tools/qml/qmlobserver/qmlruntime.cpp
+++ b/src/tools/qml/qmlobserver/qmlruntime.cpp
@@ -588,16 +588,23 @@ QDeclarativeViewer::QDeclarativeViewer(QWidget *parent, Qt::WindowFlags flags)
     canvas = new QmlViewer::QDeclarativeDesignView(this);
     addToolBar(Qt::TopToolBarArea, canvas->toolbar());
 
+    QFile file(":/toolbarstyle.css");
+    file.open(QFile::ReadOnly);
+    QString toolbarStylesheet = QLatin1String(file.readAll());
+
+    canvas->toolbar()->setFloatable(false);
+    canvas->toolbar()->setMovable(false);
+    canvas->toolbar()->setStyleSheet(toolbarStylesheet);
+
     m_centralWidget = new QWidget(this);
     QVBoxLayout *layout = new QVBoxLayout(m_centralWidget);
     layout->setMargin(0);
     layout->setSpacing(0);
     layout->addWidget(canvas->crumblePathWidget());
+    canvas->crumblePathWidget()->setStyleSheet("QWidget { border-bottom: 1px solid black; }");
     layout->addWidget(canvas);
-    canvas->crumblePathWidget()->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Minimum);
     m_centralWidget->setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::MinimumExpanding);
 
-    //canvas->setSizePolicy(Qt:);
     canvas->setAttribute(Qt::WA_OpaquePaintEvent);
     canvas->setAttribute(Qt::WA_NoSystemBackground);
 
diff --git a/src/tools/qml/qmlobserver/qmlruntime.qrc b/src/tools/qml/qmlobserver/qmlruntime.qrc
index 3a9e6080e35..e8d08c6356e 100644
--- a/src/tools/qml/qmlobserver/qmlruntime.qrc
+++ b/src/tools/qml/qmlobserver/qmlruntime.qrc
@@ -1,9 +1,10 @@
 <RCC>
-    <qresource prefix="/" >
+    <qresource prefix="/">
         <file>content/Browser.qml</file>
         <file>content/images/up.png</file>
         <file>content/images/folder.png</file>
         <file>content/images/titlebar.sci</file>
         <file>content/images/titlebar.png</file>
+        <file>toolbarstyle.css</file>
     </qresource>
 </RCC>
diff --git a/src/tools/qml/qmlobserver/toolbarstyle.css b/src/tools/qml/qmlobserver/toolbarstyle.css
new file mode 100644
index 00000000000..8fbbdf9f875
--- /dev/null
+++ b/src/tools/qml/qmlobserver/toolbarstyle.css
@@ -0,0 +1,28 @@
+QToolBar {
+    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(85, 85, 85, 255), stop:0.3 rgba(79, 79, 79, 255), stop:0.301 rgba(70, 70, 70, 255), stop:1 rgba(57, 57, 57, 255));
+    color: #EEEEEE;
+}
+QToolBar::separator {
+    width: 1px;
+    border-right: 1px solid #6d6d6d;
+    background: #414141;
+}
+QToolButton {
+    border: none;
+    padding-left:4px;
+    padding-right:4px;
+    padding-top:5px;
+    padding-bottom:5px;
+}
+QToolButton:checked {
+    border: none;
+    padding-left:4px;
+    padding-right:4px;
+    padding-top:5px;
+    padding-bottom:5px;
+    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(65, 65, 65, 255), stop:0.3 rgba(59, 59, 59, 255), stop:0.301 rgba(50, 50, 50, 255), stop:1 rgba(37, 37, 37, 255));
+}
+QToolButton:hover {
+    border: none;
+    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(105, 105, 105, 255), stop:0.3 rgba(99, 99, 99, 255), stop:0.301 rgba(90, 90, 90, 255), stop:1 rgba(77, 77, 77, 255));
+}