QmlDesigner: Move zoom buttons to FormEditorWidget

* Move the zoom all and zoom selection button to the FormEditorWidget
  taskbar
* Add zoom in and zoom out actions/buttons
* Fix ZoomAction in and out direction
* Add update icon font

Change-Id: I9addba5652cafa5884450bc633a1e16087aae8dd
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml

@@ -94,27 +94,33 @@ QtObject {
     readonly property string fontStyleItalic: "\u0057"
     readonly property string fontStyleStrikethrough: "\u0058"
     readonly property string fontStyleUnderline: "\u0059"
-    readonly property string mergeCells: "\u005A"
+    readonly property string idAliasOff: "\u005A"
-    readonly property string redo: "\u005B"
+    readonly property string idAliasOn: "\u005B"
-    readonly property string splitColumns: "\u005C"
+    readonly property string mergeCells: "\u005C"
-    readonly property string splitRows: "\u005D"
+    readonly property string redo: "\u005D"
-    readonly property string startNode: "\u005E"
+    readonly property string splitColumns: "\u005E"
-    readonly property string testIcon: "\u005F"
+    readonly property string splitRows: "\u005F"
-    readonly property string textAlignBottom: "\u0060"
+    readonly property string startNode: "\u0060"
-    readonly property string textAlignCenter: "\u0061"
+    readonly property string testIcon: "\u0061"
-    readonly property string textAlignLeft: "\u0062"
+    readonly property string textAlignBottom: "\u0062"
-    readonly property string textAlignMiddle: "\u0063"
+    readonly property string textAlignCenter: "\u0063"
-    readonly property string textAlignRight: "\u0064"
+    readonly property string textAlignLeft: "\u0064"
-    readonly property string textAlignTop: "\u0065"
+    readonly property string textAlignMiddle: "\u0065"
-    readonly property string textBulletList: "\u0066"
+    readonly property string textAlignRight: "\u0066"
-    readonly property string textFullJustification: "\u0067"
+    readonly property string textAlignTop: "\u0067"
-    readonly property string textNumberedList: "\u0068"
+    readonly property string textBulletList: "\u0068"
-    readonly property string tickIcon: "\u0069"
+    readonly property string textFullJustification: "\u0069"
-    readonly property string triState: "\u006A"
+    readonly property string textNumberedList: "\u006A"
-    readonly property string undo: "\u006B"
+    readonly property string tickIcon: "\u006B"
-    readonly property string upDownIcon: "\u006C"
+    readonly property string triState: "\u006C"
-    readonly property string upDownSquare2: "\u006D"
+    readonly property string undo: "\u006D"
-    readonly property string wildcard: "\u006E"
+    readonly property string upDownIcon: "\u006E"
+    readonly property string upDownSquare2: "\u006F"
+    readonly property string wildcard: "\u0070"
+    readonly property string zoomAll: "\u0071"
+    readonly property string zoomIn: "\u0072"
+    readonly property string zoomOut: "\u0073"
+    readonly property string zoomSelection: "\u0074"
 
     readonly property font iconFont: Qt.font({
                                                  "family": controlIcons.name,

src/plugins/qmldesigner/components/componentcore/componentcore_constants.h

@@ -83,8 +83,6 @@ const char decreaseIndexOfStackedContainerCommandId[] = "DecreaseIndexOfStackedC
 const char flowAssignEffectCommandId[] = "AssignFlowEffect";
 const char flowAssignCustomEffectCommandId[] = "AssignFlowCustomEffect";
 const char addToGroupItemCommandId[] = "AddToGroupItem";
-const char fitRootToScreenCommandId[] = "FitRootToScreen";
-const char fitSelectionToScreenCommandId[] = "FitSelectionToScreen";
 
 const char selectionCategoryDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Selection");
 const char flowConnectionCategoryDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Connect");
@@ -157,9 +155,6 @@ const char layoutFillHeightDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContext
 const char flowAssignEffectDisplayName[] = "Assign FlowEffect ";
 const char flowAssignCustomEffectDisplayName[] = "Assign Custom FlowEffect ";
 
-const char fitRootToScreenDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Fit root to screen");
-const char fitSelectionToScreenDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Fit selection to screen");
-
 const char raiseToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Raise selected item.");
 const char lowerToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Lower selected item.");
 
@@ -178,9 +173,6 @@ const char decreaseIndexOfStackedContainerToolTip[] = QT_TRANSLATE_NOOP("QmlDesi
 const char addItemToStackedContainerToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Add item to stacked container.");
 const char addFlowActionToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Add flow action.");
 
-const char fitRootToScreenToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Fit the root element inside the available space.");
-const char fitSelectionToScreenToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Fit the selected elements inside the available space.");
-
 const char editListModelDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu",
                                                           "Edit List Model...");
 

src/plugins/qmldesigner/components/componentcore/designeractionmanager.cpp

@@ -883,27 +883,6 @@ void DesignerActionManager::createDefaultDesignerActions()
                           &resetSize,
                           &selectionNotEmptyAndHasWidthOrHeightProperty));
 
-    addDesignerAction(new ModelNodeAction(
-                          fitRootToScreenCommandId,
-                          fitRootToScreenDisplayName,
-                          Utils::Icon({{":/utils/images/fittoview.png", Utils::Theme::IconsBaseColor}}).icon(),
-                          fitRootToScreenToolTip,
-                          genericToolBarCategory,
-                          QKeySequence(Qt::CTRL + Qt::ALT + Qt::Key_0),
-                          182,
-                          &fitRootToScreen));
-
-    addDesignerAction(new ModelNodeAction(
-                          fitSelectionToScreenCommandId,
-                          fitSelectionToScreenDisplayName,
-                          Utils::Icon({{":/utils/images/fittoview.png", Utils::Theme::IconsBaseColor}}).icon(),
-                          fitSelectionToScreenToolTip,
-                          genericToolBarCategory,
-                          QKeySequence(Qt::CTRL + Qt::ALT + Qt::Key_I),
-                          183,
-                          &fitSelectionToScreen,
-                          &selectionNotEmpty));
-
     addDesignerAction(new SeperatorDesignerAction(editCategory, 170));
 
     addDesignerAction(new VisiblityModelNodeAction(

src/plugins/qmldesigner/components/componentcore/modelnodeoperations.cpp

@@ -329,23 +329,6 @@ void resetPosition(const SelectionContext &selectionState)
     });
 }
 
-void fitRootToScreen(const SelectionContext &selectionState)
-{
-    if (!selectionState.view())
-        return;
-
-    selectionState.view()->emitCustomNotification(QStringLiteral("fit root to screen"));
-}
-
-void fitSelectionToScreen(const SelectionContext &selectionState)
-{
-    if (!selectionState.view())
-        return;
-
-    selectionState.view()->emitCustomNotification(QStringLiteral("fit selection to screen"),
-                                                  selectionState.selectedModelNodes());
-}
-
 void goIntoComponentOperation(const SelectionContext &selectionState)
 {
     goIntoComponent(selectionState.currentSingleSelectedNode());

src/plugins/qmldesigner/components/componentcore/modelnodeoperations.h

@@ -49,8 +49,6 @@ void setFillWidth(const SelectionContext &selectionState);
 void setFillHeight(const SelectionContext &selectionState);
 void resetSize(const SelectionContext &selectionState);
 void resetPosition(const SelectionContext &selectionState);
-void fitRootToScreen(const SelectionContext &selectionState);
-void fitSelectionToScreen(const SelectionContext &selectionState);
 void goIntoComponentOperation(const SelectionContext &selectionState);
 void setId(const SelectionContext &selectionState);
 void resetZ(const SelectionContext &selectionState);

src/plugins/qmldesigner/components/componentcore/theme.h

@@ -66,19 +66,21 @@ public:
         alignRight,
         alignTo,
         alignTop,
-        assign,
         anchorBaseline,
         anchorBottom,
         anchorFill,
         anchorLeft,
         anchorRight,
         anchorTop,
+        animatedProperty,
         annotationBubble,
         annotationDecal,
+        assign,
         centerHorizontal,
         centerVertical,
-        curveEditor,
         closeCross,
+        curveDesigner,
+        curveEditor,
         decisionNode,
         deleteColumn,
         deleteRow,
@@ -101,6 +103,8 @@ public:
         fontStyleItalic,
         fontStyleStrikethrough,
         fontStyleUnderline,
+        idAliasOff,
+        idAliasOn,
         mergeCells,
         redo,
         splitColumns,
@@ -121,7 +125,11 @@ public:
         undo,
         upDownIcon,
         upDownSquare2,
-        wildcard
+        wildcard,
+        zoomAll,
+        zoomIn,
+        zoomOut,
+        zoomSelection
     };
 
     static Theme *instance();

src/plugins/qmldesigner/components/componentcore/zoomaction.cpp

@@ -47,14 +47,14 @@ float ZoomAction::zoomLevel() const
 
 void ZoomAction::zoomIn()
 {
-    if (m_currentComboBoxIndex > 0)
+    if (m_currentComboBoxIndex < (m_comboBoxModel->rowCount() - 1))
-        emit indexChanged(m_currentComboBoxIndex - 1);
+        emit indexChanged(m_currentComboBoxIndex + 1);
 }
 
 void ZoomAction::zoomOut()
 {
-    if (m_currentComboBoxIndex < (m_comboBoxModel->rowCount() - 1))
+    if (m_currentComboBoxIndex > 0)
-        emit indexChanged(m_currentComboBoxIndex + 1);
+        emit indexChanged(m_currentComboBoxIndex - 1);
 }
 
 void ZoomAction::resetZoomLevel()

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

@@ -384,6 +384,11 @@ void FormEditorView::selectedNodesChanged(const QList<ModelNode> &selectedNodeLi
     m_currentTool->setItems(scene()->itemsForQmlItemNodes(toQmlItemNodeListKeppInvalid(selectedNodeList)));
 
     m_scene->update();
+
+    if (selectedNodeList.empty())
+        m_formEditorWidget->zoomSelectionAction()->setEnabled(false);
+    else
+        m_formEditorWidget->zoomSelectionAction()->setEnabled(true);
 }
 
 void FormEditorView::variantPropertiesChanged(const QList<VariantProperty> &propertyList,
@@ -448,7 +453,7 @@ void FormEditorView::customNotification(const AbstractView * /*view*/, const QSt
         m_dragTool->clearMoveDelay();
     if (identifier == QLatin1String("reset QmlPuppet"))
         temporaryBlockView();
-    if (identifier == QLatin1String("fit root to screen")) {
+    if (identifier == QLatin1String("zoom all")) {
         if (QmlItemNode(rootModelNode()).isFlowView()) {
             QRectF boundingRect;
             for (QGraphicsItem *item : scene()->items()) {
@@ -469,7 +474,7 @@ void FormEditorView::customNotification(const AbstractView * /*view*/, const QSt
         float zoomLevel = ZoomAction::getClosestZoomLevel(scaleFactor);
         m_formEditorWidget->zoomAction()->forceZoomLevel(zoomLevel);
     }
-    if (identifier == QLatin1String("fit selection to screen")) {
+    if (identifier == QLatin1String("zoom selection")) {
         if (nodeList.isEmpty())
             return;
 
@@ -485,6 +490,10 @@ void FormEditorView::customNotification(const AbstractView * /*view*/, const QSt
         float zoomLevel = ZoomAction::getClosestZoomLevel(scaleFactor);
         m_formEditorWidget->zoomAction()->forceZoomLevel(zoomLevel);
     }
+    if (identifier == QLatin1String("zoom in"))
+        m_formEditorWidget->zoomAction()->zoomIn();
+    if (identifier == QLatin1String("zoom out"))
+        m_formEditorWidget->zoomAction()->zoomOut();
 }
 
 AbstractFormEditorTool *FormEditorView::currentTool() const

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

@@ -48,6 +48,7 @@
 
 #include <utils/fileutils.h>
 #include <utils/utilsicons.h>
+#include <utils/stylehelper.h>
 
 #include <QActionGroup>
 #include <QFileDialog>
@@ -144,6 +145,46 @@ FormEditorWidget::FormEditorWidget(FormEditorView *view) :
     upperActions.append(m_backgroundAction.data());
     m_toolBox->addRightSideAction(m_backgroundAction.data());
 
+    // Zoom actions
+    const QString fontName = "qtds_propertyIconFont.ttf";
+    QColor buttonColor(Theme::getColor(Theme::QmlDesigner_TabLight));
+    const QIcon zoomAllIcon = Utils::StyleHelper::getIconFromIconFont(fontName,
+                                                                      Theme::getIconUnicode(Theme::Icon::zoomAll),
+                                                                      28, 28, buttonColor);
+    const QIcon zoomSelectionIcon = Utils::StyleHelper::getIconFromIconFont(fontName,
+                                                                            Theme::getIconUnicode(Theme::Icon::zoomSelection),
+                                                                            28, 28, buttonColor);
+    const QIcon zoomInIcon = Utils::StyleHelper::getIconFromIconFont(fontName,
+                                                                     Theme::getIconUnicode(Theme::Icon::zoomIn),
+                                                                     28, 28, buttonColor);
+    const QIcon zoomOutIcon = Utils::StyleHelper::getIconFromIconFont(fontName,
+                                                                      Theme::getIconUnicode(Theme::Icon::zoomOut),
+                                                                      28, 28, buttonColor);
+
+    m_zoomInAction = new QAction(zoomInIcon, tr("Zoom in"), this);
+    m_zoomInAction->setShortcut(QKeySequence(Qt::CTRL + Qt::ALT + Qt::Key_Plus));
+    connect(m_zoomInAction.data(), &QAction::triggered, this, [this] {
+        if (!m_formEditorView)
+            return;
+
+        m_formEditorView->emitCustomNotification(QStringLiteral("zoom in"));
+    });
+    addAction(m_zoomInAction.data());
+    upperActions.append(m_zoomInAction.data());
+    m_toolBox->addRightSideAction(m_zoomInAction.data());
+
+    m_zoomOutAction = new QAction(zoomOutIcon, tr("Zoom out"), this);
+    m_zoomOutAction->setShortcut(QKeySequence(Qt::CTRL + Qt::ALT + Qt::Key_Minus));
+    connect(m_zoomOutAction.data(), &QAction::triggered, this, [this] {
+        if (!m_formEditorView)
+            return;
+
+        m_formEditorView->emitCustomNotification(QStringLiteral("zoom out"));
+    });
+    addAction(m_zoomOutAction.data());
+    upperActions.append(m_zoomOutAction.data());
+    m_toolBox->addRightSideAction(m_zoomOutAction.data());
+
     m_zoomAction = new ZoomAction(m_toolActionGroup.data());
     connect(m_zoomAction.data(), &ZoomAction::zoomLevelChanged,
             this, &FormEditorWidget::setZoomLevel);
@@ -151,6 +192,31 @@ FormEditorWidget::FormEditorWidget(FormEditorView *view) :
     upperActions.append(m_zoomAction.data());
     m_toolBox->addRightSideAction(m_zoomAction.data());
 
+    m_zoomAllAction = new QAction(zoomAllIcon, tr("Zoom screen to fit all content"), this);
+    m_zoomAllAction->setShortcut(QKeySequence(Qt::CTRL + Qt::ALT + Qt::Key_0));
+    connect(m_zoomAllAction.data(), &QAction::triggered, this, [this] {
+        if (!m_formEditorView)
+            return;
+
+        m_formEditorView->emitCustomNotification(QStringLiteral("zoom all"));
+    });
+    addAction(m_zoomAllAction.data());
+    upperActions.append(m_zoomAllAction.data());
+    m_toolBox->addRightSideAction(m_zoomAllAction.data());
+
+    m_zoomSelectionAction = new QAction(zoomSelectionIcon, tr("Zoom screen to fit current selection"), this);
+    m_zoomSelectionAction->setShortcut(QKeySequence(Qt::CTRL + Qt::ALT + Qt::Key_I));
+    connect(m_zoomSelectionAction.data(), &QAction::triggered, this, [this] {
+        if (!m_formEditorView)
+            return;
+
+        m_formEditorView->emitCustomNotification(QStringLiteral("zoom selection"),
+                                                 m_formEditorView->selectedModelNodes());
+    });
+    addAction(m_zoomSelectionAction.data());
+    upperActions.append(m_zoomSelectionAction.data());
+    m_toolBox->addRightSideAction(m_zoomSelectionAction.data());
+
     m_resetAction = new QAction(Utils::Icons::RESET_TOOLBAR.icon(), tr("Reset View"), this);
     registerActionAsCommand(m_resetAction, Constants::FORMEDITOR_REFRESH, QKeySequence(Qt::Key_R));
 
@@ -218,9 +284,9 @@ void FormEditorWidget::wheelEvent(QWheelEvent *event)
 {
     if (event->modifiers().testFlag(Qt::ControlModifier)) {
         if (event->angleDelta().y() > 0)
-            zoomAction()->zoomOut();
-        else
             zoomAction()->zoomIn();
+        else
+            zoomAction()->zoomOut();
 
         event->accept();
     } else {
@@ -304,6 +370,11 @@ ZoomAction *FormEditorWidget::zoomAction() const
     return m_zoomAction.data();
 }
 
+QAction *FormEditorWidget::zoomSelectionAction() const
+{
+    return m_zoomSelectionAction.data();
+}
+
 QAction *FormEditorWidget::resetAction() const
 {
     return m_resetAction.data();

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

@@ -53,6 +53,7 @@ public:
     FormEditorWidget(FormEditorView *view);
 
     ZoomAction *zoomAction() const;
+    QAction *zoomSelectionAction() const;
     QAction *showBoundingRectAction() const;
     QAction *snappingAction() const;
     QAction *snappingAndAnchoringAction() const;
@@ -112,6 +113,10 @@ private:
     QPointer<LineEditAction> m_rootHeightAction;
     QPointer<BackgroundAction> m_backgroundAction;
     QPointer<QAction> m_resetAction;
+    QPointer<QAction> m_zoomAllAction;
+    QPointer<QAction> m_zoomSelectionAction;
+    QPointer<QAction> m_zoomInAction;
+    QPointer<QAction> m_zoomOutAction;
     QPointer<DocumentWarningWidget> m_documentErrorWidget;
     Core::IContext *m_context = nullptr;
 };