Rotate text 90°/270° in vertical panels

[Zren]

https://www.pling.com/u/dzwiedziu/ asked if I could optionally make text rotate

This isn't a trivial as setting rotation: 270 https://doc.qt.io/qt-5/qml-qtquick-item.html#rotation-prop

Nor is it easy as creating a container around the Text and setting the container's implicitWidth/implicitHeight.

I'm not really interested in adding this feature, so feel free to play around with this code.

Save it as ~/Desktop/test.qml then run qmlscene ~/Desktop/test.qml to run the test.qml. Feel free to find a solution then modify ~/.local/share/plasma/plasmoids/com.github.zren.commandoutput/ and test with https://zren.github.io/kde/docs/widget/#testing.

import QtQuick 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.0

Window {
    width: 640
    height: 480

    ColumnLayout {
        anchors.fill: parent

        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "red"
        }

        // Text {
        //  id: label
        //  property bool isRotated: label.rotation == 90 || label.rotation == 270
        //  rotation: 270
        //  text: "Test really long text"
        //  wrapMode: Text.Wrap
        // }

        Item {
            id: labelContainer
            implicitWidth: label.isRotated ? label.implicitHeight : label.implicitWidth
            implicitHeight: label.isRotated ? label.implicitWidth : label.implicitHeight

            Text {
                id: label
                property bool isRotated: label.rotation == 90 || label.rotation == 270
                rotation: 270
                text: "Test really long text"
            }
        }

        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "green"
        }
    }
}

We could also look into wrapMode: Text.WrapAnywhere

https://doc.qt.io/qt-5/qml-qtquick-text.html#wrapMode-prop