Rotate QtQuick.Controls 2.x Dialog

md2012

Hello.
I'm facing a problem right now that I couldn't find any solution for it so far.
I'm rotating a Main component which is the child of my ApplicationWindow and rotation works pretty well with every component that is used except Dialog (not the native ones of course).
any idea how to rotate the Dialog component or create an alternative for it?

md2012

    Dialog{
        id: resultDialog
        width: Math.min("250",root.width*0.65)
        height: children.height
        x: parent.width/2 - width/2
        y: parent.height/2 - height/2
        title: "Calibration Result"
        modal: false
        CustomLabel{
            horizontalAlignment: "AlignLeft"
            width: parent.width
            text: "Calibration status :\n"+status_
        }
        onClosed: {
            ApplicationBridge.unsetCalibration()
        }
    }

one of the dialogs that i created.
I'm using Qt5.12.4

raven-worx

@md2012
does the following do what you want?

Dialog{
        id: resultDialog
        
     default property alias contentData: container.data

     Item {
         id: container
         anchors.fill: parent
         rotation: 180
         transformOrigin: Item.Center
     }
    }

note that this only rotates the content. you would need to add a custom title text item as part of the this rotated content instead of the Dialog's internal one. same for the DialogButtonBox.

md2012

@raven-worx
Looks like something can not be overridden, but it doesn't say what exactly

Cannot override FINAL property

raven-worx

@md2012
ok then simply rename the contentData proeprty to something else

You may also want to try the workaround mentioned in the comments of QTBUG-57632

md2012

Thanks for your time.
solved it for my case, just created a component called CustomDialog.qml and used the bellow code:

Dialog{
    id: root

    default property alias contentData_: container.data
    property alias title_: titleLabel.text //Use title_ instead of original title so the rotation works on title too
    width: Math.min(250,root.parent.width*0.65)
    height: children.height //Don't change this if you want the column layout to be flexible
    x: appRotation===180 ? parent.width/2 + width/2 : parent.width/2 - width/2  //Center of the window according to rotation angle
    y: appRotation===180 ? parent.height/2 + height/2 : parent.height/2 - height/2 //Center of the window according to rotation angle
    modal: true

    Column{
        id: container
        rotation: appRotation
        width: parent.width
        transformOrigin: Item.Center
        CustomLabel{
            id: titleLabel
            width: parent.width
            text: "Title"
            horizontalAlignment: "AlignLeft"
            Component.onCompleted: {
                font.pointSize=font.pointSize*1.2
            }
        }
        Item { //10 pixel of empty space between the title and content
            width: parent.width
            height: 10
        }
    }
}

jpnurmi 0

Popups follow Window::contentOrientation that you can set to match the rotation that is applied on the content:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true

    contentOrientation: listModel.get(comboBox.currentIndex).orientation
    contentItem.rotation: listModel.get(comboBox.currentIndex).rotation

    ComboBox {
        id: comboBox
        textRole: "text"
        anchors.centerIn: parent
        model: ListModel {
            id: listModel
            ListElement { text: "Portrait"; orientation: Qt.PortraitOrientation; rotation: 0 }
            ListElement { text: "Landscape"; orientation: Qt.LandscapeOrientation; rotation: 90 }
            ListElement { text: "Inverted Portrait"; orientation: Qt.InvertedPortraitOrientation; rotation: 180 }
            ListElement { text: "Inverted Landscape"; orientation: Qt.InvertedLandscapeOrientation; rotation: 270 }
        }
    }
}

md2012

@jpnurmi-0 said in Rotate QtQuick.Controls 2.x Dialog:

contentOrientation:

Great, Thanks.
Now without any workaround i just added

contentOrientation: ApplicationBridge.appRotation===0 ? Qt.PortraitOrientation:Qt.InvertedPortraitOrientation

to my ApplicationWindow in addition to my main component rotation.
The result will be the same on every component which won't load immediately, like Drawer, Dialog, PopUp ...

Va06

This post is deleted!

Hit Tiger Tonight

@jpnurmi-0 Perfect solution.

Logan Grosz

@jpnurmi-0 said in Rotate QtQuick.Controls 2.x Dialog:

Popups follow Window::contentOrientation that you can set to match the rotation that is applied on the content:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true

    contentOrientation: listModel.get(comboBox.currentIndex).orientation
    contentItem.rotation: listModel.get(comboBox.currentIndex).rotation

    ComboBox {
        id: comboBox
        textRole: "text"
        anchors.centerIn: parent
        model: ListModel {
            id: listModel
            ListElement { text: "Portrait"; orientation: Qt.PortraitOrientation; rotation: 0 }
            ListElement { text: "Landscape"; orientation: Qt.LandscapeOrientation; rotation: 90 }
            ListElement { text: "Inverted Portrait"; orientation: Qt.InvertedPortraitOrientation; rotation: 180 }
            ListElement { text: "Inverted Landscape"; orientation: Qt.InvertedLandscapeOrientation; rotation: 270 }
        }
    }
}

This gets me really close, but I have two problems with the QML Drawer component. 1. When setting the edge property, the position is incorrect; 2. the "drag" directions are not rotated. Are there any solutions to these issues?