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