feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Update design on widget tool bars

Browse Source 
* 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>
This commit is contained in:
Henning Gruendl
2023-02-21 17:00:51 +01:00
committed by Henning Gründl
parent 0e7a603568
commit a4df8e59de
9 changed files with 100 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/plugins/qmldesigner/components/curveeditor/curveeditor.cpp
View File

@@ -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);

4
src/plugins/qmldesigner/components/curveeditor/curveeditortoolbar.cpp
View File

@@ -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)

101
src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp
View File

@@ -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 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 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 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);
}
});
}

12
src/plugins/qmldesigner/components/formeditor/toolbox.cpp
View File

@@ -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);

18
src/plugins/qmldesigner/components/navigator/navigatorsearchwidget.cpp
View File

@@ -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 *)

25
src/plugins/qmldesigner/components/resources/stylesheet.css
View File

@@ -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;
}

7
src/plugins/qmldesigner/components/timelineeditor/timelinewidget.cpp
View File

@@ -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);

2
src/plugins/qmldesigner/components/transitioneditor/transitioneditortoolbar.cpp
View File

@@ -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)

3
src/plugins/qmldesigner/components/transitioneditor/transitioneditorwidget.cpp
View File

@@ -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")));