QmlDesigner: Apply new theme on navigatior toolbar

Change-Id: I1e2448a2d8eea1bd3badf27ee02913d8470851c6
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

src/libs/utils/stylehelper.cpp

@@ -698,7 +698,7 @@ QIcon StyleHelper::getIconFromIconFont(const QString &fontName, const QString &i
             painter.save();
             painter.setPen(color);
             painter.setFont(font);
-            painter.drawText(QRectF(QPoint(0, 0), size), iconSymbol);
+            painter.drawText(QRectF(QPoint(0, 0), size), Qt::AlignCenter, iconSymbol);
             painter.restore();
 
             icon.addPixmap(pixmap);

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

@@ -20,22 +20,19 @@ LineEdit::LineEdit(QWidget *parent)
     clearButton = new QToolButton(this);
 
     const QString fontName = "qtds_propertyIconFont.ttf";
-    const int searchIconSize = 16;
+    const int clearIconSize = 10;
-    const int clearIconSize = 12;
+    const QColor iconColor(QmlDesigner::Theme::getColor(QmlDesigner::Theme::DStextColor));
-    const QColor iconColor(QmlDesigner::Theme::getColor(QmlDesigner::Theme::DSiconColor));
 
-    const QIcon searchIcon
+    const QIcon searchIcon = Utils::StyleHelper::getIconFromIconFont(
-        = Utils::StyleHelper::getIconFromIconFont(fontName,
+        fontName,
-                                                  QmlDesigner::Theme::getIconUnicode(
+        QmlDesigner::Theme::getIconUnicode(QmlDesigner::Theme::Icon::search_small),
-                                                      QmlDesigner::Theme::Icon::search),
+        10,
-                                                  searchIconSize,
+        16,
-                                                  searchIconSize,
         iconColor);
 
-    const QIcon clearIcon
+    const QIcon clearIcon = Utils::StyleHelper::getIconFromIconFont(
-        = Utils::StyleHelper::getIconFromIconFont(fontName,
+        fontName,
-                                                  QmlDesigner::Theme::getIconUnicode(
+        QmlDesigner::Theme::getIconUnicode(QmlDesigner::Theme::Icon::close_small),
-                                                      QmlDesigner::Theme::Icon::closeCross),
         clearIconSize,
         clearIconSize,
         iconColor);
@@ -46,9 +43,9 @@ LineEdit::LineEdit(QWidget *parent)
     clearButton->setIconSize(QSize(clearIconSize, clearIconSize));
     clearButton->setCursor(Qt::ArrowCursor);
     clearButton->hide();
-    clearButton->setStyleSheet(Theme::replaceCssColors(
+    clearButton->setStyleSheet(
-        QString("QToolButton { border: none; padding: 0px; }"
+        Theme::replaceCssColors(QString("QToolButton { border: none; padding: 0px; }"
-                "QToolButton:hover { background: creatorTheme.DScontrolBackgroundHover; }")));
+                                        "QToolButton:hover {}")));
 
     setClearButtonEnabled(false);
 
@@ -56,8 +53,20 @@ LineEdit::LineEdit(QWidget *parent)
     connect(this, &QLineEdit::textChanged, this, &LineEdit::updateClearButton);
 
     int frameWidth = style()->pixelMetric(QStyle::PM_DefaultFrameWidth);
-    setStyleSheet(QString("QLineEdit { padding-right: %1px; } ")
+    setStyleSheet(Theme::replaceCssColors(
-                      .arg(clearButton->sizeHint().width() + frameWidth + 8));
+        QString("QLineEdit { padding-right: %1px; border-radius: 4;"
+                "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);
 }
@@ -81,7 +90,7 @@ NavigatorSearchWidget::NavigatorSearchWidget(QWidget *parent)
 {
     auto layout = new QBoxLayout(QBoxLayout::LeftToRight);
     layout->setSpacing(0);
-    layout->setContentsMargins(5, 5, 5, 3);
+    layout->setContentsMargins(10, 6, 10, 6);
     setLayout(layout);
 
     m_textField = new LineEdit;
@@ -91,6 +100,12 @@ NavigatorSearchWidget::NavigatorSearchWidget(QWidget *parent)
     connect(m_textField, &QLineEdit::textChanged, this, &NavigatorSearchWidget::textChanged);
 
     layout->addWidget(m_textField);
+
+    setFixedHeight(Theme::toolbarSize());
+    QPalette pal = QPalette();
+    pal.setColor(QPalette::Window, Theme::getColor(Utils::Theme::DStoolbarBackground));
+    setAutoFillBackground(true);
+    setPalette(pal);
 }
 
 void NavigatorSearchWidget::clear()

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

@@ -45,15 +45,17 @@ NavigatorWidget::NavigatorWidget(NavigatorView *view)
     layout->setSpacing(0);
     layout->setContentsMargins(0, 0, 0, 0);
 
-    QWidget *toolBar = createToolBar();
+    m_searchWidget = new NavigatorSearchWidget();
+    connect(m_searchWidget,
+            &NavigatorSearchWidget::textChanged,
+            this,
+            &NavigatorWidget::textFilterChanged);
+    layout->addWidget(m_searchWidget);
 
+    QWidget *toolBar = createToolBar();
     toolBar->setParent(this);
     layout->addWidget(toolBar);
 
-    m_searchWidget = new NavigatorSearchWidget();
-    connect(m_searchWidget, &NavigatorSearchWidget::textChanged, this, &NavigatorWidget::textFilterChanged);
-    layout->addWidget(m_searchWidget);
-
     layout->addWidget(m_treeView);
     setLayout(layout);
 
@@ -76,13 +78,17 @@ QTreeView *NavigatorWidget::treeView() const
     return m_treeView;
 }
 
-QList<QToolButton *> NavigatorWidget::createToolBarWidgets()
+QList<QWidget *> NavigatorWidget::createToolBarWidgets()
 {
-    QList<QToolButton *> buttons;
+    QList<QWidget *> buttons;
+
+    auto empty = new QWidget();
+    empty->setFixedWidth(5);
+    empty->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Preferred);
+    buttons.append(empty);
 
     auto button = new QToolButton();
     button->setIcon(Theme::iconFromName(Theme::Icon::moveUpwards_medium));
-    // button->setIcon(Icons::ARROW_LEFT.icon());
     button->setToolTip(tr("Become last sibling of parent (CTRL + Left)."));
     button->setShortcut(QKeySequence(Qt::Key_Left | Qt::CTRL));
     connect(button, &QAbstractButton::clicked, this, &NavigatorWidget::leftButtonClicked);
@@ -90,7 +96,6 @@ QList<QToolButton *> NavigatorWidget::createToolBarWidgets()
 
     button = new QToolButton();
     button->setIcon(Theme::iconFromName(Theme::Icon::moveInwards_medium));
-    //button->setIcon(Icons::ARROW_RIGHT.icon());
     button->setToolTip(tr("Become child of last sibling (CTRL + Right)."));
     button->setShortcut(QKeySequence(Qt::Key_Right | Qt::CTRL));
     connect(button, &QAbstractButton::clicked, this, &NavigatorWidget::rightButtonClicked);
@@ -98,7 +103,6 @@ QList<QToolButton *> NavigatorWidget::createToolBarWidgets()
 
     button = new QToolButton();
     button->setIcon(Theme::iconFromName(Theme::Icon::moveDown_medium));
-    //button->setIcon(Icons::ARROW_DOWN.icon());
     button->setToolTip(tr("Move down (CTRL + Down)."));
     button->setShortcut(QKeySequence(Qt::Key_Down | Qt::CTRL));
     connect(button, &QAbstractButton::clicked, this, &NavigatorWidget::downButtonClicked);
@@ -106,45 +110,64 @@ QList<QToolButton *> NavigatorWidget::createToolBarWidgets()
 
     button = new QToolButton();
     button->setIcon(Theme::iconFromName(Theme::Icon::moveUp_medium));
-    //button->setIcon(Icons::ARROW_UP.icon());
     button->setToolTip(tr("Move up (CTRL + Up)."));
     button->setShortcut(QKeySequence(Qt::Key_Up | Qt::CTRL));
     connect(button, &QAbstractButton::clicked, this, &NavigatorWidget::upButtonClicked);
     buttons.append(button);
 
-    auto filter = new QToolButton;
+    empty = new QWidget();
-    filter->setIcon(Utils::Icons::FILTER.icon());
+    empty->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
-    filter->setToolTip(tr("Filter Tree"));
+    buttons.append(empty);
-    filter->setPopupMode(QToolButton::InstantPopup);
-    filter->setProperty("noArrow", true);
-    auto filterMenu = new QMenu(filter);
-    auto filterAction = new QAction(tr("Show Only Visible Components"), nullptr);
-    filterAction->setCheckable(true);
 
-    bool filterFlag = QmlDesignerPlugin::settings().value(DesignerSettingsKey::NAVIGATOR_SHOW_ONLY_VISIBLE_ITEMS).toBool();
+    // Show Only Visible Components
-    filterAction->setChecked(filterFlag);
+    auto visibleIcon = Theme::iconFromName(Theme::Icon::visible_medium);
+    auto invisibleIcon = Theme::iconFromName(Theme::Icon::invisible_medium,
+                                             Theme::getColor(Theme::Color::DStextSelectedTextColor));
+    QIcon vIcon;
+    vIcon.addPixmap(invisibleIcon.pixmap({16, 16}), QIcon::Normal, QIcon::On);
+    vIcon.addPixmap(visibleIcon.pixmap({16, 16}), QIcon::Normal, QIcon::Off);
 
-    connect(filterAction, &QAction::toggled, this, &NavigatorWidget::filterToggled);
+    button = new QToolButton();
-    filterMenu->addAction(filterAction);
+    button->setIcon(vIcon);
+    button->setCheckable(true);
+    bool visibleFlag = QmlDesignerPlugin::settings()
+                           .value(DesignerSettingsKey::NAVIGATOR_SHOW_ONLY_VISIBLE_ITEMS)
+                           .toBool();
+    button->setChecked(visibleFlag);
+    button->setToolTip(tr("Show Only Visible Components"));
+    connect(button, &QAbstractButton::toggled, this, &NavigatorWidget::filterToggled);
+    buttons.append(button);
 
-    auto reverseAction = new QAction(tr("Reverse Component Order"), nullptr);
+    // Reverse Component Order
-    reverseAction->setCheckable(true);
+    auto reverseOffIcon = Theme::iconFromName(Theme::Icon::reverseOrder_medium);
+    auto reverseOnIcon = Theme::iconFromName(Theme::Icon::reverseOrder_medium,
+                                             Theme::getColor(Theme::Color::DStextSelectedTextColor));
+    QIcon rIcon;
+    rIcon.addPixmap(reverseOnIcon.pixmap({16, 16}), QIcon::Normal, QIcon::On);
+    rIcon.addPixmap(reverseOffIcon.pixmap({16, 16}), QIcon::Normal, QIcon::Off);
 
-    bool reverseFlag = QmlDesignerPlugin::settings().value(DesignerSettingsKey::NAVIGATOR_REVERSE_ITEM_ORDER).toBool();
+    button = new QToolButton();
-    reverseAction->setChecked(reverseFlag);
+    button->setIcon(rIcon);
+    button->setCheckable(true);
+    bool reverseFlag = QmlDesignerPlugin::settings()
+                           .value(DesignerSettingsKey::NAVIGATOR_REVERSE_ITEM_ORDER)
+                           .toBool();
+    button->setChecked(reverseFlag);
+    button->setToolTip(tr("Reverse Component Order"));
+    connect(button, &QAbstractButton::toggled, this, &NavigatorWidget::reverseOrderToggled);
+    buttons.append(button);
 
-    connect(reverseAction, &QAction::toggled, this, &NavigatorWidget::reverseOrderToggled);
+    empty = new QWidget();
-    filterMenu->addAction(reverseAction);
+    empty->setFixedWidth(5);
-
+    empty->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Preferred);
-    filter->setMenu(filterMenu);
+    buttons.append(empty);
-    buttons.append(filter);
 
     return buttons;
 }
 
 QToolBar *NavigatorWidget::createToolBar()
 {
-    const QList<QToolButton*> buttons = createToolBarWidgets();
+    const QList<QWidget *> buttons = createToolBarWidgets();
 
     auto toolBar = new QToolBar();
     toolBar->setFixedHeight(Theme::toolbarSize());

src/plugins/qmldesigner/components/navigator/navigatorwidget.h

@@ -28,7 +28,7 @@ public:
 
     void setTreeModel(QAbstractItemModel *model);
     QTreeView *treeView() const;
-    QList<QToolButton *> createToolBarWidgets();
+    QList<QWidget *> createToolBarWidgets();
     QToolBar *createToolBar();
     void contextHelp(const Core::IContext::HelpCallback &callback) const;
 

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

@@ -95,3 +95,19 @@ QLineEdit:focus {
     background-color: creatorTheme.DScontrolBackgroundInteraction;
     border-color: creatorTheme.DScontrolOutlineInteraction;
 }
+
+QToolBar QToolButton {
+    border: none;
+    padding: 0px;
+    width: 29px; min-width: 29px; max-width: 29px;
+    height: 29px; min-height: 29px; max-height: 29px;
+    border-radius: 4px;
+}
+
+QToolBar QToolButton:hover {
+    background-color: creatorTheme.DScontrolBackground_topToolbarHover;
+}
+
+QToolBar QToolButton:checked {
+    background-color: creatorTheme.DSinteraction;
+}