QmlDesigner: Extend icon font support

* Use ADS::IconProvider to make use of font icons
* Add support for IconProvider in FloatingWidgetTitlebar
* Add support for named font icon entities in QmlDesigner::Theme
* Add level of indirection to Constants.qml to be able to parse it
  from inside C++
* Add color and HighDPI support in stylehelper
* Update icon font and related constants

Change-Id: I31ac33917d2db002697ce63f50f5c181c5fdb103
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>
This commit is contained in:
Thomas Hartmann
2020-04-24 19:49:50 +02:00
parent 0222630012
commit 9c17fd0dbe
13 changed files with 321 additions and 119 deletions

View File

@@ -26,98 +26,4 @@
pragma Singleton
import QtQuick 2.10
QtObject {
readonly property int width: 1920
readonly property int height: 1080
readonly property FontLoader mySystemFont: FontLoader {
name: "Arial"
}
readonly property FontLoader controlIcons: FontLoader {
source: "icons.ttf"
}
readonly property string actionIcon: "\u0021"
readonly property string actionIconBinding: "\u0022"
readonly property string addColumnAfter: "\u0023"
readonly property string addColumnBefore: "\u0024"
readonly property string addFile: "\u0025"
readonly property string addRowAfter: "\u0026"
readonly property string addRowBefore: "\u0027"
readonly property string addTable: "\u0028"
readonly property string alignBottom: "\u0029"
readonly property string alignCenterHorizontal: "\u002A"
readonly property string alignCenterVertical: "\u002B"
readonly property string alignLeft: "\u002C"
readonly property string alignRight: "\u002D"
readonly property string alignTo: "\u002E"
readonly property string alignTop: "\u002F"
readonly property string anchorBaseline: "\u0030"
readonly property string anchorBottom: "\u0031"
readonly property string anchorFill: "\u0032"
readonly property string anchorLeft: "\u0033"
readonly property string anchorRight: "\u0034"
readonly property string anchorTop: "\u0035"
readonly property string annotationBubble: "\u0036"
readonly property string annotationDecal: "\u0037"
readonly property string centerHorizontal: "\u0038"
readonly property string centerVertical: "\u0039"
readonly property string closeCross: "\u003A"
readonly property string deleteColumn: "\u003B"
readonly property string deleteRow: "\u003C"
readonly property string deleteTable: "\u003D"
readonly property string distributeBottom: "\u003E"
readonly property string distributeCenterHorizontal: "\u003F"
readonly property string distributeCenterVertical: "\u0040"
readonly property string distributeLeft: "\u0041"
readonly property string distributeOriginBottomRight: "\u0042"
readonly property string distributeOriginCenter: "\u0043"
readonly property string distributeOriginNone: "\u0044"
readonly property string distributeOriginTopLeft: "\u0045"
readonly property string distributeRight: "\u0046"
readonly property string distributeSpacingHorizontal: "\u0047"
readonly property string distributeSpacingVertical: "\u0048"
readonly property string distributeTop: "\u0049"
readonly property string edit: "\u004A"
readonly property string fontStyleBold: "\u004B"
readonly property string fontStyleItalic: "\u004C"
readonly property string fontStyleStrikethrough: "\u004D"
readonly property string fontStyleUnderline: "\u004E"
readonly property string mergeCells: "\u004F"
readonly property string redo: "\u0050"
readonly property string splitColumns: "\u0051"
readonly property string splitRows: "\u0052"
readonly property string testIcon: "\u0053"
readonly property string textAlignBottom: "\u0054"
readonly property string textAlignCenter: "\u0055"
readonly property string textAlignLeft: "\u0056"
readonly property string textAlignMiddle: "\u0057"
readonly property string textAlignRight: "\u0058"
readonly property string textAlignTop: "\u0059"
readonly property string textBulletList: "\u005A"
readonly property string textFullJustification: "\u005B"
readonly property string textNumberedList: "\u005C"
readonly property string tickIcon: "\u005D"
readonly property string triState: "\u005E"
readonly property string undo: "\u005F"
readonly property string upDownIcon: "\u0060"
readonly property string upDownSquare2: "\u0061"
readonly property font iconFont: Qt.font({
"family": controlIcons.name,
"pixelSize": 12
})
readonly property font font: Qt.font({
"family": mySystemFont.name,
"pointSize": Qt.application.font.pixelSize
})
readonly property font largeFont: Qt.font({
"family": mySystemFont.name,
"pointSize": Qt.application.font.pixelSize * 1.6
})
readonly property color backgroundColor: "#c2c2c2"
readonly property bool showActionIndicatorBackground: false
}
InternalConstants {}

View File

@@ -0,0 +1,131 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
import QtQuick 2.10
QtObject {
readonly property int width: 1920
readonly property int height: 1080
readonly property FontLoader mySystemFont: FontLoader {
name: "Arial"
}
readonly property FontLoader controlIcons: FontLoader {
source: "icons.ttf"
}
objectName: "internalConstantsObject"
readonly property string actionIcon: "\u0021"
readonly property string actionIconBinding: "\u0022"
readonly property string addColumnAfter: "\u0023"
readonly property string addColumnBefore: "\u0024"
readonly property string addFile: "\u0025"
readonly property string addRowAfter: "\u0026"
readonly property string addRowBefore: "\u0027"
readonly property string addTable: "\u0028"
readonly property string adsClose: "\u0029"
readonly property string adsDetach: "\u002A"
readonly property string adsDropDown: "\u002B"
readonly property string alignBottom: "\u002C"
readonly property string alignCenterHorizontal: "\u002D"
readonly property string alignCenterVertical: "\u002E"
readonly property string alignLeft: "\u002F"
readonly property string alignRight: "\u0030"
readonly property string alignTo: "\u0031"
readonly property string alignTop: "\u0032"
readonly property string anchorBaseline: "\u0033"
readonly property string anchorBottom: "\u0034"
readonly property string anchorFill: "\u0035"
readonly property string anchorLeft: "\u0036"
readonly property string anchorRight: "\u0037"
readonly property string anchorTop: "\u0038"
readonly property string annotationBubble: "\u0039"
readonly property string annotationDecal: "\u003A"
readonly property string centerHorizontal: "\u003B"
readonly property string centerVertical: "\u003C"
readonly property string closeCross: "\u003D"
readonly property string decisionNode: "\u003E"
readonly property string deleteColumn: "\u003F"
readonly property string deleteRow: "\u0040"
readonly property string deleteTable: "\u0041"
readonly property string detach: "\u0042"
readonly property string distributeBottom: "\u0043"
readonly property string distributeCenterHorizontal: "\u0044"
readonly property string distributeCenterVertical: "\u0045"
readonly property string distributeLeft: "\u0046"
readonly property string distributeOriginBottomRight: "\u0047"
readonly property string distributeOriginCenter: "\u0048"
readonly property string distributeOriginNone: "\u0049"
readonly property string distributeOriginTopLeft: "\u004A"
readonly property string distributeRight: "\u004B"
readonly property string distributeSpacingHorizontal: "\u004C"
readonly property string distributeSpacingVertical: "\u004D"
readonly property string distributeTop: "\u004E"
readonly property string edit: "\u004F"
readonly property string fontStyleBold: "\u0050"
readonly property string fontStyleItalic: "\u0051"
readonly property string fontStyleStrikethrough: "\u0052"
readonly property string fontStyleUnderline: "\u0053"
readonly property string mergeCells: "\u0054"
readonly property string redo: "\u0055"
readonly property string splitColumns: "\u0056"
readonly property string splitRows: "\u0057"
readonly property string startNode: "\u0058"
readonly property string testIcon: "\u0059"
readonly property string textAlignBottom: "\u005A"
readonly property string textAlignCenter: "\u005B"
readonly property string textAlignLeft: "\u005C"
readonly property string textAlignMiddle: "\u005D"
readonly property string textAlignRight: "\u005E"
readonly property string textAlignTop: "\u005F"
readonly property string textBulletList: "\u0060"
readonly property string textFullJustification: "\u0061"
readonly property string textNumberedList: "\u0062"
readonly property string tickIcon: "\u0063"
readonly property string triState: "\u0064"
readonly property string undo: "\u0065"
readonly property string upDownIcon: "\u0066"
readonly property string upDownSquare2: "\u0067"
readonly property string wildcard: "\u0068"
readonly property font iconFont: Qt.font({
"family": controlIcons.name,
"pixelSize": 12
})
readonly property font font: Qt.font({
"family": mySystemFont.name,
"pointSize": Qt.application.font.pixelSize
})
readonly property font largeFont: Qt.font({
"family": mySystemFont.name,
"pointSize": Qt.application.font.pixelSize * 1.6
})
readonly property color backgroundColor: "#c2c2c2"
readonly property bool showActionIndicatorBackground: false
}

View File

@@ -1,2 +1,4 @@
singleton Values 1.0 Values.qml
singleton Constants 1.0 Constants.qml
InternalConstants 1.0 InternalConstants.qml

View File

@@ -111,6 +111,7 @@ enum eIcon {
DockAreaMenuIcon, //!< DockAreaMenuIcon
DockAreaUndockIcon, //!< DockAreaUndockIcon
DockAreaCloseIcon, //!< DockAreaCloseIcon
FloatingWidgetCloseIcon, //!< FloatingWidgetCloseIcon
IconCount, //!< just a delimiter for range checks
};

View File

@@ -132,6 +132,7 @@ namespace ADS
void DockAreaTitleBarPrivate::createButtons()
{
const QSize iconSize(14, 14);
QSizePolicy sizePolicy(QSizePolicy::Fixed, QSizePolicy::Expanding);
// Tabs menu button
m_tabsMenuButton = new TitleBarButton(testConfigFlag(DockManager::DockAreaHasTabsMenuButton));
@@ -149,6 +150,7 @@ namespace ADS
m_tabsMenuButton->setMenu(tabsMenu);
internal::setToolTip(m_tabsMenuButton, QObject::tr("List All Tabs"));
m_tabsMenuButton->setSizePolicy(sizePolicy);
m_tabsMenuButton->setIconSize(iconSize);
m_layout->addWidget(m_tabsMenuButton, 0);
QObject::connect(m_tabsMenuButton->menu(),
&QMenu::triggered,
@@ -164,6 +166,7 @@ namespace ADS
QStyle::SP_TitleBarNormalButton,
ADS::DockAreaUndockIcon);
m_undockButton->setSizePolicy(sizePolicy);
m_undockButton->setIconSize(iconSize);
m_layout->addWidget(m_undockButton, 0);
QObject::connect(m_undockButton,
&QToolButton::clicked,
@@ -183,7 +186,7 @@ namespace ADS
internal::setToolTip(m_closeButton, QObject::tr("Close Group"));
}
m_closeButton->setSizePolicy(sizePolicy);
m_closeButton->setIconSize(QSize(16, 16));
m_closeButton->setIconSize(iconSize);
m_layout->addWidget(m_closeButton, 0);
QObject::connect(m_closeButton,
&QToolButton::clicked,

View File

@@ -168,12 +168,18 @@ namespace ADS
m_titleLabel->setText(m_dockWidget->windowTitle());
m_titleLabel->setObjectName("dockWidgetTabLabel");
m_titleLabel->setAlignment(Qt::AlignCenter);
QObject::connect(m_titleLabel, &ElidingLabel::elidedChanged, q, &DockWidgetTab::elidedChanged);
QObject::connect(m_titleLabel,
&ElidingLabel::elidedChanged,
q,
&DockWidgetTab::elidedChanged);
m_closeButton = createCloseButton();
m_closeButton->setObjectName("tabCloseButton");
internal::setButtonIcon(m_closeButton, QStyle::SP_TitleBarCloseButton, TabCloseIcon);
internal::setButtonIcon(m_closeButton,
QStyle::SP_TitleBarCloseButton,
TabCloseIcon);
m_closeButton->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
m_closeButton->setIconSize(QSize(14, 14));
q->onDockWidgetFeaturesChanged();
internal::setToolTip(m_closeButton, QObject::tr("Close Tab"));
QObject::connect(m_closeButton,
@@ -189,11 +195,11 @@ namespace ADS
boxLayout->setContentsMargins(2 * spacing, 0, 0, 0);
boxLayout->setSpacing(0);
q->setLayout(boxLayout);
boxLayout->addWidget(m_titleLabel, 1);
boxLayout->addWidget(m_titleLabel, 1, Qt::AlignVCenter);
boxLayout->addSpacing(spacing);
boxLayout->addWidget(m_closeButton);
boxLayout->addWidget(m_closeButton, 0, Qt::AlignVCenter);
boxLayout->addSpacing(qRound(spacing * 4.0 / 3.0));
boxLayout->setAlignment(Qt::AlignCenter);
boxLayout->setAlignment(Qt::AlignCenter | Qt::AlignVCenter);
m_titleLabel->setVisible(true);
}

View File

@@ -51,7 +51,7 @@ namespace ADS {
*/
IconProviderPrivate(IconProvider *parent);
};
// struct LedArrayPanelPrivate
// struct IconProviderPrivate
IconProviderPrivate::IconProviderPrivate(IconProvider *parent)
: q(parent)

View File

@@ -41,7 +41,7 @@
namespace ADS {
using TabLabelType = ElidingLabel;
using tCloseButton = QPushButton;
using CloseButtonType = QPushButton;
/**
* @brief Private data class of public interface CFloatingWidgetTitleBar
@@ -52,7 +52,7 @@ public:
FloatingWidgetTitleBar *q; ///< public interface class
QLabel *m_iconLabel = nullptr;
TabLabelType *m_titleLabel = nullptr;
tCloseButton *m_closeButton = nullptr;
CloseButtonType *m_closeButton = nullptr;
FloatingDockContainer *m_floatingWidget = nullptr;
eDragState m_dragState = DraggingInactive;
@@ -74,22 +74,20 @@ void FloatingWidgetTitleBarPrivate::createLayout()
m_titleLabel->setObjectName("floatingTitleLabel");
m_titleLabel->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
m_closeButton = new tCloseButton();
m_closeButton = new CloseButtonType();
m_closeButton->setObjectName("floatingTitleCloseButton");
m_closeButton->setFlat(true);
// The standard icons do does not look good on high DPI screens
QIcon closeIcon;
QPixmap normalPixmap = q->style()->standardPixmap(QStyle::SP_TitleBarCloseButton,
nullptr,
m_closeButton);
closeIcon.addPixmap(normalPixmap, QIcon::Normal);
closeIcon.addPixmap(internal::createTransparentPixmap(normalPixmap, 0.25), QIcon::Disabled);
m_closeButton->setIcon(q->style()->standardIcon(QStyle::SP_TitleBarCloseButton));
internal::setButtonIcon(m_closeButton,
QStyle::SP_TitleBarCloseButton,
ADS::FloatingWidgetCloseIcon);
m_closeButton->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
m_closeButton->setIconSize(QSize(14, 14));
m_closeButton->setVisible(true);
m_closeButton->setFocusPolicy(Qt::NoFocus);
q->connect(m_closeButton, &QPushButton::clicked, q, &FloatingWidgetTitleBar::closeRequested);
QObject::connect(m_closeButton,
&QPushButton::clicked,
q,
&FloatingWidgetTitleBar::closeRequested);
QFontMetrics fontMetrics(m_titleLabel->font());
int spacing = qRound(fontMetrics.height() / 4.0);

View File

@@ -28,19 +28,46 @@
#include <qmldesignerplugin.h>
#include <coreplugin/icore.h>
#include <utils/stylehelper.h>
#include <QApplication>
#include <QRegExp>
#include <QScreen>
#include <QPointer>
#include <QQmlEngine>
#include <QQmlComponent>
#include <QQmlProperty>
#include <qqml.h>
static Q_LOGGING_CATEGORY(themeLog, "qtc.qmldesigner.theme", QtWarningMsg)
namespace QmlDesigner {
Theme::Theme(Utils::Theme *originTheme, QObject *parent)
: Utils::Theme(originTheme, parent)
, m_constants(nullptr)
{
QString constantsPath = Core::ICore::resourcePath() +
QStringLiteral("/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml");
QQmlEngine* engine = new QQmlEngine(this);
QQmlComponent component(engine, QUrl::fromLocalFile(constantsPath));
if (component.status() == QQmlComponent::Ready) {
m_constants = component.create();
}
else if (component.status() == QQmlComponent::Error ) {
qCWarning(themeLog) << "Couldn't load" << constantsPath
<< "due to the following error(s):";
for (QQmlError error : component.errors())
qCWarning(themeLog) << error.toString();
}
else {
qCWarning(themeLog) << "Couldn't load" << constantsPath
<< "the status of the QQmlComponent is" << component.status();
}
}
QColor Theme::evaluateColorAtThemeInstance(const QString &themeColorName)
@@ -129,6 +156,25 @@ QPixmap Theme::getPixmap(const QString &id)
return QmlDesignerIconProvider::getPixmap(id);
}
QString Theme::getIconUnicode(Theme::Icon i)
{
if (!instance()->m_constants)
return QString();
const QMetaObject *m = instance()->metaObject();
const char *enumName = "Icon";
int enumIndex = m->indexOfEnumerator(enumName);
if (enumIndex == -1) {
qCWarning(themeLog) << "Couldn't find enum" << enumName;
return QString();
}
QMetaEnum e = m->enumerator(enumIndex);
return instance()->m_constants->property(e.valueToKey(i)).toString();
}
QColor Theme::qmlDesignerBackgroundColorDarker() const
{
return getColor(QmlDesigner_BackgroundColorDarker);

View File

@@ -41,12 +41,91 @@ namespace QmlDesigner {
class QMLDESIGNERCORE_EXPORT Theme : public Utils::Theme
{
Q_OBJECT
Q_ENUMS(Icon)
public:
enum Icon {
actionIcon,
actionIconBinding,
addColumnAfter,
addColumnBefore,
addFile,
addRowAfter,
addRowBefore,
addTable,
adsClose,
adsDetach,
adsDropDown,
alignBottom,
alignCenterHorizontal,
alignCenterVertical,
alignLeft,
alignRight,
alignTo,
alignTop,
anchorBaseline,
anchorBottom,
anchorFill,
anchorLeft,
anchorRight,
anchorTop,
annotationBubble,
annotationDecal,
centerHorizontal,
centerVertical,
closeCross,
decisionNode,
deleteColumn,
deleteRow,
deleteTable,
detach,
distributeBottom,
distributeCenterHorizontal,
distributeCenterVertical,
distributeLeft,
distributeOriginBottomRight,
distributeOriginCenter,
distributeOriginNone,
distributeOriginTopLeft,
distributeRight,
distributeSpacingHorizontal,
distributeSpacingVertical,
distributeTop,
edit,
fontStyleBold,
fontStyleItalic,
fontStyleStrikethrough,
fontStyleUnderline,
mergeCells,
redo,
splitColumns,
splitRows,
startNode,
testIcon,
textAlignBottom,
textAlignCenter,
textAlignLeft,
textAlignMiddle,
textAlignRight,
textAlignTop,
textBulletList,
textFullJustification,
textNumberedList,
tickIcon,
triState,
undo,
upDownIcon,
upDownSquare2,
wildcard
};
static Theme *instance();
static QString replaceCssColors(const QString &input);
static void setupTheme(QQmlEngine *engine);
static QColor getColor(Color role);
static QPixmap getPixmap(const QString &id);
static QString getIconUnicode(Theme::Icon i);
Q_INVOKABLE QColor qmlDesignerBackgroundColorDarker() const;
Q_INVOKABLE QColor qmlDesignerBackgroundColorDarkAlternate() const;
@@ -58,9 +137,12 @@ public:
Q_INVOKABLE int smallFontPixelSize() const;
Q_INVOKABLE int captionFontPixelSize() const;
Q_INVOKABLE bool highPixelDensity() const;
private:
Theme(Utils::Theme *originTheme, QObject *parent);
QColor evaluateColorAtThemeInstance(const QString &themeColorName);
QObject *m_constants;
};
} // namespace QmlDesigner

View File

@@ -60,6 +60,7 @@
#include <utils/algorithm.h>
#include <utils/fileutils.h>
#include <utils/qtcassert.h>
#include <utils/stylehelper.h>
#include <QSettings>
#include <QToolBar>
@@ -70,6 +71,7 @@
#include <advanceddockingsystem/dockareawidget.h>
#include <advanceddockingsystem/docksplitter.h>
#include <advanceddockingsystem/iconprovider.h>
using Core::MiniSplitter;
using Core::IEditor;
@@ -227,6 +229,26 @@ void DesignModeWidget::setup()
QString sheet = QString::fromUtf8(Utils::FileReader::fetchQrc(":/qmldesigner/dockwidgets.css"));
m_dockManager->setStyleSheet(Theme::replaceCssColors(sheet));
// Setup icons
QColor buttonColor(Theme::getColor(Theme::QmlDesigner_TabLight)); // TODO Use correct color roles
QColor tabColor(Theme::getColor(Theme::QmlDesigner_TabDark));
const QString closeUnicode = Theme::getIconUnicode(Theme::Icon::adsClose);
const QString menuUnicode = Theme::getIconUnicode(Theme::Icon::adsDropDown);
const QString undockUnicode = Theme::getIconUnicode(Theme::Icon::adsDetach);
const QString fontName = "qtds_propertyIconFont.ttf";
const QIcon tabsCloseIcon = Utils::StyleHelper::getIconFromIconFont(fontName, closeUnicode, 28, 28, tabColor);
const QIcon menuIcon = Utils::StyleHelper::getIconFromIconFont(fontName, menuUnicode, 28, 28, buttonColor);
const QIcon undockIcon = Utils::StyleHelper::getIconFromIconFont(fontName, undockUnicode, 28, 28, buttonColor);
const QIcon closeIcon = Utils::StyleHelper::getIconFromIconFont(fontName, closeUnicode, 28, 28, buttonColor);
m_dockManager->iconProvider().registerCustomIcon(ADS::TabCloseIcon, tabsCloseIcon);
m_dockManager->iconProvider().registerCustomIcon(ADS::DockAreaMenuIcon, menuIcon);
m_dockManager->iconProvider().registerCustomIcon(ADS::DockAreaUndockIcon, undockIcon);
m_dockManager->iconProvider().registerCustomIcon(ADS::DockAreaCloseIcon, closeIcon);
m_dockManager->iconProvider().registerCustomIcon(ADS::FloatingWidgetCloseIcon, closeIcon);
// Setup Actions and Menus
Core::ActionContainer *mwindow = Core::ActionManager::actionContainer(Core::Constants::M_WINDOW);
// Window > Views

View File

@@ -217,6 +217,11 @@ bool QmlDesignerPlugin::initialize(const QStringList & /*arguments*/, QString *e
if (DesignerSettings::getValue(DesignerSettingsKey::STANDALONE_MODE).toBool())
GenerateResource::generateMenuEntry();
QString fontPath = Core::ICore::resourcePath() +
QStringLiteral("/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf");
if (QFontDatabase::addApplicationFont(fontPath) < 0)
qCWarning(qmldesignerLog) << "Could not add font " << fontPath << "to font database";
return true;
}