Commit b8a22a5e authored by Thomas Hartmann's avatar Thomas Hartmann Committed by Alessandro Portale

QmlDesigner: Rework of theming colors

* Use the original fancy toolbar colors by removing the
  Alpha channel.

* Use the splitter colors for borders to avoid white borders
  in light themes.

* Use the FancyToolButtonHoverColor for buttons and combo boxes.

Change-Id: Id636e0713c8e2769c5eb03a115a60ccad8226f23
Reviewed-by: Alessandro Portale's avatarAlessandro Portale <alessandro.portale@qt.io>
parent 876ec599
......@@ -29,8 +29,8 @@ import QtQuick.Controls.Styles 1.1
ScrollViewStyle {
readonly property color scrollbarColor: creatorTheme.BackgroundColorDark
readonly property color scrollbarBorderColor: creatorTheme.QmlDesignerBackgroundColorDarker
readonly property color scrollBarHandleColor: creatorTheme.QmlDesignerBackgroundColorLighter
readonly property color scrollbarBorderColor: creatorTheme.QmlDesignerBorderColor
readonly property color scrollBarHandleColor: creatorTheme.QmlDesignerButtonColor
padding {left: 0; top: 0; right: 0; bottom: 0}
......
......@@ -28,9 +28,9 @@ import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.0
Rectangle {
color: creatorTheme.QmlDesignerBackgroundColorLighter
color: creatorTheme.QmlDesignerButtonColor
border.color: creatorTheme.BackgroundColorDark
border.color: creatorTheme.QmlDesignerBorderColor
border.width: 1
......
......@@ -78,7 +78,7 @@ Item {
anchors.fill: parent
visible: !checked
color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
color: creatorTheme.QmlDesignerButtonColor
}
}
......
......@@ -38,7 +38,7 @@ CheckBoxStyle {
color: control.pressed
? creatorTheme.FancyToolButtonHoverColor
: creatorTheme.FancyToolButtonSelectedColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
border.color: creatorTheme.QmlDesignerBorderColor
anchors.margins: 1
}
Image {
......
......@@ -40,30 +40,19 @@ ComboBoxStyle {
Rectangle {
anchors.fill: parent
visible: !control.pressed
color: creatorTheme.FancyToolButtonSelectedColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
color: creatorTheme.QmlDesignerButtonColor
border.color: creatorTheme.QmlDesignerBorderColor
border.width: 1
}
Rectangle {
color: creatorTheme.FancyToolButtonHoverColor
color: creatorTheme.QmlDesignerBackgroundColorDarker
anchors.fill: parent
visible: control.pressed
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
border.color: creatorTheme.QmlDesignerBorderColor
border.width: 1
}
Rectangle {
color: creatorTheme.IconsBaseColor
width: 1
anchors.right: imageItem.left
anchors.topMargin: 4
anchors.bottomMargin: 4
anchors.rightMargin: 6
anchors.top: parent.top
anchors.bottom: parent.bottom
}
Image {
id: imageItem
width: 8
......
......@@ -67,7 +67,7 @@ SpinBoxStyle {
background: Rectangle {
implicitWidth: Math.max(64, styleData.contentWidth)
implicitHeight: 23
color: creatorTheme.FancyToolButtonSelectedColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
color: creatorTheme.QmlDesignerBackgroundColorDarker
border.color: creatorTheme.QmlDesignerBorderColor
}
}
......@@ -118,8 +118,8 @@ Controls.TextField {
background: Rectangle {
implicitWidth: 100
implicitHeight: 24
color: creatorTheme.FancyToolButtonSelectedColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
color: creatorTheme.QmlDesignerBackgroundColorDarker
border.color: creatorTheme.QmlDesignerBorderColor
}
}
......@@ -172,10 +172,8 @@ Controls.TextField {
y: 1
Rectangle {
anchors.fill: parent
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
color: control.pressed
? creatorTheme.QmlDesignerBackgroundColorLighter
: creatorTheme.FancyToolButtonHoverColor
border.color: creatorTheme.QmlDesignerBorderColor
color: creatorTheme.QmlDesignerBackgroundColorDarker
opacity: control.hovered || control.pressed ? 1 : 0.75
}
Image {
......
......@@ -43,8 +43,8 @@ Rectangle {
*/
border.width: roundLeft || roundRight ? 1 : 0
color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
color: creatorTheme.QmlDesignerButtonColor
border.color: creatorTheme.QmlDesignerBorderColor
Rectangle {
anchors.fill: parent
......@@ -71,7 +71,7 @@ Rectangle {
}
Rectangle {
color: creatorTheme.QmlDesignerBackgroundColorDarker
color: creatorTheme.QmlDesignerBorderColor
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
......@@ -81,7 +81,7 @@ Rectangle {
}
Rectangle {
color: creatorTheme.QmlDesignerBackgroundColorDarker
color: creatorTheme.QmlDesignerBorderColor
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
......
......@@ -37,7 +37,7 @@ Rectangle {
property int delegateStateImageSize
color: baseColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
border.color: creatorTheme.QmlDesignerBorderColor
MouseArea {
anchors.fill: parent
......
......@@ -111,7 +111,7 @@ FocusScope {
background: Rectangle {
property color buttonBaseColor: Qt.darker(creatorTheme.QmlDesignerBackgroundColorDarkAlternate, 1.1)
color: control.hovered ? Qt.lighter(buttonBaseColor, 1.2) : buttonBaseColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
border.color: creatorTheme.QmlDesignerBorderColor
border.width: 1
Image {
source: "image://icons/plus"
......
......@@ -27,31 +27,31 @@
#include "qmldesignericonprovider.h"
#include <utils/theme/theme.h>
#include <utils/stylehelper.h>
#include <QRegExp>
namespace QmlDesigner {
QColor midtone(const QColor &a, const QColor &b)
{
QColor alphaB = b;
alphaB.setAlpha(128);
return Utils::StyleHelper::alphaBlendedColors(a ,alphaB);
}
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));
/* Define QmlDesigner colors and remove alpha channels */
const QColor panelStatusBarBackgroundColor = Utils::creatorTheme()->color(Utils::Theme::PanelStatusBarBackgroundColor);
const QColor fancyToolButtonSelectedColor = Utils::creatorTheme()->color(Utils::Theme::FancyToolButtonSelectedColor);
const QColor darkerBackground = Utils::StyleHelper::alphaBlendedColors(panelStatusBarBackgroundColor, fancyToolButtonSelectedColor);
const QColor fancyToolButtonHoverColor = Utils::creatorTheme()->color(Utils::Theme::FancyToolButtonHoverColor);
const QColor buttonColor = Utils::StyleHelper::alphaBlendedColors(panelStatusBarBackgroundColor, fancyToolButtonHoverColor);
Utils::creatorTheme()->color(Utils::Theme::PanelTextColorLight);
QColor tabLight = Utils::creatorTheme()->color(Utils::Theme::PanelTextColorLight);
......@@ -64,8 +64,12 @@ void Theming::insertTheme(QQmlPropertyMap *map)
tabDark = tabDark.darker(260);
}
map->insert("QmlDesignerBackgroundColorDarker", darkerBackground);
map->insert("QmlDesignerBackgroundColorDarkAlternate", midtone(panelStatusBarBackgroundColor, buttonColor));
map->insert("QmlDesignerTabLight", tabLight);
map->insert("QmlDesignerTabDark", tabDark);
map->insert("QmlDesignerButtonColor", buttonColor);
map->insert("QmlDesignerBorderColor", Utils::creatorTheme()->color(Utils::Theme::SplitterColor));
}
QString Theming::replaceCssColors(const QString &input)
......
QScrollBar:vertical {
background-color: creatorTheme.BackgroundColorDark;
border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
border: 1px solid creatorTheme.QmlDesignerBorderColor;
margin-top: 3;
margin-bottom: 3;
width: 10;
}
QScrollBar::handle:vertical {
background-color: creatorTheme.QmlDesignerBackgroundColorLighter;
background-color: creatorTheme.QmlDesignerButtonColor;
margin-top: -5;
margin-bottom: -5;
min-height: 18px;
width: 8px;
border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
border: 1px solid creatorTheme.QmlDesignerBorderColor;
border-width: 1;
margin-left: -1;
margin-right: -1;
......@@ -45,20 +45,20 @@
QScrollBar:horizontal {
background-color: creatorTheme.BackgroundColorDark;
border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
border: 1px solid creatorTheme.QmlDesignerBorderColor;
margin-left: 3;
margin-right: 3;
height: 10;
}
QScrollBar::handle:horizontal {
background-color: creatorTheme.QmlDesignerBackgroundColorLighter;
background-color: creatorTheme.QmlDesignerButtonColor;
margin-left: -5;
margin-right: -5;
min-width: 18px;
height: 8px;
border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
border: 1px solid creatorTheme.QmlDesignerBorderColor;
border-width: 1;
margin-top: -1;
margin-bottom: -1;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment