From 6d19c78a557bd157670573a56bf6560d6c01ff1b Mon Sep 17 00:00:00 2001 From: Mathias Malmqvist Date: Mon, 25 Oct 2010 20:12:53 +0200 Subject: [PATCH] Started moving visuals definitions out of the generic files Merge-request: 1 Reviewed-by: Jens Bache-Wiig --- .gitignore | 95 +++++++++++++++++ Button.qml | 116 +++++---------------- ButtonBlock.qml | 39 +++++++ CheckBox.qml | 84 +++------------ RadioButton.qml | 13 +++ behaviors/ButtonBehavior.qml | 26 +++++ styles/default/ButtonBlock/ButtonStyle.qml | 61 +++++++++++ styles/default/ButtonStyle.qml | 61 +++++++++++ styles/default/CheckBoxStyle.qml | 70 +++++++++++++ styles/default/RadioButtonStyle.qml | 35 +++++++ styles/default/images/button_normal.png | Bin 0 -> 916 bytes styles/default/images/button_pressed.png | Bin 0 -> 803 bytes 12 files changed, 437 insertions(+), 163 deletions(-) create mode 100644 .gitignore create mode 100644 ButtonBlock.qml create mode 100644 RadioButton.qml create mode 100644 behaviors/ButtonBehavior.qml create mode 100644 styles/default/ButtonBlock/ButtonStyle.qml create mode 100644 styles/default/ButtonStyle.qml create mode 100644 styles/default/CheckBoxStyle.qml create mode 100644 styles/default/RadioButtonStyle.qml create mode 100644 styles/default/images/button_normal.png create mode 100644 styles/default/images/button_pressed.png diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..39f08cf8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,95 @@ +# This file is used to ignore files which are generated in the Qt build system +# ---------------------------------------------------------------------------- + + +callgrind.out.* +pcviewer.cfg +*~ +*.a +*.la +*.core +*.moc +*.o +*.obj +*.orig +*.swp +*.rej +*.so +*.pbxuser +*.mode1 +*.mode1v3 +*_pch.h.cpp +*_resource.rc +.#* +*.*# +.qmake.cache +.qmake.vars +*.prl +tags +.DS_Store +*.debug +Makefile* +*.prl +*.app +*.pro.user +*.qmlproject.user* +moc_*.cpp +ui_*.h +qrc_*.cpp + +# xemacs temporary files +*.flc + +# Vim temporary files +.*.swp + +# Visual Studio generated files +*.ib_pdb_index +*.idb +*.ilk +*.pdb +*.sln +*.suo +*.vcproj +*vcproj.*.*.user +*.ncb + +# MinGW generated files +*.Debug +*.Release + +.pch +.rcc + +# Symbian build system generated files +# --------------------- + +ABLD.BAT +bld.inf +*.mmp +*.mk +*.rss +*.loc +!s60main.rss +*.pkg +plugin_commonU.def +*.qtplugin +*.sis +*.sisx + +# Generated by abldfast.bat from devtools. +.abldsteps.* + +# Carbide project files +# --------------------- +.project +.cproject +.make.cache + +qtc-debugging-helper + +#svn file +*/.svn/* + +# linux shared libraries +*.so* diff --git a/Button.qml b/Button.qml index 410980d1..fef02c2e 100644 --- a/Button.qml +++ b/Button.qml @@ -1,110 +1,42 @@ import Qt 4.7 +import "./behaviors" +import "./styles/default" as DefaultStyles Item { - id:button + id: button - width: Math.max(100, labelComponent.item.width + 2*10) - height: Math.max(32, labelComponent.item.height + 2*4) + width: contentComponent.item.width + height: contentComponent.item.height - clip:true signal clicked - - property alias hover: mousearea.containsMouse - property bool pressed: false - property bool checkable: false - property bool checked: false - - property Component background : defaultbackground - property Component content : defaultlabel + property alias pressed: behavior.pressed + property alias checkable: behavior.checkable // button toggles between checked and !checked + property alias checked: behavior.checked property string text - property string icon - - property color backgroundColor: "#fff"; - property color foregroundColor: "#333"; + property url icon - property alias font: fontcontainer.font - - Text {id:fontcontainer; font.pixelSize:14} // Workaround since font is not a declarable type (bug?) - - // background - Loader { - id:backgroundComponent - anchors.fill:parent - sourceComponent:background - opacity: enabled ? 1 : 0.8 - } + property Component background: defaultStyle.background + property Component content: defaultStyle.content - // content - Loader { - id:labelComponent - anchors.centerIn: parent - sourceComponent:content - } + property color backgroundColor: "#fff"; + property color foregroundColor: "#222"; - MouseArea { - id:mousearea - enabled: button.enabled - hoverEnabled: true + DefaultStyles.ButtonStyle { id: defaultStyle } + ButtonBehavior { + id: behavior anchors.fill: parent - onPressed: button.pressed = true - onEntered: if(pressed && enabled) button.pressed = true // handles clicks as well - onExited: button.pressed = false - onReleased: { - if (button.pressed && enabled) { // No click if release outside area - button.pressed = false - if (checkable) - checked = !checked; - button.clicked() - } - } + onClicked: 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: pressed ? "images/button_pressed.png" : "images/button_normal.png" - width: 80; height: 24 - border.left: 3; border.top: 3 - border.right: 3; border.bottom: 3 - } - } + Loader { // background + anchors.fill: parent + sourceComponent: background } - Component { - id:defaultlabel - Item { - width:layout.width - height:layout.height - anchors.margins:4 - Row { - spacing:6 - anchors.centerIn:parent - id:layout - Image { source:button.icon; anchors.verticalCenter:parent.verticalCenter} - Text { - id:label - font:button.font - color:button.foregroundColor; - anchors.verticalCenter: parent.verticalCenter ; - text:button.text - opacity:parent.enabled ? 1 : 0.5 - } - } - } + Loader { // content + id: contentComponent + anchors.centerIn: parent + sourceComponent: content } } diff --git a/ButtonBlock.qml b/ButtonBlock.qml new file mode 100644 index 00000000..76db6e53 --- /dev/null +++ b/ButtonBlock.qml @@ -0,0 +1,39 @@ +import Qt 4.7 + +Rectangle { + id: block + width: grid.width+20 + height: grid.height+20 + color: "blue" + + signal clicked + property alias model: repeater.model + property Component buttonTemplate: Button { checkable: true } +// property Component customStyle: null +// property list selected +// property variant selected: new Array(); + + Grid { + id: grid + columns: 3 + anchors.centerIn: parent + Repeater { + id: repeater + delegate: Loader { + sourceComponent: buttonTemplate + onLoaded: { +// if(customStyle != null) { item.background = customStyle.background; item.content = customStyle.content } + if(model.text) item.text = model.text + if(model.icon) item.icon = model.icon + if(model.enabled) item.enabled = model.enabled + if(model.checkable) item.checkable = model.checkable + } + Connections { + target: item + onClicked: { print("Clicked " + index); block.clicked(index) } +// onCheckedChanged: { selected.push(item); print(selected.length) } + } + } + } + } +} diff --git a/CheckBox.qml b/CheckBox.qml index f9f1d238..0754bad0 100644 --- a/CheckBox.qml +++ b/CheckBox.qml @@ -1,71 +1,13 @@ -import Qt 4.7 - -Button{ - id:button - - checkable: true - background: defaultbackground - content: defaultlabel - - Component { - id:defaultbackground - Item { - Rectangle{ - anchors.fill:backgroundimage - color:backgroundColor - radius: 5 - x:1 - y:1 - width:parent.width-2 - height:parent.height-2 - } - - BorderImage { - id: backgroundimage - smooth:true - anchors.left:parent.left - anchors.top:parent.top - anchors.bottom: parent.bottom - - source: "images/lineedit_normal.png" - width: parent.height; height: parent.height - border.left: 6; border.top: 3 - border.right: 6; border.bottom: 3 - } - - Image { - opacity:checked ? (enabled ? 1:0.5) : 0 - source:"images/checkbox_check.png" - Behavior on opacity{NumberAnimation {duration: 150; easing.type:Easing.OutCubic}} - anchors.centerIn:backgroundimage - anchors.verticalCenterOffset:1 - anchors.horizontalCenterOffset:1 - } - } - } - - 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 - Item{ width:parent.height + 8 ; height:1} - Image { source:button.icon} - Text { - color:button.foregroundColor; - opacity:enabled ? 1 : 0.5 - font.pixelSize:14 - text:button.text - y:4 - } - } - } - } -} +import Qt 4.7 +import "./behaviors" +import "./styles/default" as DefaultStyles + +Button { + id: button + + background: defaultStyle.background + content: defaultStyle.content + checkable: true + + DefaultStyles.CheckBoxStyle { id: defaultStyle } +} diff --git a/RadioButton.qml b/RadioButton.qml new file mode 100644 index 00000000..50c2f084 --- /dev/null +++ b/RadioButton.qml @@ -0,0 +1,13 @@ +import Qt 4.7 +import "./behaviors" +import "./styles/default" as DefaultStyles + +Button { + id: button + + background: defaultStyle.background + content: defaultStyle.content + checkable: true + + DefaultStyles.RadioButtonStyle { id: defaultStyle } +} diff --git a/behaviors/ButtonBehavior.qml b/behaviors/ButtonBehavior.qml new file mode 100644 index 00000000..5dcebbae --- /dev/null +++ b/behaviors/ButtonBehavior.qml @@ -0,0 +1,26 @@ +import Qt 4.7 + +Item { + id: behavior + + signal clicked + property bool pressed: false + property bool checkable: false + property bool checked: false + property bool triState: false + + MouseArea { + id: mousearea + anchors.fill: parent + onEntered: if(enabled) behavior.pressed = true // handles clicks as well + onExited: behavior.pressed = false + onReleased: { + if(behavior.pressed && behavior.enabled) { // No click if release outside area + behavior.pressed = false + if(behavior.checkable) + behavior.checked = !behavior.checked; + behavior.clicked() + } + } + } +} diff --git a/styles/default/ButtonBlock/ButtonStyle.qml b/styles/default/ButtonBlock/ButtonStyle.qml new file mode 100644 index 00000000..bec7582b --- /dev/null +++ b/styles/default/ButtonBlock/ButtonStyle.qml @@ -0,0 +1,61 @@ +import Qt 4.7 + +QtObject { + property Component background: defaultBackground + property Component content: defaultContent + + property list elements: [ + Component { + id: defaultBackground + Item { + Rectangle{ + x: 1; y: 1 + width: parent.width-2 + height: parent.height-2 + color: button.backgroundColor + radius: 5 + } + + BorderImage { + anchors.fill: parent + smooth: true + source: button.pressed ? "images/button_pressed.png" : "images/button_normal.png" + border.left: 6; border.top: 6 + border.right: 6; border.bottom: 6 + } + + Rectangle { + anchors.fill: parent + color: "black" + opacity: button.checked ? 0.4 : 0 + } + } + }, + Component { + id: defaultContent + Item { + property int minimumWidth: 40 + property int minimumHeight: 25 + width: Math.max(minimumWidth, row.width + 15 + 15) // add left and right margins + height: Math.max(minimumHeight, row.height + 5 + 5) // add top and bottom margins + + Row { + id: row + spacing: 4 + anchors.centerIn: parent + Image { + source: button.icon + anchors.verticalCenter: parent.verticalCenter + } + + Text { + color: !button.enabled ? "gray" : button.foregroundColor + anchors.verticalCenter: parent.verticalCenter + text: button.text + } + } + } + + } + ] +} diff --git a/styles/default/ButtonStyle.qml b/styles/default/ButtonStyle.qml new file mode 100644 index 00000000..9cbd0891 --- /dev/null +++ b/styles/default/ButtonStyle.qml @@ -0,0 +1,61 @@ +import Qt 4.7 + +QtObject { + property Component background: defaultBackground + property Component content: defaultContent + + property list elements: [ + Component { + id: defaultBackground + Item { + Rectangle{ + x: 1; y: 1 + width: parent.width-2 + height: parent.height-2 + color: button.backgroundColor + radius: 5 + } + + BorderImage { + anchors.fill: parent + smooth: true + source: button.pressed ? "images/button_pressed.png" : "images/button_normal.png" + border.left: 6; border.top: 6 + border.right: 6; border.bottom: 6 + } + + Rectangle { + anchors.fill: parent + color: "black" + opacity: button.checked ? 0.4 : 0 + } + } + }, + Component { + id: defaultContent + Item { + property int minimumWidth: 40 + property int minimumHeight: 25 + width: Math.max(minimumWidth, row.width + 15 + 15) // add left and right margins + height: Math.max(minimumHeight, row.height + 5 + 5) // add top and bottom margins + + Row { + id: row + spacing: 4 + anchors.centerIn: parent + Image { + source: button.icon + anchors.verticalCenter: parent.verticalCenter + } + + Text { + color: !button.enabled ? "gray" : button.foregroundColor + anchors.verticalCenter: parent.verticalCenter + text: button.text + } + } + } + + } + ] +} diff --git a/styles/default/CheckBoxStyle.qml b/styles/default/CheckBoxStyle.qml new file mode 100644 index 00000000..5f406808 --- /dev/null +++ b/styles/default/CheckBoxStyle.qml @@ -0,0 +1,70 @@ +import Qt 4.7 + +QtObject { + property Component background: defaultBackground + property Component content: defaultContent + + property list elements: [ + Component { + id: defaultBackground + Item { + Rectangle{ + anchors.fill: backgroundimage + color: backgroundColor + radius: 5 + } + + BorderImage { + id: backgroundimage + width: parent.height; + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + + source: "../../images/lineedit_normal.png" + smooth: true + border.left: 6; border.top: 3 + border.right: 6; border.bottom: 3 + } + + Image { + anchors.centerIn: backgroundimage + anchors.verticalCenterOffset: 1 + anchors.horizontalCenterOffset: 1 + opacity: checked ? (enabled ? 1 : 0.5) : 0 + source: "../../images/checkbox_check.png" + Behavior on opacity { NumberAnimation { duration: 150; easing.type: Easing.OutCubic } } + } + } + }, + Component { + id: defaultContent + Item { + width: layout.width + height: layout.height + + anchors.bottom: parent.bottom + anchors.margins: 4 + Row { + id: layout + spacing: 4 + anchors.bottom: parent.bottom + Item { + width: parent.height + 8; + height: 1 + } + Image { + source: button.icon + } + Text { + y: 4 + color: button.foregroundColor + opacity: enabled ? 1 : 0.5 + font.pixelSize: 14 + text: button.text + } + } + } + } + ] +} diff --git a/styles/default/RadioButtonStyle.qml b/styles/default/RadioButtonStyle.qml new file mode 100644 index 00000000..4a1bf86e --- /dev/null +++ b/styles/default/RadioButtonStyle.qml @@ -0,0 +1,35 @@ +import Qt 4.7 + +QtObject { + property Component background: defaultBackground + property Component content: defaultContent + + property list elements: [ + Component { + id: defaultBackground + Rectangle{ + width: button.width-2 + height: button.height-2 + anchors.centerIn: parent + color: button.backgroundColor + radius: width/2 + } + }, + Component { + id: defaultContent + Item { + width: 20 + height: 20 + anchors.centerIn: parent + Rectangle { + width: 10 + height: 10 + anchors.centerIn: parent + color: button.pressed || !button.enabled ? "gray" : "black" + radius: width/2 + opacity: button.checked || button.pressed ? 1 : 0 + } + } + } + ] +} diff --git a/styles/default/images/button_normal.png b/styles/default/images/button_normal.png new file mode 100644 index 0000000000000000000000000000000000000000..b7549dc7fb13c82156a8882556af4346e47eb6f4 GIT binary patch literal 916 zcmV;F18e+=P)$DZ!xutjceb^=`t1hf7NJa;!< zL@-pC=-^B|FcHMW#PBXKx#W@!_CHY5y=W6>%|#UCq_z8MX8MO?byd9!oN*nMGu!T< zK2Xq9&^&m2tE%Zj-}m96cDs$!)6?~8wd#OYxIE9(@$vEC@w_>F2!g+4tTcKg>jj(Z(UX%VrcsUaeMx zMx#;L-{1e5rl}~pNbRZ1%gbI&mc?r9=Q2+2fFiu;1_N z#FZEk!ARl&?z-9Sc6H)PObCG^r^>-n32_|j#Ff~SJ#ILeB#BO3i47Wuh&cKk$2r%D zD>0=M5D`i#@&0fkgh0laPF#rzA#nH+KC;JUS*8)^YHliID@+%s(O@QEH5wD*VfkF@9gZj zQ51c3UH5PFeIFQOHX{DnY&O-_)|Q%>n1C$HGSCWFtJP{z6q&obyVbL^Gpp0-{4z5$ z6XEbeEMv@8O8th2Z!OCL%d*r9@6^5nA%wv>2O-24#@OEM?Cd`P0QmSOGXTKF#l=sC qVdxvNB_M>j4a4wX-}i4H&i@CsRhbUAGmY>70000v+h7<6@aK8oH;HD+MmlC|CX7u*@Rs9_vcZIT zu?KsppqF}_`#T20+;K=Qg0~&Kj6n~>>tNE0BJ5JAzo<4{L#55zH`&G3Vr4rFOat!+ z0wKA4;eqe_z9i^44)ojK-^a}OiVmjT3UKR2;r?(s}*l#2>?LTG!+p? zx3{-*l}cqU2!gz-ssRH4&~<&)wryNqUVgT@x%s73DtU1SmTt_>&OTaSUw`Ae?&Fh_ zlXt09>O;3GUuLt}^zQC%u~aG@$C^?aaBy&NwX?JHEtku^-PqW84FDh5<>jTNsw%T> z+bkA~zW_kQ9aI{$x3^bbTU!H4>BDNZI?5D9Q2-ze!!T?%o1M4=N_P`NM4a=0QmQe= zl-{lq5di?A_@YVwf{4BOuv_os;1Z&La1qGC4ZGfqWK|}}^^5>OR%K$zs!W!_s_c6q z4XOUBBr)cY{)60{B+H%WIJw3ph+N|mq}z&wkVsZ#vdF4TFnJtE8bs_J378NfV2n{h z2%4rzeczX#c7_n86d7Zh5CWUcrXZGO)uSj1Pft&4i;IiT;ifX>HAL6K!ot(Dv$H@5 z;iuE-D>^i*a|{50xBp}Y0H{