QmlDesigner: Theming of property editor checkbox and "tr" button

Change-Id: I599cd52c1b2b2e24952a9738f07eed0826802d4c
Reviewed-by: Thomas Hartmann <Thomas.Hartmann@theqtcompany.com>
This commit is contained in:
Alessandro Portale
2016-07-14 16:22:54 +02:00
committed by Thomas Hartmann
parent 676b317dd0
commit 63eae6bd85
25 changed files with 83 additions and 253 deletions

View File

@@ -33,8 +33,21 @@ CheckBoxStyle {
indicator: Item {
implicitWidth: 16
implicitHeight: 16
Image { source: "qrc:qmldesigner/images/checkbox_" +
(control.checked ? "checked": "unchecked") +
(control.pressed ? "_pressed": "") + ".png" }
Rectangle {
anchors.fill: parent
color: control.pressed
? creatorTheme.FancyToolButtonHoverColor
: creatorTheme.FancyToolButtonSelectedColor
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
anchors.margins: 1
}
Image {
x: 2
y: 2
width: 14
height: 13
source: "image://icons/checkbox-indicator"
visible: control.checked
}
}
}

View File

@@ -166,15 +166,27 @@ Controls.TextField {
style: CheckBoxStyle {
spacing: 8
indicator: Item {
implicitWidth: 16
implicitHeight: 16
implicitWidth: 15
implicitHeight: 15
x: 7
y: 1
Image { source: "qrc:qmldesigner/images/checkbox_tr_" +
(control.checked ? "checked": "unchecked") +
(control.pressed ? "_pressed": "") + ".png" }
Rectangle {
anchors.fill: parent
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
color: control.pressed
? creatorTheme.QmlDesignerBackgroundColorLighter
: creatorTheme.FancyToolButtonHoverColor
opacity: control.hovered || control.pressed ? 1 : 0.75
}
Image {
x: 1
y: 1
width: 13
height: 13
source: "image://icons/tr"
opacity: control.checked ? 1 : 0.3;
}
}
}
} //control.pressed ? "qrc:qmldesigner/images/checkbox_unchecked_pressed.png" :
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 240 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 644 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 360 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 623 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 178 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 319 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 173 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 316 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 283 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 288 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 111 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

View File

@@ -1,21 +1,9 @@
<RCC>
<qresource prefix="/qmldesigner">
<file>images/checkbox_checked.png</file>
<file>images/checkbox_checked@2x.png</file>
<file>images/checkbox_checked_pressed.png</file>
<file>images/checkbox_checked_pressed@2x.png</file>
<file>images/checkbox_unchecked.png</file>
<file>images/checkbox_unchecked@2x.png</file>
<file>images/checkbox_unchecked_pressed.png</file>
<file>images/checkbox_unchecked_pressed@2x.png</file>
<file>images/checkbox_tr_checked.png</file>
<file>images/checkbox_tr_checked@2x.png</file>
<file>images/checkbox_tr_checked_pressed.png</file>
<file>images/checkbox_tr_checked_pressed@2x.png</file>
<file>images/checkbox_tr_unchecked.png</file>
<file>images/checkbox_tr_unchecked@2x.png</file>
<file>images/checkbox_tr_unchecked_pressed.png</file>
<file>images/checkbox_tr_unchecked_pressed@2x.png</file>
<file>images/checkbox_indicator.png</file>
<file>images/checkbox_indicator@2x.png</file>
<file>images/tr.png</file>
<file>images/tr@2x.png</file>
<file>images/lock.png</file>
<file>images/hole.png</file>
<file>images/scrollbar-borderimage-horizontal.png</file>

View File

@@ -25,6 +25,8 @@
#include "qmldesignericonprovider.h"
#include <utils/icon.h>
#include <coreplugin/coreicons.h>
#include <coreplugin/icore.h>
@@ -47,42 +49,37 @@ QPixmap QmlDesignerIconProvider::requestPixmap(const QString &id, QSize *size, c
{
Q_UNUSED(requestedSize)
static Utils::Icon UP_ARROW({
{ iconPath() + QLatin1String("up-arrow.png"), Utils::Theme::IconsBaseColor}});
static Utils::Icon DOWN_ARROW({
{ iconPath() + QLatin1String("down-arrow.png"), Utils::Theme::IconsBaseColor}});
static Utils::Icon PLACEHOLDER({
{ iconPath() + QLatin1String("placeholder.png"), Utils::Theme::IconsBaseColor}});
static Utils::Icon EXPRESSION({
{ iconPath() + QLatin1String("expression.png"), Utils::Theme::IconsBaseColor}});
static Utils::Icon SUBMENU({
{ iconPath() + QLatin1String("submenu.png"), Utils::Theme::IconsBaseColor}});
using namespace Utils;
QPixmap result;
if (id == "close")
result = Core::Icons::CLOSE_TOOLBAR.pixmap();
else if (id == "plus")
result = Core::Icons::PLUS.pixmap();
else if (id == "expression")
result = EXPRESSION.pixmap();
result = Icon({
{ iconPath() + QLatin1String("expression.png"), Theme::IconsBaseColor}}, Icon::Tint).pixmap();
else if (id == "placeholder")
result = PLACEHOLDER.pixmap();
else if (id == "expression")
result = EXPRESSION.pixmap();
result = Icon({
{ iconPath() + QLatin1String("placeholder.png"), Theme::IconsBaseColor}}, Icon::Tint).pixmap();
else if (id == "submenu")
result = SUBMENU.pixmap();
result = Icon({
{ iconPath() + QLatin1String("submenu.png"), Theme::IconsBaseColor}}, Icon::Tint).pixmap();
else if (id == "up-arrow")
result = UP_ARROW.pixmap();
result = Icon({
{ iconPath() + QLatin1String("up-arrow.png"), Theme::IconsBaseColor}}, Icon::Tint).pixmap();
else if (id == "down-arrow")
result = DOWN_ARROW.pixmap();
result = Icon({
{ iconPath() + QLatin1String("down-arrow.png"), Theme::IconsBaseColor}}, Icon::Tint).pixmap();
else if (id == "checkbox-indicator")
result = Icon({
{ ":/qmldesigner/images/checkbox_indicator.png", Theme::IconsBaseColor}}, Icon::Tint).pixmap();
else if (id == "tr")
result = Icon({
{ ":/qmldesigner/images/tr.png", Theme::IconsBaseColor}}, Icon::Tint).pixmap();
else
qWarning() << Q_FUNC_INFO << "Image not found.";
qWarning() << Q_FUNC_INFO << "Image not found:" << id;
if (size)
*size = result.size();

View File

@@ -18,41 +18,6 @@
sodipodi:docname="qtcreatoricons.svg">
<defs
id="defs4">
<linearGradient
inkscape:collect="always"
id="linearGradient6897">
<stop
style="stop-color:#191919;stop-opacity:1"
offset="0"
id="stop6899" />
<stop
style="stop-color:#3f3f3f;stop-opacity:1"
offset="1"
id="stop6901" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient6874">
<stop
style="stop-color:#5d5d5d;stop-opacity:1"
offset="0"
id="stop6876" />
<stop
style="stop-color:#4a4a4a;stop-opacity:1"
offset="1"
id="stop6878" />
</linearGradient>
<linearGradient
id="linearGradient4217-1">
<stop
id="stop6870"
offset="0"
style="stop-color:#4a4a4a;stop-opacity:1" />
<stop
id="stop6872"
offset="1"
style="stop-color:#383838;stop-opacity:1" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient4806">
@@ -590,33 +555,6 @@
x="141"
y="408" />
</clipPath>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4217-1"
id="linearGradient6858"
x1="547.5"
y1="585.5"
x2="547.5"
y2="595.5"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient6874"
id="linearGradient6880"
x1="546.5"
y1="585.5"
x2="546.5"
y2="595.5"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient6897"
id="linearGradient6903"
x1="558.5"
y1="584.5"
x2="558.5"
y2="596.5"
gradientUnits="userSpaceOnUse" />
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath6003">
@@ -1479,13 +1417,6 @@
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
sodipodi:nodetypes="cc" />
</g>
<rect
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:1"
id="rect6617"
width="173"
height="16"
x="543"
y="584" />
<g
id="share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/images/down-arrow">
<rect
@@ -1628,149 +1559,38 @@
x="0" />
</g>
<g
id="src/libs/qmleditorwidgets/images/checkbox_unchecked">
<image
width="13"
id="src/libs/qmleditorwidgets/images/checkbox_indicator"
transform="translate(-26,0)">
<rect
style="display:inline;fill:#ffffff"
id="rect6738-1"
width="14"
height="13"
preserveAspectRatio="none"
style="image-rendering:optimizeSpeed"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAAFxJREFUeNpikZKSYiACsACxs7MzfkV79+4Fqfv///+7d+9wKRISEoKa B1T3798/XOqAslB1/8AAlzqIFEjdXzDApQ4iRYp5xLqP2vaSoA4SmATUXbhwgWD8AgQYACE8WYRh 3ceiAAAAAElFTkSuQmCC "
id="image6826"
x="543"
x="569"
y="584" />
<rect
y="584"
x="543"
height="13"
width="13"
id="rect6840"
style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-opacity:1" />
<rect
y="585.5"
x="544.5"
height="10"
width="10"
id="rect6842"
style="opacity:1;fill:url(#linearGradient6858);fill-opacity:1;stroke:url(#linearGradient6880);stroke-opacity:1" />
</g>
<rect
style="display:inline;opacity:1;fill:url(#linearGradient6903);fill-opacity:1;stroke:#1a1a1a;stroke-opacity:1"
id="src/libs/qmleditorwidgets/images/checkbox_unchecked_pressed"
width="12"
height="12"
x="556.5"
y="584.5" />
<g
id="src/libs/qmleditorwidgets/images/checkbox_checked">
<use
height="100%"
width="100%"
transform="translate(26,0)"
id="use6912"
xlink:href="#src/libs/qmleditorwidgets/images/checkbox_unchecked"
y="0"
x="0" />
<path
sodipodi:nodetypes="ccccccc"
inkscape:connector-curvature="0"
id="qmlpropertyeditor_checkbox_indicator"
d="m 571.87109,590.50735 1.5,-1.5 c 0.62624,0.82304 1.36869,1.69471 2.11049,3.5 0.88951,-2.5 2.40793,-5.00735 7.51842,-8.50735 -4,4.5 -5.5625,7.125 -6.0625,10.625 l -2.28125,1.84375 c -0.44837,-1.5873 -1.91768,-4.96759 -2.78516,-5.96142"
style="fill:#dbdbdb;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
d="m 571.87109,590.50735 1.5,-1.5 c 0.62624,0.82304 1.36869,1.69471 2.11049,3.5 0.88951,-2.5 2.40793,-5.00735 7.51842,-8.50735 -4,4.5 -5.5625,7.125 -6.0625,10.625 l -2.28125,1.84375"
style="fill:#000000"
id="path4396" />
</g>
<g
id="src/libs/qmleditorwidgets/images/checkbox_checked_pressed">
<use
height="100%"
width="100%"
transform="translate(27,0)"
id="use6918"
xlink:href="#src/libs/qmleditorwidgets/images/checkbox_unchecked_pressed"
y="0"
x="0" />
<use
height="100%"
width="100%"
transform="translate(14,0)"
id="use6916"
xlink:href="#qmlpropertyeditor_checkbox_indicator"
y="0"
x="0" />
</g>
<g
id="src/libs/qmleditorwidgets/images/checkbox_tr_unchecked">
<use
height="100%"
width="100%"
transform="translate(54,0)"
id="use4835"
xlink:href="#src/libs/qmleditorwidgets/images/checkbox_unchecked"
y="0"
x="0" />
<use
style="opacity:0.25"
height="100%"
width="100%"
transform="translate(-26,0)"
id="use4839"
xlink:href="#qmlpropertyeditor_checkbox_tr_indicator"
y="0"
x="0" />
</g>
<g
id="src/libs/qmleditorwidgets/images/checkbox_tr_unchecked_pressed">
<use
height="100%"
width="100%"
transform="translate(54,0)"
id="use4837"
xlink:href="#src/libs/qmleditorwidgets/images/checkbox_unchecked_pressed"
y="0"
x="0" />
<use
style="opacity:0.25"
height="100%"
width="100%"
transform="translate(-13,0)"
id="use4841"
xlink:href="#qmlpropertyeditor_checkbox_tr_indicator"
y="0"
x="0" />
</g>
<g
id="src/libs/qmleditorwidgets/images/checkbox_tr_checked">
<use
height="100%"
width="100%"
transform="translate(80,0)"
id="use4826"
xlink:href="#src/libs/qmleditorwidgets/images/checkbox_unchecked"
y="0"
x="0" />
id="src/libs/qmleditorwidgets/images/tr"
transform="translate(-25,0)">
<rect
y="584"
x="582"
height="13"
width="13"
id="rect6738-1-2"
style="display:inline;fill:#ffffff" />
<path
sodipodi:nodetypes="cccscsscccccccccsccccccccccccccsccccscccc"
inkscape:connector-curvature="0"
d="m 634.7863,588.98601 -0.3052,1.56048 -0.55626,0 c 0.01,-0.0689 0.0148,-0.13292 0.0148,-0.19199 0,-0.18378 -0.0394,-0.32653 -0.11814,-0.42827 -0.10502,-0.13784 -0.28223,-0.20675 -0.53165,-0.20675 -0.38068,0 -0.71378,0.16737 -0.9993,0.50211 -0.2855,0.33474 -0.44149,0.57814 -0.55636,1.17214 L 631.61506,594 l -1.74261,0 0.3926,-4.01028 -0.79747,0 0.17951,-0.98972 2.54009,0 -0.17722,0.97546 c 0.23957,-0.36428 0.51688,-0.63338 0.83193,-0.80731 0.31505,-0.17722 0.67604,-0.26583 1.08298,-0.26583 0.10174,0 0.22316,0.008 0.36428,0.0246 0.1444,0.0131 0.31012,0.0328 0.49718,0.0591 z m -10.16263,1.00371 0.17951,-0.98972 0.86858,0 0.27086,-2 1.74261,0 -0.27085,2 1.34169,0 -0.17952,0.98972 -1.34169,0 c -0.0466,1.08737 -0.26951,2.07452 -0.31112,3.151 0,0.0886 0.008,0.1526 0.0246,0.19198 0.0525,0.11158 0.17396,0.16737 0.36427,0.16737 0.21003,0 0.37905,-0.0706 0.50704,-0.21167 0.12799,-0.14112 0.2248,-0.35936 0.29043,-0.65472 l 0.73348,0 c -0.13127,0.52509 -0.34623,0.89429 -0.64487,1.1076 -0.29864,0.21003 -0.76301,0.31505 -1.39311,0.31505 -0.71871,0 -1.18472,-0.11322 -1.39803,-0.33966 -0.13783,-0.1444 -0.20675,-0.36756 -0.20675,-0.66948 l 0.3299,-3.03691 z"
style="font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:serif;-inkscape-font-specification:'serif Bold Italic';fill:#dbdbdb;fill-opacity:1"
id="qmlpropertyeditor_checkbox_tr_indicator" />
</g>
<g
id="src/libs/qmleditorwidgets/images/checkbox_tr_checked_pressed">
<use
height="100%"
width="100%"
transform="translate(80,0)"
id="use4828"
xlink:href="#src/libs/qmleditorwidgets/images/checkbox_unchecked_pressed"
y="0"
x="0" />
<use
height="100%"
width="100%"
transform="translate(13.00033,0)"
id="use4831"
xlink:href="#qmlpropertyeditor_checkbox_tr_indicator"
y="0"
x="0" />
d="m 593.78663,588.98601 -0.3052,1.56048 -0.55626,0 c 0.01,-0.0689 0.0148,-0.13292 0.0148,-0.19199 0,-0.18378 -0.0394,-0.32653 -0.11814,-0.42827 -0.10502,-0.13784 -0.28223,-0.20675 -0.53165,-0.20675 -0.38068,0 -0.71378,0.16737 -0.9993,0.50211 -0.2855,0.33474 -0.44149,0.57814 -0.55636,1.17214 L 590.61539,594 l -1.74261,0 0.3926,-4.01028 -0.79747,0 0.17951,-0.98972 2.54009,0 -0.17722,0.97546 c 0.23957,-0.36428 0.51688,-0.63338 0.83193,-0.80731 0.31505,-0.17722 0.67604,-0.26583 1.08298,-0.26583 0.10174,0 0.22316,0.008 0.36428,0.0246 0.1444,0.0131 0.31012,0.0328 0.49718,0.0591 z M 583.624,589.98972 583.80351,589 l 0.86858,0 0.27086,-2 1.74261,0 -0.27085,2 1.34169,0 -0.17952,0.98972 -1.34169,0 c -0.0466,1.08737 -0.26951,2.07452 -0.31112,3.151 0,0.0886 0.008,0.1526 0.0246,0.19198 0.0525,0.11158 0.17396,0.16737 0.36427,0.16737 0.21003,0 0.37905,-0.0706 0.50704,-0.21167 0.12799,-0.14112 0.2248,-0.35936 0.29043,-0.65472 l 0.73348,0 c -0.13127,0.52509 -0.34623,0.89429 -0.64487,1.1076 -0.29864,0.21003 -0.76301,0.31505 -1.39311,0.31505 -0.71871,0 -1.18472,-0.11322 -1.39803,-0.33966 -0.13783,-0.1444 -0.20675,-0.36756 -0.20675,-0.66948 l 0.3299,-3.03691 z"
style="fill:#000000"
id="path4400" />
</g>
</g>
<g

Before

Width:  |  Height:  |  Size: 204 KiB

After

Width:  |  Height:  |  Size: 198 KiB