[Solved] Making a swipeable panel with buttons on top

benlau

https://github.com/benlau/quickandroid/blob/DEV/examples/quickandroidexample/bottomsheet/BottomSheetDemo.qml

vishnu

@benlau
Thanks a lot. What i didn't understand is
what is

Activity{
I can see a qml file here. Can you please describe me what it does? I mean its purpose.
* BottomSheet {
I didn't find any qml file. so no idea what it does. thanks

Hamed.Masafi

@vishnu That's an uncompleted project and has so much dirty codes (Excuse me)
This sample has a right to left swipe menu, You can convert to left-to-right. and extract required code and classes from sample.

http://www.4shared.com/archive/_gbu_ULyce/Shoptar.html

vishnu

@BlackDal
Thanks a lot for the quick reply.
It says error at ToojQmlHelper::registerQmlTypes(&engine); and ended with 422 issues.
like this
Any idea how to solve this? I tried with Qt5.5, 5.4, 5.2. Everythings resulted the same.

Hamed.Masafi

Checkout this. Include path problem fixed.

Screenshot: http://www.4shared.com/download/QNyDGY3qce/Shop.png?sbsr=20ecc3d08302028b3c941f61df43373c5899560310f81744&lgfp=3000

Download:
https://drive.google.com/file/d/0B5E1thzUK4mJd0huVmJwM1p3S3M/view?usp=sharing

vishnu

@BlackDal
Sorry to say this but same errors at
ToojQmlHelper::registerQmlTypes(&engine);
ToojQmlHelper::initFonts(&engine);
should i add something to pro file or some settings ?

Hamed.Masafi

You are right. There was a problem in the MSVC compiling that was solved.
I'm so sorry for this fail.
https://drive.google.com/open?id=0B5E1thzUK4mJTmt6QmJRTlk1TkE

vishnu

@BlackDal
perfect. Thanks a lot but small error i found.

qrc:/Page1.qml:14:19: Unable to assign [undefined] to QString
qrc:/main.qml:46: TypeError: Property 't' of object Units_QMLTYPE_0(0x2a94b238) is not a function
QSGThreadedRenderLoop: expose event received for window MainWindow_QMLTYPE_86(0x29f0ab28) with invalid geometry: QRect(1920,332 640x360) on QScreen(0x265deac8)
qrc:///tooj/qml/Tooj/App/MainWindow.qml:122:16: Unable to assign [undefined] to QString

Also, for some reason its work perfect on windows but on android the swipe function is little bit draggy and needs 2 or 3 time to swipe. just to inform you. Thanks a lot.

Hamed.Masafi

Thanks for bug reporting.
As I said this is a little and incomplete source. As you can see this sample has menu button, fontawesome and some small components. This is part of a library for mobile-first QtQuick applications and games. I will release this library in next months. I guess drag bug relate to dpi calculation (Units components has some unfinished tasks).

You might be interested to this project:
http://papyros.io/

benlau

@vishnu said:

@benlau
Thanks a lot. What i didn't understand is
what is

Activity{
I can see a qml file here. Can you please describe me what it does? I mean its purpose.
* BottomSheet {
I didn't find any qml file. so no idea what it does. thanks

Please switch to "DEV" branch. BottomSheet is not available at master branch yet.

Activity is a page of UI. You may just ignore it.

There also has a daily build for Android, you may try if you have an Android device.
Downloads | quickandroid

johngod

Here is another very simple example with a nice animation that works how of the box:

import QtQuick 2.4

Rectangle {
    id: root
    width: 400
    height: 380
    color: "yellow"

    Rectangle {
        id: panel
        width: parent.width * 0.8
        height: parent.height * 0.8
        radius: 20
        color: "orange"
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            drag.target: panel
            drag.minimumY: 0
            drag.maximumY: 0
            drag.minimumX: -panel.width
            drag.maximumX: 0
            onReleased: {
                //if the panel is swiped more than 30% it will hide
                //else it will go back to the original position
                //this makes a pretty nice effect :)
                if (panel.x < -panel.width * 0.3) {
                    //we need to make sure that a state change happens to
                    //fire the transition animation
                    root.state = "show"
                    root.state = "hide"
                }
                else {
                    root.state = "hide"
                    root.state = "show"
                }
            }
        }
        onXChanged: {
            console.log(x)
        }
    }

    Rectangle {
        id: button
        width: 45
        height: width
        radius: 5
        color: "lightblue"
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        MouseArea {
            anchors.fill: parent
            onClicked: {
                root.state = root.state === "show" ? "hide" : "show"
            }
        }
    }

    state: "show"
    states: [
        State {
            name: "hide"
            PropertyChanges { target: panel; x: -panel.width }
        },
        State {
            name: "show"
            PropertyChanges { target: panel; x: 0 }
        }
    ]

    transitions: Transition {
        NumberAnimation {
            target: panel
            property: "x"
            duration: 1000
            easing.type: Easing.OutCubic
        }
    }
}