From e452e9dd8c2fe4b83f957a7ffe403e46f244ee39 Mon Sep 17 00:00:00 2001
From: Mathias Malmqvist <mathias.malmqvist@nokia.com>
Date: Tue, 26 Oct 2010 18:34:21 +0200
Subject: [PATCH] Started moving styling out of SpinBox and Switch. Tidied the
code.
Reviewed-by: Leonardo Sobral Cunha <leo.cunha@nokia.com>
---
Gallery.qml | 2 +-
SpinBox.qml | 170 ++++++++++----------------------
Switch.qml | 143 +++++----------------------
behaviors/ButtonBehavior.qml | 8 +-
styles/default/SpinBoxStyle.qml | 74 ++++++++++++++
styles/default/SwitchStyle.qml | 94 ++++++++++++++++++
6 files changed, 249 insertions(+), 242 deletions(-)
create mode 100644 styles/default/SpinBoxStyle.qml
create mode 100644 styles/default/SwitchStyle.qml
diff --git a/Gallery.qml b/Gallery.qml
index d323d9de9..9a52a3a11 100644
--- a/Gallery.qml
+++ b/Gallery.qml
@@ -88,7 +88,7 @@ Rectangle {
anchors.centerIn: parent
}
}
- contents: Item {anchors.fill:parent; anchors.leftMargin: 40}
+ content: Item {anchors.fill:parent; anchors.leftMargin: 40}
}
Slider {
handle: BorderImage{source:"images/shinybutton_normal.png";
diff --git a/SpinBox.qml b/SpinBox.qml
index 9a285e401..dee5d3117 100644
--- a/SpinBox.qml
+++ b/SpinBox.qml
@@ -1,32 +1,34 @@
import Qt 4.7
+import "./styles/default" as DefaultStyles
Item {
- id:spinbox
+ id: spinbox
width: 200
height: 32
- property Component background : defaultbackground
- property Component contents : defaultContents
- property Component up: defaultUp
- property Component down: defaultDown
-
- property bool upPressed : mouseup.pressed
- property bool downPressed : mousedown.pressed
- property bool upHovered: mouseup.containsMouse
- property bool downHovered: mousedown.containsMouse
-
- property alias hover : mousearea.containsMouse
+ property real value: 0.0
+ property real maximum: 99
+ property real minimum: 0
+ property real singlestep: 1
property bool upEnabled: value != maximum;
property bool downEnabled: value != minimum;
- property real value : 0.0
- property real maximum: 99
- property real minimum: 0
- property real singlestep: 1
+ property alias upPressed: mouseUp.pressed
+ property alias downPressed: mouseDown.pressed
+ property alias upHovered: mouseUp.containsMouse
+ property alias downHovered: mouseDown.containsMouse
+ property alias hover: mouseArea.containsMouse
+
+ property color backgroundColor: "#fff";
+ property color foregroundColor: "#222";
- property string prefix
+ property Component background: defaultStyle.background
+ property Component content: defaultStyle.content
+ property Component up: defaultStyle.up
+ property Component down: defaultStyle.down
+ DefaultStyles.SpinBoxStyle { id: defaultStyle }
function increment() {
value += singlestep
@@ -52,143 +54,73 @@ Item {
input.text = value
}
- property string icon
- property color backgroundColor: "#fff";
- property color foregroundColor: "#222";
-
// background
Loader {
- id:backgroundComponent
- anchors.fill:parent
- sourceComponent:background
+ id: backgroundComponent
+ anchors.fill: parent
+ sourceComponent: background
}
- // Contents
+ // Content
Loader {
- id:contentsComponent
- anchors.fill:parent
- sourceComponent:contents
+ id: contentComponent
+ anchors.fill: parent
+ sourceComponent: content
onLoaded: {
item.parent = spinbox
}
}
MouseArea {
- id:mousearea
- anchors.fill:parent
- hoverEnabled:true
+ id: mouseArea
+ anchors.fill: parent
+ hoverEnabled: true
}
TextInput {
- id:input
- font.pixelSize:14
- anchors.margins:5
- anchors.fill:contentsComponent.item
- selectByMouse:true
- text:spinbox.value
- validator:DoubleValidator{bottom: 11; top: 31}
+ id: input
+ font.pixelSize: 14
+ anchors.margins: 5
+ anchors.fill: contentComponent.item
+ selectByMouse: true
+ text: spinbox.value
+ validator: DoubleValidator { bottom: 11; top: 31 }
onTextChanged: { spinbox.setValue(text); }
- color:foregroundColor
- opacity:parent.enabled ? 1 : 0.5
- }
-
- Component {
- id:defaultbackground
- Item {
- Rectangle{
- color:backgroundColor
- radius: 5
- x:1
- y:1
- width:parent.width-2
- height:parent.height-2
- }
-
- BorderImage {
- anchors.fill:parent
- id: backgroundimage
- smooth:true
- source: "images/lineedit_normal.png"
- width: 80; height: 24
- border.left: 6; border.top: 6
- border.right: 50; border.bottom: 6
- }
- }
+ color: foregroundColor
+ opacity: parent.enabled ? 1 : 0.5
}
Loader {
- id:upButton
- sourceComponent:up
- MouseArea{
- id:mouseup
- anchors.fill:upButton.item
+ id: upButton
+ sourceComponent: up
+ MouseArea {
+ id: mouseUp
+ anchors.fill: upButton.item
onClicked: increment()
- Timer { running:parent.pressed ; interval:100 ; repeat:true ; onTriggered: increment() }
+ Timer { running: parent.pressed; interval: 100 ; repeat: true ; onTriggered: increment() }
}
onLoaded: {
item.parent = spinbox
- mouseup.parent = item
+ mouseUp.parent = item
item.x = spinbox.width-item.width
item.y = 0
}
}
Loader {
- id:downButton
- sourceComponent:down
+ id: downButton
+ sourceComponent: down
MouseArea {
- id:mousedown
- anchors.fill:downButton.item
+ id: mouseDown
+ anchors.fill: downButton.item
onClicked: decrement()
- Timer { running:parent.pressed ; interval:100 ; repeat:true ; onTriggered: decrement() }
+ Timer { running: parent.pressed; interval: 100 ; repeat: true ; onTriggered: decrement() }
}
onLoaded: {
item.parent = spinbox
- mousedown.parent = item
+ mouseDown.parent = item
item.x = spinbox.width-item.width
item.y = spinbox.height - item.height
}
}
-
- Component {
- id:defaultUp
- Item {
- anchors.right:parent.right
- anchors.top:parent.top
- width:24
- height:parent.height/2
- Image{
- anchors.left: parent.left;
- anchors.top:parent.top;
- anchors.topMargin:7
- opacity: (upEnabled && enabled) ? (upPressed ? 1 : 0.8) : 0.3
- source:"images/spinbox_up.png"
- }
- }
- }
- Component {
- id:defaultDown
- Item {
- anchors.right:parent.right
- anchors.bottom:parent.bottom
- width:24
- height:parent.height/2
- Image{
- anchors.left: parent.left;
- anchors.bottom:parent.bottom;
- anchors.bottomMargin:7
- opacity: (downEnabled && enabled) ? (downPressed ? 1 : 0.8) : 0.3
- source:"images/spinbox_down.png"
- }
- }
- }
- Component {
- id:defaultContents
- Item{
- anchors.fill:parent;
- anchors.leftMargin: 4;
- anchors.topMargin: 2;
- anchors.rightMargin: 24
- }
- }
}
diff --git a/Switch.qml b/Switch.qml
index fccc25dd0..6624ba521 100644
--- a/Switch.qml
+++ b/Switch.qml
@@ -1,7 +1,8 @@
import Qt 4.7
+import "./styles/default" as DefaultStyles
Item {
- id:button
+ id: toggleSwitch // "switch" is a reserved word
width: Math.max(100, labelComponent.item.width + 2*10)
height: Math.max(32, labelComponent.item.height + 2*4)
@@ -13,9 +14,6 @@ Item {
property bool checkable: true
property bool checked: false
- property Component background : defaultbackground
- property Component content : defaultlabel
-
property string text
property string icon
property int labelSpacing:8
@@ -23,141 +21,48 @@ Item {
property color backgroundColor: checked ? "#cef" : "#fff"
property color foregroundColor: "#333"
- property alias font: fontcontainer.font
+// property url fontFile: ""
+// FontLoader { id: font; source: fontFile }
- Text {id:fontcontainer; font.pixelSize:14} // Workaround since font is not a declarable type (bug?)
+ property Component background : defaultStyle.background
+ property Component content : defaultStyle.content
+ DefaultStyles.SwitchStyle { id: defaultStyle }
- // background
- Loader {
- id:backgroundComponent
- anchors.fill:parent
- sourceComponent:background
+ Loader { // background
+ id: backgroundComponent
+ anchors.fill: parent
+ sourceComponent: background
opacity: enabled ? 1 : 0.8
}
- // content
- Loader {
- id:labelComponent
+ Loader { // content
+ id: labelComponent
anchors.left: backgroundComponent.right
anchors.leftMargin: labelSpacing
anchors.verticalCenter: parent.verticalCenter
- sourceComponent:content
+ sourceComponent: content
}
MouseArea {
- id:mousearea
- enabled: button.enabled
+ id: mousearea
+ enabled: toggleSwitch.enabled
hoverEnabled: true
anchors.fill: parent
onMousePositionChanged: {
- if (pressed ){
+ if(pressed) {
+ // Implement me
}
}
- onPressed: button.pressed = true
- onEntered: if(pressed && enabled) button.pressed = true // handles clicks as well
- onExited: button.pressed = false
+ onPressed: toggleSwitch.pressed = true // needed when hover is enabled
+ onEntered: if(pressed && enabled) toggleSwitch.pressed = true
+ onExited: toggleSwitch.pressed = false
onReleased: {
- if (button.pressed && enabled) { // No click if release outside area
- button.pressed = false
+ if(toggleSwitch.pressed && enabled) { // No click if release outside area
+ toggleSwitch.pressed = false
if (checkable)
checked = !checked;
- button.clicked()
- }
- }
- }
-
- Component {
- id:defaultbackground
- Item {
-
- Rectangle{
- color:backgroundColor
- radius: 5
- x:1
- y:1
- width:parent.width-2
- height:parent.height-2
- }
-
- BorderImage {
- anchors.fill:parent
- id: backgroundimage
- smooth:true
- source: "images/lineedit_normal.png"
- width: 80 ; height: 24
- border.left: 6; border.top: 3
- border.right: 6; border.bottom: 3
- }
-
- Text{
- anchors.right:parent.right
- anchors.verticalCenter: parent.verticalCenter
- horizontalAlignment: Text.Center
- width: parent.width/2
- font.pixelSize: 14
- font.bold: true
- color:"#aaa"
- text:"OFF"
- style: "Sunken"
- styleColor: "white"
- opacity: checked ? 0 : (enabled ? 1 : 0.5)
- Behavior on opacity { NumberAnimation{ duration: 60}}
- }
-
- Text{
- anchors.left: parent.left
- anchors.verticalCenter: parent.verticalCenter
- width: parent.width/2
- horizontalAlignment: Text.Center
- font.pixelSize: 14
- font.bold: true
- color:"#aaa"
- text:"ON"
- style: "Sunken"
- styleColor: "white"
- opacity: checked ? (enabled ? 1 :0.5) : 0
- Behavior on opacity { NumberAnimation{ duration: 60}}
- }
-
-
- BorderImage {
- anchors.top:parent.top
- anchors.bottom: parent.bottom
- x: checked ? parent.width-width : 0
- width:parent.width/2
- id: buttonimage
- smooth:true
- source: pressed ? "images/switch_pressed.png" : "images/switch_normal.png"
- height: parent.height
- border.left: 4; border.top: 4
- border.right: 4; border.bottom: 4
- Behavior on x { NumberAnimation { duration: 60 ; easing.type:"InOutCirc"}
- }
- }
- }
- }
-
- Component {
- id:defaultlabel
- Item {
- width:layout.width
- height:layout.height
-
- anchors.bottom:parent.bottom
- anchors.margins:4
- Row {
- spacing:4
- anchors.bottom:parent.bottom
- id:layout
- Image { source:button.icon}
- Text {
- color:button.foregroundColor;
- opacity: (enabled ? 1 : 0.5)
- font.pixelSize:14
- text:button.text
- y:4
- }
+ toggleSwitch.clicked()
}
}
}
diff --git a/behaviors/ButtonBehavior.qml b/behaviors/ButtonBehavior.qml
index 5dcebbae5..e4a147d7e 100644
--- a/behaviors/ButtonBehavior.qml
+++ b/behaviors/ButtonBehavior.qml
@@ -4,15 +4,17 @@ Item {
id: behavior
signal clicked
- property bool pressed: false
+ property bool pressed: false // Can't be alias of mouseArea.pressed because the latter is read-only
property bool checkable: false
property bool checked: false
property bool triState: false
MouseArea {
- id: mousearea
+ id: mouseArea
anchors.fill: parent
- onEntered: if(enabled) behavior.pressed = true // handles clicks as well
+ hoverEnabled: true
+ onPressed: behavior.pressed = true // needed when hover is enabled
+ onEntered: if(pressed && enabled) behavior.pressed = true
onExited: behavior.pressed = false
onReleased: {
if(behavior.pressed && behavior.enabled) { // No click if release outside area
diff --git a/styles/default/SpinBoxStyle.qml b/styles/default/SpinBoxStyle.qml
new file mode 100644
index 000000000..4ab1b12b6
--- /dev/null
+++ b/styles/default/SpinBoxStyle.qml
@@ -0,0 +1,74 @@
+import Qt 4.7
+
+QtObject {
+ property Component background: defaultBackground
+ property Component content: defaultContent
+ property Component up: defaultUp
+ property Component down: defaultDown
+
+ property list<Component> elements: [
+ Component {
+ id: defaultBackground
+ Item {
+ Rectangle {
+ x: 1
+ y: 1
+ width: parent.width-2
+ height: parent.height-2
+ color: backgroundColor
+ radius: 5
+ }
+
+ BorderImage {
+ anchors.fill: parent
+ id: backgroundimage
+ smooth: true
+ source: "../../images/lineedit_normal.png"
+ border.left: 6; border.top: 6
+ border.right: 50; border.bottom: 6
+ }
+ }
+ },
+ Component {
+ id: defaultUp
+ Item {
+ anchors.right: parent.right
+ anchors.top: parent.top
+ width: 24
+ height: parent.height/2
+ Image {
+ anchors.left: parent.left;
+ anchors.top: parent.top;
+ anchors.topMargin: 7
+ opacity: (upEnabled && enabled) ? (upPressed ? 1 : 0.8) : 0.3
+ source: "../../images/spinbox_up.png"
+ }
+ }
+ },
+ Component {
+ id: defaultDown
+ Item {
+ anchors.right: parent.right
+ anchors.bottom: parent.bottom
+ width: 24
+ height: parent.height/2
+ Image {
+ anchors.left: parent.left;
+ anchors.bottom: parent.bottom;
+ anchors.bottomMargin: 7
+ opacity: (downEnabled && enabled) ? (downPressed ? 1 : 0.8) : 0.3
+ source: "../../images/spinbox_down.png"
+ }
+ }
+ },
+ Component {
+ id: defaultContent
+ Item {
+ anchors.fill: parent;
+ anchors.leftMargin: 4;
+ anchors.topMargin: 2;
+ anchors.rightMargin: 24
+ }
+ }
+ ]
+}
diff --git a/styles/default/SwitchStyle.qml b/styles/default/SwitchStyle.qml
new file mode 100644
index 000000000..94d218900
--- /dev/null
+++ b/styles/default/SwitchStyle.qml
@@ -0,0 +1,94 @@
+import Qt 4.7
+
+QtObject {
+ property Component background: defaultBackground
+ property Component content: defaultContent
+
+ property list<Component> elements: [
+ Component {
+ id: defaultBackground
+ Item {
+ Rectangle {
+ x: 1
+ y: 1
+ width: parent.width-2
+ height: parent.height-2
+ radius: 5
+ color: backgroundColor
+ }
+ BorderImage {
+ anchors.fill: parent
+ id: backgroundimage
+ smooth: true
+ source: "../../images/lineedit_normal.png"
+ border.left: 6; border.top: 3
+ border.right: 6; border.bottom: 3
+ }
+ Text {
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ horizontalAlignment: Text.Center
+ width: parent.width/2
+ font.pixelSize: 14
+ font.bold: true
+ color: "#aaa"
+ text: "OFF"
+ style: "Sunken"
+ styleColor: "white"
+ opacity: checked ? 0 : (enabled ? 1 : 0.5)
+ Behavior on opacity { NumberAnimation { duration: 60 } }
+ }
+ Text {
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ width: parent.width/2
+ horizontalAlignment: Text.Center
+ font.pixelSize: 14
+ font.bold: true
+ color: "#aaa"
+ text: "ON"
+ style: "Sunken"
+ styleColor: "white"
+ opacity: checked ? (enabled ? 1 : 0.5) : 0
+ Behavior on opacity { NumberAnimation { duration: 60 } }
+ }
+ BorderImage {
+ anchors.top: parent.top
+ anchors.bottom: parent.bottom
+ x: checked ? parent.width-width : 0
+ width: parent.width/2
+ smooth: true
+ source: pressed ? "../../images/switch_pressed.png" : "../../images/switch_normal.png"
+ height: parent.height
+ border.left: 4; border.top: 4
+ border.right: 4; border.bottom: 4
+ Behavior on x { NumberAnimation { duration: 60 ; easing.type: "InOutCirc"}
+ }
+ }
+ }
+ },
+ Component {
+ id: defaultContent
+ Item {
+ width: layout.width
+ height: layout.height
+
+ anchors.bottom: parent.bottom
+ anchors.margins: 4
+ Row {
+ spacing: 4
+ anchors.bottom: parent.bottom
+ id: layout
+ Image { source: toggleSwitch.icon }
+ Text {
+ color: toggleSwitch.foregroundColor;
+ opacity: (enabled ? 1 : 0.5)
+ font.pixelSize: 14
+ text: toggleSwitch.text
+ y: 4
+ }
+ }
+ }
+ }
+ ]
+}
--
GitLab