Add option to apply style sheet coordinates

Enables the user to have pixel positions in the style sheet even if the
template does not use pixel positioning.

Also adds some more ordered properties to make the test case
deterministic.

Task-number: QDS-2208
Change-Id: I79b6af0c24539d1b9eb03dcf0fb52bb078d74afe
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Michael Brüning
2020-06-03 16:50:00 +02:00
committed by Thomas Hartmann
parent c6b06152c0
commit 083b02377d
7 changed files with 650 additions and 2 deletions

View File

@@ -70,7 +70,10 @@ private:
struct Options { struct Options {
bool preserveTextAlignment; bool preserveTextAlignment;
Options() : preserveTextAlignment(false) bool useStyleSheetPositions;
Options()
: preserveTextAlignment(false)
, useStyleSheetPositions(false)
{} {}
}; };

View File

@@ -383,6 +383,9 @@ PropertyNameList ModelToTextMerger::propertyOrder()
PropertyName("horizontalAlignment"), PropertyName("horizontalAlignment"),
PropertyName("verticalAlignment"), PropertyName("verticalAlignment"),
PropertyName("source"), PropertyName("source"),
PropertyName("lineHeight"),
PropertyName("lineHeightMode"),
PropertyName("wrapMode"),
PropertyName(), PropertyName(),
PropertyName("states"), PropertyName("states"),
PropertyName("transitions") PropertyName("transitions")

View File

@@ -391,6 +391,9 @@ void StylesheetMerger::parseTemplateOptions()
if (optionsNode.hasVariantProperty("preserveTextAlignment")) { if (optionsNode.hasVariantProperty("preserveTextAlignment")) {
m_options.preserveTextAlignment = optionsNode.variantProperty("preserveTextAlignment").value().toBool(); m_options.preserveTextAlignment = optionsNode.variantProperty("preserveTextAlignment").value().toBool();
} }
if (optionsNode.hasVariantProperty("useStyleSheetPositions")) {
m_options.useStyleSheetPositions = optionsNode.variantProperty("useStyleSheetPositions").value().toBool();
}
try { try {
RewriterTransaction transaction(m_templateView, "remove-options-node"); RewriterTransaction transaction(m_templateView, "remove-options-node");
optionsNode.destroy(); optionsNode.destroy();
@@ -490,7 +493,7 @@ void StylesheetMerger::merge()
if (!currentNode.hasParentProperty() || if (!currentNode.hasParentProperty() ||
!m_templateView->modelNodeForId(currentNode.parentProperty().parentModelNode().id()).isValid()) { !m_templateView->modelNodeForId(currentNode.parentProperty().parentModelNode().id()).isValid()) {
if (!hasPos) { //If template had postition retain it if (!hasPos && !m_options.useStyleSheetPositions) { //If template had postition retain it
removePropertyIfExists(templateNode, "x"); removePropertyIfExists(templateNode, "x");
removePropertyIfExists(templateNode, "y"); removePropertyIfExists(templateNode, "y");
} }

View File

@@ -3762,6 +3762,11 @@ void tst_TestCore::testMergeModelRewriter1_data()
QString buttonAbsoluteTemplateWithOptionsQmlContents = readQmlFromFile(QString(TESTSRCDIR) + "/../data/merging/ButtonAbsoluteTemplateWithOptions.qml"); QString buttonAbsoluteTemplateWithOptionsQmlContents = readQmlFromFile(QString(TESTSRCDIR) + "/../data/merging/ButtonAbsoluteTemplateWithOptions.qml");
QString buttonStyleUiWithOptionsExpectedQmlContents = readQmlFromFile(QString(TESTSRCDIR) + "/../data/merging/ButtonStyleWithOptions.ui.Expected.qml"); QString buttonStyleUiWithOptionsExpectedQmlContents = readQmlFromFile(QString(TESTSRCDIR) + "/../data/merging/ButtonStyleWithOptions.ui.Expected.qml");
QString testExportButtonTemplateQmlContents = readQmlFromFile(QString(TESTSRCDIR) + "/../data/merging//test_export_button_template.ui.qml");
QString testExportButtonStylesheetQmlContents = readQmlFromFile(QString(TESTSRCDIR) + "/../data/merging//test_export_button_stylesheet.ui.qml");
QString testExportButtonExpectedQmlContents = readQmlFromFile(QString(TESTSRCDIR) + "/../data/merging//test_export_button_expected.ui.qml");
QTest::newRow("Simple style replacement") << simpleTemplateQmlContents << simpleStyleQmlContents << simpleExpectedQmlContents; QTest::newRow("Simple style replacement") << simpleTemplateQmlContents << simpleStyleQmlContents << simpleExpectedQmlContents;
QTest::newRow("Complex style replacement") << complexTemplateQmlContents << complexStyleQmlContents << complexExpectedQmlContents; QTest::newRow("Complex style replacement") << complexTemplateQmlContents << complexStyleQmlContents << complexExpectedQmlContents;
QTest::newRow("Empty stylesheet") << emptyTemplateQmlContents << emptyStyleQmlContents << emptyExpectedQmlContents; QTest::newRow("Empty stylesheet") << emptyTemplateQmlContents << emptyStyleQmlContents << emptyExpectedQmlContents;
@@ -3775,6 +3780,7 @@ void tst_TestCore::testMergeModelRewriter1_data()
QTest::newRow("Button Designer styling") << buttonAbsoluteTemplateQmlContents << buttonStyleUiQmlContents << buttonStyleUiExpectedQmlContents; QTest::newRow("Button Designer styling") << buttonAbsoluteTemplateQmlContents << buttonStyleUiQmlContents << buttonStyleUiExpectedQmlContents;
QTest::newRow("Button Designer styling with options") << buttonAbsoluteTemplateWithOptionsQmlContents << buttonStyleUiQmlContents << buttonStyleUiWithOptionsExpectedQmlContents; QTest::newRow("Button Designer styling with options") << buttonAbsoluteTemplateWithOptionsQmlContents << buttonStyleUiQmlContents << buttonStyleUiWithOptionsExpectedQmlContents;
QTest::newRow("Button styling with info screen test case ") << testExportButtonTemplateQmlContents << testExportButtonStylesheetQmlContents << testExportButtonExpectedQmlContents;
} }

View File

@@ -0,0 +1,279 @@
import QtQuick 2.10
import QtQuick.Templates 2.1 as T
import Home 1.0
T.Button {
id: control
width: 296
height: 538
font: Constants.font
implicitWidth: Math.max(
background ? background.implicitWidth : 0,
contentItem.implicitWidth + leftPadding + rightPadding)
implicitHeight: Math.max(
background ? background.implicitHeight : 0,
contentItem.implicitHeight + topPadding + bottomPadding)
leftPadding: 4
rightPadding: 4
background: normalBG
contentItem: normalContent
Item {
id: normalBG
x: 0
y: 0
width: 296
height: 538
Image {
id: normalBGAsset
x: 0
y: 0
source: "assets/normalBG.png"
}
}
Item {
id: normalContent
x: 0
y: 42
width: 296
height: 428
Image {
id: normalContentAsset
x: 115
y: 40
source: "assets/normalContent.png"
}
Text {
id: normal_button_text
x: 59
y: 353
width: 241
height: 75
color: "#c1c1c1"
text: "Normal button text"
font.pixelSize: 30
lineHeight: 44
lineHeightMode: Text.FixedHeight
wrapMode: Text.WordWrap
}
Text {
id: normal_button_label
x: 113
y: 203
color: "#c1c1c1"
text: "Normal Button label"
font.pixelSize: 36
}
}
Item {
id: focusedBG
x: 0
y: 0
width: 296
height: 538
Image {
id: focusedBGAsset
x: 0
y: 0
source: "assets/focusedBG.png"
}
Item {
id: highlight_item_focused_1
x: 0
y: 0
width: 296
height: 196
}
Item {
id: highlight_item_focused_2
x: 39
y: 0
width: 197
height: 99
}
Image {
id: rectangle_focusedBG_1
x: 0
y: 0
source: "assets/rectangle_focusedBG_1.png"
}
Image {
id: highlight_img_focusedBG_1
x: 0
y: 0
source: "assets/highlight_img_focusedBG_1.png"
}
Image {
id: highlight_img_focused_1
x: 291
y: 7
source: "assets/highlight_img_focused_1.png"
}
}
Item {
id: focusedContent
x: 0
y: 42
width: 296
height: 428
Image {
id: focusedContentAsset
x: 115
y: 40
source: "assets/focusedContent.png"
}
Text {
id: focus_button_text
x: 59
y: 353
width: 241
height: 75
color: "#ffffff"
text: "Focus button text"
font.pixelSize: 30
lineHeight: 44
lineHeightMode: Text.FixedHeight
wrapMode: Text.WordWrap
}
Text {
id: focus_button_label
x: 113
y: 203
color: "#ba544d"
text: "Button label focus"
font.pixelSize: 36
}
}
Item {
id: pressedBG
x: 0
y: 0
width: 296
height: 538
Image {
id: pressedBGAsset
x: 0
y: 0
source: "assets/pressedBG.png"
}
Item {
id: highlight_item_pressed_1
x: 0
y: 0
width: 296
height: 196
}
Item {
id: highlight_item_pressed_2
x: 39
y: 0
width: 197
height: 99
}
Image {
id: rectangle_pressedBG_1
x: 0
y: 0
source: "assets/rectangle_pressedBG_1.png"
}
Image {
id: highlight_img_pressed_1
x: 0
y: 0
source: "assets/highlight_img_pressed_1.png"
}
Image {
id: highlight_img_pressed_2
x: 291
y: 7
source: "assets/highlight_img_pressed_2.png"
}
}
Image {
id: defaultBG
x: 35
y: 339
source: "assets/defaultBG.png"
}
states: [
State {
name: "normal"
when: !control.down && !control.focus
PropertyChanges {
target: focusedBG
visible: false
}
PropertyChanges {
target: focusedContent
visible: false
}
PropertyChanges {
target: pressedBG
visible: false
}
},
State {
name: "press"
when: control.down && control.focus
PropertyChanges {
target: control
contentItem: focusedContent
}
PropertyChanges {
target: normalBG
visible: false
}
PropertyChanges {
target: normalContent
visible: false
}
PropertyChanges {
target: pressedBG
visible: true
}
PropertyChanges {
target: focusedContent
visible: true
}
PropertyChanges {
target: control
background: pressedBG
}
}
]
}

View File

@@ -0,0 +1,255 @@
import QtQuick 2.10
Item {
id: info_screen
width: 296
height: 538
Item {
id: normalBG
x: 0
y: 0
width: 296
height: 538
Image {
id: normalBGAsset
x: 0
y: 0
source: "assets/normalBG.png"
}
}
Item {
id: normalContent
x: 0
y: 42
width: 296
height: 428
Image {
id: normalContentAsset
x: 115
y: 40
source: "assets/normalContent.png"
}
Text {
id: normal_button_text
x: 59
y: 353
width: 241
height: 75
color: "#C1C1C1"
text: "Normal button text"
font.pixelSize: 30
lineHeightMode: Text.FixedHeight
lineHeight: 44
wrapMode: Text.WordWrap
}
Text {
id: normal_button_label
x: 113
y: 203
color: "#C1C1C1"
text: "Normal Button label"
font.pixelSize: 36
}
}
Item {
id: pressedBG
x: 0
y: 0
width: 296
height: 538
Image {
id: pressedBGAsset
x: 0
y: 0
source: "assets/pressedBG.png"
}
Item {
id: highlight_item_pressed_1
x: 0
y: 0
width: 296
height: 196
}
Item {
id: highlight_item_pressed_2
x: 39
y: 0
width: 197
height: 99
}
Image {
id: rectangle_pressedBG_1
x: 0
y: 0
source: "assets/rectangle_pressedBG_1.png"
}
Image {
id: highlight_img_pressed_1
x: 0
y: 0
source: "assets/highlight_img_pressed_1.png"
}
Image {
id: highlight_img_pressed_2
x: 291
y: 7
source: "assets/highlight_img_pressed_2.png"
}
}
Item {
id: focusedBG
x: 0
y: 0
width: 296
height: 538
Image {
id: focusedBGAsset
x: 0
y: 0
source: "assets/focusedBG.png"
}
Item {
id: highlight_item_focused_1
x: 0
y: 0
width: 296
height: 196
}
Item {
id: highlight_item_focused_2
x: 39
y: 0
width: 197
height: 99
}
Image {
id: rectangle_focusedBG_1
x: 0
y: 0
source: "assets/rectangle_focusedBG_1.png"
}
Image {
id: highlight_img_focusedBG_1
x: 0
y: 0
source: "assets/highlight_img_focusedBG_1.png"
}
Image {
id: highlight_img_focused_1
x: 291
y: 7
source: "assets/highlight_img_focused_1.png"
}
}
Item {
id: focusedContent
x: 0
y: 42
width: 296
height: 428
Image {
id: focusedContentAsset
x: 115
y: 40
source: "assets/focusedContent.png"
}
Text {
id: focus_button_text
x: 59
y: 353
width: 241
height: 75
color: "#FFFFFF"
text: "Focus button text"
font.pixelSize: 30
lineHeightMode: Text.FixedHeight
lineHeight: 44
wrapMode: Text.WordWrap
}
Text {
id: focus_button_label
x: 113
y: 203
color: "#BA544D"
text: "Button label focus"
font.pixelSize: 36
}
}
Item {
id: disabledBG
x: 0
y: 0
width: 296
height: 533
Image {
id: disabledBGAsset
x: 0
y: 0
source: "assets/disabledBG.png"
}
}
Item {
id: disabledContent
x: 0
y: 0
width: 296
height: 538
Image {
id: disabledContentAsset
x: 115
y: 82
source: "assets/disabledContent.png"
}
Text {
id: disabled_button_text
x: 59
y: 395
width: 241
height: 75
color: "#413E3C"
text: "Disabled button text"
font.pixelSize: 30
lineHeightMode: Text.FixedHeight
lineHeight: 44
wrapMode: Text.WordWrap
}
Text {
id: disabled_button_label
x: 109
y: 242
color: "#413E3C"
text: "Disabled button label"
font.pixelSize: 40
}
}
Image {
id: defaultBG
x: 35
y: 339
source: "assets/defaultBG.png"
}
}

View File

@@ -0,0 +1,99 @@
import QtQuick 2.10
import QtQuick.Templates 2.1 as T
import Home 1.0
T.Button {
id: control
width: 296
height: 538
font: Constants.font
implicitWidth: Math.max(
background ? background.implicitWidth : 0,
contentItem.implicitWidth + leftPadding + rightPadding)
implicitHeight: Math.max(
background ? background.implicitHeight : 0,
contentItem.implicitHeight + topPadding + bottomPadding)
leftPadding: 4
rightPadding: 4
background: normalBG
contentItem: normalContent
Item {
id: normalBG
}
Item {
id: normalContent
}
Item {
id: focusedBG
}
Item {
id: focusedContent
}
Item {
id: pressedBG
}
Item {
id: defaultBG
}
states: [
State {
name: "normal"
when: !control.down && !control.focus
PropertyChanges {
target: focusedBG
visible: false
}
PropertyChanges {
target: focusedContent
visible: false
}
PropertyChanges {
target: pressedBG
visible: false
}
},
State {
name: "press"
when: control.down && control.focus
PropertyChanges {
target: control
contentItem: focusedContent
}
PropertyChanges {
target: normalBG
visible: false
}
PropertyChanges {
target: normalContent
visible: false
}
PropertyChanges {
target: pressedBG
visible: true
}
PropertyChanges {
target: focusedContent
visible: true
}
PropertyChanges {
target: control
background: pressedBG
}
}
]
QtObject {
id: qds_stylesheet_merger_options
property bool useStyleSheetPositions: true
}
}