Side panel with QML Drawer

Snoopy

Hello

I want a sidepanel in my application. But I need a other functionality. Please look at the screenshot below.
For example with a mouseclick I want, that the red side panel will be cutted half from inside. After that, the area with the slider furthermore will be visible, but NOT the arrow.

Has somebody an idea or experience in this topic ?

Best regards

Snoopy

ODБOï

Hi,
I don't know if this is exactly what you want :

You can past all this code here : https://qmlweb.github.io/ and check if this is the behavior you are looking for.

import QtQuick 2.0
Rectangle{
id:main
height : 400
width : 500
Rectangle{
id : blackRec
height : 300
width : 400
color : "grey"
border.width : 4

  property bool openSidePanel : false
  property bool openHalfSidePanel : false

   MouseArea{
     anchors.fill : blackRec
     onClicked : {
       	if(blackRec.openHalfSidePanel)blackRec.openHalfSidePanel = false
          if(blackRec.openSidePanel) blackRec.openSidePanel = false
          else blackRec.openSidePanel = true
   }
}

}
Rectangle{
Text{text:blackRec.openSidePanel?"opened":blackRec.openHalfSidePanel? "half opened" : "closed"}
id : redRec
//visible : blackRec.openSidePanel // hide if closed
color : "red"
height : blackRec.height
width : blackRec.width / 4
anchors.left : blackRec.right

    anchors.leftMargin : blackRec.openSidePanel ? -redRec.width  : 
    blackRec.openHalfSidePanel ?-redRec.width/2 : 0
 }

Rectangle{
id:openHalfButton
height : 50
width : 60
Text{text:blackRec.openHalfSidePanel ? "close" : "open Half"}
//scale : openHalfButtonMouseArea.pressed ? 1 : 0.8
anchors.bottom: main.bottom
color : "#12aa55"
MouseArea{
id:openHalfButtonMouseArea
anchors.fill:parent
onClicked:{
if(blackRec.openSidePanel)blackRec.openSidePanel = false
if(blackRec.openHalfSidePanel) blackRec.openHalfSidePanel = false
else blackRec.openHalfSidePanel = true
}
}
}
}

LA

Snoopy

@LeLev

Hello,
thank you for your suggestion.

I've made it with two Drawer. One Drawer with the half inside Rectangle (with Slider) and a second Drawer with
the complete Rectangle like on the screenshot. The first Drawer is overlaying the second Drawer, but the user can't see that. Now I can can control both Drawer with the visible or the position property.

Best regards

Snoopy

RokeJulianLockhart

@ODБOï, that code is a bit difficult to read since only some of it is formatted as code. Could you reformat it as a code block?

CPPUIX

This post is deleted!