Added widgets

components/Button.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+Components.Button {
+    id:button
+
+    property int buttonHeight: Math.max(22, styleitem.sizeFromContents(100, 6).height)
+    height: buttonHeight
+
+    QStyleItem {
+        id:styleitem
+        elementType:"button"
+        sunken: pressed
+        raised: !pressed
+        hover: containsMouse
+        enabled:button.enabled
+        text:button.text
+    }
+
+    background:
+    QStyleBackground {
+        style:styleitem
+        anchors.fill:parent
+    }
+}
+

components/ButtonRow.qml

+import QtQuick 1.0
+import "../../../components" as Components
+
+Components.ButtonRow {
+}

components/CheckBox.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+// jb : Size should not depend on background, we should make it consistent
+
+Components.CheckBox{
+    id:checkbox
+    property variant text
+    width:100
+    height:18
+
+    background: QStyleBackground {
+        id:styleitem
+        style:QStyleItem {
+            elementType:"checkbox"
+            sunken:pressed
+            on:checked || pressed
+            hover:containsMouse
+            text:checkbox.text
+            enabled:checkbox.enabled
+        }
+    }
+    checkmark: null
+}
+

components/ChoiceList.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+Components.ChoiceList {
+    id:choicelist
+
+    property int buttonHeight: buttonitem.sizeFromContents(100, 18).height
+    QStyleItem { id:buttonitem; elementType:"combobox" }
+    height: buttonHeight
+    topMargin:4
+    bottomMargin:4
+
+    QStyleItem {
+        id:styleitem
+        elementType: "combobox"
+        sunken: pressed
+        raised: !pressed
+        hover: containsMouse
+        enabled:choicelist.enabled
+    }
+
+    background: QStyleBackground {
+        anchors.fill:parent
+        style: styleitem
+    }
+
+    listItem: Item {
+        id:item
+
+        height:22
+        anchors.left:parent.left
+        width:choicelist.width
+        QStyleBackground {
+            anchors.fill:parent
+            style: QStyleItem {
+                elementType: "menuitem"
+                text: choicelist.model.get(index).text
+                selected: highlighted
+            }
+        }
+    }
+
+    popupFrame: QStyleBackground {
+        property int fw: styleitem.pixelMetric("menupanelwidth");
+        anchors.leftMargin: styleitem.pixelMetric("menuhmargin") + fw
+        anchors.rightMargin: styleitem.pixelMetric("menuhmargin") + fw
+        anchors.topMargin: styleitem.pixelMetric("menuvmargin") + fw
+        anchors.bottomMargin: styleitem.pixelMetric("menuvmargin") + fw
+        style:QStyleItem{elementType:"menu"}
+    }
+}

components/GroupBox.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+Item {
+    width:200
+    height:46
+
+    property alias text: styleitem.text
+    default property alias children: content.children
+    property bool checkable: false
+
+    QStyleBackground {
+        anchors.fill:parent
+        style: QStyleItem{
+            id:styleitem
+            elementType:"groupbox"
+        }
+
+        Item {
+            id:content
+            anchors.topMargin:22
+            anchors.leftMargin:6
+            anchors.fill:parent
+        }
+    }
+}

components/ProgressBar.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+Components.ProgressBar {
+    id:progressbar
+
+    // Align with button
+    property int buttonHeight: buttonitem.sizeFromContents(100, 15).height
+    QStyleItem { id:buttonitem; elementType:"button" }
+    height: buttonHeight
+
+    background: QStyleBackground{
+        anchors.fill:parent
+        style: QStyleItem {
+            elementType:"progressbar"
+
+            // XXX: since desktop uses int instead of real, the progressbar
+            // range [0..1] must be stretched to a good precision
+            property int factor : 1000000
+
+            value:   progressbar.value * factor
+            minimum: indeterminate ? 0 : progressbar.minimumValue * factor
+            maximum: indeterminate ? 0 : progressbar.maximumValue * factor
+            enabled: progressbar.enabled
+        }
+    }
+    indeterminateProgress:null
+    progress: null
+}
+

components/RadioButton.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+// jb : Size should not depend on background, we should make it consistent
+
+Components.RadioButton{
+    id:radiobutton
+    property variant text
+    width:110
+    height:18
+
+    background: QStyleBackground {
+
+        style: QStyleItem{
+            elementType:"radiobutton"
+            sunken:pressed
+            on:checked || pressed
+            hover:containsMouse
+            text:radiobutton.text
+            enabled:radiobutton.enabled
+        }
+    }
+    checkmark: null
+}
+

components/ScrollArea.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+FocusScope {
+    id:scrollarea
+    width: 100
+    height: 100
+
+    property int contentMargin: 1
+    property int __scrollbarExtent : styleitem.pixelMetric("scrollbarExtent");
+    property int frameWidth: styleitem.pixelMetric("defaultframewidth");
+    property int contentHeight : content.childrenRect.height
+    property int contentWidth: content.childrenRect.width
+    property alias color: flickable.color
+    property bool frame: true
+    property bool highlightOnFocus: false
+
+    default property alias children: content.children
+
+    property int contentY
+    property int contentX
+
+    property bool frameAroundContents: styleitem.styleHint("framearoundcontents")
+
+    onContentYChanged: {
+        vscrollbar.value = contentY
+    }
+
+    onContentXChanged: {
+        hscrollbar.value = contentX
+    }
+
+    QStyleBackground {
+        style: QStyleItem{
+            id:styleitem
+            elementType: frame ? "frame" : ""
+            sunken: true
+        }
+        anchors.fill: parent
+        anchors.rightMargin: (frameAroundContents && vscrollbar.visible) ? vscrollbar.width + 4 : -frameWidth
+        anchors.bottomMargin: (frameAroundContents && hscrollbar.visible) ? hscrollbar.height + 4 : -frameWidth
+        anchors.topMargin: (frameAroundContents && hscrollbar.visible) ? hscrollbar.height + 4 : -frameWidth
+
+        Rectangle {
+            id:flickable
+            color: "transparent"
+            anchors.fill: parent
+            anchors.margins: frame ? 2 : 0
+            clip: true
+
+            Item {
+                id: docmargins
+                anchors.fill:parent
+                anchors.margins:contentMargin
+                Item {
+                    id: content
+                    x: -scrollarea.contentX
+                    y: -scrollarea.contentY
+                }
+            }
+        }
+    }
+
+    ScrollBar {
+        id: hscrollbar
+        orientation: Qt.Horizontal
+        visible: contentWidth > flickable.width
+        maximumValue: contentWidth > flickable.width ? scrollarea.contentWidth - flickable.width : 0
+        minimumValue: 0
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.rightMargin: { return (frame ? 1 : 0) + ( vscrollbar.visible ? __scrollbarExtent : 0) }
+        onValueChanged: contentX = value
+    }
+
+    ScrollBar {
+        id: vscrollbar
+        orientation: Qt.Vertical
+        visible: contentHeight > flickable.height
+        maximumValue: contentHeight > flickable.height ? scrollarea.contentHeight - flickable.height : 0
+        minimumValue: 0
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin:  { return (frame ? 1 : 0) + (hscrollbar.visible ? __scrollbarExtent : 0) }
+        onValueChanged: contentY = value
+    }
+
+    QStyleBackground {
+        z:2
+        anchors.fill:parent
+        anchors.margins:-2
+        anchors.rightMargin:-4
+        anchors.bottomMargin:-4
+        visible: highlightOnFocus && parent.activeFocus && styleitem.styleHint("focuswidget")
+        style: QStyleItem {
+            id:framestyle
+            elementType:"focusframe"
+        }
+    }
+}

components/ScrollBar.qml

+import QtQuick 1.1
+import "../../../components" as Components
+import "../plugin"
+
+MouseArea {
+    id:scrollbar
+    property int __scrollbarExtent : styleitem.pixelMetric("scrollbarExtent");
+    implicitWidth:orientation == Qt.Horizontal ? 200 : __scrollbarExtent;
+    implicitHeight:orientation == Qt.Horizontal ? __scrollbarExtent : 200
+
+    property int orientation : Qt.Horizontal
+    property alias minimumValue: slider.minimumValue
+    property alias maximumValue: slider.maximumValue
+    property alias value: slider.value
+
+    property bool upPressed;
+    property bool downPressed;
+    property bool __autoincrement: false
+
+    // Update hover item
+    onEntered: styleitem.activeControl = bgitem.hitTest(mouseX, mouseY)
+    onExited: styleitem.activeControl = "none"
+    onMouseXChanged: styleitem.activeControl = bgitem.hitTest(mouseX, mouseY)
+    hoverEnabled:true
+
+    Timer { running: upPressed || downPressed; interval: 350 ; onTriggered: __autoincrement = true }
+    Timer { running: __autoincrement; interval: 60 ; repeat: true ;
+        onTriggered: upPressed ? decrement() : increment() }
+
+    onPressed: {
+        var control = bgitem.hitTest(mouseX,mouseY)
+        if (control == "up") {
+            upPressed = true
+        } else if (control == "down") {
+            downPressed = true
+        }
+    }
+
+    onReleased: {
+        __autoincrement = false;
+        if (upPressed) {
+            upPressed = false;
+            decrement()
+        } else if (downPressed) {
+            increment()
+            downPressed = false;
+        }
+    }
+
+    function increment() {
+        value += 30
+        if (value > maximumValue)
+            value = maximumValue
+    }
+
+    function decrement() {
+        value -= 30
+        if (value < minimumValue)
+            value = minimumValue
+    }
+
+    QStyleBackground {
+        id:bgitem
+        anchors.fill:parent
+        style: QStyleItem {
+            id:styleitem
+            elementType: "scrollbar"
+            hover: activeControl != "none"
+            activeControl: "none"
+            sunken: upPressed | downPressed
+            minimum: slider.minimumValue
+            maximum: slider.maximumValue
+            value: slider.value
+            horizontal: orientation == Qt.Horizontal
+            enabled: parent.enabled
+        }
+    }
+
+    property variant handleRect
+    function updateHandle() {
+        handleRect = bgitem.subControlRect("handle")
+        var grooveRect = bgitem.subControlRect("groove");
+        var extra = 0
+        if (orientation == Qt.Vertical) {
+            slider.anchors.topMargin = grooveRect.y + extra
+            slider.anchors.bottomMargin = height - grooveRect.y - grooveRect.height + extra
+        } else {
+            slider.anchors.leftMargin = grooveRect.x + extra
+            slider.anchors.rightMargin = width - grooveRect.x - grooveRect.width + extra
+        }
+    }
+
+    onValueChanged: updateHandle()
+    onMaximumValueChanged: updateHandle()
+    onMinimumValueChanged: updateHandle()
+    Component.onCompleted: updateHandle()
+    Components.Slider {
+        id:slider
+        anchors.fill:parent
+        orientation:scrollbar.orientation
+        leftMargin: (orientation === Qt.Horizontal) ? handleRect.width/2 : handleRect.height/2
+        rightMargin:leftMargin
+        handle: Item { width:orientation == Qt.Vertical ? handleRect.height : handleRect.width;
+                       height:orientation == Qt.Vertical ? handleRect.width : handleRect.height}
+        groove:null
+        valueIndicator:null
+        inverted:orientation != Qt.Horizontal
+    }
+}

components/Slider.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+// jens: ContainsMouse breaks drag functionality
+
+Components.Slider{
+    id:slider
+    minimumWidth:200
+
+    // Align with button
+    property int buttonHeight: buttonitem.sizeFromContents(100, 15).height
+    QStyleItem { id:buttonitem; elementType:"button" }
+    height: buttonHeight
+
+    groove: QStyleBackground {
+        anchors.fill:parent
+        style: QStyleItem{
+            elementType:"slider"
+            sunken: pressed
+            maximum:slider.maximumValue
+            minimum:slider.minimumValue
+            value:slider.value
+            horizontal:slider.orientation == Qt.Horizontal
+            enabled:slider.enabled
+        }
+    }
+
+    handle: null
+    valueIndicator: null
+}

components/SpinBox.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+Components.SpinBox {
+    id:spinbox
+
+    property variant __upRect;
+    property variant __downRect;
+    property int __margin: (height -16)/2
+
+    // Align height with button
+    topMargin:__margin
+    bottomMargin:__margin
+
+    property int buttonHeight: edititem.sizeFromContents(100, 20).height
+    QStyleItem { id:edititem; elementType:"edit" }
+    height: buttonHeight
+    clip:false
+
+    background:
+        Item {
+        anchors.fill: parent
+        property variant __editRect
+
+        Rectangle {
+            id:editBackground
+            x: __editRect.x - 1
+            y: __editRect.y
+            width: __editRect.width
+            height: __editRect.height
+        }
+
+        Item {
+            id:focusFrame
+            anchors.fill: editBackground
+            visible:framestyle.styleHint("focuswidget")
+            QStyleBackground{
+                anchors.margins: -6
+                anchors.leftMargin: -5
+                anchors.fill: parent
+                visible:spinbox.activeFocus
+                style: QStyleItem {
+                    id:framestyle
+                    elementType:"focusframe"
+                }
+            }
+        }
+
+        function updateRect() {
+            __upRect = spinboxbg.subControlRect("up");
+            __downRect = spinboxbg.subControlRect("down");
+            __editRect = spinboxbg.subControlRect("edit");
+        }
+
+        Component.onCompleted:updateRect()
+        onWidthChanged:updateRect()
+        onHeightChanged:updateRect()
+
+        QStyleBackground {
+            id:spinboxbg
+            anchors.fill:parent
+            style: QStyleItem {
+                id: styleitem
+                elementType: "spinbox"
+                sunken: downPressed | upPressed
+                hover: containsMouse
+                focus: spinbox.activeFocus
+                enabled: spinbox.enabled
+                value: (upPressed? 1 : 0)           |
+                        (downPressed== 1 ? 1<<1 : 0) |
+                        (upEnabled? (1<<2) : 0)      |
+                        (downEnabled == 1 ? (1<<3) : 0)
+            }
+        }
+    }
+
+    up: Item {
+        x: __upRect.x
+        y: __upRect.y
+        width: __upRect.width
+        height: __upRect.height
+    }
+
+    down: Item {
+        x: __downRect.x
+        y: __downRect.y
+        width: __downRect.width
+        height: __downRect.height
+    }
+}

components/Switch.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+Components.Switch {
+    id:widget
+    minimumWidth:100
+    minimumHeight:30
+
+    groove:QStyleItem {
+        elementType:"edit"
+        sunken: true
+    }
+
+    handle: QStyleItem {
+        elementType:"button"
+        width:widget.width/2
+        height:widget.height-4
+        hover:containsMouse
+    }
+}
+

components/Tab.qml

+import Qt 4.7
+
+Item {
+    id:tab
+    anchors.fill:parent
+    property string title
+}

components/TabBar.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+
+Item {
+    id: tabbar
+    property int tabHeight: styleitem.sizeFromContents(100, 24).height
+    height: tabHeight
+
+    property Item tabFrame
+    onTabFrameChanged:parent = tabFrame
+    visible: tabFrame ? tabFrame.tabsVisible : true
+    property int __overlap : styleitem.pixelMetric("tabvshift");
+    property string position: tabFrame ? tabFrame.position : "North"
+    property string tabBarAlignment: styleitem.styleHint("tabbaralignment");
+    property int tabOverlap: styleitem.pixelMetric("taboverlap");
+
+    function tab(index) {
+        for (var i = 0; i < tabrow.children.length; ++i) {
+            if (tabrow.children[i].tabindex == index) {
+                return tabrow.children[i]
+            }
+        }
+        return null;
+    }
+
+    QStyleItem {
+        id:styleitem
+        elementType: "tab"
+        text: "generic"
+    }
+
+    Row {
+        id:tabrow
+        states:
+        State {
+            when: tabBarAlignment == "center"
+            name: "centered"
+            AnchorChanges {
+                target:tabrow
+                anchors.horizontalCenter: tabbar.horizontalCenter
+            }
+        }
+        Repeater {
+            id:repeater
+            model: tabFrame ? tabFrame.tabs.length : null
+            delegate: Item {
+                id:tab
+                property int tabindex: index
+                property bool selected : tabFrame.current == index
+                width: textitem.width + 42
+                height: tabHeight
+                z: selected ? 1 : -1
+
+                QStyleBackground {
+                    style: QStyleItem {
+                        id:style
+                        elementType: "tab"
+                        selected: tab.selected
+                        text: tabbar.position
+
+                        activeControl: tabFrame.count == 1 ?
+                                           "only" :
+                        index == 0 ? "beginning" :
+                            index == tabFrame.count-1 ? "end" : "middle"
+                    }
+                    anchors.leftMargin: -tabOverlap + (style.text == "North" && (style.activeControl == "middle" || style.activeControl == "end")
+                                        && tab.selected ? -__overlap : 0)
+
+                    anchors.rightMargin: -tabOverlap + (style.text == "North" && (style.activeControl == "middle"  || style.activeControl == "beginning")
+                                         && tab.selected ? -__overlap : 0)
+                    anchors.fill:parent
+                }
+
+                Text {
+                    id:textitem
+                    anchors.centerIn:parent
+                    text:  tabFrame.tabs[index].title
+                    elide: Text.ElideRight
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onPressed: tabFrame.current = index
+                }
+            }
+        }
+    }
+}

components/TabFrame.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+Item{
+    id: tabWidget
+    width:100
+    height:100
+    property TabBar tabbar
+    property int current: 0
+    property int count: stack.children.length
+    property bool frame:true
+    property bool tabsVisible: true
+    property string position: "North"
+    default property alias tabs : stack.children
+
+    onCurrentChanged: __setOpacities()
+    Component.onCompleted: __setOpacities()
+    onTabbarChanged: {
+        tabbar.tabFrame = tabWidget
+        tabbar.anchors.top = tabWidget.top
+        tabbar.anchors.left = tabWidget.left
+        tabbar.anchors.right = tabWidget.right
+    }
+
+    property int __baseOverlap : style.pixelMetric("tabbaseoverlap");
+    function __setOpacities() {
+        for (var i = 0; i < stack.children.length; ++i) {
+            stack.children[i].opacity = (i == current ? 1 : 0)
+        }
+    }
+
+    QStyleBackground {
+        id: frame
+        z:-1
+        style: QStyleItem {
+            id:style
+            elementType: "tabframe"
+            text: position
+            value: tabbar && tabsVisible && tabbar.tab(current) ? tabbar.tab(current).x : 0
+            minimum: tabbar && tabsVisible && tabbar.tab(current) ? tabbar.tab(current).width : 0
+        }
+        anchors.fill:parent
+        Item {
+            id:stack
+            anchors.fill:parent
+            anchors.margins: frame ? 2 : 0
+        }
+        anchors.topMargin: tabbar && tabsVisible && position == "North" ? tabbar.height - __baseOverlap : 0
+
+        states: [
+            State {
+                name: "South"
+                when: position == "South" && tabbar!= undefined
+                PropertyChanges {
+                    target: frame
+                    anchors.topMargin: 0
+                    anchors.bottomMargin: tabbar ? tabbar.height - __baseOverlap: 0
+                }
+                PropertyChanges {
+                    target: tabbar
+                    anchors.topMargin: -__baseOverlap
+                }
+                AnchorChanges {
+                    target: tabbar
+                    anchors.top: frame.bottom
+                    anchors.bottom: undefined
+                }
+            }
+        ]
+    }
+}

components/TextArea.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+Components.TextArea {
+    id:textarea
+    leftMargin:12
+    rightMargin:12
+    minimumWidth:200
+    desktopBehavior:true
+    placeholderText:""
+    clip:false
+    // Align with button
+    property int buttonHeight: buttonitem.sizeFromContents(100, 14).height
+    QStyleItem { id:buttonitem; elementType:"button" }
+    minimumHeight: buttonHeight
+
+    background: QStyleBackground {
+        anchors.fill:parent
+        style: QStyleItem{
+            elementType:"edit"
+            sunken:true
+            focus:textarea.activeFocus
+        }
+    }
+
+    Item{
+        id:focusFrame
+        anchors.fill: textarea
+        parent:textarea.parent
+        visible:framestyle.styleHint("focuswidget")
+        QStyleBackground{
+            anchors.margins: -2
+            anchors.rightMargin:-4
+            anchors.bottomMargin:-4
+            anchors.fill: parent
+            visible:textarea.activeFocus
+            style: QStyleItem {
+                id:framestyle
+                elementType:"focusframe"
+            }
+        }
+    }
+}

components/TextField.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+Components.TextField {
+    id:textfield
+    minimumWidth:200
+    desktopBehavior:true
+    placeholderText:""
+    topMargin:2
+    bottomMargin:2
+    leftMargin:6
+    rightMargin:6
+    width:200
+    height: editItem.sizeFromContents(100, 20).height
+    clip:false
+
+    QStyleItem {
+        id:editItem
+        elementType:"edit"
+        sunken:true
+        focus:textfield.activeFocus
+        hover:containsMouse
+    }
+
+    background: QStyleBackground {
+        anchors.fill:parent
+        style: QStyleItem{
+            elementType:"edit"
+            sunken:true
+            focus:textfield.activeFocus
+        }
+    }
+
+    Item{
+        id:focusFrame
+        anchors.fill: textfield
+        parent:textfield
+        visible:framestyle.styleHint("focuswidget")
+        QStyleBackground{
+            anchors.margins: -2
+            anchors.rightMargin:-4
+            anchors.bottomMargin:-4
+            anchors.fill: parent
+            visible:textfield.activeFocus
+            style: QStyleItem {
+                id:framestyle
+                elementType:"focusframe"
+            }
+        }
+    }
+}

components/TextScrollArea.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+ScrollArea {
+    id:area
+    color: "white"
+    width: 280
+    height: 120
+    contentWidth: 200
+
+    property alias text: edit.text
+    property alias wrapMode: edit.wrapMode
+    highlightOnFocus: true
+
+    TextEdit {
+        id: edit
+        text: loremIpsum + loremIpsum;
+        wrapMode: TextEdit.WordWrap;
+        width: area.contentWidth
+        selectByMouse:true
+
+        // keep textcursor within scrollarea
+        onCursorRectangleChanged:
+            if (cursorRectangle.y >= area.contentY + area.height - 1.5*cursorRectangle.height)
+                area.contentY = cursorRectangle.y - area.height + 1.5*cursorRectangle.height
+            else if (cursorRectangle.y < area.contentY)
+                area.contentY = cursorRectangle.y
+
+    }
+}

components/ToolBar.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+QStyleBackground {
+    id:styleitem
+    width:200
+    height:60
+
+    style: QStyleItem{elementType:"toolbar"}
+}
+

components/ToolButton.qml

+import QtQuick 1.0
+import "../../../components" as Components
+import "../plugin"
+
+Components.Button {
+    id:button
+    minimumWidth:30
+    background: QStyleBackground {
+        anchors.fill:parent
+        style: QStyleItem {
+            elementType: "toolbutton"
+            on: pressed | checked
+            sunken: pressed
+            raised: containsMouse
+            hover: containsMouse
+        }
+    }
+}