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

QmlDesigner: Adding theming support for Qt Quick Designer

Browse Source 
With this patch the Qt Quick Designer supports:

*Flat
*Flat Dark
*Flat Light
*Classic

I did not test the dark style.

I added a template engine for the .css files. The syntax for the .css
files
is identical to the QML syntax.

Known issues:
* The icons in the property editor do not play well with the
  Flat Light style. We have to get proper Core:Icon support for the
  icons
  and most icons have to be simplified/flattened to fit the new style/
  theme.
* Some colors in the connection editor are still dark and hardcoded. But
  this looks ok together with all themes.
* The highlight colors are not taken from the theme, yet.

Change-Id: I94f2b75f92db8e131c2b15867dbabe9ae4b2f25a
Reviewed-by: Tim Jenssen <tim.jenssen@theqtcompany.com>
This commit is contained in:
Thomas Hartmann
2016-07-12 12:37:41 +02:00
parent ff9a49f99f
commit a017138e58
43 changed files with 308 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
share/qtcreator/qmldesigner/common/DesignerScrollViewStyle.qml
View File

@@ -28,9 +28,9 @@ import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
ScrollViewStyle {
property color scrollbarColor: "#444444"
property color scrollbarBorderColor: "#333333"
property color scrollBarHandleColor: "#656565"
readonly property color scrollbarColor: creatorTheme.BackgroundColorDark
readonly property color scrollbarBorderColor: creatorTheme.QmlDesignerBackgroundColorDarker
readonly property color scrollBarHandleColor: creatorTheme.QmlDesignerBackgroundColorLighter
padding {left: 0; top: 0; right: 0; bottom: 0}

6
share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml
View File

@@ -28,9 +28,9 @@ import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.0
Rectangle {
color: styleConstants.lighterBackgroundColor
color: creatorTheme.QmlDesignerBackgroundColorLighter
border.color: styleConstants.backgroundColor
border.color: creatorTheme.BackgroundColorDark
border.width: 1
@@ -63,7 +63,7 @@ Rectangle {
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
text: itemName // to be set by model
color: "#FFFFFF"
color: creatorTheme.PanelTextColorLight
renderType: Text.NativeRendering
}

4
share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
View File

@@ -64,8 +64,8 @@ ScrollView {
Item {
id: styleConstants
property color backgroundColor: "#4f4f4f"
property color lighterBackgroundColor: "#5f5f5f"
readonly property color backgroundColor: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
readonly property color lighterBackgroundColor: creatorTheme.FancyToolBarSeparatorColor
property int textWidth: 58
property int textHeight: 22

11
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ButtonRowButton.qml
View File

@@ -68,12 +68,8 @@ Item {
roundRight: isLast()
anchors.fill: parent
z: checked ? 1 : 0
gradient: Gradient {
GradientStop {color: '#444' ; position: 0}
GradientStop {color: '#333' ; position: 1}
}
visible: checked
color: creatorTheme.QmlDesignerBackgroundColorDarker
}
RoundedPanel {
@@ -81,7 +77,8 @@ Item {
roundRight: isLast()
anchors.fill: parent
z: !checked ? 1 : 0
visible: !checked
color: creatorTheme.BackgroundColorDark
}
}

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CheckBox.qml
View File

@@ -31,8 +31,6 @@ Controls.CheckBox {
id: checkBox
property color borderColor: "#222"
property color highlightColor: "orange"
property color textColor: colorLogic.textColor
opacity: enabled ? 1 : 0.5

10
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ColorLogic.qml
View File

@@ -32,14 +32,14 @@ QtObject {
id: innerObject
property variant backendValue
property color textColor: Constants.colorsDefaultText
property color textColor: creatorTheme.PanelTextColorLight
property variant valueFromBackend: backendValue.value;
property bool baseStateFlag: isBaseState;
property bool isInModel: backendValue.isInModel;
property bool isInSubState: backendValue.isInSubState;
property bool highlight: textColor == Constants.colorsChangedBaseText
property bool highlight: textColor === __changedTextColor
property color __defaultTextColor: Constants.colorsDefaultText
property color __defaultTextColor: creatorTheme.PanelTextColorLight
property color __changedTextColor: Constants.colorsChangedBaseText
onBackendValueChanged: {
@@ -70,12 +70,12 @@ QtObject {
if (innerObject.backendValue.isInModel)
innerObject.textColor = Constants.colorsChangedBaseText
else
innerObject.textColor = Constants.colorsDefaultText
innerObject.textColor = creatorTheme.PanelTextColorLight
} else {
if (innerObject.backendValue.isInSubState)
innerObject.textColor = Constants.colorsChangedStateText
else
innerObject.textColor = Constants.colorsDefaultText
innerObject.textColor = creatorTheme.PanelTextColorLight
}
}

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ComboBox.qml
View File

@@ -112,7 +112,7 @@ Controls.ComboBox {
ExtendedFunctionButton {
x: 2
y: 4
y: 6
backendValue: comboBox.backendValue
visible: comboBox.enabled
}

34
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomComboBoxStyle.qml
View File

@@ -28,10 +28,7 @@ import QtQuick.Controls 1.1 as Controls
import QtQuick.Controls.Styles 1.2
ComboBoxStyle {
property color borderColor: "#222"
property color highlightColor: "orange"
property color textColor: "#eee"
property color textColor: creatorTheme.PanelTextColorLight
__editor: Item {
}
@@ -40,31 +37,20 @@ ComboBoxStyle {
implicitWidth: 120
implicitHeight: 25
RoundedPanel {
Rectangle {
anchors.fill: parent
roundLeft: true
roundRight: true
visible: !control.pressed
}
RoundedPanel {
gradient: Gradient {
GradientStop {color: '#444' ; position: 0}
GradientStop {color: '#333' ; position: 1}
}
anchors.fill: parent
roundLeft: true
roundRight: true
visible: control.pressed
color: creatorTheme.FancyToolButtonSelectedColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
border.width: 1
}
Rectangle {
border.color: highlightColor
color: creatorTheme.FancyToolButtonHoverColor
anchors.fill: parent
anchors.margins: -1
color: "transparent"
opacity: 0.3
visible: control.activeFocus
visible: control.pressed
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
border.width: 1
}
Rectangle {
@@ -97,7 +83,7 @@ ComboBoxStyle {
anchors.verticalCenter: parent.verticalCenter
text: control.currentText
renderType: Text.NativeRendering
color: textColor
color: creatorTheme.PanelTextColorLight
}
}

23
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomSpinBoxStyle.qml
View File

@@ -28,10 +28,11 @@ import QtQuick.Controls 1.1 as Controls
import QtQuick.Controls.Styles 1.1
SpinBoxStyle {
selectionColor: spinBox.textColor
selectedTextColor: "black"
selectionColor: creatorTheme.PanelTextColorLight
selectedTextColor: creatorTheme.PanelTextColorMid
textColor: spinBox.textColor
padding.top: 3
padding.bottom: 1
padding.right: 18
@@ -62,19 +63,7 @@ SpinBoxStyle {
background: Rectangle {
implicitWidth: Math.max(64, styleData.contentWidth)
implicitHeight: 23
border.color: borderColor
gradient: Gradient {
GradientStop {color: "#2c2c2c" ; position: 0}
GradientStop {color: "#343434" ; position: 0.15}
GradientStop {color: "#373737" ; position: 1}
}
Rectangle {
border.color: highlightColor
anchors.fill: parent
anchors.margins: -1
color: "transparent"
opacity: 0.3
visible: control.activeFocus
}
color: creatorTheme.FancyToolButtonSelectedColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
}
}

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Label.qml
View File

@@ -36,7 +36,7 @@ Controls.Label {
property alias toolTip: toolTipArea.tooltip
width: Math.max(Math.min(240, parent.width - 220), 80)
color: "#eee"
color: creatorTheme.PanelTextColorLight
elide: Text.ElideRight
Layout.preferredWidth: width

32
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/LineEdit.qml
View File

@@ -52,7 +52,7 @@ Controls.TextField {
ExtendedFunctionButton {
x: 2
y: 4
y: 6
backendValue: lineEdit.backendValue
visible: lineEdit.enabled && showExtendedFunctionButton
}
@@ -105,31 +105,21 @@ Controls.TextField {
}
style: TextFieldStyle {
selectionColor: lineEdit.textColor
selectedTextColor: "black"
textColor: lineEdit.textColor
selectionColor: creatorTheme.PanelTextColorLight
selectedTextColor: creatorTheme.PanelTextColorMid
textColor: creatorTheme.PanelTextColorLight
placeholderTextColor: creatorTheme.PanelTextColorMid
padding.top: 3
padding.bottom: 1
padding.bottom: 3
padding.left: 16
padding.right: lineEdit.showTranslateCheckBox ? 16 : 1
placeholderTextColor: "gray"
background: Rectangle {
implicitWidth: 100
implicitHeight: 23
border.color: borderColor
gradient: Gradient {
GradientStop {color: "#2c2c2c" ; position: 0}
GradientStop {color: "#343434" ; position: 0.15}
GradientStop {color: "#373737" ; position: 1.0}
}
Rectangle {
border.color: highlightColor
anchors.fill: parent
anchors.margins: -1
color: "transparent"
opacity: 0.3
visible: control.activeFocus
}
implicitHeight: 24
color: creatorTheme.FancyToolButtonSelectedColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
}
}

22
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/OriginControl.qml
View File

@@ -32,11 +32,13 @@ Item {
property variant backendValue
property color highlightColor: "orange"
property color borderColor: colorLogic.textColor
property bool showTranslateCheckBox: true
readonly property color selectedColor: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
readonly property color unselectedColor: creatorTheme.QmlDesignerBackgroundColorDarker
ExtendedFunctionButton {
backendValue: originControl.backendValue
visible: originControl.enabled
@@ -98,7 +100,7 @@ Item {
id: topLeft
width: 15
height: 15
color: selected ? "#4f4f4f" : "black"
color: selected ? selectedColor : unselectedColor
border.color: originControl.borderColor
border.width: selected ? 2 : 0
MouseArea {
@@ -113,7 +115,7 @@ Item {
property bool selected: false
width: topLeft.width
height: topLeft.height
color: selected ? "#4f4f4f" : "black"
color: selected ? selectedColor : unselectedColor
border.width: selected ? 2 : 0
border.color: originControl.borderColor
MouseArea {
@@ -128,7 +130,7 @@ Item {
property bool selected: false
width: topLeft.width
height: topLeft.height
color: selected ? "#4f4f4f" : "black"
color: selected ? selectedColor : unselectedColor
border.width: selected ? 2 : 0
border.color: originControl.borderColor
MouseArea {
@@ -143,7 +145,7 @@ Item {
property bool selected: false
width: topLeft.width
height: topLeft.height
color: selected ? "#4f4f4f" : "black"
color: selected ? selectedColor : unselectedColor
border.width: selected ? 2 : 0
border.color: originControl.borderColor
MouseArea {
@@ -158,7 +160,7 @@ Item {
property bool selected: false
width: topLeft.width
height: topLeft.height
color: selected ? "#4f4f4f" : "black"
color: selected ? selectedColor : unselectedColor
border.width: selected ? 2 : 0
border.color: originControl.borderColor
MouseArea {
@@ -173,7 +175,7 @@ Item {
property bool selected: false
width: topLeft.width
height: topLeft.height
color: selected ? "#4f4f4f" : "black"
color: selected ? selectedColor : unselectedColor
border.width: selected ? 2 : 0
border.color: originControl.borderColor
MouseArea {
@@ -188,7 +190,7 @@ Item {
property bool selected: false
width: topLeft.width
height: topLeft.height
color: selected ? "#4f4f4f" : "black"
color: selected ? selectedColor : unselectedColor
border.width: selected ? 2 : 0
border.color: originControl.borderColor
MouseArea {
@@ -203,7 +205,7 @@ Item {
property bool selected: false
width: topLeft.width
height: topLeft.height
color: selected ? "#4f4f4f" : "black"
color: selected ? selectedColor : unselectedColor
border.width: selected ? 2 : 0
border.color: originControl.borderColor
MouseArea {
@@ -218,7 +220,7 @@ Item {
property bool selected: false
width: topLeft.width
height: topLeft.height
color: selected ? "#4f4f4f" : "black"
color: selected ? selectedColor : unselectedColor
border.width: selected ? 2 : 0
border.color: originControl.borderColor
MouseArea {

16
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/RoundedPanel.qml
View File

@@ -28,19 +28,23 @@ import QtQuick.Controls 1.0 as Controls
import QtQuick.Layouts 1.0
Rectangle {
id: panel
property bool roundLeft: false
property bool roundRight: false
/*
radius: roundLeft || roundRight ? 1 : 0
gradient: Gradient {
GradientStop {color: '#555' ; position: 0}
GradientStop {color: '#444' ; position: 1}
}
*/
border.width: roundLeft || roundRight ? 1 : 0
border.color: "#2e2e2e"
color: creatorTheme.BackgroundColorDark
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
Rectangle {
anchors.fill: parent
@@ -48,8 +52,9 @@ Rectangle {
anchors.leftMargin: 10
anchors.topMargin: 1
anchors.bottomMargin: 1
color: panel.color
Component.onCompleted: {
gradient = parent.gradient
//gradient = parent.gradient
}
}
@@ -59,13 +64,14 @@ Rectangle {
anchors.rightMargin: 10
anchors.topMargin: 1
anchors.bottomMargin: 1
color: panel.color
Component.onCompleted: {
gradient = parent.gradient
//gradient = parent.gradient
}
}
Rectangle {
color: "#2e2e2e"
color: creatorTheme.QmlDesignerBackgroundColorDarker
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
@@ -75,7 +81,7 @@ Rectangle {
}
Rectangle {
color: "#2e2e2e"
color: creatorTheme.QmlDesignerBackgroundColorDarker
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right

7
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Section.qml
View File

@@ -48,10 +48,8 @@ Item {
Controls.Label {
id: label
anchors.verticalCenter: parent.verticalCenter
color: "white"
color: creatorTheme.PanelTextColorLight
x: 22
style: Text.Sunken
styleColor: "#292929"
font.bold: true
}
@@ -68,7 +66,7 @@ Item {
}
}
color: "#444"
color: creatorTheme.BackgroundColorDark
Rectangle {
visible: false
@@ -78,6 +76,7 @@ Item {
}
Rectangle {
visible: false
color: "#333"
anchors.bottom: parent.bottom
width: parent.width

4
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SliderSpinBox.qml
View File

@@ -30,9 +30,7 @@ SpinBox {
id: spinBox
width: 76
property color borderColor: "#222"
property color highlightColor: "orange"
property color textColor: "#eee"
property color textColor: colorLogic.textColor
style: CustomSpinBoxStyle {

3
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SpinBox.qml
View File

@@ -29,8 +29,7 @@ import QtQuick.Controls.Styles 1.1
Controls.SpinBox {
id: spinBox
property color borderColor: "#222"
property color highlightColor: "orange"
property color textColor: colorLogic.textColor
property variant backendValue;

13
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/TabView.qml
View File

@@ -30,13 +30,12 @@ import QtQuick.Controls.Styles 1.1
Controls.TabView {
id: root
property color textColor: "#eee"
frameVisible: false
style: TabViewStyle {
frameOverlap: 0
frame: Item { }
tab: Rectangle {
color: styleData.selected ? "#eee" : "#414141"
color: styleData.selected ? creatorTheme.QmlDesignerTabLight : creatorTheme.QmlDesignerTabDark
implicitWidth: root.width/root.count + 2
implicitHeight: 28
Text {
@@ -46,21 +45,15 @@ Controls.TabView {
anchors.verticalCenterOffset: -1
text: styleData.title
renderType: Text.NativeRendering
color: styleData.selected ? "#333" : "#fff"
color: styleData.selected ? creatorTheme.QmlDesignerTabDark : creatorTheme.QmlDesignerTabLight
}
Rectangle {
color: "#eee"
color:creatorTheme.QmlDesignerTabLight
width: parent.width
height: 4
anchors.bottom: parent.bottom
}
Rectangle {
color: "#333"
width: parent.width
height: 1
}
}
}
}

5
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml
View File

@@ -58,6 +58,7 @@ RowLayout {
property alias buttonRow: buttonRow
readonly property color __defaultTextColor: creatorTheme.PanelTextColorLight
IconLabel {
id: icon
@@ -71,7 +72,7 @@ RowLayout {
Controls.Label {
text: qsTr("Target")
color: "#eee"
color: __defaultTextColor
elide: Text.ElideRight
Layout.minimumWidth: Math.min(60, Layout.preferredWidth + 10)
}
@@ -85,7 +86,7 @@ RowLayout {
Controls.Label {
text: "Margin"
color: "#eee"
color: __defaultTextColor
elide: Text.ElideRight
Layout.minimumWidth: Math.min(60, Layout.preferredWidth + 10)
}

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml
View File

@@ -31,7 +31,7 @@ Rectangle {
id: itemPane
width: 320
height: 400
color: "#4f4f4f"
color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
ScrollView {
anchors.fill: parent

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml
View File

@@ -31,7 +31,7 @@ Rectangle {
id: itemPane
width: 320
height: 400
color: "#4f4f4f"
color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
ScrollView {
anchors.fill: parent

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/emptyPane.qml
View File

@@ -30,7 +30,7 @@ Rectangle {
id: itemPane
width: 320
height: 400
color: "#4f4f4f"
color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
Section {
y: -1

25
share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerTextFieldStyle.qml
View File

@@ -28,10 +28,10 @@ import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
TextFieldStyle {
selectionColor: "#FFFFFF"
selectedTextColor: "#000000"
textColor: "#FFFFFF"
placeholderTextColor: "#A0A0A0"
selectionColor: creatorTheme.PanelTextColorLight
selectedTextColor: creatorTheme.PanelTextColorDark
textColor: creatorTheme.PanelTextColorLight
placeholderTextColor: creatorTheme.PanelTextColorMid
padding.top: 4
padding.bottom: 4
@@ -39,20 +39,7 @@ TextFieldStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: font.pixelSize + padding.top + padding.bottom
border.color: "#222222"
gradient: Gradient {
GradientStop {color: "#2c2c2c" ; position: 0}
GradientStop {color: "#343434" ; position: 0.15}
GradientStop {color: "#373737" ; position: 1.0}
}
Rectangle {
border.color: highlightColor
anchors.fill: parent
anchors.margins: -1
color: "#00000000" //Qt.transparent
radius: 4
opacity: 0.3
visible: control.activeFocus
}
color: creatorTheme.FancyToolButtonSelectedColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
}
}

2
share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml
View File

@@ -103,7 +103,7 @@ Rectangle {
// as we change the background we need to change the text
// color to see some text
textColor: "#FFFFFF"
textColor: creatorTheme.PanelTextColorLight
}
Item {

4
share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml
View File

@@ -57,7 +57,7 @@ FocusScope {
Rectangle {
id: background
anchors.fill: parent
color: "#4f4f4f"
color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
}
MouseArea {
@@ -109,7 +109,7 @@ FocusScope {
style: ButtonStyle {
background: Rectangle {
property color buttonBaseColor: "#6f6f6f"
property color buttonBaseColor: Qt.darker(creatorTheme.QmlDesignerBackgroundColorDarkAlternate, 1.1)
color: control.hovered ? Qt.lighter(buttonBaseColor, 1.2) : buttonBaseColor
border.width: 1
Image {

2
src/plugins/qmldesigner/components/componentcore/componentcore.pri
View File

@@ -1,6 +1,7 @@
VPATH += $$PWD
SOURCES += modelnodecontextmenu.cpp
SOURCES += theming.cpp
SOURCES += findimplementation.cpp
SOURCES += addsignalhandlerdialog.cpp
SOURCES += layoutingridlayout.cpp
@@ -14,6 +15,7 @@ SOURCES += modelnodeoperations.cpp
SOURCES += crumblebar.cpp
HEADERS += modelnodecontextmenu.h
HEADERS += theming.h
HEADERS += findimplementation.h
HEADERS += addsignalhandlerdialog.h
HEADERS += layoutingridlayout.h

90
src/plugins/qmldesigner/components/componentcore/theming.cpp Normal file
View File

@@ -0,0 +1,90 @@
/****************************************************************************
**
** Copyright (C) 2016 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.
**
****************************************************************************/
#include "theming.h"
#include <utils/theme/theme.h>
#include <QRegExp>
namespace QmlDesigner {
void Theming::insertTheme(QQmlPropertyMap *map)
{
const QVariantHash creatorTheme = Utils::creatorTheme()->values();
for (auto it = creatorTheme.constBegin(); it != creatorTheme.constEnd(); ++it)
map->insert(it.key(), it.value());
/* Custom Colors */
QColor darkerBackground = Utils::creatorTheme()->color(Utils::Theme::BackgroundColorDark);
if (darkerBackground.value() < 40)
darkerBackground = darkerBackground.lighter(150);
map->insert("QmlDesignerBackgroundColorDarker", darkerBackground.darker(120));
map->insert("QmlDesignerBackgroundColorLighter", darkerBackground.lighter(140));
if (darkerBackground.value() < 100)
map->insert("QmlDesignerBackgroundColorDarkAlternate", darkerBackground.lighter(120));
else
map->insert("QmlDesignerBackgroundColorDarkAlternate", darkerBackground.lighter(110));
Utils::creatorTheme()->color(Utils::Theme::PanelTextColorLight);
QColor tabLight = Utils::creatorTheme()->color(Utils::Theme::PanelTextColorLight);
QColor tabDark = Utils::creatorTheme()->color(Utils::Theme::BackgroundColorDark);
/* hack for light themes */
/* The selected tab is always supposed to be lighter */
if (tabDark.value() > tabLight.value()) {
QColor swap = tabLight.lighter(180);
tabLight = tabDark.darker(110);
tabDark = tabDark.darker(260);
}
map->insert("QmlDesignerTabLight", tabLight);
map->insert("QmlDesignerTabDark", tabDark);
}
QString Theming::replaceCssColors(const QString &input)
{
QQmlPropertyMap map;
insertTheme(&map);
QRegExp rx("creatorTheme\\.(\\w+);");
int pos = 0;
QString output = input;
while ((pos = rx.indexIn(input, pos)) != -1) {
const QString color = rx.cap(1);
output.replace("creatorTheme." + rx.cap(1), map.value(color).toString());
pos += rx.matchedLength();
}
return output;
}
} // namespace QmlDesigner

39
src/plugins/qmldesigner/components/componentcore/theming.h Normal file
View File

@@ -0,0 +1,39 @@
/****************************************************************************
**
** Copyright (C) 2016 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.
**
****************************************************************************/
#pragma once
#include <QQmlPropertyMap>
namespace QmlDesigner {
class Theming
{
public:
static void insertTheme(QQmlPropertyMap *map);
static QString replaceCssColors(const QString &input);
};
} // namespace QmlDesigner

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

@@ -28,6 +28,7 @@
#include "designersettings.h"
#include "qmldesignerconstants.h"
#include "qmldesignericons.h"
#include <theming.h>
#include <QWheelEvent>
#include <QVBoxLayout>
@@ -49,7 +50,7 @@ FormEditorWidget::FormEditorWidget(FormEditorView *view)
: QWidget(),
m_formEditorView(view)
{
setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/formeditorstylesheet.css"))));
setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/formeditorstylesheet.css")))));
QVBoxLayout *fillLayout = new QVBoxLayout(this);
fillLayout->setMargin(0);
@@ -146,7 +147,7 @@ FormEditorWidget::FormEditorWidget(FormEditorView *view)
m_graphicsView = new FormEditorGraphicsView(this);
fillLayout->addWidget(m_graphicsView.data());
m_graphicsView.data()->setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
m_graphicsView.data()->setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
}
void FormEditorWidget::changeTransformTool(bool checked)

8
src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp
View File

@@ -25,6 +25,8 @@
#include "itemlibrarywidget.h"
#include <theming.h>
#include <utils/fileutils.h>
#include <utils/qtcassert.h>
#include <utils/stylehelper.h>
@@ -81,6 +83,8 @@ ItemLibraryWidget::ItemLibraryWidget(QWidget *parent) :
rootContext->setContextProperty(QStringLiteral("itemLibraryIconWidth"), m_itemIconSize.width());
rootContext->setContextProperty(QStringLiteral("itemLibraryIconHeight"), m_itemIconSize.height());
rootContext->setContextProperty(QStringLiteral("rootView"), this);
Theming::insertTheme(&m_themeProperties);
rootContext->setContextProperty(QLatin1String("creatorTheme"), &m_themeProperties);
m_itemViewQuickWidget->rootContext()->setContextProperty(QStringLiteral("highlightColor"), Utils::StyleHelper::notTooBrightHighlightColor());
@@ -141,8 +145,8 @@ ItemLibraryWidget::ItemLibraryWidget(QWidget *parent) :
setSearchFilter(QString());
/* style sheets */
setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/stylesheet.css"))));
m_resourcesView->setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/stylesheet.css")))));
m_resourcesView->setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
m_qmlSourceUpdateShortcut = new QShortcut(QKeySequence(Qt::CTRL + Qt::Key_F5), this);
connect(m_qmlSourceUpdateShortcut, SIGNAL(activated()), this, SLOT(reloadQmlSource()));

2
src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.h
View File

@@ -34,6 +34,7 @@
#include <QToolButton>
#include <QFileIconProvider>
#include <QQuickWidget>
#include <QQmlPropertyMap>
#include <QTimer>
QT_BEGIN_NAMESPACE
@@ -129,6 +130,7 @@ private:
QPointer<Model> m_model;
FilterChangeFlag m_filterFlag;
ItemLibraryEntry m_currentitemLibraryEntry;
QQmlPropertyMap m_themeProperties;
};
}

5
src/plugins/qmldesigner/components/navigator/navigatorwidget.cpp
View File

@@ -27,6 +27,7 @@
#include "navigatorview.h"
#include "qmldesignerconstants.h"
#include "qmldesignericons.h"
#include <theming.h>
#include <QBoxLayout>
#include <QToolButton>
@@ -59,8 +60,8 @@ NavigatorWidget::NavigatorWidget(NavigatorView *view) :
setWindowTitle(tr("Navigator", "Title of navigator view"));
setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/stylesheet.css"))));
m_treeView->setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/stylesheet.css")))));
m_treeView->setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
}
void NavigatorWidget::setTreeModel(QAbstractItemModel* model)

5
src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.cpp
View File

@@ -35,6 +35,8 @@
#include <variantproperty.h>
#include <bindingproperty.h>
#include <theming.h>
#include <coreplugin/icore.h>
#include <qmljs/qmljssimplereader.h>
#include <utils/algorithm.h>
@@ -100,6 +102,9 @@ PropertyEditorQmlBackend::PropertyEditorQmlBackend(PropertyEditorView *propertyE
m_contextObject->setBackendValues(&m_backendValuesPropertyMap);
m_contextObject->insertInQmlContext(context());
Theming::insertTheme(&m_themeProperties);
context()->setContextProperty(QLatin1String("creatorTheme"), &m_themeProperties);
QObject::connect(&m_backendValuesPropertyMap, &DesignerPropertyMap::valueChanged, propertyEditor, &PropertyEditorView::changeValue);
}

3
src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.h
View File

@@ -34,6 +34,8 @@
#include <nodemetainfo.h>
#include <QQmlPropertyMap>
class PropertyEditorValue;
namespace QmlDesigner {
@@ -101,6 +103,7 @@ private:
QScopedPointer<PropertyEditorTransaction> m_propertyEditorTransaction;
QScopedPointer<PropertyEditorValue> m_dummyPropertyEditorValue;
QScopedPointer<PropertyEditorContextObject> m_contextObject;
QQmlPropertyMap m_themeProperties;
};
} //QmlDesigner

6
src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp
View File

@@ -40,6 +40,8 @@
#include <nodeabstractproperty.h>
#include <theming.h>
#include <coreplugin/icore.h>
#include <utils/fileutils.h>
#include <coreplugin/messagebox.h>
@@ -80,8 +82,8 @@ PropertyEditorView::PropertyEditorView(QWidget *parent) :
m_updateShortcut = new QShortcut(QKeySequence(Qt::CTRL + Qt::Key_F3), m_stackedWidget);
connect(m_updateShortcut, SIGNAL(activated()), this, SLOT(reloadQml()));
m_stackedWidget->setStyleSheet(
QString::fromUtf8(Utils::FileReader::fetchQrc(QStringLiteral(":/qmldesigner/stylesheet.css"))));
m_stackedWidget->setStyleSheet(Theming::replaceCssColors(
QString::fromUtf8(Utils::FileReader::fetchQrc(QStringLiteral(":/qmldesigner/stylesheet.css")))));
m_stackedWidget->setMinimumWidth(320);
m_stackedWidget->move(0, 0);
connect(m_stackedWidget, SIGNAL(resized()), this, SLOT(updateSize()));

15
src/plugins/qmldesigner/components/resources/formeditorstylesheet.css
View File

@@ -1,23 +1,16 @@
QLabel {
border: none;
border-image: none;
padding: 0;
background: none;
color: #E1E1E1;
}
QStackedWidget {
border: 0px;
background-color: #4e4e4e;
background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
}
QGraphicsView {
padding: 2px;
border: 0px;
background-color: #4e4e4e;
background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
}
QGraphicsView:focus {
background-color: #5f5f5f;
background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
}

16
src/plugins/qmldesigner/components/resources/scrollbar.css
View File

@@ -1,18 +1,18 @@
QScrollBar:vertical {
background-color: #444444;
border: 1px solid #333333;
background-color: creatorTheme.BackgroundColorDark;
border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
margin-top: 3;
margin-bottom: 3;
width: 10;
}
QScrollBar::handle:vertical {
background-color: #656565;
background-color: creatorTheme.QmlDesignerBackgroundColorLighter;
margin-top: -5;
margin-bottom: -5;
min-height: 18px;
width: 8px;
border: 1px solid #313131;
border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
border-width: 1;
margin-left: -1;
margin-right: -1;
@@ -44,21 +44,21 @@
}
QScrollBar:horizontal {
background-color: #444444;
border: 1px solid #333333;
background-color: creatorTheme.BackgroundColorDark;
border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
margin-left: 3;
margin-right: 3;
height: 10;
}
QScrollBar::handle:horizontal {
background-color: #656565;
background-color: creatorTheme.QmlDesignerBackgroundColorLighter;
margin-left: -5;
margin-right: -5;
min-width: 18px;
height: 8px;
border: 1px solid #313131;
border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
border-width: 1;
margin-top: -1;
margin-bottom: -1;

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

@@ -1,6 +1,6 @@
QFrame {
border: 2px;
background-color: #4f4f4f;
background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
}
QLabel {
@@ -8,33 +8,33 @@ QLabel {
border-image: none;
padding: 0;
background: none;
color: #E1E1E1;
color: creatorTheme.PanelTextColorLight;
}
QScrollArea {
border: 0px;
background-color: #4f4f4f;
background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
}
QStackedWidget {
border: 0px;
background-color: #4f4f4f;
background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
}
QGraphicsView {
border: 0px;
background-color: #4f4f4f;
background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
}
QTabWidget {
border: 0px;
background-color: #4f4f4f;
background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
}
QTabWidget::pane { /* The tab widget frame */
border: 0px;
background-color: #4f4f4f;
background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
}
QLineEdit
@@ -47,23 +47,22 @@ QLineEdit
QLineEdit#itemLibrarySearchInput
{
color: white;
color: creatorTheme.PanelTextColorLight;
font-size: 11px;
border: 2px solid #0F0F0F;
border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
border-width: 1;
max-height: 20px;
min-height: 20px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #2c2c2c, stop: 1 #333333);
background-color: creatorTheme.FancyToolButtonSelectedColor;
}
QTreeView {
color: white;
selection-color: white
color: creatorTheme.PanelTextColorLight;
selection-color: creatorTheme.PanelTextColorLight;
}
QTreeView::item:selected {
color: white;
color: creatorTheme.PanelTextColorLight;
}
QTreeView::branch:has-siblings:!adjoins-item {
@@ -94,12 +93,12 @@ QTreeView::branch:has-siblings:!adjoins-item {
}
QListView {
color: white;
selection-color: white
color:creatorTheme.PanelTextColorLight;
selection-color: creatorTheme.PanelTextColorLight;
}
QListView::item:selected {
color: white;
color: creatorTheme.PanelTextColorLight;
}
QComboBox QAbstractItemView {
@@ -124,19 +123,17 @@ QTabBar::tab {
margin-right: 0px;
font: bold;
font-size: 11px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #3c3c3c, stop: 1 #444444);
background-color: creatorTheme.QmlDesignerTabDark;
color: #EEEEEE;
color: creatorTheme.QmlDesignerTabLight;
}
QTabBar::tab:selected {
border: none; /* no border for a flat push button */
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #EFEFEF, stop: 1 #EEEEEE);
color: #3c3c3c;
background-color: creatorTheme.QmlDesignerTabLight;
color: creatorTheme.QmlDesignerTabDark;
}
QWidget#itemLibrarySearchInputSpacer {
background-color: #eeeeee;
background-color: creatorTheme.QmlDesignerTabLight;
}

5
src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.cpp
View File

@@ -29,6 +29,8 @@
#include "stateseditorimageprovider.h"
#include "stateseditoriconprovider.h"
#include <theming.h>
#include <invalidqmlsourceexception.h>
#include <coreplugin/icore.h>
@@ -99,6 +101,9 @@ StatesEditorWidget::StatesEditorWidget(StatesEditorView *statesEditorView, State
rootContext()->setContextProperty(QLatin1String("canAddNewStates"), true);
Theming::insertTheme(&m_themeProperties);
rootContext()->setContextProperty(QLatin1String("creatorTheme"), &m_themeProperties);
engine()->addImageProvider(QLatin1String("icons"), new StatesEditorIconProvider());
setWindowTitle(tr("States", "Title of Editor widget"));

2
src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.h
View File

@@ -27,6 +27,7 @@
#include <QQuickWidget>
#include <QPointer>
#include <QQmlPropertyMap>
QT_BEGIN_NAMESPACE
class QShortcut;
@@ -66,6 +67,7 @@ private:
QPointer<StatesEditorView> m_statesEditorView;
Internal::StatesEditorImageProvider *m_imageProvider;
QShortcut *m_qmlSourceUpdateShortcut;
QQmlPropertyMap m_themeProperties;
};
}

3
src/plugins/qmldesigner/designmodewidget.cpp
View File

@@ -33,6 +33,7 @@
#include <texteditor/textdocument.h>
#include <nodeinstanceview.h>
#include <itemlibrarywidget.h>
#include <theming.h>
#include <coreplugin/modemanager.h>
#include <coreplugin/coreconstants.h>
@@ -300,7 +301,7 @@ void DesignModeWidget::setup()
QByteArray sheet = Utils::FileReader::fetchQrc(":/qmldesigner/stylesheet.css");
sheet += Utils::FileReader::fetchQrc(":/qmldesigner/scrollbar.css");
sheet += "QLabel { background-color: #4f4f4f; }";
navigationView.widget->setStyleSheet(QString::fromUtf8(sheet));
navigationView.widget->setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(sheet)));
}
}

15
src/plugins/qmldesigner/qmldesignerextension/connectioneditor/connectionviewwidget.cpp
View File

@@ -31,6 +31,7 @@
#include "bindingmodel.h"
#include "connectionmodel.h"
#include "dynamicpropertiesmodel.h"
#include "theming.h"
#include <coreplugin/coreconstants.h>
#include <coreplugin/coreicons.h>
@@ -50,7 +51,7 @@ ConnectionViewWidget::ConnectionViewWidget(QWidget *parent) :
setWindowTitle(tr("Connections", "Title of connection view"));
ui->setupUi(this);
setStyleSheet(QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/connectionview/stylesheet.css"))));
setStyleSheet(Theming::replaceCssColors(QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/connectionview/stylesheet.css")))));
//ui->tabWidget->tabBar()->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
@@ -59,14 +60,14 @@ ConnectionViewWidget::ConnectionViewWidget(QWidget *parent) :
ui->tabBar->addTab(tr("Properties", "Title of dynamic properties view"));
ui->tabBar->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
ui->connectionView->setStyleSheet(
QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
ui->connectionView->setStyleSheet(Theming::replaceCssColors(
QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
ui->bindingView->setStyleSheet(
QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
ui->bindingView->setStyleSheet(Theming::replaceCssColors(
QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
ui->dynamicPropertiesView->setStyleSheet(
QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
ui->dynamicPropertiesView->setStyleSheet(Theming::replaceCssColors(
QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
connect(ui->tabBar, SIGNAL(currentChanged(int)),
ui->stackedWidget, SLOT(setCurrentIndex(int)));

15
src/plugins/qmldesigner/qmldesignerextension/connectioneditor/stylesheet.css
View File

@@ -1,6 +1,6 @@
QFrame
{
background-color: #4f4f4f;
background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
font-size: 11px;
border-radius: 0px;
}
@@ -79,7 +79,7 @@ QComboBox QAbstractItemView {
}
QTableView {
color: white;
color: creatorTheme.PanelTextColorLight;
}
QTableView::item
@@ -115,7 +115,7 @@ QTableView {
}
QWidget#widgetSpacer {
background-color: #eeeeee;
background-color: creatorTheme.QmlDesignerTabLight;
}
QStackedWidget {
@@ -128,9 +128,8 @@ QTabBar::tab:selected {
border-image: none;
image: none;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #EFEFEF, stop: 1 #EEEEEE);
color: #3c3c3c;
background-color: creatorTheme.QmlDesignerTabLight;
color: creatorTheme.QmlDesignerTabDark;
}
@@ -143,8 +142,8 @@ QTabBar::tab {
margin-right: 0px;
font: bold;
font-size: 11px;
background-color: #444444;
color: #EEEEEE;
background-color: creatorTheme.QmlDesignerTabDark;
color: creatorTheme.QmlDesignerTabLight;
}
QComboBox::menu-indicator, QComboBox::down-arrow {

2
src/plugins/qmldesigner/qmldesignerplugin.qbs
View File

@@ -381,6 +381,8 @@ Project {
"componentcore/findimplementation.h",
"componentcore/layoutingridlayout.cpp",
"componentcore/layoutingridlayout.h",
"componentcore/theming.cpp",
"componentcore/theming.h",
"componentcore/modelnodecontextmenu.cpp",
"componentcore/modelnodecontextmenu.h",
"componentcore/modelnodecontextmenu_helper.cpp",