QmlDesigner: Update design on widget tool bars

* Add more style definitions in CSS
* Add CSS to curve editor, timeline and transtion editor tool bar
* Add spaces to curve and transition editor tool bar
* Fix icons and margins in form editor tool bar
* Remove inline CSS from nevigator search widget

Change-Id: I21467783ad491d5c3ba646e6b3ac2d95b47e5fb5
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

src/plugins/qmldesigner/components/curveeditor/curveeditor.cpp

@@ -8,6 +8,8 @@
 #include "detail/graphicsview.h"
 #include "detail/treeview.h"
 
+#include <utils/fileutils.h>
+
 #include <QDoubleSpinBox>
 #include <QHBoxLayout>
 #include <QLabel>
@@ -32,6 +34,9 @@ CurveEditor::CurveEditor(CurveEditorModel *model, QWidget *parent)
     m_infoText = new QLabel(labelText);
     setContentsMargins(0, 0, 0, 0);
 
+    m_toolbar->setStyleSheet(Theme::replaceCssColors(
+        QString::fromUtf8(Utils::FileReader::fetchQrc(":/qmldesigner/stylesheet.css"))));
+
     auto *splitter = new QSplitter;
     splitter->addWidget(m_tree);
     splitter->addWidget(m_view);

src/plugins/qmldesigner/components/curveeditor/curveeditortoolbar.cpp

@@ -68,6 +68,8 @@ CurveEditorToolBar::CurveEditorToolBar(CurveEditorModel *model, QWidget* parent)
     QByteArray sheet = Utils::FileReader::fetchQrc(":/qmldesigner/stylesheet.css");
     setStyleSheet(Theme::replaceCssColors(QString::fromUtf8(sheet)));
 
+    addSpace(5);
+
     QAction *tangentLinearAction = addAction(Theme::iconFromName(Theme::linear_medium), "Linear");
     QAction *tangentStepAction = addAction(Theme::iconFromName(Theme::step_medium), "Step");
     QAction *tangentSplineAction = addAction(Theme::iconFromName(Theme::bezier_medium), "Spline");
@@ -185,6 +187,8 @@ CurveEditorToolBar::CurveEditorToolBar(CurveEditorModel *model, QWidget* parent)
     addAction(zoomOut);
     addWidget(m_zoomSlider);
     addAction(zoomIn);
+
+    addSpace(5);
 }
 
 void CurveEditorToolBar::setZoom(double zoom)

src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp

@@ -105,7 +105,8 @@ FormEditorWidget::FormEditorWidget(FormEditorView *view)
     m_showBoundingRectAction = new QAction(tr("Show Bounds"), this);
     m_showBoundingRectAction->setCheckable(true);
     m_showBoundingRectAction->setChecked(false);
-    m_showBoundingRectAction->setIcon(DesignerActionManager::instance().contextIcon(DesignerIcons::ShowBoundsIcon));
+    m_showBoundingRectAction->setIcon(
+        DesignerActionManager::instance().contextIcon(DesignerIcons::ShowBoundsIcon));
     registerActionAsCommand(m_showBoundingRectAction,
                             Constants::FORMEDITOR_NO_SHOW_BOUNDING_RECTANGLE,
                             QKeySequence(Qt::Key_A),
@@ -116,15 +117,19 @@ FormEditorWidget::FormEditorWidget(FormEditorView *view)
 
     m_rootWidthAction = new LineEditAction(tr("Override Width"), this);
     m_rootWidthAction->setToolTip(tr("Override width of root component."));
-    connect(m_rootWidthAction.data(), &LineEditAction::textChanged,
+    connect(m_rootWidthAction.data(),
-            this, &FormEditorWidget::changeRootItemWidth);
+            &LineEditAction::textChanged,
+            this,
+            &FormEditorWidget::changeRootItemWidth);
     addAction(m_rootWidthAction.data());
     upperActions.append(m_rootWidthAction.data());
 
     m_rootHeightAction = new LineEditAction(tr("Override Height"), this);
     m_rootHeightAction->setToolTip(tr("Override height of root component."));
-    connect(m_rootHeightAction.data(), &LineEditAction::textChanged,
+    connect(m_rootHeightAction.data(),
-            this, &FormEditorWidget::changeRootItemHeight);
+            &LineEditAction::textChanged,
+            this,
+            &FormEditorWidget::changeRootItemHeight);
     addAction(m_rootHeightAction.data());
     upperActions.append(m_rootHeightAction.data());
 
@@ -134,49 +139,27 @@ FormEditorWidget::FormEditorWidget(FormEditorView *view)
     m_toolBox->setLeftSideActions(upperActions);
 
     m_backgroundAction = new BackgroundAction(m_toolActionGroup.data());
-    connect(m_backgroundAction.data(), &BackgroundAction::backgroundChanged, this, &FormEditorWidget::changeBackgound);
+    connect(m_backgroundAction.data(),
+            &BackgroundAction::backgroundChanged,
+            this,
+            &FormEditorWidget::changeBackgound);
     addAction(m_backgroundAction.data());
     upperActions.append(m_backgroundAction.data());
     m_toolBox->addRightSideAction(m_backgroundAction.data());
 
     // Zoom actions
-    const QString fontName = "qtds_propertyIconFont.ttf";
+    const QIcon zoomAllIcon = Theme::iconFromName(Theme::Icon::fitAll_medium);
-    const QColor iconColorNormal(Theme::getColor(Theme::IconsBaseColor));
+    auto zoomSelectionNormal = Theme::iconFromName(Theme::Icon::fitSelection_medium);
-    const QColor iconColorDisabled(Theme::getColor(Theme::IconsDisabledColor));
+    auto zoomSelectionDisabeld = Theme::iconFromName(Theme::Icon::fitSelection_medium,
+                                                     Theme::getColor(
+                                                         Theme::Color::DStoolbarIcon_blocked));
+    QIcon zoomSelectionIcon;
+    zoomSelectionIcon.addPixmap(zoomSelectionNormal.pixmap({16, 16}), QIcon::Normal);
+    zoomSelectionIcon.addPixmap(zoomSelectionDisabeld.pixmap({16, 16}), QIcon::Disabled);
 
-    const int iconSize = 32;
+    const QIcon zoomInIcon = Theme::iconFromName(Theme::Icon::zoomIn_medium);
-    const QIcon zoomAllIcon = Utils::StyleHelper::getIconFromIconFont(fontName,
+    const QIcon zoomOutIcon = Theme::iconFromName(Theme::Icon::zoomOut_medium);
-                                                                      Theme::getIconUnicode(
+    const QIcon reloadIcon = Theme::iconFromName(Theme::Icon::reload_medium);
-                                                                          Theme::Icon::fitAll_medium),
-                                                                      iconSize,
-                                                                      iconSize,
-                                                                      iconColorNormal);
-
-    const QString zoomSelectionUnicode = Theme::getIconUnicode(Theme::Icon::fitSelection_medium);
-    const auto zoomSelectionNormal = Utils::StyleHelper::IconFontHelper(zoomSelectionUnicode,
-                                                                        iconColorNormal,
-                                                                        QSize(iconSize, iconSize),
-                                                                        QIcon::Normal);
-    const auto zoomSelectionDisabeld = Utils::StyleHelper::IconFontHelper(zoomSelectionUnicode,
-                                                                          iconColorDisabled,
-                                                                          QSize(iconSize, iconSize),
-                                                                          QIcon::Disabled);
-
-    const QIcon zoomSelectionIcon = Utils::StyleHelper::getIconFromIconFont(fontName,
-                                                                            {zoomSelectionNormal,
-                                                                             zoomSelectionDisabeld});
-    const QIcon zoomInIcon = Utils::StyleHelper::getIconFromIconFont(fontName,
-                                                                     Theme::getIconUnicode(
-                                                                         Theme::Icon::zoomIn_medium),
-                                                                     iconSize,
-                                                                     iconSize,
-                                                                     iconColorNormal);
-    const QIcon zoomOutIcon = Utils::StyleHelper::getIconFromIconFont(fontName,
-                                                                      Theme::getIconUnicode(
-                                                                          Theme::Icon::zoomOut_medium),
-                                                                      iconSize,
-                                                                      iconSize,
-                                                                      iconColorNormal);
 
     auto writeZoomLevel = [this]() {
         double level = m_graphicsView->transform().m11();
@@ -284,9 +267,7 @@ FormEditorWidget::FormEditorWidget(FormEditorView *view)
     m_toolBox->addRightSideAction(m_zoomSelectionAction.data());
     connect(m_zoomSelectionAction.data(), &QAction::triggered, frameSelection);
 
-    m_resetAction = new QAction(
+    m_resetAction = new QAction(reloadIcon, tr("Reload View"), this);
-                DesignerActionManager::instance().contextIcon(DesignerIcons::ResetViewIcon),
-                tr("Reset View"), this);
     registerActionAsCommand(m_resetAction,
                             Constants::FORMEDITOR_REFRESH,
                             QKeySequence(Qt::Key_R),
@@ -627,7 +608,8 @@ void FormEditorWidget::showEvent(QShowEvent *event)
 void FormEditorWidget::dragEnterEvent(QDragEnterEvent *dragEnterEvent)
 {
     const DesignerActionManager &actionManager = QmlDesignerPlugin::instance()
-                                                     ->viewManager().designerActionManager();
+                                                     ->viewManager()
+                                                     .designerActionManager();
     if (actionManager.externalDragHasSupportedAssets(dragEnterEvent->mimeData()))
         dragEnterEvent->acceptProposedAction();
 }
@@ -635,25 +617,34 @@ void FormEditorWidget::dragEnterEvent(QDragEnterEvent *dragEnterEvent)
 void FormEditorWidget::dropEvent(QDropEvent *dropEvent)
 {
     const DesignerActionManager &actionManager = QmlDesignerPlugin::instance()
-                                                     ->viewManager().designerActionManager();
+                                                     ->viewManager()
-    QHash<QString, QStringList> addedAssets = actionManager.handleExternalAssetsDrop(dropEvent->mimeData());
+                                                     .designerActionManager();
+    QHash<QString, QStringList> addedAssets = actionManager.handleExternalAssetsDrop(
+        dropEvent->mimeData());
 
     m_formEditorView->executeInTransaction("FormEditorWidget::dropEvent", [&] {
         // Create Image components for added image assets
-        const QStringList addedImages = addedAssets.value(ComponentCoreConstants::addImagesDisplayString);
+        const QStringList addedImages = addedAssets.value(
+            ComponentCoreConstants::addImagesDisplayString);
         for (const QString &imgPath : addedImages) {
-            QmlItemNode::createQmlItemNodeFromImage(m_formEditorView, imgPath, {},
+            QmlItemNode::createQmlItemNodeFromImage(
-                                                    m_formEditorView->scene()->rootFormEditorItem()->qmlItemNode(),
+                m_formEditorView,
-                                                    false);
+                imgPath,
+                {},
+                m_formEditorView->scene()->rootFormEditorItem()->qmlItemNode(),
+                false);
         }
 
         // Create Text components for added font assets
         const QStringList addedFonts = addedAssets.value(ComponentCoreConstants::addFontsDisplayString);
         for (const QString &fontPath : addedFonts) {
             QString fontFamily = QFileInfo(fontPath).baseName();
-            QmlItemNode::createQmlItemNodeFromFont(m_formEditorView, fontFamily, rootItemRect().center(),
+            QmlItemNode::createQmlItemNodeFromFont(
-                                                   m_formEditorView->scene()->rootFormEditorItem()->qmlItemNode(),
+                m_formEditorView,
-                                                   false);
+                fontFamily,
+                rootItemRect().center(),
+                m_formEditorView->scene()->rootFormEditorItem()->qmlItemNode(),
+                false);
         }
     });
 }

src/plugins/qmldesigner/components/formeditor/toolbox.cpp

@@ -19,12 +19,18 @@ ToolBox::ToolBox(QWidget *parentWidget)
     , m_rightToolBar(new QToolBar(QLatin1String("RightSidebar"), this))
 {
     setProperty("panelwidget", false);
+
+    QPalette pal = palette();
+    pal.setColor(QPalette::Window, Theme::getColor(Theme::DStoolbarBackground));
+    setAutoFillBackground(true);
+    setPalette(pal);
+
     m_leftToolBar->setFloatable(true);
     m_leftToolBar->setMovable(true);
     m_leftToolBar->setOrientation(Qt::Horizontal);
 
     auto horizontalLayout = new QHBoxLayout(this);
-    horizontalLayout->setContentsMargins(0, 0, 0, 0);
+    horizontalLayout->setContentsMargins(9, 5, 9, 5);
     horizontalLayout->setSpacing(0);
 
     setFixedHeight(Theme::toolbarSize());
@@ -32,12 +38,10 @@ ToolBox::ToolBox(QWidget *parentWidget)
 
     m_leftToolBar->setProperty("panelwidget", false);
     m_leftToolBar->setProperty("panelwidget_singlerow", false);
-    m_leftToolBar->setFixedHeight(Theme::toolbarSize());
 
     m_rightToolBar->setProperty("panelwidget", false);
     m_rightToolBar->setProperty("panelwidget_singlerow", false);
-    m_rightToolBar->setFixedHeight(Theme::toolbarSize());
+    m_rightToolBar->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Expanding);
-    m_rightToolBar->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Fixed);
 
     auto stretchToolbar = new QToolBar(this);
     stretchToolbar->setProperty("panelwidget", false);

src/plugins/qmldesigner/components/navigator/navigatorsearchwidget.cpp

@@ -53,22 +53,8 @@ LineEdit::LineEdit(QWidget *parent)
     connect(this, &QLineEdit::textChanged, this, &LineEdit::updateClearButton);
 
     int frameWidth = style()->pixelMetric(QStyle::PM_DefaultFrameWidth);
-    setStyleSheet(Theme::replaceCssColors(
+    setStyleSheet(Theme::replaceCssColors(QString("QLineEdit { padding-right: %1px; }")
-        QString("QLineEdit { padding-right: %1px; border-radius: 4;"
+                                              .arg(clearButton->sizeHint().width() + frameWidth + 8)));
-                "color: creatorTheme.DStextColor;"
-                "border-color: creatorTheme.DScontrolOutline_topToolbarIdle;"
-                "background: creatorTheme.DStoolbarBackground; }"
-                "QLineEdit:hover {"
-                "color: creatorTheme.DStextColor;"
-                "border-color: creatorTheme.DScontrolOutline_topToolbarHover;"
-                "background: creatorTheme.DScontrolBackground_toolbarHover; }"
-                "QLineEdit:focus {"
-                "color: creatorTheme.DStextColor;"
-                "border-color: creatorTheme.DSinteraction;"
-                "background: creatorTheme.DStoolbarBackground; }")
-            .arg(clearButton->sizeHint().width() + frameWidth + 8)));
-
-    setFixedHeight(29);
 }
 
 void LineEdit::resizeEvent(QResizeEvent *)

src/plugins/qmldesigner/components/resources/stylesheet.css

@@ -96,6 +96,27 @@ QLineEdit:focus {
     border-color: creatorTheme.DScontrolOutlineInteraction;
 }
 
+QToolBar QLineEdit {
+    height: 27px; min-height: 27px; max-height: 27px;
+    border-radius: 4;
+    color: creatorTheme.DStextColor;
+    border: 1px solid creatorTheme.DScontrolOutline_topToolbarIdle;
+    background: creatorTheme.DStoolbarBackground;
+    /*font-size: 12px;*/
+}
+
+QToolBar QLineEdit:hover {
+    color: creatorTheme.DStextColor;
+    border: 1px solid creatorTheme.DScontrolOutline_topToolbarHover;
+    background: creatorTheme.DScontrolBackground_toolbarHover;
+}
+
+QToolBar QLineEdit:focus {
+    color: creatorTheme.DStextColor;
+    border: 1px solid creatorTheme.DSinteraction;
+    background: creatorTheme.DStoolbarBackground;
+}
+
 QToolBar QToolButton {
     border: none;
     padding: 0px;
@@ -108,6 +129,10 @@ QToolBar QToolButton:hover {
     background-color: creatorTheme.DScontrolBackground_topToolbarHover;
 }
 
+QToolBar QToolButton:pressed {
+    background-color: creatorTheme.DSinteraction;
+}
+
 QToolBar QToolButton:checked {
     background-color: creatorTheme.DSinteraction;
 }

src/plugins/qmldesigner/components/timelineeditor/timelinewidget.cpp

@@ -110,8 +110,11 @@ TimelineWidget::TimelineWidget(TimelineView *view)
     setWindowTitle(tr("Timeline", "Title of timeline view"));
     setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
 
-    const QString css = Theme::replaceCssColors(QString::fromUtf8(
+    m_toolbar->setStyleSheet(Theme::replaceCssColors(
-        Utils::FileReader::fetchQrc(":/qmldesigner/scrollbar.css")));
+        QString::fromUtf8(Utils::FileReader::fetchQrc(":/qmldesigner/stylesheet.css"))));
+
+    const QString css = Theme::replaceCssColors(
+        QString::fromUtf8(Utils::FileReader::fetchQrc(":/qmldesigner/scrollbar.css")));
 
     m_scrollbar->setStyleSheet(css);
     m_scrollbar->setOrientation(Qt::Horizontal);

src/plugins/qmldesigner/components/transitioneditor/transitioneditortoolbar.cpp

@@ -282,6 +282,8 @@ void TransitionEditorToolBar::createRightControls()
 
     auto emitEndChanged = [this]() { emit durationChanged(m_duration->text().toInt()); };
     connect(m_duration, &QLineEdit::editingFinished, emitEndChanged);
+
+    addSpacing(5);
 }
 
 void TransitionEditorToolBar::addSpacing(int width)

src/plugins/qmldesigner/components/transitioneditor/transitioneditorwidget.cpp

@@ -92,6 +92,9 @@ TransitionEditorWidget::TransitionEditorWidget(TransitionEditorView *view)
     setWindowTitle(tr("Transition", "Title of transition view"));
     setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
 
+    m_toolbar->setStyleSheet(Theme::replaceCssColors(
+        QString::fromUtf8(Utils::FileReader::fetchQrc(":/qmldesigner/stylesheet.css"))));
+
     const QString css = Theme::replaceCssColors(
         QString::fromUtf8(Utils::FileReader::fetchQrc(":/qmldesigner/scrollbar.css")));