diff options
author | Henning Gruendl <henning.gruendl@qt.io> | 2023-02-21 17:00:51 +0100 |
---|---|---|
committer | Henning Gründl <henning.gruendl@qt.io> | 2023-02-21 16:08:20 +0000 |
commit | a4df8e59de099d0933a84dfc6514ce55531ce68a (patch) | |
tree | dd1a2cfb2cfbd21b1b206ee0e816e216f22b5145 | |
parent | 0e7a603568e5f43713cbe92446358c9c18db3c9c (diff) |
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>
9 files changed, 101 insertions, 78 deletions
diff --git a/src/plugins/qmldesigner/components/curveeditor/curveeditor.cpp b/src/plugins/qmldesigner/components/curveeditor/curveeditor.cpp index 94452fd3e8..405987cb06 100644 --- a/src/plugins/qmldesigner/components/curveeditor/curveeditor.cpp +++ b/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); diff --git a/src/plugins/qmldesigner/components/curveeditor/curveeditortoolbar.cpp b/src/plugins/qmldesigner/components/curveeditor/curveeditortoolbar.cpp index 7432a4199b..7efcd0f626 100644 --- a/src/plugins/qmldesigner/components/curveeditor/curveeditortoolbar.cpp +++ b/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) diff --git a/src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp b/src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp index 171861536a..f53a668ff9 100644 --- a/src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp +++ b/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, - this, &FormEditorWidget::changeRootItemWidth); + connect(m_rootWidthAction.data(), + &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, - this, &FormEditorWidget::changeRootItemHeight); + connect(m_rootHeightAction.data(), + &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 QColor iconColorNormal(Theme::getColor(Theme::IconsBaseColor)); - const QColor iconColorDisabled(Theme::getColor(Theme::IconsDisabledColor)); - - const int iconSize = 32; - const QIcon zoomAllIcon = Utils::StyleHelper::getIconFromIconFont(fontName, - Theme::getIconUnicode( - 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); + const QIcon zoomAllIcon = Theme::iconFromName(Theme::Icon::fitAll_medium); + auto zoomSelectionNormal = Theme::iconFromName(Theme::Icon::fitSelection_medium); + 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 QIcon zoomInIcon = Theme::iconFromName(Theme::Icon::zoomIn_medium); + const QIcon zoomOutIcon = Theme::iconFromName(Theme::Icon::zoomOut_medium); + const QIcon reloadIcon = Theme::iconFromName(Theme::Icon::reload_medium); 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( - DesignerActionManager::instance().contextIcon(DesignerIcons::ResetViewIcon), - tr("Reset View"), this); + m_resetAction = new QAction(reloadIcon, tr("Reload 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(); - QHash<QString, QStringList> addedAssets = actionManager.handleExternalAssetsDrop(dropEvent->mimeData()); + ->viewManager() + .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, {}, - m_formEditorView->scene()->rootFormEditorItem()->qmlItemNode(), - false); + QmlItemNode::createQmlItemNodeFromImage( + m_formEditorView, + 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(), - m_formEditorView->scene()->rootFormEditorItem()->qmlItemNode(), - false); + QmlItemNode::createQmlItemNodeFromFont( + m_formEditorView, + fontFamily, + rootItemRect().center(), + m_formEditorView->scene()->rootFormEditorItem()->qmlItemNode(), + false); } }); } diff --git a/src/plugins/qmldesigner/components/formeditor/toolbox.cpp b/src/plugins/qmldesigner/components/formeditor/toolbox.cpp index da9f271562..3dbb9c6806 100644 --- a/src/plugins/qmldesigner/components/formeditor/toolbox.cpp +++ b/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::Fixed); + m_rightToolBar->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Expanding); auto stretchToolbar = new QToolBar(this); stretchToolbar->setProperty("panelwidget", false); diff --git a/src/plugins/qmldesigner/components/navigator/navigatorsearchwidget.cpp b/src/plugins/qmldesigner/components/navigator/navigatorsearchwidget.cpp index e184ba2a58..02f5ccd775 100644 --- a/src/plugins/qmldesigner/components/navigator/navigatorsearchwidget.cpp +++ b/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( - 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); + setStyleSheet(Theme::replaceCssColors(QString("QLineEdit { padding-right: %1px; }") + .arg(clearButton->sizeHint().width() + frameWidth + 8))); } void LineEdit::resizeEvent(QResizeEvent *) diff --git a/src/plugins/qmldesigner/components/resources/stylesheet.css b/src/plugins/qmldesigner/components/resources/stylesheet.css index 59695898fe..e8587d57b4 100644 --- a/src/plugins/qmldesigner/components/resources/stylesheet.css +++ b/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; } diff --git a/src/plugins/qmldesigner/components/timelineeditor/timelinewidget.cpp b/src/plugins/qmldesigner/components/timelineeditor/timelinewidget.cpp index c483029e5d..9e22a849fe 100644 --- a/src/plugins/qmldesigner/components/timelineeditor/timelinewidget.cpp +++ b/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( - Utils::FileReader::fetchQrc(":/qmldesigner/scrollbar.css"))); + 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"))); m_scrollbar->setStyleSheet(css); m_scrollbar->setOrientation(Qt::Horizontal); diff --git a/src/plugins/qmldesigner/components/transitioneditor/transitioneditortoolbar.cpp b/src/plugins/qmldesigner/components/transitioneditor/transitioneditortoolbar.cpp index 125945e8c2..b0855ecc2c 100644 --- a/src/plugins/qmldesigner/components/transitioneditor/transitioneditortoolbar.cpp +++ b/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) diff --git a/src/plugins/qmldesigner/components/transitioneditor/transitioneditorwidget.cpp b/src/plugins/qmldesigner/components/transitioneditor/transitioneditorwidget.cpp index b0090e2982..5257713578 100644 --- a/src/plugins/qmldesigner/components/transitioneditor/transitioneditorwidget.cpp +++ b/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"))); |